/* break point 480px / 860px / 1200 */

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

    /*-------------------------
    common
    --------------------------*/
    .cursive {
        font-family: "RiversideAvenue-Alt";
        font-size: 36px;
        font-weight: 100;
        transform: rotate(-10deg);
        width: 200px;
        margin: 0 auto;
        text-align: center;
        color: #888888;
    }

    .container {
        margin: 0px 5.33vw;
    }

    .page_title {
        padding: 108px 0 0;
        margin: 0 0 75px;
        font-size: 20px;
    }

    .cp_arrows {
        height: 300px;
    }

    .cp_arrows .cp_arrow {
        top: 120px;
    }

    /*-------------------------
    header
    --------------------------*/
    .header_logo {
        position: fixed;
        top: 20px;
        left: 20px;
    }

    .header_logo img {
        width: 108px;
    }

    .nav-menu {
        width: 7vw;
    }

    .nav-menu-bg {
        right: -1px;
        width: 40vw;
        min-width: 155px;
    }

    .nav-menu-bg-triangle {
        left: -99px;
    }

    .lang_switch {
        top: 20px;
        right: 17vw;
    }

    .nav-menu-ul {
        margin: 25vh 0 9vh;
    }

    .menu-button {
        margin-top: 20px;
    }

    .nav-menu-left {
        right: 10vw;
    }

    .nav-menu-ul li {
        font-size: 15px;
    }

    .nav-menu-ul li a {
        margin: 24px 0;
    }

    .nav-menu-sns li {
        margin: 0 10px;
    }

    /*-------------------------
    top page
    --------------------------*/
    .js--height {
        height: 100vh;
        height: 133.33vw;
    }

    .main-slide {
        height: 100vh;
        height: 133.33vw;
    }

    .kv_scroll {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 3;
        text-align: center;
    }

    .cursive_scroll {
        color: #fcfcfc;
        display: inline-block;
        width: 120px;
        font-size: 36px;
    }

    .kv_scroll img {
        position: initial;
        margin: 10px auto 0;
        width: 12px;
    }

    .main-slide-img {
        width: 100vw;
        height: 100vh;
        height: 133.33vw;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
    }

    .main-slide-vertical-bar {
        left: 33%;
    }

    .main-slide-control {
        right: 15px;
        height: 100vh;
        height: 133.33vw;
    }

    .main-slide-control-body {
        padding-top: 0;
        padding-bottom: 20px;
        justify-content: flex-end;
    }

    .main-slide-control-bar {
        left: 36px;
        width: 3.5vw;
    }

    #top_information {
        margin: 80px 5.33vw 100px;
    }

    .top_info .news_table {
        margin: 10px 0;
    }

    .top_info .news_description {
        line-height: 1.4rem;
    }

    .awards hr:last-child {
        display: none;
    }

    .media hr:last-child {
        display: none;
    }

    .top_info .news_data {
        margin: 0;
        vertical-align: middle;
    }

    .cursive_information {
        top: -40px;
        left: 0px;
        right: 0;
    }

    /*    selection*/
    #selection .page_title {
        margin: 0 5.33vw 40px;
        padding: 0;
    }

    .selection_bg_top {
        height: 520px;
        margin: -520px -10.66vw 0;
        z-index: -1;
    }

    .selection_top {
        margin: 0 10.66vw;
    }

    #selection .works_title h1 {
        margin: 10px 0 5px;
    }

    .selection_top .pickup {
        display: block;
        width: 100%;
        margin-bottom: 40px;
    }

    .selection_top .pickup:nth-child(2) {
        float: none;
        width: 100%;
    }

    .selection_middle {
        margin: 0 0 40px;
        background-color: #fff;
        padding: 40px 0 40px;
    }

    .ver .works_title {
        width: 32.66vw;
        display: inline-block;
    }

    .works_title .jp {
        font-size: 12px;
        letter-spacing: 0;
    }

    .works_cat {
        line-height: 13px;
    }

    .works_cat a {
        margin-right: 20px;
    }

    .ver a {
        display: inline-block;
        width: 44.26vw;
    }

    .ver figure {
        width: 100%;
    }
    .ver img {
        width: 100%;
    }

    .ver .works_title,
    .img_S .works_title {
        vertical-align: super;
    }

    .ver .works_cat a,
    .img_S .works_cat a {
        margin-top: 8px;
    }

    .selection_middle .pickup {
        width: 78.68vw;
        display: block;
        margin: 0 auto;
    }

    .selection_middle .pickup:nth-child(2) {
        float: none;
        margin: 40px auto 0px;
    }

    .selection_bottom {
        margin: 0 10.66vw 80px;
    }

    .selection_bg_bottom {
        height: 600px;
        margin: -600px -10.66vw 0;
        z-index: -1;
    }

    .selection_bottom .pickup {
        display: block;
        width: 100%;
    }

    .selection_bottom .pickup:nth-child(2) {
        float: none;
        width: 100%;
        margin-top: 40px;
    }

    .img_S .works_title {
        width: 32.66vw;
        padding-left: 2vw!important;
        display: inline-block;
    }

    .img_S a {
        display: inline-block;
        width: 44.26vw;
    }

    .img_S figure {
        width: 100%;
    }

    .img_S img {
        width: 100%;
    }

    #selection .works_title a {
        width: 100%;
    }

    /* latest */
    #latest {
        margin: 0 5.33vw 0;
        background-color: rgba(256, 256, 256, 0.5);
        padding: 30px 10.66vw 40px;
    }

    #latest .page_title {
        text-align: center;
        margin-bottom: 30px;
        padding: 0;
    }

    .line_title {
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .archive_title h1 {
        margin: 10px 0 5px;
        font-size: 12px;
    }

    .archive_cat {
        line-height: 10px;
    }

    .archive_cat li {
        font-size: 10px;
    }

    .latest_works {
        margin-left: 0;
    }

    .latest_work:nth-child(1) {
        margin: 0;
        float: none;
        margin-bottom: 40px;
    }

    .latest_work {
        width: 100%;
        display: inline-block;
        vertical-align: top;
        float: none;
    }

    .latest_btn {
        margin-top: 70px;
    }

    .latest_btn .btn {
        float: none;
        margin: 0;
        display: block;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    .cursive_allworks {
        bottom: 20px;
        left: -20px;
        width: 115px;
        margin: 0;
    }

    .btn span {
        position: absolute;
        right: 40px;
        transition: 0.5s;
        color: #cccccc;
    }

    /*-------------------------
    archive
    --------------------------*/
    .page_title_archive {
        position: inherit;
    }

    #archive-works #fadein_area {
        margin-top: 0px;
    }

    .cat_area {
        display: none;
    }

    .archive_list {
        float: none;
        width: 100%;
    }

    .archive_menu_sp {
        width: 100%;
        position: relative;
        border-top: solid 1px #cccccc;
        border-bottom: solid 1px #cccccc;
        margin-bottom: 40px;
    }

    .cursive_category {
        position: absolute;
        top: -35px;
        left: 0;
        right: 0;
    }

    .ul_cat_sp {
        position: relative;
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        max-height: 300px;
        margin: 0;
    }

    .ul_cat_sp li {
        text-align: left;
        border: none;
        padding: 10px 20vw 10px 0;
        float: none;
        color: #cccccc;
        letter-spacing: 0.25rem;
    }

    .selected_cat {
        display: none;
        letter-spacing: 0.25rem;
    }

    .selected_cat_ul {
        display: inline-block;
        width: 75px;
        margin: 30px 0 30px 8.53vw;
    }

    .cat_btn {
        float: right;
        margin: 30px 8.53vw 0 0;
        transition: 0.5s;
    }

    .cat_btn div {
        background: #cccccc;
        height: 1px;
        width: 7px;
        display: inline-block;
        vertical-align: middle;
    }

    .diagonal_left {
        transform: rotate(60deg);
        margin-right: -6px;
    }

    .diagonal_right {
        transform: rotate(-60deg);
    }

    .selected_cat_ul .all {
        color: #C7CCFF;
    }

    .selected_cat_ul .tvcm {
        color: #AACCFF;
    }

    .selected_cat_ul .webcm {
        color: #99CCFF;
    }

    .selected_cat_ul .music {
        color: #99DDFF;
    }

    .selected_cat_ul .drama {
        color: #99ddee;
    }

    .selected_cat_ul .fashion {
        color: #AAEEDD;
    }

    .selected_cat_ul .beauty {
        color: #BBEEBB;
    }

    .selected_cat_ul .idol {
        color: #CCEE99;
    }

    .selected_cat_ul .live {
        color: #DDEE55;
    }

    .selected_cat_ul .dance {
        color: #FFE277;
    }

    .selected_cat_ul .sports {
        color: #FEDD88;
    }

    .selected_cat_ul .global {
        color: #FFCCAA;
    }

    .selected_cat_ul .photo {
        color: #FFBBAA;
    }

    .selected_cat_ul .sns {
        color: #FFAAAA;
    }

    /*
    .selected_cat_ul .all {
        color: #FF99AA;
    }
*/
    .cat_area {
        margin: -20px 0 30px;
        font-size: 14px;
        font-weight: 300;
        width: 100%;
        padding-left: 8.53vw;
    }

    .reverseL {
        transform: rotate(-60deg);
        transition: 0.5s;
        -webkit-transform: rotate(-60deg);
        -webkit-transition: 0.5s;
    }

    .reverseR {
        transform: rotate(60deg);
        transition: 0.5s;
        -webkit-transform: rotate(60deg);
        -webkit-transition: 0.5s;
    }

    .cat_area p {
        margin: 0;
        padding: 10px 0;
        color: #cccccc;
        letter-spacing: 0.25rem;
    }


    .ul_cat_sp .color_all {
        color: #C7CCFF;
    }

    .ul_cat_sp .color_tvcm {
        color: #AACCFF;
    }

    .ul_cat_sp .color_webcm {
        color: #99CCFF;
    }

    .ul_cat_sp .color_music {
        color: #99DDFF;
    }

    .ul_cat_sp .color_drama {
        color: #99ddee;
    }

    .ul_cat_sp .color_fashion {
        color: #AAEEDD;
    }

    .ul_cat_sp .color_beauty {
        color: #BBEEBB;
    }

    .ul_cat_sp .color_idol {
        color: #CCEE99;
    }

    .ul_cat_sp .color_live {
        color: #DDEE55;
    }

    .ul_cat_sp .color_dance {
        color: #FFE277;
    }

    .ul_cat_sp .color_sports {
        color: #FEDD88;
    }

    .ul_cat_sp .color_global {
        color: #FFCCAA;
    }

    .ul_cat_sp .color_photo {
        color: #FFBBAA;
    }

    .ul_cat_sp .color_sns {
        color: #FFAAAA;
    }

    /*
    .ul_cat_sp .color_all {
        color: #FF99AA;
    }
*/
    .mix {
        vertical-align: top;
        width: 43.2vw;
        margin-bottom: 40px;
        display: inline-block;
    }

    .mix:nth-child(odd) {
        margin-right: 0;
    }

    /*-------------------------
    single-works
    --------------------------*/
    .works_top {
        padding-top: 108px;
    }

    .works_video {
        margin-bottom: 40px;
    }

    .works_title {
        padding: 400px 7vw 40px;
        margin: -400px -5.33vw 30px;
    }

    .works_title h1 {
        margin: 3px 0 10px;
    }

    .works_scroll {
        width: 100%;
        text-align: right;
    }

    .works_scroll p {
        font-family: 'Lato', sans-serif;
        font-size: 8px;
        FONT-WEIGHT: 400;
        color: #cccccc;
        letter-spacing: 0.3rem;
        display: inline-block;
        margin: 0 0 5px;
    }

    .scroll_line {
        background: #cccccc;
        height: 1px;
        width: 90px;
        display: inline-block;
        vertical-align: middle;
        margin-right: -7vw;
    }

    #single-works .works_title h1 {
        font-size: 12px;
    }

    .works_overview,
    works_team {
        margin-top: 60px;
    }

    .works_team_member {
        width: 100%;
    }

    .works_images_sp {
        position: relative;
    }

    .works_images_sp img {
        width: 100%;
        height: auto;
    }

    .works_bottom {
        margin: 0;
        padding: 0 10vw 80px;
    }

    .works_bottom_title {
        padding: 40px 0;
        text-align: center;
    }

    .works_sns_sp {
        margin-top: 80px;
    }

    .share_sp {
        display: inline-block;
    }

    .share_letter_sp {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 10px;
        letter-spacing: 0.15rem;
        color: #cccccc;
        margin: 0;
        width: 50px;
        display: inline-block;
        vertical-align: middle;
        line-height: 16px;
    }

    .share_line_sp {
        width: calc(84vw - 125px);
        height: 1px;
        background-color: #cccccc;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
    }

    .works_sns_sp img {
        width: 20px;
    }

    .works_sns_sp ul {
        display: inline-block;
        margin: 0;
    }

    .works_sns_sp ul li {
        text-align: center;
        margin: 0;
        color: #707070;
        display: inline-block;
        margin-left: 20px;
    }

    .works_sns_sp ul li i {
        font-size: 14px;
    }

    .works_sns_sp ul li .fa-twitter:hover {
        color: #1DA1F2;
    }

    .works_sns_sp ul li .fa-facebook:hover {
        color: #3C5A99;
    }


    /*-------------------------
    members
    --------------------------*/
    #members .page_title {
        padding-top: 108px;
    }

    .member_content {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .member_content:nth-child(odd) {
        padding: 40px 5.33vw 20px;
    }

    .member_content:nth-child(even) {
        padding: 40px 5.33vw 20px;
    }

    .member_contents_top {
        padding: 40px 5.33vw 20px;
    }

    .member_content_top {
        box-sizing: border-box;
    }

    .introduction_top {
        margin: 0;
        width: 100%;
    }

    .introduction {
        width: 100%;
        margin: 15px 0 0;
    }

    .cursive_career:nth-child(3) {
        top: -32px;
        width: 160px;
    }

    .members_leaf3 {
        left: 100px;
        top: -10px;
    }

    .members_illust1 {
        position: absolute;
        right: 0;
        top: -20px;
    }

    .members_illust2 {
        position: absolute;
        right: 0;
        top: -20px;
    }

    .members_leaf2 {
        left: 115px;
    }

    .members_illust3 {
        right: 1px;
        top: -14px;
    }

    .member_sns_top {
        margin: 40px 0 0;
    }

    .career_left {
        width: 100%;
        margin-bottom: 30px;
    }

    .career_right {
        width: 100%;
    }

    .member_content_top {
        padding: 0;
    }

    .members_career {
        margin: 0 0 40px;
    }


    /*-------------------------
    company
    --------------------------*/
    #company .page_top {
        padding: 0;
    }

    #company_info .page_title {
        margin-bottom: 75px;
    }

    #gmap {
        width: 100vw;
        height: 100vw;
        margin-left: -5.33vw;
        top: 207px;
    }

    .news_area .page_title {
        margin-bottom: 35px;
        padding-top: 35px;
    }

    .company_info {
        width: 100%;
        float: right;
        margin: 0;
        padding-top: 100vw;
    }

    .ci_table {
        font-size: 12px;
        margin-left: 0;
        padding-right: 0;
        vertical-align: top;
    }

    .ci_table.en {
        margin-left: 0;
    }

    .ci_table tr td:nth-child(1) {
        width: 72px;
        padding-right: 12px;
    }

    .ci_table tbody {
        vertical-align: top;
    }

    .cursive_more-info {
        left: unset;
        right: 0;
        width: 140px;
    }

    .arrow_more-info {
        left: unset;
        transform: scale(-0.5, 0.5);
        right: 20px;
    }

    .news_area {
        width: 100%;
        padding: 0 5.33vw 40px;
    }

    #company .news_table:nth-child(3) {
        margin-top: 30px;
    }

    .awards {
        margin: 80px 0 80px;
    }
    .news_area .line_title {
        position: inherit;
        margin-top: -45px;
    }

    .equipment_camera {
        display: block;
        width: 100%;
        margin-right: 0%;
    }

    .equipment_monitor {
        display: block;
        width: 100%;
    }

    .equipment_others {
        display: block;
        width: 100%;
    }

    .awards .page_title,
    .media .page_title,
    .equipment .page_title {
        position: inherit;
        background: rgba(256, 256, 256, 0.6);
        margin: 0 auto;
        padding: 35px 30px;
        text-align: center;
        left: 0;
        top: 0;
    }

    .news_data {
        display: inline-block;
        font-size: 10px;
        line-height: 1.6rem;
    }

    .news_description {
        display: inline-block;
    }

    .company_info_title {
        padding: 40px 0 0px;
        text-align: center;
        margin: 0;
    }

    .company_info hr {
        margin: 10px 7vw;
        height: 2px;
        border-width: 1px;
    }

    /*-------------------------
    recruit
    --------------------------*/
    .recruit .page_title {
        padding-top: 108px;
    }

    #recruit_description {
        width: 100vw;
        display: block;
        margin-left: -5.33vw;
        padding: 40px 10.66vw;
    }

    #recruit_contents {
        margin: 60px 0 0;
        width: 100%;
        display: block;
    }

    .recruit_content {
        padding: 35px 5.33vw 60px;
    }

    .content_title {
        width: 100%;
    }

    .content_description p {
        width: 100%;
    }

    .content_description {
        display: block;
        width: 100%;
    }

    .open_btn {
        margin: 0 0 0 40px;
        position: absolute;
        bottom: 30px;
        right: 5.33vw;
        height: 16px;
        width: 16px;
        display: inline-block;
        vertical-align: bottom;
    }

    .btn_more {
        display: none;
        position: absolute;
        top: -2px;
        right: 20PX;
        margin: 0;
        font-family: 'Lato', sans-serif;
        font-size: 12px;
        FONT-WEIGHT: 300;
        color: #888888;
        letter-spacing: 0.3rem;
    }

    .btn_close {
        display: none;
        position: absolute;
        top: -2px;
        RIGHT: 30PX;
        margin: 0;
        font-family: 'Lato', sans-serif;
        font-size: 12px;
        FONT-WEIGHT: 300;
        color: #888888;
        letter-spacing: 0.3rem;
    }

    .plus_ver {
        position: absolute;
        right: 9px;
        left: unset;
        margin: auto;
        height: 12px;
        width: 2px;
        background-color: #F6BB77;
        transition: 0.6s;
    }

    .plus_side {
        position: absolute;
        top: 0;
        bottom: 4px;
        right: 4px;
        margin: auto;
        width: 12px;
        height: 2px;
        background-color: #F6BB77;
        transition: 0.6s;
    }

    .minus_ver {
        transform: rotate(90deg);
        -webkit-transition: 0.5s ease;
        right: 10px;
    }

    .open_area {
        margin: 30px 0;
        padding-left: 5.33vw;
    }

    .apply_box_description1 {
        margin: 35px 0;
    }

    .apply_box_description2 {
        width: calc(100% - 60px);
    }

    .cursive_joinus {
        position: absolute;
        bottom: 30px;
        right: 0px;
        width: 100px;
    }

    .apply_box {
        padding: 5.33vw;
        margin-top: 40px;
        background: #fff;
        color: #444444;
        position: relative;
    }

    /*-------------------------
    contact
    --------------------------*/
    .page_description {
        margin: 0 -5.33vw;
    }

    #form {
        margin-top: 40px;
    }
    form {
        width: 100%;
    }

    .hato {
        display: none;
    }

    .cursive_form {
        font-size: 64px;
    }

    #contact .page_top {
        padding: 0;
    }

    .page_description p {
        padding: 15px 5.33vw;
        margin: 0;
    }

    /*-------------------------
    footer
    --------------------------*/
    footer {
        margin-bottom: 0;
    }

    footer hr {
        margin: 0 5.33vw 40px;
    }

    .footer_ul {
        display: block;
        margin: 0px 10.66vw 0;
    }

    .footer_ul li {
        display: block;
    }

    .footer_address,
    .footer_sns,
    .footer_contact {
        margin: 15px 0 25px 10px;
    }

    .footer_tel {
        margin-bottom: 15px;
    }

    .footer_mail {
        margin-bottom: 15px;
    }

    .footer_address .footer_content {
        margin: 15px 0 0 10px;
    }

    .footer_content {
        margin: 15px 0 15px 10px;
    }

    .footer_tel .footer_content a {
        color: #444444;
        text-decoration: none;
    }

    .footer_sns_ul {
        margin: 15px 0 0 10px;
        color: #444444;
        font-size: 10px;
    }

    .footer_sns li i {
        font-size: 14px;
        color: #cccccc;
    }

    .portfolio-experiment,
    .scene {
        width: 90px;
    }

    .copyright {
        text-align: center;
        margin: 40px 0 40px;
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    /*-------------------------
    important
    --------------------------*/
    .show {
        display: block;
    }
    .sp {
        display: block!important;
    }

    .pc {
        display: none!important;
    }
}

