@charset "UTF-8";
/* CSS Document */
	*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
#bl {
	font-family: yu-gothic-pr6n, sans-serif;
	overflow-x: hidden;
	font-size: 13px;
/*
	max-width: 1350px;
	min-width: 300px;
*/
	
	
	
  margin: 0 auto;
}
	
@media screen and (min-width: 768px) {
  #bl {
    font-size: 16px;
  }
}


/*****bl_header*****/
#bl .bl_header{
	position: relative;
	height:100vh; 
	z-index: 0;
}
	
#bl .main .item .line {
  height: 1px;
  width: 60%;
  margin: 0 auto 20px; 
  background: #000;
}

#bl .bl_header #tit img {
  width: 100%;
  height: auto;
  display: block;

}

#bl .bl_header::before {
  content: "";
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff);
}
	
#bl .bl_header #keyvis{
	position:relative;
	z-index: 1;
	height: 100vh;
}
	
#bl .bl_header #keyvis img{
	width: 100%;
	display: block;
}
	
#bl .bl_header #keyvis #keyvis1{
	position:absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 40%;
	
}
	
#bl .bl_header #keyvis #keyvis2{
	position:absolute;
	z-index: 3;
	top: 20%;
	left: 30%;	
	width: 25%;	
}
	
#bl .bl_header #keyvis #keyvis3{
	position:absolute;
	z-index: 4;
	top: 2%;
	right: 2%;
	width: 40%;
}
	
	
#bl .bl_header #keyvis #keyvis4{
	position:absolute;
	z-index: 7;
	bottom: 2%;
	left: 0;
	width: 25%;
}

#bl .bl_header #keyvis #keyvis5{
	position:absolute;
	z-index: 6;
	bottom: 10%;
	left: 5%;
	width: 40%;
}
	

#bl .bl_header #keyvis #keyvis6{
	position:absolute;
	z-index: 5;
	bottom: 5%;
	right: 0%;
	width: 60%;
	max-width: 350px;
}
	
#bl .bl_header #keyvis #keyvis7{
	display: none;
}
	

#bl .bl_header #keyvis #keyvis8{
	display: none;
}

#bl .bl_header #tit img {
  opacity: 0;
  animation: fadeInFromBottom 2.5s ease-in-out forwards;
  animation-delay: 2.0s;
}

@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#bl .bl_header #keyvis #keyvis1,
#bl .bl_header #keyvis #keyvis2,
#bl .bl_header #keyvis #keyvis3,
#bl .bl_header #keyvis #keyvis4,
#bl .bl_header #keyvis #keyvis5,
#bl .bl_header #keyvis #keyvis6{
  opacity: 0;
  animation: fadeInUp 2.5s ease-in-out forwards;
}

#bl .bl_header #keyvis #keyvis1{ animation-delay: 0s; }
#bl .bl_header #keyvis #keyvis2{ animation-delay: 0.5s; }
#bl .bl_header #keyvis #keyvis3{ animation-delay: 1.0s; }
#bl .bl_header #keyvis #keyvis4{ animation-delay: 1.5s; }
#bl .bl_header #keyvis #keyvis5{ animation-delay: 1.8s; }
#bl .bl_header #keyvis #keyvis6{ animation-delay: 0.75s; }
/*#bl .bl_header #tit img{ animation-delay: 2.5s; }*/

@keyframes fadeInUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
	
/****readsec*****/
	#bl .readsec{
		width: 100%;
		margin: 20% auto;
		
	}
	
	#bl .read{
		width: 80%;
		margin: 0 auto;
		padding: 8%;
		background: rgba(0, 0, 0, 0.05);
	}

/****pagelink*****/
	#bl .pagelink{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;   
		grid-template-rows: repeat(2, auto); 
		margin: 5% 5% 15%;
		row-gap: 30px; 
	}

	#bl .pagelink img{
		display: block;
		width: 100%;
	}
	#bl .pagelink .linkitemname{
		display: block;
		font-size: 6px;
		text-align: center;
		font-family: acumin-variable, sans-serif;
	}
	#bl .pagelink .no{
		display: block;
		font-size: 13px;
		text-align: center;
		font-family: acumin-variable, sans-serif;
	}
	
	#bl .pagelink a{
		text-decoration: none;
		color: #000;
	}
	
	#bl .pagelinktit{
		font-family: acumin-variable, sans-serif;
		text-align: center;
		font-size: 16px;
		font-weight: 800;
		margin: 0;
		padding: 0;
	}
	
