body {
    margin: 0;
    font-family: "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
h1 ,span{
    font-size: 2rem;
    font-weight: inherit;
    margin: 0;
}

/*共通の記述です*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 700;
}

@media screen and (max-width: 519px) {
    body {
        font-size: 1rem;
        line-height: 16px;
        height: 100%;
    }
    h1, span{
        font-size: 1.5rem;
    }

    /*トップコンテンツ*/
    .innertop-section2,
    .innertop-section3,
    .innertop-section4
    .innertop-section5
     {
        margin-bottom: 37vh;
    }
    

    /*ヘッダー*/
    header.masthead {
        position: fixed;
        background-color: transparent;
        height: 0vh;
        width: 100vw; /*画面横幅いっぱいにする*/
        top: 0;
        left: 0;
        opacity: 1; /*不透明度*/
        z-index: 2;
    }

    /*ロゴ*/
    .logo img {
        display: none;
    }

    .logo1 img {
        margin-top: 20vh;
        margin-bottom: 8vh;
        display: list-item; /*ロゴとメニューを横並び*/
        padding: 0 37px 0 37px;
        width: 100%;
    }

    .logo1 a {
        padding: 0 !important;
    }

    /*ハンバーガーメニュー*/
    .drawer-hidden {
        /* チェックボックスは非表示に */
        display: none;
    }

    /*ハンバーガーボタン*/
    .menu_button {
        display: flex; /**/
        width: 57px; /* クリックしやすい幅 */
        height: 57px; /* クリックしやすい高さ */
        justify-content: center; /**/
        align-items: center; /**/
        position: absolute; /**/
        top: 7.4vh;
        right: 0%;
        cursor: pointer !important;
        background-color: #3366cc;
        margin-top: 50px;
        border-radius: 5%;
        z-index: -1;
    }

    .menu_button1{
        display: flex; 
        width: 57px; 
        height: 57px; 
        justify-content: center;
        align-items: center;
        position: absolute; 
        top:1.2vh;
        right: 0%;
        cursor: pointer!important;
        border-radius: 5%;
    }



    /* ハンバーガーメニューの線 */
    .menu_button span {
        /*真ん中*/
        content: "";
        display: block;
        top: 33px;
        height: 2px;
        width: 31px;
        border-radius: 3px;
        background: #fff;
        transition: 0.1s;
        position: absolute;
        margin-bottom: 10px;
    }

    /* ハンバーガーメニューの線 */
    .menu_button1 span {/*真ん中*/
        content: "";
        display: block;
        top: 33px;
        height: 2px;
        width: 31px;
        border-radius: 3px;
        background:rgba(255, 255, 255, 0);
        transition: 0.1s;
        position: absolute;
        margin-bottom: 10px;
    }



    .menu_button span:before {
        /*上*/
        content: "";
        display: block;
        height: 2px;
        width: 31px;
        border-radius: 3px;
        background: #fff;
        transition: 0.1s;
        position: absolute;
    }

    .menu_button1 span:before {/*上*/
        content: "";
        display: block;
        height: 2px;
        width: 31px;
        border-radius: 3px;
        background: #fff;
        transform: rotate(45deg);
    }



    .menu_button span:after {
        /*下*/
        content: "";
        display: block;
        height: 2px;
        width: 31px;
        border-radius: 3px;
        background: #fff;
        transition: 0.1s;
        position: absolute;
    }

    .menu_button1 span:after {/*下*/
        content: "";
        display: block;
        height: 2px;
        width: 31px;
        border-radius: 3px;
        background: #fff;
        transform: rotate(-45deg);
    }



    .menu_button:after {
        /*メニューの文字*/
        content: "menu";
        display: block;
        font-size: 13px;
        top: 5px;
        color: #fff;
    }

    /* 三本線のうち一番上の棒の位置調整 */
    .menu_button span:before {
        bottom: 8px;
    }

     /* 三本線のうち一番上の棒の位置調整 */
     .menu_button1 span:before {
        bottom: 1px;
    }


    /* 三本線のうち一番下の棒の位置調整 */
    .menu_button span:after {
        top: 8px;
    }
    /* 三本線のうち一番下の棒の位置調整 */
    .menu_button1 span:after {
        top: 1px;

    }


    /* }ここが崩れの原因？ */
    
    #hamburger:checked ~ .menu_button {
        display: none;
    } 


    /* アイコンがクリックされたら真ん中の線を透明にする */
    #hamburger:checked ~ .menu_button span {
        background: rgba(255, 255, 255, 0);
    }

    /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
    #hamburger:checked ~ .menu_button span::before {
        bottom: 0;
        transform: rotate(45deg);
    }

    #hamburger:checked ~ .menu_button span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    /* アイコンがクリックされたらメニューを表示 */
    #hamburger:checked ~ .global_menu {
    
        right: 0;/* メニューを画面に入れる */

    }

    /* メニューを閉じるための要素のデザイン*/
    .drawer-close {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 100%; /* 閉じるための要素を画面外へ */
        z-index: 99; /* 重なり順をメニューより下に*/
        transition: 0.5s;
    }
    /* アイコンがクリックされたらメニューを閉じる */
    #drawer-check:checked ~ .drawer-close {
        right: 0; /* 閉じるための要素を画面内へ */
    }

    /* メニューのデザイン*/
    .global_menu {
        width: 68.5vw; /* ここの割合を小さくすると閉じる部分の領域が広がる */
        height: 100vh;
        max-width: 519px;
        position: fixed;
        overflow: hidden;
        top: 0;
        right:-100%;/* メニューを画面の外に飛ばす */
        z-index: 9999;

        background: #3366cc;
        transition: 0.5s;
        text-align: left;
        overflow-y: auto; /* メニューが多くなったらスクロールできるように */
        -webkit-overflow-scrolling: touch;
        color: #fff;
    }

    .global_menu li a {
        /*メニューの文字*/
        color: #fff;
        text-decoration: none;
        padding: 10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border-bottom: none;
        display: inline-block;
    }

    .global_menu li {
        /*メニュー*/
        display: list-item; /*メニュー縦並び*/
        text-align: center;
        text-decoration: none;
    }

    .global_menu a {
        /*お問い合わせボタン*/
        display: block;
        color: #fff;
        padding: 10px 30px;
    }

    a.menu1 {
        /*メニューの高さ*/
        height: 16px;
        padding-bottom: 2.4vh !important;
    }

    .child_menu1 {
        /*下層メニューのスタイル*/
        width: 100%;
        position: relative;
        top: 100%; /*親項目の直下に配置*/
        left: 0;
        color: #333;
        background: #3366cc;
        visibility: visible; /*下層メニューを非表示*/
        font-size: 12px;
    }

    .child_menu1 li {
        line-height: 1.2vh;
    }
    .child3 {
        margin-top: 1.2vh !important;
    }
    .child4 {
        margin-top: 1.2vh !important;
    }

    .child_menu {
        /*下層メニューのスタイル*/
        display: none;
    }

    .child_menu li {
        line-height: 1.2vh;
    }

    .child_menu1 a {
        padding: 0px !important;
        line-height: 1.2vh;
    }

    a.btn-primary1 {
        text-decoration: none;
        text-align: center;
       
    }

    .btn {
        display: none;
    }

    /*ハンバーガーSNSアイコン*/
    .snsbtn {
        display: flex; /*ロゴとメニューを横並び*/
        margin-top: 8vh;
        text-align: center;
        float: right;
    }

    .snsbtn a {
        padding: 0;
        padding-left: 4.8vw;
        margin-right: 4.8vw;
    }
    .LINE {
        margin-right: 4.8vw;
        width: 31px;
    }

    .insta {
        width: 31px;
        font-size: 53px;
        margin-left: 4.8vw;
    }

    /*トップ*/
    .visione {
        display: none;
    }

    .visione1 {
        flex: 1;
        position: relative; /*相対配置*/
    }

    .visione1 p {
        position: absolute; /*絶対配置*/
        font-size: 16px;
        top: 60%;
        left: 50%;
        -ms-transform: translate(-50%, -50%); /*ズレ調整*/
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        color: rgba(255, 255, 255, 0.6); /*半透明*/
        margin-bottom: 7.4vh;
        padding-bottom: 7.4vh;
        width: 315px;
    }

    .visione1 img {
        width: 100%;
        max-width: 519px;
        padding-bottom: 37vh;
    }

    /*トップボタン採用情報*/
    .topbtn a {
        display: block;
        text-decoration: none;
    }

    .topbtn-text {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
        white-space: nowrap;
    }

    table.toptable {
        padding: 0;
    }

    .topbtn {
        position: relative;
        border: 3px solid #3366cc;
        border-radius: 15px;
        width: 64vw;
        height: 46px;
        left: 20%;
        display: block;
        text-align: center;
        background: #fff;
        font-size: 20px;
        text-decoration: none;
        overflow: hidden;
        padding: 1.5rem 1.5rem 1.5rem 5rem;
        transition: all 1s;
        color: #3366cc;
        margin-bottom: 7.4vh;
        flex-direction: column;
        align-items: center;
    }

    .topbtn:before,
    :after {
        content: "";
        position: absolute;
        display: block;
        top: 50%;
    }

    .topbtn:before {
        width: 7px;
        height: 7px;
        left: 1.5rem;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        z-index: 2;
        transform: translateY(-50%) rotate(45deg);
        transition: all 1s;
    }

    .topbtn:after {
        left: -2rem;
        background: #3366cc;
        z-index: 1;
        width: 5rem;
        height: 130%;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: all 0.5s;
    }

    .topbtn:after .topbtn-text {
        color: #fff;
        transition: all 0.3s;
        z-index: 3;
    }

    .topbtn:hover .topbtn-text {
        /*クリック後のボタン*/
        position: relative;
        color: #3366cc;
        text-align: left;
    }

    /*トップボタンお問い合わせ*/
    .topbtn1 {
        position: relative;
        border: 3px solid #3366cc;
        border-radius: 15px;
        width: 64vw;
        height: 46px;
        left: 20%;
        display: block;
        text-align: center;
        background: #fff;
        font-size: 20px;
        text-decoration: none;
        overflow: hidden;
        padding: 1.5rem 1.5rem 1.5rem 5rem;
        transition: all 1s;
        color: #3366cc;
        margin-bottom: 37vh;
        flex-direction: column;
        align-items: center;
    }

    .topbtn1:before,
    :after {
        content: "";
        position: absolute;
        display: block;
        top: 50%;
    }

    .topbtn1:before {
        width: 7px;
        height: 7px;
        left: 1.5rem;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        z-index: 2;
        transform: translateY(-50%) rotate(45deg);
        transition: all 1s;
    }

    .topbtn1:after {
        left: -2rem;
        background: #3366cc;
        z-index: 1;
        width: 5rem;
        height: 130%;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: all 0.5s;
    }

    .topbtn1:after .topbtn-text {
        color: #fff;
        transition: all 0.3s;
        z-index: 3;
    }

    .topbtn1:hover .topbtn-text {
        /*クリック後のボタン*/
        position: relative;
        color: #3366cc;
        text-align: left;
    }

    .topbtn1:hover:after {
        right: 0;
        width: 120%;
        border-radius: 0;
        content: "お問い合わせはこちら";
        text-align: center;
        line-height: 90px;
        color: #fff;
    }
}

