@charset "UTF-8";

.front-page-wrapper {}


/* ---------------------------------------- */
/* .page-header */
/* ---------------------------------------- */

.front-page-wrapper .page-header {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 76px 0 50px;
    min-height: 100vh;
}
.front-page-wrapper .page-header .mv-slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.front-page-wrapper .page-header .mv-slider .slick-list {
    height: 100%;
}
.front-page-wrapper .page-header .mv-slider .slick-track {
    height: 100%;
}
.front-page-wrapper .page-header .mv-slider__item {
    width: 100%;
    height: 100%;
}
.front-page-wrapper .page-header .mv-slider__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 991px) {
    .front-page-wrapper .page-header {
        display: block;
        padding: 130px 0 50px;
    }
}

/* .box-text */
.front-page-wrapper .page-header .box-text {
    position: relative;
    display: block;
    width: fit-content;
    padding: 0.5em 0;
    margin-bottom: 0.5em;
}
.front-page-wrapper .page-header .box-text:last-child {
    margin-bottom: 0;
}
.front-page-wrapper .page-header .box-text::before {
    content: "";
    position: absolute;
    top: 0;
    right: -0.75em;
    bottom: 0;
    left: -50px;
    z-index: -1;
}
.front-page-wrapper .page-header .mv-title-wrap {
    position: relative;
    padding: 200px 0;
    z-index: 1;
}
.front-page-wrapper .page-header .mv-title-wrap .mv-title {
    font-size: 48px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 0.5em;
}
.front-page-wrapper .page-header .mv-title-wrap .mv-title .box-text::before {
    background-color: var(--blue);
}
.front-page-wrapper .page-header .mv-title-wrap .mv-text {
    font-size: 24px;
    font-weight: 500;
    color: var(--blue);
}
.front-page-wrapper .page-header .mv-title-wrap .mv-text .box-text::before {
    background-color: var(--white);
}
@media (max-width: 767px) {
    .front-page-wrapper .page-header .mv-title-wrap .mv-title {
        font-size: 28px;
        letter-spacing: 0;
        margin-bottom: .75em;
    }
    .front-page-wrapper .page-header .box-text {
        padding: 0.6em 0;
        margin-bottom: 0.6em;
    }
    .front-page-wrapper .page-header .mv-title-wrap .mv-text {
        font-size: 16px;
    }
}


/* ---------------------------------------- */
/* section 全般 */
/* ---------------------------------------- */

.front-page-wrapper section .sec-title-wrap {
    margin-bottom: 70px;
}
.front-page-wrapper section .sec-title-wrap .title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0;
    color: var(--dark-blue);
}
.front-page-wrapper section .sec-body p {
    line-height: 2;
}
@media (max-width: 767px) {
    .front-page-wrapper section .sec-title-wrap {
        margin-bottom: 60px;
    }
    .front-page-wrapper section .sec-title-wrap .title {
        font-size: 24px;
        line-height: 2;
        letter-spacing: 0;
    }
}


/* ---------------------------------------- */
/* .about-sec */
/* ---------------------------------------- */

.front-page-wrapper .about-sec {
    position: relative;
    padding: 100px 0 calc(9.9vw + 15px);
    color: var(--white);
    background-color: var(--blue);
    background-image: url(../img/top/about_bg_image.png);
    background-repeat: no-repeat;
    background-position: 62% 50%;
    background-size: 1022px;
}
.front-page-wrapper .about-sec::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: auto;
    aspect-ratio: 9.9;
    background-image: url(../img/top/polygon4.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
}
.front-page-wrapper .about-sec > * {
    position: relative;
}
.front-page-wrapper .about-sec .sec-title-wrap .title {
    font-weight: 700;
    color: var(--white);
}
.front-page-wrapper .about-sec .sec-body {
    font-size: 18px;
}
.front-page-wrapper .about-sec .sec-body .img-wrap {
    position: relative;
}
.front-page-wrapper .about-sec .sec-body .img-wrap img {
    display: block;
    position: absolute !important;
    right: 30px;
    transform: translateY(-22%);
    margin-left: auto;
    z-index: 1;
}
@media (min-width: 768px) {
    .front-page-wrapper .about-sec .sec-body .text-wrap {
        width: 50%;
        max-width: 513px;
    }
    .front-page-wrapper .about-sec .sec-body .img-wrap {
        width: 50%;
        margin-left: auto;
    }
    .front-page-wrapper .about-sec .sec-body .img-wrap img {
        max-width: 90%;
    }
}
@media (min-width: 1200px) {
    .front-page-wrapper .about-sec .sec-body .img-wrap img {
        top: -50px;
    }
}
@media (max-width: 767px) {
    .front-page-wrapper .about-sec {
        padding: 100px 0 calc(5.4vw + 125px);
        background-size: 643px;
        background-position: 30% 63%;
    }
    .front-page-wrapper .about-sec::after {
        aspect-ratio: 5.4;
        background-image: url(../img/top/polygon4-sp.svg);
    }
    .front-page-wrapper .about-sec .sec-body {
        font-size: 16px;
    }
    .front-page-wrapper .about-sec .sec-body .img-wrap {
        margin-top: 90px;
        margin-bottom: -10px;
    }
    .front-page-wrapper .about-sec .sec-body .img-wrap img {
        right: 0px;
        width: 74%;
        max-width: 400px;
    }
}


