@charset "UTF-8";

/**************************************************/
/* Media Queries */
/**************************************************/
/* 画面の横幅が1024px以上 */
@media screen and (max-width: 1024px) {
    .habaawase {
        font-size: 14vw !important;
    }
    .sp {
        display: none;
    }

    .youtube {
        bottom: 35%;
    }

    #topics {
        background-image: none;
    }

    #topics_box {
        width: 100%;
        display: block;
    }

    .top_left,
    .top_right {
        width: 100%;
    }

    .top_right li {
        border-top: dotted #fff 1px;
        padding-top: 15px;
    }

    .anka {
        width: 90%;
        font-size: 0.7em;
    }

    #container {
        padding-top: 50px;
    }

    .top_eng_t h2 {
        font-size: 7em;
        margin-top: 5vh;
    }

    .top_eng_t h3 {
        font-size: 3em;
    }

    .top_eng_img1 img {
        width: 83%;
    }

    .top_eng_c {
        top: 20vh;
        width: 32vw;
    }

    .top_eng_c h2 {
        font-size: 1.2em;
        margin-bottom: 0.5vh;
    }

    .g40 {
        line-height: 30px;
        font-size: 15px;
    }

    #top_vitv {
        padding: 8vh 0;
    }

    .top_t {
        margin-top: 3vh;
    }

    .top_vimg img,
    .top_timg img {
        padding-top: 5vh;
    }

    .top_vt h2,
    .top_tt h2 {
        font-size: 6em;
    }

    .top_vt h3,
    .top_tt h3 {
        font-size: 3em;
    }

    .top_vc h2,
    .top_tc h2 {
        font-size: 1.2em;
        margin-bottom: 0.5vh;
    }

    .top_vc {
        top: 12vh;
        width: 25vw;
    }

    .top_tc {
        bottom: 2vh;
        width: 27vw;
    }

    #top_st,
    #top_web,
    #top_ma {
        padding: 10vh 0 7vh;
        margin: 10vh auto 5vh;
    }

    .top_st_t,
    .top_web_t,
    .top_ma_t {
        top: 0vh;
    }

    .top_st_t h2 {
        font-size: 6em;
        margin-top: 5vh;
    }

    .top_web_t h2,
    .top_ma_t h2 {
        font-size: 7em;
        margin-top: 5vh;
    }

    .top_st_t h3,
    .top_web_t h3,
    .top_ma_t h3 {
        font-size: 3em;
    }

    .top_st_img,
    .top_web_img,
    .top_ma_img {
        padding-top: 7vh;
    }

    .top_st_img img,
    .top_web_img img,
    .top_ma_img img {
        width: 80vw;
        height: 400px;
        object-fit: cover;
    }

    .top_st_c,
    .top_web_c,
    .top_ma_c {
        top: 22vh;
        width: 40vw;
    }

    .top_st_c h2,
    .top_web_c h2,
    .top_ma_c h2 {
        font-size: 1.2em;
        margin-bottom: 0.5vh;
    }

    .top_re_box {
        top: 5vh;
    }

    .top_re_img {
        width: 90%;
    }

    .top_re_c {
        margin-top: 1vh;
    }

    .btn,
    a.btn,
    button.btn {
        font-size: 1em;
    }

    #footer_box {
        width: 90%;
    }

    .footer_left {
        width: 55%;
    }

    .footer_left h2 {
        width: 40%;
    }

    .footer_right {
        width: 45%;
    }

    .page_busi,
    .hyou {
        width: 90%;
        padding: 30px 0;
    }
}

/* 画面の横幅が800px以下 */
@media screen and (max-width: 800px) {
    .top_eng_t h2,
    .top_vt h2,
    .top_tt h2,
    .top_st_t h2,
    .top_web_t h2,
    .top_ma_t h2 {
        font-size: 5em;
    }

    .top_eng_t h3,
    .top_st_t h3,
    .top_web_t h3,
    .top_ma_t h3 {
        font-size: 3em;
    }

    .top_v {
        margin-right: 1vw;
    }

    .top_t {
        margin-top: 0;
        margin-left: 1vw;
    }

    .top_vc {
        position: relative;
        width: 40vw;
        top: 3vh;
        left: 0;
        right: 0;
        text-shadow: none;
    }

    .top_tc {
        position: relative;
        width: 40vw;
        top: 3vh;
        left: 0;
        right: 0;
        color: #000;
        text-shadow: none;
    }

    #top_vitv a.btn-border-shadow:before {
        border: 1px solid #000;
    }

    .top_re_box {
        top: 4vh;
    }

    .top_re_c {
        margin-top: 1vh;
    }

    .top_re_t h2 {
        font-size: 6vw;
    }

    #footer_box {
        width: 95%;
    }

    .footer_right li {
        width: 90%;
    }

    .page_busi h2,
    .access h2 {
        font-size: 80px;
    }

    .page_busi h3,
    .access h3 {
        font-size: 20px;
    }

    .business_img h3 {
        font-size: 100px;
    }

    .business_img h4 {
        font-size: 30px;
    }

    .hyou th {
        width: 25%;
    }
}

