@charset "utf-8";

html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #fff;
}
img {
    width: 100%;
    height: auto;
}
p, h2, h3, h4, h5, a, small {
    font-feature-settings: "palt" 1;
    letter-spacing: .1em;
    line-height: 1.25em;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 300;
    font-style: normal;
}
a:hover,
a:active {
    opacity: 0.6;
}


/* 表示切替 */
.sp-none {
    display: inline;
}
.pc-none {
    display: none;
}
@media(max-width:750px) {
    .sp-none {
        display: none;
    }
    .pc-none {
        display: block;
    }
}


/* title */
.title {
    text-align: center;
    font-size: min(44vw/12, 44px);
    color: #d06100;
    font-family: "din-2014", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .2em;
}
.title-recruit {
    text-align: center;
    font-size: min(44vw/12, 44px);
    color: #ffffff;
    font-family: "din-2014", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .08em;
}
.title-contact {
    text-align: center;
    font-size: min(44vw/12, 44px);
    color: #ffffff;
    font-family: "din-2014", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .15em;
}
.title-sub {
    text-align: center;
    font-size: min(18vw/12, 18px);
    color: #171513;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .25em;
}
.title-sub-w {
    text-align: center;
    font-size: min(18vw/12, 18px);
    color: #ffffff;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .25em;
}
.title-recruit-sub {
    text-align: center;
}
.title-recruit_sub__txt {
    position: relative;
    display: inline-block;
    font-size: min(20vw/12, 20px);
    color: #ffffff;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .3em;
    padding: 0 min(60vw/12, 60px);
}
.title-recruit_sub__txt::before,
.title-recruit_sub__txt::after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: min(50vw/12, 50px);
    height: min(4vw/12, 4px);
    background-color: #ffffff;
}
.title-recruit_sub__txt::before {
    left: 0;
}
.title-recruit_sub__txt::after {
    right: 0;
}
.title-contact_sub {
    text-align: center;
    font-size: min(16vw/12, 16px);
    color: #171513;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .2em;
}
@media(max-width:750px) {
    .title {
        font-size: min(66vw/7.5, 66px);
    }
    .title-recruit {
        font-size: min(60vw/7.5, 60px);
        font-weight: 600;
    }
    .title-contact {
        font-size: min(70vw/7.5, 70px);
    }
    .title-sub {
        font-size: min(34vw/7.5, 34px);
    }
    .title-sub-w {
        font-size: min(34vw/7.5, 34px);
    }
    .title-recruit_sub__txt {
        font-size: min(32vw/7.5, 32px);
        letter-spacing: .2em;
        padding: 0 min(65vw/7.5, 65px);
    }
    .title-recruit_sub__txt::before,
    .title-recruit_sub__txt::after {
        width: min(50vw/7.5, 50px);
        height: min(4vw/7.5, 4px);
    }
    .title-contact_sub {
        font-size: min(30vw/7.5, 30px);
        letter-spacing: .2em;
    }
}


/* **********
    header
 ********** */
header {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    background-color: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 0 clamp(13.75rem, -3.75rem + 35vw, 22.5rem);
}
.header-container {
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: 1fr auto;
}
.nav-contact {
    justify-self: end;
}
.nav-contact .contact-link {
    display: block;
}
.nav-contact .contact-link img {
    width: min(80vw/12, 80px);
    height: min(80vw/12, 80px);
}
.menu-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1.25rem, -4.375rem + 10vw, 3.125rem);
    color: #000;
    transition: all .3s;
}
.menu-list .menu-link {
    display: block;
    color: #ffffff;
    font-size: clamp(0.75rem, 1.33vw, 1rem);
    text-align: center;
}

@media (max-width: 750px) {
    header {
        position: fixed;
        padding: 0;
        max-width: 750px;
    }
    .burger {
        width: min(100vw/7.5 ,100px);
        height: min(100vw/7.5 ,100px);
        background-image: url(../img/burger_open.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        position: absolute;
        top: 0;
        right:0;
        z-index: 2;
    }
    .burger.is-active {
        width: min(75vw/7.5 ,75px);
        height: min(73vw/7.5 ,73px);
        background-image: url(../img/burger_close.png);
        margin: min(20vw/7.5, 20px);
    }
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        color: #fff;
        align-items: baseline;
        justify-content: center;
        background-image: url(../img/burgerBG.png);
        background-size: contain;
        background-position: center;
        background-repeat: repeat;
        background-color: #000;
        width: 100vw;
        height: 100vh;
        display: none;
    }
    .nav-menu.is-active {
        display: flex;
    }
    .menu-list {
        flex-direction: column;
        padding: min(120vw/7.5, 120px) 0 0 0;
        align-items: flex-start;
        gap: clamp(1.25rem, -4.375rem + 10vw, 3.125rem);
        color: #000;
        transition: all .3s;
    }
    .menu-list .menu-link {
        display: block;
        color: #ffffff;
        font-size: min(54vw/7.5, 54px);
        font-family: "hiragino-kaku-gothic-pron", sans-serif;
        font-weight: 600;
    }
}


