@charset "utf-8";

.titlewrap {
	h1 {
        .txtclip {
            background: #0A259A;
            background: linear-gradient(to right bottom,#0A259A 0%,#42BFEC 100%);
        }
        img {
            width:8em;
        }
	}
}

section {
    .wrap {
        .contents {
            h2 {
                font-size :2.8rem;
            }
        }
    }
}

#job {
    .wrap {
        overflow:clip;
        .contents {
            .requirement {
                display:grid;
                grid-template-columns:1fr auto 1fr;
                align-items:center;
                margin-bottom:60px;
                a {
                    font-size:1.8rem;
                    color:#1A80FF;
                    border:1px solid #1A80FF;
                    display:grid;
                    grid-template-columns:repeat(2,auto);
                    align-items:center;
                    justify-content:center;
                    grid-column-gap:.66em;
                    width:15em;
                    height:2.8em;
                    border-radius:4px;
                    padding-left:1em;
                    &::after {
                        content:'';
                        width:.66em;
                        height:.66em;
                        border-right:1px solid #1A80FF;
                        border-bottom:1px solid #1A80FF;
                        transform:scaleX(.6) rotate(45deg);
                    }
                }
                &::before,&::after {
                    content:'';
                    height:1px;
                    background-color:#1A80FF;
                }
                & + .detail {
                    margin-bottom:3em;
                    p {
                        &:not(:last-child) {
                            margin-bottom:1em;
                        }
                    }
                }
                & + h2 {
                    & + .detail {
                        margin-bottom:4em;
                        p {
                            &:not(:last-child) {
                                margin-bottom:1em;
                            }
                        }
                    }
                }
            }
            .tab {
                margin-bottom:90px;
            }
            .tab_content {
                .item {
                    &:not(:has(.contents_inner)),.contents_inner{
                        display:grid;
                        grid-template-columns:50% 1fr;
                        grid-column-gap:5%;
                        align-items:center;
                    }
                    &:has(.contents_inner) {
                        h3 {
                            font-size:2.1rem;
                            padding-bottom:.5em;
                            position:relative;
                            &::after {
                                content:'';
                                display:block;
                                width:calc(100% + 100px);
                                height:1px;
                                background-color:#1A80FF;
                                position:absolute;
                                left:-1em;
                                bottom:0;
                            }
                        }
                        & > h3 {
                            margin-top:3em;
                        }
                        ul {
                            display: grid;
                            grid-row-gap: .5em;
                            &:not(:last-child):not(:has( + .txtlink)) {
                                margin-bottom:1em;
                            }
                            li {
                                line-height: 2;
                                font-size: 1.6rem;
                                text-indent:-1em;
                                padding-left:1em;
                            }
                        }
                    }
                    .detail {
                        display:grid;
                        h2 {
                            font-size:2.1rem;
                            padding-bottom:.5em;
                            position:relative;
                            &::after {
                                content:'';
                                display:block;
                                width:calc(100% + 100px);
                                height:1px;
                                background-color:#1A80FF;
                                position:absolute;
                                left:-1em;
                                bottom:0;
                            }
                        }
                        p {
                            &:not(:last-child):not(:has( + .txtlink)) {
                                margin-bottom:1em;
                            }
                        }
                        ul {
                            display: grid;
                            grid-row-gap: .5em;
                            &:not(:last-child):not(:has( + .txtlink)) {
                                margin-bottom:1em;
                            }
                            li {
                                line-height: 2;
                                font-size: 1.6rem;
                                text-indent:-1em;
                                padding-left:1em;
                            }
                        }
                        .txtlink {
                            display:grid;
                            grid-template-columns:repeat(2,auto);
                            align-items:center;
                            grid-column-gap:.33em;
                            justify-self:end;
                            color:#1A80FF;
                            margin-top:3em;
                            &::after {
                                content:'>';
                                transform:translateY(-.1em);
                            }
                        }
                    }
                    .img {
                            margin-left:-100px;
                        img {
                            display:block;
                            border-radius:10px;
                            width:calc(100% + 100px);
                        }
                    }
                }
            }
        }
    }
}

