@charset "UTF-8";






/* lookbook
----------------------------*/
#lookbook {
	padding-top: 120px;
}
@media screen and (max-width: 767px) {
	#lookbook {
		padding-top: 90px;
	}
}






/* logo
----------------------------*/
#lookbook .logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(50% - 200px);
	height: 100%;
	padding: 50px 20px 0 20px;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
}
	#lookbook .logo img {
		max-width: 295px;
	}
	#lookbook .logo .flowting {
		position: sticky;
		top: 0;
		left: 0;
	}
@media screen and (max-width: 767px) {
	#lookbook .logo {
		display: none;
	}
}






/* check
----------------------------*/
#lookbook .check {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(50% - 200px);
	height: 100%;
	padding: 80px 20px 0 20px;
	position: fixed;
	top: 0;
	right: 0;
}
	#lookbook .check a {
		display: block;
		font-size: 2.4rem;
		line-height: 1;
		text-align: center;
		padding-bottom: 10px;
		position: relative;
	}
	#lookbook .check.black a {
		color: #2e2a28;
	}
	#lookbook .check.white a {
		color: #fff;
	}
	#lookbook .check a:before {
		content: "";
		width: 100%;
		height: 1px;
		position: absolute;
		bottom: 0;
		right: 0;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#lookbook .check.black a:before {
		background: #2e2a28;
	}
	#lookbook .check.white a:before {
		background: #fff;
	}
	#lookbook .check a:hover:before {
		width: 0;
	}
@media screen and (max-width: 767px) {
	#lookbook .check {
		display: none;
	}
}






/* btn-pagetop
----------------------------*/
#lookbook .btn-pagetop {
	width: 38px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 2;
}
@media screen and (max-width: 767px) {
	#lookbook .btn-pagetop {
		width: 7vw;
		bottom: 0;
		right: 0;
	}
}






/* contents
----------------------------*/
#lookbook .contents {
	max-width: 400px;
	margin: 0 auto;
	background: #fff;
	overflow: hidden;
}
	#lookbook .contents .wrap-tp {
		padding-top: 50px;
	}
	#lookbook .contents .wrap-bt {
		padding-bottom: 50px;
	}

	#lookbook .contents .inner-sp {
		padding: 0 7%;
	}
		#lookbook .contents .inner-sp h2 {
			font-size: 2.4rem;
			text-align: center;
			line-height: 1.3em;
			font-weight: 500;
			margin-bottom: 20px;
		}
@media screen and (max-width: 767px) {
	#lookbook .contents {
		max-width: 100%;
	}
}






/* beginning
----------------------------*/
#lookbook .beginning .txt {
	font-size: 1.4rem;
	text-align: center;
	letter-spacing: 0.04em;
	margin-bottom: 15px;
}
#lookbook .beginning .txt:nth-last-child(1) {
	margin-bottom: 0;
}

#lookbook .beginning .btn-item {
	width: 80%;
	margin: 20px auto 0 auto;
}
	#lookbook .beginning .btn-item a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		border-radius: 25px;
		background: #2E2A28;
		font-size: 1.4rem;
		font-weight: 500;
		color: #fff;
		line-height: 1.3en;
		text-align: center;
	}
	#lookbook .beginning .btn-item a:hover {
		background: #488299;
	}

	#lookbook .beginning .sub-txt {
		font-size: 1.2rem;
		text-align: center;
		letter-spacing: 0.04em;
		margin-bottom: 15px;
	}
@media screen and (max-width: 767px) {
	#lookbook .beginning .txt {
		font-size: 1.3rem;
	}

	#lookbook .beginning .btn-item {
		width: 80%;
		margin: 20px auto 0 auto;
	}
		#lookbook .beginning .btn-item a {
			height: 44px;
			border-radius: 22px;
			font-size: 1.4rem;
		}
}