@media screen and (min-width: 520px) {
    /*PC閲覧時のメガメニュー*/

    .html {
        width: 1980px;
        height: 1080px;
    }

    /*トップ*/
    .top-container {
        display: flex;
        flex-direction: column;
        width: 100vw;
    }

    .innertop-section2,
    .innertop-section3 {
        margin-bottom: 37vh;
    }

    .innertop-section5{
        margin-bottom: 37vh;
    }

    .innertop-section4
     {
        margin-bottom: 800px;
    }

    .visione {
        flex: 1;
        position: relative; /*相対配置*/
    }

    .visione p {
        position: absolute; /*絶対配置*/
        font-weight: bold; /*太字*/
        font-size: small;
        top: 60%;
        left: 50%;
        -ms-transform: translate(-50%, -50%); /*ズレ調整*/
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        color: rgba(255, 255, 255, 0.6); /*半透明*/
        margin-bottom: 3.7vh;
        padding-bottom: 17.8vh;
    }

    .visione1 {
        display: none;
    }

    .visione img {
        width: 100%;
        padding-bottom: 37vh;
    }

    /*ヘッダー*/
    header.masthead {
        position: fixed;
        background-color: #fff;
        height: 8.9vh;
        width: 100%; /*画面横幅いっぱいにする*/
        top: 0;
        left: 0;
        opacity: 100; /*不透明度*/
        z-index: 2;
    }

    /*ロゴ*/
    .logo {
        padding-left: 2.5vw;
        float: left; /*ロゴとメニューを横並び*/
        margin-top: 2.2vh;
        margin-bottom: 2.2vh;
    }

    .logo img {
        width: 12vw;
    }

    .logo1 {
        display: none;
    }

    /*お問い合わせ*/
    .btn {
        float: right;
        /*height: 8.9vh;
        width: 9.1vw;*/
        
        background-color: #3366cc; /*背景色*/
        margin-left: 1.7vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn a {
        text-decoration: none;
        font-size: 18px;
        padding-top: 3.7vh;
    }

    .btn-primary {
        /*お問い合わせボタン*/
        display: block;
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        padding: auto;
        height: 8.9vh;
        width: 9.1vw;
       
    }

    .btn-primar:hover {
        /*マウスホバー時の色と秒数*/
        background-color: #f4f7fd;
        transition: 0.3s;
    }

    .btn:hover {
        transition: 0.9s;
        background-color: #3366cc; /*背景色*/
        opacity: 0.3;
    }

    .menu_button {
        display: none; /*ハンバーガー非表示*/
    }

    /*グローバルメニュー*/
    .drawer-hidden {
        /* チェックボックスは非表示に */
        display: none;
    }

    .global_menu {
        position: relative;
        padding: 0;
        color: #333;
        text-align: right;
        font-size: 18px;
        width: 100%;
        justify-content: space-around;
    }

    .ul-menu {
        list-style-type: none;
        padding-left: 0;
    }

    li.menu {
        display: inline-block;
        position: relative;
        padding-left: 30px;
    }

    li.menu .menu1:hover {
        display: inline-block; /*文字の長さ*/
        border-bottom: 2px solid #3366cc; /*アンダーラインの太さと色*/
        border-radius: 2px 2px; /*アンダーラインの角*/
        padding-bottom: 0.74vh; /*文字とアンダーラインのスペース*/
        transition: 0.5s;
    }

    .child_menu {
        display: none;
        width: 7.91vw;
        height: 6.17vh;
        top: 66px;
        left: 1292px;
        white-space: nowrap;
    }
    .child_menu1 {
        display: none;
    }

    .menu:hover .child_menu {
        display: block;
        position: absolute;
        padding: 0;
        margin: 0;
        top: 1.5em;
        left: 0;
        list-style-type: none;
        background: #3366cc;
        margin-left: 30px;
    }

    .child_menu li {
        font-size: 10px;
        text-align: left;
        padding-left: 0.5vw;
        line-height: 1.2em;
        padding-top: 12px;
    }

    .child_menu li a {
        display: block;
        color: #fff;
    }

    .child_menu li a:hover {
        opacity: 0.7s;
        transition: 0.5s;
    }

    .menu a {
        /*メニュー文字*/
        color: #333;
        text-decoration: none;
    }

    .global_menu ul {
        /*メニュー上の余白*/
        padding-top: 3.7vh;
    }

    .menu > a {
        /*メニュー文字*/
        font-weight: normal;
    }

    .menu:visited {
        /*メニュー文字*/

        font-style: #333;
    }

    /*トップボタン*/
    .toptable li {
        display: flex;
    }

    .topbtn a {
        display: block;
        text-decoration: none;
    }

    table {
        margin: auto; /*ボタン中央寄せ*/
    }

    span.topbtn-text {
        text-align: right;
    }

    .topbtn-text {
        font-size: 15px;
        text-align: center;
    }

    .topbtn {
        position: relative;
        border: 1px solid #3366cc;
        border-radius: 15px;
        margin-left: auto;
        margin-right: 20vw;
        margin-bottom: 37vh;
        width: 33.3vw;
        height: 8.89vh;
        line-height: 20px;
        text-align: center;
        background: #fff;
        font-size: 20px;
        text-decoration: none;
        overflow: hidden;
        padding: 1.5rem 5rem 1.5rem 5rem;
        transition: all 1s;
        color: #3366cc;
    }

    .topbtn:before,
    :after {
        /*矢印*/
        content: "";
        position: absolute;
        display: block;
        top: 50%;
    }

    .topbtn:before {
        width: 7px;
        height: 7px;
        left: 1.5rem;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        z-index: 2;
        transform: translateY(-50%) rotate(45deg);
        transition: all 1s;
    }

    .topbtn:after {
        left: -2rem;
        background: #3366cc;
        z-index: 1;
        width: 6rem;
        height: 130%;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: all 1s;
    }

    .topbtn:hover:after {
        right: 0;
        width: 120%;
        border-radius: 0;
        content: "採用情報はこちら";
        text-align: center;
        line-height: 90px;
        color: #fff;
        font-size: 15px;
    }

    .topbtn1 {
        position: relative;
        border: 1px solid #3366cc;
        border-radius: 15px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 37vh;
        width: 33.3vw;
        height: 8.89vh;
        line-height: 20px;
        text-align: center;
        background: #fff;
        font-size: 20px;
        text-decoration: none;
        overflow: hidden;
        padding: 1.5rem 1.5rem 1.5rem 5rem;
        transition: all 1s;
        color: #3366cc;
    }

    .topbtn1:before,
    :after {
        /*矢印*/

        content: "";
        position: absolute;
        display: block;
        top: 50%;
    }

    .topbtn1:before {
        width: 7px;
        height: 7px;
        left: 1.5rem;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        z-index: 2;
        transform: translateY(-50%) rotate(45deg);
    }

    .topbtn1:after {
        left: -2rem;
        background: #3366cc;
        z-index: 1;
        width: 6rem;
        height: 130%;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: all 1s;
    }

    .topbtn1:hover:after {
        right: 0;
        width: 120%;
        border-radius: 0;
        content: "お問い合わせはこちら";
        text-align: center;
        line-height: 90px;
        color: #fff;
        font-size: 15px;
    }

    .btn1 {
        display: none;
    }

    .snsbtn {
        display: none;
    }
}