@charset "utf-8";

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

#casesList { padding: var(--space-xl) 0 10rem; background: var(--bg-dots) 0 0 / 1.375rem 1.375rem, linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%); }
#casesList .head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: end; gap: 4rem; margin-top: 3rem; }
#casesList .head .en { font-family: var(--font-en); font-size: clamp(3.5rem, 2rem + 4.6vw, 6.5rem); font-weight: 500; line-height: 1; letter-spacing: -.025em; color: var(--color-text); }
#casesList .head .title { display: flex; align-items: center; gap: var(--space-md); margin-top: 1.75rem; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 700; line-height: 1.6; letter-spacing: .14em; color: var(--color-text); }
#casesList .head .title::before { content: ""; flex-shrink: 0; width: 2.5rem; height: 2px; background: var(--grad-main); }
#casesList .head .lead { font-size: var(--fs-base); line-height: 2; color: var(--color-textSub); }
#casesList .list { display: grid; gap: 2.5rem; margin-top: 4rem; }
#casesList .list .link { display: block; position: relative; overflow: hidden; padding: 3.25rem 3.5rem; border-block: 1px solid var(--color-border); border-inline: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; text-decoration: none; }
#casesList .image { position: absolute; inset: 0; overflow: hidden; }
#casesList .list .link:hover .md_caseArt .graphic { transform: scale(1.05); }
#casesList .body { display: flex; flex-direction: column; align-items: flex-start; position: static; max-width: 36rem; }
#casesList .meta, #casesList .heading, #casesList .text, #casesList .tags, #casesList .more { position: relative; z-index: 1; }
#casesList .num { position: absolute; right: 2.5rem; bottom: 1.5rem; z-index: 1; font-family: var(--font-en); font-size: 5.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .7); pointer-events: none; }
#casesList .meta { display: flex; align-items: center; gap: var(--space-sm); }
#casesList .no { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; color: var(--color-blueDark); }
#casesList .category { padding-left: var(--space-sm); border-left: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-textSub); }
#casesList .heading { margin-top: var(--space-md); font-size: var(--fs-xxl); font-weight: 700; line-height: 1.6; letter-spacing: .03em; color: var(--color-text); text-wrap: balance; transition: color .25s; }
#casesList .list .link:hover .heading { color: var(--color-blueDark); }
#casesList .text { margin-top: var(--space-md); font-size: var(--fs-md); line-height: 2; color: var(--color-textSub); }
#casesList .tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: var(--space-lg); }
#casesList .tag { padding: .2rem .75rem; border-radius: 999px; background: var(--color-sky); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; color: var(--color-blueDark); }
#casesList .more { display: inline-flex; align-items: center; gap: .6rem; margin-top: var(--space-lg); font-size: var(--fs-sm); font-weight: 700; color: var(--color-blueDark); }
#casesList .arrow { display: grid; place-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--color-blueDark); border-radius: 50%; font-family: var(--font-en); transition: background-color .25s, color .25s, transform .25s; }
#casesList .list .link:hover .arrow { background: var(--color-blueDark); color: var(--color-white); transform: translateX(.25rem); }
#casesList .heading { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); }

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

#casesDetail { padding: var(--space-xl) 0 10rem; background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%); }
#casesDetail .article { max-width: 56rem; margin: 5.5rem auto 0; }
#casesDetail .meta { display: flex; align-items: center; gap: var(--space-sm); }
#casesDetail .no { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; color: var(--color-blueDark); }
#casesDetail .category { padding-left: var(--space-sm); border-left: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-textSub); }
#casesDetail .head { position: relative; overflow: hidden; padding: 3.5rem 3rem; border: 1px solid var(--color-border); border-radius: 1.25rem; background: var(--color-white); box-shadow: 0 30px 60px -40px rgba(30, 42, 85, .45); }
#casesDetail .head .meta, #casesDetail .head .title { position: relative; z-index: 1; max-width: 72%; }
#casesDetail .head .title { margin-top: var(--space-md); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1.55; letter-spacing: .04em; color: var(--color-text); text-wrap: balance; }
#casesDetail .intro { margin-top: 3.5rem; }
#casesDetail .catch { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); font-weight: 700; line-height: 1.75; letter-spacing: .04em; color: var(--color-blueDark); }
#casesDetail .lead { margin-top: var(--space-lg); font-size: var(--fs-base); line-height: 2.1; color: var(--color-text); }
#casesDetail .tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: var(--space-lg); }
#casesDetail .tag { padding: .2rem .75rem; border-radius: 999px; background: var(--color-sky); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; color: var(--color-blueDark); }
#casesDetail .points .label, #casesDetail .summary .label { display: flex; align-items: baseline; gap: var(--space-md); font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .2em; color: var(--color-blueLight); }
#casesDetail .points .labelJa, #casesDetail .summary .labelJa { font-family: var(--font-base); font-size: var(--fs-md); letter-spacing: .06em; color: var(--color-text); }
#casesDetail .points { margin-top: 3.5rem; padding: var(--space-xl) 2.25rem; border-radius: 1.25rem; background: var(--color-white); box-shadow: 0 24px 48px -32px rgba(30, 42, 85, .45); }
#casesDetail .pointList { display: grid; gap: var(--space-sm); margin-top: 1.25rem; counter-reset: point; }
#casesDetail .pointItem { position: relative; padding-left: 2.5rem; font-size: var(--fs-base); font-weight: 500; line-height: 1.9; color: var(--color-text); counter-increment: point; }
#casesDetail .pointItem::before { content: counter(point, decimal-leading-zero); display: grid; place-content: center; position: absolute; top: .2rem; left: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--grad-main); font-family: var(--font-en); font-size: var(--fs-xxs); font-weight: 700; line-height: 1; color: var(--color-white); }
#casesDetail .body { margin-top: 4rem; }
#casesDetail .block + .block { margin-top: 3.5rem; }
#casesDetail .heading { display: flex; align-items: baseline; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); font-size: var(--fs-xl); font-weight: 700; line-height: 1.5; color: var(--color-text); }
#casesDetail .en { font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: .2em; color: var(--color-blueLight); }
#casesDetail .text { margin-top: var(--space-lg); font-size: var(--fs-base); line-height: 2.1; color: var(--color-text); line-break: strict; }
#casesDetail .text + .text { margin-top: var(--space-md); }
#casesDetail .summary { margin-top: 4.5rem; }
#casesDetail .spec { margin-top: 1.25rem; border-top: 1px solid var(--color-text); }
#casesDetail .row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-lg); padding: 1.125rem .25rem; border-bottom: 1px solid var(--color-border); }
#casesDetail .term { font-size: var(--fs-sm); font-weight: 700; line-height: 1.9; color: var(--color-blueDark); }
#casesDetail .desc { font-size: var(--fs-base); line-height: 1.9; color: var(--color-text); }
#casesDetail .cta { margin-top: 4.5rem; padding: 2.5rem var(--space-xl); border-radius: 1.25rem; background: var(--bg-hexWhite) 0 0 / 3.5rem 6.0625rem repeat, linear-gradient(120deg, var(--color-ctaBlue1) 0%, var(--color-ctaBlue2) 55%, var(--color-ctaBlue3) 100%); text-align: center; color: var(--color-white); }
#casesDetail .ctaText { font-size: var(--fs-md); font-weight: 700; line-height: 1.9; }
#casesDetail .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg); }
#casesDetail .buttons .md_btn { justify-content: center; min-width: 12rem; padding: .875rem 2rem; border-radius: 999px; }
#casesDetail .buttons .md_btn_ghost { color: var(--color-white); }
#casesDetail .buttons .md_btn_fill { background: var(--color-white); color: var(--color-blueDark); }
#casesDetail .md_pager { max-width: 56rem; margin: 5.5rem auto 0; }

