@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  background-color: #000 ;
  color: #d0d0d0;
}
a {
  color: #d0d0d0;
}
a:hover {
  color: #888888;
}

.view-all {
  background-color: #d0d0d0;
}
.gold {
	background-color: #cdb45d;
}
.opacity-20{
  opacity : 0.2;
}
section:nth-child(n + 3) {
	margin: 100px 0px;
}
@media only screen and (max-width: 640px) {
	section:nth-child(n + 3) {
		margin: 75px 0px;
	}
}
.logo {
	display: inline-block;
	margin-top: 5px;
  color: #e8eaf6;
}
.logo:hover {
  color: #e8eaf6;
  opacity: .6;
}



.logo img:nth-child(1) {
  width: 50px;
  height: 45px;
}
.logo img:nth-child(2) {
  width: 100px;
  height: 24px;
}
@media only screen and (max-width: 640px) {
	.logo {
		margin: 0px 10px ;
	}
	.logo img:nth-child(1) {
	  width: auto;
	  height: 35px;
	}
	.logo img:nth-child(2) {
	  width: 100px;
	  height: 24px;
	}
}
header nav {
	height: 75px;
	background-color: #fff;
}
nav .container-fluid {
	min-width: 1440px;
}
nav .nav-toggler {
	position: absolute;
	top: 0;
	right: 150px;
	width: 75px;
	height: 75px;
  margin: auto;
	display: inline-block;
	color: #161616;
}
.nav-toggler i,
.nav-collapse i {
	margin: 13px 13px;
	font-size: 1.6rem;
}
.nav-collapse {
	position: absolute;
	top: 0;
	right: 170px;
	text-align: right;
	display: inline-block;
}
.nav-collapse ul {
  list-style: none;
}
.nav-collapse li {
	font-size: .8rem;
  display: inline-block;
  padding: 28px .9rem 0 0;
  text-align: center;
}
.nav-collapse li a {
  font-family: 'Lato, Noto Sans JP', sans-serif;
  color: #161616;
  font-weight: 700;
}
.nav-collapse li a:hover {
  color: #666;
  font-weight: 700;
}
header nav {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  z-index: 1000;
}
.nav-link {
	position: absolute;
	top: 0;
	right: 170px;
}
.nav-btn {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 0;
}
.nav-btn a {
	display: inline-block;
	width: 75px;
	height: 75px;
	text-align: center;
	background-color: #666;
}
.nav-btn a img{
	width: 51px;
	height: 51px;
	margin-top: 10px;
}
.recruit-cast {
	background-color: #ff3366;
}
@media only screen and (max-width: 1280px) {
	.nav-collapse li {
		font-size: .7rem;
	}
}
@media only screen and (max-width: 1024px) {
	.nav-collapse li {
  	padding: 30px .3em;
	}
}
@media only screen and (max-width: 640px) {
	.logo img:nth-child(1) {
	  width: 40px;
	}
	.logo img:nth-child(2) {
	  width: 100px;
	}
	header nav {
		height: 50px;
		background-color: #fff;
	}
	nav .nav-toggler {
		position: absolute;
		top: 0;
		right: 100px;
		width: 50px;
		height: 50px;
	  margin: auto;
		display: inline-block;
		color: #161616;
	}
	header nav {
	  position: fixed;
	  top: 0;
	  left: 0;
	  margin: 0;
	  width: 100%;
	  z-index: 1000;
	}
	.nav-btn {
		position: absolute;
		top: 0;
		right: 50px;
		font-size: 0;
	}

	nav .nav-toggler, 
	nav .nav-ctl {
		position: absolute;
		top: 0;
		right: 0px;
		width: 50px;
		height: 50px;
	  margin: auto;
		display: inline-block;
		color: #161616;
		background-color: #d0d0d0;
	}
	.nav-collapse {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 50px;
		width: 100%;
		height: 100vh;
		background-color: rgba( 0,0,0,.9 );
		z-index: 1001;
	}
	.nav-collapse.active {
		display: block;
	}
 .nav-collapse ul {
 		display: block;
 		width: 100%;
 		padding: 0 3.5em;
  	list-style: none;
	}
	.nav-collapse li {
	  display: block;
 		padding: 1.6em 0 ;
 		margin: 0;
	  text-align: left;
	}
	.nav-collapse li a {
	  text-decoration: none;
	  color: #d0d0d0;
	  font-weight: 500;
	  font-weight: bold;
	}
	.nav-btn a {
		display: inline-block;
		width: 50px;
		height: 50px;
		text-align: center;
		background-color: #666;
	}
	.nav-btn a img{
		width: auto;
	  height: 38px;
		margin-top: 7px;
	}
}


