@charset "UTF-8";
/* CSS Document */
.under{
	padding-top: 100px;
}
.mv_wrap{
	position: relative;
	padding: 0;
}
.mv_wrap .mv_box{
	width: 70vw;
	max-width: 1000px;
	margin: 0 0 0 auto;
}
.main_box{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}
.h1wrap{
	position: absolute;
	left: 15vw;
	top: 50%;
	transform: translateY(-50%);
}
h1.ttl01{
	color: #4D3300;
	font-size: 8rem;
	line-height: 1;
	margin-bottom: 1rem;
}
h2.ttl02{
	font-size: 4rem;
	position: relative;
	z-index: 1;
	line-height: 1;
	margin-bottom: 3rem;
}
h2.ttl02::before{
	display: block;
	content: "Mobile Farming";
	font-size: 5rem;
	color: #eee;
	opacity: .5;
	position: absolute;
	left: 10%;
	top: -75%;
	z-index: -1
}
h3.ttl03{
	font-size: 2.4rem;
	line-height: 1;
	margin-bottom: 2rem;
}
/*team*/
.team .content_box, .projects .content_box, .contact .content_box{
	padding-top: 10rem;
}
.team .content_box .catchbox, .projects .content_box .catchbox, .contact .content_box .catchbox{
	margin-bottom: 15rem;
	font-size: 2rem;
}
.team h2.ttl02::before{
	color: #fff;
}
.revival h2.ttl02::before{
	content: "Akiya Revival";
}
.creative h2.ttl02::before{
	content: "Creative Cocoon";
}
.team .txt_box.fadeIn{
	animation: fadeInAnime 1.2s forwards .5s;
}
.team .img_box.blur{
	animation: blurAnime 1.2s forwards 1s;
}
.team .content_box ul li{
	position: relative;
	padding: 5rem 0;
	margin-bottom: 20rem;
}
.team .content_box ul li::before{
	display: block;
	content: "";
	background-image: url("../img/team_farming_bg.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 140%;
	width: 75vw;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}
.team .content_box ul li:nth-child(2)::before{
	background-image: url("../img/team_revival_bg.png");
	background-position: left center;
	right: auto;
	left: 0;
}
.team .content_box ul li:nth-child(3)::before{
	background-image: url("../img/team_creative_bg.png");
}
.team .content_box ul li::after{
	display: block;
	content: "";
	background-color: rgba(232,227,220, .8);
	height: 120%;
	width: 75vw;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	z-index: -1;
	opacity: 0;
}
.team .content_box ul li:nth-child(2)::after{
	background-color: rgba(213,207,196, .8);
	right: 0;
	left: auto;
}
.team .content_box ul li.active::after{
	animation: lfadeInAnime 1.2s forwards;
}
@keyframes lfadeInAnime{
  from {
	opacity: 0;
	transform: translate(-100%, -50%);
  }
  to {
	opacity: 1;
	transform: translate(0, -50%);
  }
}
.team .content_box ul li.active:nth-child(2)::after{
	animation: rfadeInAnime 1.2s forwards;
}
@keyframes rfadeInAnime{
  from {
	opacity: 0;
	transform: translate(100%, -50%);
  }
  to {
	opacity: 1;
	transform: translate(0, -50%);
  }
}
.team .content_box ul li:last-child{
	margin-bottom: 0;
}
.team .content_box ul li .txt_box, .team .content_box ul li .img_box{
	width: calc(96% / 2);
}
.team .content_box ul li img{
	box-shadow: 0 0 6px 0 #aaa;
}
/*projects*/
.projects .content_box{
	background-image: url( "../img/projects_content_box_bg.png");
	background-position: right top;
	background-size: 40vw;
	background-repeat: no-repeat;
}
.projects .point_box{
	margin: 5rem auto 0;
	justify-content: space-between;
}
.projects .point_box li{
	width: calc(90%/2);

	position: relative;
	z-index: 1;
	padding: 3rem 0 3rem 5rem;
}
.projects .point_box li::before{
	display: block;
	content: "01";
	font-size: 10rem;
	line-height: 1;
	color: #ede8e3;
	text-shadow: 8px 8px 0 #fff;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.projects .point_box li:nth-child(2)::before{
	content: "02";
}
.projects .point_box li:nth-child(3)::before{
	content: "03";
}
.projects .point_box li:nth-child(4)::before{
	content: "04";
}
.projects .point_box li p{
	text-align: center;
}
.projects .resources_box .button{
	max-width: 400px;
	width: 90%;
	display: block;
	margin: 5rem auto 0;
}
.projects .contact_box{
	background-color: rgba(232, 227, 220, .8);;
	text-align: center;
}
.projects .contact_box .main_box{
	background-color: #fff;
	padding: 5rem;
	box-shadow: 0 0 6px 0 #aaa;
}
/*company*/
.company table{
	box-shadow: 0 0 6px 0 #aaa;
	max-width: 1000px;
	margin: 0 auto;
}
.company table tr{
	border-bottom: 1px solid #eee;
}
.company table tr:last-child{
	border-bottom: none;
}
.company table tr th, .company table tr td{
	padding: 2rem 0 2rem 2rem;
}
.company table tr th{
	width: 30%;
	padding-left: 0;
	text-align: center;
	background-color: #6d7709;
	color: #fff;
	border-bottom: 1px solid #fff;
}
.company table tr:last-child th{
	border-bottom: none;
}
.company ul.list02 li {
    display: flex;
    padding-bottom: 0;
    padding-top: 0;
}
.company ul.list02 li:before {
    content: "\f111";
    color: #ccc4b8;
    display: block;
    font-size: 1rem;
    position: relative;
    top: 9px;
    margin: 0 0.5rem;
}
.company ul.list02 li a{
	color: #727f00;
}
/*contact*/
.contact .content_box{
	padding-bottom: 10rem;
}
.contact .content_box .catchbox{
	margin-bottom: 0;
}
.contact .content_box .email_box{
	background-color: #fff;
	padding: 5rem;
	border: 4px solid #727f00;
	width: 100%;
	max-width: 800px;
	margin: 5rem auto 0;
}
.contact .content_box .email_box p{
	text-align: center;
	font-size: 2rem;
}
.contact .form_wrap{
	background-color: rgba(232,227,220, .8);
}

.contact .form_wrap table th {
	padding: 2.5rem 0rem;
	width: 28%;
}
.contact .form_wrap table td {
	padding: 2.5rem 0rem;
}
.contact .form_wrap table td p{
	line-height: 1.5;
}
.contact .form_wrap input[type="text"], .contact .form_wrap input[type="email"], .contact .form_wrap input[type="tel"], .contact .form_wrap select, .contact .form_wrap textarea {
	padding: 1.3rem 1rem 1.3rem;
	font-size: 1.5rem;
	resize: none;
	width: 100%;
	border: .2rem solid;
	border-radius: 0.5rem;
	border-color: #87694c;
	transition: all .4s;
	transition-timing-function: ease-out;
	transition-property: border-color;
	cursor: pointer;
}
.contact .form_wrap input[type="submit"] {
	position: relative;
	cursor: pointer;
	text-decoration: none;
	color: #fff;
	line-height: 2rem;
	display: block;
	z-index: 100;
	background-color: #727f00;
	padding: 1.5rem 0 1.5rem;
	min-width: 300px;
	text-align: center;
	border: 2px solid #727f00;
	margin: 4rem auto 0;
	box-shadow: 0 0 4px 0 #707068;
	transition: .3s;
	font-size: 1.6rem;
}
.contact .form_wrap input[type="submit"]:hover{
	background-color: rgba(143, 149, 90, 1);
	color: #fff;
}
.contact .form_wrap .privacy {
	height: 250px;
	width: 100%;
	max-width: 800px;
	margin: 2rem auto 2rem;
	padding: 2rem;
	overflow-y: scroll;
	border-radius: 0.8rem;
	border: 2px solid #87694c;
	background-color: #fff;
	font-weight: 400;
	font-size: 1.6rem;
}
.contact .form_wrap .privacy p {
	line-height: 1.5;
	font-size: 1.6rem;
}
.contact .form_wrap .privacy dt {
	font-size: 1.6rem;
	padding: 0.5rem 0;
	margin-top: 1.5rem;
}
.contact .form_wrap .privacy dd {
	margin-left: 0.5rem;
	line-height: 1.5;
	font-size: 1.4rem;
}
.contact .form_wrap .privacy p.privacy_title {
	font-weight: bold;
	font-size: 1.8rem;
	margin-bottom: 2rem;
}
.wrap404{
	padding: 20rem 0;
	text-align: center;
}
.wrap404 .not-found{
	width: 100%;
	max-width: 1000px;
	margin: 5rem auto;
}
@media screen and (max-width: 1499px){
	.h1wrap{
		left: 7vw;
		text-shadow: 0 0 10px #fff;
	}
	.projects .content_box{
		background-size: 50vw;
	}
}
@media screen and (max-width: 1199px){
	.h1wrap{
		left: 5vw;
	}
	h1.ttl01 {
		font-size: 6rem;
	}
	.team .content_box .catchbox, .projects .content_box .catchbox, .contact .content_box .catchbox {
		font-size: 1.8rem;
	}
	h2.ttl02{
		font-size: 3.4rem;
	}
	h2.ttl02::before{
		font-size: 4rem;
	}
	h3.ttl03{
		font-size: 2.1rem;
	}
	.projects .point_box li::before{
		font-size: 8rem;
	}
	.projects .point_box li::before{
		text-shadow: 7px 7px 0 #fff;
	}
}
@media screen and (max-width: 999px){
	h2.ttl02::before {
		left: 5%;
	}
	.team .content_box .catchbox, .projects .content_box .catchbox, .contact .content_box .catchbox{
		font-size: 1.7rem;
	}
	.projects .content_box, .contact .content_box, .projects .contact_box {
		padding: 10rem 0;
	}
	.team .content_box ul li .txt_box, .team .content_box ul li .img_box {
		width: calc(97% / 2);
	}
	.projects .point_box li{
		width: calc(97% / 2);
	}
	.projects .point_box li::before{
		font-size: 7rem;
	}
	.projects .point_box li::before{
		text-shadow: 6px 6px 0 #fff;
	}
}
@media screen and (max-width: 639px){
	.mv_wrap .mv_box{
		width: 90vw;
	}
	.h1wrap{
		left: 5vw;
	}
    h2.ttl02::before {
        font-size: 3.6rem;
    }
	.team .content_box .catchbox, .projects .content_box .catchbox{
		width: 90%;
		margin: 0 auto 15rem;
	}
	.team .content_box ul li::before{
		display: none;
	}
	.team .content_box ul li::after{
		width: 87vw;
	}
	.team .content_box .reverse{
		flex-flow: column;
	}
	.team .content_box ul li .txt_box {
        width: 85%;
		margin-bottom: 3rem;
    }
	.team .content_box ul li .reverse .txt_box {
        margin: 0 0 3rem auto;
    }
	.team .content_box ul li .img_box {
        width: 100%;
    }
    .projects .content_box {
        background-size: 70vw;
    }
	.projects .content_box .catchbox{
		text-shadow: 0 0 10px #fff;
	}
	.projects .point_box li{
		padding: 2rem 0 2rem 1rem;
	}
	.projects .point_box li::before{
		font-size: 5rem;
	}
	.projects .point_box li::before{
		text-shadow: 5px 5px 0 #fff;
	}
	.projects .point_box li p{
		margin-top: 1rem;
		line-height: 1.7;
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 480px){
	.under {
		padding-top: 75px;
	}
	.h1wrap{
		left: 2.5vw;
	}
    h1.ttl01 {
		font-size: 4.2rem;
		margin-bottom: 0;
	}
	h2.ttl02 {
		font-size: 3rem;
	}
	h2.ttl02::before {
		font-size: 3.2rem;
	}
	h3.ttl03{
		font-size: 1.8rem;
	}
	.team .content_box, .projects .content_box, .contact .content_box{
		font-size: 1.6rem;
	}
	.team .content_box .catchbox{
		margin-bottom: 10rem;
	}
	.projects .content_box .catchbox, .contact .content_box .catchbox {
        margin: 0 auto 5rem;
    }
	.team .content_box ul li{
		margin-bottom: 13rem;
	}
	.team .content_box ul li::after {
		width: 90vw;
		height: 110%;
		top: 49%;
	}
	.team .content_box ul li .txt_box{
		width: 90%;
	}
	.projects .point_box{
		margin-bottom: 5rem;
	}
	.projects .point_box li{
		width: 100%;
	}
	.projects .point_box li::before {
		font-size: 8rem;
	}
	.projects .contact_box .main_box{
		padding: 3rem;
	}
	.projects .contact_box .button{
		margin-top: 2rem;
	}
	.company table tr td{
		padding-left: 1rem;
	}
	.company table tr th{
		width: 35%;
	}
	.company table tr td{
		width: 65%;
	}
	.company ul.list02 li{
		line-height: 1.7;
	}
	.company ul.list02 li:before{
		top: 3px;
		margin-left: 0;
	}
}
@media screen and (max-width: 375px){
	h2.ttl02::before{
		font-size: 3rem;
	}
	.team .content_box .catchbox, .projects .content_box .catchbox, .contact .content_box .catchbox{
		font-size: 1.6rem;
	}
	.projects .point_box li::before {
		font-size: 6rem;
	}
	.company table tr th{
		width: 38%;
	}
	.company table tr td{
		width: 62%;
	}
}