@media screen and (max-width:1240px) {
    .development_example_wrapper{
        justify-content: center;
        
    }
    .development_example_wrapper > div{
        width: 100%;
        margin: 16px;
    }

}


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

    .merit_content{
        flex-wrap: wrap;
    }
    .page_top{
        right: 5%;
    }

    .animation_delay2{
        animation-delay:0.6s;
    }

    ul.nav li{
        margin: 0 10px;
    }
    
}

@media screen and (max-width:1070px) {
    .factory_head .pc_only{
        display: none;
    }
    .factory_head .sp_block{
        display: block;
    }
}


@media (orientation: portrait)and (min-width: 781px){
    .top_content_wrapper{
        max-height: 800px;
    }
}


@media screen and (max-width: 780px) {
    html{
        font-size: 62.5%;
    }
    .sub_heading{
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 32px;
        text-align: center;
    }
    header{
        padding: 16px;
    }
    header ul{
        padding-left: 0;
    }

    header h1{
        display: none;
    }

    .header_logo{
        width: 240px;
    }

    .h2_dark{
        height: 48px;
        font-size: 1.6rem;
        line-height: 48px;
        padding: 0px;
    }

    .h2_blue{
        font-size: 2.4rem;
        padding: 24px 0;
    }

    h3{
        font-size: 1.8rem;
        line-height: 24px;
        text-align: center;
    }

    .h3_before_text{
        font-size: 3.2rem;
        margin-bottom: -48px;
        margin-top: -16px;
        text-align: center;
        line-height: 124px;
    }

    .pc_only{
        display: none;
    }

    
    .sp_only{
        display: inline;
    }
    .sp_block{
        display: block;
    }
    .factory_head .sub_top_text{
        top: 24px;
    }

    .content_wrapper_light{
        padding: 48px 0;
    }
    
    .white_box{
        padding: 12px;
    }

    .humburger_button{
        background: #0092E6;
        border-radius: 28px;
        border: solid 2px #FFF;
        display: block;
        position: fixed;
        top: 36px;
        right: 20px;
        width: 56px;
        height: 56px;
        z-index: 200;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-transition: all 400ms;
        transition: all 400ms;
    }
    
    .humburger_button span {
        position: absolute;
        display: inline-block;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 24px;
        height: 3px;
        background: #ffffff;
        border-radius: 10px;
        transition: all 400ms;
    }
    
    .humburger_button span:nth-child(1) {
        top: 18px;
    }

    .humburger_button span:nth-child(2) {
        top: 26px;
    }

    .humburger_button span:nth-child(3) {
        top: 34px;
    }
    .close span{
        left: 14px;  
    }   
    .close span:nth-child(1){
        transform: rotate(45deg);
        top:26px;
    }
    .close span:nth-child(2){
        opacity: 0;
    }
    .close span:nth-child(3){
        top: 26px;
        transform: rotate(-45deg);
    }

    .nav{
        display: none;
        margin-top: 0;
        opacity: 0;
        animation-delay:0.2s;
        overflow: auto;
        font-size: 1.6rem;
    }

    .nav_open{
        display: block;
        transform: translateX(120px);
        animation-name: fadeIn;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    ul.nav li{
        margin: 44px auto;
        text-align: center;
    }

    header .contact_button{
        max-width: 344px;
        width: 100%;
        text-align: center;
    }
    .transform {
        background: none;
        box-shadow: none;
    }

    .mb_nav{
        height: 100%;
        background-color: #E3F5FF;
        background-image: url(./../img/top_bg_img.png);
        position: fixed;
        z-index: 101;
        overflow-y: scroll;
    }

    .header_nav_wrapper{
        display: block;
    }

    .pankuzu{
        margin-top: -32px;
    }

    .pankuzu ul{
        margin-bottom: 0;
    }

    .top_content_wrapper{
        padding: 128px 8px 0 8px;
        margin: 0 auto;
        position: relative;
    }
    .top_content_text{
        position: static;
        transform: none;
    }
    .top_content{
        max-width: 400px;
        height: auto;
        margin: 0 auto;
        position: static;
    }
    .top_content .contact_button{
        width: calc(100% - 16px);
    }
    .top_contact_button{
        display: flex;
        justify-content: center;
    }

    .sub_top_content_wrapper{
        padding: 128px 0px 0 12px;
    } 
    .sub_top_content{
        height: 308px;
        margin-top: 80px;
    }
    
    .sub_top_text{
        top:0;
    }
    
    .sub_top_img{ 
        top: 40px;
        max-width: 320px;
        overflow: hidden;
        padding-right: 8px;
    }
    .sub_top_img .mv_anime_svg{
        height: 290.333px!important;
    }

    .catch_text{
        font-size: 3.2rem;
        line-height: 43px;
        margin: 8px 0;
        padding: 8px 12px 8px 8px;
    }
    .top_content_wrapper .sub_heading{
        margin: 24px auto;
    }

    .top_text_bottom .slide_in{
        width: auto;
    }
    .slide_in .sub_heading{
        width: calc(100% - 16px);
        white-space: normal;
    }
    .sub_top_content .slide_in{
        transition: width 1000ms ;
    }

    .top_img{
        margin: 0 auto;
        height: 100%;
        right: auto;
        z-index: 0;
        max-width: 344px;
    }

    .top_check_button{
        display: none;
    }
    .top_text_bottom {
        position: absolute;
        bottom: 50px;
        max-width: 400px;
        opacity: 0;
        z-index: 1;
        margin-right: 8px;
    }
    .top_text_top{
        z-index: 2;
        position: relative;
    }

    .top_text_bottom br{
        display: none;
    }
    .copyright{
        margin-left: auto;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
    }


    .worries h2{
        max-width: 320px;
        margin-bottom: -28px;
    }

    .worries img{
        width: 240px;
        margin: 32px auto;
    }

    .worries > div{
        display: block;
        margin: 0 16px;
    }

    .worries li{
        font-size: 1.4rem;;
        padding: 15px 0px 15px 15px;
    }

    .worries ul{
        padding-left: 20px;
    }
    

    .solution{
        position: relative;
        margin: 0 16px;
        margin-top: -64px;
        
    }

    .marquee{
        font-size: 7.2rem;
    }
    .solution_feature .white_box{
        margin-top: 0;
    }
    .solution_content{
        display: block;
        margin: 16px;
        margin-top: 12px;
        margin-bottom: 0;
    }
    .solution_content h3{
        line-height: 48px;
    }

    .solution_content .white_box{
        max-width: 540px;
        width:auto;
        margin: 24px auto;
        padding: 24px 12px;
    }

    .solution_feature{
        margin-top: 0;
        margin-bottom: 0;
    }

    .solution_feature_content{
        padding-top: 8px;
    }

    .solution_feature_content h3{
        padding-bottom: 10px;
    }

    .solution_feature p{
        font-size: 1.4rem;
    }

    .data_basis_wrapper{
        padding-top: 30px;
    }
    
    .data_basis_wrapper .sub_heading{
        margin: 0 16px;
    }

    .data_basis_wrapper.content_wrapper_light{
        padding-bottom: 24px;
    }
    .data_basis_wrapper .h2_dark{
        margin-bottom: 48px;
    }

    .data_basis_content_img{
        overflow: scroll;
    }

    .data_basis_content_img img{
        max-width: 900px;
    }
    .introduction_flow .h2_blue{
        padding-bottom: 16px;
    }
    .introduction_flow .data_basis_content_img img{
        max-width: 1100px;
    }

    .introduction_flow img{
        margin: 0 auto;
    }

    .introduction_flow .contact_button {
        width: 100%;
        margin: 8px;
    }
    
    .data_basis_content_text{
        font-size: 1.4rem;
        line-height: 24px;
        text-align: left;
        margin: 24px 16px 40px 16px;
        padding-top: 0;
    }

    .data_basis_content_text:last-child  br{
        display: none;
    }
    .introduction_flow{
        padding: 24px 0  32px 0;
    }
    .introduction_flow .sub_heading{
        padding: 16px;
    }
    
    .introduction_flow .contact_button{
        max-width: 344px;
        margin-top: 30px;
    }

    .merit_content{
        display: block;
    }

    .merit_content .white_box{
        width: auto;
        padding: 0 24px 24px;
        margin: 32px 16px;
        margin-bottom: 24px;
    }

    .example{
        padding-top: 8px;
        padding-bottom: 32px;
    }
    .example_list_button_wrapper,.example_content_img_pc{
        display: none;
    }

    #event .example_list_button_wrapper ,
    #event .example_content_img_pc{
        display: block;
    }
    #event .example_list_button{
        padding: 15px 20px;
    }
    #event table th{
        width: 120px;
        padding-left: 0px;
        justify-content: center;
    }

    #event table td{
        width: 100%;
    }

    
    .example_content_img_sp{
        display: block;
        width: 160px;
        margin: 48px auto;
    }
    
    .example .sub_heading{
        padding: 0 16px;
    }
    .slick-track {
        align-items: normal;
    
    }
    
    .slider_wrapper{
        height: auto;
    }

    .slider .slick-arrow{
        width: 48px;
        height: 48px;
        border-radius: 24px;
    }


    .example_content{
        width: 320px;
        flex-flow: column;
        padding: 34px 12px;
        height: 100%;
    }

    .example_content h3{
        padding-bottom: 10px;
    }

    .example_content .h3_before_text{
        text-align: left;
    }

    .slick-center .example_content{
        padding:  34px 12px;
    }

    .footer{
        padding: 24px 0;
        padding-bottom: 0;
    }

    .footer_content{
        flex-flow: column;
        justify-content: center;
    }

    .footer_img{
        width: 344px;
        margin: 0;
        position: absolute;
        z-index: 0;
        top: 150px;
    }

    .page_top{
        position: static;
        margin: 32px auto;
    }
    .footer_text{
        z-index: 2;
        max-width: 500px;
        margin: 0 auto;
    }

    .catch_text_wrap{
        width: 350px;
    }

    .footer_text > div{
        text-align:center;
        width:100%;
        padding: 8px;
    }
    .footer_text .sub_heading{
        margin: 16px;
        margin-top: 300px;
    }

    .footer .contact_button{
        max-width: 344px;
        width: 100%;
        margin: 0 auto;
    }

    .page_top_button::after{
        right: 14px;
        top: 9px;
    }  

    .page_top{
        width: 60px;
    }
    
    .example_page_top.content_wrapper_light{
        padding-bottom: 16px;
    }
    
    .development_example{
        margin-top: 0px;
    }

    .development_example .sub_heading{
        margin: 12px 18px 16px 18px;
    }

    .development_example .h3_before_text{
        font-size: 4rem;
        margin-bottom: -20px;
    }

    .development_example_content{
        padding-top: 24px;
    } 
    .development_example_content .h3_before_text{
        margin-left: 0;
    }
    .case{
        margin-top: 24px;
    }

    .case .h3_before_text{
        margin-left: 0;
    }

    .case_img_sp,.case_img_sp.underline{
        display: block;
    }
    .caseh3_pc.underline,.caseh3_pc.underline::after{
        border:0;
    }
    .case_img_sp.underline{
        margin-bottom: 24px;
    }

    .case_img_sp img{
        margin: 32px auto;
    }

    .case_top p{
        font-size: 1.4rem;
    }
    .case_top h3{
        font-size: 2.4rem;
    }
    .case_top .h3_before_text{
        font-size: 4rem;
    }
    .case .white_box{
        margin: 16px;
        padding: 16px 12px 24px 12px;
    }
    .case_wrapper.content_wrapper_light{
        padding-bottom: 16px;
    }
    .case_blue{
        padding: 12px;
    }
    .case_check_list{
        padding: 44px 0px 24px 0px;
    }

    .case_check_list ul{
        padding-left: 30px;
    }

    .next_prev_wrapper{
        height: 30px;
        margin: 48px 0px;
    }
    .case .example_list_button_wrapper{
        display: block;
        margin-bottom: 12px;
    }

    .check_list li{
        padding: 15px 10px;
    }

    .contact{
        padding-top: 8px;
    }

    .contact .h2_blue{
        padding-bottom: 16px;
    }

    .contact .white_box{
        margin: 0 16px;
        margin-top: 32px;
    }

    .contact_flow_dotted img{
        transform-box: fill-box;
        height: 3px;
    }
    .contact_flow_text{
        font-size: 1.4rem;
    }

    .contact .sub_heading{
        margin: 16px;
    }
    .contact .contactform table th{
        flex-flow: column;
        width: fit-content;
        padding-top: 14px;
        border-bottom: 0;
        position: relative;
    }
    .contact .contactform table th::after{
        content: "";
        position: absolute;
        width: 40px;
        display: inline-block;
        border-bottom: 1px solid #DEDEDE;
        left: 0 ;
        bottom: 0;
    }

    .contact .contactform table tr{
        flex-flow: column;
    }
    .contact_blue_dark {
        margin-right: auto;
        margin-top: 14px;
        margin-bottom: 8px;
    }
    .contact .contactform table td::before {
        display: none;
    }
    .contact .contactform table td{
        width: 100%;
        padding:8px 0;
    }
    .error{
        right: auto;
        left: 64px;
        top: -30px;
    }
    .privacypolicy{
        font-size: 1.4rem;
    }
    .agree{
        font-size: 1.6rem;
        margin-top: 24px;
    }

    .completion{
        text-align: left;
    }
    .example_list_button_wrapper{
        width: 100%;
        max-width: 317px;
    }
    .example_list_button {
        padding: 15px;
        display: block;
        margin: 0 auto;
    }
    .privacypolicy_wrapper {
        padding: 32px 20px;
        margin-top: 16px;
    }
    .privacypolicy p::after{
        display: none;
    }
    .cobtact_flow{
        padding: 0;
    }

    .summary_content{
        margin-left: 0;
        margin-bottom: 0;
    }
    .summary h3{
        padding-left: 0;
    }

    .factory_content_top .h2_dark{
        height: 56px;
        border-radius: 32px;
        font-size: 18px;
        line-height: 24px;
        padding-top: 5px;
        max-width: 304px;
    }
    .request .h2_dark{
        height: 48px;
        font-size: 1.6rem;
        line-height: 48px;
        padding: 0px;
    }
    .factory_content{
        padding-left: 16px;
        padding-right: 16px;
    }
    .request_wrapper .white_box{
        margin-top: 24px;
    }
    .request_wrapper .h3_blue{
        margin-bottom: -34px;
        margin-top: 12px;
    }
    .request_top_wrap{
        margin-bottom: 12px;
    }
    .request_wrapper {
        margin-left: 16px;
        margin-right: 16px;
    }
    .request_right img{
        display: block;
        margin: 0 auto;
        margin-bottom: 32px;
        margin-top: 24px;
    }

    .data_case h3{
        font-size: 1.8rem;
        margin-top: 36px;
    }
    .data_case .sp_only{
        margin: 0 auto;
        display: block;
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .data_case_flex .data_case_text{
        font-size: 1.6rem;
    }
    .data_case .h3_blue{
        font-size: 2.4rem;
        margin-bottom: -10px;
    }
    .analysis{
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 14px;
        padding-top: 24px;
    }
    .request_wrapper .white_box{
        padding: 12px;
    }
    .data_case_top{
        padding-top: 0;
    }
    .data_case.factory_content  {
        padding-bottom: 24px;
    }
    .request_wrapper .white_box .check_list{
        padding-left: 18px;
    }
    .factory_content.content_wrapper_light{
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .case_study .h2_blue{
        padding-top: 12px;
        padding-bottom: 8px;
    }

    .request .sub_heading{
        text-align: left;
    }
    .h2_dark_big,
    .factory_content_top .h2_dark_big {
        font-size: 2rem;
    }
}