/* base
----------------------------*/
#lookbook .base .bnr {
	margin-bottom: 15px;
}
	#lookbook .base .bnr a {
		display: block;
	}
	#lookbook .base .bnr a:hover {
		opacity: 0.7;
	}

	#lookbook .base .txt {
		font-size: 1.4rem;
		text-align: center;
		letter-spacing: 0.04em;
		margin-bottom: 10px;
	}
	#lookbook .base .txt:nth-last-child(1) {
		margin-bottom: 0;
	}

	#lookbook .base .sub-txt {
		font-size: 1.2rem;
		text-align: center;
		letter-spacing: 0.04em;
		margin-bottom: 15px;
	}

	#lookbook .base .btn-item {
		width: 80%;
		margin: 20px auto 0 auto;
	}
		#lookbook .base .btn-item a {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
			border-radius: 25px;
			background: #2E2A28;
			font-size: 1.4rem;
			font-weight: 500;
			color: #fff;
			line-height: 1.3en;
			text-align: center;
		}
		#lookbook .base .btn-item a:hover {
			background: #488299;
		}

#lookbook .base .item-list a.linkbox {
	display: block;
	width: 48%;
	margin-right: 4%;
	margin-bottom: 30px;
}
#lookbook .base .item-list a.linkbox:nth-child(2n) {
	margin-right: 0;
}
	#lookbook .base .item-list a.linkbox .text {
		padding-top: 12px;
		text-align: center;
	}
		#lookbook .base .item-list a.linkbox .text h3 {
			font-size: 1.3rem;
			line-height: 1.5em;
			margin-bottom: 5px;
		}

		#lookbook .base .item-list a.linkbox .text .price {
			font-size: 1.4rem;
		}
			#lookbook .base .item-list a.linkbox .text .price .tax {
				font-size: 1.0rem;
			}
@media screen and (max-width: 767px) {
	#lookbook .base .txt {
		font-size: 1.3rem;
	}

	#lookbook .base .btn-item {
		width: 80%;
		margin: 20px auto 0 auto;
	}
		#lookbook .base .btn-item a {
			height: 44px;
			border-radius: 22px;
			font-size: 1.4rem;
		}
}






