@charset "utf-8";

@media screen and (min-width: 1001px) {
    body {
        background-color: #ffffff;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: 16px;
    }

    @font-face {
        font-family: 'Zen Kaku Gothic New';
        src: url(myfont/ZenKakuGothicNew-Light.ttf) format('ttf'),
            url(myfont/ZenKakuGothicNew-Light.woff) format(woff);
        font-display: swap;
    }

    header,
    footer,
    nav,
    a,
    body,
    div,
    h3,
    p {
        color: #000000;
        margin: 0;
        padding: 0;
    }

    #logo,#logo1 {
        width: 250px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        z-index: 9999;
        top: 0;
    }

    #logo1.DownMove {
        animation-name: fadeInAnime;
        animation-fill-mode: backwards;
        animation-duration: 1.2s;
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        opacity: 1;
    }

    #logo1 {
        opacity: 0;
    }

    #logo a img {
        width: 150px;
        height: 50px;
    }

    #logo1 a img {
        width: 150px;
        height: 50px;
    }

    .openbtn {
        position: fixed;
        z-index: 9999;
        cursor: pointer;
        right: 60px;
        width: 60px;
        height: 60px;
        top: 10px;
        background-color: #000000;
    }

    .openbtn span {
        left: 16px;
    }

    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 20px;
        height: 3px;
        background: #ffffff;
        width: 20px;
    }

    .openbtn span:nth-of-type(2) {
        top: 29px;
    }

    .openbtn span:nth-of-type(3) {
        top: 24px;
    }

    .openbtn span:nth-of-type(1) {
        top: 34px;
    }

    #bar {
        width: 60px;
        height: 100%;
        border-right: 0.5px #000000 solid;
        position: fixed;
        background-color: #ffffff;
        z-index: 9999;
        top: 0;
    }

    body.mainblur #bar {
        border: none;
    }

    /*activeクラスが付与されると線が回転して×に*/
    .openbtn a.active span:nth-of-type(1) {
        top: 22px;
        left: 20px;
        transform: translateY(6px) rotate(-45deg);
        width: 20px;
    }

    .openbtn a.active span:nth-of-type(2) {
        opacity: 0;
        /*真ん中の線は透過*/
    }

    .openbtn a.active span:nth-of-type(3) {
        top: 34px;
        left: 20px;
        transform: translateY(-6px) rotate(45deg);
        width: 20px;
    }

    .panelactive {
        width: 100%;
    }

    #g-nav.panelactive {
        right: 0;
        z-index: 99;
    }

    #g-nav {
        position: fixed;
        z-index: 1;
        right: -120%;
        width: 430px;
        height: 100%;
        background-color: rgba(00, 00, 00, 0.3);
        transition: all 0.6s;
        top: 0;
    }

    #g-nav li a.panelactive {
        color: #000000;
    }

    #g-nav.panelactive #g-nav-list {
        /*クラスが付与されたら出現*/
        display: block;
    }


    #g-nav-list {
        position: absolute;
        z-index: 999;
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*ナビゲーション*/
    #g-navi {
        padding: 0;
        margin: 0;
        width: 100%;
        padding-right: 46px;
    }


    #g-nav.panelactive ul {
        opacity: 1;
        z-index: 999;
        list-style-type: none;
        text-align: right;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    #g-nav ul {
        position: absolute;
        top: 160px;
    }


    #g-nav ul li a {
        text-decoration: none;
        color: #ffffff;
    }

    .solid-s, .solid, .solid-1, .solid1 {
        padding-bottom: 40px;
        padding-right: 60px;
        font-size: 30px;
    }

    .solid-s,
    .solid,
    .solid1 {
        padding-bottom: 40px;
    }

    .solid_sub {
        font-size: 16px;
        color: #ffffff;
    }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity: 1;
    }

    /*背景が出現後にナビゲーションliを表示
レイアウトによって調整・削除可*/
    body.mainblur .solid,
    body.mainblur .solid-s,
    body.mainblur .solid1,
    body.mainblur .solid-1 {
        animation-name: fade;
        /*0.2秒遅らせて出現*/
        animation-duration: 1.2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    #logo-1 {
        display: none;
    }

    #mailbtn a {
        display: block;
        width: 60px;
        height: 60px;
    }

    #mail1 {
        font-size: 18px;
        left: 50%;
        transform: translate(-50%, 0%);
        top: 18px;
        position: relative;
        width: 0;
        height: 0;
        border-right: 0.8em solid transparent;
        border-left: 0.8em solid transparent;
        border-top: 0.65em solid #ffffff;
        border-radius: 0.1em;
    }

    /* 下 */
    #mail1::before {
        position: absolute;
        content: "";
        top: -0.5em;
        left: -0.8em;
        width: 0;
        height: 0;
        border-top: 0.65em solid transparent;
        border-bottom: 0.6em solid #ffffff;
        border-left: 0.8em solid #ffffff;
        border-right: 0.8em solid #ffffff;
        border-radius: 0 0 0.1em 0.1em;
    }

    #mailcomment {
        color: #ffffff;
        font-size: 16px;
        width: 100px;
        position: absolute;
        left: -48px;
        top: 27px;
    }

    #top_img img {
        width: 100%;
        height: auto;
    }

    .msg {
        font-size: 30px;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #shop_img1-1,
    #shop_img2-1,
    #shop_img-1 {
        display: none;
    }

    #shop_img1,
    #shop_img2,
    #shop_img {
        opacity: 0;
        position: relative;
    }

    #shop_img1,
    #shop_img2,
    #shop_img {
        overflow: hidden;
    }

    #shop_img1 a img:hover,
    #shop_img2 a img:hover,
    #shop_img a img:hover {
        transform: scale(1.1);
        opacity: 0.7;
        transition: all 0.5s;
    }

    .img_title {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 47%;
        color: #ffffff;
        font-size: 30px;
        font-weight: bold;
    }



    .img_title1 {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 63%;
        color: #ffffff;
        font-size: 26px;
        font-weight: bold;
    }

    .img_title1 img {
        width: 60px!important;
        height: 60px!important;
    }


    .img_title2 {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 62%;
        color: #ffffff;
        font-size: 30px;
        font-weight: bold;
    }

    #shop_img1.fadein1,
    #shop_img2.fadein1,
    #shop_img.fadein1 {
        animation: fadeIn1 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
        animation-delay: 0.2s;
    }

    @keyframes fadeIn1 {
        0% {
            opacity: 0;
            transform: translateX(120px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }


    .msg-01,
    .msg-02 {
        text-shadow: 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 2px #000000, 0 0 5px #000000;
    }

    .img-03.cover::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .7);
    }

    .msg-03 {
        z-index: 1;
    }

    #top_img {
        position: relative;
        margin: 0 auto;
        height: 1000px;
        overflow: hidden;
    }

    #slider1,
    #slider2,
    #slider3 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 1000px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #slider1 {
        animation: slide-animation-01 15s infinite;
        background-image: url('img/ohako.webp');
    }

    #slider2 {
        animation: slide-animation-02 15s infinite;
        background-image: url('img/vansan.webp');
    }

    #slider3 {
        animation: slide-animation-03 15s infinite;
        background-image: url('img/jimdinrou.webp');
    }

    @keyframes slide-animation-01 {
        0% {
            opacity: 1;
            transform: scale(1.0);
        }

        30% {
            opacity: 1;
        }

        40% {
            opacity: 0;
            transform: scale(1.12);
        }

        90% {
            opacity: 0
        }

        100% {
            opacity: 1;
            transform: scale(1.0);
        }
    }

    @keyframes slide-animation-02 {
        0% {
            opacity: 0;
        }

        30% {
            opacity: 0;
            transform: scale(1.1);
        }

        40% {
            opacity: 1;
        }

        60% {
            opacity: 1;
        }

        70% {
            opacity: 0;
            transform: scale(1.0);
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes slide-animation-03 {
        0% {
            opacity: 0;
        }

        60% {
            opacity: 0;
            transform: scale(1.0);
        }

        70% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            transform: scale(1.1);
        }
    }

    #language img {
        width: 45px;
        height: 45px;
    }

    .company_overview2.fadein2 {
        animation: fadeIn2 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
        animation-delay: 0.2s;
    }

    #company_overview-r.active1 {
        opacity: 0;
    }

    #border2.fadein2 {
        animation: fadeIn2 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
        animation-delay: 0.2s;
    }


    #border2 {
        opacity: 0;
    }

    @keyframes fadeIn2 {
        0% {
            opacity: 0;
            transform: translateY(100px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #company_overview-r {
        background-color: #ffffff;
        width: 100%;
        height: 80px;
        position: relative;
        z-index: 1;
    }

    #company_overview-1 {
        padding: 0 0 115px 60px;
    }

    #company_overview-2 {
        max-width: 1100px;
        width: 98%;
        margin: 0 auto;
    }

    .inner {
        position: relative;
        display: flex;
        align-items: baseline;
    }

    .borderin {
        border-bottom: 1px #999 solid;
        animation: border_anim 1.5s linear forwards;
    }

    .border {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        max-width: 1100px;
        width: 98%;
        margin: 0 auto;
    }

    @keyframes border_anim {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }

    .top_title1 h3,
    .top_title1-1 h3 {
        font-size: 30px;
    }

    .fade {
        transition: all 1200ms;
        opacity: 0.1;
        visibility: hidden;
        transform: translate(0px, 50px);
    }

    .fadein {
        opacity: 1;
        visibility: visible;
        transform: translate(0px, 0px);
    }

    .fadeUpTrigger {
        opacity: 0;
    }

    .title {
        margin: 10px 0 28px 0;
        color: #ffffff;
        font-size: 23px;
    }

    #company {
        position: relative;
        padding-top: 80px;
    }

    table {
        border-spacing: 0;
        max-width: 1100px;
        width: 98%;
        margin: 0 auto;
    }

    tbody {
        width: 730px;
        border-spacing: 0;
    }

    .td_title {
        padding: 26px 0;
        width: 192px;
        border-bottom: solid 0.2px #333333;
    }

    .td_title1 {
        border-bottom: solid 0.2px #333333;
        padding: 26px 0;
    }

    #company_overview2 {
        padding-top: 80px;
    }

    #company_history {
        padding: 80px 0 115px 60px;
    }

    #company_overview-2 {
        max-width: 1100px;
        width: 98%;
        margin: 0 auto;
    }

    #company_history1 {
        max-width: 1100px;
        width: 98%;
        margin: 0 auto;
    }

    .company_history2 {
        padding-top: 80px;
    }

    #border2 {
        padding: 0;
    }

    .td_title-1,
    .td_title-2 {
        padding: 24px 16px 24px 16px;
        width: 192px;
        float: left;
    }

    .td_title2,.td_title3 {
        padding: 26px 0 26px 16px;
        position: relative;
        border-bottom: 1px solid #000000;
    }


    .td_title2:before {
        position: absolute;
        content: "";
        height: 30%;
        width: 2px;
        background: #333333;
        top: 0;
        bottom: 0;
        left: 205px;
        margin: auto;
    }

    .td_title3:before {
        position: absolute;
        content: "";
        height: 30%;
        width: 2px;
        background: #000000;
        top: 0;
        bottom: 0;
        left: 205px;
        margin: auto;
    }

    #shop_list {
        padding: 80px 0 115px 60px;
    }

    #shop_list1 {
        max-width: 1100px;
        width: 98%;
        margin: 0 auto;
    }

    #shop_img img,
    #shop_img1 img,
    #shop_img2 img {
        width: 100%;
        height: 284px;
    }

    #shop_img1,
    #shop_img2 {
        padding-top: 95px;
    }

    .shopimg {
        padding-top: 80px;
    }

    ul {
        list-style-type: none;
    }

    .shop-1,
    .shop-2,
    .shop-3,
    .shop-4,
    .shop-5 {
        display: flex;
    }

    .shopmenu {
        display: flex;
        padding-top: 40px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .shopmenu1 {
        display: flex;
        padding-top: 65px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .shop_title.change {
        text-align: center;
        background-color: #ffffff;
        width: 400px;
        height: 50px;
        border-radius: 50px;
        border: #000000 1px solid;
        margin: 0 auto;
        position: relative;
        z-index: 9;
        transition: all 0.6s linear;
        transition-delay: 1s;
    }

    .shop_title {
        text-align: center;
        background-color: #ffffff;
        width: 400px;
        height: 50px;
        border: #000000 1px solid;
        margin: 0 auto;
        position: relative;
        z-index: 9;
    }

    .shop_area {
        padding: 45px 40px 38px 40px;
        position: relative;
        top: -25px;
        width: 440px;
    }

    .shop1 {
        width: 100px;
    }

    .shop3 {
        width: 100%;
        overflow-wrap: anywhere;
    }

    .shop1 a,
    .shop2 a {
        text-decoration: none;
    }

    .shop-1,
    .shop-2,
    .shop-3,
    .shop-4 {
        margin-bottom: 15px;
    }

    dl,
    ul {
        margin: 0;
        width: 100%;
    }

    .mainshop {
        line-height: 3;
    }

    #shop_list {
        padding: 80px 0 115px 60px;
    }

    #recruit1 {
        max-width: 1100px;
        width: 98%;
        margin: 0 auto;
    }

    #recruit_message {
        padding-top: 80px;
    }

    #recruit_message p {
        text-align: center;
    }

    #message_title {
        font-size: 23px;
        margin-bottom: 10px;
    }

    #message {
        margin-top: 28px;
    }

    #message1 {
        display: none;
    }

    .recruit_area1,
    .recruit_area {
        display: flex;
    }

    .recruit-contents1 {
        padding-top: 80px;
    }

    .recruit-contents {
        padding: 40px 50px 40px 70px;
    }

    .recruit_title1 {
        font-size: 23px;
        margin-bottom: 15px;
    }

    .recruit_img img,
    .recruit_img1 img {
        vertical-align: bottom;
        height: 100%;
        width: 415px;
    }

    .recruit_area-1 {
        padding-top: 40px;
    }

    #benefits_message p {
        text-align: center;
    }

    #benefits_title {
        font-size: 23px;
    }

    #benefits_message {
        padding-top: 80px;
    }

    .benefits_area {
        padding-top: 40px;
    }

    .benefits1 img {
        width: 167px;
        height: 167px;
    }

    .benefits1 {
        width: 515px;
        height: 515px;
        border-radius: 500px;
        border: #000000 1px solid;
    }

    .benefits1.maru {
        position: relative;
        /*リンクの形状*/
        display: inline-block;
        text-decoration: none;
        color: #333;
        outline: none;
    }

    /*波形の設定*/
    .benefits1.maru::before {
        content: '';
        /*絶対配置で波形の位置を決める*/
        position: absolute;
        left: 21%;
        top: 100px;
        /*波形の形状*/
        border: 1px solid #000;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        /*はじめは不透明*/
        opacity: 1;
        /*アニメーションの設定*/
        animation: 2s circleanime2 forwards;
    }

    /*波形が広がるアニメーション*/
    @keyframes circleanime2 {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    .benefits-contents {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    .benefits-bottom {
        padding-bottom: 40px;
    }

    .benefits1 {
        position: relative;
    }

    .benefits1 img {
        position: absolute;
        top: 50px;
        left: 162px;
    }

    .benefits_title,
    .benefits_title1 {
        font-size: 23px;
        padding-top: 250px;
    }

    .benefits_title.active1,
    .benefits_title1.active1 {
        animation: wobble-hor-bottom 0.8s ease-in-out both;
    }

    @keyframes wobble-hor-bottom {

        0%,
        100% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
        }

        15% {
            -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
        }

        30% {
            -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
        }

        45% {
            -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
        }

        60% {
            -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
        }

        75% {
            -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
        }
    }

    .benefits1 p {
        text-align: center;
    }

    .sub_benefits {
        padding-top: 20px;
    }

    .sub_benefits1 {
        padding-top: 20px;
    }

    footer {
        padding: 40px 0 40px 60px;
        border-top: #000000 solid 1px;
    }

    .btn_line a {
        position: fixed;
        right: 3%;
        bottom: 30px;
        height: 22px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;
        max-width: 220px;
        padding: 5px 10px;
        color: #000000;
        transition: all 0.3s;
        font-weight: 600;
        background-color: rgba(225, 225, 225, 0.2);
        border: #000000 0.5px solid;
        text-decoration: none;
        z-index: 1;
    }

    .btn_line a:before,
    .btn_line a:after {
        box-sizing: inherit;
        content: "";
        position: absolute;
        border: 2px solid transparent;
        width: 0;
        height: 0;
    }

    .btn_line a:after {
        bottom: -3px;
        right: 0;
    }

    .btn_line a:before {
        top: -3px;
        left: 0;
    }

    #finish_nav ul li {
        text-align: center;
        list-style-type: none;
    }

    #finish_nav ul li a {
        text-decoration: none;
    }

    #finish_nav ul {
        display: flex;
        list-style-type: none;
        margin: 0;
        text-align: center;
        padding: 0;
        font-size: 16px;
        justify-content: center;
    }

    .last img {
        width: 30px;
        height: 30px;
        vertical-align: bottom;
    }

    #finish1 {
        display: none;
    }

    #finish_nav ul li ::before {
        content: "";
    }

    .secand ::after {
        content: "|";
        margin: 8px;
    }

    .last {
        margin-left: 16px;
    }

    #finish p {
        text-align: center;
        font-size: 14px;
        color: #000000;
    }

    #recruit {
        padding: 80px 0 155px 60px;
    }

    .btn_line a:hover {
        background-color: #000000;
        color: #ffffff;
    }

    .btn_line a:hover:before,
    .btn_line a:hover:after {
        width: 100%;
        height: 100%;
    }

    .btn_line a:hover:before {
        border-top-color: #000000;
        border-right-color: #000000;
        transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
    }

    .btn_line a:hover:after {
        border-bottom-color: #000000;
        border-left-color: #000000;
        transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
    }

    #mailbtn:hover {
        background-color: #333333;
    }

    #mailbtn {
        width: 60px;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.5);
        border: #ffffff 1px solid;
        position: fixed;
        right: 121px;
        top: 9px;
        z-index: 9999999;
        transition: all 0.3s;
    }

    #shop_img-1,
    #shop_img1-1,
    #shop_img2-1 {
        display: none;
    }

    .mainblur {
        overflow: hidden;
    }

    .openbtn a {
        display: block;
        position: relative;
        z-index: 99999999999999999;
        width: 60px;
        height: 60px;
    }

    #container {
        position: relative;
        z-index: 9;
        background-color: #ffffff;
    }

    /*==================================================
　5-3-11 左右から線が伸びて枠線になる
===================================*/

    .shop_border {
        /*線の基点とするためrelativeを指定*/
        position: relative;
    }

    .shop_border1-1 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
    }

    .shop_border1-2 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
    }

    /*線の基点位置*/
    .shop_border1::before,
    .shop_border1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.4s;
    }

        /*線の基点位置*/
        .shop_border-1::before,
        .shop_border-1::after {
            content: "";
            /*絶対配置で線の位置を決める*/
            position: absolute;
            /*線の形状*/
            width: 0;
            height: 1px;
            background: #000000;
            /*アニメーションの指定*/
            transition: all 0.6s linear;
            transition-delay: 0.4s;
        }

    /*線の基点位置*/
    .shop_border1-1::before,
    .shop_border1-1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.4s;
    }

    .shop_border1-2::before,
    .shop_border1-2::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.4s;
    }

    .shop_border1::before {
        right: 0;
        top: 235px;
    }

    .shop_border1::after {
        left: 0;
        bottom: 295px;
    }

    .shop_border-1::before {
        right: 0;
        top: 258px;
    }

    .shop_border-1::after {
        left: 0;
        bottom: 319px;
    }

    .shop_border1-1::before {
        right: 0;
        top: 260px;
    }

    .shop_border1-1::after {
        left: 0;
        bottom: 320px;
    }

    .shop_border1-2::before {
        right: 0;
        top: 259px;
    }

    .shop_border1-2::after {
        left: 0;
        bottom: 319px;
    }

    /*線の基点位置2 spanタグ*/

    .shop_border2 {
        display: block;
    }

    .shop_border2::before,
    .shop_border2::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 1px;
        height: 0;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.4s linear;
    }

    .shop_border2::before {
        left: 0;
        top: -30px;
    }

    .shop_border2::after {
        right: 0;
        bottom: 30px;
    }

    /*現在地とhoverした際の線の変化*/

    .shop_border.current .shop_border1::before,
    .shop_border.current .shop_border1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    .shop_border.current .shop_border-1::before,
    .shop_border.current .shop_border-1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    .shop_border.current .shop_border1-1::before,
    .shop_border.current .shop_border1-1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    .shop_border.current .shop_border1-2::before,
    .shop_border.current .shop_border1-2::after {
        width: 100%;
        /*横幅を100%に*/
    }

    .shop_border.current .shop_border2::before,
    .shop_border.current .shop_border2::after {
        height: 100%;
        /*縦幅を100%に*/
    }

    /* Loading背景画面設定　*/
    #splash {
        /*fixedで全面に固定*/
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: #ffffff;
        text-align: center;
        color: #ffffff;
        z-index: 99999999999999999999999;
    }

    /* Loading画像中央配置　*/
    #splash_logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Loading アイコンの大きさ設定　*/
    #splash_logo svg {
        width: 300px;
    }

    /*=============== SVGアニメーション内の指定 =================*/

    /*アニメーション前の指定*/
    #mask path {
        fill-opacity: 0;
        /*最初は透過0で見えない状態*/
        transition: fill-opacity .5s;
        /*カラーがつく際のアニメーション0.5秒で変化*/
        fill: none;
        /*塗りがない状態*/
        stroke: #333;
        /*線の色*/
    }

    /*アニメーション後に.doneというクラス名が付与された時の指定*/
    #mask.done path {
        fill: #333;
        /*塗りの色*/
        fill-opacity: 1;
        /*透過1で見える状態*/
        stroke: none;
        /*線の色なし*/
    }

    /*========= レイアウトのためのCSS ===============*/


    a {
        color: #333;
    }

    a:hover {
        text-decoration: none;
    }


    /*枠線が伸びて出現*/
    .line1.line {
        position: relative;
        /* 枠線が書かれる基点*/
    }

    .lineinappear {
        display: flex;
    }

    /*上下線*/
    .line1.line::before,
    .line1.line::after {
        position: absolute;
        content: "";
        width: 0;
        height: 1px;
        background: #333;
        /* 枠線の色*/
    }

    /*左右線*/
    .line1 .line2::before,
    .line1 .line2::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 0;
        background: #333;
        /* 枠線の色*/
    }

    /*上線*/
    .line1.line::before {
        top: 0;
        left: 0;
        animation: lineAnime .5s linear 0s forwards;
        /*表示されて0秒後に上線が0.5秒かけて表示*/
    }

    /*右線*/
    .line1 .line2::before {
        top: 0;
        right: 0;
        animation: lineAnime2 .5s linear .5s forwards;
        /*表示されて0.5秒後に右線が0.5秒かけて表示*/
    }

    /*下線*/
    .line1.line::after {
        bottom: 0;
        right: 0;
        animation: lineAnime .5s linear 1s forwards;
        /*表示されて1秒後に下線が0.5秒かけて表示*/
    }

    /*左線*/
    .line1 .line2::after {
        bottom: 0;
        left: 0;
        animation: lineAnime2 .5s linear 1.5s forwards;
        /*表示されて1.5秒後に左線が0.5秒かけて表示*/
    }

    @keyframes lineAnime {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }

    @keyframes lineAnime2 {
        0% {
            height: 0%;
        }

        100% {
            height: 100%;
        }
    }

    /*枠線内側の要素*/
    .line1.line .lineinappear {
        animation: lineInnerAnime .5s linear 1.5s forwards;
        /*1.5秒後に中央のエリアが0.5秒かけて表示*/
    }

    .text-fadein span {
        display: inline-block;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-fadein span:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        transition: all 0.6s linear;
    }

    .text-fadein.active span:before {
        width: 0%;
    }

    .td_title1 a {
        text-decoration: none;
    }

    .td_title1 a:hover {
        opacity: 0.5;
    }

    .shop1 a:hover,
    .shop2 a:hover,
    dl a:hover {
        opacity: 0.5;
    }

    .shop1 a,
    .shop2 a,
    dl a {
        text-decoration: none;
    }

    .recruit_img a img:hover {
        opacity: 0.7;
        transform: scale(1.1);
        transition: all 0.5s;
    }

    .recruit_img {
        overflow: hidden;
        width: 415px;
        height: 100%;
    }

    #last_contact {
        padding-top: 40px;
    }

    /*#last_contact1 p {
        opacity: 0;
    }

    #last_contact1.active2 p {
        opacity: 1;
    }

    #last_contact1.active2 {
        width: 300px;
        height: 60px;
        margin: 0 auto;
        background-image: linear-gradient(#000000, #000000), linear-gradient(#000000, #000000), linear-gradient(#000000, #000000), linear-gradient(#000000, #000000), linear-gradient(#666666, #666666), linear-gradient(#666666, #666666), linear-gradient(#666666, #666666), linear-gradient(#666666, #666666);
        background-size: 1px calc(100% - 8px), 1px calc(100% - 8px), calc(100% - 8px) 1px, calc(100% - 8px) 1px, 1px calc(100% - 8px), 1px calc(100% - 8px), calc(100% - 8px) 1px, calc(100% - 8px) 1px;
        background-position: 8px 0px, 100% 0px, 8px 0px, 8px calc(100% - 8px), 0px 8px, calc(100% - 8px) 8px, 0px 8px, 0px 100%;
        background-repeat: no-repeat;
        animation: dblsqa 10s linear 0s forwards;
        animation-delay: 0.5s;
    }

    @keyframes dblsqa {
        0% {
            background-position: 8px 0px, 100% 0px, 8px 0px, 8px calc(100% - 8px), 0px 8px, calc(100% - 8px) 8px, 0px 8px, 0px 100%;
        }

        5% {
            background-position: 0px 0px, calc(100% - 8px) 0px, 0px 0px, 0px calc(100% - 8px), 8px 8px, 100% 8px, 8px 8px, 8px 100%;
        }

        10% {
            background-position: 0px 8px, calc(100% - 8px) 8px, 0px 8px, 0px 100%, 8px 0px, 100% 0px, 8px 0px, 8px calc(100% - 8px);
        }

        50% {
            background-position: 0px 8px, calc(100% - 8px) 8px, 0px 8px, 0px 100%, 8px 0px, 100% 0px, 8px 0px, 8px calc(100% - 8px);
        }

        55% {
            background-position: 8px 8px, 100% 8px, 8px 8px, 8px 100%, 0px 0px, calc(100% - 8px) 0px, 0px 0px, 0px calc(100% - 8px);
        }

        60% {
            background-position: 8px 0px, 100% 0px, 8px 0px, 8px calc(100% - 8px), 0px 8px, calc(100% - 8px) 8px, 0px 8px, 0px 100%;
        }
    }

    #last_contact a {
        text-decoration: none;
    }

    #last_contact1 p {
        width: 300px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }*/

    .img_title2 img {
        width: 20px !important;
        height: 110px !important;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 61%;
    }

    .img_title img {
        width: 80px !important;
        height: 80px !important;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 47%;
    }

    #last_contact {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        width: 300px;
        margin: 0 auto;
    }

    #last_contact1 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        z-index: 99;
        transition: all 0.2s linear;
        top: 0px;
        left: 0px;
    }

    #last_contact1:hover {
        top: 6px;
        left: 5px;
    }

    #last_contact2 p {
        text-align: center;
    }

    #last_contact a {
        text-decoration: none;
    }

    #last_contact1::before,
    #last_contact1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.8s;
    }

    #last_contact1::before {
        right: 0;
        top: 60px;
    }

    #last_contact1::after {
        left: 0;
        bottom: 59px;
    }

    /*線の基点位置2 spanタグ*/

    #last_contact2 {
        display: block;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #last_contact2::before,
    #last_contact2::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 1px;
        height: 0;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.8s linear;
    }

    #last_contact2::after {
        right: 0;
        top: 0px;
    }

    #last_contact2::before {
        left: 0;
        bottom: 0px;
    }

    /*現在地とhoverした際の線の変化*/

    #last_contact.active2 #last_contact1::before,
    #last_contact.active2 #last_contact1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    #last_contact.active2 #last_contact2::before,
    #last_contact.active2 #last_contact2::after {
        height: 100%;
        /*縦幅を100%に*/
    }

    #last_contact-1 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        width: 300px;
        margin: 0 auto;
    }

    #last_contact1-1 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        top: -60px;
    }
    
    #last_contact1-1::before,
    #last_contact1-1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.8s linear;
        transition-delay: 0.4s;
    }

    #last_contact1-1::before {
        right: -6px;
        top: 6px;
    }

    #last_contact1-1::after {
        left: 6px;
        bottom: -7px;
    }

    /*線の基点位置2 spanタグ*/

    #last_contact2-1 {
        display: block;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #last_contact2-1::before,
    #last_contact2-1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 1px;
        height: 0;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.8s linear;
        transition-delay: 0.4s;
    }

    #last_contact2-1::before {
        left: 5px;
        top: 6px;
    }

    #last_contact2-1::after {
        right: -5px;
        bottom: -6px;
    }

    /*現在地とhoverした際の線の変化*/

    #last_contact-1.active2 #last_contact1-1::before,
    #last_contact-1.active2 #last_contact1-1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    #last_contact-1.active2 #last_contact2-1::before,
    #last_contact-1.active2 #last_contact2-1::after {
        height: 100%;
        /*縦幅を100%に*/
    }
    #closebg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 1;
    }
    .box {
        width: 1080px;
        height: 284px;
        overflow: hidden;
    }
}

















