@charset "utf-8";
:root {
    --c_bk: #000000;
    --c_gy: #edeff1;
    --c_rd: #e40000;
    --c_dg: #666666;
}


.p-glasscoat__ttl{
	margin-top: 44px;
	padding: 10px;
	background: #666666;
	text-align: center;
	color: var(--c_wh);
}
.p-glasscoat__ttl .txt{
	font-size: 20px;
}
.p-glasscoat__ttl h3{
	font-size: 26px;
	font-weight: 700;
}
.p-glasscoat__wrapper{
	container-type: inline-size;
}
.p-glasscoat__wrap{
	display: flex;
	align-items: flex-start;
	gap: min(2.7027vw, 40px);
	margin-top: 60px;
}
.p-glasscoat__wrap .img{
	aspect-ratio: 408 / 288;
	width: 27.5676vw;
	width: 408px;
	max-width: 50%;
	img{
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}
.p-glasscoat__wrap .img.--var{
	aspect-ratio: 408 / 156;
}
.p-glasscoat__cont{
	flex: 1;
}
.p-glasscoat__cont .sub{
	font-size: clamp(15px, 1.08108vw, 16px);
}
.p-glasscoat__cont-image{
	margin-top: 22px;
	h4{
		aspect-ratio: 351 / 77;
		max-width: 351px;
		margin-top: 20px;
		img{
			width: 100%;
			max-width: 100%;
			height: auto;
		}
	}
}
.p-glasscoat__cont-text{
	font-size: clamp(22px, 2.4324vw, 36px);
}
.p-glasscoat__cont .price{
	margin-top: 32px;
	font-size: 32px;
	font-weight: 700;
	color: var(--c_rd);
	span{
		font-size: 60px;
	}
}
.p-glasscoat__about-area{
	container-type: inline-size;
}
.p-glasscoat__about{
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 25px;
	dl{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 50%;
		padding: 15px 15px 8px;
		background: #edeff1;
		font-size: 16px;
		font-weight: 700;
	}
	dt{
		position: relative;
		font-weight: 700;
		padding-bottom: 7px;
		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 180%;
			max-width: 150px;
			height: 1px;
			background: #cccccc;
		}
	}
	dd{
		display: flex;
		align-items: baseline;
		margin-top: 7px;
		font-size: 22px;
		letter-spacing: 2px;
		color: var(--c_rd);
		span{
			font-size: 28px;
		}
	}
}

@container (max-width: 430px) {
	.p-glasscoat__about{
		display: flex;
		flex-direction: column;
		gap: 10px;
		dl{
			width: 100%;
		}
		dt{
			&::before {
				content: '';
				max-width: none;
				width: 230px;
			}
		}
	}
}
@container (max-width: 750px) {
	.p-glasscoat__wrap{
		display: block;
	}
	.p-glasscoat__wrap .img{
		width: 100%;
		aspect-ratio: 16 / 9;
		max-width: none;
		img{
			aspect-ratio: 16 / 9;
			object-fit: cover;
		}
	}
	.p-glasscoat__wrap .img.--var{
		aspect-ratio: 3 / 1;
		img{
			aspect-ratio: 3 / 1;
		}
	}
	.p-glasscoat__cont{
		margin-top: 20px;
		h4{
			margin: 20px auto 0;
		}
	}
	.p-glasscoat__cont-text{
		text-align: center;
	}
	.p-glasscoat__cont .price{
		margin-top: 18px;
		text-align: center;
	}
}

.p-glasscoat__note{
	margin-top: 40px;
	padding: 30px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	li{
		span{
			font-weight: 700;
			color: var(--c_rd);
		}
	}
}

.p-glasscoat_area + .l-note-area{
	margin-top: 120px;
}


/*sp
---------------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	.p-glasscoat .c-content-title{
		text-align: center;
	}
	.p-glasscoat__ttl .txt{
		font-size: 16px;
	}
	.p-glasscoat__ttl h3{
		font-size: 18px;
	}
	.p-glasscoat__ttl{
		margin-top: 20px;
	}
	.p-glasscoat__wrap{
		margin-top: 30px;
	}
	.p-glasscoat__note{
		margin-top: 20px;
		padding: 15px 0;
	}
	.p-glasscoat_area + .l-note-area{
		margin-top: 50px;
	}




}