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

	#tell div button{
		font-size:0.7vw;
	}

	#tell div button .arrow_01{
		width:1.3vw;
	}
}

@media screen and (max-width:800px){
	/*
		body{
			background-color: green;
		}	
	*/

	.br::before {
		content: "\A" ;
		white-space: pre ;
	}

	.arrow01,
	.arrow02{
		height:2px;
	}

	.arrow02{
		width:3.5vw;
	}

	header { 
		height: 13vw;
	}

	header h1{
		width: 37%;
		line-height: 13vw;
		margin:auto 0 auto 4%;
	}

	header h1 a{
		font-size:4.4vw;
	}

	#headerinner.ons h1.fadeIn_item,
	#headerinner.ons ul li.fadeIn_item{
		transition: .4s cubic-bezier(0, 0, 0.13, 0.79);
	}

	#headerinner.ons h1.fadeIn_item{	
		transition-delay: .9s;
	}

	#headerinner.ons ul li.fadeIn_item:nth-child(1){
		transition-delay: 1.1s;
	}

	#headerinner.ons ul li.fadeIn_item:nth-child(3){
		transition-delay: 1.3s;
	}

	header ul{
		width: 59%;
		height: 13vw;
	}

	header ul li {
		width: 50%;
	}

	header ul li a.arrow_02::before{
		left:10%;
	}

	header ul li:nth-child(1) a.arrow_02::before{
		left: 8px;
	}

	header ul li:nth-child(3) a.arrow_02::before{
		left:10px;
		width: 1.8vw;
		height: 1.8vw;
	}

	header ul li a{
		width:100%;
		height:13vw;
		line-height: 13vw;
		color: #fefefe;
		background-color: #0e0e0e;
	}

	header ul li a.arrow_02::before{
		border-color: #fefefe;
	}

	header ul li:nth-child(3) a{
		font-size: 3vw;
		width:63%;
		height:9vw;
		padding:2vw 10% 2vw 27%;
		line-height: 4vw;
		text-align: left;
		border-left: 1px solid #fefefe;
	}

	header ul li a:hover{
		background-color: #0e0e0e;
	}

	header ul li:nth-child(2){
		display: none;
	}

	#mainvisual{
		padding-top:13vw;
		flex-wrap: wrap;
		max-height: none;
	}

	#mainvisual > div:nth-child(1),
	#mainvisual > div:nth-child(2) > div:nth-child(1),
	#mainvisual > div:nth-child(2) > div:nth-child(3){
		display: none;
	}

	#mainvisual > div:nth-child(2){
		width: 100%;
		max-width: none;
	}

	#mainvisual > div:nth-child(2) > div:nth-child(2){
		width: 100%;
		max-width: 800px;
		height:100%;
		max-height: none;
		display: flex;
		margin-bottom:5%;
	}

	#mainvisual > div:nth-child(2) > div:nth-child(2) p:nth-child(1){
		max-width: none;
		font-size: 16vw;
		margin:5% 0 0 6%;
		transition-delay: .2s;
	}

	#mainvisual > div:nth-child(2) > div:nth-child(2) p:nth-child(2){
		max-width: none;
		font-size:4.4vw;
		line-height: 150%;
		font-weight: 500;
		letter-spacing: 0.1em;
		display: inline-block;
		min-width: 0;
		margin:auto 0 3% 4% ;
		height:20%;
		transition-delay: .4s;
	}

	#mainvisual.offs > div:nth-child(2) > div:nth-child(2) p:nth-child(1).fadeIn_item,
	#mainvisual.offs > div:nth-child(2) > div:nth-child(2) p:nth-child(2).fadeIn_item{
		transform: translateY(0px);
	}

	#mainvisual > div:nth-child(3),
	#mainvisual > div:nth-child(4){
		width: 49%;
		max-width: none;
	}

	#mainvisual > div:nth-child(3) > img:nth-child(1){
		transition-delay: .3s;
	}

	#mainvisual > div:nth-child(3) div img:nth-child(1),
	#mainvisual > div:nth-child(4) div img:nth-child(1){
		transition-delay: .4s;
	}

	#mainvisual > div:nth-child(3) div img:nth-child(2){
		transition-delay: .5s;
	}

	#mainvisual > div:nth-child(3) > img:nth-child(3),
	#mainvisual > div:nth-child(4) div img:nth-child(2),
	#mainvisual > div:nth-child(4) img:nth-child(2){
		transition-delay: .6s;
	}

	#mainvisual > div:nth-child(4) img:nth-child(3){
		transition-delay: .7s;
	}

	#main_txt{
		text-align: left;
		width:100%;
		height:auto;
		margin:0 auto;
	}

	#main_txt h3{
		font-size:6vw;
		width:76%;
		padding:0 12% 0 12%;
		line-height: 180%;
	}

	#main_txt p{
		font-size:3.6vw;
		line-height: 250%;
		width:86%;
		padding:0 2% 8% 12%;
	}

	.catalog{
		width:90%;
		flex-wrap: wrap;
		max-height: none;
	}

	#catalog_img{
		width: 100%;
		flex-wrap: wrap;
		max-height: none;
		padding:3%;
	}

	#catalog_img img:nth-child(1){
		width:100%;
		margin:0 auto;
	}

	#catalog_img img:nth-child(2){
		width:26%;
		max-width: none;
		margin:0 auto;
	}

	.catalog > div:nth-child(2){
		width: 100%;
		max-width: none;
		height: 100%;
	}

	.catalog > div:nth-child(2) p:nth-child(1){
		font-size: 12px;
		margin:3% auto 3% auto;
	}

	.catalog > div:nth-child(2) p:nth-child(2){
		font-size: 20px;
		margin-bottom:2%;
	}

	.catalog > div button{
		font-size: 3.2vw;
		font-weight: 600;
		line-height:10vw;
		width:70%;
		max-width:none;
		max-height: none;
		margin:0 auto 5vw auto;
		box-shadow: 6px 6px 0 #545454;
	}

	.catalog > div button:hover{
		box-shadow: 6px 6px 0 #545454;
		margin:0 auto 5vw auto;
	}

	.catalog .arrow_01{
		width:6vw;
		max-width:none;
		top:5vw;
	}

	nav {
		min-height: 0;
	}

	nav ul{
		width: 90%;
		margin:14% auto 14% auto;
		min-width: 0;
	}

	nav ul li {
		width:100%;
		height:80px;
		max-width: none;
	} 

	nav ul li:nth-child(1){
		margin-top:0;
	}

	nav ul li:nth-child(2),
	nav ul li:nth-child(3),
	nav ul li:nth-child(4){
		margin-top:20px;
	}

	nav ul li a{
		max-width: none;
		height:80px;
		box-shadow: 6px 6px 0 #D9D9D9;
	}

	nav ul li a:hover{
		margin:0;
		box-shadow: 6px 6px 0 #D9D9D9;
	}

	nav ul li a:hover div p:nth-child(2){
		opacity: 0.8;
	}

	nav ul li a > div:nth-child(1) > div{
		padding:1% 0 0 5%;
	}

	nav ul li a > div{
		height:80px;
	}

	nav ul li a div img{
		width:35%;
		height:100%;
		object-fit: cover;
	}

	nav ul li a div div p:nth-child(1){
		font-size: 4vw;
		line-height: 100%;
		margin-bottom:0;
	}

	nav ul li a div div p:nth-child(2){
		font-size:1vw;
		margin-top:1%;
	}

	nav ul li a .arrow_01{
		width: 30px;
		left:84%;
		bottom:58%;
		transform: rotate(90deg);
	}

	nav ul li a .arrow02{
		width:1.8vw;
	}

	nav ul li a .arrow_01 .arrow01,
	nav ul li a .arrow_01 .arrow02{
		height:1px;
	}

	.sec_img.anim,
	.mask.anim{
		animation-delay: .5s;
		animation-duration: 2s;
	}

	.sec_img.anim{
		height: 52vw;
	}

	/*.sec_img*/
	@keyframes slidein {
	  from {
	    width: 0;
	  }

	  to {
	    width: 100%;
	  }
	} 

	.mask{
		max-width: 100vw;
	}

	.mask.anim{
		top: 52vw;
		left: 0;
		height: 52vw;
		margin: 0;
		max-width: 100vw;
	}

	/*.mask！！！！スマホの時動いてる最中にぴょこんと外へ出る！！！！*/
	@keyframes slide_in {
	  0% {
	   width: 0;
	  }

	  50%{
	  	width: 100%;
	  }

	  100% {
	   width: 0;
	   margin-left: auto;
	  }
	}

	#pet .section_txt,
	#garage .section_txt,
	#doma .section_txt,
	#work-space .section_txt{
		width:93%;
		margin-left:7%;
		display: block;
		height: 100%;
		margin-bottom:11%;
	}

	.section_txt div{
		width: 100%;
		margin-bottom:6%;
	}

	#work-space .section_txt div{
		margin-left:0;
	}

	.section_txt div h2:nth-child(1){
		font-size:5.2vw;
		line-height: 110%;
	}

	.section_txt div h2:nth-child(2),
	#garage .section_txt h2:nth-child(2){
		font-size:20vw;
		margin:0 auto 0 -6px;
		line-height: 80%;
	}

	#pet .section_txt p,
	#garage .section_txt p,
	#doma .section_txt p,
	#work-space .section_txt p{
		font-size: 12px;
		line-height: 26px;
		text-align: left;
		font-weight: 500;
		width: 99%;
		margin:10px auto auto 1%;
	}

	#pet .img_box,
	#garage .img_box,
	#doma .img_box,
	#work-space .img_box{
		width:90%;
		height:100%;
		margin:0 auto 14% auto;
	}

	.img_box div{
		position: static;
		width: 100% !important;
		margin-bottom:5%;
		max-width: none !important;
	}

	.img_box div img{
		width: 100%;
	}

	.img_box > div.ons h4.fadeIn_item,
	.img_box > div.ons p.fadeIn_item{
		transition: 1.6s cubic-bezier(0, 0, 0.13, 0.79);
	}

	.img_box > div.ons h4.fadeIn_item{
		transition-delay: .8s;
	}

	.img_box > div.ons p.fadeIn_item{
		transition-delay: 1s;
	}

	#pet .img_box h4,
	#garage .img_box h4,
	#doma .img_box h4,
	#work-space .img_box h4{
		font-size: 14px;
	}

	#pet .img_box p,
	#garage .img_box p,
	#doma .img_box p,
	#work-space .img_box p{
		font-size:9px;
		margin-bottom:7vw;
	}

	#pet .img_box div:nth-child(2) h4,
	#pet .img_box div:nth-child(2) p,
	#garage .img_box div:nth-child(1) h4,
	#garage .img_box div:nth-child(1) p,
	#doma .img_box div:nth-child(2) h4,
	#doma .img_box div:nth-child(2) p,
	#work-space .img_box div:nth-child(1) h4,
	#work-space .img_box div:nth-child(1) p{
		margin-left:0;
	}

	#conversion{
		max-height: none;
		background-color: transparent;
	}

	#tell_exhibition{
		display: block;
		width:90%;
	}

	#tell,
	#exhibition{
		width:100%;
		max-width: none;
		height: 100%;
		max-height: none;
		display: block;
		padding-bottom:30px;
	}

	#tell{
		margin-bottom:30px;

	}

	#tell img,
	#exhibition img{
		width: 100%;
		height:48vw;
		object-fit: cover;
		max-width: none;
	}

	#tell > div,
	#exhibition > div{
		width:100%;
		max-width: none;
	}

	#tell > div p,
	#exhibition > div p{
		font-size: 18px;
		width: 100%;
		margin:2% auto 3% auto; 
	}	

	#tell div button,
	#exhibition div button{
		font-size: 3vw;
		font-weight: 600;
		line-height:10vw;
		width:70%;
		max-width: none;
		max-height: none;
		margin:0 15%;
		box-shadow: 6px 6px 0 #545454;
	}

	#tell div button .arrow_01{
		top:4.5vw;
		width:6vw;
		max-width:none;
	}

	#exhibition div button .arrow_01{
		width:14%;
		max-width:none;
		top:10px;
		left:8px;
	}


	#tell div button:hover,
	#exhibition div button:hover{
		box-shadow: 6px 6px 0 #545454;
		margin:0 15%;
	}

	footer > p{
		margin:0 auto 282px auto;
	}

	#page_top .arrow_02 {
	    background-color: #0e0e0e;
	}

}