@charset "utf-8";

main.shop section.x1 {
	padding:100px 0 0;
}
main.shop section.x1 .inner {
	padding:30px 0 271px;
	position:relative;
	z-index:1;
}
main.shop section.x1 .inner .top_bx {
	margin:0 0 0 10vw;
	position:relative;
	z-index:10;
}
main.shop section.x1 .inner .top_bx h1 {
	font-size:64px;
	line-height:1.1;
	position:relative;
	z-index:10;
	overflow:hidden;
}

main.shop section.x1 .inner .top_bx h1 span {
	margin:0;
	padding:0;
	display:block;
	line-height:inherit;
}
main.shop section.x1 .inner .top_bx p {
	font-size:24px;
	font-weight:500;
}
main.shop section.x1 .inner .top_bx p span {
	display:block;
	color:#216fc6;
}
main.shop section.x1 .inner .bg {
	width:72vw;
	height:400px;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
}
main.shop section.x1 .inner .bg img {width:100%;}

main.shop section.x2 {margin:100px 0 0;}
main.shop section.x2 .inner {
	width:100%;
	max-width:1500px;
	margin:0 auto 100px;
	padding:0 50px;
}
main.shop section.x2 .inner .wp {
	display:flex;
	justify-content:center;
	align-items:flex-start;
	margin:0 0 170px;
}
main.shop section.x2 .inner .wp .left {
	width:48%;
	margin:0 1%;
}
main.shop section.x2 .inner .wp .left h2 {
	font-size:48px;
	line-height:1.35;
	margin:0 0 0.8em;
}

main.shop section.x2 .inner .wp .right {
	width:48%;
	margin:0 1%;
}
main.shop section.x2 .inner .wp .left p {
	font-size:18px;
	line-height:2.6;
	margin:0 0 2.4em;
}
main.shop section.x2 .inner .wp .left ul li {
	font-size:18px;
	line-height:2.6;
}
main.shop section.x2 .inner .wp .left ul li span {
	font-weight:bold;
	width:8em;
	display:inline-block;
}

main.shop section.x2 .inner .wp .right .main {
	width:100%;
	height:auto;
	aspect-ratio:3 / 2;
	border-radius:15px;
	overflow:hidden;
	position:relative;
	margin:0 0 15px;
}
main.shop section.x2 .inner .wp .right .main li {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	opacity:0;
	transition:opacity .3s ease;
}
main.shop section.x2 .inner .wp .right .main li.active {
	z-index:10;
	opacity:1;
}

main.shop section.x2 .inner .wp .right .thumb {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
main.shop section.x2 .inner .wp .right .thumb li {
	width:32%;
	height:auto;
	aspect-ratio:3 / 2;
	overflow:hidden;
	cursor:pointer;
	-moz-opacity:1.0;
	opacity:1.0;
	filter:alpha(opacity = 100);
	border-radius:10px;
}
main.shop section.x2 .inner .wp .right .thumb li img {width:100%;}
main.shop section.x2 .inner .wp .right .thumb li:hover {
	-moz-opacity:0.9;
	opacity:0.9;
	filter:alpha(opacity = 90);
}
main.shop section.x2 .inner .wp .right .thumb li.active {border:solid 3px #dcd0b9;}
main.shop section.x2 .inner .wp.x3 .right .thumb::after {
	content:"";
	display:block;
	width:32%;
}

main.shop section.x2 .inner .wp .right .main li a {
	display:block;
}
main.shop section.x2 .inner .wp .right .main li a span {
    position: absolute;
    z-index: 100;
    bottom: 0;
    right: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 1.2em;
    padding: 0 1em;
    border-radius: 15px 0 0 0;
}


/* メディアクエリ------------------------------------------------------------------*/
@media print, screen and (min-width:1900px){}
@media print, screen and (max-width:1500px){
	main.shop section.x1 .inner .bg img {
		width:auto;
		height:100%;
	}
	main.shop section.x2 .inner .wp .right .main li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	}
	main.shop section.x2 .inner .wp .right .main li img {width:100%;}
	main.shop section.x2 .inner .wp .right .main li a img {width:100%;}
}
@media print, screen and (max-width:1200px){
	main.shop section.x2 .inner .wp {
	    flex-direction: column;
	}
main.shop section.x2 .inner .wp .left {
    width: 100%;
    margin: 0 0 5vw;
}
main.shop section.x2 .inner .wp .right {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

}
@media print, screen and (max-width:768px){
	main.shop section.x1 .inner {padding:0;}
	main.shop section.x1 .inner .top_bx {margin:0 0 0 5vw;}
	main.shop section.x1 .inner .top_bx h1 {font-size:12vw;}
	main.shop section.x1 .inner .top_bx p {font-size:6vw;}
	main.shop section.x1 .inner .bg {
		position:relative;
		width:100%;
		height:40vw;
		margin:0 0 5vw 10vw;
	}

main.shop section.x2 {
    margin: 10vw 0 0;
}
main.shop section.x2 .inner {
    padding: 0 5vw;
}
main.shop section.x2 .inner .wp {margin:0 0 20vw;}
main.shop section.x2 .inner .wp .left h2 {
    font-size: 7.2vw;
    margin: 0 0 0.5em;
}
main.shop section.x2 .inner .wp .left p {
    font-size: 4.2vw;
    line-height: 2;
}
main.shop section.x2 .inner .wp .left ul li {
    font-size: 4.2vw;
    line-height: 2;
    margin: 0 0 0.5em;
}
main.shop section.x2 .inner .wp .left ul li span {
    display: block;
}
main.shop section.x2 .inner .wp .right .main li a img {transform:scale(1.5);}


}