/** メインビジュアル **/

#main_visual .bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  color: #fff;
}
#main_visual .bg.-visible:before {
  transform: translate(0, 0);
}
#main_visual .bg:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background: top center / cover no-repeat url(/assets/img/bg.webp);
  transform: translate(0, 100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
  content: '';
}
.bg .copy {
	position: absolute;
	top: 15%;
	left: 20%;
	margin: auto;
  display: block;
  width: 200px;
  height: auto;
  text-align: center;
}
.bg .logo {
	position: absolute;
	bottom: 0;
	margin: auto;
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
	background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 50%);
}

.bg .logo {
  opacity: 0;
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity linear 0.9s;
}
.bg .logo img {
	width: 200px;
	margin: 50px 0;
}
.bg .logo {
  transform: translate(0, 10px);
  transitio,n-delay: 0.55s;	
}
.bg.-visible .logo {
  opacity: 1;
  transform: translate(0, 0);
}


@media only screen and (max-width: 640px) {
	.bg .copy {
	  position: initial;
	}
	.bg .copy {
		position: absolute;
		top: auto;
		bottom: 0px;
		left: 0;
		margin: 0 auto;
		padding-bottom: 135px;
		width: 100%;
		background:linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
	}
	.bg .copy img {
		width: 30%;
	}
	.bg .logo {
		padding-bottom: 0px;
		background:linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(0,0,0,0));
	}
	.bg .logo img {
		width: 150px;
	}
	#main_visual .bg:before {
		background: top center / cover no-repeat url(/assets/img/bg.webp);
	}
}

#shop_list p {
	line-height: 1.4em;
}

.youtubesm{
background:#fff
}
.youtubesm a{
border:2px
solid #fff;
display:block;
position:relative
}
.youtubesm a:hover{
opacity:.6
}
.youtubesm a::before{
background:url(/assets/img/youtube.webp) center center / 100px 64px no-repeat;content:"";
display:block;
width:100%; /*アイコンの幅調整*/
height:60px; /*アイコンの高さ調整*/
margin:-32px auto 0;
position:absolute;
top:50%;
left:0;
right:0;
z-index:1
}
.youtubesm a img{
width:100%
}


h2 small {
	margin-left: 1em ;
	font-size: 0.6em;
	font-weight: 300;
}
h2, .h2 {
	font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6em;
	text-shadow: 0 0 10px #ff0077, 0 0 20px #660022 ;
}
h3, .h3 {
	font-size: 1.3rem;
	letter-spacing: .3em;
}
h3, h4, h5 {
  font-weight: 500;
}
p, small, .small {
  font-weight: 300; 
}


