@media only screen and (max-width: 876px){
	
	section .body{
		flex-flow: column;
		justify-content: start;
		align-items: center;
	}

	section .body figure{
		margin-right: 0;
		margin-bottom: max(32px,6vw);
	}

	section >header >h2 em{
		margin-bottom: min(262px, 3.4vw);
	}

	section .body::after{
		content: '';
		position: absolute;
		right: clamp(120px,36vw,452px);
		top:  max(-183px, -14vw);
		z-index: -1;
		display: block;
		width: 100vw;
		height: max(320px,70vw);
		background: #e0e0e0;
	}

	section .body.oneLine::after{
		top:  max(-90px, -8vw);
	}


	section.right .body::after{
		left: clamp(120px,36vw,452px);
	}


}


@media only screen and (max-width: 767px){

	.onlySp{
		display: inline;
	}

	.onlyPc{
		display: none;
	}

	#container >header{
		position: fixed;
		top: 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-content: center;
		align-items: center;

	}

	#container >header.top .wrapper{
		z-index: 1;
		width: 100%;
		background: #000;
	}
		
	#container >header nav.top{
		position: absolute;
		left: 0;
		top: 0;
		padding-top: clamp(64px,14vw,72px);
		z-index: 0;
		display: flex;
		flex-flow: column;
		justify-content: start;
		align-content: center;
		align-items: center;
		
		width: 100%;
		height:  clamp(64px,14vw,72px);
		text-align: center;
		background: #000;
		overflow: hidden;
		box-sizing: border-box;
		
		transition: all 0.3s ease-out;
		/* transform: translate(0, calc(-4* min(120px + min(6px, 1.25vw)))); */
		/* opacity: 0; */
	}
		
	/* #container >header:hover nav.top, */
	#container >header nav.top.slidedown{
		transform: translate(0, 0);
		opacity: 1;
		height: clamp(180px,50vw, 204px);
	}
		
	#container >header nav.top a{
		padding: min(6px, 1.25vw)  min(12px, 2.5vw);
		width: 100%;
		text-align: left;
		box-sizing: border-box;
	}
		
	.button.top {
		position: fixed;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: clamp(44px,7.6vw,58px );
		height: clamp(57px,14vw,44px );
		background: #000;
		border-radius: 0;
	}

	.button.top a img{
		/* position: relative; */
		/* top: min( 8%, 12px); */
		/* display: none; */
	}
	
		
	.button.top a{
		width: 100%;
		height: clamp(57px,14vw,44px );
		background: linear-gradient(180deg, rgba(51, 255, 0, 0.71) 0%, rgba(201, 255, 203, 0.71) 70.31%, rgba(12, 255, 21, 0.71) 100%);	}
	
	#hmbMenu{
		
		z-index: 1;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		align-content: center;
		align-items: center;

		width: 28px;
		height: 22px;
	}
	
	#hmbMenu em{
		width: 28px;
		height: 2px;
		background: #fff;
	}
	
		
	main>section{
		/* padding: min(96px, 14vw) 0; */
		margin: 0 auto;
		width: min(75vw,1140px);
	}
		
	main>section img{
		width: 100%;
	}

	section .body{
		flex-flow: column;
		justify-content: start;
		align-items: center;
	}

	section .body p b{
		left: calc(clamp(-60px,2vw,-40px)/2);
	}

	#container > footer {
		padding: 36px 36px calc( clamp(57px,14vw,44px ) + 36px);
	}

	#container>footer .rightBlc p{
		margin-bottom:  0;
		line-height: min(32px,10vw);
	}
	
	#container > footer .leftBlc {
		width: min(352px,100%);
		width: min(352px,70%);
	}

	#container>footer .rightBlc .button.bottom{
		display: none;
	}

	#work section.blc1 .content_wrappper{
		display: flex;
		flex-flow: column;
		justify-content: start;
		align-content: center;
		align-items: center;
		
		width: 100%;
	}

	#work section.blc1 .content_wrappper .content{
		position: relative;
		margin-bottom: 22%;
		padding: 6.5% 0 4%;
		width: 100%;
		background: linear-gradient(to right, #fff 18%, rgba(224,224,224,0.48) 18%);
	}
	

	/* works br2 */

	#work section.blc2 .content_wrappper{
		display: flex;
		flex-flow: column;
		justify-content: start;
		align-content: center;
		align-items: center;
		
		width: 100%;
	}

	#work section.blc2 .content_wrappper .content{
		display: flex;
		flex-flow: column;
		justify-content: start;
		align-content: center;
		align-items: start;
		
		margin-bottom: 3.9%;
			margin-bottom: 22%;
		width: 100%;
	}

	#work section.blc2 .content_wrappper .content .leftArea{
		flex: 1 1 auto;
			margin-bottom: 11%;
		width: 100%;
	}
	 
	#work section.blc2 .content_wrappper .content figure{
		width: 100%;
	}
			
	

	#work section > header > h2 {
		font-size: clamp(26px,4vw,59px) ;
	}
	

	#recruit main section{
		margin: 0 auto;
		max-width: 552px;
		width: 82%;
		box-sizing: border-box;
	}
	
}


@media only screen and (max-width: 599px){

	.onlySp{
		display: inline;
	}
		
}


@media only screen and (max-width: 428px){
	
	section >.body{
		font-size: max(12px, 3vw);
		line-height: max(24px, 7.5vw);
	}
	
	section.blc5 .body p em {
		position: static;
		left: unset;
		display: block;
		width: 100%;
	}
		
	#work #headline {
	  margin-bottom: min(60px,12vw,100px);             
	}	

	#work section.blc1{
		margin: 0 auto;
		padding: 0;
		width: 75vw;
		box-sizing: border-box;
	}

	#work section.blc2{
		margin: 0 auto;
		padding: 0;
		width: 75vw;
		box-sizing: border-box;
	}

	#work section header{
	  margin-bottom: min(40px,12vw,100px);
	}
}