@charset "utf-8";

*{
	margin:0;
	padding:0;
	font-family: sans-serif;
	font-family: 'Zen Kaku Gothic Antique', sans-serif;
	color: #0e0e0e;
}

/*
	font-family: 'Cuprum', sans-serif;
	font-family: 'Roboto', sans-serif;
*/

body{
	margin: 0 auto;
	width:100%;
	background-color: #fefefe;
}

img{
	max-width:100%;
	margin:0;
}

ul{
	padding:0;
}

li{
	list-style: none;
}

a{
	text-decoration: none;
	display: block;

}

button{
	cursor: pointer;
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.arrow_01 {
  position: relative;
  width: 100px;
}
.arrow01 {
	height: 1px;
	background-color: #0e0e0e;
}
.arrow02 {
 	position: absolute;
 	top: 0;
  right: 0;
  transform-origin: right bottom;
  width: 10px;
  height: 1px;
  transform: rotate(45deg);
  background-color: #0e0e0e;
}

header {
	height:60px;
	width:100%;
	background-color: #fefefe;
	z-index: 999;
	position: fixed;
}

#headerinner{
	display: flex;
	flex-wrap: wrap;
}

header h1{
	margin:auto 0 auto 30px;
}

header h1 a{
	font-size:19px;
	font-weight: 900;
	letter-spacing: 0.8px;
}

header h1,
#mainvisual p:nth-child(1){
	font-family: 'Roboto', sans-serif;
}

#headerinner.offs h1.fadeIn_item,
#headerinner.offs ul li.fadeIn_item{
	opacity: 0;
  transform: translateY(-60px);
}

#headerinner.ons h1.fadeIn_item,
#headerinner.ons ul li.fadeIn_item{
	transition: .3s 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: 1s;
}

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

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

header ul{
	display: flex;
	height: 60px;
	margin:auto 0 auto auto;
}

header ul li{
	margin:0;
	text-align: center;
}

header ul li a{
	font-size:11px;
	height:60px;
	width:170px;
	line-height: 60px;
	font-weight: 500;
	transition: .2s;
}

header ul li a:hover{
	background-color: #3F3F3F;
	color: #fefefe;
	transition: .2s;
}

.arrow_02{
	position: relative;
  display: inline-block;
  vertical-align: middle;
}

header ul li:nth-child(2) .arrow_02::before{
	right:150px;
}

header ul li:nth-child(3) .arrow_02::before{
	transform: rotate(135deg);
	top:-3px;
}

.arrow_02::before{
	position: absolute;
  top: 1px;
  bottom: 0;
  right:144px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #0e0e0e;
  border-right: 1px solid #0e0e0e;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin:auto;
  content: "";
  vertical-align: middle;
}

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

#mainvisual{
	height: auto;
	max-height:795px;
	width:100%;
	max-width:1440px;
	margin:0 auto;
	padding-top:60px;
	display: flex;
	justify-content: space-between;
}

#mainvisual > div{
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}

#mainvisual > div:nth-child(1){
	width:12%;
	max-width: 170px;
	height:auto;
	max-height: 795px;
	transition-delay: 2s;
}

#mainvisual > div:nth-child(1) img{
	width:100%;
}

#mainvisual > div:nth-child(1) img:nth-child(1){
	max-width: 170px;
	height:18%;
	max-height: 150px;
	transition-delay: .3s;
}

#mainvisual > div:nth-child(1) img:nth-child(2){
	max-width: 170px;
	height:35%;
	max-height: 285px;
	transition-delay: .3s;
}

#mainvisual > div:nth-child(1) img:nth-child(3){
	max-width: 170px;
	height:27%;
	max-height: 215px;
	transition-delay: .2s;
}

#mainvisual > div:nth-child(1) img:nth-child(4){
	max-width: 170px;
	height:14%;
	max-height: 115px;
	transition-delay: .6s;
}

#mainvisual > div:nth-child(2){
	width:27%;
	max-width: 390px;
}

#mainvisual > div:nth-child(2) div:nth-child(1),
#mainvisual > div:nth-child(2) div:nth-child(3){
	width:100%;
	max-width: 390px;
	height:10%;
	max-height: 80px;
	display: flex;
	justify-content: space-between;
}

