@charset "euc-jp";

/* Hero Section */
.hero-section{
	width:100%;
	height:700px;
	position:relative;
	display:flex;
	justify-content:end;
  overflow:hidden;
}
.hero-text > div{display: flex;}
.hero-text2{
	transform:translate(0px, -64px);
	visibility:hidden;
	display:flex;
	align-items:center;
	width:100%;
	flex-direction:column;
	gap:40px;
}
.hero-left{
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:50px;
	margin:auto;
	padding-inline:20px;
	/* flex:1; */
	position:relative;
	/* overflow:hidden; */
}
.hero-pattern{
	background-image:url("https://file001.shop-pro.jp/PA01518/610/assets/top/hero11.webp");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.hero-text{
	display:flex;
	justify-content:center;
	margin-left:20px;
	padding-left:20px;
}
.hero-text .vertical-text{
	writing-mode:vertical-rl;
	color:#050505;
	font-size:32px;
	font-weight:400;
	line-height:38.4px;
	letter-spacing:1.6px;
	margin-right:18px;
	display:flex;
}

.hero-button{
	background:#050505;
	width:172px;
	color:#fff;
	padding:10px 20px;
	display:flex;
	align-items:center;
	gap:10px;
	text-decoration:none;
	z-index:2;
}
.hero-button::before{
	content:'';
	width:8px;
	height:8px;
	background:white;
	border-radius:50%;
}
.hero-button span{
	font-size:18px;
	font-weight:600;
	letter-spacing:0.9px;
}
.hero-center, .hero-right{
	width:531px;
	height:700px;
	background:#F5F2EC;
	position:relative;
}
.hero-center img, .hero-right img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.hero-overlay-text{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	position:absolute;
	bottom:26px;
	right:0px;
	color:#fff;
	font-family:'Libre Baskerville', serif;
	font-size:calc(15.690px + 4.883vw);
	font-weight:400;
	letter-spacing:8.6px;
	opacity:0.6;
}
/* Hero Section */
.hero-section .text-in{display: flex;}
.hero-section .hero-center,
.hero-section .hero-right{position: relative;}
.hero-section1{
	width:100%;
	/* height:294px; */
	position:relative;
	background:#F5F2EC;
	padding:30px;
	overflow-x:hidden;
}
.hero-section2{
	margin-top:calc(78.310px + 8.451vw);
	width:100%;
/*	height:412px;*/
	position:relative;
	background:#F5F2EC;
	/* padding:30px; */
	z-index:1;
}
.product-showcase-section{
	padding:40px 0 80px;
	flex-direction:column;
	width:100%;
	background-color:#F5F2EC;
	position:relative;
	display:flex;
	align-items:center;
  position:relative;
  z-index:1;
}
.product-card a .add-button{
	transition:all 0.3s ease;
}
.product-card a:hover .product-image img{
transform:scale(1.05);
filter:brightness(1.1);
transition:all 0.3s ease;
}
.product-card a:hover .add-button{
  background-color: #d4af37;
    color: #fff;
}
.hero-image1{
	position:absolute;
	right:-10%;
	top:-60%;
	width:calc(188.507px + 44.131vw);
}

.hero-image2{
	max-width:calc(183.099px + 44.507vw);
	height:auto;
	border-radius:8px;
	position:relative;
	bottom:0px;
	/* left:-10%; */
}
.hero-image2 img{
	height:calc(119.254px + 28.732vw);
	object-fit:contain;
}
.hero-content2{
	position:relative;
	top:-132px;
	right:130px;
	display:flex;
	gap:50px;
}
.hero-text1{
	margin-left:auto;
	width:560px;
	display:flex;
	justify-content:center;
	flex-direction:column;
	gap:15px;
}
.hero-text1In{display: flex;}
.hero-title1{
	color:#050505;
	font-size:48px;
	font-weight:400;
	letter-spacing:4.8px;
	line-height:52px;
	margin-bottom:20px;
}
.hero-title1+img{
	margin-bottom: 20px;
}
#hero-title1-link+img{margin-left: 16px;}
#hero-title1-link2+img{margin-left: 16px;}
.hero-description1{
	color:#050505;
	font-size:16px;
	font-weight:400;
	line-height:32px;
	letter-spacing:0.8px;
}
.hero-button1{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:10px 20px;
	background:#050505;
	color:#fff;
	text-decoration:none;
	font-size:18px;
	font-weight:600;
	line-height:27px;
	letter-spacing:0.9px;
	width:fit-content;
	margin-top:50px;
}
.hero-button1::before{
	content:'';
	width:8px;
	height:8px;
	background:#fff;
	border-radius:50%;
}
.news-info{
	gap:40px;
	display:flex;
}
.news-section{
	width:100%;
	padding:20px 220px;
	background:#fff;
	border-bottom:1px solid #F5F2EC;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:60px;
	margin-bottom:calc(31.014px + 8.263vw);
	position:relative;
	overflow:hidden;
}
.news-container{
	flex:1;
	position:relative;
	min-width:0;
}
.news-info{
	display:none;
	align-items:center;
	gap:60px;
	transition:opacity 0.3s ease-in-out;
}
.news-info.active{
	display:flex;
}
.news-info a:hover{
	text-decoration:underline;
}
.news-left{
	display:flex;
	align-items:center;
	gap:60px;
	flex:1;
	min-width:0;
}
.news-date{
	color:#050505;
	font-size:16px;
	font-weight:400;
	letter-spacing:1.6px;
	white-space:nowrap;
	flex-shrink:0;
}
.news-content{
	color:#050505;
	font-size:16px;
	font-weight:500;
	line-height:24px;
	letter-spacing:0.8px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.news-arrow{
	color:#050505;
	font-size:20px;
	flex-shrink:0;
	cursor:pointer;
	padding:10px;
	transition:color 0.3s ease;
	user-select:none;
}
.news-arrow:hover{
	color:#666;
}
.a_news-contents:hover{
	text-decoration:underline !important;
}
.categories-section{
	padding:80px 30px;
}
.categories-container{
	max-width:1200px;
	margin:0 auto;
}
.categories-header{
	margin-bottom:50px;
}
.categories-title{
	color:#050505;
	font-size:32px;
	font-weight:400;
	line-height:48px;
	letter-spacing:1.6px;
	margin-bottom:10px;
}
.categories-subtitle{
	color:#050505;
	font-size:16px;
	font-family:'Libre Baskerville', serif;
	font-weight:400;
	letter-spacing:1.6px;
}
.categories-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:30px;
}
.categories-grid a{display:block;}
.categories-grid1{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:30px;
}
.categories-grid a:hover .category-arrow{
	background-color:#d4af37;
	transform:translateY(-3px);
}
.category-arrow::after{
	content:'вк';
	color:#050505;
	font-size:18px;
	font-weight:bold;
	transition:all 0.3s ease;
}
.categories-grid a:hover .category-arrow::after{
	color:#fff;
}
.recommended-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-template-rows:repeat(2, auto);
	gap:0;
}
.recommended-grid1{
	gap:20px;
	display:grid;
	grid-template-columns:repeat(2, 1fr);
}
.story-section{
	width:100%;
	height:860px;
	background:url("https://file001.shop-pro.jp/PA01518/610/assets/top/pattern-bg.webp") repeat;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:60px;
	position:relative;
}
.story-box-wrapper{
	width:100%;
  max-width:800px;
  margin:0 auto;
	display:block;
	position:relative;
}
.story-box-wrapper:before{
  content:"";
  display:block;
  width:100%;
  height:0;
  padding-top:56.25%;
}

