@charset "utf-8";
/* CSS Document */
.hw_head {
      margin: 0;
      padding: 0;
      background: #000;
      max-height: 561px; /* 高さを完全固定 */
      overflow: hidden;
    }

    .wrapper {
      position: relative;
      width: 100vw;
      max-height: 561px;
      aspect-ratio: 1920 / 561; /* ← 画像の縦横比に合わせて調整 */
      overflow: hidden;
    }

    .bg-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%; /* 画像2枚分 */
      height: 100%;
      display: flex;
      animation: slide 20s linear infinite;
      z-index: 0;
    }

    .bg-slide img {
      width: 50%;
      height: 100%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .foreground {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .foreground img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @keyframes slide {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

.sp {display:none;}

/* ---SP用--- */
@media screen and (max-width: 767px) {
	.pc {display:none;}
	.sp {display:block;}
	img {max-width:100%;}
	
.hw_head {
      margin: 0;
      padding: 0;
      background: #000;
      max-height: 813px; /* 高さを完全固定 */
      overflow: hidden;
    }

    .wrapper {
      position: relative;
      width: 100vw;
      max-height: 813px;
      aspect-ratio: 1000 / 813; /* ← 画像の縦横比に合わせて調整 */
      overflow: hidden;
    }
	
	
	
	
	
}