@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--link02 : #096;
	--color01 : #7fbf3b;
	--color02 : #118553;
	--border : #dcdbd6;
	--bg01 : #f7f6e7;
}
@media screen and (max-width: 768px){
	body{
		padding-top : calc( 100 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1399px){
	body{
		padding-top : calc( 110 * 100vw / 1400 );
	}
}
@media print,screen and (min-width: 1400px){
	body{
		padding-top : 110px;
	}
}
.wrap{
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
		overflow : hidden;
	}
}
@media screen and (min-width: 769px) and (max-width:1399px){
	.wrap{
		padding-left : calc( 24 * 100% / 1400 );
		padding-right : calc( 24 * 100% / 1400 );
	}
	.wrap.wrap-inner{
		max-width : calc( 1048 * 100% / 1400 );
	}
}
@media print,screen and (min-width: 1400px){
	.wrap{
		max-width : 1400px;
		padding-left : 24px;
		padding-right : 24px;
	}
	.wrap.wrap-inner{
		max-width : 1048px;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	z-index : 10;
	border-top-color : #7fbf3b;
	border-top-color : var(--color01);
	border-top-style : solid;
	background-color : #fff;
}
#header .logo a{
	display : block;
}
@media screen and (max-width: 768px){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		width : 100%;
		z-index : 10;
		border-top-width : calc( 6 * 100vw / 768 );
	}
	#header .wrap{
		height : calc( 94 * 100vw / 768 );
		display : flex;
	}
	#header .logo a{
		display : inline-block;
		padding-top : calc( 8 * 100vw / 768 );
	}
	#header .logo img{
		height : calc( 54 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#header .wrap{
		position : relative;
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
	}
}
@media screen and (min-width: 769px) and (max-width:1399px){
	#header{
		border-top-width : calc( 6 * 100vw / 1400 );
	}
	#header .wrap{
		height : calc( 104 * 100vw / 1400 );
	}
	#header .logo{
		padding-top : calc( 19 * 100vw / 1400 );
	}
	#header .logo img{
		height : calc( 54 * 100vw / 1400 );
	}
}
@media print,screen and (min-width: 1400px){
	#header{
		border-top-width : 6px;
	}
	#header .wrap{
		height : 104px;
	}
	#header .logo{
		padding-top : 19px;
	}
	#header .logo img{
		height : 54px;
	}
}
/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open [data-aos^=fade]{
		opacity : 1!important;
	}
	@media screen and (max-width: 768px){
		body.is-open #nav{
			max-height : 100vh;
		}
	}
	@media screen and (max-width: 768px){
		body.is-open #drawerPanel{
			position : fixed;
			z-index : -1;
			width : 100%;
		}
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
	@media screen and (max-width: 768px) and (-ms-high-contrast:none){
		body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
			transform : translateY( 10px ) scale(0);
		}
		body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
			transform : translateY( -10px ) scale(0);
		}
	}
	#menuBtn{
		z-index : 11;
		position : absolute;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(4){
		bottom : 0;
	}
}
#menuBtn{
	z-index : 11;
	position : absolute;
}
#menuBtn span{
	font-size : 0;
}
#menuBtn > span:nth-of-type(1){
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}
#menuBtn span span{
	display : block;
	position : absolute;
	left : 0;
	transition : all .4s;
	width : 100%;
}
#menuBtn span span:nth-of-type(1){
	top : 0;
}
#menuBtn span span:nth-of-type(4){
	bottom : 0;
}
@media screen and (max-width: 768px){
	#menuBtn{
		right : calc( 24 * 100% / 768 );
		top : 50%;
		transform : translateY(-50%);
		width : calc( 60 * 100% / 768 );
		height : calc( 48 * 100vw / 768 );
		z-index : 10;
	}
	#menuBtn span span{
		background-color : #7fbf3b;
		background-color : var(--color01);
		height : calc( 7 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 20.5 * 100vw / 768 );
	}
}
/*--------------------------------------------
NAV
---------------------------------------------*/
@media screen and (max-width: 768px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		top : calc( 100 * 100vw / 768 );
		background-color : rgba(239, 235, 227,.9);
		height : calc( 100vh - ( 100 * 100vw / 768 ) );
	}
	#nav .scroll{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
		padding-top : calc( 8 * 100vw / 768 );
		padding-bottom : calc( 80 * 100vw / 768 );
	}
}
/*--------------------------------------------
GROBAL NAV
---------------------------------------------*/
#grobalNav a{
	letter-spacing : .05em;
}
#grobalNav .contact a{
	background-color : #118553;
	background-color : var(--color02);
	color : #fff;
}
@media screen and (max-width: 768px){
	#grobalNav li{
		width : 100%;
	}
	#grobalNav li:not(:last-child){
		border-bottom : 1px solid #fff;
	}
	#grobalNav a{
		font-size : calc( 36 * 100vw / 768 );
		padding-top : calc( 48 * 100vw / 768 );
		padding-bottom : calc( 48 * 100vw / 768 );
		width : 100%;
		text-align : center;
		display : block;
	}
	#grobalNav .contact a{
		display : flex;
		align-items : center;
		justify-content : center;
	}
	#grobalNav .contact a:before{
		content : "";
		display : block;
		background : url("../images/ui/icon/mail.png") 0 0 / contain no-repeat;
		width : calc( 46 * 100vw / 768 );
		height : calc( 36 * 100vw / 768 );
		margin-right : calc( 12 * 100vw / 768 );
		flex-shrink : 0;
	}
}
@media print,screen and (min-width: 769px){
	#grobalNav{
		display : flex;
		align-items : center;
	}
	#grobalNav li:not(.contact) a{
		padding-left : 1em;
		padding-right : 1em;
		display : block;
	}
	#grobalNav .contact{
		position : absolute;
	}
	#grobalNav .contact{
		position : fixed;
		right : 0;
		background-color : #118553;
		background-color : var(--color02);
		color : #fff;
		box-shadow : -2.828px 2.828px 0 0 rgba(0, 0, 0, .1);
		top : 50%;
		transform : translateY(-50%);
		background-image : url("../images/ui/icon/mail.png");
		background-repeat : no-repeat;
		background-position-x : center;
		text-align : center;
	}
	#grobalNav .contact span.is-pc{
		display : inline-block;
		font-weight : 700;
		-ms-writing-mode : tb-rl;
		    writing-mode : vertical-rl;
	}
}
@media screen and (min-width: 769px) and (max-width:1399px){
	#grobalNav{
		margin-top : calc( 50 * 100vw / 1400 );
	}
	#grobalNav a{
		font-size : calc( 16 * 100vw / 1400 );
	}
	#grobalNav .contact{
		width : calc( 80 * 100% / 1400 );
		height : calc( 250 * 100vw / 1400 );
		background-size : auto calc( 28 * 100vw / 1400 );
		background-position-y : calc( 26 * 100vw / 1400 );
		padding-top : calc( 78 * 100vw / 1400 );
	}
	#grobalNav .contact span{
		font-size : calc( 18 * 100vw / 1400 );
	}
}
@media print,screen and (min-width: 1400px){
	#grobalNav{
		margin-top : 50px;
	}
	#grobalNav a{
		font-size : 16px;
	}
	#grobalNav .contact{
		width : 80px;
		height : 250px;
		background-size : auto 28px;
		background-position-y : 26px;
		padding-top : 78px;
	}
	#grobalNav .contact span{
		font-size : 18px;
	}
}
/*--------------------------------------------
MAIN TITLE
---------------------------------------------*/
#maintitle{
	width : 100%;
	overflow : hidden;
	position : relative;
}
#maintitle h1{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-family : YakuHanJP , "Noto Serif JP" , serif;
	width : 100%;
	height : 100%;
	z-index : 1;
	letter-spacing : .2em;
	font-weight : 200;
	position : relative;
}
#maintitle picture{
	position : absolute;
	left : 0;
	top : 0;
	width : 100%;
	height : 100%;
	overflow : hidden;
}
#maintitle picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}
@media screen and (max-width: 768px){
	#maintitle{
		height : calc( 240 * 100vw / 768 );
	}
	#maintitle h1{
		font-size : calc( 36 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1399px){
	#maintitle{
		height : calc( 200 * 100vw / 1400 );
	}
	#maintitle h1{
		font-size : calc( 36 * 100vw / 1400 );
	}
}
@media print,screen and (min-width: 1400px){
	#maintitle{
		height : 200px;
	}
	#maintitle h1{
		font-size : 36px;
	}
}
/*--------------------------------------------
BANNERS
---------------------------------------------*/
#banners .banner-onestop{
	background : url("../images/ui/bg/banner_onestop.png") 0 0 / cover no-repeat;
	color : #fff;
}
#banners .banner-onestop h3{
	letter-spacing : .2em;
}
#banners .banner-onestop p{
	letter-spacing : .2em;
}
#banners .banner-recruit{
	display : block;
	background : url("../images/ui/bg/banner_recruit.png") 0 0 / cover no-repeat;
	color : #fff;
}
#banners .banner-estate{
	display : block;
	background : url("../images/ui/bg/banner_estate.png") 0 0 / cover no-repeat;
	color : #fff;
	text-align : center;
}
#banners .banner-estate p{
	letter-spacing : .2em;
}
#banners .banner-size{
	display : block;
}
#banners .banner-size img{
	width : 100%;
	height : auto;
}
@media screen and (max-width: 768px){
	#banners .wrap{
		padding-top : calc( 80 * 100vw / 768 );
		padding-bottom : calc( 80 * 100vw / 768 );
	}
	#banners .banner-onestop{
		width : 100%;
		height : calc( 550 * 100vw / 768 );
		padding-left : calc( 36 * 100vw / 768 );
		padding-top : calc( 48 * 100vw / 768 );
	}
	#banners .banner-onestop h3{
		font-size : calc( 28 * 100vw / 768 );
	}
	#banners .banner-onestop p{
		font-size : calc( 20 * 100vw / 768 );
		line-height : 2.14;
		margin-top : calc( 20 * 100vw / 768 );
	}
	#banners .banner-onestop .link01{
		margin-top : calc( 32 * 100vw / 768 );
	}
	#banners ul{
		margin-top : calc( 36 * 100vw / 768 );
		display : flex;
		justify-content : space-between;
		flex-wrap : wrap;
	}
	#banners li{
		width : calc( 348 * 100% / 720 );
	}
	#banners .banner-recruit{
		width : 100%;
		height : calc( 135 * 100vw / 768 );
		padding-left : calc( 33 * 100vw / 768 );
		display : flex;
		align-items : center;
	}
	#banners .banner-estate{
		width : 100%;
		height : calc( 135 * 100vw / 768 );
		padding-top : calc( 28 * 100vw / 768 );
	}
	#banners .banner-estate p{
		font-size : calc( 20 * 100vw / 768 );
		letter-spacing : 0;
	}
	#banners .banner-estate h4{
		margin-top : calc( 8 * 100vw / 768 );
	}
	#banners .banner-estate h4 img{
		height : calc( 54 * 100vw / 768 );
	}
	#banners .banner-size{
		margin-top : calc( 20 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#banners .wrap{
		display : flex;
		justify-content : space-between;
	}
	#banners .banner-onestop{
		flex-shrink : 0;
	}
}
@media screen and (min-width: 769px) and (max-width:1399px){
	#banners .wrap{
		padding-top : calc( 71 * 100vw / 1400 );
		padding-bottom : calc( 79 * 100vw / 1400 );
	}
	#banners .banner-onestop{
		width : calc( 590 * 100% / 1000 );
		height : calc( 450 * 100vw / 1400 );
		padding-left : calc( 50 * 100vw / 1400 );
		padding-top : calc( 57 * 100vw / 1400 );
	}
	#banners .banner-onestop h3{
		font-size : calc( 24 * 100vw / 1400 );
	}
	#banners .banner-onestop p{
		font-size : calc( 28 * 100vw / 1400 );
		width : 200%;
		height : calc( 164 * 100vw / 1400 );
		white-space : nowrap;
		line-height : 2.14;
		transform-origin : left top;
		transform : scale(.5);
		margin-top : calc( ( 45 - 5 ) * 100vw / 1400 );
	}
	#banners .banner-onestop .link01{
		margin-top : calc( ( 58 - 5 ) * 100vw / 1400 );
	}
	#banners li + li{
		margin-top : calc( 10 * 100vw / 1400 );
	}
	#banners ul{
		width : calc( 385 * 100% / 1000 );
	}
	#banners .banner-recruit{
		width : 100%;
		height : calc( 140 * 100vw / 1400 );
		padding-left : calc( 33 * 100vw / 1400 );
		display : flex;
		align-items : center;
	}
	#banners .banner-estate{
		width : 100%;
		height : calc( 140 * 100vw / 1400 );
		padding-top : calc( 33 * 100vw / 1400 );
	}
	#banners .banner-estate p{
		font-size : calc( 14 * 100vw / 1400 );
	}
	#banners .banner-estate h4{
		margin-top : calc( 8 * 100vw / 1400 );
	}
	#banners .banner-estate h4 img{
		height : calc( 54 * 100vw / 1400 );
	}
	#banners .banner-size{
		width : 100%;
		height : calc( 150 * 100vw / 1400 );
	}
}
@media print,screen and (min-width: 1400px){
	#banners .wrap{
		padding-top : 71px;
		padding-bottom : 79px;
	}
	#banners .banner-onestop{
		width : 590px;
		height : 450px;
		padding-left : 50px;
		padding-top : 57px;
	}
	#banners .banner-onestop h3{
		font-size : 24px;
	}
	#banners .banner-onestop p{
		font-size : 14px;
		line-height : 2.14;
		margin-top : calc( 45px - 8px );
	}
	#banners .banner-onestop .link01{
		margin-top : calc( 58px - 8px );
	}
	#banners li + li{
		margin-top : 10px;
	}
	#banners .banner-recruit{
		width : 385px;
		height : 140px;
		padding-top : 41px;
		padding-left : 33px;
	}
	#banners .banner-estate{
		width : 385px;
		height : 140px;
		padding-top : 33px;
	}
	#banners .banner-estate p{
		font-size : 14px;
	}
	#banners .banner-estate h4{
		margin-top : 8px;
	}
	#banners .banner-estate h4 img{
		height : 54px;
	}
	#banners .banner-size{
		width : 385px;
		height : 150px;
	}
}
/*--------------------------------------------
CONTACT
---------------------------------------------*/
#contact{
	background : url("../images/ui/bg/contact.png") 0 0 / cover no-repeat;
	color : #fff;
}
#contact h4{
	text-align : center;
	font-weight : 400;
	letter-spacing : .2em;
}
@media screen and (max-width: 768px){
	#contact{
		height : calc( 443 * 100vw / 768 );
	}
	#contact .wrap{
		padding-top : calc( 80 * 100vw / 768 );
	}
	#contact h4{
		font-size : calc( 36 * 100vw / 768 );
		line-height : 1.83;
	}
	#contact .link01{
		margin-top : calc( 48 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1399px){
	#contact{
		height : calc( 443 * 100vw / 1400 );
	}
	#contact .wrap{
		padding-top : calc( ( 102 - 15 ) * 100vw / 1400 );
	}
	#contact h4{
		font-size : calc( 36 * 100vw / 1400 );
		line-height : 1.83;
	}
	#contact .link01{
		margin-top : calc( ( 57 - 15 ) * 100vw / 1400 );
	}
}
@media print,screen and (min-width: 1400px){
	#contact{
		height : 443px;
	}
	#contact .wrap{
		padding-top : calc( 102px - 15px );
	}
	#contact h4{
		font-size : 36px;
		line-height : 1.83;
	}
	#contact .link01{
		margin-top : calc( 57px - 15px );
	}
}
/*--------------------------------------------
FOOTER
------z--------------------------------------*/
#footer{
	background-color : #f7f6e7;
	background-color : var(--bg01);
}
#footer .links{
	display : flex;
	align-items : center;
	justify-content : center;
}
#footer .links a{
	margin-left : 1em;
	margin-right : 1em;
	letter-spacing : .1em;
}
#footer h2{
	text-align : center;
}
#footer .address{
	display : flex;
	align-items : center;
	justify-content : center;
}
#footer .address dt , #footer .address dd{
	letter-spacing : .2em;
}
#footer .license > div{
	display : flex;
	align-items : center;
	justify-content : center;
}
#footer .license dt , #footer .license dd{
	letter-spacing : .2em;
}
#footer p{
	text-align : center;
	letter-spacing : .2em;
}
@media screen and (max-width: 768px){
	#footer .wrap{
		padding-top : calc( 80 * 100vw / 768 );
		padding-bottom : calc( 40 * 100vw / 768 );
	}
	#footer .links{
		justify-content : center;
		flex-wrap : wrap;
	}
	#footer .links a{
		font-size : calc( 22 * 100vw / 768 );
		line-height : 2;
	}
	#footer h2{
		margin-top : calc( 47 * 100vw / 768 );
	}
	#footer h2 img{
		height : calc( 56 * 100vw / 768 );
	}
	#footer .address{
		margin-top : calc( 50 * 100vw / 768 );
	}
	#footer .address dt , #footer .address dd{
		font-size : calc( 22 * 100vw / 768 );
	}
	#footer .license{
		margin-top : calc( 22 * 100vw / 768 );
		display : inline-block;
		position : relative;
		transform : translateX(-50%);
		left : 50%;
	}
	#footer .license > div{
		justify-content : flex-start;
	}
	#footer .license dt , #footer .license dd{
		font-size : calc( 20 * 100vw / 768 );
		line-height : 1.6;
	}
	#footer p{
		margin-top : calc( 50 * 100vw / 768 );
		font-size : calc( 20 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#footer .license{
		display : flex;
		align-items : center;
		justify-content : center;
	}
}
@media screen and (min-width: 769px) and (max-width:1399px){
	#footer .wrap{
		padding-top : calc( 65 * 100vw / 1400 );
		padding-bottom : calc( 45 * 100vw / 1400 );
	}
	#footer .links a{
		font-size : calc( 16 * 100vw / 1400 );
	}
	#footer h2{
		margin-top : calc( 47 * 100vw / 1400 );
	}
	#footer h2 img{
		height : calc( 56 * 100vw / 1400 );
	}
	#footer .address{
		margin-top : calc( 50 * 100vw / 1400 );
	}
	#footer .address dt , #footer .address dd{
		font-size : calc( 14 * 100vw / 1400 );
	}
	#footer .license{
		margin-top : calc( 22 * 100vw / 1400 );
	}
	#footer .license div + div{
		margin-left : calc( 24 * 100vw / 1400 );
	}
	#footer .license dt , #footer .license dd{
		font-size : calc( 12 * 100vw / 1400 );
	}
	#footer p{
		margin-top : calc( 50 * 100vw / 1400 );
		font-size : calc( 12 * 100vw / 1400 );
	}
}
@media print,screen and (min-width: 1400px){
	#footer .wrap{
		padding-top : 65px;
		padding-bottom : 45px;
	}
	#footer .links a{
		font-size : 16px;
	}
	#footer h2{
		margin-top : 47px;
	}
	#footer h2 img{
		height : 56px;
	}
	#footer .address{
		margin-top : 50px;
	}
	#footer .address dt , #footer .address dd{
		font-size : 14px;
	}
	#footer .license{
		margin-top : 22px;
	}
	#footer .license div + div{
		margin-left : 24px;
	}
	#footer .license dt , #footer .license dd{
		font-size : 12px;
	}
	#footer p{
		margin-top : 50px;
		font-size : 12px;
	}
}