@charset "utf-8";


/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    #top-mv {
        margin: calc( 100vw * 144 / 780 ) auto 0;
        padding: 0;
        width: 100%;
    }
    #top-mv .mv-bg {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1560 / 2200;
    }
    #top-mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #top-mv .mv-box {
        position: absolute;
        bottom: 5%;
        left: 5%;
        margin: 0;
        padding: 0;
        width: 90%;
        color: #fff;
    }
    #top-mv .mv-box .txt1 {
        margin: 0;
        font-size: 7.2vw;
        font-weight: 700;
        line-height: calc( 68 / 58 );
    }
    #top-mv .mv-box .txt2 {
        margin: 0.5em 0 0;
        font-size: 5.2vw;
        font-weight: 700;
        line-height: calc( 77 / 33 );
    }
    #top-mv .mv-box .txt3 {
        margin: 0;
        font-size: 4.0vw;
        font-weight: 400;
        line-height: calc( 46 / 32 );
    }
    #top-mv .mv-box .mv-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 4.0vw auto 0;
        width: 80%;
        height: auto;
        aspect-ratio: 400 / 76;
        font-size: 4.0vw;
        font-weight: 500;
        line-height: 1.0;
        background: #fff;
        border-radius: 4.0em;
    }
    #top-mv .mv-box .mv-btn::after {
        position: absolute;
        content: "";
        top: calc( 50% - 1.05em );
        right: 1.0em;
        width: 2.1em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-cyan.svg) no-repeat center / contain;
    }

    #top-aboutus {
        margin: 0 auto;
        padding: 0 5% calc( 16.0vw + 100vw * 500 / 780 );
        padding: 0 5%;
        width: 100%;
        background: url(../images/top-pic01.jpg) no-repeat 10% 0% / 160% auto;
    }
    #top-aboutus > h2 {
        margin: 0;
        padding: 80vw 0 0;
    }
    #top-aboutus > h2 span:nth-of-type(1) {
        position: relative;
        margin: 0;
        display: block;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: left;
    }
    #top-aboutus > h2 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #e2e2e2;
    }
    #top-aboutus > h2 span:nth-of-type(2) {
        margin: 8.0vw 0 0;
        padding: 0;
        display: block;
        font-size: 10.0vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #top-aboutus > h2 span:nth-of-type(2)::first-letter {
        color: #5aa7d1;
    }
    #top-aboutus > p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: 3.6vw;
        font-weight: 400;
        line-height: calc( 40 / 16 );
    }

    .about-btm-pic {
        display: flex;
        align-items: center; 
        width: 100%;
        height: 504px;
        overflow: hidden;
		display: none;
    }
    .about-btm-pic figure {
        translate: 80vw 0;
        display: flex;
        width: 2814px;
        max-width: 2814px;
        height: 504px;
        animation: anim-top-pic 20.0s linear infinite;
    }
    .about-btm-pic figure img {
        width: 2814px;
        max-width: 2814px;
        height: 504px;
    }
    */

    .top-grid {
        margin: 12.0vw auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4.0vw 0;
    }
    .top-grid .top-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4.0vw 0;
        margin: 0;
        padding: 4.0vw;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 2.0vw;
    }
    .top-grid .top-item .pic {
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 288 / 216;
    }
    .top-grid .top-item .pic img {
        margin: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1.0vw;
    }
    .top-grid .top-item .top-info {
        margin: 0;
        width: 100%;
    }
    .top-grid .top-item .top-info h3 {
        margin: 0;
        color: #5aa7d1;
        font-size: 7.2vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: calc( 37 / 40 );
    }
    .top-grid .top-item .top-info p {
        margin: 0;
        font-size: 3.6vw;
        font-weight: 500;
    }
    .top-grid .top-item .top-info div {
        position: relative;
        display: grid;
        place-items: center;
        margin: 4.0vw auto 0;
        width: 90%;
        height: auto;
        aspect-ratio: 492 / 88;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 500;
        background: #4c7d97;
        border-radius: 4.0em;
    }
    .top-grid .top-item .top-info div::after {
        position: absolute;
        content: "";
        top: calc( 50% - 1.05em );
        right: 1.0em;
        width: 2.1em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
    }

    #top-service {
        margin: 12.0vw auto 0;
        padding: 12.0vw 5%;
        width: 100%;
        background: #f8fafc;
        border-radius: 20.0vw 0 0 0;
    }
    #top-service > h2 {
        margin: 0;
        padding: 0;
    }
    #top-service > h2 span:nth-of-type(1) {
        position: relative;
        margin: 0;
        display: block;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: left;
    }
    #top-service > h2 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #e2e2e2;
    }
    #top-service > h2 span:nth-of-type(2) {
        margin: 8.0vw 0 0;
        padding: 0;
        display: block;
        font-size: 10.0vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #top-service > h2 span:nth-of-type(2)::first-letter {
        color: #5aa7d1;
    }
    #top-service > .service-flex {
        margin: 8.0vw auto;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8.0vw 0;
    }
    #top-service > .service-flex .service-l {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #top-service > .service-flex .service-l h3 {
        margin: 0;
        padding: 0;
        font-size: 7.2vw;
        font-weight: 700;
        line-height: calc( 65 / 48 );
    }
    #top-service > .service-flex .service-l h3 span {
        color: #5aa7d1;
    }
    #top-service > .service-flex .service-r {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #top-service > .service-flex .service-r p {
        margin: 0;
        padding: 0;
        font-size: 3.6vw;
        font-weight: 400;
        line-height: calc( 55 / 32 );
    }

    #top-recruit {
        margin: 0 auto;
        padding: 68.0vw 5% 12.0vw;
        width: 100%;
        background: url(../images/top-pic07-sp.jpg) no-repeat center top / 100% auto;
    }
    #top-recruit > h2 {
        margin: 0;
        padding: 0;
        color: #fff;
    }
    #top-recruit > h2 span:nth-of-type(1) {
        position: relative;
        margin: 0;
        padding: 0;
        display: block;
        font-size: 6.0vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #top-recruit > h2 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #fff;
    }
    #top-recruit > h2 span:nth-of-type(2) {
        margin: 8.0vw 0 0;
        display: block;
        font-size: 6.0vw;
        font-weight: 700;
        text-align: left;
        line-height: calc( 62 / 48 );
    }
    #top-recruit > p {
        margin: 1.0em 0 0;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 55 / 32 );
    }
    #top-recruit > .recruit-grid {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4.0vw 0;
    }
    #top-recruit > .recruit-grid .recruit-item {
        display: block;
        margin: 0;
        padding: 3.0vw;
        width: 100%;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 2.0vw;
    }
    #top-recruit > .recruit-grid .recruit-item .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 352 / 198;
    }
    #top-recruit > .recruit-grid .recruit-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1.0vw;
    }
    #top-recruit > .recruit-grid .recruit-item div {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0 2.0vw;
    }
    #top-recruit > .recruit-grid .recruit-item div::after {
        content: "";
        width: 2.1em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-cyan.svg) no-repeat center / contain;
    }

    #top-news {
        margin: 0 auto;
        padding: 8.0vw 5% 12.0vw;
        width: 100%;
    }
    #top-news > h2 {
        margin: 0;
        padding: 0;
    }
    #top-news > h2 span:nth-of-type(1) {
        position: relative;
        margin: 0;
        display: block;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: left;
    }
    #top-news > h2 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #e2e2e2;
    }
    #top-news > h2 span:nth-of-type(2) {
        margin: 8.0vw 0 0;
        padding: 0;
        display: block;
        font-size: 8.0vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #top-news > h2 span:nth-of-type(2)::first-letter {
        color: #5aa7d1;
    }
    #top-news > h3 {
        margin: 0.5em 0;
        font-size: 6.0vw;
        font-weight: 700;
        text-align: left;
    }
    #top-news > p {
        margin: 0;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 55 / 32 );
    }
    #top-news > .news-tab {
        margin: 8.0vw 0 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 2.0vw 2.0vw;
    }
    #top-news > .news-tab label {
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0.4em 2.0em;
        width: max-content;
        height: auto;
        font-size: 3.6vw;
        font-weight: 500;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 4.0em;
    }
    #top-news > .news-tab label:has(input[type="radio"]:checked) {
        position: relative;
        color: #fff;
        background: #5aa7d1;
        border: 1px solid #5aa7d1;
    }
    #top-news > .news-tab label input[type="radio"] {
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 1px;
        opacity: 0;
    }
    #top-news > .news-tab:has(#news-tab-1:checked) ~ .news-grid[data-target="news-tab-1"] {
        display: grid;
    }
    #top-news > .news-tab:has(#news-tab-2:checked) ~ .news-grid[data-target="news-tab-2"] {
        display: grid;
    }
    #top-news > .news-tab:has(#news-tab-3:checked) ~ .news-grid[data-target="news-tab-3"] {
        display: grid;
    }
    #top-news > .news-grid {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        display: none;
        grid-template-columns: 1fr;
        gap: 4.0vw 0;
    }
    #top-news > .news-grid .news-item {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #top-news > .news-grid .news-item .pic {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 400 / 225;
    }
    #top-news > .news-grid .news-item .pic figure {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #top-news > .news-grid .news-item .pic figure img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    #top-news > .news-grid .news-item .pic .cat {
        position: absolute;
        top: 5%;
        left: 5%;
        width: max-content;
        margin: 0;
        padding: 0.5em 1.0em;
        color: #fff;
        font-size: 2.8vw;
        font-weight: 500;
        background: #5aa7d1;
        border-radius: 4.0em;
    }
    #top-news > .news-grid .news-item .title {
        margin: 0.8em 0 0;
        padding: 0;
        width: 100%;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: left;
    }
    #top-news > .news-grid .news-item p {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 22 / 16 );
    }
    #top-news > .news-grid .news-item .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 2.8vw;
        font-weight: 400;
        text-align: left;
        line-height: 1.0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 1.0vw;
    }
    #top-news > .news-grid .news-item .date::before {
        content: "";
        margin: 0;
        padding: 0;
        width: 1.5em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-clock-cyan.svg) no-repeat center / contain;
    }
    #top-news > .news-grid .btn-all {
        display: block;
