.p-findHero { padding-bottom: 0;} .p-findHero-content + .p-findHero-bottom { margin-top: var(--spc-16);} .p-findHero-bottom { background-size: cover; background-position: top center; background-repeat: no-repeat;} .p-findHero-bottom-inner { margin-top: calc(var(--spc-8) * -1); box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.25);} .p-findHero__titleEn,.p-findHero__title { text-align: center;} .p-findContents { position: relative; margin-top: calc(var(--spc-12) * -1); @media (max-width: 1024px) { margin-top: calc(var(--spc-4) * -1); }} .p-findContents > .p-findSection { border-radius: var(--spc-12) var(--spc-12) 0 0; box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.1); background-color: var(--c-white); @media (max-width: 1024px) { border-radius: var(--spc-4) var(--spc-4) 0 0; }} .p-findSection { padding-block: var(--spc-12);} .p-findSection-head + .p-findSection-content { margin-top: var(--spc-6); border-top: solid .1rem var(--c-gray-300);} .p-findSection__title { color: var(--c-blue-900);} .p-findItem { padding-top: var(--spc-8);} .p-findItem-head + .p-findItem-content { margin-top: var(--spc-6); @media (max-width: 600px) { margin-top: var(--spc-4); }} .p-findItem-content-inner { padding: var(--spc-10) var(--spc-12); border-radius: var(--spc-6); background-color: var(--c-blue-100); @media (max-width: 1024px) { padding: var(--spc-6) var(--spc-8) var(--spc-8); border-radius: var(--spc-4); } @media (max-width: 600px) { padding: var(--spc-4) var(--spc-5) var(--spc-5); } &.--devide { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spc-12); @media (max-width: 1024px) { display: flex; flex-direction: column; gap: var(--spc-6); } } &.--graphs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spc-12); @media (max-width: 1024px) { display: flex; flex-direction: column; gap: var(--spc-6); } & > article:nth-of-type(2) { grid-row: 2 / 3; } & > article:nth-of-type(3) { grid-column: 2 / 3; grid-row: 1 / 3; } } & > img { max-width: 118rem; margin-inline: auto; } & > section { aspect-ratio: 48 / 25; position: relative; @media (max-width: 1024px) { aspect-ratio: auto; } & > img { width: 100%; height: 100%; object-fit: contain; object-position: left top; display: block; } }} .p-findItem__title { color: var(--c-blue-900); & + .p-findItem__desc { margin-top: var(--spc-2); }} .p-findItem__desc { max-width: 64rem; color: var(--c-gray);} .p-findItem__graph-head { & > h4 { color: var(--c-blue-900); span { display: block; color: var(--c-blue-900); } & + span { margin-top: var(--spc-1); } } & > span { display: block; color: var(--c-blue-300); } & + .p-findItem__graph-content { margin-top: var(--spc-6); }} .p-findItem__graph-content { ul { display: flex; flex-wrap: wrap; gap: var(--spc-2); } &.--frameworks { display: flex; flex-direction: column; gap: var(--spc-2); }} .p-findItem__contents { display: grid; position: absolute; inset: 0 0 0 auto; @media (max-width: 1024px) { position: relative; }} .p-findItem__contents-inner { align-self: center; background-color: var(--c-white); border-radius: var(--spc-4); box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.1); @media (max-width: 600px) { border-radius: var(--spc-2); }} .p-findItem__contents-head,.p-findItem__contents-content { padding-inline: var(--spc-5);} .p-findItem__contents-head { padding-block: var(--spc-4); color: var(--c-blue-700); & + .p-findItem__contents-content { border-top: solid .1rem var(--c-gray-300); }} .p-findItem__contents-content { padding-block: var(--spc-4); & > span { color: var(--c-blue-500); & + * { margin-top: var(--spc-1); } } & > p { color: var(--c-gray); & > span { color: var(--c-blue-700); } }} .p-findFrameworks { display: flex; flex-direction: column; gap: var(--spc-2); padding: var(--spc-4) var(--spc-5) var(--spc-5); background-color: var(--c-white); border-radius: var(--spc-3);} .p-findFrameworks-head { color: var(--c-blue-500);} .p-findFrameworks-content { display: flex; flex-wrap: wrap; gap: var(--spc-1);}