.shine-wrap {
  position: relative;
  overflow: hidden;
}

.shine-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.15) 45%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0.15) 55%,
    transparent 100%
  );
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
  0% {
    left: -150%;
  }
  60% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

#viage .io_fade_in{
  opacity: 0;
  transform: translateY(16px);              /* ← 下にずらして待機 */
  transition: opacity .4s ease, transform .4s ease;  /* ← 2つを滑らかに */
  will-change: opacity, transform;
}

/* スクロールで入ってきた時に付くクラス（例） */
#viage .io_fade_in.is-active{
  opacity: 1;
  transform: translateY(0);                 /* ← 元の位置へ */
}
   .rel{
    position: relative;
    overflow: hidden;
  }

.fv1{
  position: absolute;
  top:-65px;
  left:-40px;
  opacity: 0;
  transform: translate(-30px, -30px);
  will-change: transform, opacity;
}

.fv1.is-show{
  animation: fv1SlideIn 1.2s ease-out forwards;
}
.fv1, .secret3 {
  animation-play-state: paused; /* 最初止める */
}

.fv1.is-show, .secret3.is-show {
  animation-play-state: running; /* 付いたら再生 */
}

.fv1 img{
  width: 100%;
  height: auto;
  display: block;

  /* 斜めマスク */
  clip-path: polygon(
    0 0,
    0 0,
    0 0,
    0 0
  );
  animation: none;
  will-change: clip-path;
}

@keyframes fv1SlideIn{
  0%{
    opacity: 0;
    transform: translate(-30px, -30px);
  }
  100%{
    opacity: 1;
    transform: translate(0, 0);
  }
}


/* 左上 → 右下に流れる */
@keyframes diagonalMask{
  0%{
    clip-path: polygon(
      0 0,
      0 0,
      0 0,
      0 0
    );
  }
  100%{
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
}

.fv1.is-show img{
  animation: diagonalMask 1.2s ease-out forwards; /* ←is-show時だけ動かす */
}

.secret3.is-show {
  opacity: 1;
}

  .fv2{
    position: absolute;
    top:7%;
    left: 5%;
    width: 45%;
  }
  .secret1{
    position: absolute;
    top:3%;
    left: 8%;
    z-index: 9999;
  }
  .secret2{
    position: absolute;
    top:10%;
    left: 34%;
  }
.secret3{
  position: absolute;
  top:2.5%;
  left: 6%;
  opacity: 0;
  transform: translateX(-30px);
  will-change: transform, opacity;
}

/* 左 → 右に流れる */
@keyframes revealLeftToRight{
  0%{
    clip-path: inset(0 100% 0 0);
  }
  100%{
    clip-path: inset(0 0 0 0);
  }
 }
 /* スクロールで付与される */
.secret3.is-show{
  animation: secret3SlideIn 1s ease-out forwards;
}

@keyframes secret3SlideIn{
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes revealLeftToRight{
  from{
    clip-path: inset(0 100% 0 0);
  }
  to{
    clip-path: inset(0 0 0 0);
  }
}
  .secret4{
    position: absolute;
    top:35.5%;
    left: 24%;
  }
  .secret5{
    position: absolute;
    top:24%;
    left: 18%;
  }
    .secret6{
    position: absolute;
    top:3%;
    right: 10%;
  }
    .secret7{
    position: absolute;
    top:2%;
    left: 10%;
  }
    .secret8{
    position: absolute;
    top:29%;
    left: 10%;
  }
    .secret9{
    position: absolute;
    top:0%;
    left: 32%;
    width: 36%;
  }
    .secret10{
    position: absolute;
    top:  19%;
    left: 9%;
    width: 80%;
  }
    .secret11{
    position: absolute;
    top:38.5%;
    left: 8%;
    width: 80%;
  }
    .secret12{
    position: absolute;
    top:82%;
    left: 10%;
    width: 80%;
    z-index: 9999;
  }
    .secret13{
    position: absolute;
    top:84%;
    left: 0%;
  }
    .secret14{
    position: absolute;
    top:78%;
    left: 10%;
  }
    .secret15{
    position: absolute;
    top:86.6%;
    right: 17%;
  }
    .secret16{
    position: absolute;
    top:87%;
    left: 44%;
  }
    .secret17{
    position: absolute;
    top:0%;
    left: 35%;
  }
    .secret18{
    position: absolute;
    top:8%;
    left: 19%;
  }
 .secret19{
    position: absolute;
    top:6%;
    left: 11%;
  }

   .secret20{
    position: absolute;
    top:15%;
    left: 6%;
  }

   .secret21{
    position: absolute;
    top:47%;
    left: 6%;
  }
   .secret22{
    position: absolute;
    top:11%;
    left: 17%;
  }

     .secret23{
    position: absolute;
    top:0%;
    left: 0%;
  }

     .secret24{
    position: absolute;
    top:10%;
    left: 12%;
  }
  .secret25{
    position: absolute;
    top:18%;
    left: 20%;
  }

  .secret26{
    position: absolute;
    top:23%;
    left: 62%;
  }

  .secret27{
    position: absolute;
    top:84%;
    left: 14%;
  }

  .secret28{
    position: absolute;
    top:4%;
    left: 4%;
  }

  .secret29{
    position: absolute;
    top:36%;
    left: 5%;
  }

  .secret30{
    position: absolute;
    top:56.5%;
    left: 5%;
  }

  .secret31{
    position: absolute;
    top:77%;
    left: 5%;
  }

#viage > .viage_point .viage_point_02_movie video {
    border: 1px solid #bdb088;
}

  .viage_secret_movie{
    position: absolute;
    top:45%;
    left: 13%;
    width: 80%;
  }

#viage > .viage_secret .viage_secret_icn01 {
    position: absolute;
    top: 38%;
    left: 61%;
    width: calc(150 / 750 * 100%);
    z-index: 2;
}

 #viage > .viage_secret .viage_secret_icn02 {
    position: absolute;
    top: 65%;
    left: 13%;
    width: calc(150 / 750 * 100%);
    z-index: 2;
}



  #viage > .viage_secret .viage_secret_icn03 {
    position: absolute;
    top: 51%;
    left: 4%;
    width: calc(155 / 750 * 100%);
    z-index: 2;
}

  #viage > .viage_secret .viage_secret_icn04 {
    position: absolute;
    top: 51%;
    right: 8%;
    width: calc(155 / 750 * 100%);
    z-index: 2;
}

  #viage > .viage_secret .viage_secret_icn05 {
  position: absolute;
  top: 38%;
  left: 13%;
  width: calc(150 / 750 * 100%);
  z-index: 2;
}
 #viage > .viage_secret .viage_secret_icn06 {
    position: absolute;
    top: 65%;
    right: 18%;
    width: calc(150 / 750 * 100%);
    z-index: 2;
}