/* 画面の横幅が767px以下 */
@media screen and (max-width: 767px) {
    /* ハンバーガーアイコンの設置スペース */
    .drawer-open {
        height: 50px;
        width: 50px;
    }

    /* ハンバーガーメニューのアイコン */
    .drawer-open span,
    .drawer-open span:before,
    .drawer-open span:after {
        width: 25px;
    }

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

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

    #uxtop {
        width: 40%;
        left: 20px;
        top: 30px;
    }

    #uxtop img {
        max-width: 100%;
    }

    .youtube {
        bottom: 48%;
        font-size: 20px;
    }

    #insta {
        font-size: 25px;
        top: 60px;
        right: 5px;
        width: 40px;
        height: 40px;
    }

    #insta a {
        top: 5px;
        right: 0;
        width: 40px;
        height: 40px;
    }

    #sukuroru a {
        right: 10px;
        top: -10%;
    }

    #topics_box h2 {
        font-size: 65px;
    }

    #topics_box h3 {
        font-size: 25px;
    }
    .top_right li {
        display: block;
    }

    .top_right span {
        width: 50%;
    }
    .top_right li p {
        padding-top: 5px;
        display: block;
        width: 100%;
    }

    .site-header {
        background-color: rgba(0, 0, 0, 0.9);
        color: #fff;
    }

    .anka {
        justify-content: space-around;
        flex-wrap: wrap;
        width: 85%;
        text-align: left;
        font-size: 0.6em;
    }

    .anka li {
        padding: 5px 0;
        width: 33%;
        text-align: left;
    }

    .anka li + li {
        border-left: none;
    }

    #eng {
        margin-top: 50px;
    }

    .page_busi {
        padding-top: 80px;
    }

    #container {
        padding-top: 20px;
    }
    #top_eng {
        height: 85vh;
    }

    .top_eng_img1 img {
        width: 100%;
    }

    .top_eng_t h2,
    .top_vt h2,
    .top_tt h2,
    .top_web_t h2,
    .top_ma_t h2 {
        font-size: 4em;
    }

    .top_st_t h2 {
        font-size: 2.8em;
    }

    .top_eng_c {
        left: 0;
        right: 0;
        top: 50vh;
        width: 80%;
        margin: 0 auto;
    }

    .top_eng_img2 {
        text-align: center;
        width: 90%;
        top: 30vh;
    }

    .top_eng_img2 img {
        width: 95%;
    }

    #top_vitv {
        display: block;
        padding-bottom: 0;
    }

    .top_tt h2:before {
        left: 0;
    }

    .top_v,
    .top_t {
        width: 100%;
    }

    .top_vc,
    .top_tc,
    .top_st_c,
    .top_web_c,
    .top_ma_c {
        width: 80vw;
    }

    .top_tt,
    .top_tt h2,
    .top_tt h3 {
        text-align: left;
    }

    .top_v {
        margin-right: 0;
        background: linear-gradient(
            180deg,
            #fff 0%,
            #fff 50%,
            #eee 50%,
            #eee 100%
        );
        padding-bottom: 13vh;
        margin-bottom: 8vh;
    }

    .top_t {
        margin-left: 0;
        background: linear-gradient(
            180deg,
            #fff 0%,
            #fff 50%,
            #eee 50%,
            #eee 100%
        );
        padding-bottom: 13vh;
        margin-bottom: 8vh;
    }

    #top_st,
    #top_web,
    #top_ma {
        margin: 0 auto 10vh;
        background: #fff;
        height: 100vh;
        padding: 5vh 0 0;
        background: linear-gradient(
            180deg,
            #fff 0%,
            #fff 30%,
            #eee 30%,
            #eee 100%
        );
    }

    .top_st_img,
    .top_web_img,
    .top_ma_img {
        padding-top: 0;
    }

    .top_st_img img,
    .top_web_img img,
    .top_ma_img img {
        width: 100%;
    }

    .top_st_t,
    .top_web_t,
    .top_ma_t {
        top: -5vh;
    }

    .top_st_c,
    .top_web_c,
    .top_ma_c {
        left: 0;
        right: 0;
        top: 62vh;
        width: 80%;
        margin: 20px auto;
        color: #000;
        text-shadow: none;
    }

    #top_re {
        height: 65vh;
        background: linear-gradient(
            180deg,
            #fff 0%,
            #fff 20%,
            #111111 20%,
            #111111 100%
        );
    }

    .top_re_img {
        width: 95%;
    }

    .top_re_box {
        top: 5vh;
    }

    .top_re_t h2 {
        font-size: 15vw;
    }

    .top_re_t h3 {
        font-size: 5vw;
    }

    .top_re_c {
        margin: 8vh auto 0;
        width: 85%;
        text-align: center;
    }

    .top_re_c {
        text-align: left;
    }

    .top_re_c .botan {
        width: 95%;
    }

    .top_re_c a.btn-border-shadow:before {
        border: 1px solid #fff;
    }

    .kaegyo {
        display: none;
    }

    a.btn-border-shadow:before {
        border: 1px solid #000;
    }

    #footer_box {
        display: block;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        padding: 50px 0;
    }

    .footer_left {
        width: 100%;
        text-align: left;
    }

    .footer_left h2 {
        width: 70%;
    }

    .footer_right {
        width: 100%;
        margin-top: 50px;
    }

    .business_img h3 {
        font-size: 60px;
    }

    .business_img h4 {
        font-size: 20px;
        padding-top: 10px;
    }

    .busi_box {
        display: block;
        padding: 15px 20px;
    }

    .busi_box p {
        padding: 5px 0;
    }

    .busi_l,
    .busi_r {
        width: 100%;
    }

    .busi_r {
        padding-top: 10px;
    }

    .kizai {
        display: block;
    }

    .kizai_box {
        width: 100%;
    }

    .kizai_p {
        width: 100%;
    }

    .video_box {
        display: block;
    }

    .yoko2 {
        width: 100%;
    }

    .hyou tr {
        border-bottom: #fff 20px solid;
    }

    .hyou th {
        width: 100%;
        display: block;
        background-color: #ccc;
        text-align: left;
    }

    .hyou td {
        width: 100%;
        display: block;
    }

    .hyou th,
    .hyou td {
        padding: 15px 20px;
    }

    .yokonarabi {
        display: block;
    }
}