/* =========================
PC/SP表示切替
========================= */

.hero-pc-only{
  display:block;
}

.hero-sp-only{
  display:none;
}

/* =========================
全体
========================= */

.hero-parallax{

  position:relative;

  overflow:hidden;

  min-height:100vh;

  display:flex;
  justify-content:center;

  padding:
    clamp(50px, 8vh, 100px)
    clamp(14px, 3vw, 40px)
    clamp(60px, 8vh, 120px);

  box-sizing:border-box;

}

/* =========================
背景クリップ
========================= */

.hero-parallax-clip{

  position:absolute;

  inset:0;

  clip:rect(auto, auto, auto, auto);

  z-index:0;

  pointer-events:none;

}

/* =========================
背景
========================= */

.hero-parallax-bg{

  position:fixed;

  inset:0;

  width:100vw;
  height:100vh;

  background-image:var(--pc-bg);

  background-size:cover;

  background-position:center center;

  background-repeat:no-repeat;

  transform:scale(1.0);

  will-change:transform;

}

/* =========================
inner
========================= */

.hero-parallax-inner{

  position:relative;

  z-index:2;

  width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;

}

/* =========================
見出しグループ
========================= */

.hero-parallax-heading-group{

  margin-inline:auto;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  width:fit-content;

  padding-inline:4vw;

  box-sizing:border-box;

}

/* =========================
見出し
========================= */

.hero-parallax-heading{

  margin:0;

  font-size:clamp(26px, 9vw, 130px);

  line-height:1.15;

  letter-spacing:.03em;

font-family: "ten-mincho-text", serif;
font-weight: 400;
font-style: normal;
  
  color:#111;

  white-space:nowrap;

}

.hero-parallax-heading *{

  margin:0;

  font:inherit !important;

  color:inherit !important;

}

/* =========================
サブテキスト
========================= */

.hero-parallax-sub{

  margin-top:clamp(15px, 5vw, 50px);

  font-size:clamp(15px, 1.1vw, 18px);

  line-height:1.4;　/* 行と行の間の幅 */

  letter-spacing:.04em;

  color:#111;

  text-align:left;
  
font-family: "ten-mincho-text", serif;

font-style: normal;

}

.hero-parallax-sub *{

  margin:0;

  font:inherit !important;

  color:inherit !important;

  text-align:inherit !important;

}

/* =========================
カルーセルエリア
========================= */

.hero-carousel-wrap{

  width:100vw;

  margin-left:calc(50% - 50vw);

  margin-right:calc(50% - 50vw);

  margin-top:40vh;

  margin-bottom:-8vh;

}

/* =========================
カルーセル
========================= */

.work-carousel{

  position:relative;

  width:100%;

  overflow:hidden;

  cursor:grab;

}

.work-carousel.dragging{
  cursor:grabbing;
}

/* =========================
トラック
========================= */

.work-carousel-track{

  display:flex;

  align-items:center;

  gap:24px;

  width:max-content;

  user-select:none;

  will-change:transform;

  backface-visibility:hidden;

  transform:translate3d(0,0,0);

}



/* =========================
スライド
========================= */

.work-slide{

  flex:none;

  width:min(30vw, 420px);

  aspect-ratio:4 / 3;

  overflow:hidden;

  border-radius:24px;

  background:#f3f3f3;

  box-shadow:
    0 10px 30px rgba(0,0,0,.10);

}

/* =========================
画像
========================= */

.work-slide img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  pointer-events:none;

  transition:transform .8s ease;

}

/* =========================
hover
========================= */

.work-slide:hover img{

  transform:scale(1.05);

}

/* =========================
下部グラデーション
========================= */

.hero-parallax::after{

  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:100%;
  height:32vh;

  pointer-events:none;

  z-index:1;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.25) 20%,
      rgba(255,255,255,.55) 45%,
      rgba(255,255,255,.85) 70%,
      #ffffff 100%
    );

}


/* =========================
SP
========================= */

@media screen and (max-width:800px){

  .hero-pc-only{
    display:none;
  }

  .hero-sp-only{
    display:block;
  }

  .hero-parallax{

    min-height:100svh;

    padding:
      clamp(40px, 8vw, 60px)
      clamp(14px, 4vw, 20px)
      clamp(40px, 10vw, 80px);

  }
  
  

  /* =========================
  SP背景
  ========================= */

  .hero-parallax-bg{

    background-image:var(--sp-bg);

    background-position:center bottom;

    transform:scale(1.12);

  }

  /* =========================
  見出し
  ========================= */

  .hero-parallax-heading{

    font-size:clamp(25px, 10vw, 100px);

    white-space:normal;

    line-height:1.3;

    text-align:center;

  }

  .hero-parallax-heading-group{

    align-items:center;

    margin-top:-20px;
    
  }

  /* =========================
  サブ
  ========================= */

  .hero-parallax-sub{

    margin-top:3vh;

    width:100%;

    font-size:clamp(10px, 2vw, 15px);

    text-align:center;

  }

  .hero-parallax-sub *{

    text-align:center !important;
    margin-top:10px;

  }

  /* =========================
  カルーセル
  ========================= */

  .hero-carousel-wrap{

    margin-top:45vh;

    margin-bottom:-5vh;

  }

  .work-carousel-track{

    gap:14px;

  }

  .work-slide{

    width:50vw;

    aspect-ratio:4 / 3;

    border-radius:18px;

  }
  
  .hero-parallax-sub{

  font-size:clamp(12px, 3vw, 15px);
  }
  

}