#mainvisual > div:nth-child(2) div:nth-child(1) img:nth-child(1),
#mainvisual > div:nth-child(2) div:nth-child(3) img:nth-child(1){
	width:56%;
	max-width: 220px;
}

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

#mainvisual > div:nth-child(2) div:nth-child(1) img:nth-child(2),
#mainvisual > div:nth-child(2) div:nth-child(3) img:nth-child(2){
	width:41%;
	max-width: 160px;
}

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

#mainvisual > div:nth-child(2) div:nth-child(2){
	width: 100%;
	max-width: 390px;
	height:77%;
	max-height: 615px;
}

#mainvisual > div:nth-child(2) div:nth-child(2) p:nth-child(1){
	width:64%;
	max-width: 250px;
	margin:16% 23% 0 12%;
	font-size:5.4vw;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: .3s cubic-bezier(0, 0, 0.13, 0.79);
	transition-delay: .6s;
}

#mainvisual > div:nth-child(2) div:nth-child(2) p:nth-child(2){
	width:64%;
	max-width: 300px;
	min-width: 215px;
	font-size:1.6vw;
	font-weight:600;
	line-height: 180%;
	letter-spacing: 0.2em;
	margin:9% auto auto 14%;
	transition: .3s cubic-bezier(0, 0, 0.13, 0.79);
	transition-delay: 1s;
}

#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(50px);
}

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

#mainvisual > div:nth-child(2) div:nth-child(3) img:nth-child(2){
	height:75%;
	max-height: 60px;
	margin-top:auto;
	transition-delay: .5s;
}

#mainvisual > div:nth-child(3){
	width:29.5%;
	max-width: 430px;
}

#mainvisual > div:nth-child(3) > img:nth-child(1){
	width:100%;
	max-width: 430px;
	height:36%;
	max-height: 290px;
	transition-delay: .1s;
}

#mainvisual > div:nth-child(3) div{
	width:100%;
	max-width: 430px;
	height:28%;
	max-height:230px;
	display: flex;
	justify-content: space-between;
}

#mainvisual > div:nth-child(3) div img:nth-child(1),
#mainvisual > div:nth-child(3) div img:nth-child(2){
	height:100%;
	max-height:230px;
	transition-delay: .5s;
}

#mainvisual > div:nth-child(3) div img:nth-child(1){
	width:58%;
	max-width: 250px;
}

#mainvisual > div:nth-child(3) div img:nth-child(2){
	width:39%;
	max-width: 170px;
	transition-delay: .6s;
}

#mainvisual > div:nth-child(3) > img:nth-child(3){
	width:100%;
	max-width: 430px;
	height:32%;
	max-height: 255px;
	transition-delay: .3s;
}

#mainvisual > div:nth-child(4){
	width: 29%;
	max-width: 420px;
}

#mainvisual > div:nth-child(4) div{
	width:100%;
	max-width: 420px;
	height:18%;
	max-height:150px;
	display: flex;
	justify-content: space-between;
}

#mainvisual > div:nth-child(4) div img:nth-child(1),
#mainvisual > div:nth-child(4) div img:nth-child(2){
	height:100%;
	max-height:150px;
}

#mainvisual > div:nth-child(4) div img:nth-child(1){
	width:59%;
	max-width: 250px;
	transition-delay: .2s;
}

#mainvisual > div:nth-child(4) div img:nth-child(2){
	width:38%;
	max-width: 160px;
	transition-delay: .4s;
}

#mainvisual > div:nth-child(4) img:nth-child(2),
#mainvisual > div:nth-child(4) img:nth-child(3){
	width:100%;
	max-width: 420px;
}

#mainvisual > div:nth-child(4) img:nth-child(2){
	height:36%;
	max-height: 290px;
	transition-delay: .9s;
}

#mainvisual > div:nth-child(4) img:nth-child(3){
	height:42%;
	max-height: 335px;
	transition-delay: .7s;
}

#mainvisual img{
	transition-delay: 3s;
}

#main_txt{
	height:400px;
	width:100%;
	text-align: center;
}

#main_txt h3{
	font-size: 26px;
	display: inline-block;
	margin:78px auto 36px auto;
}

#main_txt p{
	font-size: 13px;
	line-height: 32px;
}

