@charset "utf-8";

@media screen and (max-width:860px) {

    /* ======================================== */
    /* 全ページ共通ここから */
    /* ======================================== */

    body {
        font-size: 16px;
    }

    /* ==================== */
    /* 全体のレイアウト */
    /* ==================== */
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .btn.sp {
        display: block;
    }


    /* ==================== */
    /* ヘッダー ここから */
    /* ==================== */

    header {
        flex-direction: column;
        font-size: 18px;
        height: 80px;
    }

    .header__inner {
        flex-direction: column;
        padding-left: 0;
        height: 80px;
    }

    .header__logo-band {
        margin-right: auto;
        display: flex;
        justify-content: space-between;
        width: 50%;
        height: auto;
    }

    .header__logo {
        height: 80px;
    }

    .header__nav-button {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 50px;
        height: 50px;
        background-color: transparent;
        border: none;
        outline: none;
        z-index: 1001;
    }

    .button-menu {
        height: 60px;
    }


    .header__nav-button span i:nth-child(1) {
        top: 30%;
        left: 20%;
    }

    .header__nav-button span i:nth-child(2) {
        left: 20%;
    }

    .header__nav-button span i:nth-child(3) {
        top: 70%;
        left: 20%;
    }

    .header__nav-button.nav-show span i:nth-child(1) {
        transform: rotate(45deg);
        top: 50%;
        left: 20%;
    }

    .header__nav-button.nav-show span i:nth-child(3) {
        transform: rotate(-45deg);
        top: 50%;
        left: 20%;
    }

    .header__nav-button.nav-show span i:nth-child(2) {
        opacity: 0;
    }


    .header__nav-button span i {
        position: absolute;
        content: "";
        width: 60%;
        background-color: currentColor;
        height: 1.5px;
        top: 50%;
        left: 4px;
        transition: 0.5s ease;
    }

    .header__site-menu {
        flex-direction: column;
        width: 100%;
        margin-top: 50px;
        gap: 0;
        transform: translateX(100%);
        transition: transform 1s ease;
        color: #000;
        background-color: #fff;
        height: auto;
    }

    .header__site-menu .site-menu__list {
        justify-content: space-around;
        gap: 20px;
        font-size: 18px;
        padding-top: 50px;
    }


    .header__site-menu.nav-show {
        pointer-events: auto;
        opacity: 1;
        transform: translateX(0);
        transition: transform 1s ease;
    }

    .header__site-menu ul {
        flex-direction: column;
        transform: translateY(-50px);
        background-color: #fff;
    }

    .header__site-menu ul li {
        width: 100%;
        justify-content: flex-start;
        padding-top: 30px;
    }

    .site-menu__list li:hover {
        transform: none;
    }


    .float-menu-wrapper {
        display: flex;
        flex-direction: column;
        width: auto;
        transform: translateX(0);
        gap: 0;
        height: 200%;
        color: #000;
    }

    .float-menu {
        padding: 0;
        align-items: center;
        width: 100%;
        margin-top: 20px;
    }

    .menu-recruit,
    .menu-contact {
        background-color: #fff;
    }

    .menu-recruit:hover,
    .menu-contact:hover {
        background-color: #fff;
    }

    /* ==================== */
    /* ヘッダー ここまで */
    /* ==================== */

    /* ==================== */
    /* フッターここから */
    /* ==================== */

    footer {
        height: 300px;
        align-items: center;
        justify-content: center;
        margin: 50px auto;
        padding: 0;
        text-align: center;
        background-image: none;
        background-color: #E8EFEF;
    }

    .pagetop.sp {
        top: -19%;
    }

    .smallpc {
        display: none;
    }

    .smallsp {
        display: flex;
        position: static;
        text-align: center;
        margin: 0 auto 20px;
        justify-content: center;
    }

    .footer__content {
        flex-direction: column;
        height: 200px;
        width: 100%;
        gap: 0;
        padding-top: 0px;
    }

    .footer__access {
        text-align: center;
    }

    .footer__menu {
        background-color: #E8EFEF;
        width: 100%;
        padding-top: 3%;
    }


    .footer__nav ul {
        font-size: 14px;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        white-space: nowrap;
    }


    .footer__contact {
        background-color: #E8EFEF;
        width: 100%;
        max-width: 100%;
        height: 500px;
        clip-path: none;
        padding: 0;
    }

    .footer__contact__contain {
        margin: 130px auto 0;
    }

    /* ==================== */
    /* フッターここまで */
    /* ==================== */

    /* ======================================== */
    /* 全ページ共通ここまで */
    /* ======================================== */


    /* ======================================== */
    /* front-pageここから */
    /* ======================================== */

    /* ==================== */
    /* front-page共通アイテムここから */
    /* ==================== */

    .f-title {
        font-size: 2.5rem;
        line-height: 0.6;
    }

    .f-title>span {
        font-size: 0.9rem;
    }

    /* ==================== */
    /* front-page共通アイテムここまで */
    /* ==================== */

    /* ==================== */
    /* front-page:About Usここから */
    /* ==================== */
    .f-about {
        height: 380px;
        margin-top: 10%;
    }

    .f-about__bg {
        clip-path: polygon(calc(0px + 100px) 0,
                100% 0, 100% 70%,
                calc(100% - 75px) 100%,
                0 100%,
                0 35%);
    }

    .f-about__content {
        left: 5%;
        gap: 5%;
        width: 90%;
    }

    .f-about__img {
        width: 40%;
        min-width: 150px;
    }

    .f-about .f-title {
        line-height: 1;
    }

    .f-about .btn {
        display: flex;
        margin: auto;
    }

    /* ==================== */
    /* front-page:About Usここまで */
    /* ==================== */

    /* ==================== */
    /* front-page:Businessここから */
    /* ==================== */

    .f-biz__bg {
        clip-path: polygon(0 0,
                100% 0,
                100% 100%,
                calc(0px + 200px) 100%,
                calc(0px + 215px) calc(100% - 25px),
                0 calc(100% - 25px),
                0 calc(0px + 150px));
        ;
    }

    .f-biz__content {
        top: 10%;
        left: 10%;
        gap: 30px;
        flex-direction: column;
        align-items: flex-start;
    }

    .f-biz__link {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 60%;
        top: 45%;
        right: 5%;
    }

    /* ==================== */
    /* front-page:Businessここまで */
    /* ==================== */
    .f-recruit__bg {
        clip-path: polygon(0 0,
                100% 0,
                100% 45%,
                calc(100% - 150px) 100%,
                0 100%);
        background: url(../img/front/f-rc_bg.jpg) no-repeat center center / cover;
    }

    .f-recruit__content {
        left: 10%;
        gap: 30px;
        top: 5%;
        width: 80%
    }

    .f-recruit__content .f-title {
        margin-top: 6%;
    }

    .f-recruit__img {
        bottom: -110%;
        right: -10%;
        width: 70%;
    }

    .f-recruit .btn {
        margin-left: auto;
    }

    /* ==================== */
    /* front-page:Recruitここまで */
    /* ==================== */

    /* ==================== */
    /* front-page:Newsここから */
    /* ==================== */
    .f-news__content {
        margin-left: 4%;
    }

    .slash-news {
        padding: 0 8%;
    }

    .f-news .btn.sp {
        align-self: flex-end;
        margin: 20px auto 0;
        line-height: 3.4;
    }

    /* ==================== */
    /* front-page:Newsここまで */
    /* ==================== */

    /* ======================================== */
    /* front-pageここまで */
    /* ======================================== */

    /* ======================================== */
    /* 下層ページここから */
    /* ======================================== */

    .about .subpage__top {
        background: url(../img/about/top.jpg) no-repeat center 10% / cover;
    }

    .business .subpage__top {
        background: url(../img/business/top.jpg) no-repeat top center / cover;
    }

    .contact .subpage__top {
        background: url(../img/contact/top.jpg) no-repeat center center / cover;
    }

    /* ==================== */
    /* Businessここから */
    /* ==================== */

    .business h2 span img {
        width: 40px;
    }

    .business__content,
    .business__content.reverse {
        width: 100%;
        position: static;
        flex-direction: column;
    }

    .business__content {
        margin-left: 0;
    }

    .business__content.reverse {
        margin-right: 0;
    }

    .business__box {
        height: auto;
        gap: 20px;
        margin-top: 30px;
    }

    .business__content .business__box,
    .business__content.reverse .business__box {
        padding: 30px 0;
        align-items: center;
        text-align: center;
    }


    .business__content img,
    .business__content.reverse img {
        position: static;
        transform: translateY(0);
        margin: auto;
    }

    .business__list__wrap {
        align-items: center;
    }

    /* ==================== */
    /* Businessここまで */
    /* ==================== */

    /* ==================== */
    /* Officeここから */
    /* ==================== */
    .office__item {
        margin-top: 50px;
    }

    .office__info {
        flex-direction: column;
    }

    .office__list {
        min-width: 0px;
    }

    .office__img {
        display: flex;
        width: 100%;
        margin: 10px auto;
    }

    .office__col__sp {
        flex-direction: column;
    }

    .office__access {
        width: 100%;
        margin: auto;
        text-align: center;
    }

    ul.office__list li:nth-child(6) .office__access,
    ul.office__list li:nth-child(7) .office__access {
        margin-top: -20px;
    }

    iframe {
        display: flex;
        width: 70%;
        margin: 10px auto 0;
    }

    /* ==================== */
    /* Officeここまで　 */
    /* ==================== */


    /* ==================== */
    /* About USここから */
    /* ==================== */
    .company-table {
        font-size: 15px;
        width: 85%;
    }

    .history-table {
        width: 90%;
    }

    .history-table th {
        font-size: 15px;
    }

    .history-table td {
        font-size: 15px;
        padding-right: 3px;
    }

    /* ==================== */
    /* About USここまで˝ */
    /* ==================== */

    /* ==================== */
    /* About USここまで˝ */
    /* ==================== */

    /* ==================== */
    /* Recruitここから */
    /* ==================== */

    .recruit .subpage__top {
        height: 500px;
    }

    .recruit #blueMask {
        clip-path: polygon(0 0,
                100% 0,
                calc(100% - 340px) 100%,
                0 100%);
    }


    .recruit .subpage__top h2 span {
        font-size: 8vw;
        line-height: 1.3;
        letter-spacing: 0.05em;
    }

    .recruit .subpage__top h2 {
        left: 5%;
        top: 5%;
    }

    /* WE ARE */
    .we-are {
        margin-top: 80px;
    }

    .we-are__bg {
        clip-path: polygon(0 20%,
                calc(0px + 70px) 0,
                100% 0,
                100% 00%,
                calc(100% - 300px) 100%,
                0 100%);
    }

    .we-are__text {
        width: 80%;
        align-items: center;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }


    .we-are__p {
        font-size: clamp(10px, 4vw, 15px);
    }


    .recruit__head__img {
        position: relative;
    }

    .recruit__img {
        width: 100%;
        height: auto;
        margin-top: 80px;
    }

    .recruit__img img {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    .recruit__head__sp {
        display: flex;
        margin-top: 0;
        height: 80px;
        width: 90%;
        line-height: 60px;
        clip-path: polygon(0 0,
                100% 0,
                85% 100%,
                0 100%);
        transition: all 0.2s;
        background-image: linear-gradient(-40deg, rgb(35, 117, 147), rgb(23, 216, 255));

    }

    .recruit__head__sp h3 {
        height: 100%;
        margin: auto;
        line-height: 80px;
        font-size: 30px;
        color: #fff;
        font-weight: 900;
        font-style: italic;
        font-variation-settings:
            "wdth" 100;
    }

    .recruit__benefit {
        font-size: clamp(12px, 2.5vw, 15px);
    }

    .info__img {
        @media screen and (max-width: 779px) {
           display: none;
        }
    }

    /* ==================== */
    /* Recruitここまで */
    /* ==================== */

    /* ==================== */
    /* Newsここから */
    /* ==================== */

    .news-date {
        font-size: 18px;
        width: 110px;
    }

    .news-date::after {
        width: 35px;
        right: -25%;
    }

    .news-title {
        font-size: 15px;
    }

    /* ==================== */
    /* Newsここまで */
    /* ==================== */

    /* ==================== */
    /* articleここから */
    /* ==================== */

    .article__title {
        font-size: 28px;
    }

    .article__title::before {
        width: 60px;
        left: -35px;
        bottom: 25px;
    }

    /* ==================== */
    /* articleここまで　 */
    /* ==================== */

    /* ======================================== */
    /* 下層ページここまで */
    /* ======================================== */

}

