@charset "UTF-8";

.un-about { position: relative; }

.un-about__inner { max-width: 1920px; margin: 0 auto; }

.un-about__body { margin: 0 calc(50% - 50vw); overflow: hidden; position: relative; padding-top: 80px; background-color: var(--COLOR_BACKGROUND_BASE); }

.un-about__bgLineWrap { max-width: 1920px; width: 137vw; max-height: 854px; height: 60vw; display: block; position: absolute; -webkit-transform: translate(-50%, -50%) scale(1.03); transform: translate(-50%, -50%) scale(1.03); top: 59%; left: 50%; }

.un-about__bgLineWrap::after { content: ""; height: 100%; position: absolute; left: 0; top: 0; background-color: var(--COLOR_BACKGROUND_BASE); }

.un-about__bgLineWrap.is-init::after { width: 100%; transition: width 1s; }

.un-about__bgLineWrap.is-shown::after { width: 0; }

.un-about__layout { display: grid; grid-template-rows: auto 32px auto; }

.un-about__layout.is-init { opacity: 0; transition: opacity 1s; }

.un-about__layout.is-shown { transition-delay: 1s; opacity: 1; }

.un-about__contents { grid-column: 1/4; grid-row: 1 / 3; }

.un-about__contentsMain { position: relative; background-color: #fff; border-radius: 25em; aspect-ratio: 1 / 1; }

.un-about__contentsInner { position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 54%; left: 50%; width: 100%; padding: 24px; text-align: center; }

.un-about__heading { display: flex; flex-direction: column; color: var(--COLOR_BRAND_PRIMARY); font-weight: normal; }

.un-about__headingMain { font-size: 2.5rem; line-height: 1; }

.un-about__headingSub { font-size: 0.875rem; font-weight: bold; line-height: 1.928571; }

.un-about__text { line-height: 1.75; font-weight: bold; margin-top: 8px; }

.un-about__media { grid-column: 1/4; grid-row: 2/4; z-index: var(--Z_INDEX-OVERLAP_1); }

.un-recruit { padding: 110px 24px; margin-top: 80px; background-image: url(/images/img-recruit-sp.webp); background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center; color: #fff; border-radius: var(--BORDER_RADIUS); }

.un-recruit__heading { display: flex; flex-direction: column; justify-content: center; align-items: center; }

.un-recruit__headingSub { font-size: 0.875rem; font-weight: bold; line-height: 1.9285; }

.un-recruit__headingMain { font-family: var(--FONT_FAMILY_HEADING); text-transform: capitalize; font-size: 2.5rem; font-weight: normal; line-height: 1.5; }

@media (min-width: 768px) { .un-about__body { margin: 0 calc(50% - 50vw) 0; padding: 166px 40px clamp(40px, 5vw, 72px); } .un-about__main { max-width: 1300px; width: 100%; margin-inline: auto; } .un-about__layout { grid-template-rows: 200px auto 52px; grid-template-columns: calc(53.0769230769% - 105px) 105px calc(56.6923076923% - 105px); } .un-about__contents { grid-column: 1/3; grid-row: 1 / 3; } .un-about__headingMain { font-size: clamp(1.75rem, 4.61538vw, 3.75rem); } .un-about__text { font-size: clamp(0.875rem, 2.15384vw, 1.75rem); line-height: 2.142857; } .un-about__media { grid-column: 2 / 4; } .un-recruit { margin-top: 120px; background-image: url(/images/img-recruit.webp); } .un-recruit__headingMain { font-size: 3rem; line-height: 1.25; } }

@media (max-width: 767px) { .un-about__bgLineWrap { display: none; } .un-about__bgLine { display: none; } .un-about__contentsMain { max-width: 450px; margin-inline: auto; } }