.catalog{
	height:auto;
	max-height: 370px;
	width:88%;
	max-width: 1270px;
	margin:0 auto;
	display: flex;
	background-color: #0e0e0e;
}

#catalog_img{
	width:63.5%;
	max-width: 890px;
	height:100%;
	max-height: 370px;
	background-color: #1f1f1f;
	display: flex;
	justify-content: space-between;
	padding:3% 3.5% 3% 3%;
}

#catalog_img img:nth-child(1){
	width:74%;
	max-width: 606px;
	max-height:286px;
}

#catalog_img img:nth-child(2){
	width: 24%;
	max-width: 185px;
	max-height: 289.5px;
}

.catalog > div:nth-child(2){

	width:30%;
	max-width: 380px;
	height:100%;
	max-height: 370px;
	text-align: center;
}

.catalog > div:nth-child(2) > p{
	color: #fefefe;
	font-weight: bold;
}

.catalog > div:nth-child(2) > p:nth-child(1){
	font-size: 1.2vw;
	display: inline-block;
	margin:22% auto 9% auto;
}

.catalog > div:nth-child(2) > p:nth-child(2){
	font-size: clamp(14px,1.85vw,26px)
}

.catalog > div button{
	font-size: 1vw;
	line-height:4.2vw;
	width:70%;
	max-width:269px;
	max-height: 60px;
	outline: none;
	border-radius: 0;
	margin-top:28px;
	border:0;
	box-shadow: 10px 10px 0 #545454;
	transition: .4s;
}

.catalog .arrow_01{
	width:3vw;
	top:2.2vw;
}

.catalog > div button:hover{
	box-shadow: none;
	transition: .4s;
	margin:33px -5px -5px auto;
}

nav {
	min-height:630px;
	width:100%;
}

nav ul{
	width:80%;
	max-width: 1160px;
	min-width: 770px;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

nav ul li {
	width:49%;
	max-width:570px;
	height: 140px;
}

nav ul li:nth-child(1),
nav ul li:nth-child(2){
	margin-top:145px;
}

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

nav ul.offs li.faceIn_item{
	transform: translateY(10px);
}

nav ul.ons li.fadeIn_item{
    transition: .8s cubic-bezier(0, 0, 0.13, 0.79);
}

#list_pet{
	transition-delay: .2s;
}

#list_garage{
	transition-delay: .4s;
}

#list_doma{
	transition-delay: .6s;
}

#list_workspace{
	transition-delay: .8s;
}

nav ul li a{
	width:100%;
	max-width:570px;
	height:140px;
	background-color: #fefefe;
	margin:0 0 0 auto;
	box-shadow: 10px 10px 0 #D9D9D9;
	transition: .4s;
}

nav ul li a > div:nth-child(1){
	display: flex;
}

nav ul li a:hover{
	box-shadow: none;
	transition: .4s;
	margin:5px -5px -5px auto;
}

nav ul li a div img{
	width: 43%;
	max-width: 240px;
	height:140px;
	object-fit: cover;
}

nav ul li a > div:nth-child(1) > div{
	width: 54%;
	padding:4% 0 0 5%;
	width:57%;
	max-width: 330px;
}

nav ul li a div > div p:nth-child(1){
	font-size:2.2vw;
	letter-spacing: 0.04em;
	font-weight: bold;
	margin-bottom:5%;
}

nav ul li a div > div p:nth-child(2){
	font-size:12px;
	line-height:180%;
}

nav ul li a .arrow_01{
	width: 4vw;
	left:90%;
	bottom:0px;
	transform: rotate(90deg);
}

nav ul li a .arrow_01 .arrow01,
nav ul li a .arrow_01 .arrow02{
	background-color: #999999;
}

#pet,
#garage,
#doma,
#work-space {
	margin-top:-48.2vw;
}

.sec_img{
	opacity: 0;
}

.sec_img.anim{
	animation-duration: 1.6s;
    animation-name: slidein;
    animation-fill-mode:both;
    object-position: left;
    object-fit: cover;
    opacity: 1;
    animation-delay: 1s;
    height:48.2vw;
}

@keyframes slidein {
  from {
    margin-right: 100%;
    width: 0;
  }

  to {
    margin-right: 7%;
    width: 93%;
  }
}