@media screen and (max-width: 1000px) {
    body {
        background-color: #ffffff;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: 14px;
    }

    @font-face {
        font-family: 'Zen Kaku Gothic New';
        src: url(myfont/ZenKakuGothicNew-Light.ttf) format('ttf'),
            url(myfont/ZenKakuGothicNew-Light.woff) format(woff);
        font-display: swap;
    }

    header,
    footer,
    nav,
    a,
    body,
    div,
    h3,
    p {
        color: #000000;
        margin: 0;
        padding: 0;
    }

    #logo {
        padding-left: 20px;
    }

    #logoarea {
        width: 100%;
        height: 60px;
        background-color: #ffffff;
        align-items: center;
        position: fixed;
        top: 0;
        z-index: 9;
        display: flex;
    }

    #logo a img {
        width: 105px;
        height: 35px;
    }

    #mailbtn {
        width: 60px;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        right: 60px;
        top: 0px;
        z-index: 99;
    }

    #mailcomment {
        display: none;
    }

    #mailbtn a {
        display: inline-block;
        width: 60px;
        height: 60px;
    }

    #mail1 {
        font-size: 20px;
        left: 50%;
        transform: translate(-50%, 0%);
        top: 18px;
        position: relative;
        width: 0;
        height: 0;
        border-right: 0.8em solid transparent;
        border-left: 0.8em solid transparent;
        border-top: 0.6em solid #ffffff;
        border-radius: 0.1em;
    }

    #mail1::before {
        position: absolute;
        content: "";
        top: -0.5em;
        left: -0.8em;
        width: 0;
        height: 0;
        border-top: 0.6em solid transparent;
        border-bottom: 0.6em solid #ffffff;
        border-left: 0.8em solid #ffffff;
        border-right: 0.8em solid #ffffff;
        border-radius: 0 0 0.1em 0.1em;
    }

    #mailcomment {
        color: #ffffff;
        font-size: 16px;
        width: 100px;
        position: absolute;
        left: -39px;
        top: 27px;
    }

    #top_img {
        position: relative;
        margin: 0 auto;
        height: 610px;
        overflow: hidden;
        top: 60px;
    }

    #slider1,
    #slider2,
    #slider3 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 610px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .msg-01,
    .msg-02 {
        text-shadow: 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 2px #000000, 0 0 5px #000000;
    }

    .msg {
        font-size: 23px;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #slider1 {
        animation: slide-animation-01 15s infinite;
        background-image: url('img/ohako2.webp');
    }

    #slider2 {
        animation: slide-animation-02 15s infinite;
        background-image: url('img/vansan3.webp');
    }

    #slider3 {
        animation: slide-animation-03 15s infinite;
        background-image: url('img/jimdinrou3.webp');
    }

    @keyframes slide-animation-01 {
        0% {
            opacity: 1;
            transform: scale(1.0);
        }

        30% {
            opacity: 1;
        }

        40% {
            opacity: 0;
            transform: scale(1.12);
        }

        90% {
            opacity: 0
        }

        100% {
            opacity: 1;
            transform: scale(1.0);
        }
    }

    @keyframes slide-animation-02 {
        0% {
            opacity: 0;
        }

        30% {
            opacity: 0;
            transform: scale(1.1);
        }

        40% {
            opacity: 1;
        }

        60% {
            opacity: 1;
        }

        70% {
            opacity: 0;
            transform: scale(1.0);
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes slide-animation-03 {
        0% {
            opacity: 0;
        }

        60% {
            opacity: 0;
            transform: scale(1.0);
        }

        70% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            transform: scale(1.1);
        }
    }

    .openbtn {
        position: fixed;
        z-index: 99999;
        cursor: pointer;
        right: 0;
        width: 60px;
        height: 60px;
        top: 0px;
        right: 0px;
        background-color: #000000;
        display: flex;
    }

    .openbtn span:nth-of-type(1) {
        top: 34px;
    }

    .openbtn span:nth-of-type(2) {
        top: 29px;
    }

    .openbtn span:nth-of-type(3) {
        top: 24px;
    }

    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 20px;
        height: 3px;
        background: #ffffff;
        width: 20px;
    }

    .openbtn span {
        left: 19px;
    }

    /*activeクラスが付与されると線が回転して×に*/
    .openbtn a.active span:nth-of-type(1) {
        top: 22px;
        left: 20px;
        transform: translateY(6px) rotate(-45deg);
        width: 20px;
    }

    .openbtn a.active span:nth-of-type(2) {
        opacity: 0;
        /*真ん中の線は透過*/
    }

    .openbtn a.active span:nth-of-type(3) {
        top: 34px;
        left: 20px;
        transform: translateY(-6px) rotate(45deg);
        width: 20px;
    }

    .openbtn a.active {
        position: fixed;
        z-index: 999999999;
        cursor: pointer;
        width: 60px;
        height: 60px;
        top: 0px;
        right: 0px;
        background-color: #000000;
    }

    .panelactive {
        width: 100%;
    }

    #g-nav.panelactive {
        right: 0;
        z-index: 99;
        position: fixed;
        overflow: auto;
    }

    #g-nav li a.panelactive {
        color: #000000;
    }

    #g-nav.panelactive #g-nav-list {
        /*クラスが付与されたら出現*/
        display: block;
    }

    #g-nav-list {
        position: absolute;
        width: 100%;
    }

    /*ナビゲーション*/
    #g-navi {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    #g-nav.panelactive ul {
        opacity: 1;
        z-index: 99999999999;
        list-style-type: none;
        text-align: right;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    
    .solid_sub {
        font-size: 16px!important;
    }


    #g-nav ul li a {
        text-decoration: none;
        color: #ffffff;
        font-size: 20px;
    }

    #g-nav ul {
        opacity: 0;
        position: absolute;
        z-index: 999;
        top: 133px;
        list-style-type: none;
        text-align: right;
    }

    #logo {
        display: none;
    }

    #logo1 a img {
        width: 105px;
        height: 35px;
        padding-left: 20px;
    }

    .solid,
    .solid-s,
    .solid1 {
        padding-right: 20px;
        height: 50px;
        padding-bottom: 20px;
    }

    .solid-1 {
        padding-right: 30px;
        height: 50px;
        padding-top: 20px;
    }


    .solid_sub {
        color: #ffffff;
    }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity: 1;
    }

    #g-nav {
        top: 0;
        right: -120%;
        width: 240px;
        height: 100%;
        transition: all 0.6s;
        background-color: rgba(00, 00, 00, 0.3);
        position: fixed;
    }

    /*背景が出現後にナビゲーションliを表示
レイアウトによって調整・削除可*/
    body.mainblur .solid-s,
    body.mainblur .solid,
    body.mainblur .solid1,
    body.mainblur .solid-1 {
        animation-name: fade;
        /*0.2秒遅らせて出現*/
        animation-duration: 1.2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .fade {
        transition: all 1200ms;
        opacity: 0.1;
        visibility: hidden;
        transform: translate(0px, 50px);
    }

    .fadein {
        opacity: 1;
        visibility: visible;
        transform: translate(0px, 0px);
    }

    .fadeUpTrigger {
        opacity: 0;
    }

    #logo-1 {
        display: none;
    }

    ul {
        padding-inline-start: 0;
    }

    #language img {
        width: 30px;
        height: 30px;
    }

    .benefits1 img {
        width: 90px;
        height: 90px;
    }


    .last img {
        width: 20px;
        height: 20px;
        vertical-align: bottom;
    }

    #company_overview-r {
        background-color: #ffffff;
        width: 100%;
        height: 90px;
        z-index: 1;
    }

    #company_overview-2 {
        width: 90%;
        margin: 0 auto;
    }

    .inner {
        position: relative;
        display: flex;
        align-items: baseline;
    }

    .borderin {
        border-bottom: 1px #999 solid;
        animation: border_anim 1.5s linear forwards;
    }

    .border {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 90%;
        margin: 0 auto;
    }

    #company_overview2 {
        padding-top: 40px;
    }

    .top_title1 h3 {
        font-size: 23px;
    }

    .title {
        margin: 10px 0 16px 0;
        font-size: 16px;
    }

    .border {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        max-width: 1100px;
        width: 98%;
        margin: 0 auto;
    }

    .borderin {
        border-bottom: 1px #999 solid;
        animation: border_anim 1.5s linear forwards;
    }

    @keyframes border_anim {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }

    .td_title {
        padding: 20px 0;
        width: 100px;
        border-bottom: solid 0.2px #333333;
    }

    .td_title1 {
        border-bottom: solid 0.2px #333333;
        padding: 20px 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        margin: 0 auto;
    }


    #company_history1 {
        width: 90%;
        margin: 0 auto;
    }

    .company_history2 {
        padding-top: 40px;
    }

    #border2 {
        padding: 0;
    }

    .td_title-1,
    .td_title-2 {
        padding: 20px 0 0 9px;
        width: 100px;
        border-bottom: #000000 1px solid;
    }

    .leftbar {
        border-left: #000000 1px solid;
        position: relative;
        right: 0%;
        padding-left: 5px;
    }

    .td_title2,
    .td_title3 {
        padding: 20px 0;
        position: relative;
        border-bottom: #000000 1px solid;
        width: 100%;
    }

    .company_history_title {
        padding-bottom: 40px;
    }


    #shop_list1 {
        width: 90%;
        margin: 0 auto;
    }

    .img_title {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 47%;
        color: #ffffff;
        font-size: 23px;
        font-weight: bold;
    }

    .img_title1 {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 58%;
        color: #ffffff;
        font-size: 20px;
        font-weight: bold;
    }

    .img_title2 {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 57%;
        color: #ffffff;
        font-size: 23px;
        font-weight: bold;
    }

    #shop_img-1 img,
    #shop_img1-1 img,
    #shop_img2-1 img {
        width: 100%;
        height: 100%;
    }

    #shop_img,
    #shop_img1,
    #shop_img2 {
        display: none;
    }

    .shop_title {
        text-align: center;
        background-color: #ffffff;
        max-width: 280px;
        height: 40px;
        border: #000000 1px solid;
        margin: 0 auto;
        position: relative;
        z-index: 9;
        top: 21px;
    }


    .shop_title.change {
        text-align: center;
        background-color: #ffffff;
        max-width: 280px;
        height: 40px;
        border-radius: 50px;
        border: #000000 1px solid;
        margin: 0 auto;
        position: relative;
        z-index: 9;
        top: 21px;
        z-index: 9;
        transition: all 0.6s linear;
        transition-delay: 1s;
    }

    .mainshop {
        line-height: 2.5;
    }

    .shop_area {
        padding: 35px 25px 30px 25px;
        top: -25px;
        margin: 0 auto;
    }

    .shop-1,
    .shop-2,
    .shop-3,
    .shop-4,
    .shop-5 {
        display: flex;
    }

    .shop1 {
        width: 100px;
    }

    .shop1 a,
    .shop2 a,
    dl a {
        text-decoration: none;
    }

    .shop3 {
        overflow-wrap: anywhere;
    }


    dl {
        margin: 0;
        width: 100%;
    }

    .shop_menu {
        display: block;
    }

    #shop_img1-1,
    #shop_img2-1 {
        padding-top: 40px;
    }

    .shopmenu1 {
        padding-top: 20px;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
    }

    #recruit {
        padding-bottom: 50px;
    }

    #recruit1 {
        width: 90%;
        margin: 0 auto;
    }

    #recruit_message {
        padding-top: 40px;
    }

    #recruit_message p {
        text-align: center;
    }

    #message_title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    #message1 {
        margin-top: 28px;
    }

    #message {
        display: none;
    }

    .recruit-contents1 {
        padding-top: 40px;
    }


    .recruit_area1,
    .recruit_area {
        flex-direction: column-reverse;
        display: flex;
    }

    .recruit_img img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    .recruit_area-1 {
        padding-top: 40px;
    }

    .recruit-contents {
        padding: 25px 20px;
    }

    .recruit_title1 {
        font-size: 16px;
        margin-bottom: 15px;
    }

    #benefits_message {
        padding-top: 20px;
    }

    #benefits_title,
    #benefits_title1 {
        font-size: 16px;
        margin-bottom: 10px;
        text-align: center;
    }

    #benefits_message p {
        text-align: center;
    }

    .benefits_area {
        padding-top: 20px;
    }

    .benefits1 {
        position: relative;
    }

    .benefits1 img {
        position: absolute;
        top: 20px;
        left: 109px;
    }

    .benefits1 img {
        width: 110px;
        height: 110px;
    }

    .benefits1 p {
        text-align: center;
    }

    .benefits_title,
    .benefits_title1 {
        font-size: 16px;
        padding-top: 145px;
    }

    .benefits_title.active1,
    .benefits_title1.active1 {
        animation: wobble-hor-bottom 0.8s ease-in-out both;
    }

    @keyframes wobble-hor-bottom {

        0%,
        100% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
        }

        15% {
            -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
        }

        30% {
            -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
        }

        45% {
            -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
        }

        60% {
            -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
        }

        75% {
            -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
        }
    }

    .benefits1 p {
        text-align: center;
    }

    .sub_benefits,
    .sub_benefits1 {
        padding-top: 10px;
        font-size: 12px;
    }

    .benefits1 {
        width: 330px;
        height: 330px;
        border-radius: 500px;
        border: #000000 1px solid;
    }

    .benefits1.maru {
        position: relative;
        /*リンクの形状*/
        display: inline-block;
        text-decoration: none;
        color: #333;
        outline: none;
    }

    /*波形の設定*/
    .benefits1.maru::before {
        content: '';
        /*絶対配置で波形の位置を決める*/
        position: absolute;
        left: 21%;
        top: 70px;
        /*波形の形状*/
        border: 1px solid #000;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        /*はじめは不透明*/
        opacity: 1;
        /*アニメーションの設定*/
        animation: 2s circleanime2 forwards;
    }

    /*波形が広がるアニメーション*/
    @keyframes circleanime2 {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(2);
            opacity: 0;
        }
    }


    .benefits-contents {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    .benefits-bottom {
        padding-bottom: 20px;
    }

    footer {
        position: relative;
        padding: 40px 0;
        border-top: #000000 solid 1px;
    }

    .last {
        margin-left: 14px;
    }

    #finish1 {
        width: 90%;
        margin: 0 auto;
    }

    #finish_nav1 {
        text-align: center;
        margin: 0 auto;
    }

    #finish_nav1 ul {
        display: flex;
        list-style-type: none;
        margin: 0;
        text-align: center;
        padding: 0;
        font-size: 14px;
        justify-content: center;
        line-height: 1.5;
    }

    ul {
        list-style: none;
    }

    #finish_nav1 ul li {
        text-align: center;
    }

    #finish_nav1 ul li a {
        text-decoration: none;
        position: relative;
    }

    ul li a {
        font-size: 14px;
    }

    #finish_nav1 ul li ::before {
        content: "";
    }

    .secand ::after {
        content: "|";
        margin: 7px;
    }

    #finish1 p {
        margin-top: 16px;
        text-align: center;
        font-size: 14px;
    }

    #finish {
        display: none;
    }

    .btn_line {
        position: fixed;
        right: 3%;
        bottom: 30px;
        height: 22px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;
        max-width: 220px;
        padding: 5px 10px;
        color: #000000;
        transition: all 0.3s;
        font-weight: 600;
        background-color: rgba(225, 225, 225, 0.2);
        border: #000000 0.5px solid;
        text-decoration: none;
        z-index: 1;
    }

    .btn_line a {
        position: relative;
        z-index: 1;
        text-decoration: none;
    }

    .btn_line a:before,
    .btn_line a:after {
        box-sizing: inherit;
        content: "";
        position: absolute;
        border: 2px solid transparent;
        width: 0;
        height: 0;
    }

    .btn_line a:before {
        top: 0;
        left: 0;
    }

    .btn_line a:after {
        bottom: 0;
        right: 0;
    }

    .mainblur {
        overflow: hidden;
    }

    .top_title1-1 h3 {
        font-size: 23px;
    }

    .openbtn a {
        display: block;
        position: relative;
        z-index: 99999999999999;
        width: 60px;
        height: 60px;
    }

    #container {
        position: relative;
        z-index: 1;
        background-color: #ffffff;
    }

    #company_history-r,#company_history-r,#shop_list-r,#recruit-r {
        padding-top: 90px;
    }

    /*==================================================
　5-3-11 左右から線が伸びて枠線になる
===================================*/

    .shop_border {
        /*線の基点とするためrelativeを指定*/
        position: relative;
    }

    .shop_border1-1 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
    }

    .shop_border1-2 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
    }

    /*線の基点位置*/
    .shop_border1::before,
    .shop_border1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.4s;
    }

    .shop_border-1::before,
    .shop_border-1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.4s;
    }

    .shop_border1-2::before,
    .shop_border1-2::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.4s;
    }

    /*線の基点位置*/
    .shop_border1-1::before,
    .shop_border1-1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.4s;
    }

    .shop_border1::before {
        right: 0;
        top: 166px;
    }

    .shop_border1::after {
        left: 0;
        bottom: 166px;
    }
    .shop_border-1::before {
        right: 0;
        top: 166px;
    }

    .shop_border-1::after {
        left: 0;
        bottom: 166px;
    }


    .shop_border1-2::before {
        right: 0;
        top: 166px;
    }

    .shop_border1-2::after {
        left: 0;
        bottom: 167px;
    }

    .shop_border1-1::before {
        right: 0;
        top: 188px;
    }

    .shop_border1-1::after {
        left: 0;
        bottom: 188px;
    }

    /*線の基点位置2 spanタグ*/

    .shop_border2 {
        display: block;
    }

    .shop_border2::before,
    .shop_border2::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 1px;
        height: 0;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.4s linear;
    }

    .shop_border2::before {
        left: 0;
        top: 0;
    }

    .shop_border2::after {
        right: 0;
        bottom: 0;
    }

    /*現在地とhoverした際の線の変化*/

    .shop_border.current .shop_border1::before,
    .shop_border.current .shop_border1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    .shop_border.current .shop_border-1::before,
    .shop_border.current .shop_border-1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    .shop_border.current .shop_border1-2::before,
    .shop_border.current .shop_border1-2::after {
        width: 100%;
        /*横幅を100%に*/
    }

    .shop_border.current .shop_border1-1::before,
    .shop_border.current .shop_border1-1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    .shop_border.current .shop_border2::before,
    .shop_border.current .shop_border2::after {
        height: 100%;
        /*縦幅を100%に*/
    }

    /* Loading背景画面設定　*/
    #splash {
        /*fixedで全面に固定*/
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: #ffffff;
        text-align: center;
        color: #ffffff;
        z-index: 99999999999999999999999;
    }

    /* Loading画像中央配置　*/
    #splash_logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Loading アイコンの大きさ設定　*/
    #splash_logo svg {
        width: 150px;
        height: 50px;
    }

    /*=============== SVGアニメーション内の指定 =================*/

    /*アニメーション前の指定*/
    #mask path {
        fill-opacity: 0;
        /*最初は透過0で見えない状態*/
        transition: fill-opacity .5s;
        /*カラーがつく際のアニメーション0.5秒で変化*/
        fill: none;
        /*塗りがない状態*/
        stroke: #333;
        /*線の色*/
    }

    /*アニメーション後に.doneというクラス名が付与された時の指定*/
    #mask.done path {
        fill: #333;
        /*塗りの色*/
        fill-opacity: 1;
        /*透過1で見える状態*/
        stroke: none;
        /*線の色なし*/
    }

    .img_title1 img {
        width: 30px!important;
        height: 30px!important;
    }

    /*========= レイアウトのためのCSS ===============*/


    a {
        color: #333;
    }

    a:hover {
        text-decoration: none;
    }

    #shop_img1-1,
    #shop_img2-1,
    #shop_img-1 {
        opacity: 0;
    }

    #shop_img1-1.fadein1,
    #shop_img2-1.fadein1,
    #shop_img-1.fadein1 {
        animation: fadeIn1 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
        animation-delay: 0.2s;
    }

    @keyframes fadeIn1 {
        0% {
            opacity: 0;
            transform: translateX(120px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    #shop_list {
        overflow: hidden;
    }

    .text-fadein span {
        display: inline-block;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-fadein span:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        transition: all 0.6s linear;
    }

    .text-fadein.active span:before {
        width: 0%;
    }
    #closebg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    #historyarea1,#historyarea2,#historyarea3,#historyarea4,#historyarea5 {
        display: flex;
    }

    /*枠線が伸びて出現*/
    .line1.line {
        position: relative;
        /* 枠線が書かれる基点*/
    }

    /*上下線*/
    .line1.line::before,
    .line1.line::after {
        position: absolute;
        content: "";
        width: 0;
        height: 1px;
        background: #333;
        /* 枠線の色*/
    }

    /*左右線*/
    .line1 .line2::before,
    .line1 .line2::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 0;
        background: #333;
        /* 枠線の色*/
    }

    /*上線*/
    .line1.line::before {
        top: 0;
        left: 0;
        animation: lineAnime .5s linear 0s forwards;
        /*表示されて0秒後に上線が0.5秒かけて表示*/
    }

    /*右線*/
    .line1 .line2::before {
        top: 0;
        right: 0;
        animation: lineAnime2 .5s linear .5s forwards;
        /*表示されて0.5秒後に右線が0.5秒かけて表示*/
    }

    /*下線*/
    .line1.line::after {
        bottom: 0;
        right: 0;
        animation: lineAnime .5s linear 1s forwards;
        /*表示されて1秒後に下線が0.5秒かけて表示*/
    }

    /*左線*/
    .line1 .line2::after {
        bottom: 0;
        left: 0;
        animation: lineAnime2 .5s linear 1.5s forwards;
        /*表示されて1.5秒後に左線が0.5秒かけて表示*/
    }

    @keyframes lineAnime {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }

    @keyframes lineAnime2 {
        0% {
            height: 0%;
        }

        100% {
            height: 100%;
        }
    }

    /*枠線内側の要素*/
    .line1.line .lineinappear {
        animation: lineInnerAnime .5s linear 1.5s forwards;
        /*1.5秒後に中央のエリアが0.5秒かけて表示*/
    }

    .company_overview2.fadein2 {
        animation: fadeIn2 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
        animation-delay: 0.2s;
    }

    .company_overview2 {
        opacity: 0;
    }

    #border2.fadein2 {
        animation: fadeIn2 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
        animation-delay: 0.2s;
    }

    #border2 {
        opacity: 0;
    }


    @keyframes fadeIn2 {
        0% {
            opacity: 1;
            transform: translateY(100px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #shop_img1-1 a:hover,
    #shop_img2-1 a:hover,
    #shop_img-1 a:hover {
        opacity: 0.7;
    }

    .td_title1 a {
        text-decoration: none;
    }

    .scroll-animation {
        height: 50px;
    }

    .img_title2 img {
        width: 15px !important;
        height: 90px !important;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 59%;
    }

    .img_title img {
        width: 40px !important;
        height: 40px !important;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 47%;
    }


    #last_contact {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        width: 200px;
        margin: 0 auto;
        padding-top: 20px;
    }

    #last_contact1 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        z-index: 99;
        transition: all 0.2s linear;
        top: 0px;
        left: 0px;
    }

    #last_contact1:hover {
        top: 6px;
        left: 5px;
    }

    #last_contact2 p {
        text-align: center;
    }

    #last_contact a {
        text-decoration: none;
    }

    #last_contact1::before,
    #last_contact1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.6s linear;
        transition-delay: 0.8s;
    }

    #last_contact1::before {
        right: 0;
        top: 40px;
    }

    #last_contact1::after {
        left: 0;
        bottom: 39px;
    }

    /*線の基点位置2 spanタグ*/

    #last_contact2 {
        display: block;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #last_contact2::before,
    #last_contact2::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 1px;
        height: 0;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.8s linear;
    }

    #last_contact2::after {
        right: 0;
        top: 0px;
    }

    #last_contact2::before {
        left: 0;
        bottom: 0px;
    }

    /*現在地とhoverした際の線の変化*/

    #last_contact.active2 #last_contact1::before,
    #last_contact.active2 #last_contact1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    #last_contact.active2 #last_contact2::before,
    #last_contact.active2 #last_contact2::after {
        height: 100%;
        /*縦幅を100%に*/
    }

    #last_contact-1 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        width: 200px;
        margin: 0 auto;
    }

    #last_contact1-1 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        top: -40px;
    }
    
    #last_contact1-1::before,
    #last_contact1-1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 0;
        height: 1px;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.8s linear;
        transition-delay: 0.4s;
    }

    #last_contact1-1::before {
        right: -6px;
        top: 6px;
    }

    #last_contact1-1::after {
        left: 6px;
        bottom: -7px;
    }

    /*線の基点位置2 spanタグ*/

    #last_contact2-1 {
        display: block;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #last_contact2-1::before,
    #last_contact2-1::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        /*線の形状*/
        width: 1px;
        height: 0;
        background: #000000;
        /*アニメーションの指定*/
        transition: all 0.8s linear;
        transition-delay: 0.4s;
    }

    #last_contact2-1::before {
        left: 5px;
        top: 6px;
    }

    #last_contact2-1::after {
        right: -5px;
        bottom: -6px;
    }

    /*現在地とhoverした際の線の変化*/

    #last_contact-1.active2 #last_contact1-1::before,
    #last_contact-1.active2 #last_contact1-1::after {
        width: 100%;
        /*横幅を100%に*/
    }

    #last_contact-1.active2 #last_contact2-1::before,
    #last_contact-1.active2 #last_contact2-1::after {
        height: 100%;
        /*縦幅を100%に*/
    }

    .leftbar {
        border-left: #000000 1px solid;
    }
}

