@charset "utf-8";

@font-face{
	font-family: 'TvertSFProDisplay';
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/TvertSFProDisplayLight.woff) format('woff');
	font-display: swap;
}
@font-face{
	font-family: 'TvertSFProDisplay';
	font-style: normal;
	font-weight: bold;
	src: url(../fonts/TvertSFProDisplaySemibold.woff) format('woff');
	font-display: swap;
}
#main_column{
	position: relative;
	z-index: 1;
}
#side_column{
	position: relative;
	z-index: 2;
}
#main_column .pankuzu ~ *{
	color: #555;
	font-family: 'TvertSFProDisplay','Yu Gothic',Yugothic,sans-serif;
	font-feature-settings: "palt";
	letter-spacing: 0;
	line-height: 1;
}
.bold{
	font-weight: bold;
}
sup{
	font-size: 70%;
	font-family: 'Yu Gothic',Yugothic,sans-serif;
	font-weight: normal;
	white-space: nowrap;
}
.ls25{ letter-spacing: .025em; }
.ls50{ letter-spacing: .05em; }
.tr{ text-align: right; }
.tc{ text-align: center; }
.tj{ text-align: justify; }
.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.flex.nowrap{ flex-wrap: nowrap; }
.flex.reverse{ flex-direction: row-reverse; }
.flex.reverse > *{ min-height: 0; }
.flex.jc-c{ justify-content: center; }
.flex.jc-s{ justify-content: flex-start; }
.flex.jc-e{ justify-content: flex-end; }
.flex.ai-c{ align-items: center; }
.flex.ai-e{ align-items: flex-end; }
.flex.ai-st{ align-items: stretch; }

.secTxt{
	font-size: 16px;
	line-height: 2;
}
.notes{
	color: #666;
    font-size: 10px;
    line-height: 2;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 0 30px;
}
.btn a{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 50px;
	color: #fff;
	background: #555;
	font-size: 16px;
	letter-spacing: .05em;
	line-height: .8;
	text-align: center;
	position: relative;
}
	.btn a:after{
		content: '';
		position: absolute;
		z-index: 1;
		top: 50%;
		left: calc(50% + 80px);
		transform: translateY(-50%);
		width: 5px;
		height: 9px;
		background: url(../../img2017/2023mineraluv/icon_btn_white.svg) no-repeat center/100% auto;
	}

.btn.comingsoon a{
	opacity: .4;
	pointer-events: none;
}
	.btn.comingsoon a:after{
		content: none;
	}

.heading{
	height: 100px;
	box-sizing: border-box;
	padding: 0 30px;
	background: url(../../img2017/2023mineraluv/bg_heading.jpg) no-repeat center/cover;
}

.fi_h span,
.fi_v span{
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}
	.fi_h span img{
		display: block;
		transform: translateX(30%);
		opacity: 0;
	}
	.fi_h.active span img{
		transition: transform 1s ease-in-out,opacity 1.5s ease-in-out;
		transform: translateX(0);
		opacity: 1;
	}
	.fi_v span img{
		display: block;
		transform: translateY(120%) scaleY(1.4);
		transform-origin: top center;
	}
	.fi_v.active span img{
		transition: transform .7s ease-in-out;
		transform: translateY(0) scaleY(1);
	}

.fi_f{
	opacity: 0;
	filter: blur(5px);
}
.fi_f.active{
	transition: opacity .2s ease-in-out,filter .9s linear;
	opacity: 1;
	filter: blur(0);
}

@-moz-document url-prefix(){
	#main_column{
		line-height: 25.2px;
	}
}



/*#mv{
	position: relative;
	z-index: 1;
	background: #BBC8CD;
	overflow: hidden;
}
	#mv .photo{
		opacity: 0;
		filter: blur(20px);
	}
	.loaded #mv .photo{
		transition: opacity 1s ease-in-out,filter 1.5s linear;
		opacity: 1;
		filter: blur(0);
	}
	#mv:before,
	#mv:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		transform-origin: top right;
	}
	#mv:before{
		opacity: .6;
	}
	#mv:after{
		opacity: .3;
	}
	.loaded #mv:before{
		transition: opacity 2s cubic-bezier(.39,.575,.565,1),transform 2.2s cubic-bezier(.215,.61,.355,1);
		opacity: 0;
		transform: scaleX(0);
	}
	.loaded #mv:after{
		transition: opacity 2s cubic-bezier(.39,.575,.565,1),transform 2.2s cubic-bezier(.215,.61,.355,1);
		transition-delay: .3s;
		opacity: 0;
		transform: scaleX(0);
	}*/