/* item
----------------------------*/
#lookbook .item .cont {
	margin-bottom: 80px;
}
	#lookbook .item .cont .head-tit {
		font-size: 1.4rem;
		line-height: 1.3em;
		margin-bottom: 15px;
		letter-spacing: 0;
	}
	
	#lookbook .item .cont .item-list {
		margin-top: -20px;
		margin-bottom: 60px;
	}
		#lookbook .item .cont .item-list li {
			font-size: 1.4rem;
			line-height: 1.3em;
			letter-spacing: 0;
			margin-bottom: 15px;
		}
		#lookbook .item .cont .item-list li:nth-last-child(1) {
			margin-bottom: 0;
		}
			#lookbook .item .cont .item-list li a {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			#lookbook .item .cont .item-list li a:hover {
				opacity: 0.7;
			}
				#lookbook .item .cont .item-list li a span {
					display: inline-block;
					margin-left: 10px;
					font-size: 1.2rem;
					border: solid 1px #000;
					padding: 3px 8px;
					line-height: 1;
				}
	
	#lookbook .item .cont .pht {
		margin-bottom: 60px;
	}

	#lookbook .item .cont .pht-right-space {
		width: 101%;
		margin-left: -8%;
	}
	
	#lookbook .item .cont .pht-left-space {
		margin-left: 7%;
		margin-right: -8%;
	}
	
	#lookbook .item .cont .pht-column2-unevenness {
		width: 119%;
		margin-left: -8%;
	}
		#lookbook .item .cont .pht-column2-unevenness li {
			width: 49%;
		}
		#lookbook .item .cont .pht-column2-unevenness li:nth-child(2) {
			margin-top: 60px;
		}
	
	#lookbook .item .cont .pht-column2-overlap-top {
		position: relative;
		padding-top: 15%;
	}
		#lookbook .item .cont .pht-column2-overlap-top li:nth-child(1) {
			width: 45%;
			position:absolute;
			top: 0;
			right: -8%;
			z-index: 0;
		}
		#lookbook .item .cont .pht-column2-overlap-top li:nth-child(2) {
			width: 95%;
			margin-left: -8%;
			position:relative;
			z-index: 1;
		}
	
	#lookbook .item .cont .pht-column2-overlap-bottom {
		position:relative;
	}
		#lookbook .item .cont .pht-column2-overlap-bottom li:nth-child(1) {
			position:relative;
			z-index: 1;
		}
		#lookbook .item .cont .pht-column2-overlap-bottom li:nth-child(2) {
			width: 30%;
			position:absolute;
			bottom: -30%;
			right: -8%;
			z-index: 0;
		}
	
	#lookbook .item .cont .pht-column2-beside {
		margin-left: -8%;
	}
		#lookbook .item .cont .pht-column2-beside li:nth-child(1) {
			width: 26.25%;
		}
		#lookbook .item .cont .pht-column2-beside li:nth-child(2) {
			width: 70.75%;
		}
	
	#lookbook .item .cont .pht-full {
		width: 119%;
		margin-left: -8%;
	}
	
	#lookbook .item .cont .pht-column3-overlap {
		position: relative;
	}
		#lookbook .item .cont .pht-column3-overlap li:nth-child(1) {
			padding: 12% 6% 15% 6%;
		}
		#lookbook .item .cont .pht-column3-overlap li:nth-child(2) {
			width: 80%;
			position: absolute;
			top: 0;
			left: -8%;
		}
		#lookbook .item .cont .pht-column3-overlap li:nth-child(3) {
			width: 52%;
			position: absolute;
			bottom: 0;
			right: -8%;
		}
	
	#lookbook .item .cont .pht-vertical li {
		margin-bottom: 4%;
	}
	#lookbook .item .cont .pht-vertical li:nth-last-child(1) {
		margin-bottom: 0;
	}
	
	#lookbook .item .cont .pht-right {
		margin-left: 40%;
	}
	
	#lookbook .item .cont .pht-left {
		margin-right: 35%;
	}






/* lineup
----------------------------*/
#lookbook .lineup h2 {
	color: #fff;
	margin-bottom: 40px;
}

#lookbook .lineup .swiper-container {
	padding: 0;
}
	#lookbook .lineup .swiper-container .swiper-slide {
		display: block;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#lookbook .lineup .swiper-container .swiper-slide:hover {
		opacity: 0.7;
	}

#lookbook .lineup .item-list a.linkbox {
	display: block;
	width: 48%;
	margin-right: 4%;
	margin-bottom: 30px;
}
#lookbook .lineup .item-list a.linkbox:nth-child(2n) {
	margin-right: 0;
}
	#lookbook .lineup .item-list a.linkbox .text {
		padding-top: 12px;
		text-align: center;
	}
		#lookbook .lineup .item-list a.linkbox .text h3 {
			font-size: 1.3rem;
			line-height: 1.5em;
			margin-bottom: 5px;
		}

		#lookbook .lineup .item-list a.linkbox .text .price {
			font-size: 1.4rem;
		}
			#lookbook .lineup .item-list a.linkbox .text .price .tax {
				font-size: 1.0rem;
			}

#lookbook .lineup .btn-all {
	width: 70%;
	margin: 40px auto 0 auto;
}
	#lookbook .lineup .btn-all a {
		display: block;
		background: #fff;
		height: 46px;
		font-size: 1.4rem;
		text-align: center;
		line-height: 46px;
	}
	#lookbook .lineup .btn-all a:hover {
		background: #488299;
		color: #fff;
	}
@media screen and (max-width: 767px) {
}






/* other-area
----------------------------*/
#other-area {
	background: #fff;
	position: relative;
	z-index: 2;
}
@media screen and (max-width: 767px) {
}








.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}