@media (max-width: 605px) {
    .img_title {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 45%;
        color: #ffffff;
        font-size: 20px;
        font-weight: bold;
    }

    .img_title1 {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 62%;
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
    }

    .img_title2{
        top: 60%;
    }
}

@media (max-width: 692px) {
    .shop_border1-2::after {
        left: 0;
        bottom: 185px;
    }

    .shop_border1-2::before {
        right: 0;
        top: 185px;
    }
}


@media (max-width: 464px) {
    .shop_border1-2::after {
        left: 0;
        bottom: 186px;
    }

    .shop_border1-2::before {
        right: 0;
        top: 186px;
    }

    .shop_border1::before {
        right: 0;
        top: 186px;
    }

    .shop_border1::after {
        right: 0;
        top: 0;
    }

    .shop_border-1::before {
        right: 0;
        top: 186px;
    }

    .shop_border-1::after {
        right: 0;
        top: 0;
    }

    .img_title2 {
        top: 62%;
    }

    .img_title1 img {
        width: 25px!important;
        height: 25px!important;
    }
    .img_title1 {
        top: 64%;
    }
    .img_title img {
        width: 35px !important;
        height: 35px !important;
    }
    .img_title {
        top: 47%;
    }

    .img_title2 img {
        width: 11px !important;
        height: 70px !important;
    }

    .img_title2{
        top: 62%;
    }
}



