@media screen and (max-width: 768px) {
  .header {
      flex-direction: column;
      align-items: center;
  }
  .header img.logo {
      position: static;
      animation-delay: 0s;
      width: 143px;
      height: 124px;
      margin-bottom: 20px;
  }
  .header img.side-image {
      width: 28px;
      height: auto;
      margin-bottom: 20px;
      position: static;
  }
  .header .text-content {
      width: 90%;
      text-align: center;
  }

  .section .text-area {
    display: none;
  }

  .slider img {
    width: 375px;
    height: 100%;
    object-fit: cover;
  }
  .slider-section {
    background-image: none;
    background-color: #000;
    height: 100%;
  }

  .slick-slide {
    margin: 0px;
  }

  .slider-section .slider {
    position: relative;
  }

  .slider-section .slider img {
    width: 100%;
  }

  .slider-section .slider span {
    position: absolute;
    bottom: 30px;
    transform: translateX(-50%);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 40px;
    text-align: center;
    white-space: nowrap;
  }

  .slider span {
    display: initial;
  }

  .slider-wrapper {
    position: relative;
  }

  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 42px;
    color: #fff;
    z-index: 10;
    cursor: pointer;
  }

  .slider-arrow-left {
    left: 10px;
  }

  .slider-arrow-right {
    right: 10px;
  }

  .section2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section2 .half-section {
    text-align: center;
    margin-bottom: 20px;
  }

  .section2 .half-section .title-box,
  .section2 .half-section .section-image {
    margin: 0 auto;
    display: block;
  }

  .section2 .half-section .section-image {
    width: 80%;
    height: auto;
  }

  .title-box {
    width: 100%;
    border: 0px solid white;
    font-size: 40px;
  }

  .section2 .half-section.left {
    background-image: url('../img/IM_01.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .section2 .half-section.right {
    background-image: url('../img/file------@1x.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .section2 .half-section .section-image {
    display: none;
  }

  .section2 .half-section .title-box {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 15px 0;
    text-align: center;
    padding-top: 50px;
  }

  .section2 {
    padding: 0px;
    height: 640px;
  }

  .sp_text {
    display: block;
    font-size: 16px;
    margin: 50px 30px 0px 30px;
    text-align: start;
    padding-bottom: 50px;
  }

  .half-section {
    margin-top: 0px;
  }

  .half-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0px;
  }

  .hamburger-menu {
    display: block;
    text-align: end;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 25px;
  }
  
  .sticky-header nav ul {
    display: none; 
    flex-direction: column; 
  }
  
  .sticky-header nav ul li {
    margin-right: 0; 
  }
  
  
  .sticky-header nav ul.show {
    display: flex;
  }
  
  
  .dropdown-content {
  display: none;
  position: static; 
  }
  
  
  .dropdown-content.show {
  display: block;
  }
  
  .sticky-header {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  background: #51505000;
  color: #bbbbbb;
  z-index: 1000;
  }
  
  .sticky-header nav ul {
  margin-right: 0px;
  text-align: start;
  }
  
  .hamburger-menu.open {
  content: '\00D7'; 
  }
  
  
  .sticky-header.transparent {
  background: transparent;
  }


  .side-image {
    width: 7%;
}
  
.text-content {
  width: 90%;
  font-size: 16px;
}

.image-area-single img {
  max-width: 53px;
}

.image-area-upper img {
  max-width: 140px;
}

.image-area-lower img {
  max-width: 140px;
}


.side-image {
  position: revert;
}

.text-area p {
  width: 100%;
}

.sp{
  display: block;
}
  }