/* @group @m-availability */

[class*="m-availability"] {
width: 100%;
max-width: 45rem;
margin: 0 auto;
}

[class*="a-availability-label"] {
display: inline-grid;
justify-content: center;
grid-template-columns: var(--availability-label-grid-template-columns);
grid-template-rows: var(--availability-label-grid-template-rows);
gap: var(--availability-label-gap);
}

[class*="a-availability-label"] {
--availability-label-grid-template-columns: auto 1.5rem auto 1.5rem auto;
--availability-label-grid-template-rows: .25rem 1fr .25rem;
}

[class*="m-availability"] :where(h3) {
margin-bottom: 0;
}

[class*="a-availability-label"]>span {
grid-column: 3;
grid-row: 2;
text-align: center;
}

[class*="a-availability-label"] {
font-size: clamp(1.125rem, 0.804rem + 1.61vw, 1.875rem); /* 18〜30 / 320〜1440 */

/* @todo 計算変更*/
line-height: 1.5;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
}

[class*="a-availability-label"]:before,
[class*="a-availability-label"]:after {
content: '';
grid-row: 2;
border: solid currentColor;
}

[class*="a-availability-label"]:before {
grid-column: 1;
border-width: 0 1px 0 0;
transform: rotate(-10deg);
}

[class*="a-availability-label"]:after {
 grid-column: 5;
border-width: 0 0 0 1px;
transform: rotate(10deg);
}

[class*="m-availability"] a,
[class*="m-availability"] label {
cursor: pointer;
}

[class*="m-availability"] img {
width: 100%;
height: auto;
transition: var(--filter-transition);
filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 20% / 20%));
}

[class*="m-availability"] a:hover img,
[class*="m-availability"] a:focus img,
[class*="m-availability"] label:hover img,
[class*="m-availability"] label:focus img {
filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 20% / 40%));
}

/* @end @m-availability */