/* fv */
.fv {
    background-color: #000000;
    width: 100%;
    margin: 0;
}
.fv-inner {
    max-width: 1200px;
    margin: 0 auto;
}
@media(min-width:1201px) {
    .fv-inner {
        max-width: 1920px;
    }
}
@media(max-width:750px) {
    /* fv */
    .fv-inner {
        max-width: 750px;
    }
} 


/* **********
    service
 ********** */
.service {
    background-color: #ffffff;
    width: 100%;
    margin: 0;
}
.service-inner {
    max-width: 1200px;
    margin: auto;
    padding: min(70vw/12, 70px) 0 min(130vw/12, 130px);
}
.service-area {
    margin: min(56vw/12, 56px) min(176vw/12, 176px) 0;
    display: flex;
    gap: 40px;
}
.service-area img { 
    width: min(200vw/12, 200px);
    height: min(140vw/12, 140px);
}
.service-area .service-title,
.service-area .service-title_small { 
    font-size: min(24vw/12, 24px);
    color: #d06100;
    font-weight: 600;
    padding: 0 0 0 min(10vw/12, 10px);
    border-left: min(10vw/12, 10px) solid #d06100;
}
.service-area_txt p { 
    font-size: min(16vw/12, 16px);
    padding: min(10vw/12, 10px) 0 0 0;
    line-height: 1.5em;
}
@media(max-width:750px) {
    .service-inner {
        max-width: 750px;
        padding: min(90vw/7.5, 90px) 0 min(130vw/7.5, 130px);
    }
    .service-area {
        margin: min(70vw/7.5, 70px) min(46vw/7.5, 46px) 0;
        flex-direction: column;
        gap: 30px;
    }
    .service-area img { 
        width: min(650vw/7.5, 650px);
        height: min(400vw/7.5, 400px);
    }
    .service-area .service-title { 
        font-size: min(42vw/7.5, 42px);
        letter-spacing: .05em;
        padding: 0 0 0 min(10vw/7.5, 10px);
        border-left: min(18vw/7.5, 18px) solid #d06100;
    }
    .service-area .service-title_small { 
        font-size: clamp(1.125rem, 0.063rem + 4.53vw, 2.188rem);

        /* font-size: min(36vw/7.5, 36px); */
        letter-spacing: .05em;
        padding: 0 0 0 min(10vw/7.5, 10px);
        border-left: min(18vw/7.5, 18px) solid #d06100;
    }
    .service-area p { 
        font-size: min(26vw/7.5, 26px);
        padding: min(16vw/7.5, 16px) 0 0 0;
    }
}


/* **********
    works
 ********** */
.works {
    background: url(../img/worksBg_pc.png) no-repeat #131313 top right / auto ;
    background-size: cover;
    width: 100%;
    margin: 0;
}
.works-inner {
    max-width: 1200px;
    margin: auto;
    padding: min(70vw/12, 70px) 0 min(130vw/12, 130px);
}
.works-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: min(24vw/12, 24px) 0 0 0;
}
.works-area li img {
    width: min(320vw/12, 320px);
    height: min(250vw/12, 250px);
}
@media(max-width:750px) {
    .works {
        background: url(../img/worksBg_sp.png) no-repeat #131313 top right / auto ;
        background-size: cover;
        width: 100%;
        margin: 0;
    }
    .works-inner {
        max-width: 750px;
        margin: auto;
        padding: min(70vw/7.5, 70px) 0 min(80vw/7.5, 80px);
    }
    .works-slider {
        width: 80%;
        margin: min(40vw/7.5, 40px) auto 0;
    }

    /* swiper slider */
    .swiper--wrapper {
        width: 100%;
        height: auto;
    }
    .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: min(50vw/12, 50px);
    }
    .swiper-pagination-bullet {
        width: 1.6rem;
        height: min(6vw/7.5, 6px);
        border-radius: 0;
        cursor: pointer;
        vertical-align: top;
        background: var(--swiper-pagination-bullet-inactive-color, #fff);
        opacity: var(--swiper-pagination-bullet-inactive-opacity, .5);
    }
    .swiper-pagination-bullet-active {
        width: 4rem;
        background-color: #d06100;
        opacity: 1;
    }
}


