@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Sans+JP:wght@100..900&display=swap');

html,body {
	padding: 0;
	margin: 0;
}

#by {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
}
#by img {
	width: 100%;
	border: none;
}
#by ul,#by li {
	list-style: none;
	padding: 0;
	margin: 0;
}
#by a {
	text-decoration: none;
	color: #000;
}

#by .img {
	line-height: 0;
	position: relative;
}
#by .spview {
	display: none;
}
@media only screen and (max-width: 768px)  {
	#by .spview {
		display: block;
	}	
	#by .pcview{
		display: none;
	}
}


#main_visual {
	position: relative;
}
#main_visual .visual {
	position: relative;
}
#main_visual li {
	animation: Switch 4s infinite;
    opacity: 0;
	line-height: 0;
}
#main_visual li:nth-of-type(2),#main_visual li:nth-of-type(3),#main_visual li:nth-of-type(4) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#main_visual li:nth-of-type(2) {
	animation-delay: 1s;
}
#main_visual li:nth-of-type(3) {
	animation-delay: 2s;
}
#main_visual li:nth-of-type(4) {
	animation-delay: 3s;
}
#main_visual .title {
	position: absolute;
	top: 48%;
	left: 12%;
	transform: translate(0%,-50%);
	width: 35%;
}
@media only screen and (max-width: 768px)  {
	#main_visual .title {
		position: absolute;
		top: 5%;
		left: 50%;
		transform: translate(-50%,0);
		width: 80%;
	}	
}


#main_read {
	margin: 5% auto;
	width: 85%;
	max-width: 500px;
	line-height: 1.8;
}
#main_read .read {
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}
#main_read .txt {
	margin: 5% auto;
	text-align: center;
}
@media only screen and (max-width: 768px)  {
	#main_read {
		margin: 15% auto;
	}
	#main_read .read {
		font-size: 16px;
	}
	#main_read .txt {
		margin: 10% auto;
	}
}





#main_contents {
	margin: 5% auto;
}
#main_contents .section {
	position: relative;
	margin: 10% auto;
	overflow: hidden;
}
#main_contents .section .main {
	width: 45%;
	margin: 0 10% 0 45%;
	position: relative;
}
#main_contents .section .main a::before {
	content: "STYLING ITEMS";
	position: absolute;
	bottom: 15px;
	right: 15px;
	font-family: "EB Garamond", serif;
	font-size:14px;
	border-bottom: 1px solid #000;
	line-height: 1.6;
}
#main_contents .section .png {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	z-index: 10;
}
#main_contents .section .item {
	position: absolute;
	bottom: 0;
	left: 5%;
	width: 35%;
}
#main_contents .section .data {
	width: 30%;
	margin: 2% 0 0 45%;
}
#main_contents .section:nth-of-type(2) .main {
	margin: 0 10%;
}
#main_contents .section:nth-of-type(2) .png {
	width: 55%;
	top: 8%;
	left: auto;
	right: 0;
}
#main_contents .section:nth-of-type(2) .item {
	left: auto;
	right: 5%;
}
#main_contents .section:nth-of-type(2) .data {
	width: 30%;
	margin: 2% 0 0 10%;
}

@media only screen and (max-width: 768px)  {
	#main_contents .section .main,#main_contents .section:nth-of-type(2) .main {
		width: 100%;
		margin: 0 auto;
	}
	#main_contents .section .main a::before {
		content: "STYLING ITEMS";
		position: absolute;
		bottom: auto;
		top: 50%;
		transform: translate(0,-50%);
		right: 15px;
		font-size:12px;
	}
	#main_contents .section .png {
		position: relative;
		top: auto;
		left: auto;
		width: 90%;
		margin: -30% 0 0 0;
	}
	#main_contents .section .item {
		position: relative;
		bottom: auto;
		left: auto;
		width: 75%;
		margin:-15% 0 0 25%;
	}
	#main_contents .section .data,#main_contents .section:nth-of-type(2) .data {
		width: 86%;
		margin: 10% auto;
	}
	#main_contents .section:nth-of-type(2) .png {
		width: 90%;
		top: auto;
		right: auto;
		margin: -20% 0 0 10%;
		
	}
	#main_contents .section:nth-of-type(2) .item {
		right: auto;
		margin:-25% 0 0 0;
	}
}


#main_contents .section .no {
	position: absolute;
	top: 0%;
	left: 30%;
	width: 14%;
	color: #0073d1;
}
#main_contents .section:nth-of-type(2) .no {
	left: auto;
	right: 30%;
}

#main_contents .section .data .name {
	font-family: "EB Garamond", serif;
	font-style: italic;
	font-size: 30px;
	letter-spacing: 1px
}
#main_contents .section .data .price {
	font-family: "EB Garamond", serif;
	font-size: 16px;
	margin: 5px 0 10px;
}
#main_contents .section .data .box {
	box-sizing: border-box;
	padding: 15px 0;
	border-top: 1px solid #000;
}
#main_contents .section .data .color,#main_contents .section .data .size {
	font-family: "EB Garamond", serif;
	position: relative;
	margin-bottom: 5px;
	font-size: 16px;
	letter-spacing: 1px;
}
#main_contents .section .data .color span {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #000;
	margin: 0 4px;
	box-sizing: border-box;
}
#main_contents .section .data .color span.silver {
	background: #999;
}
#main_contents .section .data .color span.white {
	background: #eee;
}
#main_contents .section .data .color span.black {
	background: #000;
}
#main_contents .section .data .color span.black2 {
	background: #000;
	border: 2px solid #9B4202;
}
#main_contents .section .data .color span.camel {
	background: #d98032;
}
#main_contents .section .data .color span.beige {
	background: #eedcb3;
}
#main_contents .section .data .color span.mocka {
	background: #c49961;
}
#main_contents .section .data .txt{
	margin: 15px 0;
	line-height: 1.6;
}
#main_contents .section .data .btn a {
	display: block;
	width: 50%;
	border-bottom: 1px solid #000;
	font-family: "EB Garamond", serif;
	font-size: 16px;
	letter-spacing: 1px;
	padding-bottom: 5px;
}
@media only screen and (max-width: 768px)  {
	#main_contents .section .no {
		position: relative;
		top: auto;
		left: auto;
		width: 28%;
		margin: 0 0 -8% 70%;
		z-index: 10
		
	}
	#main_contents .section:nth-of-type(2) .no {
		left: auto;
		right: auto;
	}
	#main_contents .section .data .box {
		text-align: center;
	}
	#main_contents .section .data .box .txt {
		text-align: left;
	}
	#main_contents .section .data .name {
		text-align: center;
		font-size: 24px;
	}
	#main_contents .section .data .price {
		text-align: center;
		margin: 15px 0;
	}
	#main_contents .section .data .btn a {
		margin: 0 auto;
		text-align: center;
	}
}





@keyframes Switch{
    0%{ opacity: 0;}
    1%{ opacity: 1;}
    26%{ opacity: 1;}
    27%{ opacity: 0;}
    100%{ opacity: 0;}
}

.anim {
	opacity: 0;
	transition: 1.5s all 0s ease;
}
.anim.ac {
	opacity: 1;
}
#main_contents .anim {
	transform: translate(0,40px);
}
#main_contents .section .png {
	transition-delay: 0.5s;
	transform: translate(-20px,0px);
}
#main_contents .section:nth-of-type(2) .png {
	transition-delay: 0.5s;
	transform: translate(20px,0px);
}
#main_contents .section .anim.ac {
	transform: translate(0)
}