@charset "utf-8";

.laser-level-option{
width: 100%;
}
.laser-level-option p{
font-family: 'ヒラギノ角ゴシック','Hiragino Sans',游ゴシック体, 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, Verdana, Arial, sans-serif;
font-size: 12px;
font-feature-settings: "palt";
margin: 0;
}
.laser-level-option__item{
margin-top: 18px;
}
.laser-level-option__label{
font-weight: bold;
font-size: 15px;
}
.laser-level-option__label-note{
display: inline-block;
font-size: 85%;
}
.laser-level-option__body{
display: grid;
grid-template-columns: 34% 18% 1fr;
column-gap: 35px;
align-items: start;
padding-left: 10px;
margin-top: 10px;
}
.laser-level-option__product-image{
width: 110%;
display: block;
}
.laser-level-option__placeholders{
display: grid;
row-gap: 10px;
}
.laser-level-option__placeholder-image{
aspect-ratio: 1 / 1;
width: 100%;
display: block;
object-fit: cover;
}
.laser-level-option__name{
font-weight: bold;
font-size: 16px;
line-height: 1.25;
margin-bottom: 16px;
}
.laser-level-option__spec{
line-height: 1.55;
}
.laser-level-option__price{
line-height: 1.45;
margin-top: 8px;
}
.laser-level-option__item + .laser-level-option__item{
margin-top: 42px;
}
.laser-level-option__gallery{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-top: 10px;
}
.laser-level-option__gallery-image{
aspect-ratio: 1 / 1;
width: 100%;
display: block;
object-fit: cover;
}
.laser-level-option__gallery-detail{
margin-top: 18px;
}
@media screen and (max-width: 700px){
.laser-level-option__body{
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.5fr);
row-gap: 16px;
column-gap: 10px;
padding-left: 0;
}
.laser-level-option__product-image{
width: 100%;
max-width: 352px;
}
.laser-level-option__placeholders{
grid-template-columns: 1fr;
row-gap: 10px;
max-width: none;
width: 100%;
justify-self: end;
}
.laser-level-option__detail{
grid-column: 1 / -1;
padding-left: 0;
}
.laser-level-option__gallery{
grid-template-columns: repeat(3, minmax(0, 1fr));
padding-left: 0;
}
.laser-level-option__gallery-detail{
padding-left: 0;
}
}
@media screen and (max-width: 500px){
.laser-level-option{
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
}
.laser-level-option__gallery{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.laser-level-option__gallery-detail{
padding-bottom: 20px;
}
}