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

@import "style_min551.css";

/* common class */
.view-1200{ display: none; }
.view-1200-960{ display: none; }
.view-1200-550{ display: none; }
.view-960-550{ display: none; }
.view-960-0{ display: inherit; }
.view-550-0{ display: inherit; }

.flex.vp960-0{ flex-direction: row; }
.flex.vp550-0{ flex-direction: column; }

.center{ text-align: center; }
.center.vp960-0{ text-align: left; }
.center.vp550-0{ text-align: left; }

.contents{
	padding: 0 5%;
	margin: 0;
}
.cnt2 .flex{
    flex-direction: column;
	margin-bottom:60px;
}
.cnt2 .flex figure{
    order: 2;
    width: 100%;
}
.cnt2 .flex figure img{
    height: 160px;
    width:100%;
}
.cnt2 .flex .caption{
    order: 1;
    width: 100%;
}
.cnt3 .flex{
	margin-bottom: 60px;
}
.cnt3 .flex .caption{
    padding: 0;
}
.cnt4 .swatchesBlock ul{
    gap:10px 5%;
}
.cnt4 .swatchesBlock, .cnt4 .photos.contents{
    padding: 0;
	margin: 0 0 60px 0;
}
@keyframes ulview{
	0%{
		height: 750px;
	}
	99%{
		height: 1500px;
	}
	100%{
		height: 100%;
	}
}
.cnt4 .swatchesBlock{
	margin-bottom: 80px;
}
.cnt4 .swatchesBlock ul{
	position: relative;
	overflow: hidden;
	height: 750px;
	align-items: flex-start;
	gap:10px 4%;
}
.cnt4 .swatchesBlock ul.view{
	animation-name: ulview;
	animation-delay: 0;
	animation-duration:550ms;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
.cnt4 .swatchesBlock ul.view > div{
	display: block;
}
.cnt4 .swatchesBlock ul.view > div{
	display: none;
}
.cnt4 .swatchesBlock ul li{
	width: 22%;
	margin-bottom: 10px;
}
.cnt4 .swatchesBlock ul > div{
	background: url("/showroom/event/hc/img/icon_arrow.svg") no-repeat center bottom 20px,linear-gradient(
	180deg,
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 1) 50%
	);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 230px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
	padding-bottom: 2em;
}
.cnt4 .swatchesBlock ul > div p{
    margin: 0;
}
.cnt4 .swatchesBlock ul > div p a{
    display: block;
    height: 100px;
    padding: 1em;
    position: relative;
    top:20px;
}
.cnt4 .photos .flex{
	gap:10px;
}
.cnt4 .photos .flex figure{
	width: 100%;
}
.cnt5{
	padding:60px 0 50px 0;
}
.cnt6{
	padding:60px 0 100px 0;
}
.cnt6{
	
}

/* 2025.6.24 maroon画像追加 */
.cnt2.contents {padding:0;}
.contents.cnt2 .flex {padding: 30px 5%;}
.contents.cnt2 .flex .caption .box2 {padding: 0 5% 30px 5%;}
.cnt2 .caption h3 .date{
	font-size: 19px;
	font-weight: bold;
}
.cnt2 .caption h4 + p {color:#990000;}
.contents.cnt2 .flex .caption .box3 {aspect-ratio:auto;}
.contents.cnt2 .flex .caption .box4 {padding: 10px 5% 0px 5%;}
.contents.cnt2 .flex .caption .box3 {margin-bottom: 0px;}