.recruit {
    width: 100%;
    padding: 90px 0 0;
}

.layout--pc {
    display: block;
}

.layout--sp {
    display: none;
}


/** button **/
.buttonTriangle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .05em;
    border: 1px solid #442602;
    color: #442602;
    transition: .25s ease-in-out;
}

.buttonTriangle:hover {
    opacity: .75;
}

.buttonTriangle::before,
.buttonTriangle::after {
    content: "";
    position: absolute;
    display: block;
}

.buttonTriangle::before {
    right: 19px;
    transform: rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 2px solid #442602;
    border-right: 2px solid #442602;
}

.buttonTriangle::after {
    top: -4px;
    left: -12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 18px solid transparent;
    border-left: 18px solid transparent;
    border-bottom: 18px solid #442602;
    border-top: 0;
    transform: rotate(315deg);
}

/** common **/
.recruit__commonTitleEn {
    width: min(100%, 820px);
    margin: 0 auto;
}

.recruit__commonTitleEnHeading {
    margin: 0;
    padding-bottom: 21px;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 36px;
    letter-spacing: .05em;
    line-height: 1;
    color: #442602;
    border-bottom: 1px solid #442602;
    text-align: center;
}

.recruit__commonTitleEnSub {
    padding-top: 12px;
    font-family: "din-2014-narrow", sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .05em;
    color: #442602;
    text-align: center;
}

.recruit__commonTitleEn--footer .recruit__commonTitleEnHeading{
    padding-bottom: 15px;
    font-size: 32px;
}

/** mainvisual **/
.recruit__mainvisual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    background: url(../images/recruit/mainvisual_background01.webp) no-repeat center center / cover;
}

.recruit__mainvisualText {
    color: #fff;
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: .05em;
    font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

.recruit__mainvisualBorder {
    display: inline-block;
    vertical-align: middle;
    height: 1px;
    width: 48px;
    margin-right: 10px;
    background: #fff;
}

/** intro **/
.recruit__intro {
    position: relative;
    padding: 51px 20px 79px;
    text-align: center;
    background: #442602;
    color: #fff;
}

.recruit__introWrapper {
    width: min(100%, 740px);
    margin: 0 auto;
}

.recruit__introTitle {
    margin: 0;
    font-size: 36px;
    letter-spacing: .05em;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.recruit__introSubTitle {
    margin-top: 33px;
    font-size: 18px;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    letter-spacing: .05em;
}

.recruit__introDesc {
    margin-top: 36px;
    font-size: 14px;
    letter-spacing: .03em;
    line-height: 1.8;
    text-align: left;
}

.recruit__introLink {
    position: absolute;
    right: 0;
    bottom: -32px;
    left: 0;
    width: 64px;
    height: 64px;
    margin: auto;
    background: #442602;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}

.recruit__introLink::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    font-family: "design_plus";
    font-size: 18px;
    content: "\e90e";
}

/** about **/
.recruit__about {
    margin: 0 auto;
    padding: 80px 20px;
}

.recruit__aboutList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 50px;
    width: min(100%, 940px);
    margin: 50px auto 0;
}

.recruit__aboutItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 280px;
    border-radius: 100px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .05em;
    text-align: center;
    color: #fff;
}

.recruit__aboutItem--01 {
    background: url(../images/recruit/about_image01.webp) no-repeat center center / cover;
}

.recruit__aboutItem--02 {
    background: url(../images/recruit/about_image02.webp) no-repeat center center / cover;
}

.recruit__aboutItem--03 {
    background: url(../images/recruit/about_image03.webp) no-repeat center center / cover;
}

.recruit__aboutItem--04 {
    background: url(../images/recruit/about_image04.webp) no-repeat center center / cover;
}

.recruit__aboutItem--05 {
    background: url(../images/recruit/about_image05.webp) no-repeat center center / cover;
}


/** requirements **/
.recruit__requirements {
    padding: 59px 20px 67px;
    background: url(../images/recruit/requirements_image01.webp) no-repeat center center / cover;
}

