/* CSS Document */
#main{
margin-bottom: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
}
#detail{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
&:before{
content: "";
grid-column: 1 / 4;
grid-row: 1;
background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,') no-repeat center -24px / max(640px, 100%) clamp(240px, calc(400 / 1200 * 100dvw), 400px);
}
&>*{
grid-column: 2;
}
& h2{
grid-row: 1;
display: grid;
grid-template-columns: auto 1fr;
margin: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0;
column-gap: 0.5em;
color: #fff;
font-weight: 700;
font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
&:before{
content: attr(data-kana);
grid-column: 2;
font-size: clamp(12px, calc(15 / 768 * 100dvw), 15px);
}
&:after{
content: "";
grid-column: 1;
grid-row: 2;
aspect-ratio: 1;
width: 1em;
background: currentColor;
transform: translateY(calc(0.875em - 50%));
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
#text{
justify-self: center;
width: min(100%, 720px);
margin-top: clamp(32px, calc(64 / 1200 * 100dvw), 64px);
}
#photo{
grid-row: 2;
margin-top: clamp(32px, calc(72 / 1200 * 100dvw), 72px);
}
#status{
grid-row: 3;
margin-top: clamp(32px, calc(72 / 1200 * 100dvw), 72px);
}
#cart{
margin-top: clamp(32px, calc(72 / 1200 * 100dvw), 72px);
}
@media (min-width: 992px) {
#photo{
width: 50%;
}
#status{
grid-row: 2;
justify-self: end;
width: min(calc(50% - 56px));
}
}
}
#text{
font-weight: 500;
}
#photo{
& img{
aspect-ratio: 3 / 2;
object-fit: contain;
background: #eee;
border-radius: 10px;
}
}
#status{
& dl{
display: grid;
background: #f7f7f7;
border: 1px solid var(--color-theme);
border-radius: 10px;
overflow: hidden;
}
& dt,
& dd{
padding: 16px 24px;
font-weight: 500;
&:nth-of-type(even){
background: #efefef;
}
}
& dt{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.75em;
&:before{
content: "";
width: 3px;
height: 1em;
background: var(--color-theme);
transform: translateY(calc(0.875em - 50%));
}
&:nth-of-type(n+2){
border-top: 1px solid #e8e8e8;
}
}
@media (max-width: 575.98px) {
& dd{
padding-top: 0;
}
}
@media (min-width: 576px) {
& dl{
grid-template-columns: auto 1fr;
}
& dt{
min-width: 10em;
}
& dd{
&:nth-of-type(n+2){
border-top: 1px solid #e8e8e8;
}
}
}
}
#cart{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 16px 40px;
& a{
display: grid;
align-items: center;
min-width: min(100%, 320px);
min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
padding: 4px 16px;
border: 1px solid currentColor;
border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
color: var(--color-theme);
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
&[data-id]{
grid-template-columns: auto 1fr;
background: var(--color-theme);
color: #fff;
&:before{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&.deleteCart{
background: #ddd;
color: inherit;
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&:hover:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
&.limit{
background: #ccc;
pointer-events: none;
}
}
&.cart{
grid-template-columns: 1fr auto;
&:before,
&:after{
content: "";
grid-column: 2;
grid-row: 1;
aspect-ratio: 1;
width: 16px;
}
&:before{
background: currentColor;
border-radius: 100%;
}
&:after{
background: #fff;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
}