@charset "UTF-8";

:root{
	--body : #000;
	--link : #000;
	--primary : #000;
}

/*--------------------------------------------
WORKS
---------------------------------------------*/

#workMV dt{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	color : #36bbcc;
	background-color : #fff;
	font-weight : 500;
	font-family : "Jost", sans-serif;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
}

#workMV h2{
	color : #736357;
	letter-spacing : .05em;
}

#workMV a{
	color : #36bbcc;
	display : block;
	letter-spacing : .06em;
}

#workMV li{
	display : block;
}

#workMV dl:nth-of-type(2) ul{
	columns : 2;
	color : #736357;
}

#workMV dl:nth-of-type(2) li{
	letter-spacing : .05em;
}

#workMV dl:nth-of-type(2) li del{
	text-decoration : none;
	color : rgba(115,99,87,.3);
}

@media screen and (max-width: 750px){
	#workMV{
		padding-left : 0;
		padding-right : 0;
		padding-bottom : calc( ( 30 + 3 ) * 100vw / 375 );
	}
	#workMV .box{
		margin-top : calc( 27 * 100vw / 375 );
		padding-left : calc( 31 * 100% / 375 );
		padding-right : calc( 31 * 100% / 375 );
	}
	#workMV dt{
		width : calc( 100 * 100% / 313 );
		height : calc( 25 * 100vw / 375 );
		font-size : 1.3rem;
		border-radius : calc( 16.6 * 100vw / 375 );
	}
	#workMV dl:nth-of-type(1) dd:nth-of-type(1){
		margin-top : calc( 10 * 100vw / 375 );
	}
	#workMV dl:nth-of-type(1) h2{
		font-size : 1.4rem;
		line-height : 1.875;
	}
	#workMV dl:nth-of-type(1) dd + dd{
		margin-top : calc( 6 * 100vw / 375 );
	}
	#workMV dl:nth-of-type(1) li + li{
		margin-top : calc( 4 * 100vw / 375 );
	}
	#workMV dl:nth-of-type(1) li a{
		font-size : 1.4rem;
		line-height : 1.4464;
	}
	#workMV dl:nth-of-type(2){
		margin-top : calc( ( 27 + 3 ) * 100vw / 375 );
	}
	#workMV dl:nth-of-type(2) dd{
		margin-top : calc( ( 9 + 3 ) * 100vw / 375 );
		width : calc( 258 * 100% / 313 );
	}
	#workMV dl:nth-of-type(2) li{
		font-size : 1.3rem;
		margin-bottom : calc( ( 7 + 3 + 3 ) * 100vw / 375 );
		white-space : nowrap;
	}
}

@media print,screen and (min-width: 751px){
	#workMV{
		padding-bottom : calc( 82px + 3px );
	}
	#workMV .box{
		display : flex;
		align-items : flex-start;
		margin-top : 29px;
	}
	#workMV dl{
		width : 50%;
		padding-left : 128px;
		position : relative;
	}
	#workMV dt{
		width : 100px;
		height : 25px;
		font-size : 1.3rem;
		border-radius : 16.6px;
		position : absolute;
		top : 0;
		left : 0;
	}
	#workMV dl:nth-of-type(1) dd:nth-of-type(1){
		margin-top : 5.5px;
	}
	#workMV dl:nth-of-type(1) h2{
		font-size : 1.4rem;
	}
	#workMV dl:nth-of-type(1) dd + dd{
		margin-top : calc( 6px + 3px + 3px );
	}
	#workMV dl:nth-of-type(1) li + li{
		margin-top : calc( 4px + 3px + 3px );
	}
	#workMV dl:nth-of-type(1) li a{
		font-size : 1.4rem;
	}
	#workMV dl:nth-of-type(2) dd{
		margin-top : 6.5px;
		width : 364px;
	}
	#workMV dl:nth-of-type(2) li{
		font-size : 1.2rem;
		width : 182px;
		margin-bottom : calc( 10px + 3px + 3px );
	}
	#workMV dl:nth-of-type(2) li:nth-child(-n+4){
		width : 182px;
	}
}

@media screen and (max-width: 750px){
	#workBG{
		padding-top : calc( ( 30 + 4.5 ) * 100vw / 375 );
		padding-bottom : calc( ( 31 - 6.25 ) * 100vw / 375 );
	}
	#workBG .box{
		margin-top : calc( ( 30 + 3 ) * 100vw / 375 );
	}
	#workBG picture{
		width : 100%;
	}
	#workBG p{
		margin-top : calc( ( 20 - 6.25 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#workBG{
		padding-top : calc( 59px + 4.5px );
		padding-bottom : 60px;
	}
	#workBG .box{
		margin-top : calc( 46px + 3.5px );
		display : flex;
		align-items : center;
		justify-content : space-between;
	}
	#workBG picture{
		width : 620px;
	}
	#workBG p{
		width : 494px;
	}
}

/*--------------------------------------------
FERME LA TERRE BIEI
---------------------------------------------*/

@media screen and (max-width: 750px){
	#ourbranding{
		padding-top : calc( 20 * 100vw / 375 );
		padding-bottom : calc( 20 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#ourbranding{
		padding-top : 80px;
		padding-bottom : 60px;
	}
	#ourbranding .bg-white > div:nth-of-type(1) picture{
		text-align : left;
		padding-left : 123px;
	}
	#ourbranding .bg-white > div:nth-of-type(1) picture img{
		height : 246px;
		width : auto;
	}
}

@media print,screen and (min-width: 751px){
	#shopdesign{
		padding-bottom : 60px;
	}
}

