@media screen and (max-width:1700px){
    #visual .image img {width: 510px;}
    #visual .image img.img_2 {width: 510px;}
}
@media screen and (max-width:1400px){
    #visual {height: 820px;}
    #visual .image img {width: 460px;}
    #visual .image img.img_2 {width: 440px;}
}
@media screen and (max-width:1300px){
    html {font-size: 15px;}
    #header .inner {padding: 30px 80px;}
    #header.fixed .inner {padding: 20px 80px;}
    #header .menu a {font-family: 'pre_SB'}

    .inner {width: 100%; padding: 120px 80px;}
    .title {margin: 0 0 55px 0;}
    #visual .inner {padding: 120px 50px 60px;}
    #visual .text {margin:50px 0 0 0;}
    #visual .image {width: 90%; margin: 90px auto 0;}
    #customer {overflow: hidden;}
    #customer .inner {padding: 0 20px 120px 20px;}
    #privacy .box.right {padding: 40px;}
    #useto .box.top .right img {float: right;}
    #ars .box.time .container .phone {width: 80%;}
    #footer .inner {padding: 70px 80px;}
    .new_quickmenu {padding: 14px 0 0px 0;}
    .new_quickmenu a {width: 78px; height: 85px;}
    .new_quickmenu a p {font-size: 12px;}

    #ars .box.time .container {padding: 40px 0 0 0;}
    #ars .box.time {width: calc(100% - 250px);}
    #ars .box.time .container p {font-size: 1.1rem;}
    #ars .box.time .container .phone {width: 70%;}
    #ars .box.phone {width: 250px; }
    #ars .box.phone img {width: 100%;}
    #ars .box.time .container p {margin: 20px 0 0 0;}

    #business .box.right {padding: 70px;}
    #business .box.left a {margin: 0 auto 40px;}
    #business .box.left .title {margin:90px 0 20px 0}
}
@media screen and (max-width:1200px){
    #visual .image img {width: 390px;}
    #visual .image img.img_2 {width: 400px;}

    #solution .box .title {top: 40px; left: 43px;}

    #footer .top {flex-direction: column;}
    #footer .top .right {margin: 20px 0 0 0;}
    #footer .bottom {flex-direction: column; align-items: center;}
    #footer .bottom .right {margin: 40px 0 0 0;}
}
@media screen and (max-width:1024px){
    html {font-size: 14px;}

    #visual {height: 710px;}
    #visual .image img {width: 350px;}
    #visual .image img.img_2 {width: 330px;}

    #customer .logo-track {animation: roll 40s linear infinite; }

    #solution .box_wrap {flex-direction: column; align-items: center;}
    #solution .box {width: 100%; max-width: 680px;}
    #solution .box .title {font-size: 2.2rem; left: 30px;}
    #solution .box .bubble {width: 55%; left: auto; transform: none; right: 20px;}
    #solution .etc {text-align: center;}
    #solution .box:nth-of-type(1) .bubble,
    #solution .box:nth-of-type(3) .bubble {width: 46%}
    #solution .box:nth-of-type(2) .bubble {width: 50%}

    #ars .box_wrap {flex-direction: column-reverse; align-items: center;}
    #ars .box.time {width: 100%; height: 450px; border-radius: 40px;}

    #case .image_wrap {border-radius: 40px;}
    #case .image_wrap img {max-width: 500px; margin: 0 auto;}

    #business .box {border-radius: 40px; width: 600px;}
    #business .box_wrap {flex-direction: column; align-items: center;}
    #business .box.right .text {position: inherit; margin: 150px 0 0 0; bottom: inherit;}
    #business .box.right .man {width: 50%;}
    
    #privacy .box_wrap {flex-direction: column; align-items: center;}
    #privacy .box_wrap .box {border-radius: 40px;}
    #privacy .yt_wrap {width: 600px;}
    #privacy .box.right {width: 600px;flex-direction: row; padding: 30px; border-radius: 40px; gap: 40px;}

    #package .main .back {display: none;}
    #package .add .box .container {padding: 38px 38px 115px 38px}
    #package .add .box .container .box_img {    bottom: 34px; right: 34px; width: 70px;}
    
    #useto .box {border-radius: 40px; padding: 60px;}
    #useto .box.top .left .bottomtext p {font-size: 1rem;}
    #useto .box.top .right img {width: 80%;}
    #useto .box.bottom .center {margin: 0 30px;}
    #useto .box.bottom .center .bottomtext p {font-size: 1rem;}

    #application img {width: 100%;}
    #application a {height: 28px;}
    #application a.video_3-1 {left: 16.5%}
    #application a.video_3-2 {right: 15.5%}
    #application a.video_4 {right: 15.5%}

    #last .inner {padding: 80px 80px;}
    #header .inner {padding: 30px 20px;}
    #header.fixed .inner {padding: 10px 20px;}
}
@media screen and (max-width:800px){
    #visual .text h2 {font-size: 2.7rem}
    #go_top {bottom: 20px; width: 60px; height: 60px;border-radius: 10px;}
    #go_top img {width: 24px;}
    #header .menu {gap: 20px;}
    #header .menu ul {gap: 30px;}
    .title h3 {font-size: 1.8rem;}
    .title p {font-size: 1.2rem;}
    .inner {padding: 80px 20px;}
    #customer .inner {padding: 0 20px 80px 20px}

    #solution .box {max-width: 510px;}
    #solution .box .title {font-size: 1.7rem;}
    #solution .box:nth-of-type(2) .bubble {width: 52%;}

    #case .title .right {gap: 20px;}
    #case .title .right a {width: 150px; gap: 14px;}

    #ars .box.time {height: 400px;}
    #useto .box.bottom {margin: 30px 0 0 0;}

    #package .add {margin: 30px 0 0 0; flex-direction: column; align-items: center; width: 100%;}
    #package .add .box {flex-direction: row; gap: 30px; width: 100%; max-width: 450px;}
    #package .add .box .container {padding: 40px;}
    #package .add .box .container .box_img {bottom: 40px; right: 40px;}

    #privacy .yt_wrap {width: 100%}
    #privacy .box.right {width: 100%}

    #last .text > p {font-size: 1.5rem;}
    #last .inner {padding: 80px 40px;}
    #last .text .btn_wrap {margin: 30px 0 0 0;}
    
    #useto .box.top {flex-direction: column;}
    #useto .box.top .right img {width: 60%;}
    #useto .box.bottom {padding: 40px 0 49% 0;}
    #useto .box.bottom img {position: absolute; bottom: 40px;}
    #useto .box.bottom img.img_l {transform: translateX(-56%)}
    #useto .box.bottom img.img_r {transform: translateX(60%)}

    #footer .bottom .left {grid-template-columns: 1fr; flex-wrap: wrap; justify-content: center;}
    #footer .bottom .left .box {justify-content: center; width: 100%;}
    #footer .top .left {flex-wrap: wrap; justify-content: center;}
    #footer .top .left .logo {width: 100%; margin: 0;}
    #footer .top .left .logo img {margin: 0 auto;}
    
}
@media screen and (max-width:767px){
    .new_quickmenu {display: none;}
    #go_top  {display: flex;}
}
@media screen and (max-width:700px){

    #visual .image img.img_1 {left: -110px;}
    #visual .image img.img_2 {right: -120px;}

    #case .title {margin: 0 0 30px 0;}
    #case .title .right a p {font-size: 1rem;}
    #case .title .right a {width: 121px; height: 40px; gap: 10px;}
    #case .title .right a img {width: 16px;}

    #business .box.left .title {font-size: 1.6rem;}

    #package .main .text {font-size: 1rem;}
    #package .main .name {font-size: 1.6rem;}

    #useto .box.bottom {padding: 40px 0 62% 0}
    #useto .box.bottom img {width: 26%;}
    #useto .box.bottom .center .toptext {margin: 0 0 20px 0;}

    #last .back {display: none;}
    #last .text {text-align: center; display: flex; flex-direction: column; align-items: center;}

    #application a {width: 15%;}
}