@charset "UTF-8";

 .main {
 font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  max-width: unset;
  background: #fff;
  padding: 80px 0 1000px 0;
  box-sizing: border-box;
  text-align: center;
}

 p {
  color: #000;
}

 picture {
  display: block;
  margin: 0 auto;
}
 .link {
  color: #000;
  text-decoration: underline;
}

 .logo {
  width: 70px;
  padding: 40px 0;
  margin: 0 auto;
}

 .logo picture,
 .logo img {
  display: block;
  width: 70px;
  height: auto;
}

 .line {
  width: 50%;
}

 .loading {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

 .loading-dot {
  float: left;
  width: 12px;
  height: 12px;
  margin: 0 12px;
  margin-top: 20px;
  background: #ed6103;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  opacity: 0;

  -webkit-box-shadow: 0 0 2px #ed6103;
  -moz-box-shadow: 0 0 2px #ed6103;
  -ms-box-shadow: 0 0 2px #ed6103;
  -o-box-shadow: 0 0 2px #ed6103;
  box-shadow: 0 0 2px #ed6103;

  -webkit-animation: loadingFade 1s infinite;
  -moz-animation: loadingFade 1s infinite;
  animation: loadingFade 1s infinite;
}

 .loading-dot:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

 .loading-dot:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

 .loading-dot:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

 .loading-dot:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

@-webkit-keyframes loadingFade {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes loadingFade {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

@keyframes loadingFade {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}
  <style>
        @charset "UTF-8";

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .main {
            font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
            max-width: unset;
            background: #fff;
            padding: 80px 0 1000px 0;
            box-sizing: border-box;
            text-align: center;
        }

        p {
            color: #000;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        picture {
            display: block;
            margin: 0 auto;
        }

        .link {
            color: #000;
            text-decoration: underline;
        }

        /* パルスアニメーションのローダー */
        .loader {
            margin: 2rem auto;
            width: 50px;
            height: 50px;
            position: relative;
        }

        .loader::before,
        .loader::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #ed6103;
            opacity: 0.6;
            animation: pulse 2s ease-in-out infinite;
        }

        .loader::after {
            animation-delay: -1s;
        }

        @keyframes pulse {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        /* カルーセル関連のスタイル */
        .carousel {
            width: 100%;
            max-width: 800px;
            margin: 40px auto;
            position: relative;
            overflow: hidden;
        }

        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-item {
            flex: 0 0 100%;
            padding: 0 15px;
        }

        .job-card {
            border-radius: 8px;
            overflow: hidden;
            background-color: #f3f4f6;
        }

        .job-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 20px;
        }

        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #d1d5db;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .indicator.active {
            background-color: #ed6103;
        }

        @media (max-width: 768px) {
            .carousel {
                max-width: 90%;
            }

            .job-card img {
                height: 200px;
            }
        }

        @media (max-width: 480px) {
            .job-card img {
                height: 160px;
            }
        }
    </style>