@charset "UTF-8";

body{min-height: 100vh; color: #08131A; font-family: "Noto Sans JP", sans-serif; font-size: 1rem; line-height: 2rem; overflow-x: hidden;}
main{width: 100%; max-width: 600px; min-height: calc(100vh - 30px); margin: 0 auto; padding: 0 6px;}
h1{font-size: 1.25rem; font-weight: 700; margin:  90px auto 15px auto; text-align: center;}
h2{font-size: 1.125rem; font-weight: 700; margin-bottom: 15px;}
img{width: 100%;}

/*common==========*/
header{
	width: 100%; height: 60px; position: fixed; top: 0;
	div{width: 90px; height: auto; margin: 0 auto;}
}

footer{position: relative; bottom: 0; width: 100%; height: 30px; color: #fff; background-color: #000; text-align: center; overflow: hidden;}

nav{
	width: 300px; height: 100vh; position: fixed; top: 0; left: -300px; color: #fff; background-color: #000; z-index: 1; transition: .3s;
	ul{position: relative;}
	li{border-bottom: solid 0.5px #fff;}
	a{display: block; width: 100%; height: 100%; padding: 36px;}
	a:hover{color: #000; background-color: #fff; transition: .3s;}
	div.nav_sns{display: flex; flex-direction: row; justify-content: center; align-items: center;}
	div.nav_sns a{width: 60px; height: 60px; padding: 0; margin: 15px;}
	div.nav_sns a img{width: 100%;}
}
nav.visible{left: 0; transition: .3s;}

#hamburgerButton{
	width: 21px; height: 21px; position: fixed; top: 12px; left: 12px; transition: .3s;
	span{display: block; width: 21px; height: 3px; margin: 3px; background-color: #000;}
}
#hamburgerButton.white{
	span{background-color: #fff;}
}

#hamburgerButton.visible{
	width: 21px; height: 21px; position: fixed; top: 12px; left: 300px;
	span:nth-child(1){transform: translateY(6px) rotate(45deg); background-color: #000; transition: .3s;}
	span:nth-child(2){opacity: 0;}
	span:nth-child(3){transform: translateY(-6px) rotate(-45deg); background-color: #000; transition: .3s;}
}

#hamburgerButton.visible.white{
	span:nth-child(1){background-color: #fff;}
	span:nth-child(3){background-color: #fff;}
}

.btn{display: block; width: fit-content; padding: 6px 18px; color: #fff; background-color: #000; border: solid 1px #000; transition: .3s; margin: 10px 6px 15px 0;}
.btn:hover{color: #000; background-color: #fff; border: solid 1px #000; transition: .3s;}
.btn_white{ padding: 6px 18px; color: #fff; border: solid 1px #fff; transition: .3s;}
.btn_white:hover{color: #000; background-color: #fff; border: solid 1px #fff; transition: .3s;}

#load.loading{display: block; position: fixed; width: 100vw; height:100vh; background-color: #08131A; z-index: 3;}
#load.loading img{display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; max-width: 300px; height: auto; animation: logoanimation 2s infinite linear;}
@keyframes logoanimation {
  0% {
  	transform: rotateY(0deg);
  }
  50% {
  	transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
	}
}
.sns{display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}

.tel:before{content: "📞";}
.mail:before{content: "📧";}

#load.loaded{
	display: none;
}

/*ページ別=====*/
#index{
	width: 100%; height: calc(100vh - 30px); padding: 0;
	#topComment{width: 80%; position: fixed; bottom: 60px; right: 30px; text-align: right; color: #fff;}
	#topComment h1{text-align: right; font-size: 2.25rem; line-height: 2.5rem; margin-top: 0;}
	#topComment p{font-size: 1rem; margin-bottom: 24px;}
	#filter{width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.5; z-index: -1;}
	video{width: 100%; height: 100vh; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -2;}
}

#about{
	margin-top: 60px;
}

#stockists{
	margin-top: 60px;
	li{border-bottom: solid 1px #000; margin: 0 0 30px 0; padding: 0 0 30px 0;}
}

#lookbooklist{
	margin-top: 60px;
	ul{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
	li{width: 50%; padding: 30px 6px;}
}

#lookbook{
	margin-top: 60px; padding: 0;
	li{margin: 3px auto;}
}