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

/*--------------------------------------------------------
　基本設定
--------------------------------------------------------*/



/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 641px){
	section {
		width: 88%;
		margin: 0 auto;
	}
	
	section h2{
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: 500;
		text-align: center;
		margin-bottom: 80px;
	}
	
	section div.block + div.block{
		margin-top: 120px;
	}
	
	section div.block h3{
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: 500;
		text-align: center;
		margin-bottom: 10px;
	}
	
	section div.block h3 span{
		display: inline-block;
		border-bottom: 1px solid #000;
	}
	
	section div.block div.box + div.box {
		margin-top: 25px;
	}
	
	section div.block div.box {
		text-align: center;
	}
	
	section div.block div.box ul{
		font-size: 13px;
		font-size: 1.3rem;
		font-weight: 400;
		font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
		width: 10em;
		margin: 0 auto;
		list-style: none;
	}
	
	section div.block div.box ul li{
		display: block;
		position: relative;
	}
	
	section div.block div.box ul li a{
		color: #808080;
	}
	
	section div.block div.box ul li span{
		width: 12em;
		display: block;
		position: absolute;
		top: 0;
		right: -13em;
		text-align: left;
	}
	
	section div.block div.box ul li span a,
	section div.block div.box a.link{
		font-size: 13px;
		font-size: 1.3rem;
		font-family: "EB Garamond","Shippori Mincho","Noto Serif JP", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-weight: 500;
		color: #808080;
	}
	
	section div.block div.box ul li + li{
		margin-top: 5px;
	}
	
	section div.block div.box p{
		font-size: 13px;
		font-size: 1.3rem;
		font-weight: 400;
		font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
		line-height: 1.8;
	}
	
	
}

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 640px){
	
	section {
		width: 90%;
		margin: 0 auto;
	}
	
	section h2{
		font-size: 1.4rem;
		font-size: clamp(1.4rem, 4.37vw, 2.8rem);
		font-weight: 500;
		text-align: center;
		margin-bottom: 10vw;
	}
	
	section div.block + div.block{
		margin-top: 12vw;
	}
	
	section div.block h3{
		font-size: 1.3rem;
		font-size: clamp(1.3rem, 4.06vw, 2.6rem);
		font-weight: 500;
		text-align: center;
		margin-bottom: 1.5vw;
	}
	
	section div.block h3 span{
		display: inline-block;
		border-bottom: 1px solid #000;
	}
	
	section div.block div.box + div.box {
		margin-top: 8vw;
	}
	
	section div.block div.box {
		text-align: center;
	}
	
	section div.block div.box ul{
		font-size: 1.0rem;
		font-size: clamp(1.0rem, 3.12vw, 2.0rem);
		font-weight: 400;
		font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
		margin: 0 auto;
		list-style: none;
	}
	
	section div.block div.box ul li{
		display: block;
		position: relative;
	}
	
	section div.block div.box ul li a{
		color: #808080;
	}
	
	section div.block div.box ul li span{
		display: block;
	}
	
	section div.block div.box ul li span a,
	section div.block div.box a.link{
		font-size: 1.0rem;
		font-size: clamp(1.0rem, 3.12vw, 2.0rem);
		font-family: "EB Garamond","Shippori Mincho","Noto Serif JP", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-weight: 500;
		color: #808080;
	}
	
	section div.block div.box ul li + li{
		margin-top: 5px;
	}
	
	section div.block div.box p{
		font-size: 1.0rem;
		font-size: clamp(1.0rem, 3.12vw, 2.0rem);
		font-weight: 400;
		font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
		line-height: 1.8;
	}
	
	
	
	
	
	
	section ul li div.box div.notation {
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,.75);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		opacity: 0;
	}
	
	section ul li div.box div.notation.active {
		opacity: 1;
	}
	
	section ul li div.box div.notation p{
		font-size: 1.4rem;
		font-size: clamp(1.4rem, 4.37vw, 2.8rem);
		line-height: 1.4;
	}
	
	section ul li a div.box div.photo span.on{
		display: block;
		position: absolute;
		opacity: 0;
		transition-duration: 0.5s;
		transition-property: opacity, color;
	}
	
	section ul li a:hover div.box div.photo span.on{
		opacity: 1;
	}
	
	section ul li h3.product_name{
		font-size: 1.2rem;
		font-size: clamp(1.2rem, 3.75vw, 2.4rem);
		font-weight: 500;
		line-height: 1.3;
		margin-bottom: 1vw;
	}
	
	section ul li p.name{
		font-size: 1.0rem;
		font-size: clamp(1.0rem, 3.12vw, 2.0rem);
		font-weight: 500;
	}

}