/**ユーティリティ**/
.rank-init {
  counter-reset: rank;
}
.triangle {
  position: relative;
}
 .triangle::before { /* ラベルのスタイル */
  content: "";
  position: absolute;
  border-bottom: 100px solid transparent;
  border-left: 100px solid #000;
  opacity: .8;
}
.triangle.rank:nth-child(1)::before {
  border-left: 100px solid #e6c300;
}
.triangle.rank:nth-child(2)::before {
  border-left: 100px solid #a9a9a9;
}
.triangle.rank:nth-child(3)::before {
  border-left: 100px solid #815a2b;
}
.triangle:nth-child(n + 4 )::before {
  border-left: 100px solid #000;
}
.triangle.new::before {
  border-left: 100px solid rgba(255,0,0,1);
}
.triangle::after { /* 順位（文字）のスタイル */
  content: " ";
  position: absolute;
  top: 10px;
  left: 25px;
  font-size: 1.2em;
  color: #fff;
}
.triangle.rank::after { /* 順位（文字）のスタイル */
  counter-increment: rank;
  content: "No." counter(rank) ;
}
.triangle.new::after { /* 順位（文字）のスタイル */
  content: "New!!" ;
}

@media only screen and (max-width: 640px) {
	.triangle::before { /* ラベルのスタイル */
	  border-bottom: 30px solid transparent;
	}
	.triangle::after { /* 順位（文字）のスタイル */
	  content: " ";
	  position: absolute;
	  top: 5px;
	  left: 25px;
	  font-size: .8em;
	  color: #fff;
	}

}



.ratio-3-4{
 	width: 100%;
 	aspect-ratio: 3 / 4;
}
.ratio-3-2{
 	width: 100%;
 	aspect-ratio: 3 / 2;
  overflow: hidden;
}
.ratio-3-1{
 	width: 100%;
 	aspect-ratio: 3 / 1;
}
.square{
 	width: 100%;
 	aspect-ratio: 1;
}
.cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.cover.center{
  object-position: center center;
}
.x-small {
	font-size: 0.37em;
	vertical-align: super;
}
.btn-floating.btn-xs {
	margin: 5px;
  width: 21.21112px;
  height:21.21112px
}
.btn-floating.btn-xs i {
  font-size: .74519rem;
  line-height:22.5px
}
div#share{
	display: inline-block;
}
/* ページTOP */
#page-top {
	width: 64px;
	height: 64px;
	position: fixed;
	right: 15px;
	bottom: 15px;
	/* メインカラー */
	background-color: #373737;
	border-radius: 32px;
	-webkit-border-radius: 32px;
	-moz-border-radius: 32px;
}
#page-top a:hover {
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity:0.8;
}
#page-top a {
    width: 64px;
    height: 64px;
    display: block;
    text-align: left;
    text-indent: -200em;
    overflow: hidden;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="32,26"><polygon fill="%23e8eaf6" points="32 25.85 16 9.85 0 25.85 0 16 16 0 32 16 32 25.85" /></svg>');
    background-size: 64px 64px;
    background-position: 16px 16px;
    border-radius: 32px;
    background-color: #373737;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
}
#footer ul {
	list-style: none;
	text-align: left;
}

footer nav li {
	position: relative;
  display: inline-block;
	width: 24%;
	margin: 0px;
	padding: 0px;
	text-align: left;
}
footer nav li a {
  font-family: 'Lato, Noto Sans JP', sans-serif;
  color: #161616;
	font-size: .8rem;
  font-weight: 700;
}
footer nav li a:hover {
  color: #666;
  font-weight: 700;
}
footer nav li:before {
  color: #ddd;
  content: "▶︎";
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -7px;
  font-size: 0.5rem;
}

@media only screen and (max-width: 640px) {
  footer nav li {
  	display: inline-block;
  	width: 49% ;
  	margin: 0px ;
    padding: 0px 0px ;
  }
  footer nav li a {
		font-size: .6rem;
  }
	footer nav li:before {
	  right: 30px;
  	margin-top: -2px;
	}
}

/* --------------------- HEADER IMAGE */
.slick-dots{
  bottom:-50px;
}
.slick-dots li {
  margin: 0; 
  width: 70px;
　height: 2px;
}
.slick-dots li button:before {
  content:'';
  width: 70px;
　height: 2px;
　background: #666666;
　opacity: 1;
}
.slick-dots li.slick-active button:before{
  background: #ff0066;
}