/****main*****/
	#bl .bl_header #tit{
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 2;
		width: 80%;
	}
	
	#bl .main .item{
		position: relative;
		width: 100%;
		margin: 30% 0;
	}
	#bl .main .styletit{
		display: block;
		position: static;
	}
	#bl .main .styletit img{
		width: 50%;
		display: block;
		margin: 0 auto 8px;
	}
	
	#bl .main .styleimg{
		position: relative;
		width: 100%;
		height: auto;
	}
	
	#bl .main .styleimg img{
		font-display: block;
		width: 100%;
	}
	
	#bl .main .styleimg .stylevis{
		position: relative;
		z-index: 0;
	}
	
	#bl .main .styleimg .itemname{
		position: absolute;
		z-index: 2;
		bottom: 5%;
		right: 5%;
		height: auto;
		display: block;
		width: 8%;
		height: auto;
	}
	
	.color-swatch {
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  border: 1px solid rgba(0,0,0,0.5); 
	  display: inline-block;
	  cursor: pointer;
	}
	
	#bl .main .buy{
		font-family: acumin-variable, sans-serif;
		margin-bottom: 5px;
		
	}
	
	#bl .main .buy a{
		margin: 0 5%;
		border: solid 1px #000;
		color: #000;
		padding: 1px 2px;
		text-decoration: none;
	}
	
	
	#bl .main .text{
		margin: 0 auto;
		padding: 10% 5% 0;
		display: block;
	}
	
/****style1***/
	#bl .main .style1 .lookimg{
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 10% 0;
	}
	
	#bl .main .style1 .lookimg img{
		display: block;
		width: 100%;
	}
	
	#bl .main .style1 .lookimg3{
		display: block;
		width: 100%;
		margin: 10% 0;
	}
	
	#bl .main .style1 .styleimg .moviebutton{
		position: absolute;
		z-index: 1;
		top: 10%;
		right: 5%;
		width: 20%;
	}
	
		#bl .main .style1 .detail{
		  font-family: acumin-variable, sans-serif;
		  margin: 0 5% 5%;
		  display: flex;
/*		  justify-content: space-between;*/
		  align-items: center;
	}
		#bl .main .style1 .detail p{
		display: block;
		width: 100%;
	}
	
	