.recruit__requirementsWrapper {
    width: min(100%, 1160px);
    margin: 0 auto;
}

.recruit__requirementsTitle {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 960px);
    margin: 0 auto;
}

.recruit__requirementsTitleText {
    display: block;
    max-width: 260px;
    width: 100%;
    margin: 0 10px;
    padding: 20px 10px 12px;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 36px;
    line-height: 1;
    letter-spacing: .2em;
    color: #442602;
    text-align: center;
    border: 2px solid #442602;
}

.recruit__requirementsTitle::before,
.recruit__requirementsTitle::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #442602;
}

.recruit__requirementsSubTitle {
    padding-top: 12px;
    font-family: "din-2014-narrow", sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .05em;
    color: #442602;
    text-align: center;
}

.recruit__requirementsList {
    display: flex;
    gap: 0 55px;
    padding: 43px 0 0;
}

.recruit__requirementsListBlock--01 .recruit__requirementsItemTitle{
    width: 110px;
}

.recruit__requirementsListBlock--02 .recruit__requirementsItemTitle{
    width: 164px;
}

.recruit__requirementsItem {
    display: flex;
    align-items: flex-start;
}

.recruit__requirementsItem + .recruit__requirementsItem {
    margin-top: 16px;
}

.recruit__requirementsItemTitle {
    position: relative;
    padding-left: 34px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .03em;
    line-height: 1.5;
    color: #442602;
}

.recruit__requirementsItemTitle::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 18px;
    height: 18px;
    background: #442602;
}

.recruit__requirementsItemDesc {
    position: relative;
    padding-left: 34px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .03em;
    line-height: 1.5;
    color: #442602;
}

.recruit__requirementsItemDesc::before {
    content: ":";
    position: absolute;
    top: -2px;
    left: 22px;
    font-size: 18px;
    letter-spacing: .03em;
    line-height: 1.5;
}


/** flow **/
.recruit__flow {
    padding: 82px 20px 65px;
}

.recruit__flowWrapper {
    width: min(100%, 820px);
    margin: 0 auto;
}

.recruit__flowContent {
    width: min(100%, 715px);
    margin: 40px auto 0;
}

.recruit__flowItem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 30px;
}

.recruit__flowItem + .recruit__flowItem {
    margin-top: 104px;
}

.recruit__flowExplanation {
    display: flex;
}

.recruit__flowStep {
    position: relative;
    font-size: 24px;
    font-family: "din-2014-narrow", sans-serif;
    font-weight: bold;
    letter-spacing: .05em;
    color: #442602;
}

.recruit__flowStep::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #442602;
    border-bottom: 0;
}

.recruit__flowStepNumber {
    font-size: 40px;
    font-weight: normal;
    letter-spacing: .05em;
}

.recruit__flowImage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100px;
    width: 100%;
    height: 100px;
    background: #442602;
    border-radius: 100px;
}


.recruit__flowItem + .recruit__flowItem .recruit__flowImage::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 54px;
    background: #442602;
}

.recruit__flowExplanation {
    display: flex;
    font-size: 24px;
    font-weight: bold;
    color: #442602;
    letter-spacing: .05em;
    line-height: 1.5;
    padding-left: 10px;
}

.recruit__flowExplanationTitle {
    white-space: nowrap;
}

.recruit__flowExplanationTitle::after {
    content: "｜";
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 1.5;
}


/** faq **/
.recruit__faq {
    padding: 80px 20px 50px;
    background: #f5f5f5;
}

.recruit__faqContent {
    width: min(100%, 950px);
    margin: 40px auto 0;
}

.recruit__faqList {    
    display: flex;
    flex-direction: column;
    gap: 15px 0;
}

.recruit__faqDetails {    
    padding-bottom: 15px;
    transition: .25s ease-in-out;
}

