.p-about { background-color: var(--c-gray-100);} .p-aboutContent { display: flex; flex-direction: column; gap: var(--spc-10);} .p-aboutContent__catch { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spc-2);} .p-aboutContent__intro { display: flex; flex-direction: column; gap: var(--spc-2); color: var(--c-black-600);} .p-aboutContent__serviceCard { background-color: var(--c-white); border-radius: var(--spc-3); overflow: hidden;} .p-aboutContent__serviceList { display: flex; flex-direction: column;} .p-aboutContent__serviceItem { display: flex; align-items: center; gap: var(--spc-8); padding: var(--spc-7) var(--spc-8); @media (max-width: 834px) { flex-direction: column; gap: var(--spc-2); align-items: flex-start; }} .p-aboutContent__serviceItem + .p-aboutContent__serviceItem { border-top: 1px solid var(--c-gray-200);} .p-aboutContent__serviceTitle { color: var(--c-black-600); white-space: nowrap; width: 12rem; flex-shrink: 0; @media (max-width: 834px) { width: auto; }} .p-aboutContent__serviceDesc { color: var(--c-black-600);} .p-aboutContent__outro { display: flex; flex-direction: column; gap: var(--spc-2); color: var(--c-black-600);} .p-aboutMessage { position: relative; padding-block: var(--spc-12); overflow: hidden; &::before { content: ''; position: absolute; inset: 0 0 0 var(--spc-15); border-radius: var(--spc-8) 0 0 var(--spc-8); background-color: var(--c-sand-200); z-index: -2; @media (max-width: 834px) { inset: 0; border-radius: var(--spc-4); } }} .p-aboutMessage { display: flex; flex-direction: column; gap: var(--spc-10);} .p-aboutMessage__heading { display: flex; flex-direction: column; align-items: flex-start;} .p-aboutMessage__body { display: flex; flex-direction: column; gap: var(--spc-3); color: var(--c-black-600);} .p-aboutMessage__body p span { display: inline-block; background-color: var(--c-sand-100); padding: var(--spc-1) var(--spc-2);} .p-aboutOverview { display: flex; flex-direction: column; gap: var(--spc-8);} .p-aboutOverview__heading { color: var(--c-black-600);} .p-aboutOverview__card { background-color: var(--c-white); border-radius: var(--spc-3); overflow: hidden;} .p-aboutOverview__list { display: flex; flex-direction: column;} .p-aboutOverview__item { display: flex; align-items: flex-start; gap: var(--spc-8); padding: var(--spc-7) var(--spc-8); @media (max-width: 834px) { flex-direction: column; gap: var(--spc-2); align-items: flex-start; }} .p-aboutOverview__item + .p-aboutOverview__item { border-top: 1px solid var(--c-gray-200);} .p-aboutOverview__term { color: var(--c-black-600); white-space: nowrap; width: 12rem; flex-shrink: 0; padding-top: 0.2rem; @media (max-width: 834px) { width: auto; }} .p-aboutOverview__desc { flex: 1; display: flex; flex-direction: column; gap: var(--spc-5); color: var(--c-black-600);} .p-aboutOverview__logo { width: 8rem;} .p-aboutOverview__map { width: 100%; aspect-ratio: 16 / 9;} .p-aboutOverview__map iframe { display: block; width: 100%; height: 100%;}