
@media screen and (max-width:600px){
    .title {margin: 0 0 40px 0}

    #header .menu ul {display: none;}
    #visual {height: 620px;}
    #visual .text h2 {font-size: 2.1rem;}
    #visual .image img {width: 270px;}
    #visual .image img.img_2 {width: 260px;}


    #customer .logo-track img {margin: 0 20px}

    #ars .box.time {flex-direction: column; align-items: center; height: auto;}
    #ars .box.time .container {width: 100%; padding: 40px 0 270px 0}
    #ars .box.time .container img {width: 25%;}
    #ars .box.time .container .phone {width: 53%;}

    #case .title {flex-direction: column; }
    #case .title .right {margin: 20px 0 0 0;}

    #business .box {width: 100%;}

    #privacy .yt_wrap {height: 280px;}
    #privacy .box.right {flex-direction: column; align-items: center;}
    #privacy .box_wrap {gap: 20px;}

    #package .main {padding: 40px}
}

@media screen and (max-width:500px){
    #header .logo img {width: 127px;}
    html {font-size: 13px;}
    .inner {padding: 50px 20px;}
    .title {margin: 0 0 30px 0;}
    .title h3 {font-size: 1.6rem;}
    .title p {font-size: 1.1rem;}
    .title > span {margin: 0 0 10px 0;}
    #visual .text img {width: 40px;}
    #visual .inner {padding: 80px 20px 60px;}
    #visual .text h2 {font-size: 1.8rem;}
    #visual .text p {font-size: 1.1rem;  margin: 20px 0 0 0;}
    #visual .image {margin:50px 0 auto;}
    #visual .image .wh_gra {height: 180px;}

    #customer .logo-track img {height: 47px}
    #customer .logo-track {animation: roll 40s linear infinite; }

    #solution .box .title {font-size: 1.3rem; top: 20px; left: 20px;}
    #solution .box:nth-of-type(1) .bubble, #solution .box:nth-of-type(3) .bubble {width: 60%}
    #solution .box:nth-of-type(2) .bubble {width: 72%;}

    #ars .box.time {border-radius: 30px;}
    #ars .box.time .container .phone {width: 73%;}
    #ars .box.time .container {padding: 40px 0 240px 0}

    #case .image_wrap {border-radius: 30px; padding: 30px 20px;}
    #case .title .right {flex-direction: column; gap: 10px;}

    #business .box {border-radius: 30px;}
    #business .box.left .img_2 {margin: 0 -14px;}
    #business .box.left .img_3 {transform: translateY(50px);}
    #business .box.left .title {margin: 69px 0 20px 0; font-size: 1.4rem;}
    #business .box.right {padding: 50px;}
    #business .box.right .title {font-size: 1.6rem;}
    #business .box.right .text {font-size: 1.1rem; margin: 70px 0 0 0;}
    
    #privacy .box_wrap .box {border-radius: 20px;}
    #privacy .box.right {border-radius: 30px}

    #package .main {padding: 30px; border-radius: 30px;}
    #package .main .bedge {padding: 6px 12px;}
    #package .main .name {font-size: 1.4rem;}
    #package .main .name span {margin: 0 6px;}
    #package .main .text {text-align: center; margin: 7px 0;}
    #package .main .text img {margin: 0 10px; height: 10px;}
    #package .add .box {gap: 20px;}
    #package .add .box .container {border-radius: 30px; padding: 30px;}
    #package .add .box .container .name {font-size: 1.2rem; margin: 0 0 10px 0;}
    #package .add .box .container > span {font-size: 0.8rem; margin: 0 0 12px 0;}
    #package .add .box .container .box_img {bottom: 30px; right: 20px; width: 50px;}

    #useto .box {padding: 30px;}
    #useto .box.top .left {padding: 0 0 20px 0; text-align: center;}
    #useto .box.top .left .toptext p {font-size: 1.5rem;}
    #useto .box.top .right img {width: 80%; float: inherit; margin: 0 auto;}
    #useto .box.bottom {padding: 30px 0 76% 0;}
    #useto .box.bottom img {width: 30%;}
    #useto .box.bottom .center .toptext p {font-size: 1.5rem;}

    #application a {height: 22px;}

    #business .title h3 .gradient {font-size: 1.4rem}
    #business .box.left a {width: 150px; height: 44px;}
    #business .box.left a img {width: 16px;}

    #last .text > p {font-size: 1.3rem;}
    #last .inner {padding: 60px 20px;}

    #footer .inner {padding: 50px 20px;}
    #footer .top .left {gap: 16px;}
    #footer .top .left a {font-size: 1rem;}
    #footer .bottom .left .box {gap: 10px;}
    #footer .bottom .left .box p {font-size: 0.9rem;}
    #footer .bottom .left .box span {font-size: 0.9rem;}

    #go_top {width: 50px; height: 50px;}
}