/****style2***/
	#bl .main .style2 .lookimg{
		margin: 10% 0;
	}
	
	
	#bl .main .style2 .lookimg1{
		display: block;
		width: 70% ;
		margin: 10% auto;
	}
	
	#bl .main .style2 .lookimg2{
		display: block;
		width: 100% ;
		margin: 10% auto;
	}
	
	#bl .main .style2 .lookimg3{
		position: relative;
		margin: 10% 0 0;
	}

	#bl .main .style2 .lookimg3 #fade1{
		position: relative;
		width: 100%;
		display: block;
		opacity: 0;
		animation: fadeLoop 12s infinite;
	}

	#bl .main .style2 .lookimg3 #fade2,
	#bl .main .style2 .lookimg3 #fade3{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  opacity: 0;
	  animation: fadeLoop 12s infinite;
	}

	#bl .main .style2 .lookimg3 #fade1{ animation-delay: 0s; }
	#bl .main .style2 .lookimg3 #fade2{ animation-delay: 4s; }
	#bl .main .style2 .lookimg3 #fade3{ animation-delay: 8s; }

	@keyframes fadeLoop {
	  0%   { opacity: 0; }
	  10%  { opacity: 1; }
	  33%  { opacity: 1; }
	  43%  { opacity: 0; }
	  100% { opacity: 0; }
	}
	
	#bl .main .style2 .styleimg .moviebutton{
		position: absolute;
		z-index: 1;
		top:10%;
		left: 5%;
		width: 20%;
	}
	
	#bl .main .style2 .detail-group {
	  width: fit-content;
	  margin: 0 auto;      
	}

	#bl .main .style2 .detail{
	  font-family: acumin-variable, sans-serif;
	  margin: 0 5% 5%;
	}

	#bl .main .style2 .detail p{
	  text-align: left;     
	}

	#bl .main .style2 .buy{
	  margin-bottom: 5px;
		text-align: left; 
		margin-left: 6px;
	}

	#bl .main .style2 .buy a{
	  display: block;
	  width: fit-content;
	  border: solid 1px #000;
	  color: #000;
	  padding: 1px 2px;
	  text-decoration: none;
	  margin: 0;       

	}
	
	
	/****style3***/
	#bl .main .style3 .lookimg{
		margin: 10% 0;
		display: flex;
		position: relative;
	}
	
	#bl .main .style3 .detail-group{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999;
	}
	#bl .main .style3 .lookimg1{
		position: relative;
		width: 70%;
		display: block;
		margin: 0 0 0 auto; 
	}
	
	#bl .main .style3 .lookimg2{
		display: block;
		width: 100% ;
	}
	
	#bl .main .style3 .lookimg3{
		display: block;
		width: 80% ;
		margin: 0 auto; 
	}
	
	#bl .main .style3 .flex{
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
	
	#bl .main .style3 .styleimg .moviebutton{
		position: absolute;
		z-index: 1;
		bottom:10%;
		left: 5%;
		width: 20%;
	}
	
	#bl .main .style3 .detail-group {
	  width: fit-content;
	  margin: 0 3%;      
	}

	#bl .main .style3 .detail{
		font-family: acumin-variable, sans-serif;
		margin: 0 5% 5%;
		width: 100%;
		
	}

	#bl .main .style3 .detail p{
		text-align: left;
		width: 100%;	}

	#bl .main .style3 .buy{
	  margin-bottom: 5px;
		text-align: left; 
		margin-left: 6px;
	}

	#bl .main .style3 .buy a{
	  display: block;
	  width: fit-content;
	  border: solid 1px #000;
	  color: #000;
	  padding: 1px 2px;
	  text-decoration: none;
	  margin: 0;       

	}
	
	/****style4***/
	#bl .main .style4 .lookimg{
		margin: 10% 0;
		display: flex;
		position: relative;
	}
	
	#bl .main .style4 .detail-group{
	}
	#bl .main .style4 .lookimg1{
		display: block;
		width: 70% ;
		margin: 10% auto;
	}
	
	#bl .main .style4 .lookimg2{
		display: block;
		width: 100% ;
		margin: 10% auto;
		padding: 0 3%;
	}
	
	#bl .main .style4 .lookimg3{
		display: block;
		width: 80% ;
		margin: 0 auto; 
	}
	
	#bl .main .style4 .flex{
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
	
	#bl .main .style4 .styleimg .moviebutton{
		position: absolute;
		z-index: 1;
		bottom:10%;
		right: 5%;
		width: 20%;
	}
	
	#bl .main .style4 .detail-group {
	  width: fit-content;
	  margin: 0 3%;      
	}

	#bl .main .style4 .detail{
		font-family: acumin-variable, sans-serif;
		margin: 0 5% 5%;
		width: 100%;
		
	}

	#bl .main .style4 .detail p{
		text-align: left;
		width: 100%;	}

	#bl .main .style4 .buy{
	  margin-bottom: 5px;
		text-align: left; 
		margin-left: 6px;
	}

	#bl .main .style4 .buy a{
	  display: block;
	  width: fit-content;
	  border: solid 1px #000;
	  color: #000;
	  padding: 1px 2px;
	  text-decoration: none;
	  margin: 0;       

	}

	/****style5***/
	#bl .main .style5 .lookimg{
		margin: 10% 0;
		position: relative;
		margin-bottom: 80%;
	}
	
	#bl .main .style5 .detail-group{
	}
	#bl .main .style5 .lookimg1{
		display: block;
		width: 70% ;
		margin: 10% 0 10% auto;
	}
	
	#bl .main .style5 .lookimg2{
		display: block;
		width: 80% ;
		margin: 10% auto 10% 0;
	}
	
	#bl .main .style5 .lookimg3{
		display: block;
		width: 70% ;
		margin: 0 auto; 
	}
	
	#bl .main .style5 .flex{
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: end;
		position: absolute;
		bottom: -40%;
		right: 0;
	}
	
	#bl .main .style5 .styleimg .moviebutton{
		position: absolute;
		z-index: 1;
		top:10%;
		left: 5%;
		width: 20%;
	}
	
	#bl .main .style5 .detail-group {
	  width: fit-content;
	  margin: 0 3%;      
	}

	#bl .main .style5 .detail{
		font-family: acumin-variable, sans-serif;
		margin: 0 5% 5%;
		width: 100%;
		
	}

	#bl .main .style5 .detail p{
		text-align: left;
		width: 100%;	}

	#bl .main .style5 .buy{
	  margin-bottom: 5px;
		text-align: left; 
		margin-left: 6px;
	}

	#bl .main .style5 .buy a{
	  display: block;
	  width: fit-content;
	  border: solid 1px #000;
	  color: #000;
	  padding: 1px 2px;
	  text-decoration: none;
	  margin: 0;       

	}
	
	/****style6***/
	#bl .main .style6 .lookimg{
		margin: 10% 0;
		position: relative;
	}
	
	#bl .main .style6 .lookimg1{
		display: block;
		width: 100% ;
		margin: 10% auto;
	}
	
	#bl .main .style6 .lookimg2,
	#bl .main .style6 .lookimg3{
		display: block;
		width: 100% ;
		margin: 0 auto;
	}
	
	
	#bl .main .style6 .flex{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8%;
		align-items: center;
		padding: 0 8%;
		margin-bottom: 10%;
	}
	
	#bl .main .style6 .styleimg .moviebutton{
		position: absolute;
		z-index: 1;
		top:10%;
		right: 5%;
		width: 20%;
	}
	
	#bl .main .style6 .detail-group {
	  width: fit-content;
	  margin: 0 3%;      
	}

	#bl .main .style6 .detail{
		font-family: acumin-variable, sans-serif;
		margin: 0 5% 5%;
		width: 100%;
		
	}

	#bl .main .style6 .detail p{
		text-align: left;
		width: 100%;	}

	#bl .main .style6 .buy{
	  margin-bottom: 5px;
		text-align: left; 
		margin-left: 15px;
	}

	#bl .main .style6 .buy a{
	  display: block;
	  width: fit-content;
	  border: solid 1px #000;
	  color: #000;
	  padding: 1px 2px;
	  text-decoration: none;
	  margin: 0;       

	}
	