@media screen and (max-width: 750px){
	#webdesign{
		padding-bottom : calc( 20 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#webdesign{
		padding-bottom : 60px;
	}
	#webdesign .bg-white{
		padding-bottom : 0;
	}
}

#productdesign h3{
	color : #9e937d;
	font-weight : 500;
	letter-spacing : .04em;
}

@media screen and (max-width: 750px){
	#productdesign{
		padding-bottom : calc( 20 * 100vw / 375 );
	}
	#productdesign h3{
		font-size : 1.8rem;
		margin-bottom : calc( ( 12 + 4.5 + 4 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#productdesign{
		padding-bottom : 100px;
	}
	#productdesign h3{
		font-size : 2rem;
		padding-top : 4.5px;
		margin-bottom : calc( 20px + 4.5px + 4px );
	}
	#productdesign .bg-white > div:nth-of-type(4) picture{
		text-align : right;
	}
	#productdesign .bg-white > div:nth-of-type(4) picture img{
		height : 277px;
		width : auto;
	}
}

@media screen and (max-width: 750px){
	#other{
		padding-top : calc( ( 30 + 4.5 ) * 100vw / 375 );
		padding-bottom : calc( 20 * 100vw / 375 );
		padding-left : 0;
		padding-right : 0;
	}
	#other ul{
		margin-top : calc( ( 30 + 3 ) * 100vw / 375 );
	}
	#other li + li{
		margin-top : calc( 20 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#other{
		padding-top : calc( 70px + 4.5px );
		padding-bottom : 100px;
	}
	#other ul{
		margin-top : calc( 50px + 3.5px );
	}
	#other li + li{
		margin-top : 50px;
	}
}

/*--------------------------------------------
KYOBAUM
---------------------------------------------*/

@media screen and (max-width: 750px){
	#product{
		padding-top : calc( 20 * 100vw / 375 );
		padding-bottom : calc( 20 * 100vw / 375 );
	}
	#product .pics li + li{
		margin-top : calc( ( 12 + 3 ) * 100vw / 375 );
	}
	#product .pics p{
		text-align : left;
	}
}

@media print,screen and (min-width: 751px){
	#product{
		padding-top : 80px;
		padding-bottom : 60px;
	}
	#product .pics li:nth-child(1){
		text-align : left;
	}
	#product .pics li:nth-child(1) img{
		height : 119px;
		width : auto;
	}
	#product .pics li + li{
		margin-top : calc( 12px + 3px );
	}
	#product .text01{
		margin-top : -7px;
	}
}

@media screen and (max-width: 750px){
	#design{
		padding-bottom : calc( 20 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#design{
		padding-bottom : 60px;
	}
}

@media screen and (max-width: 750px){
	#subsequent{
		padding-bottom : calc( 20 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#subsequent{
		padding-bottom : 60px;
	}
	#subsequent .text01{
		padding-top : 0;
		margin-top : -7px;
	}
}

#other02 > ul{
	display : flex;
}

#other02 ul ul{
	display : flex;
	flex-direction : column;
	justify-content : space-between;
}

@media screen and (max-width: 750px){
	#other02{
		padding-top : calc( 38 * 100vw / 375 );
		padding-bottom : calc( 31 * 100vw / 375 );
	}
	#other02 > ul{
		flex-wrap : wrap;
		justify-content : space-between;
	}
	#other02 > ul > li:nth-child(1) , #other02 > ul > li:nth-child(2){
		width : calc( 152 * 100% / 312 );
		margin-bottom : calc( ( 20 + 3 ) * 100vw / 375 );
	}
	#other02 > ul > li:nth-child(3){
		width : calc( 203 * 100% / 312 );
	}
	#other02 > ul > li:nth-child(4){
		width : calc( 102 * 100% / 312 );
	}
	#other02 ul ul{
		height : calc( 136 * 100vw / 375 );
	}
	#other02 picture + p , #other02 ul + p:not(.text01){
		font-size : 1.2rem;
		margin-top : calc( ( 3 + 3 ) * 100vw / 375 );
	}
	#other02 .text01{
		margin-top : calc( ( 23 + 3 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#other02{
		padding-top : 60px;
		padding-bottom : calc( 161px - 7px );
	}
	#other02 > ul > li + li{
		margin-left : 15px;
	}
	#other02 > ul > li:nth-child(1) , #other02 > ul > li:nth-child(2){
		width : 242px;
	}
	#other02 > ul > li:nth-child(3){
		width : 421px;
	}
	#other02 > ul > li:nth-child(4){
		width : 210px;
	}
	#other02 ul ul{
		height : 282px;
	}
	#other02 picture + p , #other02 ul + p:not(.text01){
		font-size : 1.2rem;
		margin-top : calc( 3px + 3px );
	}
	#other02 .text01{
		margin-top : calc( 54px + 3px );
		text-align : center;
	}
}

@media screen and (max-width: 750px){
	#gallery{
		padding-bottom : calc( 20 * 100vw / 375 );
		padding-left : 0;
		padding-right : 0;
	}
	#gallery > li + li , #gallery li li + li{
		margin-top : calc( 20 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#gallery{
		padding-bottom : 100px;
	}
	#gallery > li + li{
		margin-top : 50px;
	}
	#gallery > li{
		display : flex;
	}
	#gallery > li > picture{
		width : 100%;
	}
	#gallery > li > ul{
		display : flex;
		justify-content : space-between;
		width : 100%;
	}
	#gallery > li > ul.pc-align-center{
		align-items : center;
	}
	#gallery > li > ul.pc-align-end{
		align-items : end;
	}
	#gallery li li{
		width : 550px;
	}
}