/* **********
    flow
 ********** */
.flow {
    background-image: url(../img/flowBg01_pc.png) , url(../img/flowBg02_pc.png);
    background-color: #fefefe;
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;
    background-size: auto;
    width: 100%;
    margin: 0;
}
.flow-inner {
    max-width: 1200px;
    margin: auto;
    padding: min(70vw/12, 70px) 0 min(130vw/12, 130px);
}
.flow-area {
    margin: min(56vw/12 ,56px) min(126vw/12, 126px) 0;
    display: flex;
}
.flow-area .flow-number {
    color: #2f2f2f;
    font-size: min(80vw/12, 80px);
    line-height: 1;
    letter-spacing: -.01em;
    font-family: "din-2014", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    padding: 0 min(34vw/12, 34px) 0 0;
}
.flow-area .flow-number span {
    display: block;
    font-size: min(26vw/12, 26px);
    color: #2f2f2f;
    letter-spacing: .05em;
}
.flow-area picture { 
    padding: 0 min(16vw/12, 16px) 0 0;
}
.flow-area img {
    width: min(200vw/12, 200px);
    height: min(140vw/12, 140px);
}
.flow-area .flow-title { 
    font-size: min(24vw/12, 24px);
    color: #d06100;
    font-weight: 600;
}
.flow-area .flow-title_area {
    display: flex;
    flex-flow: nowrap;
}
.flow-area .flow-title_area small {
    font-size: min(14vw/12, 14px);
    line-height: 1.25em;
    color: #d06100;
    font-weight: 600;
    text-indent: -1em;
    padding-left: 1em;
}
.flow-area p { 
    font-size: min(18vw/12, 18px);
    padding: min(10vw/12, 10px) 0 0 0;
    line-height: 1.5em;
}
@media(max-width: 750px) {
    .flow {
        background-image: url(../img/flowBg_sp.png);
        background-color: #fefefe;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: cover;
        width: 100%;
        margin: 0;
    }
    .flow-inner {
        max-width: 750px;
        margin: auto;
        padding: min(80vw/7.5, 80px) 0 min(130vw/7.5, 130px);
    }
    .flow-area {
        margin: min(80vw/7.5, 80px) min(65vw/7.5, 65px) 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .flow-area .flow-number {
        order: 1;
        font-size: min(96vw/7.5, 96px);
        /* line-height: 1;
        letter-spacing: -.01em; */
        text-align: left;
        padding: 0 min(30vw/7.5, 30px) 0 0;
        border-right: #b4b4b4 1px solid;
        width: 20%;
    }
    .flow-area .flow-number span {
        display: block;
        font-size: min(32vw/7.5, 32px);
        color: #2f2f2f;
        letter-spacing: .05em;
    }
    .flow-area .flow-area_txt {
        order: 2;
        padding: 0 0 0 min(20vw/7.5, 20px);
        width: 80%;
    }
    .flow-area picture { 
        order: 3;
        padding: min(20vw/7.5, 20px) 0 0;
    }
    .flow-area img {
        width: min(628vw/7.5, 628px);
        height: min(400vw/7.5, 400px);
    }
    .flow-area .flow-title { 
        font-size: min(34vw/7.5, 34px);
    }
    .flow-area .flow-title_area {
        flex-direction: column;
    }
    .flow-area .flow-title_area small {
        font-size: min(15vw/7.5, 15px);
        letter-spacing: .03em;
        text-indent: 0;
        padding-left: 0;
    }
    .flow-area p { 
        font-size: min(24vw/7.5, 24px);
        padding: min(10vw/7.5, 10px) 0 0 0;
        letter-spacing: .08em;
    }
}


/* **********
    map
 ********** */
.map {
    width: 100%;
    height: auto;
    margin: 0;
}


/* **********
    recruit
 ********** */
.recruit {
    background: url(../img/recruitBg_pc.png) no-repeat #271f1f top right;
    background-size: cover;
    width: 100%;
    color:#ffffff;
    padding: min(88vw/12, 88px) 0 min(60vw/12, 60px);
}
.recruit-inner {
    display: flex;
    justify-content: center;
    padding: min(60vw/12, 60px) 0 0 0;
}
.recruit-inner .recruit-btn {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    border: solid min(1vw/12, 1px) #ffffff;
}
.recruit-inner .recruit-btn .b__text {
    display: block;
    letter-spacing: .2em;
    color: #ffffff;
    font-weight: 300;
    text-align: center;
    position: relative;
    padding-right: min(32vw/12, 32px);
    font-size: min(24vw/12, 24px);
}
.recruit-inner .recruit-btn .b__text::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform: rotate(45deg);
    border-top: min(3vw/12, 3px) solid #ffffff;
    border-right: min(3vw/12, 3px) solid #ffffff;
    box-sizing: border-box;
    width: min(14vw/12, 14px);
    height: min(14vw/12, 14px);
}
@media(max-width: 750px) {
    .recruit {
        background: url(../img/recruitBg_sp.png) no-repeat #271f1f top right ;
        background-size: cover;
        padding: min(70vw/7.5, 70px) 0 min(60vw/7.5, 60px);
    }
    .recruit-inner {
        padding: min(30vw/7.5, 30px) 0 0 0;
    }
    .recruit-inner .recruit-btn {
        padding: 0;
        border: none;
    }
    .recruit-inner .recruit-btn .b__text {
        padding-right: min(24vw/7.5, 24px);
        font-size: min(34vw/7.5, 34px);
    }
    .recruit-inner .recruit-btn .b__text::after {
        border-top: min(3vw/7.5, 3px) solid #ffffff;
        border-right: min(3vw/7.5, 3px) solid #ffffff;
        width: min(18vw/7.5, 18px);
        height: min(18vw/7.5, 18px);
    }
}


