:root{ --vh:1vh; }
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:#fff;
  background:#000;
}

/* =========================================================
   Background Slideshow (3 images, CSS only cross-fade)
   ※ HTMLに .bg と .bg__layer x3 を入れてください
   ========================================================= */
.bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #000;
}

.bg__layer{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: bgFade 36s linear infinite; /* 全体のゆったり感（36秒） */
  will-change: opacity, transform;
  transform: scale(1.06); /* ほんのり寄せる */
}

/* PC用 3枚 */
.bg__layer--1{ background-image: url("./pc_bg_01.jpg"); animation-delay: 0s; }
.bg__layer--2{ background-image: url("./pc_bg_02.jpg"); animation-delay: 12s; }
.bg__layer--3{ background-image: url("./pc_bg_03.jpg"); animation-delay: 24s; }

/* クロスフェード + じわっとズーム */
@keyframes bgFade{
  0%   { opacity: 0; transform: scale(1.2); }
  8%   { opacity: 1; } /* fade in */
  33%  { opacity: 1; } /* hold + slow zoom-out */
  41%  { opacity: 0; transform: scale(1.00); } /* fade out */
  100% { opacity: 0; transform: scale(1.2); }
}

/* 動きが苦手な人向け（OS設定で軽減） */
@media (prefers-reduced-motion: reduce){
  .bg__layer{ animation: none; opacity: 0; transform: none; }
  .bg__layer--1{ opacity: 1; }
}

/* ===== layout ===== */
.stage{
  position:relative;
  min-height:calc(var(--vh) * 100);
}

/* PC */
.brand{
  position:absolute;
  left:80px;
  top:50%;
  transform:translateY(-50%);
}
.brand__logo{
  width: 200px; /* 修正 */
  height: auto;
}

.ig{
  position:absolute;
  left:320px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
  transition:opacity .2s ease;
}
.ig:hover{ opacity:.5; }
.ig__label{ font-size:14px; }
.ig__icon{ width:61px; height:50px; }

.copy{
  position:absolute;
  right:80px;
  top:50%;
  transform:translateY(-100%);
  font-family:"Koh Santepheap", serif;
  font-size:14px;
  font-weight: 400;
  white-space:nowrap;
}

/* SP */
@media (max-width:768px){
  /* SP用 3枚に切り替え */
  .bg__layer--1{ background-image: url("./sp_bg_01.jpg"); }
  .bg__layer--2{ background-image: url("./sp_bg_02.jpg"); }
  .bg__layer--3{ background-image: url("./sp_bg_03.jpg"); }

  .brand{
    left:50%;
    top:210px;
    transform:translateX(-50%);
  }
  .brand__logo{ width:78vw; }

  .ig{
    left:50%;
    top:440px;
    transform:translateX(-50%);
    gap:10px;
  }
  .ig__label{ font-size:13px; }
  .ig__icon{ width:61px; height:50px; } /* 修正 */

  .copy{
    left:50%;
    right:auto;
    top:auto;
    bottom:40px;
    transform:translateX(-50%);
    font-size:14px;
    text-align:center;
  }
}