#mv{
	position: relative;
	z-index: 1;
	overflow: hidden;
}
	#mv .photo{
		opacity: 0;
		filter: blur(10px) brightness(2);
	}
	.loaded #mv .photo{
		transition: opacity 1s ease-in-out,filter 1.25s;
		opacity: 1;
		filter: blur(0) brightness(1);
	}



#intro{
	padding-top: 50px;
	padding-bottom: 70px;
}
	#intro .txt1{
		margin-top: 40px;
	}
	#intro .notes{
		margin-top: 35px;
	}
	#intro .list1{
		gap: 50px;
		margin-top: 55px;
	}
		#intro .list1 li{
			flex: 0 0 280px;
		}



#collection{
}
	#collection .collection{
		position: relative;
		z-index: 1;
		padding-top: 50px;
		padding-bottom: 70px;
	}
	#collection .collection + .collection{
		padding-top: 70px;
	}
		#collection .collection + .collection:before{
			content: '';
			position: absolute;
			z-index: 1;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 700px;
			height: 1px;
			background: #888;
		}
		#collection .collection .ttl1{
			margin-top: 28px;
		}
		#collection .collection .ttl2{
			margin-top: 22px;
			font-size: 28px;
			line-height: 1.571428571;
		}
			#collection .collection .ttl2 sup{
				top: -1.25em;
				font-size: 40%;
			}

		#collection .collection .ttl2 + .notes{
			margin-top: 15px;
		}
		#collection .collection .photo{
			margin-top: 25px;
		}
		#collection .collection .desc{
			margin-top: 30px;
			box-sizing: border-box;
			padding: 0 30px;
		}
			#collection .collection .desc .category{
				gap: 10px;
			}
				#collection .collection .desc .category li{
					flex: 0 0 auto;
				}

			#collection .collection .desc .name{
				margin-top: 30px;
				font-size: 28px;
				line-height: 1;
			}
				#collection .collection .desc .name .type{
					font-size: 16px;
					font-weight: normal;
					letter-spacing: 0;
					margin: 0 10px;
				}

			#collection .collection .desc .price{
				margin-top: 12px;
				font-size: 18px;
				line-height: 1.666666667;
			}
				#collection .collection .desc .price .amount{
					font-size: 16px;
				}

			#collection .collection .desc .point{
				margin-top: 30px;
			}
			#collection .collection .desc .txt1{
				margin-top: 25px;
			}
			#collection .collection .desc .txt1 + .notes{
				margin-top: 17px;
				padding: 0;
			}
			#collection .collection .desc .btn{
				max-width: 310px;
				margin: 45px auto 0;
			}



#fullerene{
	box-sizing: border-box;
	padding: 75px 30px 62px;
	background: #F3F7FA;
}
	#fullerene .ttl2{
		font-size: 28px;
		line-height: 1.571428571;
		margin-top: 20px;
	}
	#fullerene .photo{
		max-width: 238px;
		margin: 30px auto 0;
	}
	#fullerene .company{
		max-width: 480px;
		margin: 40px auto 0;
		box-sizing: border-box;
		border: 1px solid #ccc;
		padding: 12px 0 8px;
		font-size: 18px;
		line-height: 1.888888889;
	}
	#fullerene .txt1{
		margin-top: 32px;
	}
	#fullerene .notes{
		margin-top: 24px;
		padding: 0;
	}



#free{
	max-width: 700px;
	margin: 70px auto 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	padding: 30px 30px 25px;
}
	#free .ttl1{
		font-size: 20px;
		line-height: 1.9;
	}
	#free .group1{
		gap: 25px;
		margin-top: 30px;
	}
		#free .group1 .photo{
			flex: 1 0 221px;
		}
		#free .group1 .txt{
			flex: 1 0 382px;
			font-size: 14px;
			line-height: 2.071428571;
			margin-top: -.5em;
		}

	#free .notes{
		margin-top: 12px;
		padding: 0;
	}



