/* ===== アニメーション ===== */
.fadein{animation: fadeinlogo 0.9s forwards; opacity: 0;}
.fadein02{animation: 1s fadeinlogo 0.9s forwards; opacity: 0;}
.fadein03{animation: 1s fadeinlogo 1.8s forwards; opacity: 0;}
@keyframes fadeinlogo {
	0% {
  }
	100% {
		opacity: 1;
  }
}
.feature-block__hero-watch img{max-width: 100%!important; width: 1000px;}
.txtanime {clip-path: inset(0 100% 0 0); display: inline-block; animation: textanimation 1s 1s forwards;
}
@keyframes textanimation {
    0% {
        clip-path: inset(0 100% 0 0);
      opacity: 0;
    }

    100% {
        clip-path: inset(0);
      opacity: 100;
    }
}
@keyframes textanimationv {
    0% {
        clip-path: inset(0 100% 0 0);
      opacity: 0;
    }

    100% {
        clip-path: inset(0);
      opacity: 100;
    }
}
.txtanime_s{opacity: 0;}
.fadein_s, .fadein02_s,.fadein03_s,.fadein04_s,.fadedown_s{opacity: 0;}
.fadein_s{clip-path: inset(0 0 0);}
.fadein_s.is-animated{clip-path: inset(0 100% 0 0); animation: textanimationv .7s 0s forwards;}
.txtanime_s.is-animated{clip-path: inset(0 100% 0 0); display: inline-block; animation: textanimation 1.2s .8s forwards;}
.fadein02_s.is-animated{animation: 1s fadeinlogo .8s forwards; opacity: 0;}
.fadein03_s.is-animated{animation: 1s fadeinlogo 1.4s forwards; opacity: 0;}
.fadedown_s.is-animated{animation: 1.2s fadedown .8s forwards; opacity: 0;}
.fadein04_s.is-animated{animation: 1s fadeinlogo .5s forwards; opacity: 0;}
@keyframes fadedown {
  0% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.fadeins{
  opacity: 0;
}
.fadeins.is-animated{
  animation: fadeup .8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.anime_next{
  animation-delay: .2s!important;
}
@keyframes fadeup {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadedown_s_watch{opacity: 0;}
.fadedown_s_watch.is-animated{animation: 1s fadedown_s .3s forwards; opacity: 0;}
@keyframes fadedown_s {
  0% {
    transform: scale(2.3);
    opacity: 0;
  }
  100% {
    transform: scale(1.9);
    opacity: 1;
  }
}
/* アクセシビリティ配慮：モーション控えめ */
@media (prefers-reduced-motion: reduce) {
  .point_animation {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
.point_animation.btn{
  display: block;
  position: relative;
  overflow: hidden;
}
.point_animation.btn::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fbfbfb;
}
.animate-on-scroll.is-inview::before{
  animation: kira_animation 8s ease-in-out infinite;
}
@-webkit-keyframes kira_animation {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.zoom_ico{position: absolute; bottom: 10px; right: 10px; width: 30px;}
.zoom_ico img{width: 100%;height: auto;}
@media (max-width: 1000px){
  .zoom_ico{display: none;}
}

/* レイアウト */
.product-gallery{width: 100%; max-width: 500px; margin: 0 auto;
  display:flex;
  flex-direction: column-reverse;
}
@media (max-width: 768px){.product-gallery{ grid-template-columns: 1fr; }}
.pg-thumbs{display:flex; flex-direction:row; gap:10px;}
.pg-thumb{border:none; padding:0; background:none; cursor:pointer; outline-offset:2px;}
.pg-thumb img{display:block; width:100%; height:auto;}
.pg-thumb.is-active{ border:3px solid #445562; box-shadow: 1px 1px 0 0 #000;}
.pg-viewer{ position:relative; }
.pg-figure{ margin:0 0 32px; }
.pg-main{width:100%; height:auto; display:block; }
.pg-caption{ margin-top:8px; color:#555; font-size:14px; display: none;}
@media (max-width: 768px){
.pg-thumbs{gap:0;}
.pg-thumb{aspect-ratio:1/1;}
.pg-thumb img{width:100%; height:100%; display:block; object-fit: cover;}
.pg-figure{ margin:0 0 10px; aspect-ratio:1/1;}
.pg-main{width:100%; height:100%; display:block; object-fit: cover;}
}
.pg-zoom{
  position:absolute; right:5px; bottom:40px; width: 30px;
  border: none;
  background: none;
}
@media (max-width: 1000px){.pg-zoom{display: none;}}
.pg-main,
.pg-thumb { cursor:zoom-in;}

.lightbox{
  position:fixed; inset:0; display:none;
  background:rgba(80,104,123,0.5);
  align-items:center; justify-content:center; gap:12px;
  padding:24px; z-index:9999;
}
.lightbox.open{ display:flex; }
.lb-figure{ margin:0; max-width:min(90vw,1200px); max-height:90vh; position:relative; }
.lb-figure img{
  max-width:100%; max-height:90vh; display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; transition:opacity .2s ease;
}
.lb-figure figcaption{
  color:#fff; text-align:center; margin-top:8px; font-size:14px; opacity:0;
}
/* 操作ボタン */
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:rgba(255,255,255,.82); color:#222; border:none; cursor:pointer;
  width:54px; height:54px; border-radius:999px; display:grid; place-items:center; line-height: 54px;
  transition:transform .15s ease, background: rgba(255, 255, 255, .85); box-shadow: 0 4px 18px -4px rgba(0, 0, 0, .28);
  font-size:34px;
  line-height: 1;
  padding: 5px 0 13px;
}
.lb-close{
  line-height: 54px;
  padding: 0;
}
.lb-close{ top:30px; right: 20px;}
.lb-prev{ left:16px; transform:translateY(-50%); }
.lb-next{ right:16px; transform:translateY(-50%); }
@media (max-width: 768px){
.lb-figure{aspect-ratio:1/1;}
.lb-figure img{width:100%; height:100%; display:block; object-fit: cover;}
.lb-close,.lb-prev,.lb-next{width:28px; height:28px; line-height: 28px; font-size:18px;line-height: 1; padding: 5px 0 13px;}
.lb-close{line-height: 1;}
.lb-close{ top:30px; right: 20px;}
.lb-prev{ left:10px;}
.lb-next{ right:10px;}
}

/* 背景クリックで閉じる用 */
.lightbox::before{ content:""; position:absolute; inset:0; }
.lb-figure, .lb-prev, .lb-next, .lb-close{ position:absolute; z-index:1; }

.swiper { width: 100%; max-width: 1200px; margin: 0 auto; }
.swiper-slide img {
  display:block; width:100%; height:auto;
}
/* 共通スタイル */
.swiper-button-prev,
.swiper-button-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
/* スライドから30px外へ配置 */
.swiper-button-prev { left: -60px; }
.swiper-button-next { right: -60px;}

/* スマホでは内側に戻す */
@media (max-width: 768px) {
  .swiper-button-prev { left: 10px; }
  .swiper-button-next { right: 10px; }
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
  display: none;
}
/* まずPCではページネーションを隠す */
.swiper-pagination { display: none; }

/* バー型のスタイル（スマホ時に有効化） */
@media (max-width: 768px) {
  /* 矢印はスマホで隠す（必要なければ削除） */
  .swiper-button-prev,
  .swiper-button-next { display: none; }
  .swiper-pagination {
    display: flex;
    gap: 16px;                 /* 点と点の間隔 */
    justify-content: center;
    align-items: center;
    padding: 80px 0 6px;
    bottom: -40px !important;
    width: 100%;
    padding: 0 38px;
  }
  /* ドットを細長いバーに */
  .swiper-pagination-bullet {
    width: calc(100% / 5)!important;               /* 好みで 36〜56px 程度 */
    height: 6px!important;               /* 細め */
    border-radius: 999px!important;      /* 丸端 */
    background: #d4d5d3;       /* グレー（未選択） */
    opacity: 1;                /* Swiperの既定opacityを打ち消す */
    margin: 0 !important;      /* Swiper既定の左右余白を消す */
    transform: translateZ(0)!important;  /* アンチエイリアス改善の小技 */
  }

  /* アクティブの色（左の濃いバー） */
  .swiper-pagination-bullet-active {
    background: #384f61;       /* 濃い青グレー系（画像の雰囲気） */
  }
}

.video-pc__wrap{width: 720px; height: 480px; margin: 0 auto; padding-top: 80px; box-sizing: border-box; display: block;}
.video-sp__wrap{width: 100%; margin: 0 auto; padding: 120px 38px 0; box-sizing: border-box; display: none;}
.video-pc__wrap > video, .video-sp__wrap > video{width: 100%; height: 100%; object-fit: cover; display: block;}

@media (max-width: 768px) {
.video-pc__wrap{display: none;}
.video-sp__wrap{display: block;}  
}