.recruit__faqSummary {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0 32px;
    padding: 0 60px 0 24px;
    list-style: none;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 2;
    color: #202020;
    transition: .25s ease-in-out;
}

.recruit__faqSummary:hover {
    cursor: pointer;
}

.recruit__faqSummary::before,
.recruit__faqSummary::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 31px;
    width: 24px;
    height: 2px;
    background: #442602;
    transition: .25s ease-in-out;
}

.recruit__faqSummary::after {
    transform: translateY(-50%) rotate(90deg);
}

.recruit__faqSummaryQuestion {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 40px;
    width: 100%;
    height: 40px;
    font-family: "din-2014-narrow", sans-serif;
    font-size: 28px;
    color: #fff;
    background: #442602;
    border: 1px solid #442602;
}

.recruit__faqSummaryAnswer {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 40px;
    width: 100%;
    height: 40px;
    font-family: "din-2014-narrow", sans-serif;
    font-size: 28px;
    color: #442602;
    background: none;
    border: 1px solid #442602;
}

.recruit__faqDetailsText {
    display: flex;
    align-items: flex-start;
    gap: 0 32px;
    padding: 17px 20px 0 24px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.5;
    color: #444;
}

.recruit__faqDetails[open] {
    border-bottom: 2px dotted #C3B09B;
}

.recruit__faqDetails[open] .recruit__faqSummary::after {
    transform: rotate(0deg);
}


/** footer **/
.recruit__footerBlock {
    display: flex;
}

.recruit__footerImage {
    width: 50%;
}

.recruit__footerImage img {
    width: 100%;
    height: 400px;
    object-fit: cover;
} 

.recruit__footerContent {
    width: 50%;
    padding: 61px 90px 68px;
}

.recruit__footerContentText {
    padding-top: 40px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .05em;
    text-align: center;
    color: #442602;
}

.recruit__footerContentButton {
    width: min(100%, 380px);
    margin: 30px auto 0;
}

.recruit__footerBlock + .recruit__footerBlock {
    flex-direction: row-reverse;
}



@media screen and (max-width: 1439px) {
    .recruit__footerContent {
        padding: 50px 70px 58px;
    }
}

@media screen and (max-width: 1199px) {
    .recruit {
        padding: 0;
    }
}

@media (max-width: 1024px) and (min-width: 768px)  {
    .recruit__requirementsList {
        display: flex;
        flex-direction: column;
        gap: 16px 0;
    }

    .recruit__requirementsListBlock--01 .recruit__requirementsItemTitle {
        width: 165px;
    }

    .recruit__requirementsListBlock--02 .recruit__requirementsItemTitle {
        width: 165px;
    }

    .recruit__footerContent {
        padding: 50px 20px 60px;
    }

    .recruit__footerContentText {
        line-height: 1.4;
    }
}