#limited{
	margin-top: 70px;
	padding-bottom: 70px;
}
	#limited .status{
		margin-top: 50px;
	}
	#limited .ttl1{
		margin-top: 22px;
		font-size: 28px;
		line-height: 1.571428571;
	}
	#limited .txt1{
		max-width: 700px;
		margin: 30px auto 0;
	}
	#limited .group1{
		max-width: 700px;
		gap: 28px;
		margin: 40px auto 0;
	}
		#limited .group1 .set{
			flex: 1 0 336px;
			box-sizing: border-box;
			border: 1px solid #DCDDDD;
		}
			#limited .group1 .set .desc{
				box-sizing: border-box;
				padding: 25px 27px;
			}
				#limited .group1 .set .desc .category{
					gap: 10px;
				}
					#limited .group1 .set .desc .category li{
						flex: 0 0 auto;
					}

				#limited .group1 .set .desc .name{
					font-size: 20px;
					line-height: 1.5;
					margin-top: 15px;
				}
				#limited .group1 .set .desc .detail{
					margin-top: 15px;
				}
					#limited .group1 .set .desc .detail .ttl{
						font-size: 16px;
					}
					#limited .group1 .set .desc .detail .list{
						margin-top: 7px;
					}
						#limited .group1 .set .desc .detail .list li{
							font-size: 14px;
							line-height: 1.428571429;
							text-indent: -.5em;
							padding-left: .5em;
						}
						#limited .group1 .set .desc .detail .list li + li{
							margin-top: 5px;
						}

				#limited .group1 .set .desc .prices{
					margin-top: 17px;
				}
					#limited .group1 .set .desc .prices .normal{
						font-size: 16px;
					}
					#limited .group1 .set .desc .prices .icon{
						font-size: 20px;
						font-family: 'Yu Gothic',Yugothic,sans-serif;
						margin-top: 5px;
					}
					#limited .group1 .set .desc .prices .limited{
						margin-top: 7px;
					}
						#limited .group1 .set .desc .prices .limited .off{
							width: 143px;
							height: 41px;
							color: #fff;
							background: #D9395C;
							font-size: 23px;
						}
							#limited .group1 .set .desc .prices .limited .off small{
								font-size: 18px;
							}

						#limited .group1 .set .desc .prices .limited .price{
							margin-top: 8px;
							color: #D9395C;
							font-size: 18px;
						}

				#limited .group1 .set .desc .btn{
					margin-top: 22px;
				}
					#limited .group1 .set .desc .btn a{
						height: 40px;
						color: #333;
						background: #fff;
						box-sizing: border-box;
						border: 1px solid #333;
						font-size: 15px;
					}
						#limited .group1 .set .desc .btn a:after{
							left: calc(50% + 70px);
							background: url(../../img2017/2023mineraluv/icon_btn_black.svg) no-repeat center/100% auto;
						}

	#limited .notes{
		margin-top: 30px;
	}



.animated {
	animation-duration: .5s;
	animation-fill-mode: both;
}
/* fade in */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fadeIn { animation-name: fadeIn; animation-fill-mode:both; animation-duration:1s; visibility: visible !important; opacity: 0;}

/* fade in up */
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; }}
.fadeInUp { animation-name: fadeInUp; animation-fill-mode:both; animation-duration:1.5s; visibility: visible !important; opacity: 0;}

/* fade in down */
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; }}
.fadeInDown { animation-name: fadeInDown; animation-fill-mode:both; animation-duration:1.5s; visibility: visible !important; opacity: 0;}

/* fade in right */
@keyframes fadeInRight { from { opacity: 0; transform: translate(30px,0); } to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; animation-fill-mode:both; animation-duration:1.5s; visibility: visible !important; opacity: 0;}

/* fade in left */
@keyframes fadeInLeft {
from { opacity: 0; transform: translate(-30px,0); }to { opacity: 1; transform: none; }}
.fadeInLeft { animation-name: fadeInLeft; animation-fill-mode:both; animation-duration:1.5s; visibility: visible !important; opacity: 0;}

/* fade out */
@keyframes fadeOut { from { opacity: 1; }  to { opacity: 0; }}
.fadeOut { animation-name: fadeOut; }