.mask.anim{
	background-color: #D9D9D9;
	width:0;
	position: relative;
	top:48.2vw;
	height:48.2vw;
	animation-duration: 1.6s;
  animation-name: slide_in;
  max-width: 1350px;
  animation-timing-function:linear;
  animation-delay: 1s;
}

@keyframes slide_in {
  0% {
  	width: 0;
  }

  50%{
  	width: 93%;
  	margin-right: 7%;
  }

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

.section_txt{
	height:390px;
	display: flex;
	max-width: 1150px;
}

#pet .section_txt{
	width:92%;
	margin-left:8%;
}

#garage .section_txt,
#doma .section_txt{
	width:92.5%;
	margin-left:7.5%;
}

.section_txt h2{
	font-size:clamp(26px, 3.5vw, 40px);
	letter-spacing: 0.03em;
	margin:37px auto 0 0;
}

.section_txt h2:nth-child(2){
	font-size:clamp(100px, 13vw, 160px);
	line-height:124px;
	margin:0 auto 0 6px;
}

#garage .section_txt h2:nth-child(2){
	font-size:clamp(100px, 11.5vw, 150px);
}

.section_txt p{
	font-size: clamp(10px, 1.5vw, 15px);
	font-weight: 600;
	line-height:34px;
}

.img_box{
	width:100%;
	max-width: 1440px;
	margin:0 auto;
	position: relative;
}

.img_box div{
	width: 100%;
	position: absolute;
	height:auto;
}

.img_box h4{
	font-size:1.3vw;
	line-height: 100%;
	letter-spacing: 0.04em;
	margin-top:1vw;
}

#pet .img_box p,
#garage .img_box p,
#doma .img_box p,
#work-space .img_box p{
	font-size:0.8vw;
	font-weight: normal;
	margin:1.4vw auto auto 0;
	line-height: 24px;
}

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

.img_box > div.offs img.fadeIn_item{
	opacity: 0.2;
}

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

.img_box > div.ons img.fadeIn_item{
	transition-delay: .2s;
}

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

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

#pet .section_txt p{
	margin:142px auto auto 6%;
}

#pet .img_box{
	height:130vw;
}

#pet .img_box div:nth-child(1){
	top:0;
	right:0;
	width:54vw;
	max-width: 780px;
}

#pet .img_box div:nth-child(2){
	top:12vw;
	left:0;
	width:36vw;
	max-width: 520px;
}

#pet .img_box div:nth-child(2) h4,
#pet .img_box div:nth-child(2) p{
	margin-left:17%;
}

#pet .img_box div:nth-child(3){
	top:51vw;
	right:4vw;
	width:30vw;
	max-width: 440px;
}

#pet .img_box div:nth-child(4){
	top:76vw;
	left:7vw;
	width:48vw;
	max-width: 700px;
}

#garage .section_txt p{
	margin:137px auto auto 5%;
}

#garage .img_box{
	height:102vw;
}

#garage .img_box div:nth-child(1){
	top:0;
	left:0;
	width:53vw;
	max-width: 770px;
}

#garage .img_box div:nth-child(1) h4,
#garage .img_box div:nth-child(1) p{
	margin-left:17%;
}

#garage .img_box div:nth-child(2){
	top:24vw;
	right:0;
	width:38vw;
	max-width: 550px;
}

#garage .img_box div:nth-child(3){
	top:50vw;
	left:9vw;
	width:43vw;
	max-width: 630px;
}

#doma .section_txt p{
	margin:139px auto auto 4%;
}

#doma .img_box{
	height:100vw;
}

#doma .img_box div:nth-child(1){
	top:0;
	right:0;
	width:54vw;
	max-width: 780px;
}

#doma .img_box div:nth-child(2){
	top:5.4vw;
	left:0;
	width:38vw;
	max-width: 560px;
}

#doma .img_box div:nth-child(2) h4,
#doma .img_box div:nth-child(2) p{
	margin-left:17%;
}

#doma .img_box div:nth-child(3){
	top:49.4vw;
	right:7%;
	width:47vw;
	max-width: 680px;
}

#work-space > .section_txt{
	display: inline;
}

#work-space > .section_txt div{
	display: block;
	margin-left:8.5%;
}

#work-space > .section_txt p{
	margin:39px auto 89px 37%;
}

