body {
    background: url(../img/recruit/bg1.jpg) repeat center top/100%
}

#page-header {
    padding: 68.3vw 0 20px;
    border: 0
}

#page-header .page-title h1 .ttl-jp {
    color: #fff
}

#page-header .breadcrumb {
    margin: 55.3vw 1px 0 0
}

#page-header .breadcrumb ul li {
    color: #fff
}

#page-header .breadcrumb ul li:not(:last-child):after {
    border-color: #fff
}

#page-header .img-parallax img {
	    object-position: bottom 0 left 40%;
}

#sec1 {
    padding: 63px 0 64px
}

#sec1 .set1 {
    margin-bottom: 41px
}

#sec1 .set1 h2 {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.4;
    margin-bottom: 17px
}

#sec1 .set1 .txt p:not(:last-child) {
    margin-bottom: 28px
}

#sec1 .set2 .js-scroll img {
    width: 53vw !important;
    margin: 0 7px
}

#sec2 {
    padding: 0 0 64px;
    position: relative
}

#sec2::before {
    content: "";
    background: #e9e1d8;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1
}

#sec2 .content .photo {
    margin: 0 -20px
}

#sec2 .content .gr-txt {
    margin-top: 43px
}

#sec2 .content .gr-txt .txt-sub {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: .1em;
    font-weight: 500;
    margin: 25px 0 15px
}

#sec2 .content .gr-txt .txt p:not(:last-child) {
    margin-bottom: 28px
}

#sec2 .content .gr-txt .athor {
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: .1em;
    font-weight: 500;
    margin-top: 16px
}

#sec4 {
    position: relative;
    padding: 62px 0 63px
}

#sec4::before {
    content: "";
    background: #e9e1d8;
    position: absolute;
    top: 76px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1
}

#sec4 h2 .ttl-eng {
    font-size: 48px
}

#sec4 .gr-btn {
    margin: 27px -10px 0
}

#sec4 .gr-btn li:not(:last-child) {
    margin-bottom: 15px
}

#sec4 .gr-btn li a {
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.4;
    display: block;
    padding: 20px 18px;
    background: #fff;
    color: #000;
    position: relative
}

#sec4 .gr-btn li a::after {
    content: "";
    background: url(../img/recruit/icon_arr1.png) no-repeat right center/100% auto;
    width: 26px;
    position: absolute;
    top: 0;
    right: 5%;
    bottom: 0
}

#sec5 {
    padding: 67px 0 81px
}

#sec5 .content .gr-txt {
    margin: 25px -20px 0
}

#sec5 .content .gr-txt .faq .toggle {
    border-bottom: 1px solid #c7beb2;
    color: #000
}

#sec5 .content .gr-txt .faq .toggle.active .toggle-link::after {
    background: url(../img/recruit/icon_plus_on.png) no-repeat 0 0/100% auto;
    height: 2px
}

#sec5 .content .gr-txt .faq .toggle:first-child {
    border-top: 1px solid #c7beb2
}

#sec5 .content .gr-txt .faq .toggle .toggle-link {
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.4;
    padding: 24px 59px 24px 20px;
    position: relative
}

#sec5 .content .gr-txt .faq .toggle .toggle-link::after {
    content: "";
    background: url(../img/recruit/icon_plus.png) no-repeat 0 0/100% auto;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 26px;
    transition: all .1s ease
}

#sec5 .content .gr-txt .faq .toggle .toggle-main {
    padding: 0 30px 24px 20px
}