@media (max-width: 435px) {
    .shop_area {
        padding: 35px 10px 30px 10px;
        top: -25px;
        margin: 0 auto;
    }


    .shop_border1::before {
        right: 0;
        top: 200px;
    }

    .shop_border1::after {
        left: 0;
        bottom: 164px;
    }

    .shop_border-1::before {
        right: 0;
        top: 220px;
    }

    .shop_border-1::after {
        left: 0;
        bottom: 164px;
    }

    .shop_border1-2::after {
        left: 0;
        bottom: 200px;
    }

    .shop_border1-2::before {
        right: 0;
        top: 200px;
    }

    .shop_border1-1::before {
        right: 0;
        top: 202px;
    }

    .shop_border1-1::after {
        left: 0;
        bottom: 202px;
    }

    .img_title {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 44%;
        color: #ffffff;
        font-size: 15px;
        font-weight: bold;
    }

    .img_title1 {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 63%;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
    }

    .img_title2 {
        top: 62%;
    }

    .img_title1 {
        top: 66%;
    }

    .img_title {
        top: 47%;
    }
}

@media (max-width: 412px) {
    .shop_border1::before {
        right: 0;
        top: 200px;
    }

    .shop_border1::after {
        left: 0;
        bottom: 184px;
    }
    .img_title2 img {
        width: 11px !important;
        height: 70px !important;
    }

    .img_title2{
        top: 62%;
    }
}