#work-space .img_box{
	height:102vw;
}

#work-space .img_box div:nth-child(1){
	top:0;
	left:0;
	width:54vw;
	max-width: 780px;
}

#work-space .img_box div:nth-child(1) h4,
#work-space .img_box div:nth-child(1) p{
	margin-left:17%;
}

#work-space .img_box div:nth-child(2){
	top:13.8vw;
	right:0;
	width:38vw;
	max-width: 560px;
}

#work-space .img_box div:nth-child(3){
	top:50.3vw;
	left:9vw;
	width:44vw;
	max-width: 640px;
}

#conversion{
	width:100%;
	max-width:1440px;
	margin:0 auto;
	height:100%;
	max-height:770px;
	background-color: #5E5E5E;
	padding:4.2vw 0 6.2vw 0;
}

#tell_exhibition{
	display: flex;
	width:88%;
	max-width:1270px;
	margin:20px auto 0 auto;
	justify-content: space-between;
}

#tell,
#exhibition{
	height:auto;
	max-height: 200px;
	width:49%;
	max-width:625px;
	display: flex;
	background-color: #0e0e0e;
}

#tell img,
#exhibition img{
	width:39%;
	max-width: 245px;
	object-fit: cover;
}

#tell > div,
#exhibition > div{
	width:60%;
	max-width: 380px;
}

#tell > div p,
#exhibition > div p{
	color: #fefefe;
	font-weight: bold;
	text-align: center;
	display: inline-block;
}

#tell > div p{
	font-size:1.3vw;
	margin:11% auto 0 17%;
}

#exhibition > div p{
	font-size: 1.8vw;
	margin:12.5% auto 0 18%;
}

#tell div button,
#exhibition div button{
	font-size: 1vw;
	line-height:3.6vw;
	width:65%;
	max-width:249px;
	max-height: 50px;
	outline: none;
	border-radius: 0;
	border:0;
	margin: auto auto 17% 17%; 
	box-shadow: 10px 10px 0 #545454;
	transition: .4s;
}

#tell div button .arrow_01{
	top:2vw;
	width:1.8vw;
	max-width:22px;
}

#exhibition div button .arrow_01{
	transform: rotate(90deg);
	width:1.8vw;
	max-width:30px;
	top:0.8vw;
	left:1vw;
}

#tell div button{
	margin-top:18px;
}

#exhibition div button{
	margin-top:28px;
}

#tell div button:hover,
#exhibition div button:hover{
	box-shadow: none;
	transition: .4s;
	margin:auto -5px 24px 20%;
}

#tell div button:hover{
	margin-top:23px;
}

#exhibition div button:hover{
	margin-top:33px;
}

footer{
	width:100%;
	text-align: center;
}

footer a{
	margin:68px auto 32px auto;
	transition: .4s;
}

footer a:hover p{
	opacity: 0.8;
	transition: .4s;
}

footer a p:nth-child(1){
	font-size:39px;
	font-weight: 900;
	letter-spacing: 0.04em;
}

footer a p:nth-child(2){
	font-family: 'Cuprum', sans-serif;
	font-size:20px;
	margin-top:3px;
}

footer > p{
	font-size:14px;
	font-weight: 500;
	margin:0 auto 82px auto;
}

#page_top {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

#page_top .arrow_02 {
  background-color: #3F3F3F;
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 36px 36px;
  transition: .2s;
}


#page_top .arrow_02::before{
	top:7px;
	right:0;
	left:0;
  width: 17px;
  height: 17px;
  border-top: 4px solid #fefefe;
  border-right: 4px solid #fefefe;
  border-radius: 2px;
  -webkit-transform: rotate(45deg);
  transform: rotate(-45deg);
  margin:auto;
  content: "";
  vertical-align: middle;
 
}
#page_top .arrow_02:hover {
	margin-bottom:14px;
  text-decoration: none;
  transition: .2s;
}

.fadein {
  opacity :0;
  transform: translateY(20px);
  transition: all .8s;
}

.offs .fadeIn_item{
  opacity: 0;
  transform: translateY(20px);
}

.ons .fadeIn_item{
  transition: 2.2s cubic-bezier(0, 0, 0.13, 0.79);
  opacity: 1;
  transform: translateY(0);
}