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

.cont1k {
	margin: 0;
	max-width: inherit;
	width: 100%;
	padding: 0;
}

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

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

#energy_dinosaurs img {
	max-width: none;
}

.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: 900px;
}

#select .pc_frame {
	padding-bottom: 940px;
}

#d_tanker .pc_frame,
#d_tank .pc_frame,
#d_fire .pc_frame,
#d_wind .pc_frame {
	padding-bottom: 640px;
}

#handbook .pc_frame {
	padding-bottom: 700px;
}

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

@media screen and (max-width: 850px) {
	.frame {
		margin-bottom: 6%;
	}

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

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

	#select .pc_frame {
		padding-bottom: 138%;
	}

	#d_tanker .pc_frame,
	#d_tank .pc_frame,
	#d_fire .pc_frame,
	#d_wind .pc_frame {
		padding-bottom: 132.9%;
	}

	#handbook .pc_frame {
		padding-bottom: 104%;
	}

	#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/dinosaurs/title/bg-space.png) 0 0 no-repeat;
	background-size: 100% 100%;
}

#title .star_01 {
	position: absolute;
	top: 0;
	left: 7.6%;
	padding-top: 1.5%;
	width: 82.6%;
}

#title .star_02 {
	position: absolute;
	top: 0;
	left: 9%;
	margin-top: 3%;
	width: 81.3%;
}

#title .star_03 {
	position: absolute;
	top: 0;
	left: 6.8%;
	margin-top: 3%;
	width: 83.2%;
}

#title .title_set {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	margin-top: 4.5%;
}

#title .title {
	margin-left: 24.7%;
	width: 51.65%;
}

#title .title .title_img {
	width: 100%;
}

#title .title_wink1 {
	position: absolute;
	top: 0;
	left: 32.9%;
	margin-top: 23.1%;
	width: 5.8%;
}

#title .title_wink2 {
	position: absolute;
	top: 0;
	left: 70.2%;
	margin-top: 24.3%;
	width: 5.3%;
}

#title .earth {
	position: absolute;
	top: 0;
	left: 25.9%;
	margin-top: 37.5%;
	width: 46.4%;
}

#title .bnr_summer {
	position: absolute;
	bottom: 0;
	left: 5.1%;
	margin-bottom: 3.7%;
	width: 22%;
}

#title .bnr_zeroemission {
	position: absolute;
	bottom: 0;
	right: 5.1%;
	margin-bottom: 3.7%;
	width: 22%;
}

#title .bnr_summer img,
#title .bnr_zeroemission img {
	width: 100%;
}

#title a img {
	transition: transform 0.3s;
	backface-visibility: hidden;
}

#title a:hover img {
	transform: scale(1.1);
}

@media screen and (max-width: 1120px) {
	#title .bnr_summer {
		left: 2.1%;
		margin-bottom: 2.7%;
		width: 25%;
	}

	#title .bnr_zeroemission {
		right: 2.1%;
		margin-bottom: 2.7%;
		width: 25%;
	}
}

@media screen and (max-width: 850px) {
	#title .title_set {
		width: 120%;
		left: -10%;
		margin-top: 9.5%;
	}

	#title .earth {
		left: 23.9%;
		margin-top: 50.5%;
		width: 50.4%;
	}

	#title .bnr_summer {
		width: 33%;
	}

	#title .bnr_zeroemission {
		width: 33%;
	}

}



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

#select .pc_frame {
	background: url(/static/files/dinosaurs/select/bg-map.png) left 0 bottom 10% no-repeat;
	background-size: 100%;
}

#select .copy_01 {
	position: absolute;
	top: 0;
	left: 13.4%;
	margin-top: 8.6%;
	width: 73.1%;
	transform-origin: bottom;
}

#select .copy_02 {
	position: absolute;
	top: 0;
	left: 27.2%;
	margin-top: 16%;
	width: 45.3%;
	transform-origin: bottom;
}