@media (max-width: 394px) {
    .shop_border1-2::after {
        left: 0;
        bottom: 218px;
    }

    .shop_border1-2::before {
        right: 0;
        top: 218px;
    }

    .shop_border1-1::after {
        left: 0;
        bottom: 220px;
    }

    .shop_border1-1::before {
        right: 0;
        top: 220px;
    }
}

@media (max-width: 388px) {
    .shop_border1::before {
        right: 0;
        top: 220px;
    }

    .shop_border1-1::before {
        right: 0;
        top: 243px;
    }

    .shop_border1-1::after {
        left: 0;
        bottom: 243px;
    }
    .img_title2 {
        top: 64%;
    }
}

@media (max-width: 385px) {
    .shop_border1-2::before {
        right: 0;
        top: 241px;
    }

    .shop_border1-2::after {
        left: 0;
        bottom: 241px;
    }
}

@media (max-width: 345px) {
    .shop_border1::before,.shop_border-1::before {
        right: 0;
        top: 207px;
    }

    .shop_border1-1::before {
        left: 0;
        top: 228px;
    }

    .shop_border1-1::after {
        left: 0;
        bottom: 228px;
    }

    .shop_border1-2::before {
        right: 0;
        top: 226px;
    }

    .shop_border1-2::after {
        left: 0;
        bottom: 226px;
    }
}