/* ---------------------------------------- */
/* .service-sec */
/* ---------------------------------------- */

.front-page-wrapper .service-sec {
    padding: 300px 0 180px;
    overflow: hidden;
}
.front-page-wrapper .service-sec .sec-header {}
.front-page-wrapper .service-sec .sec-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.front-page-wrapper .service-sec .sec-title-wrap .title {}
.front-page-wrapper .service-sec .sec-title-wrap .arrow-link {
    color: var(--dark-blue);
}
.front-page-wrapper .service-sec .sec-body {}
.front-page-wrapper .service-sec .service-list-wrap {
    font-size: 20px;
    margin-bottom:  150px;
}
.front-page-wrapper .service-sec .service-list-wrap > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: solid 1px var(--grey);
}
.front-page-wrapper .service-sec .service-list-wrap > ul > li {
    padding: 45px 0;
    margin: 0;
    border-bottom: solid 1px var(--grey);
}
.front-page-wrapper .service-sec .service-list-wrap a:hover {
    color: var(--black);
    text-decoration: none;
}
.front-page-wrapper .service-sec .img-wrap {}
.front-page-wrapper .service-sec .img-wrap img {
    display: block;
}
.front-page-wrapper .service-sec .img1 {
    max-width: 705px;
    margin-bottom: 50px;
}
.front-page-wrapper .service-sec .img1 img {
    margin-left: auto;
    max-width: 77%;
}
.front-page-wrapper .service-sec .img2 {
    max-width: 705px;
    padding-right: 40%;
}
.front-page-wrapper .service-sec .img2 img {
    margin-left: auto;
}
@media (min-width: 768px) {
    .front-page-wrapper .service-sec .left-col {
        padding-right: 0;
    }
    .front-page-wrapper .service-sec .img1 {
        width: calc(50vw - 15px);
    }
    .front-page-wrapper .service-sec .img2 {
        width: calc(50vw - 15px);
    }
}
@media (max-width: 767px) {
    .front-page-wrapper .service-sec {
        padding: 260px 0 200px;
    }
    .front-page-wrapper .service-sec .sec-title-wrap .arrow-link {
        font-size: 12px;
    }
    .front-page-wrapper .service-sec .service-list-wrap {
        font-size: 16px;
        margin-bottom: 75px;
    }
    .front-page-wrapper .service-sec .service-list-wrap > ul > li {
        padding: 33px 0;
    }
    .front-page-wrapper .service-sec .service-list-wrap .arrow-link::after {
        margin-right: 1em;
    }
    .front-page-wrapper .service-sec .img1 {
        margin-bottom: 20px;
        transform: translateX(15px);
    }
    .front-page-wrapper .service-sec .img2 {
        transform: initial;
        margin-bottom: 20px;
        margin-left: 0;
        padding-right: 52%;
    }
}

/* ---------------------------------------- */
/* .example-sec */
/* ---------------------------------------- */