.story-box-wrapper h1{
  top:0;
  left:-40px;
  position:absolute;
	font-size:16px;
	font-weight:100;
	writing-mode:sideways-lr;
	text-orientation:mixed;
	transform:rotate(180deg);
	/* so it reads top to bottom */
	margin:0;
	line-height:1;
}
.story-box{
	width:100%;
	height:100%;
	background:#000;
  position:absolute;
  top:0;
  left:0;
}

.story-play{
	width:15%;
	font-size:18px;
	color:#fff;
	padding:12px 24px;
	border-radius:30px;
	text-decoration:none;
	display:flex;
	align-items:center;
	gap:10px;
	transition:background 0.3s ease;
}
.story-play:hover{
	background:rgba(0, 0, 0, 0.8);
}
.story-play p{
	white-space:nowrap;
}
.Ig-section{
	position:relative;
	/* Add this */
	padding:60px 20px;
	max-width:1200px;
	margin:0 auto;
	text-align:center;
}
.Ig-section h2{
	font-size:32px;
	font-weight:100;
	font-family:'Libre Baskerville', serif;
  letter-spacing:2px;
}
.ig-img{
	display:none;
	position:absolute;
	top:-50px;
	right:65px;
	width:152px;
}
.ig-container{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:24px;
}
.ig-card{
	margin-top:45px;
	border-radius:4px;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.05);
}
.ig-btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:10px 20px;
	background:#050505;
	color:#fff;
	text-decoration:none;
	font-size:18px;
	font-weight:600;
	line-height:27px;
	letter-spacing:0.9px;
	width:fit-content;
	margin-top:20px;
	/* spacing from images */
}
.ig-btn::before{
	content:'';
	width:8px;
	height:8px;
	background:white;
	border-radius:50%;
}
.ig-img:hover{
	transform:scale(1.1) rotate(-5deg);
	filter:hue-rotate(20deg);
}
@media (max-width:1400px){
	.hero-image2 img{
		left:-20%;
	}
	.hero-image1 img{
		right:0%;
	}
}
@media (max-width:1224px){
	.hero-section1, .hero-section2{
		padding:25px 15px;
	}
	.product-showcase-section{
		padding:40px 20px;
	}
	.hero-pattern{
		top:-50px;
	}
	.hero-center img, .hero-right img{
		height:100%;
		width:100%;
	}
	.hero-section{
		height:auto;
	}
	.hero-left{
		height:250px;
	}
	.hero-center, .hero-right{
		height:100%;
	}
	.hero-content2{
		display:block;
		top:initial;
		right:20px;
	}
	.hero-content2:before{
		content:"";
		display:block;
		width:100%;
		height:1px;
	}
	.hero-image2{
		margin-top:-132px;
	}
	.hero-image2{
		margin-bottom:20px;
	}
	.hero-text1{
		padding-left:0px;
		max-width:500px;
      margin-right:auto;
      margin-left:auto;
	}
	.hero-section{
		height:auto;
	}
	.hero-text .vertical-text{
		font-size:32px;
	}
	.hero-section1, .hero-section2{
		padding:30px 20px;
		height:auto;
	}
	.hero-title1{
		font-size:36px;
		letter-spacing:1.5px;
		line-height:1.3;
	}
	.hero-description1{
		line-height:1.6;
	}
	.news-section{
		padding:15px 20px;
		flex-direction:row;
		gap:15px;
		text-align:left;
	}
	.news-left{
		flex-direction:column;
		gap:10px;
	}
	.news-arrow{
		font-size:18px;
	}
	.news-content{
		white-space:normal;
		font-size:14px;
	}
	.news-date{
		font-size:14px;
	}
	.categories-grid{
		grid-template-columns:repeat(2, 1fr);
	}
	.categories-section{
		padding:80px 20px 40px;
	}
	.recommended-grid{
		grid-template-columns:repeat(2, 1fr);
	}
	.story-section{
		padding:40px 20px;
		height:auto;
	}
	.story-play{
		font-size:16px;
	}
	.ig-container{
		grid-template-columns:repeat(3, 1fr);
		gap:15px;
	}
	.Ig-section{
		padding:0px;
	}
	.ig-card img{
		width:100%;
	}
	.ig-img{
		display:block;
	}
}
@media (max-width:968px){
	.hero-section{
		flex-direction:column;
		height:auto;
	}
	.hero-left{
		position:absolute;
		top:150px;
		display:flex;
		flex:1;
	}
	.hero-center, .hero-right{
		width:100%;
		height:300px;
	}
	.hero-text{
		position:static;
		padding:40px 20px;
		text-align:center;
		z-index:2;
	}
	.hero-text .vertical-text{
		writing-mode:vertical-rl;
		font-size:24px;
		display:flex;
		margin-bottom:10px;
	}
	.hero-text .vertical-text{
		font-size:32px;
		display:flex;
		margin-bottom:10px;
		margin-right:0;
	}
	.hero-button{
		position:static;
		margin:20px auto;
		width:fit-content;
	}
	.categories-grid{
		grid-template-columns:repeat(1, 1fr);
	}
	.story-box-wrapper{width:calc(100% - 100px);}
}
@media (max-width:768px){
	.categories-grid1{
		display: block;
		max-width: 480px;
		margin-right: auto;
		margin-left: auto;
	}
  .hero-section2 .hero-button1.in_above{display:none;}
  .product-showcase-section .hero-text2,
  .product-showcase-section .hero-button1.in_bellow{
    display:flex;
    visibility: visible;
  }
  .hero-text2{transform:none;}
}
@media (max-width:650px){
	.hero-right, .hero-right{
		width:100%;
		height:270px;
	}
	.hero-button1{
		margin:0 auto 60px;
	}
	.hero-text{
		padding:20px 15px;
	}
	.hero-section1, .hero-section2{
		padding:0px 0px;
	}
	.product-showcase-section{
		padding:30px 20px;
	}
	.hero-button span{
		font-size:16px;
	}
	.hero-left{
		height:200px;
	}
	.hero-center, .hero-right{
		height:250px;
	}
	.hero-text{
		padding:20px 15px;
	}
	.hero-text .vertical-text{
		font-size:18px;
	}
	.hero-button span{
		font-size:16px;
	}
	.hero-overlay-text{
		font-size:34px;
		letter-spacing:2px;
		position:absolute;
		bottom:-6px;
		right:5px;
	}
	.hero-content2{
		margin-left:0px;
      right:0;
	}
	.hero-content2{margin-bottom:0;}
	.in_above{
		display:none;
	}
	.in_bellow{
		display:block;
	}
	.hero-text1{
		margin-inline:auto;
		padding-left:0px;
		max-width:333px;
	}
	.hero-description1{
	}
	.hero-section2{
      margin-top:200px;
	}
	.hero-left{
		display:none;
	}
	.news-content{
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
		line-clamp:1;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:normal;
	}
	.news-container .news-info{
		display:none;
	}
	.news-container .news-info.active{
		display:block;
	}
	.news-info{
		margin-left:0px;
		width:96%;
		gap:3px;
		display:flex;
		flex-direction:column;
		align-items:left;
		padding-right:70px;
	}
	.news-section{
		padding:15px;
	}
	.news-section{
		padding:15px;
	}
	.news-date, .news-content{
		font-size:13px;
	}
	.categories-grid{
		grid-template-columns:repeat(1, 1fr);
		gap:10px;
	}
	.categories-section{
		padding:60px 15px 30px;
	}
	.recommended-grid{gap:15px 0;}
	.story-play{
		padding:0px;
	}
	.story-section{
		padding:30px 15px;
	}
}
@media (max-width:480px){
	.news-content{
		-webkit-line-clamp:1;
		line-clamp:1;
	}
}
@media (max-width:375px){
	.hero-left{
		height:180px;
	}
	.hero-center, .hero-right{
		height:240px;
	}
	.hero-text .vertical-text{
		font-size:16px;
	}
	.news-section{
		padding:12px;
	}
}
@media (min-width:768.02px){
	.categories-grid1{
/*		display: block;
		max-width: 480px;*/
		margin-right: auto;
		margin-left: auto;
	}
  .hero-section2 .hero-button1.in_above{display:block;}
  .product-showcase-section .hero-text2,
  .product-showcase-section .hero-button1.in_bellow{display:none;}

}
@media (min-width:1224.02px){
  .about-section + .hero-section2{margin-top:calc(78.310px + 8.451vw + 150px);}
  .product-showcase-section + .hero-section2{margin-top:calc(78.310px + 8.451vw + 100px);}
  .product-grid{gap:40px;}
  .product-card{
    width:580px;
    max-width:580px;
    display:block;
  }
  .product-card a{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
  }
  .product-info{text-align:left;}
  .hero-content2{margin-bottom:-132px;}
}
@media (min-width:1224.02px) and (max-width:1306px){
  .hero-section2 .hero-text1{padding-left:20px;}
}