@media screen and (min-width: 480px) and (max-width: 800px) {
    .nav-menu-bg {
        right: 0px;
        width: 35vw;
    }

    .lang_switch {
        right: 17vw;
    }

    .selected_cat_ul {
        margin: 10px 68vw 10px 4vw;
    }

    .nav-menu-bg {
        right: 0px;
        width: 36vw;
    }

    .selected_cat_ul {
        display: inline-block;
        width: 75px;
        margin: 10px 67vw 10px 4vw;
    }

    .works_bottom {
        padding: 0 7vw 80px;
    }

    #latest {
        margin: 0 7vw 0;
        background-color: rgba(256, 256, 256, 0.5);
        padding: 40px 7vw 80px;
    }

    .works_latest_title {
        position: relative;
        left: 0;
    }

    .line_title {
        position: absolute;
        top: 5px;
        left: 15px;
        z-index: -1;
    }

    .latest_works {
        width: 100%;
        margin-bottom: 50px;
    }

    .latest_work {
        width: 45vw;
        display: inline-block;
        vertical-align: top;
    }

    .latest_work:nth-child(1) {
        margin: 20px 60px 0 0;
    }

    .latest_work:nth-child(2) {
        margin: 40px 0 0;
        float: right;
    }

    .latest_btn {
        margin: 100px 0 40px;
        padding-bottom: 1px;
    }

    .latest_btn .btn {
        float: right;
    }

    .company_info {
        padding-top: 98vw;
    }
}

@media screen and (min-width: 480px) and (max-width: 1200px) {
    .apply_box_description2 {
        width: calc(100% - 60px);
    }

    .cursive_joinus {
        position: absolute;
        bottom: 40px;
        right: 40px;
        width: 100px;
    }
}