/*.main_container {
	float:left;
	overflow: hidden;
	display: grid;
	grid-template-columns: 52px 131px 135px 70px 61px auto auto;
	grid-template-rows: 317px 131px 131px auto;
	grid-auto-columns: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas:
		"head head head head blank main2 nobishiro"
		"white r_hand body body body main2 nobishiro"
		"blank2 r_hand r_leg l_leg l_leg main2 nobishiro"
		"white3 white3 r_leg l_leg l_leg main2 nobishiro"
}*/
.main_container {
	background-color: #eee;
}

@media (980px < width) {
	.main_container {
		float:left;
		overflow: hidden;
		display: grid;
		grid-template-columns: 52px 131px 135px 70px 61px auto auto;
		grid-template-rows: 317px 131px 131px auto;
		grid-auto-columns: 1fr;
		gap: 0px 0px;
		grid-auto-flow: row;
		grid-template-areas:
			"head head head head blank main2 nobishiro"
			"white r_hand body body body main2 nobishiro"
			"blank2 r_hand r_leg l_leg l_leg main2 nobishiro"
			"white3 white3 r_leg l_leg l_leg main2 nobishiro"
	}
}

@media screen and (max-width: 980px) {
	.main_container {
		float:left;
		overflow: hidden;
        width: 100%;
		display: grid;
		grid-template-columns: 52px 131px 135px 70px 61px auto;
		grid-template-rows: 317px 131px 131px 133px auto;
		grid-auto-columns: 1fr;
		gap: 0px 0px;
		grid-auto-flow: row;
		grid-template-areas:
			"head head head head blank main2"
			"white r_hand body body body main2"
			"blank2 r_hand r_leg l_leg l_leg main2"
			"white3 white3 r_leg l_leg l_leg main2"
			"nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro"
	}
	.main2 {
		justify-content: end;
	}
	.main2 img {
	    height: 100%;
	}
}

@media screen and (max-width: 780px) {
	.main_container {
		float:left;
		overflow: hidden;
		display: grid;
		grid-template-columns: 31px 78px 81px 42px 36px auto;
		grid-template-rows: 190px 78px 78px 80px auto;
		grid-auto-columns: 1fr;
		gap: 0px 0px;
		grid-auto-flow: row;
		grid-template-areas:
			"head head head head blank main2"
			"white r_hand body body body main2"
			"blank2 r_hand r_leg l_leg l_leg main2"
			"white3 white3 r_leg l_leg l_leg main2"
			"nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro"
	}
		.main_container img {
			width: 100%;
		}
		.main_container .main2 img {
			height: 100%;
			min-width: 150px;
		}

}

@media screen and (max-width: 620px) {
	.main_container {
		float:left;
		overflow: hidden;
		display: grid;
		grid-template-columns: 31px 78px 81px 42px 36px auto;
		grid-template-rows: 190px 78px 78px 80px auto;
		grid-auto-columns: 1fr;
		gap: 0px 0px;
		grid-auto-flow: row;
		grid-template-areas:
			"head head head head blank main2"
			"white r_hand body body body main2"
			"blank2 r_hand r_leg l_leg l_leg main2"
			"white3 white3 r_leg l_leg l_leg main2"
			"nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro"
	}
		.main_container img {
			width: 100%;
		}
		.main_container .main2 img {
			height: 100%;
			min-width: 150px;
		}
}

@media screen and (max-width: 410px) {
	.main_container {
		float:left;
		overflow: hidden;
		display: grid;
		grid-template-columns: calc(31px*.8) calc(78px*.8) calc(81px*.8) calc(42px*.8) calc(36px*.8) auto;
		grid-template-rows: calc(190px*.8) calc(78px*.8) calc(78px*.8) calc(80px*.8) auto;
		grid-auto-columns: 1fr;
		gap: 0px 0px;
		grid-auto-flow: row;
		grid-template-areas:
			"head head head head blank main2"
			"white r_hand body body body main2"
			"blank2 r_hand r_leg l_leg l_leg main2"
			"white3 white3 r_leg l_leg l_leg main2"
			"nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro"
	}
		.main_container img {
			width: 100%;
		}
		.main_container .main2 img {
			height: 100%;
			min-width: 150px;
		}
}

/*iOS横向き*/
.iphone , ipad {
@media screen and (orientation: landscape) {
	.main_container {
		float:left;
		overflow: hidden;
		display: grid;
		grid-template-columns: 31px 78px 81px 42px 36px auto;
		grid-template-rows: 190px 78px 78px 80px auto;
		grid-auto-columns: 1fr;
		gap: 0px 0px;
		grid-auto-flow: row;
		grid-template-areas:
			"head head head head blank main2"
			"white r_hand body body body main2"
			"blank2 r_hand r_leg l_leg l_leg main2"
			"white3 white3 r_leg l_leg l_leg main2"
			"nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro nobishiro"
	}
	.main_container img {
		width: 100%;
	}
	.main_container .main2 img {
		height: 100%;
		min-width: 100px;
	}
}
}

.head {
	grid-area: head;
	animation: fadeInLeft;
	animation-duration: 1s;
	background-color: #1fe0;
}

.blank {
	grid-area: blank;
	background-color: #1fe0;
}

.white {
	grid-area: white;
	animation: fadeInLeft;
	animation-duration: 1s;
	background-color: #1fe0;
}

.r_hand {
	grid-area: r_hand;
	animation: fadeInUp;
	animation-duration: 0.8s;
	background-color: #1fe0;
}

.body {
	grid-area: body;
	animation: fadeInRight;
	animation-duration: 1s;
	background-color: #1fe0;
}

.blank2 {
	grid-area: blank2;
	background-color: #1fe0;
}

.r_leg {
	grid-area: r_leg;
	animation: fadeInUp;
	animation-duration: 1s;
	background-color: #1fe0;
}

.l_leg {
	grid-area: l_leg;
	animation: fadeInUp;
	animation-duration: 1.5s;
	background-color: #1fe0;
}

.white2 {
	grid-area: white2;
	background-color: #1fe0;
}

.main2 {
	opacity: 0;
	grid-area: main2;
	animation: fadeIn;
	animation-duration: 1.5s;
	animation-delay: 0.9s;
	animation-fill-mode:forwards;
//	place-content: center;
	background-color: #1fe0;
//    margin-top: 40px;
}

.nobishiro {
	opacity: 0;
	grid-area: nobishiro;
	min-width: 200px;
	animation: fadeIn;
	animation-duration: 1.5s;
	animation-delay: 0.9s;
	animation-fill-mode:forwards;
	place-content: center;
	background-color: #1fe0;
//    margin-top: 21px;
    width: 100%;
}

@media screen and (max-width: 980px) {
	.nobishiro {
	    margin-top: 20px;
    	width: 80vw;
	}
}

.white3 {
	grid-area: white3;
	animation: fadeInLeft;
	animation-duration: 1.8s;
	animation-timing-function: cubic-bezier(.63,0,.21,1);
	background-color: #1fe0;
}

.left_dummy {
	float: right;
    background-color: #eee;
    clear: both;
    padding-top: 100vh;
    margin-top: -100vh;
    padding-left: 20%;
}