@charset "UTF-8";
/* CSS Document */
body {
	margin: 0px;
	padding: 0px;
}
img, video {
	display: block;
}

@media only screen and (min-width: 1200px) {
	
	.crawl img {
		width: 100%;
		height: auto;
	}
	
	.top {
		position: fixed;
		right: 2.9vw;
		bottom: 0.5vw;
		transform: rotateZ(-90deg);
		
		font-family: "avenir-lt-pro", sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 5.5vw;
		z-index: 100;
	}
	.top a:link, .top a:visited {
		color: #E0522C;
		text-decoration: none;
	}
	.top a:hover, .top a:active {
		color: #AEB623;
	}

	.info, .crawl, .footer {
		width: 100%;
		position: relative;
	}
	
	.back {
		position: absolute;
		top: 1vw;
		right: 2.2vw;

		z-index: 100;
		
		font-family: "avenir-lt-pro", sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 3vw;
	}
	.back a:link, .back a:visited {
		color: #E0522C;
		text-decoration: none;
	}
	.back a:hover, .back a:active {
		color: #AEB623;
	}

	.info, .works {
		display: grid;
		grid-template-columns: 35% 65%; 
		background-color: #F4F0E0;
		font-family: "avenir-lt-pro", sans-serif;
		font-style: normal;
		color: #453d63;
	}
	.info div {
		border: 3px solid #E0522C;
		padding: 10%;
	}

	.info p {
		font-weight: 300;
		font-size: 1.8vw;
	}
	.info .name {
		font-weight: 400;
		font-size: 3vw;
	}
	

	.info img, .works img {
		width: 100%;
		height: auto;
	}
	
	.info a:link, .info a:visited {
    	padding-left: 0.8vw;
		color: #453d63;
		font-size: 2.3vw;
   	}
	.info a:hover, .info a:active {
    	padding-left: 0.8vw;
		color: #E0522C;
		font-size: 2.3vw;
   	}
	
	.works .title {
		font-weight: 500;
		font-size: 2.3vw;
		text-align: right;
		padding-top: 3.8vw;
	}

	.works div {
		padding: 3.7vw;
	}
	
	.footer {
		display: grid;
		grid-template-columns: 20% 20% 20% 40%; 
		background-color: #c8c43d;
		
		font-family: "avenir-lt-pro", sans-serif;
		font-style: normal;
		color: #FFFFFF;
	}
	.footer p {
    	font-weight: 400;
		font-size: 1.6vw;
		padding: 13%;
	}

	.footer img {
		width: 90%;
		height: auto;
		
		margin-top: 4.6vw;
	}
	.copyright {
		position: absolute;
		right: 0px;
		bottom: 0px;

 		font-weight: 200;
		font-size: 1.3vw;
		padding-bottom: 1.3vw;
		padding-right: 2vw;
	}
}