#select .dot_circle_01 {
	position: absolute;
	bottom: 0;
	left: 24.4%;
	margin-bottom: 38.4%;
	width: 18.9%;
}

#select .dot_circle_02 {
	position: absolute;
	bottom: 0;
	left: 56.5%;
	margin-bottom: 38.4%;
	width: 18.9%;
}

#select .dot_circle_03 {
	position: absolute;
	bottom: 0;
	left: 24.4%;
	margin-bottom: 11.2%;
	width: 18.9%;
}

#select .dot_circle_04 {
	position: absolute;
	bottom: 0;
	left: 56.5%;
	margin-bottom: 11.2%;
	width: 18.9%;
}

#select .tanker-s_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 38.5%;
	margin-left: 22.6%;
	width: 24.8%;
	transform-origin: bottom;
}

#select .tanker-s {
	width: 100%;
}

#select .tanker-s_name_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 34.3%;
	width: 100%;
	transform-origin: bottom;
}

#select .tanker-s_name {
	margin-bottom: 0.2%;
	margin-left: 23.5%;
	width: 18.1%;
}

#select .tanktops_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 38.9%;
	margin-left: 53.9%;
	width: 23.5%;
	transform-origin: bottom;
}

#select .tanktops {
	width: 100%;
}

#select .tanktops_name_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 34.3%;
	width: 100%;
	transform-origin: bottom;
}

#select .tanktops_name {
	margin-bottom: 0.2%;
	margin-left: 58%;
	width: 13.1%;
}

#select .firedon_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 10%;
	margin-left: 18.5%;
	width: 30.4%;
	transform-origin: bottom;
}

#select .firedon {
	width: 100%;
}

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

#select .firedon_name {
	margin-bottom: 0.2%;
	margin-left: 25.9%;
	width: 13.8%;
}

#select .windon_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 10.7%;
	margin-left: 52.9%;
	width: 28.2%;
	transform-origin: bottom;
}

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

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

#select .windon_name {
	margin-bottom: 0.2%;
	margin-left: 59.1%;
	width: 11.3%;
}

#select .icon_arrow {
	display: inline-block;
	position: relative;
	width: 2.6%;
	height: 0;
	padding-bottom: 2.6%;
	margin-left: 2px;
	background: url(/static/files/dinosaurs/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: 850px) {
	#select {
		width: 100%;
	}

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

	#select .copy_01 {
		left: 23.4%;
		margin-top: 6.9%;
		width: 53.1%;
	}

	#select .copy_02 {
		left: 20.2%;
		margin-top: 22.3%;
		width: 59.3%;
	}

}



/* ---- d_tanker ----*/

#d_tanker .pc_frame {
	background: #49b3b5 url(/static/files/dinosaurs/d_tanker/bg-sea-002.png) 0 bottom no-repeat;
	background-size: 100%;
}

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

#d_tanker .tanker_01_set {
	position: absolute;
	bottom: 0;
	margin-bottom: -1.9%;
	width: 100%;
	transform-origin: bottom;
}

#d_tanker .tanker_01 {
	margin-left: 32.8%;
	width: 58.1%;
}

#d_tanker .tanker_01_wink {
	position: absolute;
	top: 0;
	left: 74.8%;
	margin-top: 2.6%;
	width: 2.3%;
	opacity: 0;
}

#d_tanker .tanker_02 {
	position: absolute;
	bottom: 0;
	left: 4.8%;
	margin-bottom: 23%;
	width: 24.1%;
}

#d_tanker .dina {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: -8%;
	width: 76.8%;
}

#d_tanker .wave {
	position: absolute;
	bottom: 0;
	left: 21.7%;
	margin-bottom: 16.5%;
	width: 24.3%;
}

#d_tanker .name {
	position: absolute;
	top: 0;
	left: 4.8%;
	margin-top: 2.8%;
	width: 43.2%;
}

#d_tanker .desc {
	position: absolute;
	top: 0;
	left: 4.8%;
	margin-top: 10.6%;
	width: 44.6%;
}