/****グッズ*****/
	
	#bl .goods{
		padding: 3%;
		margin: 0 5% 30%;
		background: rgba(0, 0, 0, 0.05);
	}
	
	#bl .goods .flex{
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
		padding: 0 5%;
		margin-bottom: 10%;
	}
	
	#bl .goods .flex img{
		display: block;
		width: 100%;
	}
	
	#bl .goods h3{
		text-align: 	center;
		font-size: 12px;
		font-weight: 400;
		margin: 5% 0;
	}
	
	#bl .goods p{
		text-align: center;
		font-size: 12px;
		font-family: acumin-variable, sans-serif;
		margin: 5% 0;
	}
	

/****フッター*****/
	#bl .bl_footer{
	  border-top: solid 1px #000;

	}
	#bl .bl_footer img{
	  display: block;
	  width: 50%;
	margin:  10% auto 0;

	}
	
	#bl .bl_footer p{
		display: block;
		width: 100%;
		font-family: acumin-variable, sans-serif;
		font-size: 11px;
		text-align: center;
		margin: 10% 0;

	}

/****モーダル*****/

  .modal-content {
    max-width: 90vw;
    max-height: 90vh;
  }

  .modal-content video {
    width: auto;
    max-width: 100%;
    max-height: 90vh;
    display: block;
	margin: 0 auto;
  }


	.modal {
	 width: 100%;     
    height: 100vh;
	  display: none;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 9999;
	}

	.modal.is-open {
	  display: block;
	}

	.modal-overlay {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0, 0, 0, 0.8);
	}

	.modal-content {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 90%;
	}


	.modal-close {
	  position: absolute;
	  top: 0px;
	  right: 0;
	  background: none;
	  border: none;
	  color: #fff;
	  font-size: 24px;
	  cursor: pointer;
	}
	