/* **********
    contact
 ********** */
.contact {
    background-color: #e87723;
    color:#ffffff;
    padding: min(60vw/12, 60px) 0 min(80vw/12, 80px);
}
.contact-inner {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: min(30vw/12, 30px) 0 0 0;
}
.contact-inner .contact-btn {
    padding: 1.1rem 3.3rem;
    background-color: #ffffff;
    font-size: min(22vw/12, 22px);
    font-weight: 600;
    color: #e87723;
}
.contact-inner .contact-tel {
    padding: 1rem 3.3rem;
    background-color: #e87723;
    font-size: min(24vw/12, 24px);
    font-family: "din-2014", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #ffffff;
    border: solid min(2vw/12, 2px) #ffffff;
}
@media(max-width: 750px) {
    .contact {
        padding: min(70vw/7.5, 70px) 0;
    }
    .contact-inner {
        flex-direction: column-reverse;
        gap: 14px;
        padding: min(30vw/7.5, 30px) min(80vw/7.5, 80px) 0 ;
    }
    .contact-inner .contact-btn {
        padding: 1.1rem 3rem;
        text-align: center;
        font-size: min(38vw/7.5, 38px);
    }
    .contact-inner .contact-tel {
        padding: 0.8rem 3rem;
        text-align: center;
        font-size: min(50vw/7.5, 50px);
        border: solid min(2vw/7.5, 2px) #ffffff;
    }
}


/* **********
    footer
 ********** */
footer {
    background-color: #1e1e1e;
    color:#ffffff;
    display: flex;
    justify-content: center;
    padding: min(60vw/12, 60px) 0;
}
.footer-company {
    border-right: min(1vw/12, 1px) solid #ffffff;
    padding: 0 min(15vw/12, 15px) 0 0;
}
.footer-company h5 {
    font-size: min(26vw/12, 26px);
    margin: 0 0 min(5vw/12, 5px) 0;
}
.footer-company p {
    font-size: min(18vw/12, 18px);
    text-align: center;
}
.footer-company span {
    margin: 0 0 0 min(20vw/12, 20px);
}
.footer-address {
    padding: 0 0 0 min(15vw/12, 15px);
}
.footer-address p {
    font-size: min(14vw/12, 14px);
    line-height: 1.5em;
}
@media (max-width: 750px) {
    footer {
        flex-direction: column;
        text-align: center;
        padding: min(60vw/7.5, 60px) 0 min(40vw/7.5, 40px);
    }
    .footer-company {
        border-right: none;
        padding: 0;
    }
    .footer-company h5 {
        font-size: min(42vw/7.5, 42px);
        margin: 0 0 min(10vw/7.5, 10px) 0;
    }
    .footer-company p {
        font-size: min(24vw/7.5, 24px);
        margin: 0 0 min(40vw/7.5, 40px) 0;
    }
    .footer-company span {
        margin: 0 0 0 min(16vw/7.5, 16px);
    }

    .footer-address {
        padding: 0;
    }
    .footer-address p {
        font-size: min(18vw/7.5, 18px);
    }
}