/* 外枠：750px中央固定 */
.marquee-wrap{
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* 横に流すレール */
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee-scroll 25s linear infinite;
}

/* 画像セット */
.marquee{
  display: flex;
}

.marquee p{
  flex-shrink: 0;
  margin: 0 10px;
}

.marquee img{
  width: 200px;        /* PC基準 */
  height: auto;
  display: block;
}

/* スマホ対応 */
@media screen and (max-width: 767px){
  .marquee img{
    width: 140px;
  }
}

/* エンドレス */
@keyframes marquee-scroll{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}

/* fade-left
-------------------- */
#viage .io_fade_left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .4s ease, transform .4s ease;
}

#viage .io_fade_left.is-active {
  opacity: 1;
  transform: translateX(0);
}
/* fade-right
-------------------- */
#viage .io_fade_right {
  opacity: 0;
  transform: translateX(20px); /* ← 右から */
  transition: opacity .4s ease, transform .4s ease;
}

#viage .io_fade_right.is-active {
  opacity: 1;
  transform: translateX(0);
}

.marker{
  opacity: 0;
  will-change: transform, opacity;
}

/* 左 → 右 */
.marker--left{
  transform: translateX(-30px);
}

.marker--left.is-show{
  animation: markerFromLeft 0.9s ease-out forwards;
}

/* 右 → 左 */
.marker--right{
  transform: translateX(30px);
}

.marker--right.is-show{
  animation: markerFromRight 0.9s ease-out forwards;
}

/* アニメーション定義 */
@keyframes markerFromLeft{
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes markerFromRight{
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

#viage > .viage_sns .viage_sns_slide {
    position: static;
}

/* CV エリア */
#viage > .viage_cv .viage_cv_box_head {
    background-color: #376db5;
}
#viage > .viage_cv .viage_cv_head {
    width: calc(500 / 750 * 100%);
}
#viage > .viage_cv .viage_cv01_area {
    background-color: #c5d9f2;
}
/* CV questionエリア */
#viage > .viage_question .viage_question_main {
    position: relative;
    width: calc(670 / 750 * 100%);
    margin: -6% auto 0 auto;
    background: url(/gold/airdesign/viage202601/question_bg.jpg) no-repeat;
    background-size: contain;
}
#viage > .viage_question .viage_question_main_gif01,
#viage > .viage_question .viage_question_main_gif02 {
    top: 7.5%;
}
#viage > .viage_question {
    background-color: #eae5d4;
}


#viage > .viage_point .viage_point_01::after {
    background-color: #ffedef;
}
#viage > .viage_point .viage_point_02::after {
      background-color: #fbf4e2;
}
#viage > .viage_point .viage_point_03::after {
      background-color: #e3ecfb;
}
#viage > .viage_recommend {
    background-color: #fbf4e2;
}

#viage > .viage_cv .viage_cv02_area {
    background-color: #fedfe4;
}
#viage > .viage_cv .viage_cv_box {
    margin: 0px auto;
}
#viage > .viage_recommend {
    padding: 1% 0px 8%;
}
/*-------------------------------------------
 goodsdetail
-----------------------------------------------*/
.viage_goodsdetail h2 {
  margin: 10% 0 7% 0;
  font-size: clamp(15px, calc((30 / 750) * 100vw), 30px);
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
}
.viage_goodsdetail .viage_goodsdetail_table {
  margin: 0 3%;
}
.viage_goodsdetail .viage_goodsdetail_table th,
.viage_goodsdetail .viage_goodsdetail_table td {
  padding: 2%;
  border: 1px solid #c8c8c8;
  font-size: clamp(10px, calc((18 / 750) * 100vw), 18px);
}
.viage_goodsdetail .viage_goodsdetail_table th {
  background-color: #ececec;
  width: 20%;
  font-weight: bold;
}
.viage_goodsdetail .viage_goodsdetail_table ul li {
  text-indent: -1em;
  padding-left: 1em;
}