@media screen and (max-width: 1120px) {
	#d_tanker .tanker_01_set {
		left: -4%;
	}

	#d_tanker .dina {
		left: 2%;
		margin-bottom: -10%;
	}

	#d_tanker .name {
		margin-left: calc((1120px - 100vw) / 2);
	}

	#d_tanker .desc {
		margin-left: calc((1120px - 100vw) / 2);
	}
}

@media screen and (max-width: 850px) {
	#d_tanker .name {
		position: absolute;
		top: 0;
		left: 16.2%;
		margin-top: 4.2%;
		margin-left: 0;
		width: calc(43.2% * 1.5);
	}

	#d_tanker .desc {
		position: absolute;
		top: 0;
		left: 16.2%;
		margin-top: 15.5%;
		margin-left: 0;
		width: calc(59.4% * 1.13);
	}
}


/* ---- d_tank ----*/

#d_tank .pc_frame {
	background: #e6e9d9 url(/static/files/dinosaurs/d_tank/bg-sky.png) 0 top no-repeat;
	background-size: 100%;
}

#d_tank .field {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

#d_tank .tank_01_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 4.7%;
	width: 100%;
	transform-origin: bottom;
}

#d_tank .tank_01 {
	margin-left: 17.1%;
	width: 39.4%;
	transform-origin: bottom;
}

#d_tank .tank_01_wink {
	position: absolute;
	top: 0;
	left: 21.8%;
	margin-top: 14.5%;
	width: 8.8%;
	opacity: 0;
}

#d_tank .tank_02_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 4.1%;
	width: 100%;
	transform-origin: bottom;
}

#d_tank .tank_02 {
	margin-left: 51.6%;
	width: 14.7%;
	transform-origin: bottom;
}

#d_tank .tank_02_wink {
	position: absolute;
	top: 0;
	left: 53.0%;
	margin-top: 4.7%;
	width: 3.8%;
	opacity: 0;
}

#d_tank .tank_03_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 6%;
	width: 100%;
	transform-origin: bottom;
}

#d_tank .tank_03 {
	margin-left: 5.9%;
	width: 14.7%;
	transform-origin: bottom;
}

#d_tank .tank_03_wink {
	position: absolute;
	top: 0;
	left: 7.4%;
	margin-top: 4.7%;
	width: 3.8%;
	opacity: 0;
}

#d_tank .dina {
	position: absolute;
	bottom: 0;
	left: 67.7%;
	margin-bottom: 3.3%;
	width: 22.9%;
	transform-origin: bottom;
}

#d_tank .grass_01 {
	position: absolute;
	bottom: 0;
	left: 2.1%;
	margin-bottom: -6.2%;
	width: 95.8%;
}

#d_tank .grass_02 {
	position: absolute;
	bottom: 0;
	left: 1%;
	margin-bottom: -6.2%;
	width: 97.6%;
}

#d_tank .name {
	position: absolute;
	top: 0;
	left: 51.6%;
	margin-top: 4.7%;
	width: 31.1%;
}

#d_tank .desc {
	position: absolute;
	top: 0;
	left: 51.6%;
	margin-top: 12.1%;
	width: 44.6%;
}

@media screen and (max-width: 1120px) {
	#d_tank .field {
		width: 120%;
		left: -3%;
	}

	#d_tank .tank_01_set {
		margin-bottom: 5.7%;
		left: 3%;
	}

	#d_tank .tank_02_set {
		margin-bottom: 5.1%;
		left: 3%;
	}

	#d_tank .tank_03_set {
		margin-bottom: 7%;
		left: 5%;
	}

	#d_tank .dina {
		margin-bottom: 2.3%;
	}

	#d_tank .name {
		left: 51.6vw;
	}

	#d_tank .desc {
		left: 51.6vw;
	}
}

@media screen and (max-width: 850px) {
	#d_tank .name {
		position: absolute;
		top: 0;
		left: 16.2%;
		margin-top: 4.2%;
		width: calc(31.1% * 1.5);
	}

	#d_tank .desc {
		position: absolute;
		top: 0;
		left: 16.2%;
		margin-top: 16.5%;
		width: calc(52.2% * 1.13);
	}
}