@media screen and (max-width: 650px) {

    body {
        font-size: 15px;
    }

    .tablet {
        display: none;
    }

    .sp650 {
        display: block;
    }

    .footer__content {
        margin-top: 50px;
        height: auto;

    }

    .footer__access {
        margin-bottom: 0px;
        line-height: 1.6;
    }

    .footer__contact {
        height: 200px;
        justify-content: flex-end;
    }

    .footer__contact__contain {
        margin: 40px auto 0;
    }


    /* ======================================== */
    /* front-page:heroここから */
    /* ======================================== */


    /* ==================== */
    /* front-page:About Usここから */
    /* ==================== */
    .f-about__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        left: 15%;
        top: 3%;
        gap: 3%;
        width: 70%;
        height: 100%;
    }

    .f-about .f-title {
        line-height: 0.8;
    }

    .f-about__info {
        gap: 1%;
    }

    /* ==================== */
    /* front-page:About Usここまで */
    /* ==================== */

    /* ==================== */
    /* front-page:Businessここから */
    /* ==================== */

    .f-biz__content {
        left: 14%;
        align-items: center;
        text-align: center;
    }

    .f-biz__link {
        top: 40%;
        right: 10%;
        width: 80%;
    }

    /* ==================== */
    /* front-page:Businessここまで */
    /* ==================== */

    /* ==================== */
    /* front-page：Recruitここから */
    /* ==================== */

    .f-recruit__bg {
        background: url(../img/front/f-rc_bg__sp.jpg) no-repeat center center / cover;
        clip-path: polygon(0 0,
                100% 0,
                100% 70%,
                calc(100% - 100px) 100%,
                0 100%);
    }

    .f-recruit__content {
        top: 10%;
        right: -30%;
        flex-direction: column;
        text-align: center;
        align-items: center;
        height: 400px;
    }


    .f-recruit .btn {
        display: flex;
        margin: auto;
        width: 200px;
    }

    /* ==================== */
    /* front-page：Recruitここまで */
    /* ==================== */

    /* ==================== */
    /* front-page：Newsここから */
    /* ==================== */

    .f-news {
        margin-top: 10%;
    }

    .f-news .f-title {
        text-align: center;
    }

    .f-news__content {
        flex-direction: column;
        margin: auto;
    }

    .f-news__list {
        margin-top: 5%;
    }

    .f-news .btn.sp {
        margin: 12% auto 0;
    }

    /* ==================== */
    /* front-page：Newsここまで */
    /* ==================== */

    /* ======================================== */
    /* 下層ページここから */
    /* ======================================== */

    /* ==================== */
    /* 下層ページ共通ここから */
    /* ==================== */

    .about .subpage__top h2 {
        line-height: 1;
    }

    /* ==================== */
    /* 下層ページ共通ここまで */
    /* ==================== */

    /* ==================== */
    /* Businessここから */
    /* ==================== */

    .business__list {
        gap: 0.5;
    }

    .business__list li {
        font-size: 2.5vw;
    }

    /* ==================== */
    /* Businessここまで */
    /* ==================== */

    .office__col__sp {
        flex-direction: column;
    }

    .office__access {
        margin: auto;
        text-align: center;
        width: 100%;
    }

    iframe {
        width: 100%;
        margin-top: 30px;
    }

    /* ==================== */
    /* About USここから */
    /* ==================== */

    .about h3 {
        margin: 100px auto 0;
    }

    .company-table {
        width: 90%;
    }

    .company-table tr {
        display: flex;
        flex-direction: column;
        background-color: transparent;
    }

    .company-table th,
    .company-table td {
        width: 100%;
        text-align: center;
    }

    .company-table th {
        margin: 50px auto 0;
        background-color: #00A8CD;
        border: none;
        color: #fff;
        clip-path: none;
        width: 300px;
    }

    .company-table tr:nth-child(6) th {
        clip-path: none;
    }

    .company-table td {
        border: none;
        padding-left: 0px;
        margin: 10px auto 20px;
    }

    td.welfare-content {
        height: 650px;

        @media screen and (max-width: 550px) {
            height: 750px;

            @media screen and (max-width: 450px) {
                height: 850px;
            }
        }
    }

    .about-welfare {
        font-size: clamp(12px, 2.5vw, 15px);
        text-align: left;
    }

    .about-welfare strong {
        text-align: center;
    }

    .history-table tr {
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        background-color: transparent;
        text-align: left;
    }

    .history-table th,
    .history-table td {
        width: 100%;
    }

    .history-table th {
        height: 35px;
        width: 95%;
        clip-path: none;
        line-height: 35px;
    }

    .history-table td {
        padding-left: 5px;
    }

    /* ==================== */
    /* About USここまで˝ */
    /* ==================== */

    /* ==================== */
    /* Recruitここから */
    /* ==================== */
    .recruit #blueMask {
        clip-path: polygon(0 0,
                100% 0,
                calc(100% - 300px) 100%,
                0 100%);
    }

    .recruit .subpage__top {
        height: 500px;
    }

    .recruit .subpage__top h2 span {
        font-size: 40px;
    }

    .recruit .subpage__top h2 {
        writing-mode: vertical-rl;
    }

    .we-are {
        height: 650px;
    }


    .recruit__contain {
        flex-direction: column-reverse;
        margin: 30px auto 0;
    }

    .recruit__info {
        height: auto;
        margin-bottom: 30px;
        @media screen and (max-width: 779px) {
            height: 1200px;
        }
    }

    .recruit__info h4 {
        font-family: "Zen Old Mincho", serif;
        font-weight: 900;
        font-style: normal;
    }

    .info__img {
        width: 80%;
        height: 110px;
        margin: auto;
    }

    /* ==================== */
    /* Recruitここまで */
    /* ==================== */

    /* ==================== */
    /* Newsここから */
    /* ==================== */

    .news-list {
        align-items: center;
        margin: 50px auto 0;
        width: 90%;
        min-width: 0px;
    }

    .news-item {
        flex-direction: column;
        align-items: flex-start;
        width: 80%;
    }

    .arrow {
        display: none;
    }

    .news-title {
        margin-left: 0px;
    }

    .news-pagenation {
        margin: 30px auto 50px;
    }

    /* ==================== */
    /* Newsここまで */
    /* ==================== */

    /* ==================== */
    /* articleここから */
    /* ==================== */

    .article__title {
        font-size: 20px;
        margin: 25px auto 25px 5px;
    }

    .article__title::before {
        display: none;
    }

    .article__date {
        font-size: 12px;
        position: static;
        line-height: 1.1;
    }

    .article__content {
        margin-bottom: 25px;
    }

    .article__text {
        margin: 25px auto;
    }

    .article__text p {
        font-size: 15px;
    }

    .article .btn {
        margin-bottom: 25px;
    }

    /* ==================== */
    /* articleここまで　 */
    /* ==================== */


    .policy .subpage__top h2 {
        line-height: 1;
    }

    .policy__head {
        font-size: 10px;
        padding: 10px 0 10px 10px;
    }

    /* ======================================== */
    /* 下層ページここまで */
    /* ======================================== */

    /* 横スライドを縦スライドに */
    .js-fadein,
    .js-fadeinR {
        opacity: 0;
        transform: translateY(100px);
    }

    .js-fadein.fadein,
    .js-fadeinR.fadeinR {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 1s ease, transform 1.5s ease;
    }

}