@media screen and (max-width:500px){
    html {font-size: 11px;}
    .inner {padding: 60px 20px;}
    .title {margin: 0 0 30px 0;}
    .title p {font-size: 1.2rem;}
    .title h3 {font-size: 2rem; margin: 0 0 10px 0;}
    .title > span {margin: 0 0 13px 0;}
    #header .inner {padding: 20px;}
    #header .logo img {width: 120px;}
    #visual .text {bottom: 30px;}
    #visual .text p {margin: 20px 0 30px;}
    #visual .text h2 {font-size: 2.5rem;}
    #visual .text img {width: 50px;}
    #visual .text .btn_wrap a {width: auto; font-size: 1.3rem; padding: 10px 20px; }    
    #customer .logo-track img {height: 43px; margin: 0 20px;}
    #solution .title p {font-size: 1.2rem}
    #solution .box .bubble {width: 66%;}
    #solution .box .title {font-size: 1.8rem;}
    #business .title h3 .gradient {font-size: 1.6rem;}
    #business .box {border-radius: 20px;}
    #business .box.left a {margin: 0 auto 30px;}
    #business .box.right {padding: 40px 20px;}
    #management .inner {padding:  0 20px 60px 20px;}
    #management .box {border-radius: 20px; flex-direction: column; padding: 40px 0 30px 0;}
    #management .box > .text {padding: 0 0 0 30px;}
    #management .box .text .title {margin: 30px 0 10px 0;}
    #management .box .text img {transform: translateX(-26px);}
    #ars .inner {padding:  0 20px 60px 20px;}
    #ars .box_wrap {gap: 10px;}
    #ars .box_wrap .box {border-radius: 10px;}
    #application .yt_wrap {border-radius: 16px;}
    #go_top {width: 50px; height: 50px; border-radius: 10px;}
    #go_top img {width: 20px;}
    #case .title {display: block;}
    #case .title .right {flex-direction: column; align-items: center; gap: 14px;}
    #case .title .right p {text-align: center}
    #case .title .right a {width: 140px; height: 40px; gap: 10px;}
    #case .title .right a img {width: 16px}
    #case .image_wrap {border-radius: 20px;}
    #case .image_wrap {padding: 20px;}
    #package .main {border-radius: 20px; padding: 30px;}
    #package .main .name {font-size: 1.5rem; text-align: center;}
    #package .main .name span {margin: 0 10px;}
    #package .main .text {text-align: center; margin: 2px 0 12px 0}
    #package .main .text br {display: block;}
    #package .main .text img {margin: 0 10px; transform: translateY(3px);}
    #package .add {display: block;}
    #package .add .box img {margin: 10px 0; width: 30px;}
    #package .add .box .container {border-radius: 20px; padding: 24px 0;}
    #package .add .box .container .bedge {padding: 5px 14px; margin: 0 0 12px 0;}
    #package .add .box .container .name {margin: 0 0 10px 0;}
    #package .add .box .container .name img {height: 19px; margin: 0 10px 0 0;}
    #useto_m .inner {padding: 0 20px 60px 20px}
    #useto_m .box {border-radius: 20px; padding: 30px 20px;}
    #useto_m .box img {max-width: 280px;}
    #application .inner {padding: 0 20px 60px 20px;}
    #application .box_wrap {gap: 20px;}
    #last .text {width: max-content;}
    #last .btn_wrap {margin: 10px 0 0 0;}
    #last .btn_wrap a {padding: 8px 18px;}
    #footer .tell {width: 100%; border-bottom: 1px solid #ddd; padding: 0 0 20px 0; margin: 0 0 30px 0;}
    #footer .menu {display: block; width: 100%;}
    #footer .menu ul {display: flex; gap: 0 10px; flex-wrap: wrap; margin: 0 0 20px 0;}
    #footer .menu ul .first {width: 100%; margin: 0;}
    #footer .menu ul li {margin: 2px 0 1px 0;}
    #footer .menu ul li.first a {font-size: 1.3rem;}
    #footer .menu ul li a {font-size: 1.2rem;}
    #footer .btn_wrap {margin: 10px 0 0 0;}
    #footer .btn_wrap a {width: 110px;}
    #footer .btn_wrap a p {margin: 0 10px;}
    #footer .btn_wrap a.youtube p {margin: 0 10px 0 15px;}
    #footer .family {width: 354px}

    .new_quickmenu {display: none;}
    #go_top  {display: flex;}
}