1        margin: 8.0vw 0 0;
        padding: 0;
        width: 100%;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0 2.0vw;
    }
    #top-news > .news-grid .btn-all::after {
        content: "";
        width: 2.1em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-cyan.svg) no-repeat center / contain;
    }

}


/**
 * PC用設定
 */
@media ( width >= 768px ) {

    #top-mv {
        margin: 144px auto 0;
        padding: 0;
        width: 100%;
    }
    #top-mv .mv-bg {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 800;
    }
    #top-mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #top-mv .mv-box {
        position: absolute;
        top: 50%;
        left: max( 5%, calc( 50vw - 640px ) );
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        width: 90%;
        max-width: 1280px;
        color: #fff;
    }
    #top-mv .mv-box .txt1 {
        margin: 0;
        font-size: calc( 58 * min( 90vw, 1280px ) / 1280 );
        font-weight: 700;
        line-height: calc( 68 / 58 );
    }
    #top-mv .mv-box .txt2 {
        margin: 0.5em 0 0;
        font-size: calc( 33 * min( 90vw, 1280px ) / 1280 );
        font-weight: 700;
        line-height: calc( 77 / 33 );
    }
    #top-mv .mv-box .txt3 {
        margin: 0;
        font-size: calc( 16 * min( 90vw, 1280px ) / 1280 );
        font-weight: 400;
        line-height: calc( 33 / 16 );
    }
    #top-mv .mv-box .mv-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: calc( 48 * min( 90vw, 1280px ) / 1280 ) 0 0;
        width: calc( 400 * min( 90vw, 1280px ) / 1280 );
        height: auto;
        aspect-ratio: 400 / 76;
        font-size: calc( 19 * min( 90vw, 1280px ) / 1280 );
        font-weight: 500;
        line-height: 1.0;
        background: #fff;
        border-radius: 4.0em;
    }
    #top-mv .mv-box .mv-btn::after {
        position: absolute;
        content: "";
        top: calc( 50% - 1.05em );
        right: 1.0em;
        width: 2.1em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-cyan.svg) no-repeat center / contain;
    }

    #top-aboutus {
        margin: 0 auto;
        padding: 0 max( 5%, calc( 50vw - 640px ) ) calc( 160px + 100vw * 500 / 1920 );
        padding: 0 max( 5%, calc( 50vw - 640px ) );
        width: 100%;
        background: url(../images/top-pic01.jpg) no-repeat 110% 0% / 60% auto;
    }
    #top-aboutus > h2 {
        margin: 0;
        padding: 80px 0 0;
    }
    #top-aboutus > h2 span:nth-of-type(1) {
        position: relative;
        margin: 0;
        display: block;
        font-size: 19px;
        font-weight: 500;
        text-align: left;
    }
    #top-aboutus > h2 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #e2e2e2;
    }
    #top-aboutus > h2 span:nth-of-type(2) {
        margin: 40px 0 0;
        padding: 0;
        display: block;
        font-size: 70px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.01;
    }
    #top-aboutus > h2 span:nth-of-type(2)::first-letter {
        color: #5aa7d1;
    }
    #top-aboutus > p {
        margin: 2.0em 0 0;
        padding: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: calc( 40 / 16 );
    }

    #about-btm {
        margin: 0;
        margin: 0 0 calc( ( 100vw + 2814px ) * 0.5 );
        padding: 0 0 calc( ( 100vw + 2814px ) * 0.25 );
        padding: 0;
        width: 100%;
    }
    .about-btm-pic {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center; 
        width: 100%;
        height: 504px;
        /* overflow: hidden; */
    }
    .about-btm-pic figure {
        margin: 0;
        padding: 0;
        translate: 100vw 0;
        display: flex;
        width: 2814px;
        max-width: 2814px;
        height: 504px;
        /* aspect-ratio: 5628 / 1008; */
    }
    .about-btm-pic figure img {
        width: 2814px;
        max-width: 2814px;
        height: 504px;
    }

    .top-grid {
        margin: 80px auto 0;
        padding: 0;
        width: 100%;
        max-width: 1232px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 32px;
    }
    .top-grid .top-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 32px;
        margin: 0;
        padding: 24px;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 16px;
    }
    .top-grid .top-item .pic {
        margin: 0;
        width: 55%;
        height: auto;
        aspect-ratio: 288 / 216;
    }
    .top-grid .top-item .pic img {
        margin: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    .top-grid .top-item .top-info {
        margin: 0;
        width: 45%;
    }
    .top-grid .top-item .top-info h3 {
        margin: 0;
        color: #5aa7d1;
        font-size: 40px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: calc( 37 / 40 );
    }
    .top-grid .top-item .top-info p {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
    }
    .top-grid .top-item .top-info div {
        position: relative;
        display: grid;
        place-items: center;
        margin: 16px 0 0;
        width: 100%;
        height: auto;
        aspect-ratio: 224 / 44;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        background: #4c7d97;
        border-radius: 4.0em;
    }
    .top-grid .top-item .top-info div::after {
        position: absolute;
        content: "";
        top: calc( 50% - 1.05em );
        right: 1.0em;
        width: 2.1em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-white.svg) no-repeat center / contain;
    }

    #top-service {
        margin: 16.0vw auto 0;
        padding: 120px max( 5%, calc( 50vw - 640px ) );
        width: 100%;
        background: #f8fafc;
        border-radius: 160px 0 0 0;
    }
    #top-service > h2 {
        margin: 0;
        padding: 0;
    }
    #top-service > h2 span:nth-of-type(1) {
        position: relative;
        margin: 0;
        display: block;
        font-size: 19px;
        font-weight: 500;
        text-align: left;
    }
    #top-service > h2 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #e2e2e2;
    }
    #top-service > h2 span:nth-of-type(2) {
        margin: 40px 0 0;
        padding: 0;
        display: block;
        font-size: 70px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #top-service > h2 span:nth-of-type(2)::first-letter {
        color: #5aa7d1;
    }
    #top-service > .service-flex {
        margin: 48px auto 64px;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #top-service > .service-flex .service-l {
        margin: 0;
        padding: 0;
        width: 440px;
    }
    #top-service > .service-flex .service-l h3 {
        margin: 0;
        padding: 0;
        font-size: 48px;
        font-weight: 700;
        line-height: calc( 65 / 48 );
    }
    #top-service > .service-flex .service-l h3 span {
        color: #5aa7d1;
    }
    #top-service > .service-flex .service-r {
        margin: 0;
        padding: 0;
        width: calc( 100% - 440px - 90px );
    }
    #top-service > .service-flex .service-r p {
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: calc( 40 / 16 );
    }

    #top-recruit {
        margin: 0 auto;
        padding: 80px max( 5%, calc( 50vw - 640px ) ) 60px;
        width: 100%;
        background: url(../images/top-pic07-pc.jpg) no-repeat center top / 100% auto;
    }
    #top-recruit > h2 {
        margin: 0;
        padding: 0;
        color: #fff;
    }
    #top-recruit > h2 span:nth-of-type(1) {
        position: relative;
        margin: 0;
        padding: 0;
        display: block;
        font-size: 28px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #top-recruit > h2 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #fff;
    }
    #top-recruit > h2 span:nth-of-type(2) {
        margin: 40px 0 0;
        display: block;
        font-size: 48px;
        font-weight: 700;
        text-align: left;
        line-height: calc( 62 / 48 );
    }
    #top-recruit > p {
        margin: 1.0em 0 0;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 40 / 16 );
    }
    #top-recruit > .recruit-grid {
        margin: 72px auto 0;
        padding: 0;
        width: 100%;
        max-width: 1232px;
        display: grid;
        grid-template-columns: repeat( 3, 1fr );
        gap: 0 40px;
    }
    #top-recruit > .recruit-grid .recruit-item {
        display: block;
        margin: 0;
        padding: 16px;
        width: 100%;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 16px;
    }
    #top-recruit > .recruit-grid .recruit-item .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 352 / 198;
    }
    #top-recruit > .recruit-grid .recruit-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    #top-recruit > .recruit-grid .recruit-item div {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 19px;
        font-weight: 500;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0 16px;
    }
    #top-recruit > .recruit-grid .recruit-item div::after {
        content: "";
        width: 2.1em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-cyan.svg) no-repeat center / contain;
    }

    #top-news {
        margin: 0 auto;
        padding: 60px max( 5%, calc( 50vw - 640px ) ) 80px;
        width: 100%;
    }
    #top-news > h2 {
        margin: 0;
        padding: 0;
    }
    #top-news > h2 span:nth-of-type(1) {
        position: relative;
        margin: 0;
        display: block;
        font-size: 19px;
        font-weight: 500;
        text-align: left;
    }
    #top-news > h2 span:nth-of-type(1)::after {
        position: absolute;
        content: "";
        top: calc( 100% + 0.8em );
        left: 0;
        width: 88px;
        height: 1px;
        background: #e2e2e2;
    }
    #top-news > h2 span:nth-of-type(2) {
        margin: 40px 0 0;
        padding: 0;
        display: block;
        font-size: 70px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #top-news > h2 span:nth-of-type(2)::first-letter {
        color: #5aa7d1;
    }
    #top-news > h3 {
        margin: 0.5em 0;
        font-size: 33px;
        font-weight: 700;
        text-align: left;
    }
    #top-news > p {
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }
    #top-news > .news-tab {
        margin: 48px 0 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 16px;
    }
    #top-news > .news-tab label {
        display: grid;
        place-items: center;
        margin: 0;
        width: 296px;
        height: auto;
        aspect-ratio: 296 / 56;
        font-size: 16px;
        font-weight: 500;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 4.0em;
    }
    #top-news > .news-tab label:has(input[type="radio"]:checked) {
        position: relative;
        color: #fff;
        background: #5aa7d1;
        border: 1px solid #5aa7d1;
    }
    #top-news > .news-tab label input[type="radio"] {
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 1px;
        opacity: 0;
    }
    #top-news > .news-tab:has(#news-tab-1:checked) ~ .news-grid[data-target="news-tab-1"] {
        display: grid;
    }
    #top-news > .news-tab:has(#news-tab-2:checked) ~ .news-grid[data-target="news-tab-2"] {
        display: grid;
    }
    #top-news > .news-tab:has(#news-tab-3:checked) ~ .news-grid[data-target="news-tab-3"] {
        display: grid;
    }
    #top-news > .news-grid {
        margin: 72px auto 0;
        padding: 0;
        width: 100%;
        max-width: 1232px;
        display: none;
        grid-template-columns: repeat( 3, 1fr );
        gap: 0 40px;
    }
    #top-news > .news-grid .news-item {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #top-news > .news-grid .news-item .pic {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 400 / 225;
    }
    #top-news > .news-grid .news-item .pic figure {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #top-news > .news-grid .news-item .pic figure img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
    #top-news > .news-grid .news-item .pic .cat {
        position: absolute;
        top: 5%;
        left: 5%;
        width: max-content;
        margin: 0;
        padding: 0.5em 1.0em;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        background: #5aa7d1;
        border-radius: 4.0em;
    }
    #top-news > .news-grid .news-item .title {
        margin: 0.8em 0 0;
        padding: 0;
        width: 100%;
        font-size: 19px;
        font-weight: 500;
        text-align: left;
    }
    #top-news > .news-grid .news-item p {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 22 / 16 );
    }
    #top-news > .news-grid .news-item .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 13px;
        font-weight: 400;
        text-align: left;
        line-height: 1.0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0 8px;
    }
    #top-news > .news-grid .news-item .date::before {
        content: "";
        margin: 0;
        padding: 0;
        width: 1.5em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-clock-cyan.svg) no-repeat center / contain;
    }
    #top-news > .news-grid .btn-all {
        grid-column: span 3;
        display: block;
        margin: 40px 0 0;
        padding: 0;
        width: 100%;
        font-size: 19px;
        font-weight: 500;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0 16px;
    }
    #top-news > .news-grid .btn-all::after {
        content: "";
        width: 2.1em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-r-cyan.svg) no-repeat center / contain;
    }

}

@keyframes anim-top-pic {
    0%   { transform: translateX( 100vw ); }
    100% { transform: translateX( -100% ); }
}