#step {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:repeat(3,1fr);
                grid-column-gap:5%;
                li {
                    position:relative;
                    padding:75px 30px 45px;
                    border:1px solid #1A80FF;
                    border-radius:5px;
                    img {
                        position:absolute;
                        display:block;
                        width:40%;
                        aspect-ratio:1;
                        left:30px;
                        top:30px;
                        z-index:-1;
                        opacity:.33;
                    }
                    h3 {
                        font-size:2.8rem;
                        text-align:center;
                        margin-bottom:1em;
                    }
                    h4 {
                        font-size: 1.6rem;
                        font-weight: 600;
                        line-height: 1.5;
                        margin-bottom: .5em;
                    }
                }
            }
        }
    }
}

#desired {
    .wrap {
        overflow:clip;
        .contents {
            position:relative;
            padding:60px 0 0;
            &::before {
                content:'';
                display:block;
                width:calc(100% + 100px);
                height:100%;
                background-color:#F2F2F2;
                border-radius:10px;
                position:absolute;
                z-index:-1;
                top:0;
                left:-50px;
            }
            .contents_inner {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                align-items:start;
                padding-top:80px;
                &:not(:last-child) {
                    margin-bottom:60px;
                }
                &:nth-child(odd) {
                    .detail {
                        order:1;
                    }
                }
                .detail {
                    padding:40px;
                    background-color:#A2CBFF;
                    border-radius:10px;
                    overflow:hidden;
                    position:relative;
                    z-index:2;
                    aspect-ratio:1.25;
                    box-shadow: 0 3px 6px rgba(0,0,0,.15);
                    h3 {
                        font-size:2.8rem;
                        line-height:1.5;
                        color:#FFFFFF;
                        border-bottom:1px solid #FFFFFF;
                        margin-right:-40px;
                        margin-bottom:1em;
                        padding-bottom:.5em;
                    }
                    p {
                        color:#FFFFFF;
                        &.list {
                            text-indent:-1em;
                            padding-left:1em;
                        }
                    }
                    ul {
                        li {
                            color:#FFFFFF;
                            line-height: 2;
                            font-size: 1.6rem;
                            text-indent:-1em;
                            padding-left:1em;
                        }
                    }
                }
                .img {
                    margin:0 -100px;
                    position:relative;
                    z-index:1;
                    img {
                        display:block;
                        width:calc(100% + 200px);
                        border-radius:5px;
                        transform:translateY(-100px);
                        aspect-ratio:1.5;
                        object-fit:cover;
                    }
                }
            }
        }
    }
}

#requirements {
    .wrap {
        .contents {
            .show_rq {
                & + .requirements {
                    display:none;
                }
            }
            table {
                border-collapse:collapse;
                width:100%;
                tr {
                    border-bottom:1px solid #1A80FF;
                }
                th,td {
                    font-size:1.6rem;
                    line-height:1.7;
                    font-weight:500;
                    text-align:left;
                    padding:.66em 1em;
                    vertical-align:middle;
                    ul {
                        li {
                            font:inherit;
                            line-height:1.7;
                        }
                    }
                }
                th {
                    font-weight:600;
                    padding:.66em 2em;
                    width:14em;
                }
            }
        }
    }
}

@media (hover:hover) {
}

@media screen and (max-width:1200px){

}

