@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: 3vw;
		bottom: 0.5vw;
		transform: rotateZ(-90deg);
		z-index: 100;
	}
	.top a:link, .top a:visited {
		color: #F26A35;
		font-family: "futura-pt", sans-serif;
		text-decoration: none;
		font-weight: 700;
		font-style: normal;
		font-size: 5vw;
	}
	.top a:hover, .top a:active {
		color: #AEB623;
		font-family: "futura-pt", sans-serif;
		text-decoration: none;
		font-weight: 700;
		font-style: normal;
		font-size: 5vw;
	}

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

		z-index: 100;
	}
	.back a:link, .back a:visited {
		color: #F26A35;
		font-family: "futura-pt", sans-serif;
		text-decoration: none;
		font-weight: 700;
		font-style: normal;
		font-size: 3vw;
	}
	.back a:hover, .back a:active {
		color: #AEB623;
		font-family: "futura-pt", sans-serif;
		text-decoration: none;
		font-weight: 700;
		font-style: normal;
		font-size: 3vw;
	}

	.info, .works {
		display: grid;
		grid-template-columns: 35% 65%; 
		background-color: black;
		
	}
	.info div {
		border: 1px solid white;
		padding: 10%;
	}

	.info p {
		color: white;
		font-family: interstate-condensed, sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 1.8vw;
	}
	.info .name {
    color: white;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3vw;
	}
	

	.info img, .works img {
		width: 100%;
		height: auto;
	}
	
	.info a:link, .info a:visited {
    padding-left: 0.5vw;
    color: #AEB623;
    font-size: 2.3vw;
   	}
	.info a:hover, .info a:active {
    	padding-left: 0.5vw;
		color: #F26A35;
		font-size: 2.3vw;
   	}
	
	.works .title {
		color: white;
		font-family: "futura-pt", sans-serif;
		font-weight: 450;
		font-style: normal;
		font-size: 2.1vw;
		padding-top: 4vw;
	}
	.works p{
		display: none;
	}
	.works div {
		padding: 6.5%;
	}

	.works {
		text-align: right;
	}
	
	.footer {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%; 
		background-color: #476D21;
		width: 100%;
		height: auto;
		background-image: url(../newimage/web_background_footer.gif);
	background-repeat:no-repeat;
	background-size:cover;
	}
	.footer p {
		font-family: interstate-condensed, sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 1.6vw;
		padding: 20%;

	}
	.footer .middle {
		display: flex;

		align-items: center;
	}
	.footer .middle img {
		width: 80%;
		height: auto;
	}
	.copyright {
		position: absolute;
		right: 0px;
		bottom: 0px;
		color: #FFFFFF;
		font-family: "futura-pt", sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 1.3vw;
		padding-bottom: 1vw;
		padding-right: 2vw;
	}
}

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

	.info, .crawl, .footer {
		width: 100%;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}

	.back {
		position: absolute;
		top: 1vw;
		right: 2.1vw;

		z-index: 100;
	}
	.back a:link, .back a:visited {
		color: #F26A35;
		font-family: "futura-pt", sans-serif;
		text-decoration: none;
		font-weight: 700;
		font-style: normal;
		font-size: 3.5vw;
	}
	.back a:hover, .back a:active {
		color: #AEB623;
		font-family: "futura-pt", sans-serif;
		text-decoration: none;
		font-weight: 700;
		font-style: normal;
		font-size: 3.5vw;
	}

	.info, .works {
		display: grid;
		grid-template-columns: 35% 65%; 
		background-color: black;
		
	}
	.info div {
		border: 1px solid white;
		padding: 10%;
	}

	.info p {
		color: white;
		font-family: interstate-condensed, sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 1.8vw;
	}
	.info .name {
    color: white;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3vw;
	}
	

	.info img, .works img {
		width: 100%;
		height: auto;
	}
	
	.info a:link, .info a:visited {
    padding-left: 0.5vw;
    color: #AEB623;
    font-size: 2.3vw;
   	}
	.info a:hover, .info a:active {
    	padding-left: 0.5vw;
		color: #F26A35;
		font-size: 2.3vw;
   	}
	
	.works .title {
		color: white;
		font-family: "futura-pt", sans-serif;
		font-weight: 450;
		font-style: normal;
		font-size: 2.1vw;
		padding-top: 4vw;
	}
	.works p{
		display: none;
	}
	.works div {
		padding: 6.5%;
	}

	.works {
		text-align: right;
	}
	
	.footer {
		display: grid;
		grid-template-columns: 20% 20% 20% 40%; 
		background-color: #476D21;
	}
	.footer p {
		font-family: interstate-condensed, sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 1.8vw;
		padding: 20%;

	}
	.footer .middle {
		display: flex;

		align-items: center;
	}
	.footer .middle img {
		width: 100%;
		height: auto;
	}
	.copyright {
		position: absolute;
		right: 0px;
		bottom: 0px;
		color: #FFFFFF;
		font-family: "futura-pt", sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 1.7vw;
		padding-bottom: 1vw;
		padding-right: 2vw;
	}
}

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

	.info, .crawl, .footer {
		width: 100%;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}
	
	.back {
		position: absolute;
		top: 1vw;
		right: 1.6vw;

		z-index: 100;
	}
	.back a:link, .back a:visited {
		color: #F26A35;
		font-family: "futura-pt", sans-serif;
		text-decoration: none;
		font-weight: 700;
		font-style: normal;
		font-size: 6vw;
	}
	.back a:hover, .back a:active {
		color: #AEB623;
		font-family: "futura-pt", sans-serif;
		text-decoration: none;
		font-weight: 700;
		font-style: normal;
		font-size: 6vw;
	}

	.info, .works {
		background-color: black;
	}
	.info div {
		border: 1px solid white;
		padding: 10%;
	}

	.info p {
		color: white;
		font-family: interstate-condensed, sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 3vw;
	}
	.info .name {
    color: white;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4.7vw;
	}
	

	.info img, .works img {
		width: 100%;
		height: auto;
	}
	
	.info a:link, .info a:visited {
    padding-left: 0.5vw;
    color: #AEB623;
    font-size: 3.5vw;
   	}
	.info a:hover, .info a:active {
    	padding-left: 0.5vw;
		color: #F26A35;
		font-size: 3.5vw;
   	}
	.works .title {
		display: none;
	}
	.works p {
		color: black;
		font-family: "futura-pt", sans-serif;
		font-weight: 450;
		font-style: normal;
		font-size: 3.7vw;
	}
	.works div {
		padding: 6%;
	}

	.works {
		text-align: right;
	}
	
	.footer {
		background-color: #476D21;
	}
	.footer .hide {
		display: none
	}
	.footer .middle {
		display: flex;
		align-items: center;
	}
	.footer .middle img {
		width: 100%;
		height: auto;
		
	}
	.copyright {
		position: absolute;
		right: 0px;
		bottom: 0px;
		color: #FFFFFF;
		font-family: "futura-pt", sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 2.5vw;
		padding-bottom: 1vw;
		padding-right: 2vw;
	}
}