/* CSS Document */
#detail{
width: var(--wrap);
margin: clamp(24px, 4.8vw, 32px) auto clamp(64px, 14.4vw, 96px) auto;
}
#detail h2{
display: grid;
grid-template-columns: 3px auto;
grid-gap: 10px;
font-size: clamp(24px, 4.8vw, 32px);
font-family: var(--font-min);
font-weight: 500;
line-height: 1.65;
}
#detail h2:before{
content: "";
margin: 0.3em 0;
background: var(--color-point);
transform: translateY(0.1em);
}
#detail footer{
display: flex;
justify-content: center;
margin-top: clamp(48px, 9.6vw, 64px);
border: 0 solid var(--color-border);
border-width: 1px 0;
}
#detail footer a{
display: grid;
grid-template-columns: auto 50px;
grid-template-areas: 'text icon';
align-items: center;
justify-content: center;
grid-gap: 16px;
min-height: 90px;
padding: 8px;
color: inherit;
font-weight: 500;
line-height: 1.65;
text-decoration: none;
}
#detail footer a:before{
content: "";
grid-area: icon;
aspect-ratio: 1;
border: 1px solid var(--color);
border-radius: 100%;
}
#detail footer a:after{
content: "";
grid-area: icon;
justify-self: center;
width: 18px;
height: 16px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: 17.16px 15.71px;
background: var(--color);
}
@media (min-width: 576px) {
#detail h2{
grid-template-columns: 4px auto;
}
}
#detailInfo{
display: grid;
grid-gap: clamp(16px, 3.6vw, 24px) 24px;
margin-top: clamp(24px, 4.8vw, 32px);
}
#detailInfo figure{
order: -1;
}
#detailInfo figure img{
width: 100%;
height: auto;
}
@media (min-width: 768px) {
#detailInfo{
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 992px) {
#detailInfo{
grid-gap: 48px;
}
}
#detailStatus{}
#detailStatus dl{
display: grid;
grid-template-columns: min(7em) auto;
}
#detailStatus dt,
#detailStatus dd{
padding: 8px 16px;
line-height: 1.65;
}
#detailStatus dt{
background: var(--color-point);
border-color: #fff;
color: #fff;
}
#detailStatus dt:nth-child(n+2){
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
#detailStatus dd{
border-top: 1px solid var(--color-border);
}
#detailStatus dd:last-child{
border-bottom: 1px solid var(--color-border);
}
#detailDownload{
display: grid;
justify-items: center;
margin-top: clamp(32px, 7.2vw, 48px);
}
#detailDownload h3{
color: var(--color-point);
font-size: clamp(16px, 3vw, 20px);
font-weight: 500;
line-height: 1.65;
}
#detailDownload h3+div{
margin-top: clamp(20px, 4.2vw, 28px);
}
#detailDownload a{
display: grid;
grid-template-columns: 24px auto;
align-items: center;
justify-items: center;
grid-gap: 8px;
min-height: 48px;
padding: 8px 24px;
background: #fff;
border: 1px solid var(--color-border);
color: inherit;
font-weight: 500;
text-decoration: none;
text-align: center;
cursor: pointer;
}
#detailDownload a:before{
content: "";
width: 24px;
height: 24px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: currentColor;
}
#detailDownload a#cart{}
#detailDownload a#cart:hover{
background: var(--color-theme);
}
#detailDownload a#cart.none{
display: none;
}
#detailDownload a#delete{}
#detailDownload a#delete:not(:hover){
background: var(--color-theme);
}
#detailDownload a#delete:not(:hover):before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#detailDownload a#delete:hover{}
#detailDownload a#delete:hover:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#detailDownload a#delete.none{
display: none;
}