@media screen and (max-width:1024px){
    
    #job {
        .wrap {
            overflow:clip;
            .contents {
                .tab_content {
                    .item {
                        &:not(:has(.contents_inner)),.contents_inner{
                            grid-template-columns:45% 1fr;
                        }
                        &:has(.contents_inner) {
                            h3 {
                                font-size:2.0rem;
                            }
                        }
                        .detail {
                            display:grid;
                            h2 {
                                font-size:2.0rem;
                            }
                        }
                        .img {
                                margin-left:-50px;
                            img {
                                width:calc(100% + 50px);
                            }
                        }
                    }
                }
            }
        }
    }
    
    #step {
        .wrap {
            .contents {
                .contents_inner {
                    grid-column-gap:3%;
                    li {
                        padding:75px 30px 30px;
                        h3 {
                            font-size:2.4rem;
                        }
                    }
                }
            }
        }
    }
    
    #desired {
        .wrap {
            .contents {
                .contents_inner {
                    .detail {
                        padding:30px 20px;
                        h3 {
                            font-size:2.4rem;
                            margin-right:-32px;
                            margin-bottom:.66em;
                            padding-bottom:.33em;
                        }
                    }
                }
            }
        }
    }
        
}

@media screen and (max-width:768px){
    
    section {
        .wrap {
            .contents {
                h2 {
                    font-size :2.0rem;
                }
            }
        }
    }
    
    #job {
        .wrap {
            .contents {
                .requirement {
                    margin-bottom:30px;
                    a {
                        font-size:1.6rem;
                        max-width:12em;
                    }
                    & + .detail {
                        margin-bottom:2em;
                    }
                    & + h2 {
                        & + .detail {
                            margin-bottom:3em;
                        }
                    }
                }
                .tab {
                    margin-bottom:50px;
                }
                .tab_content {
                    .item {
                        &:not(:has(.contents_inner)),.contents_inner{
                            display:grid;
                            grid-template-columns:1fr;
                            grid-column-gap:5%;
                            align-items:center;
                        }
                        &:has(.contents_inner) {
                            h3 {
                                font-size:1.8rem;
                                &::after {
                                    left:0;
                                    bottom:0;
                                }
                            }
                            & > h3 {
                                margin-top:1.5em;
                            }
                            ul {
                                li {
                                    font-size: 1.4rem;
                                }
                            }
                        }
                        .detail {
                            h2 {
                                font-size:1.8rem;
                                &::after {
                                    left:0;
                                    bottom:0;
                                }
                            }
                            ul {
                                li {
                                    font-size: 1.4rem;
                                }
                            }
                            .txtlink {
                                font-size:1.4rem;
                                margin-top:2em;
                            }
                        }
                        .img {
                            margin-left:0;
                            margin-bottom:20px;
                            img {
                                width:100%;
                            }
                        }
                    }
                }
            }
        }
    }
    
    #step {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns:1fr;
                    max-width:400px;
                    margin:0 auto;
                    grid-row-gap:20px;
                    li {
                        padding:50px 20px 30px;
                        img {
                            max-width:100px;
                            top:20px;
                            
                        }
                        h3 {
                            margin-bottom:1.5em;
                        }
                        h4 {
                            font-size: 1.5rem;
                        }
                    }
                }
            }
        }
    }
    
    #desired {
        .wrap {
            .contents {
                padding:30px 0;
                &::before {
                    width:100vw;;
                    height:calc(100% + 20px);
                    border-radius:0;
                    left:-20px;
                }
                .contents_inner {
                    grid-template-columns:1fr;
                    padding-top:0;
                    &:not(:last-child) {
                        margin-bottom:30px;
                    }
                    .detail {
                        order:1;
                        aspect-ratio:unset;
                        h3 {
                            font-size:2.0rem;
                        }
                        p {
                            font-size:1.4rem;
                        }
                        ul {
                            li {
                                font-size:1.4rem;
                            }
                        }
                    }
                    .img {
                        margin:0 auto 10px;
                        img {
                            width:100%;
                            transform:translateY(0);
                            border-radius:10px;
                        }
                    }
                }
            }
        }
    }
    
    #requirements {
        .wrap {
            .contents {
                table {
                    th,td {
                        font-size:1.4rem;
                        padding:.66em;
                        ul {
                            li {
                                font-size:1.4rem;
                            }
                        }
                    }
                    th {
                        padding:.66em 0;
                        width:5em;
                    }
                }
            }
        }
    }

}