/* 写真を軸にした事例紹介 */
.casePhoto { display: block; width: 100%; height: 100%; object-fit: cover; }
#casesList .list .link { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); padding: 0; }
#casesList .image { position: relative; inset: auto; grid-column: 2; grid-row: 1; min-height: 20rem; }
#casesList .image picture { display: block; height: 100%; }
#casesList .body { grid-column: 1; grid-row: 1; max-width: none; padding: 2.75rem; }
#casesList .list .link { background: var(--color-white); }
#casesList .num { display: none; }
#casesList .projectName { margin-top: 1.25rem; font-size: .875rem; font-weight: 500; line-height: 1.8; color: var(--color-textSub); }
#casesList .heading { margin-top: .75rem; font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); line-height: 1.65; text-wrap: initial; }
#casesDetail { position: relative; overflow: hidden; isolation: isolate; }
#casesDetail > .md_container { position: relative; z-index: 1; }
#casesDetail .caseBackdrop { inset: 6rem -12rem auto auto; width: min(75vw, 65rem); height: 42rem; background: none; opacity: .13; pointer-events: none; mask-image: none; -webkit-mask-image: none; }
#casesDetail .caseBackdrop .line { stroke: var(--color-blue); }
#casesDetail .caseBackdrop .line.isFaint { stroke: var(--color-blueLight); }
#casesDetail .caseBackdrop .fill { fill: var(--color-blueLight); }
#casesDetail .caseBackdrop .dot { fill: var(--color-blue); }
#casesDetail .caseBackdrop .accent { stroke: var(--color-blue); }
#casesDetail .article { margin-top: 4rem; }
#casesDetail .head { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
#casesDetail .head .meta, #casesDetail .head .title { max-width: none; }
#casesDetail .projectName { margin-top: 1.5rem; font-size: 1rem; font-weight: 500; line-height: 1.8; color: var(--color-textSub); }
#casesDetail .head .title { margin-top: .875rem; font-size: clamp(1.75rem, 2.65vw, 2.5rem); line-height: 1.6; letter-spacing: .02em; text-wrap: initial; }
#casesDetail .heroPhoto { margin-top: 2.5rem; position: relative; aspect-ratio: 2.8 / 1; overflow: hidden; border-radius: 1rem; }
#casesDetail .heroPhoto picture { display: block; height: 100%; }
#casesDetail .intro { margin-top: 2.5rem; }
#casesDetail .intro .lead { margin-top: 0; }

/* 写真の下端を背景へなじませ、コピーを主役にする */
#casesList .image::after, #casesDetail .heroPhoto::after { content: none; }
#casesDetail .heroPhoto { border-radius: .75rem .75rem 0 0; }
#casesDetail .intro { margin-top: 1.5rem; }



#casesList .image .casePhoto { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 16%, rgba(0,0,0,.27) 35%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.84) 78%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 16%, rgba(0,0,0,.27) 35%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.84) 78%, #000 100%); }
#casesDetail .heroPhoto .casePhoto { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.98) 18%, rgba(0,0,0,.88) 36%, rgba(0,0,0,.65) 54%, rgba(0,0,0,.34) 73%, rgba(0,0,0,.1) 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.98) 18%, rgba(0,0,0,.88) 36%, rgba(0,0,0,.65) 54%, rgba(0,0,0,.34) 73%, rgba(0,0,0,.1) 90%, transparent 100%); }