@media screen and (max-width: 767px) {
    .layout--pc {
        display: none;
    }

    .layout--sp {
        display: block;
    }

    .buttonTriangle {
        padding: 5.6vw 5.6vw 5.6vw 0;
        font-size: 4.2667vw;
        letter-spacing: 0;
        border: 0.2667vw solid #442602;
    }
    
    .buttonTriangle::after {
        top: -0.5333vw;
        left: -1.8667vw;
        border-right: 2.9333vw solid transparent;
        border-left: 2.9333vw solid transparent;
        border-bottom: 2.9333vw solid #442602;
    }    

    .recruit__commonTitleEnHeading {
        margin: 0;
        padding-bottom: 2.6667vw;
        font-size: 5.3333vw;
        border-bottom: 0.2667vw solid #442602;
    }
    
    .recruit__commonTitleEnSub {
        padding-top: 1.8667vw;
        font-size: 3.7333vw;
    }

    .recruit__commonTitleEn--footer .recruit__commonTitleEnHeading {
        padding-bottom: 2.9333vw;
        font-size: 5.3333vw;
    }

    .recruit__mainvisual {
        min-height: 82.9333vw;
        background: url(../images/recruit/mainvisual_background02.webp) no-repeat center center / cover;
    }

    .recruit__mainvisualText {
        font-size: 4.8vw;
        line-height: 1.5;
    }

    .recruit__mainvisualBorder {
        height: 0.2667vw;
        width: 5.3333vw;
        margin-right: 1.3333vw;
        vertical-align: super;
    }

    .recruit__intro {
        padding: 11.2vw 5.3333vw 13.8667vw;
    }
    
    .recruit__introTitle {
        margin: 0;
        font-size: 5.3333vw;
        letter-spacing: .05em;
    }
    
    .recruit__introSubTitle {
        margin-top: 5.8667vw;
        font-size: 4.2667vw;
        line-height: 1.6;
        letter-spacing: .03em;
    }
    
    .recruit__introDesc {
        margin-top: 5.6vw;
        font-size: 3.7333vw;
        letter-spacing: .03em;
        line-height: 1.6;
    }

    .recruit__introLink {
        bottom: -6.6667vw;
        width: 13.3333vw;
        height: 13.3333vw;
        border: 0.2667vw solid #fff;
    }

    .recruit__about {
        padding: 16.5333vw 5.3333vw 13.3333vw;
    }

    .recruit__aboutList {
        display: grid;
        grid: "item01 item02" auto
              "item03 item03" auto
               "item04 item05" auto / auto auto;
        gap: 0.5333vw 4vw;
        width: min(100%, 250.667vw);
        margin: 8.8vw auto 0;
    }

    .recruit__aboutItem {
        width: 42.6667vw;
        height: 42.6667vw;
        border-radius: 26.6667vw;
        font-size: 4.2667vw;
    }

    .recruit__aboutItem--01 {
        grid-area: item01;
    }

    .recruit__aboutItem--02 {
        grid-area: item02;
    }

    .recruit__aboutItem--03 {
        grid-area: item03;
        margin: auto;
    }

    .recruit__aboutItem--04 {
        grid-area: item04;
    }

    .recruit__aboutItem--05 {
        grid-area: item05;
    }

    .recruit__requirements {
        padding: 10.6667vw 5.3333vw 10.6667vw;
        background: url(../images/recruit/requirements_image02.webp) no-repeat center center / cover;
    }
    
    .recruit__requirementsTitleText {
        max-width: none;
        width: 157.3333vw;
        margin: 0 2.6667vw;
        padding: 3.4667vw 2.6667vw 2.9333vw;
        font-size: 5.3333vw;
        border: 0.5333vw solid #442602;
    }
    
    .recruit__requirementsSubTitle {
        padding-top: 1.8667vw;
        font-size: 3.7333vw;
    }

    .recruit__requirementsList {
        flex-direction: column;
        gap: 0 14.6667vw;
        padding: 9.8667vw 0 0;
    }

    .recruit__requirementsListBlock + .recruit__requirementsListBlock {
        margin-top: 12px;
    }

    .recruit__requirementsItem + .recruit__requirementsItem {
        margin-top: 14px;
    }

    .recruit__requirementsItemTitle {
        padding-left: 6.9333vw;
        font-size: 4.2667vw;
    }
    
    .recruit__requirementsItemTitle::before {
        top: 0.8vw;
        width: 4.2667vw;
        height: 4.2667vw;
    }
    
    .recruit__requirementsItemTitle::after {
        content: ":";
        position: absolute;
        top: 0;
        right: 1.8667vw;
        font-size: 4.2667vw;
        letter-spacing: .03em;
        line-height: 1.5;
    }
    
    .recruit__requirementsItemDesc {
        padding-left: 0;
        font-size: 4.2667vw;
    }
    .recruit__requirementsItemDesc span {
        display: block;
        font-size: 3.7333vw;
    }
    
    .recruit__requirementsItemDesc::before {
        content: none;
    }
    
    .recruit__requirementsListBlock--01 .recruit__requirementsItemTitle {
        width: auto;
        min-width: 29.3333vw;
        white-space: nowrap;
    }
    
    .recruit__requirementsListBlock--02 .recruit__requirementsItemTitle {
        width: auto;
        min-width: 29.3333vw;
        white-space: nowrap;
    }
    
    .recruit__requirementsItem--long {
        flex-wrap: wrap;
    }
    
    .recruit__requirementsItem--long .recruit__requirementsItemTitle::after {
        display: none;
    }
    
    .recruit__flow {
        padding: 10.6667vw 7.4667vw 6.6667vw;
    }
    
    .recruit__flowContent {
        width: min(100%, 76vw);
        margin: 8.2667vw auto 0;
    }
    
    .recruit__flowItem {
        display: grid;
        grid: "step explanation" auto
              "image explanation" auto / 12.8vw 1fr;
        gap: 0 5.3333vw;
    }
    
    .recruit__flowItem + .recruit__flowItem {
        margin-top: 14.6667vw;
    }
    
    .recruit__flowStep {
        grid-area: step;
        font-size: 4.2667vw;
    }

    .recruit__flowStep::before {
        top: -1.0667vw;
        border-right: 2.6667vw solid transparent;
        border-left: 2.6667vw solid transparent;
        border-top: 2.6667vw solid #442602;
    }
    
    .recruit__flowStepNumber {
        font-size: 8.5333vw;
    }
    
    .recruit__flowImage {
        grid-area: image;
        max-width: 12.8vw;
        width: 100%;
        height: 12.8vw;
    }
    
    .recruit__flowImage img {
        width: 50%;
        height: auto;
    }
    
    .recruit__flowItem + .recruit__flowItem .recruit__flowImage::before {
        top: -21.3333vw;
        width: 0.5333vw;
        height: 8.8vw;
    }
    
    .recruit__flowExplanation {
        grid-area: explanation;
        display: block;
        padding: 0;
        font-size: 4.2667vw;
    }
    
    .recruit__flowExplanationTitle::after {
        font-size: 4.2667vw;
    }

    .recruit__faq {
        padding: 10.9333vw 5.3333vw 1.3333vw;
    }
    
    .recruit__faqContent {
        margin: 8.8vw auto 0;
    }
    
    .recruit__faqSummary {
        align-items: flex-start;
        gap: 0 4.2667vw;
        padding: 0;
        font-size: 4.2667vw;
        line-height: 1.4;
    }
    
    .recruit__faqSummary::before,
    .recruit__faqSummary::after {
        content: none;
    }
    
    .recruit__faqSummaryQuestion {
        max-width: 6.4vw;
        width: 100%;
        height: 6.4vw;
        font-size: 4.2667vw;
    }
    
    .recruit__faqSummaryAnswer {
        max-width: 6.4vw;
        width: 100%;
        height: 6.4vw;
        font-size: 4.2667vw;
    }
    
    .recruit__faqDetails[open] {
        border-bottom: 0.5333vw dotted #C3B09B;
    }
    
    .recruit__faqDetails {
        padding-bottom: 4vw;
    }
    
    .recruit__faqDetailsText {
        gap: 0 3.2vw;
        padding: 3.2vw 0 0;
        font-size: 4.2667vw;
        line-height: 1.3;
    }
    
    .recruit__footerBlock {
        display: flex;
        flex-direction: column;
    }
    
    .recruit__footerBlock + .recruit__footerBlock {
        flex-direction: column;
    }
    
    .recruit__footerImage {
        width: 100%;
    }
    
    .recruit__footerImage img {
        height: 32vw;
    }
    
    .recruit__footerContent {
        padding: 8vw 7.2vw 10.6667vw;
        width: 100%;
    }    

    .recruit__footerContentText {
        padding-top: 8.8vw;
        font-size: 4.2667vw;
        line-height: 1.4;
    }
    
    .recruit__footerContentButton {
        width: min(100%, 80vw);
        margin: 5.3333vw auto 0;
    }
}