html, body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background-color: #fff;
      overflow-x: hidden;
    }

    section {
      width: 100%;
      text-align: center;
    }

    section img {
      width: 100%;
      height: auto;
      display: block;
    }

    .hero-cta {
      position: relative;
      text-align: center;
      width: 100%;
    }

    .oubo-bg {
      width: 100%;
      display: block;
    }

    .sns-overlay {
      position: relative;
      width: 100%;
      text-align: center;
    }

    .sns-overlay .background {
      width: 100%;
      height: auto;
    }

    .sns-icons {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 5vw;
      justify-content: center;
      align-items: center;
      width: 200%;
      padding: 0 5vw;
      box-sizing: border-box;
    }

    .sns-icons a {
      transition: opacity 0.3s ease;
    }

    .sns-icons a:hover {
      opacity: 0.7;
    }

    .sns-icons img {
      width: 20vw;
      max-width: 400px;
    }

    .about {
      position: relative;
    }

    .about .background {
      width: 100%;
      height: auto;
    }

    .button-overlay {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 80%;
    }

    .button-overlay a {
      transition: opacity 0.3s ease;
    }

    .button-overlay a:hover {
      opacity: 0.7;
    }

    .button-overlay img {
      width: 100%;
      height: auto;
    }

    .apply-btn {
      display: block;
      margin: 20px auto;
      width: 50%;
      transition: opacity 0.3s ease;
    }

    .apply-btn:hover {
      opacity: 0.7;
    }

    .apply-btn img {
      width: 100%;
    }

    footer {
      width: 100%;
      overflow: hidden;
      position: relative;
      display: block;
      text-align: center;
    }

    footer img {
      width: 100%;
      height: auto;
      display: block;
    }

    .apply-footer {
      position: absolute;
      top: 65%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      max-width: 300px;
      transition: opacity 0.3s ease;
    }

    .apply-footer:hover {
      opacity: 0.7;
    }

    .apply-footer img {
      width: 100%;
      height: auto;
    }

    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 80px;
      cursor: pointer;
      transition: opacity 0.3s ease;
      z-index: 1000;
    }

    .back-to-top:hover {
      opacity: 0.7;
    }

    /* QAセクション */
    .qa {
      position: relative;
    }

    .qa .background {
      width: 100%;
    }

    .qa-section {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      max-width: 850px;
      padding: 20px;
      box-sizing: border-box;
    }

    .qa-item {
      margin-bottom: 20px;
      position: relative;
    }

    .qa-question {
      cursor: pointer;
      position: relative;
    }

    .toggle-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 36px;
      color: #d2691e;
      font-weight: bold;
    }

    .toggle-icon::after {
      content: "+";
    }

    .qa-item.open .toggle-icon::after {
      content: "−";
    }

    .qa-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-out;
    }

    .qa-answer img {
      width: 100%;
      height: auto;
    }

    .qa-item.open .qa-answer {
      max-height: 1000px;
    }

    .qa-line {
      width: 100%;
      height: 3px;
      background-color: green;
      margin: 10px 0;
    }

.oubo-on-top {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 300px;
  z-index: 10;
}

.oubo-on-top img {
  width: 100%;
  height: auto;
}



.hero-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}



.sanei-logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  z-index: 20;
}

.sanei-logo img {
  width: 100%;
  height: auto;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}