/* @group @variables */

[class*="m-reason-list"] {
--m-reason-list-grid-template-columns: 1fr;
--m-reason-list-gap: .75rem;
--reason-detail-grid-template-columns: 5.5rem minmax(max-content, 11.5rem);
--reason-detail-grid-template-rows: 1fr;
--reason-detail-gap: 1rem;
--reason-detail-grid-auto-flow: column;
}

@media all and (min-width: 48em) {

[class*="m-reason-list"] {
--m-reason-list-grid-auto-flow: column;
--m-reason-list-grid-template-columns: repeat(3, 1fr);
--m-reason-list-gap: 1.125rem;
--reason-detail-grid-template-columns: 1fr;
--reason-detail-grid-template-rows: auto 1fr;
--reason-detail-grid-auto-flow: row;
--reason-title-order: -1;
--reason-title-text-align: center;
}

}

/* @end @variables */

/* @group @m-reason-list */

[class*="m-reason-list"] {
display: grid;
grid-template-columns: var(--m-reason-list-grid-template-columns);
gap: var(--m-reason-list-gap);
}

[class*="a-reason-detail"] {
display: grid;
gap: var(--reason-detail-gap);
}

[class*="a-reason-detail"] {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: var(--reason-detail-grid-template-columns);
grid-template-rows: var(--reason-detail-grid-template-rows);
gap: var(--reason-detail-gap);
padding: .75rem;
background-color: hsl(0deg 0% 100%);
border-radius: .5rem;
}

[class*="a-reason-media"] {
text-align: center;
}

[class*="a-reason-media"] img {
width: 100%;
max-width: 9.375rem;
height: auto;
margin-right: auto;
margin-left: auto;
}

[class*="a-reason-title"] {
order: var(--reason-title-order);
margin-bottom: 0;
font-size: clamp(1.25rem, 1.179rem + 0.36vw, 1.5rem); /* 20〜36 / 320〜1440 */
line-height: 1.5;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
text-align: var(--reason-title-text-align);
}

[class*="a-reason-title"] em {
color: hsl(347deg 85% 64%);
}

/* @end @m-reason-list */