@media only screen and (min-width: 601px) and (max-width: 1199px) {
	.crawl img {
		width: 100%;
		height: auto;
	}
	
	.top {
		position: fixed;
		right: 2.8vw;
		bottom: 0.5vw;
		transform: rotateZ(-90deg);
		
		font-family: "avenir-lt-pro", sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 5.5vw;
		z-index: 100;
	}
	.top a:link, .top a:visited {
		color: #E0522C;
		text-decoration: none;
	}
	.top a:hover, .top a:active {
		color: #AEB623;
	}

	.info, .crawl, .footer {
		width: 100%;
		position: relative;
	}

	.back {
		position: absolute;
		top: 1vw;
		right: 2.1vw;
		z-index: 100;
		
		font-family: "avenir-lt-pro", sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 3vw;

	}
	.back a:link, .back a:visited {
		color: #E0522C;
		text-decoration: none;
	}
	.back a:hover, .back a:active {
		color: #AEB623;
	}

	.info, .works {
		display: grid;
		grid-template-columns: 35% 65%; 
		background-color: #F4F0E0;
		
		font-family: "avenir-lt-pro", sans-serif;
		font-style: normal;
		color: #453d63;
	}
	.info div {
		border: 2px solid #E0522C;
		padding: 10%;
	}

	.info p {
		font-weight: 300;
		font-size: 1.8vw;
	}
	.info .name {
		font-weight: 400;
		font-size: 3vw;
	}
	

	.info img, .works img {
		width: 100%;
		height: auto;
	}
	
	.info a:link, .info a:visited {
    	padding-left: 0.8vw;
		color: #453d63;
		font-size: 2.3vw;
   	}
	.info a:hover, .info a:active {
    	padding-left: 0.8vw;
		color: #E0522C;
		font-size: 2.3vw;
   	}
	
	.works .title {
		font-weight: 500;
		font-size: 2.3vw;
		padding-top: 3.7vw;
		text-align: right;
	}

	.works div {
		padding: 3.6vw;
	}

	.footer {
		display: grid;
		grid-template-columns: 20% 20% 20% 40%; 
		background-color: #c8c43d;
		
		font-family: "avenir-lt-pro", sans-serif;
		font-style: normal;
		color: #FFFFFF;
	}
	.footer p {
		font-weight: 400;
		font-size: 1.6vw;
		padding: 14%;

	}

	.footer img {
		width: 90%;
		height: auto;
		
		margin-top: 4.8vw;
	}
	.copyright {
		position: absolute;
		right: 0px;
		bottom: 0px;
		
		font-weight: 200;
		font-size: 1.3vw;
		padding-bottom: 1.3vw;
		padding-right: 2vw;
	}
}

@media only screen and (max-width: 600px) {
	.crawl img {
		width: 100%;
		height: auto;
	}
	
	.top {
		position: fixed;
		right: 3.9vw;
		bottom: 0.5vw;
		transform: rotateZ(-90deg);
		z-index: 100;
		
		font-family: "avenir-lt-pro", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 10vw;
	}
	.top a:link, .top a:visited {
		color: #E0522C;
		text-decoration: none;
	}
	.top a:hover, .top a:active {
		color: #AEB623;
	}

	.info, .crawl, .footer {
		width: 100%;
		position: relative;
	}
	
	.back {
		position: absolute;
		top: 1.5vw;
		right: 2.8vw;
		z-index: 100;
		
		font-family: "avenir-lt-pro", sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 5vw;
	}
	.back a:link, .back a:visited {
		color: #E0522C;
		text-decoration: none;
	}
	.back a:hover, .back a:active {
		color: #AEB623;
	}

	.info, .works {
		background-color: #F4F0E0;
		
		font-family: "avenir-lt-pro", sans-serif;
		font-style: normal;
		color: #453d63;
	}
	.info div {
		border: 2px solid #E0522C;
		padding: 10%;
	}

	.info p {
		font-weight: 300;
		font-size: 3vw;
	}
	.info .name {
		font-weight: 400;
		font-size: 4.7vw;
	}

	.info img, .works img {
		width: 100%;
		height: auto;
	}
	
	.info a:link, .info a:visited {
    	padding-left: 0.8vw;
		color: #453d63;
		font-size: 3.5vw;
   	}
	.info a:hover, .info a:active {
    	padding-left: 0.8vw;
		color: #E0522C;
		font-size: 3.5vw;
   	}

	.works .title{
		font-weight: 500;
		font-size: 3.7vw;
		text-align: right;
		margin-bottom: -25px;
	}
	.works div {
		padding: 3.8vw;
	}
	
	.footer {
		background-color: #c8c43d;
		font-family: "avenir-lt-pro", sans-serif;
		font-style: normal;
		color: #FFFFFF;
	}
	.footer .hide {
		display: none;
	}

	.footer img {
		width: 70%;
		height: auto;
		padding: 5vw;
	}
	.copyright {
		position: absolute;
		right: 0px;
		bottom: 0px;

		font-weight: 200;
		font-size: 2.5vw;
		padding-bottom: 2vw;
		padding-right: 3vw;
	}
}