.front-page-wrapper .example-sec {
    position: relative;
    color: var(--white);
}
.front-page-wrapper .example-sec a {
    color: var(--white);
}
.front-page-wrapper .example-sec .bg-img {
    position: sticky;
    top: 0;
    min-height: 100vh;
    background-image: url(../img/top/example-bg.jpg);
    background-position: center;
    background-size: cover;
}
.front-page-wrapper .example-sec .bg-img-blur {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(68,167,228,0.2);
}
.front-page-wrapper .example-sec .inner {
    position: relative;
    padding-bottom: 150px;
}
.front-page-wrapper .example-sec .sec-title-wrap .title {
    color: var(--white);
}
.front-page-wrapper .example-sec .example-list-wrap {
    margin-top: 150px;
}
.front-page-wrapper .example-sec .example-list-wrap > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.front-page-wrapper .example-sec .example-list-wrap > ul > li {
    padding: 0;
    margin: 0 0 140px;
}
.front-page-wrapper .example-sec .example-list-wrap > ul > li > a {
    position: relative;
    display: block;
    max-width: 488px;
}
.front-page-wrapper .example-sec .example-list-wrap > ul > li:nth-child(even) > a {
    margin-left: auto;
}
.front-page-wrapper .example-sec .example-list-wrap dl {
    margin: 0;
}
.front-page-wrapper .example-sec .example-list-wrap dt {
    position: relative;
}
.front-page-wrapper .example-sec .example-list-wrap dt img {
    width: 100%;
}
.front-page-wrapper .example-sec .example-list-wrap dt h3 {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 0.85em 1.75em;
    font-size: 18px;
    background-color: var(--dark-blue);
}
.front-page-wrapper .example-sec .example-list-wrap dd {
    padding-top: 15px;
}
.front-page-wrapper .example-sec .example-list-wrap dd .arrow-link {
    font-size: 20px;
    letter-spacing: 0;
}
@media (max-width: 767px) {
    .front-page-wrapper .example-sec .inner {
        padding-bottom: 50px;
    }
    .front-page-wrapper .example-sec .example-list-wrap {
        margin-top: 0;
    }
    .front-page-wrapper .example-sec .example-list-wrap dd .arrow-link {
        font-size: 16px;
        margin-right: 1em;
    }
}
@media (min-width: 768px) {
    .front-page-wrapper .example-sec .example-list-wrap > ul > li > a {
        transition: opacity 0.3s;
    }
    .front-page-wrapper .example-sec .example-list-wrap > ul > li > a:hover {
        text-decoration: none;
        opacity: 0.6;
    }
}


/* ---------------------------------------- */
/* .safety-sec */
/* ---------------------------------------- */

.front-page-wrapper .safety-sec {
    padding-bottom: 120px;
}
.front-page-wrapper .safety-sec::before {
    content: "";
    display: block;
    aspect-ratio: 7;
    background-image: url(../img/top/polygon2.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}
.front-page-wrapper .safety-sec .sec-header {
    margin-bottom: 60px;
}
.front-page-wrapper .safety-sec .sec-header p {
    line-height: 2;
    width: 50%;
}
.front-page-wrapper .safety-sec .safety-list-wrap {}
.front-page-wrapper .safety-sec .safety-list-wrap > .row {
    margin: -10px;
}
.front-page-wrapper .safety-sec .safety-list-wrap > .row > * {
    padding: 10px;
}
.front-page-wrapper .safety-sec .safety-list-wrap .text-box {
    background-color: var(--light-blue);
    padding: 45px 0;
    height: 100%;
}
.front-page-wrapper .safety-sec .safety-list-wrap .text-box .inner {
    max-width: 370px;
    margin: 0 auto;
    padding: 0 15px;
}
.front-page-wrapper .safety-sec .safety-list-wrap .text-box h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
    color: var(--dark-blue);
    margin-bottom: 35px;
}
.front-page-wrapper .safety-sec .safety-list-wrap .text-box ul.circle-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--black);
    width: fit-content;
    margin: 0 auto;
}
.front-page-wrapper .safety-sec .safety-list-wrap .text-box ul.circle-list > li {
    display: flex;

}
.front-page-wrapper .safety-sec .safety-list-wrap .text-box ul.circle-list > li:not(:last-child) {
    margin-bottom: 0.5em;
}
.front-page-wrapper .safety-sec .safety-list-wrap .text-box ul.circle-list > li::before {
    content: "";
    flex-grow: 0;
    flex-shrink: 0;
    transform: translateY(0.35em);
    display: block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.25em;
    border-radius: 0.5em;
    background-color: var(--black);
}
.front-page-wrapper .safety-sec .safety-list-wrap .img-box {
    height: 100%;
}
.front-page-wrapper .safety-sec .safety-list-wrap .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 767px) {
    .front-page-wrapper .safety-sec {
        padding-bottom: 150px;
    }
    .front-page-wrapper .safety-sec::before {
        margin-bottom: 100px;
    }
    .front-page-wrapper .safety-sec .sec-header p {
        width: 100%;
    }
    .front-page-wrapper .safety-sec .safety-list-wrap .text-box {
        min-height: 273px;
    }
}


/* ---------------------------------------- */
/* .recruit-sec */
/* ---------------------------------------- */

.front-page-wrapper .recruit-sec {
    display: flex;
    align-items: center;
    padding: 100px 0;
    min-height: 240px;
    height: auto;
    max-height: 560px;
    width: 100%;
    aspect-ratio: 1.625 / 1;
    background-image: url(../img/top/recruit_image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.front-page-wrapper .recruit-sec .sec-title-wrap {
    margin: 0;
}
.front-page-wrapper .recruit-sec .title {
    width: fit-content;
}
.front-page-wrapper .recruit-sec .title .arrow-link::after {
    margin-top: 0.1em;
    margin-left: 1.5em;
}
@media (max-width: 767px) {
    .front-page-wrapper .recruit-sec {
        background-image: url(../img/top/recruit_image-sp.jpg);
    }
}