@media screen and (min-width: 768px) {
    #page-header {
        padding: 210px 0 25px
    }
	
	#page-header .img-parallax img {
		    object-position: bottom 150px left 40%;
	}

    #page-header .wrap {
        max-width: 1263px
    }

    #page-header .page-title h1 .ttl-jp {
        margin: -41px 0 0 8px
    }

    #page-header .breadcrumb {
        margin: 297px 11px 0 0
    }

    #page-header .breadcrumb ul li {
        color: #fff
    }

    #page-header .breadcrumb ul li:not(:last-child)::after {
        border-color: #fff
    }

    #sec1 {
        padding: 80px 0 64px
    }

    #sec1 .set1 {
        margin-bottom: 39px;
        text-align: center
    }

    #sec1 .set1 .wrap {
        max-width: 1166px;
        padding: 0 20px
    }

    #sec1 .set1 h2 {
        font-size: 32px;
        margin-bottom: 15px
    }

    #sec1 .set1 .txt p:not(:last-child) {
        margin-bottom: 33px
    }

    #sec1 .set2 .js-scroll img {
        width: 379px !important
    }

    #sec2 {
        padding: 76px 0 98px
    }

    #sec2::before {
        top: 103px
    }

    #sec2 .wrap {
        max-width: 1240px;
        padding: 0 20px
    }

    #sec2 .content {
        display: flex;
        align-items: flex-start;
        flex-direction: row-reverse
    }

    #sec2 .content .photo {
        margin: 0 -116px 0 82px;
        flex: 1;
        height: 680px;
        position: relative
    }

    #sec2 .content .photo img {
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%
    }

    #sec2 .content .gr-txt {
        margin-top: 1px;
        width: 52.75%
    }

    #sec2 .content .gr-txt h2 {
        text-align: left
    }

    #sec2 .content .gr-txt h2 .ttl-jp {
        margin-top: -12px
    }

    #sec2 .content .gr-txt .txt {
        margin: 15px 0 16px
    }

    #sec2 .content .gr-txt .txt p:not(:last-child) {
        margin-bottom: 32px
    }

    #sec2 .content .gr-txt .athor {
        font-size: 32px;
        margin-top: 0
    }

    #sec4 {
        padding: 99px 0 140px
    }

    #sec4::before {
        top: 138px
    }

    #sec4 .wrap {
        padding: 0 20px;
        max-width: 1034px
    }

    #sec4 h2 .ttl-eng {
        font-size: 100px
    }

    #sec4 .gr-btn {
        margin: 47px auto 0;
        max-width: 994px
    }

    #sec4 .gr-btn li:not(:last-child) {
        margin-bottom: 24px
    }

    #sec4 .gr-btn li a {
        font-size: 20px;
        padding: 28px 21px;
        transition: .3s ease
    }

    #sec4 .gr-btn li a::after {
        right: 28px
    }

    #sec4 .gr-btn li a:hover {
        opacity: .8
    }

    #sec5 {
        padding: 100px 0 123px
    }

    #sec5 .wrap {
        max-width: 1240px;
        padding: 0 20px
    }

    #sec5 .content {
        display: flex
    }

    #sec5 .content h2 {
        text-align: left;
        width: 260px
    }

    #sec5 .content .gr-txt {
        margin: 0 0 0 45px;
        flex: 1
    }

    #sec5 .content .gr-txt .faq .toggle .toggle-link {
        font-size: 20px;
        padding: 24px 60px 24px 1px
    }

    #sec5 .content .gr-txt .faq .toggle .toggle-link::after {
        right: 2px
    }

    #sec5 .content .gr-txt .faq .toggle .toggle-main {
        padding: 6px 30px 24px 2px
    }

    #sec5 .content .gr-txt .btn-link {
        margin: 79px 0 0
    }
}

@media screen and (min-width: 768px)and (max-width: 1000px) {
    #sec2 .content {
        display: block
    }

    #sec2 .content .photo {
        margin: 0;
        flex: 1;
        height: auto
    }

    #sec2 .content .photo img {
        position: unset
    }

    #sec2 .content .gr-txt {
        width: auto;
        margin-top: 50px
    }

    #sec2 .content .gr-txt h2 {
        text-align: center
    }

    #sec5 .content {
        display: block
    }

    #sec5 .content h2 {
        width: auto;
        text-align: center
    }

    #sec5 .content .gr-txt {
        margin: 40px 30px 0
    }

    #sec5 .content .gr-txt .btn-link {
        margin-left: auto;
        margin-right: auto
    }
}

@media screen and (min-width: 768px) and (max-width: 820px) and (max-height: 1180px) {
	#page-header .img-parallax img {
		object-position: bottom 310px left 40%;	
	}
}