@charset "utf-8";

@media screen and (max-width: 897px) {
/*----------------------------------------------------------------------------------------
	top
---------------------------------------------------------------------------------------- */
    .top {
        margin-bottom: 60px;
    }
    .top-container {
        overflow: hidden;
    }
    .top-image-container {
        margin-left: 8.3%;
        width: 96.7%;
        height: 143.25vw;
        max-height: 720px;
        background-position: 84.9% 0;
        border-radius: 0 0 0 60px;
    }
    .top-message-container {
        bottom: 40px;
    }
    .top-message > span {
        padding: 2.56vw 5.1vw 2.56vw 8.2vw;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        letter-spacing: 0.1em;
        text-align: left;
    }
    .message-first {
        margin-bottom: 31px;
    }
    .message-seccond {
        margin-bottom: 12px;
    }
    .message-third > span > span {
        font-family: TA_oonishi;
        font-size: 28px;
        font-weight: 300;
        line-height: 28px;
        letter-spacing: -0.05em;
        text-align: left;
    }

    /*----------------------------------------------------------------------------------------
        message
    ---------------------------------------------------------------------------------------- */
    section.message > .container {
        max-width: 334;
        width: 85.7%;
        margin: 0 auto;
    }
    section.message > .container .title {
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
    }

    section.message > .container .sub-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.1em;
        text-align: center;        
    }

    section.message > .container .sub-title > span {
        font-size: 28px;
        font-weight: 600;
        line-height: 45px;
        letter-spacing: 0.1em;
        text-align: center;
        display: block;      
    }

    section.message > .container .text {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 0.05em;
    }
    /*----------------------------------------------------------------------------------------
        guid
    ---------------------------------------------------------------------------------------- */
    .guid {
        margin-top: 60px;
    }
    .guid h2 {
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        margin-bottom: 10px;
    }
    .guid .container {
        width: 90%;
        max-width: 350px;
    }
    .guid .container .icons {
        justify-content: center;
        margin: 40px 0;
        flex-wrap: wrap;
    }
    .guid .container .icons .icon-container {
        width: 31.4%;
        max-width: 110px;
        margin-bottom: 20px;
    }
    .guid .container .icons .icon-container > div {
        max-width: 72px;
        width: 66%;
        margin: 0 auto;
    }
    .guid .container .icons .icon-container > div > img {
        width: 100%;
    }
    .guid .btn-container {
        text-align: center;
    }
    .guid .icons p {
        font-family: Inter;
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        text-align: center;
        margin-top: 8px;      
    }
    /*----------------------------------------------------------------------------------------
        job-description
    ---------------------------------------------------------------------------------------- */
    .job-description {
       margin: 140px 0 100px 0;
    }
    .job-description .sub-title {
        font-family: Inter;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        letter-spacing: 0.05em;
    }
    .job-description h2 {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.05em;
        margin-bottom: 10px;
    }
    .job-description .text-container {
        width: 350px;
        margin: 0 auto;
    }
    .job-description .text-container .text {
        font-family: Inter;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0.1em;
        margin: 40px 0 20px 0;
        width: 350px;
    }
    .job-description .description-container {
        width: 90%;
        max-width: 350px;
        margin: 0 auto;
    }
    .job-description .description-container .box {
        justify-content: center;
        flex-wrap: wrap;
        padding: 20px 0;
    }
    .job-description .description-container .box .image-container {
        width: 85.7%;
        max-width: 300px;
    }
    .job-description .description-container .box .description {
        width: 85.7%;
        max-width: 300px;
        margin: 20px 0 0 0;
    }
    .job-description .description-container .box .description .title {
        font-family: Inter;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        margin-bottom: 18px;
    }
    .job-description .description-container .box .description p {
        font-family: Inter;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        text-align: left;
    }
    .job-description .description-container .box .description .text {
        margin: 18px 0;
        width: 86%;
    }
    .job-description .description-container .box .description .tag {
        padding: 4px 0;
        background-color: #64B32E;
        color: #fff;
        border-radius: 4px;
        margin-right: 5px;
        width: 58px;
        font-size: 14px;
        font-weight: 600;
        line-height: 14px;
    }
    .job-description .description-container .box .description .example {
        max-width: 234px;
        font-family: Inter;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        text-align: left;
    }
    /*----------------------------------------------------------------------------------------
        strengthened-areas
    ---------------------------------------------------------------------------------------- */
    .strengthened-areas {
        padding: 40px 16px;
    }
    .strengthened-areas .lead {
        font-family: Inter;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
        margin-bottom: 20px;
    }
    .area-card {
        width: 100%;
        max-width: 320px;
        height: 140px;
    }
    /*----------------------------------------------------------------------------------------
        flow
    ---------------------------------------------------------------------------------------- */
    .flow {
        padding: 64px 5.12vw 64px 5.12vw;
        background-color: #fff;
    }
    .flow h2 {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.05em;
        margin-bottom: 10px;
    }
    .flow .container > div {
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }
    .flow .container div .box {
        width: 100%;
        max-width: 350px;
        margin-bottom: 56px;
    }
    .flow .container div .box:last-of-type {
        margin-bottom: 0px;
    }
    .flow .container div .box .title {
        font-family: Inter;
        font-size: 24px;
        font-weight: 600;
        line-height: 24px;
    }
    .flow .container div .box .title > span {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
    }
    .flow .container div .box .text{
        font-family: Inter;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        text-align: justified;
    }
    /*----------------------------------------------------------------------------------------
        opinions
    ---------------------------------------------------------------------------------------- */
    .opinions {
        padding-top: 60px;
    }
    .opinions .sub-title {
        font-family: Inter;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        letter-spacing: 0.05em;
    }
    .opinions h2 {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.05em;
        margin-bottom: 10px;
    }
    .swiper {
        margin-top: 40px;
    }
    .swiper-slide {
        max-width: 360px;
        width: 92.3%;
        height: auto !important;
        padding-bottom: 30px;
    }
    .swiper-slide > div {
        padding: 32px 0 0 0;
        display: flex;
        justify-content: center;
        align-items: start;
        flex-wrap: wrap;
        height: 727px;
    }
    .swiper-slide .left-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .swiper-slide .left-container .image-container {
        width: 200px;
        height: 200px;
        /* margin: 0 auto; */
    }
    .swiper-slide .left-container .image-container img {
        width: 100%;
    }
    .swiper-slide .left-container .pc-address {
        display: none;
    }
    .swiper-slide .right-container {
        max-width: 296px;
        width: 100%;
        display: flex;
        /* align-items: center; */
        flex-direction: column;
        align-items: start;
    }
    .swiper-slide .right-container > p {
        font-family: Inter;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0.05em;
        text-align: start;
    }
    .swiper-slide .right-container .sp-address {
        display: block;
        font-family: Inter;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0.05em;
        text-align: right;
        align-self: end;
        margin-top: 16px;
    }
    .swiper-button-next {
        display: none !important;
    }
    .swiper-button-prev {
        display: none !important;
    }
    /*----------------------------------------------------------------------------------------
        day-flow
    ---------------------------------------------------------------------------------------- */
    .day-flow .container > h2 {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
        padding-left: 20px;
        margin-bottom: 40px;
    }
    .day-flow .container .card-container .card .image-container .schedule-text {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;
        margin-top: 20px;
    }
    .day-flow .container .card-container .card .text-contaier .pattern {
        font-family: Inter;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;      
    }
    .day-flow .container .card-container .card .text-contaier .title {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
        padding-left: 20px;
        width: 250px;
        margin-bottom: 16px;
    }
    .day-flow .container .card-container .card .text-contaier .list {
        font-family: Inter;
        font-size: 14px;
        font-weight: 600;
        line-height: 14px;
        text-align: left;
        padding-left: 20px;
    }

    .day-flow .container .card-container .card .text-contaier .salary-label {
        font-family: Inter;
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: -0.02em;
        text-align: left;
    }
    .day-flow .container .card-container .card .text-contaier .formula {
        font-family: Inter;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;
        padding-left: 20px;
    }
    .day-flow .container .card-container .card .text-contaier .formula span {
        font-family: Inter;
        font-size: 24px;
        font-weight: 700;
        line-height: 24px;
        text-align: left;   
    }
    .day-flow .container .card-container .card .text-contaier .formula + p {
        font-family: Inter;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        text-align: left;
        padding-left: 20px;
    }
    /*----------------------------------------------------------------------------------------
        our
    ---------------------------------------------------------------------------------------- */
    .our .sub-title {
        font-family: Inter;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        letter-spacing: 0.05em;
    }
    .our h2 {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.05em;
        margin-bottom: 10px;
    }
    .our .container {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
    .our .container > div {
        max-width: 325px;
        width: 84%;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .our .container .text-container {
        max-width: 100%;
        width: 100%;
        margin-bottom: 40px;
        margin-right: 0px;
    }
    .our .container .image-container {
        max-width: 100%;
        width: 100%;
    }
    .our .container .image-container img {
        border-radius: 0 10px 10px 0;
    }
    .our .container .text-container .label > div{
        display: flex;
        justify-content: center;
    }
    .our .container .text-container .label p {
        font-family: Inter;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        letter-spacing: 0.05em;
        text-align: center;
    }
    .our .container .text-container .label > div:first-of-type {
        margin-bottom: 16px;
    }
    .our .container .text-container > p {
        font-family: Inter;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0.05em;
        text-align: left;
    }
    /*----------------------------------------------------------------------------------------
        questiuon
    ----------------------------------------------------------------------------------------*/
    .question {
        margin: 60px 0;
    }
    .question h2 {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.05em;        
    }
    .question > div {
        margin-bottom: 40px;
    }
    .question .container {
        width: 82%;
        margin: 0 auto;
        padding-bottom: 40px;
    }
    .qa-1 summary {
        font-family: Inter;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
    }
    .qa-1 p {
        font-family: Inter;
        font-size: 12px;
        font-weight: 300;
        line-height: 16px;
        text-align: left;
    }
    /*----------------------------------------------------------------------------------------
        recruitment
    ---------------------------------------------------------------------------------------- */
    .recruitment {
        background-image: url('/assets/images/recruitment.png');
        background-size: cover;
        width: 100%;
        height: 280px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .recruitment .container {
        height: 152px;
    }
    .recruitment .container p {
        font-family: Inter;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.1em;
        text-align: center;
    }
    .recruitment .container .btn-container {
        text-align: center;
    }
}
/*----------------------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------------------- */
footer {
	margin-top:30px;
}


@media screen and (max-width: 773px) {
    .day-flow {
        margin: 40px 0;
    }
    .day-flow .container {
        max-width: 100%;
        margin: 0 2vw;
        padding: 0;
    }
    .day-flow .container > h2 {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
        padding-left: 20px;
        margin-bottom: 40px;
    }
    .day-flow .container .card-container .card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 80px;
    }
    .day-flow .container .card-container .card .text-contaier {
        max-width: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    .day-flow .container .card-container .card .image-container {
        max-width: 100%;
        width: 100%;
    }
    .day-flow .container .card-container .card .text-contaier .pattern-wrap {
        margin-bottom: 12px;
        padding-left: 20px;
    }
    .day-flow .container .card-container .card .text-contaier .pattern {
        font-family: Inter;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;        
    }
    .day-flow .container .card-container .card .text-contaier .title {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
        padding-left: 20px;
        width: 250px;
        margin-bottom: 16px;
    }
    .day-flow .container .card-container .card .text-contaier .list {
        font-family: Inter;
        font-size: 14px;
        font-weight: 600;
        line-height: 14px;
        text-align: left;
        padding-left: 20px;
    }
    .day-flow .container .card-container .card .text-contaier .salary-wrap {
        margin-bottom: 8px;
        padding-left: 20px;
    }
    .day-flow .container .card-container .card .text-contaier .salary-label {
        font-family: Inter;
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: -0.02em;
        text-align: left;
    }
    .day-flow .container .card-container .card .text-contaier .formula {
        font-family: Inter;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;
        padding-left: 20px;
    }
    .day-flow .container .card-container .card .text-contaier .formula span {
        font-family: Inter;
        font-size: 24px;
        font-weight: 700;
        line-height: 24px;
        text-align: left;        
    }
    .day-flow .container .card-container .card .text-contaier .formula + p {
        font-family: Inter;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        text-align: left;
        padding-left: 20px;
    }
    .day-flow .container .card-container .card .image-container .schedule-text {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;
        margin-top: 20px;
    }

    /*----------------------------------------------------------------------------------------
        area-card / job-search
    ---------------------------------------------------------------------------------------- */
    .area-card {
        width: 100%;
        max-width: 320px;
        height: 140px;
    }
    .job-search {
        padding: 40px 16px;
    }
    .job-search-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .job-search-form {
        flex-direction: column;
        align-items: stretch;
    }
    .job-search-field {
        min-width: 0;
    }
    .job-search-field-hint {
        position: static;
        margin-top: 4px;
    }
}