/* ---- d_fire ----*/

#d_fire .pc_frame {
	background: #f4eecc url(/static/files/dinosaurs/d_fire/bg-sky.png) 0 top no-repeat;
	background-size: 100%;
}

#d_fire .field {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

#d_fire .eruption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 52.5%;
	margin-bottom: 25.1%;
	transform-origin: 22% 100%;
}

#d_fire .firedon_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 2.8%;
	width: 100%;
	transform-origin: bottom;
}

#d_fire .firedon {
	position: relative;
	margin-left: 23.3%;
	width: 46.7%;
}

#d_fire .firedon_wink {
	position: absolute;
	top: 0;
	left: 53.2%;
	margin-top: 7.1%;
	width: 3.8%;
	opacity: 0;
}

#d_fire .fire_01 {
	position: absolute;
	top: 0;
	left: 12.3%;
	margin-top: -5%;
	width: 24.1%;
	transform-origin: bottom;
}

#d_fire .fire_02 {
	position: absolute;
	top: 0;
	left: 30.6%;
	margin-top: 2.5%;
	width: 21.3%;
	transform-origin: bottom;
}

#d_fire .steam_01 {
	position: absolute;
	top: 0;
	left: 39.4%;
	margin-top: -9.1%;
	width: 10.6%;
	transform-origin: bottom right;
}

#d_fire .steam_02 {
	position: absolute;
	top: 0;
	left: 48.7%;
	margin-top: -13.8%;
	width: 9%;
	transform-origin: bottom right;
}

#d_fire .steam_03 {
	position: absolute;
	top: 0;
	left: 65.5%;
	margin-top: -0.8%;
	width: 13%;
	transform-origin: bottom left;
}

#d_fire .steam_04 {
	position: absolute;
	top: 0;
	left: 68.8%;
	margin-top: 2.7%;
	width: 22.1%;
	transform-origin: bottom left;
}

#d_fire .dina {
	position: absolute;
	bottom: 0;
	left: 74.4%;
	margin-bottom: 5.9%;
	width: 17.6%;
	transform-origin: bottom;
}

#d_fire .name {
	position: absolute;
	top: 0;
	left: 55.2%;
	margin-top: 2.4%;
	width: 30.9%;
}

#d_fire .desc {
	position: absolute;
	top: 0;
	left: 55.2%;
	margin-top: 9.9%;
	width: 42.1%;
}

@media screen and (max-width: 1120px) {
	#d_fire .field {
		left: 5%;
	}

	#d_fire .eruption {
		left: 5%;
	}

	#d_fire .firedon_set {
		left: 3%;
	}

	#d_fire .dina {
		left: 70.4%;
	}

	#d_fire .name {
		left: 55.2vw;
	}

	#d_fire .desc {
		left: 55.2vw;
	}
}

@media screen and (max-width: 850px) {
	#d_fire .name {
		position: absolute;
		top: 0;
		left: 16.2%;
		margin-top: 3.2%;
		width: calc(30.9% * 1.5);
	}

	#d_fire .desc {
		position: absolute;
		top: 0;
		left: 16.2%;
		margin-top: 13.5%;
		width: calc(50.8% * 1.13);
	}
}


/* ---- d_wind ----*/

#d_wind .pc_frame {
	background: url(/static/files/dinosaurs/d_wind/bg-sky.png) 0 top no-repeat,
							url(/static/files/dinosaurs/d_wind/bg-field.png) right bottom no-repeat;
	background-size: 100%, 100%;
	background-color: #0092bf;
}

#d_wind .field {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

#d_wind .wind_01_mask {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 7.4%;
	width: 100%;
	overflow: hidden;
}

#d_wind .wind_02_mask {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 7.8%;
	width: 100%;
	overflow: hidden;
}

#d_wind .wind_03_mask {
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: 15.4%;
	width: 70.7%;
	overflow: hidden;
}

