@media (max-width: 768px) {
    .logo{
      height: 30px;
      /* width: 1%; */
    }

    .nav{
      width: auto;
    }

    .nav ul li a {
      text-decoration: none; /* リンクの下線を削除 */
      color: #fff; /* リンクのテキスト色 */
      font-size: 0.7rem; /* リンクのテキストサイズ */
      font-weight: 600;
    }

    .nav ul li {
      margin-right: 3px; /* リスト項目の間の余白 */
    }

    .btn-primary {
      padding: 6px 16px;
      /* text-decoration: none; */
      border-radius: 16px;
      font-size: 0.6rem;
      transition: background-color 0.3s ease;
      font-weight: 600;
    }

    .btn-primary2{
      padding: 10px 20px;
      text-align: center;
      border-radius: 25px;
      font-size: 0.8rem;
      width: 200px;
      font-weight: 600;
    }

    .element {
      width: 100%;
      height: 750px;
    }

    .hero .container-left h1{
      font-size: 1.6rem;
    }

    .hero .container-left h3{
      width: auto;
      font-size: 0.8rem;
      white-space: nowrap;
    }
    
    .hero{
      padding-top: 30px;
    }

    .container {
      padding: 10px;
    }
  
    .header .nav ul li {
      margin-left: 10px;
    }
  
    .hero .hero-title {
      font-size: 2.5rem;
    }
  
    .hero .hero-text {
      font-size: 1.2rem;
    }

    .hero .container-right {
      margin-top: 50px;
      width: 350px;
      font-size: 1.5rem;
      margin-bottom: 30px;
    }

    .hero2 .container-left h1{
      font-size: 1.6rem;
    }

    .hero2 .container-left h3{
      font-size: 1rem;
      white-space: nowrap;
    }

    .hero2 .container-left h5{
      font-size: 0.8rem;
    }

    .hero2 .container-right {
      width: 350px;
      font-size: 1.5rem;
      margin-bottom: 30px;
    }

    .hero2 .container-right{
      margin-top: 50px;
    }
  
    .hero2 .container-left {
      color: #000;
      width: 95%;
      font-size: 1.8rem;
      margin-bottom: 20px;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
    }

    .portfolio .container-left2{
      max-width: 200px;
    }

    .portfolio .container-left2 img{
      max-width: 200px;
    }

    .function{
      width: 80%;
    }

    .functionimg{
      width: 75px;
      margin-bottom: 30px;
    }

    .services {
      padding: 40px 0;
    }

    .about .section-title {
      font-size: 1.8rem;
      text-align: center;
      margin-bottom: 20px;
      color: #fff;
    }

    .ajust{
      height: 50px;
    }
  
    .services-grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
  
    .portfolio-gallery {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
  
    .testimonial-slider {
      flex-direction: column;
      gap: 20px;
    }
  
    .testimonial {
      max-width: 100%;
    }
  
    /* .footer .footer-nav ul {
      flex-wrap: wrap;
    } */
  
    .footer .footer-nav ul li {
      margin: 5px;
    }

    .footer .footer-nav ul li a {
      font-size: 0.6rem;
    }

    .footer .footer-copy {
      font-size: 0.6rem;
    }

    .footer .footer-logo img {
      height: 50px;
      width: auto;
    }

    .app-container {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      height: 5vh; /* 画面全体の高さにする */
      margin: 0;
      padding: 0;
      position: relative;
      margin-right: 10px;
    }
    
    .app-badge {
        width: 90px; /* サイズ調整 */
        height: 30px; /* サイズ調整 */
    }
    
    .app-badge img {
        width: 100%;
        height: 100%;
        border-radius: 8px; /* 角を丸くする */
    }

  }