/*アニメ*/
.anim {
  opacity: 0;
/*  transform: translateY(20px);*/
  transition: opacity 1.0s ease-in-out,
              transform 1.0s ease-in-out;
}

/* 画面内に入ったら表示 */
.anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}
	
/*****PC*****/
@media screen and (min-width: 768px) {
	
	#bl{
/*		width: 1350px;*/
		display: flex;
		flex-wrap: wrap;

	}
	
	
	#bl .bl_header {
		width: 1350px;
		flex-shrink: 0;
		margin: 0 auto;
		height: 900px;
		
	  }
	
	#bl .bl_header #keyvis{
	height: 900px;
}

  #bl .main {
    width: 55%;
    height: 100vh;
    overflow-y: scroll;
  }
	
 #bl .fixed {
	padding: 2% 5%;
    width: 45%;
/*    height: 100vh;*/
    overflow: hidden;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;   
  }

  #bl .readsec {
    margin: 5% auto;           
  }

  #bl .pagelink {
		margin: 0 5% 5%;          
		row-gap: 10px;             
		padding: 0 5%;
	}
  #bl .pagelinktit {
    margin: 3% 0;
  }
	
	#bl .bl_header #tit {
	  width: 40%;
		min-width: 500px;
		        top: 55%;
	}
	#bl .bl_header #tit img {
	  width: 100%;
		
		
	}

	#bl .bl_header #keyvis img{
		width: 100%;
		display: block;
	}

	#bl .bl_header #keyvis #keyvis1{
		position:absolute;
		z-index: 2;
		top: 5%;
		left: 1%;
		width: 22%;
/*		min-width: 350px;*/
	}

	#bl .bl_header #keyvis #keyvis2{
		position:absolute;
		z-index: 3;
		top: 0;
		left: 30%;
		width: 17%;
/*		min-width: 200px;*/
	}

	#bl .bl_header #keyvis #keyvis3{
		position:absolute;
		z-index: 6;
		top: 2%;
		right: 2%;
		width: 17%;
/*
		min-width: 200px;
		max-width: 250px;
*/
	}

	#bl .bl_header #keyvis #keyvis4{
		position:absolute;
		z-index: 6;
		bottom: 2%;
		left: 3%;
		width: 20%;
/*		min-width: 250px;*/
	}

	#bl .bl_header #keyvis #keyvis5{
		position:absolute;
		z-index: 5;
		bottom: 5%;
		left: 20%;
		width: 20%;
/*		min-width: 330px;*/
	}


	#bl .bl_header #keyvis #keyvis6{
		position:absolute;
/*		z-index: 8;*/
		bottom: 5%;
		right: 0%;
		width: 28%;
/*
		min-width: 350px;
		max-width: 400px
*/
	}
	
	#bl .bl_header #keyvis #keyvis7{
		display: block;
		position:absolute;
		z-index: 11;
		bottom: 0;
		right: 24%;
		width: 20%;
/*		min-width: 200px;*/
		opacity: 0;
    	animation: fadeInUp 2.0s ease-in-out forwards;
		animation-delay: 1.8s;
	}


	#bl .bl_header #keyvis #keyvis8{
		display: block;
		position:absolute;
		z-index: 12;
		top: 7%;
		right: 22%;
		width: 16%;
/*		min-width: 200px;*/
		opacity: 0;
    animation: fadeInUp 2.0s ease-in-out forwards;
		animation-delay: 1.5s;
	}
	
	#bl .main .style1 {
		margin-top: 10%;
		
	}
	
	#bl .goods h3,#bl .goods p
	{
		font-size: 16px;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #bl .bl_header {
    width: 100%;
  }
}