@charset "UTF-8";
/*******************************
 
TopCss
 
*******************************/

/*-----------------------------
mainimg
-----------------------------*/
.mainimg{
	position: relative;
	padding: 25px 0 30px;
}
.mainimg img{
	width: 100%;
}
.mainimg:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70%;
	background: url("../img/common/bg01.jpg");
}

.mainimg .waku{
	width: 95%;
	margin: auto;
	position: relative;
}
.mainimg .waku .inner{
	overflow: hidden;
	border: solid 10px #7ca841;
}
.mainimg .waku .ico-top{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.mainimg .waku .ico-top:before,
.mainimg .waku .ico-top:after,
.mainimg .waku .ico-btm:before,
.mainimg .waku .ico-btm:after{
	content: "";
	position: absolute;
	z-index: 1;
	width: 119px;
	height: 121px;
	background-image: url("../img/top/waku_sprite@2x.png");
	background-repeat: no-repeat;
	background-size: 238px auto;
}
.mainimg .waku .ico-top:before{ top: -24px; left: -25px; }
.mainimg .waku .ico-top:after{ top: -24px; right: -25px; background-position: right top; }
.mainimg .waku .ico-btm:before{ bottom: -24px; left: -25px; background-position: left bottom; }
.mainimg .waku .ico-btm:after{ bottom: -24px; right: -25px; background-position: right bottom; }

#bg-video{
	width: 100%;
    height: 100%;
    margin: -5.35% 0;
}
#bg-video .video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
#bg-video .video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mainimg .waku .youtube-btn{
	width: 64px;
    height: 64px;
    background: rgba(235,44,0,.9);
    position: absolute;
    bottom: 36px;
    right: 40px;
    z-index: 2;
    border-radius: 50%;
}
.mainimg .waku .youtube-btn:before{
	content: "\f04b";
    font-family: FontAwesome;
    font-size: 112.5%;
    color: #fff;
    line-height: 67px;
    padding-left: 3px;
}


/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.mainimg .waku .ico-top:before,
	.mainimg .waku .ico-top:after,
	.mainimg .waku .ico-btm:before,
	.mainimg .waku .ico-btm:after{
		width: 69px;
    	height: 71px;
		background-size: 138px auto;
	}
	.mainimg .waku .ico-top:before{ top: -14px; left: -15px; }
	.mainimg .waku .ico-top:after{ top: -14px; right: -15px; }
	.mainimg .waku .ico-btm:before{ bottom: -14px; left: -15px; }
	.mainimg .waku .ico-btm:after{ bottom: -14px; right: -15px; }
	
	.mainimg .waku .inner{
		border: solid 5px #7ca841;
		background: url("../img/top/video_thum.jpg") no-repeat;
		background-size: cover;
	}
	#bg-video .video iframe{
		display: none;
	}
	.mainimg .waku .youtube-btn{
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
	.mainimg .waku .youtube-btn:before {
		font-size: 200%;
		line-height: 64px;
		padding-left: 7px;
	}
	
}

/*-----------------------------
sec01
-----------------------------*/
.sec01{
	background: url("../img/common/bg02.jpg");
	color: #fff;
	padding: 80px 0 40px;
	position: relative;
}
.sec01 .wrap-common{
	max-width: 652px;
	position: relative;
	z-index: 1;
}
.sec01 h2{
	margin-bottom: 50px;
}
.sec01:before,
.sec01:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.sec01:after{
	background-image: url("../img/top/sec01_img01.png"), url("../img/top/sec01_img02.png");
	background-position: left bottom, right bottom;
	width: 98%;
	max-width: 1400px;
	height: 65%;
}
.sec01:before{
	background-image: url("../img/top/sec01_img03.png");
	background-size: cover;
	width: 100%;
	height: 100%;
}

/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
	.sec01:after {
		height: 40%;
	}
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.sec01 {
		padding: 40px 0 80px;
	}
	.sec01:after {
		bottom: 0;
		top: auto;
	}
	.sec01 h2{
		width: 70%;
		margin: 0 auto 30px;
	}

}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.sec01 {
		padding: 40px 0 20px;
	}
	.sec01:before {
		background-position: 69%;
	}
	.sec01:after {
		bottom: auto;
		top: 10px;
		height: 15%;
	}
	.sec01 h2{
		width: 80%;
	}
}