#d_wind .wind_01,
#d_wind .wind_02,
#d_wind .wind_03 {
	width: 100%;
}

#d_wind .windon_01_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 1.2%;
	width: 100%;
	transform-origin: 20% 50%;
}

#d_wind .windon_01 {
	position: relative;
	margin-left: 9.5%;
	width: 56.3%;
	transform-origin: bottom;
}

#d_wind .windon_01_wink {
	position: absolute;
	top: 0;
	left: 17.3%;
	margin-top: 20.5%;
	width: 1.6%;
	opacity: 0;
}

#d_wind .windon_02 {
	position: absolute;
	bottom: 0;
	left: 18.9%;
	margin-bottom: 34%;
	width: 9.4%;
	transform-origin: 0% 50%;
}

#d_wind .dina {
	position: absolute;
	bottom: 0;
	left: 64.3%;
	margin-bottom: 2.9%;
	width: 24.3%;
	transform-origin: bottom;
}

#d_wind .jerabo {
	position: absolute;
	bottom: 0;
	left: 57%;
	margin-bottom: 17.6%;
	width: 7.2%;
	transform-origin: bottom;
}

#d_wind .name {
	position: absolute;
	top: 0;
	left: 52.9%;
	margin-top: 4.6%;
	width: 26.2%;
}

#d_wind .desc {
	position: absolute;
	top: 0;
	left: 53.4%;
	margin-top: 12.1%;
	width: 40.8%;
}

@media screen and (max-width: 1120px) {
	#d_wind .pc_frame {
		background-size: 100%, 110%;
	}

	#d_wind .windon_01_set {
		margin-bottom: 4.2%;
		left: 6%;
	}

	#d_wind .jerabo {
		margin-bottom: 21.6%;
	}

	#d_wind .name {
		left: 52.9vw;
	}

	#d_wind .desc {
		left: 53.4vw;
	}
}

@media screen and (max-width: 850px) {
	#d_wind .name {
		position: absolute;
		top: 0;
		left: 16.2%;
		margin-top: 3.2%;
		width: calc(26.2% * 1.5);
	}

	#d_wind .desc {
		position: absolute;
		top: 0;
		left: 16.2%;
		margin-top: 13.5%;
		width: calc(58.8% * 1.13);
	}
}


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

#handbook .pc_frame {
	background: url(/static/files/dinosaurs/handbook/bg-grade.png) left 0 bottom -1px no-repeat;
	background-size: 100%;
	background-color: #01528b;
}

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

#handbook .txt_01 {
	position: absolute;
	bottom: 0;
	left: 19.4%;
	margin-bottom: 50.5%;
	width: 60.8%;
}

#handbook .dina {
	position: absolute;
	bottom: 0;
	left: 12.9%;
	margin-bottom: -2%;
	width: 11.3%;
	transform-origin: bottom;
}

#handbook .ena {
	position: absolute;
	bottom: 0;
	left: 21.2%;
	margin-bottom: -3.7%;
	width: 11.4%;
	transform-origin: bottom;
}

#handbook .jerabo {
	position: absolute;
	bottom: 0;
	left: 81.1%;
	margin-bottom: 19.6%;
	width: 7.6%;
	transform-origin: bottom;
}

#handbook .btn_handbook_dl {
	position: absolute;
	bottom: 0;
	left: 22.8%;
	margin-bottom: 31.2%;
	width: 55.1%;
	transition: all 0.3s;
	backface-visibility: hidden;
}

#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: 1120px) {
	#handbook .dina {
		left: 13.9%;
	}

	#handbook .ena {
		left: 22.2%;
	}

	#handbook .jerabo {
		left: 76.1%;
	}

}

@media screen and (max-width: 850px) {
	#handbook .txt_01 {
		left: 21%;
		margin-bottom: 59.5%;
		width: 58.3%;
	}

	#handbook .btn_handbook_dl {
		left: 16.7%;
		margin-bottom: 33.2%;
		width: 67.5%;
	}

}