@charset "utf-8";

/*
 * File    : sub-careers.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * LIFE AT MEDIWHALE
 * OPEN ROLES
 * HOVER
 */



/* **************************************** *
 * LIFE AT MEDIWHALE
 * **************************************** */
body.page-template-life-at-mediwhale .main-container { background: var(--color-gray-100); }
body.page-template-life-at-mediwhale .jt-cta { min-height: 460rem; }


/* Mediwhalers */
.life-mediwhalers { padding-top: 120rem; }
.life-mediwhalers .article__section-desc { color: var(--color-gray-900); }
.life-mediwhalers__head { text-align: center; margin-bottom: 60rem; }
.life-mediwhalers__desc { margin-top: 24rem; color: var(--color-gray-800); }
.life-mediwhalers__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rem; }
.life-mediwhalers__list > li { background: var(--color-white); border-radius: 16rem; padding: 70rem 60rem 90rem; }
.life-mediwhalers__icon { width: 160rem; }
.life-mediwhalers__icon .jt-lazyload { padding-top: 100%; }
.life-mediwhalers__content { margin-top: 40rem; }
.life-mediwhalers__content b { display: block; } 
.life-mediwhalers__content p { color: var(--color-gray-900); margin-top: 16rem; }

/* Our team */
.life-our-team.article__section { padding-top: 0; }
.life-our-team__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60rem 20rem; }
.life-our-team__list > li > a { display: block; }
.life-our-team__list > li:nth-child(n+4) { display: none; }
.life-our-team__thumb { border-radius: 16rem; overflow: hidden; }
.life-our-team__thumb .jt-lazyload { padding-top: 68.42%; transition: scale .6s; }
.life-our-team__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.life-our-team__content { margin-top: 30rem; }
.life-our-team__title { padding-bottom: 4rem; color: var(--color-black); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.life-our-team__title > span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2rem; text-underline-offset: 8rem; transition: text-decoration-color .3s; }
.life-our-team__desc { color: var(--color-gray-700); margin-top: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life-our-team__control { font-size: 0; text-align: center; margin-top: 80rem; display: none; }
.life-our-team:has(.life-our-team__list > li:nth-child(n+4)) .life-our-team__control { display: block; }

.life-our-team--open .life-our-team__list > li:nth-child(n+4) { display: block; }
.life-our-team--open .life-our-team__control { display: none !important; }

/* CTA */
body.page-template-life-at-mediwhale .jt-cta { padding: 112rem 0; }



/* **************************************** *
 * OPEN ROLES
 * **************************************** */
.open-roles__list > li + li { margin-top: 24rem; }
.open-roles__list > li > a { display: block; background: var(--color-gray-200); border-radius: 16rem; padding: 40rem 60rem; transition: background .3s; }
.open-roles__list-title { color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.open-roles__list-category { position: relative; top: -2rem; margin-right: 8rem; background: var(--color-gray-300); color: var(--color-gray-900); border-radius: 8rem; padding: 6rem 12rem; vertical-align: middle; transition: background .3s; }
.open-roles__list-desc { margin-top: 20rem; color: var(--color-gray-900); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* LIFE AT MEDIWHALE */
    .life-our-team__list > li > a:hover .life-our-team__title > span { text-decoration-color: currentColor; }
    .life-our-team__list > li > a:hover .life-our-team__thumb .jt-lazyload { scale: 1.05; }

    /* OPEN ROLES */
    .open-roles__list > li > a:hover { background: var(--color-gray-300); }
    .open-roles__list > li > a:hover .open-roles__list-category { background: var(--color-gray-400); }

}