/*-----------------------------
service
-----------------------------*/
.service {
	padding: 80px 0;
}
.service p{
	text-align: center;
	font-size: 140.0%;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .03em;
	margin: 15px 0 0;
}
.service ul li{
	width: 25%;
}
.service ul li:nth-child(2) p,
.service ul li:nth-child(3) p,
.service ul li:nth-child(4) p{
	margin-top: 30px;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.service {
		padding: 40px 0 20px;
	}
	.service ul li {
		padding: 0 10px;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.service ul li{
		width: 50%;
		padding: 0 10px 20px;
	}
	.service ul li img{
		width: 80%;
	}
	.service p,
	.service ul li:nth-child(2) p,
    .service ul li:nth-child(3) p,
	.service ul li:nth-child(4) p{
		margin-top: 10px;
	}
}


/*-----------------------------
office
-----------------------------*/
.office{
	padding: 80px 0 100px;
	background: url("../img/common/bg03.jpg");
	position: relative;
}
.office:before{
	content: "";
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 95%;
	max-width: 1600px;
	height: 95%;
	background-image: url("../img/top/sec03_img01.png"), url("../img/top/sec03_img02.png"), url("../img/top/sec03_img03.png");
	background-size: auto;
	background-repeat: no-repeat;
	background-position: left 5%, right 70%, left bottom; 
}

.office .shadow{
	max-width: 1200px;
	margin: auto;
	position: relative;
	overflow: hidden;
}
.office .shadow:before, .office .shadow:after {
	position: absolute;
    content: "";
    bottom: 66px;
    left: 10px;
    width: 50%;
	height: 100px;
    background: #fff;
    box-shadow: 0 15px 20px rgba(119,119,119,0.50);
    transform: rotate(-3deg);
}
.office .shadow:after{
	transform: rotate(3deg);
    right: 10px;
    left: auto;
}


.block-office{
	max-width: 1200px;
	margin: 80px auto 50px;
	position: relative;
	z-index: 1;
}
.block-office .ttl{
	display: inline-block;
    margin: -50px 0 30px;
    padding: 15px 70px;
    font-size: 140%;
    font-weight: 600;
    color: #fff;
    position: relative;
}
.block-office .ttl span{
	position: relative;
	z-index: 1;
}
.block-office .ttl:before{
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotatez( -3deg );
}
.block-office.toyohashi{
	background: url("../img/common/bg04.jpg");
}
.block-office.gamagori{
	background: url("../img/common/bg05.jpg");
}
.block-office.toyohashi .ttl:before{
	background: rgba(152,188,60,0.60);
}
.block-office.gamagori .ttl:before{
	background: rgba(60,162,188,0.60);
}


.block-office-list{
	margin-right: -40px;
	padding: 20px 0;
}
.block-office-list .item{
	width: 33.333%;
	margin-bottom: 40px;
	padding-right: 40px;
}
.block-office-list .item a{
	display: block;
	height: 100%;
	background: #fff;
	padding: 10px;
}
.block-office-list .item p{
	text-align: center;
	font-size: 93.8%;
	margin-top: 6px;
}
.block-office-list .item p:after{
	content: "\f138";
    font-family: FontAwesome;
    color: #e68e68;
    margin-left: 5px;
}

.block-office-list .item .img span{
	display: block;
	position: relative;
    overflow: hidden;
}
.block-office-list .item .img span:before{
	content: "";
    display: block;
    padding-top: 70%;
}
.block-office-list .item .img img{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
    vertical-align: top;
    transition: 1s ease;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    object-position: center;
    font-family: 'object-fit: cover; object-position: bottom;';
}
.block-office-list .item a:hover img{
	opacity: 1;
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
	.office:before {
		background-position: left 5%, right 66%, left bottom;
	}
	.office .shadow {
		width: 90%;
	}
	.block-office-list {
		margin-right: -20px;
	}
	.block-office-list .item {
		width: 33.333%;
		margin-bottom: 20px;
		padding-right: 20px;
	}
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.office{
		padding: 30px 0 70px;
	}
	.office:before {
		background-position: left top, right 66%, left bottom;
		background-size: 80px;
	}
	
	.block-office {
		margin: 30px auto;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.office:before {
		background-position: left top, right top, left bottom;
	}
	.office .shadow {
		width: 94%;
	}
	.office .shadow:before, .office .shadow:after {
		width: 45%;
		bottom: 45px;
	}
	
	.block-office .ttl {
		margin: -50px 0 10px;
		padding: 15px 40px;
	}
	
	.block-office-list {
		margin-right: -10px;
	}
	.block-office-list .item {
		width: 50%;
		margin-bottom: 10px;
		padding-right: 10px;
	}
	.block-office-list .item a {
		padding: 5px;
	}
	
}


/*-----------------------------
fattoria
-----------------------------*/
.fattoria{
	position: relative;
	overflow: hidden;
}
.fattoria,
.fattoria a{
	color: #fff;
}
.fattoria a{
	display: block;
	padding: 120px 0 65px;
}
.fattoria p{
	text-align: center;
	font-weight: 600;
	margin: 40px 0 20px;
}
.fattoria .inner{
	position: relative;
	z-index: 1;
}
.fattoria .img img{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
    vertical-align: top;
    transition: 1s ease;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    object-position: center;
    font-family: 'object-fit: cover; object-position: bottom;';
}
.fattoria a:hover .img img{
	-moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}
/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
	.fattoria a {
		padding: 80px 0 30px;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.fattoria a {
		padding: 50px 0 30px;
	}
	.fattoria h2{
		width: 70%;
		margin: 0 auto;
	}
	.fattoria p {
		margin: 20px 0 0;
	}
}


/*-----------------------------
news
-----------------------------*/
.news{
	padding: 60px 0 30px;
	overflow: hidden;
}

.news .btn-line{
	float: right;
	margin: 20px 0;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.news {
		padding: 40px 0 10px;
	}
}



/*-----------------------------
recruit
-----------------------------*/
.recruit{
	padding-bottom: 80px;
}
.recruit a{
	position: relative;
}
.recruit a:before, .recruit a:after {
	position: absolute;
    content: "";
    bottom: 17px;
    left: 10px;
    width: 45%;
	height: 100px;
    background: #fff;
    box-shadow: 0 15px 20px rgba(119,119,119,0.50);
    transform: rotate(-3deg);
	transition: all 300ms 0s ease;
}
.recruit a:after{
	transform: rotate(3deg);
    right: 10px;
    left: auto;
}
.recruit a span{
	position: relative;
	z-index: 1;
}

.recruit a:hover:before,
.recruit a:hover:after{
	box-shadow: 0 20px 20px rgba(119,119,119,0.9);
}
/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
	.recruit{
		width: 90%;
		margin: auto;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.recruit{
		width: 95%;
		padding-bottom: 30px;
	}
	.recruit a:before, .recruit a:after {
		bottom: 13px;
		height: 10px;
		box-shadow: 0 15px 10px rgba(119,119,119,0.50);
	}
	.recruit a:hover:before,
	.recruit a:hover:after{
		box-shadow: 0 15px 10px rgba(119,119,119,0.9);
	}
}