@charset "utf-8";

@media screen and (max-width: 640px) {

/*============================
#casesList
============================*/

#casesList { padding-bottom: 6rem; }
#casesList .md_breadcrumb .current { max-width: 12em; }
#casesList .head { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
#casesList .head .en { font-size: clamp(3rem, 2rem + 6vw, 4.5rem); }
#casesList .head .title { margin-top: 1.25rem; letter-spacing: .1em; }
#casesList .head .lead { font-size: var(--fs-md); }
#casesList .list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xxl) 0; margin-top: 3rem; }
#casesList .list .link { padding: 8rem 1.5rem 2rem; }
#casesList .num { top: 1.25rem; right: 1.25rem; bottom: auto; font-size: 3.75rem; }
#casesList .heading { font-size: var(--fs-lg); }

/*============================
#casesDetail
============================*/

#casesDetail { padding-bottom: 6rem; }
#casesDetail .md_breadcrumb .current { max-width: 12em; }
#casesDetail .article { margin-top: 3.5rem; }
#casesDetail .head { padding: 7.5rem 1.5rem 2rem; border-radius: 1rem; }
#casesDetail .head .meta, #casesDetail .head .title { max-width: none; }
#casesDetail .lead, #casesDetail .text, #casesDetail .pointItem, #casesDetail .desc { font-size: var(--fs-md); }
#casesDetail .body { margin-top: 3rem; }
#casesDetail .block + .block { margin-top: 2.75rem; }
#casesDetail .heading { font-size: var(--fs-lg); }
#casesDetail .intro, #casesDetail .points { margin-top: 2.5rem; }
#casesDetail .points { padding: var(--space-lg) 1.25rem; }
#casesDetail .row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
#casesDetail .summary, #casesDetail .cta { margin-top: 3rem; }
#casesDetail .cta { padding: var(--space-xl) 1.25rem; }
#casesDetail .buttons .md_btn { width: 100%; }
#casesDetail .md_pager { margin-top: 4rem; }

}

@media screen and (max-width: 640px) {
#casesList .list .link { grid-template-columns: minmax(0, 1fr); padding: 0; }
#casesList .image { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 2 / 1; }
#casesList .body { grid-column: 1; grid-row: 2; padding: 1.5rem; }
#casesList .heading { font-size: 1.375rem; }
#casesList .projectName { font-size: .8125rem; }
#casesDetail .article { margin-top: 2.5rem; }
#casesDetail .head { padding: 0; }
#casesDetail .projectName { margin-top: 1.25rem; font-size: .875rem; }
#casesDetail .head .title { font-size: clamp(1.5rem, 6vw, 1.875rem); line-height: 1.65; }
#casesDetail .head .title br { display: none; }
#casesDetail .heroPhoto { margin-top: 1.75rem; aspect-ratio: 16 / 10; border-radius: .75rem; }
#casesDetail .caseBackdrop { width: 40rem; height: 28rem; right: -20rem; top: 7rem; opacity: .1; }
}