* {
    margin: 0;
}
html, body{
  margin: 0;
  padding: 0;
}

img, video{
  display: block;
}
p{margin:0;}

img {
    height: auto;
    vertical-align: bottom;
}
.rel_box{
  overflow: hidden;
}
.ukomiSwipeSlide-next, .ukomiSwipeSlide-prev{
  display: none;
}
#lpshoppingcolumn .pdt20 a img{width:19px;}

#lunaset{
    overflow: hidden;
}

#lunaset h1{
    position: static !important;
}

/* サイズカラーフォーム用CSS ここから*/
#lpshoppingcolumn select{
  height: 30px;
}
/* サイズカラーフォーム用CSS ここまで*/
    
        .floating {
            position: fixed;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            max-width: 750px;
            width: 100%;
            z-index: 9999;
        }

        .floating_inner {
            width: 50.667%;
            margin-left: auto;
            margin-right: 0;
        }
#lunaset .icon_ba2 {
    width: calc(187/750*100%);
    position: absolute;
    top: 12%;
    left: 68%;
    z-index: 20;
}
#lunaset .icon_tri2 {
    width: calc(28/750*100%);
    position: absolute;
    top: 27%;
    left: 79%;
    z-index: 20;
}
#lunaset .ba01_img2 {
    width: calc(550/750*100%);
    top: 18%;
    z-index: 10;
}
/******** カウントダウンタイマーここから ********/
/* #main-content{
  background: #f1f9fb;
} */
#main-content .countdown{
  padding-bottom: 0px;
}
#main-content .countdown .box{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 750px;
  margin: auto;
  padding: 0 0px 10px 0px;
  padding: 10px 20px 10px 20px;
}
#main-content .countdown .title{
  margin: 2% 2% 0;
  font-size: 1.7rem;
  color: #d94f71;
}
#main-content .countdown .box .timer-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#main-content .countdown .box .timer-box li{
  width: 112px;
  height: 120px;
  /* background: #ef4873; */
  font-family: Impact,Charcoal;
  border-radius: 50%;
  margin-right: 10px;
    width: clamp(64px, 15vw, 112px);
    height: clamp(45px, 12vw, 80px);
    margin-right: clamp(4px, 1.2vw, 10px);
}
#main-content .countdown .box .timer-box li:last-child{
  margin-right: 0px;
}
#main-content .countdown .box .timer-box li .name{
  display: block;
  font-size: 17px;
  color: #fff;
  padding-bottom: 10px;
  line-height: 1;
}
#main-content .countdown .box .timer-box li .day,
#main-content .countdown .box .timer-box li .hours,
#main-content .countdown .box .timer-box li .milli,
#main-content .countdown .box .timer-box li .minutes,
#main-content .countdown .box .timer-box li .seconds,
#main-content .countdown .box .timer-box li .miriseconds{
    font-size: 72px;
    color: #ff89ae;
    line-height: 1;
    display: block;
    font-family: kepler-std-condensed-display, serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(41px, 10.93vw, 82px);
    font-weight: bold;
    letter-spacing: 2px;
}
.gaiyou .info__box dt.ag {
    background-color: #9fc9fc;
}
/******** カウントダウンタイマーここまで ********/
.video {
 width: 100%;
}
#lunaset .fit_img_01_set {
    width: calc(450 / 750 * 100%);
    position: absolute;
    top: 0.5%;
    left: 40%;
    z-index: 5;
}#lunaset .bra_img_01_set {
    width: calc(360 / 750 * 100%);
    position: absolute;
    top: 26.5%;
    left: 4%;
    z-index: 10;
}#lunaset .fit_img_02_set {
    width: calc(280 / 750 * 100%);
    position: absolute;
    top: 1.5%;
    left: 40px;
    z-index: 5;
}
#lunaset .bra_img_02_set {
    width: calc(380 / 750 * 100%);
    position: absolute;
    top: 20%;
    left: 49.5%;
    z-index: 10;
}

#lunaset .fit_img_03_set {
    width: calc(340/750*100%);
    position: absolute;
    top: -0.5%;
    left: 50.5%;
    z-index: 5;
}
#lunaset .bra_img_03_set {
    width: calc(380 / 750 * 100%);
    position: absolute;
    top: 34%;
    left: 1.1%;
    z-index: 10;
}
/******** コンテンツ動き ********/
.secret1{
    position: absolute;
    top: 8%;
    left: 13%;
    z-index: 20;
}
.secret1_2{
    position: absolute;
    bottom: 23%;
    left: 0%;
    z-index: 20;
}
.secret2{
    position: absolute;
    bottom: 6%;
    width: 100%;          
    overflow: hidden;     
    white-space: nowrap;
}
.secret3{
    position: absolute;
    top: 2.7%;
    left: 0%;
}
.secret4{
    position: absolute;
    bottom: 71%;
    left: 17%;
}
.secret5{
    position: absolute;
    bottom: 18%;
    left: 47%;
}
.secret6{
    position: absolute;
    top: 3%;
    left: 29%;
}
.secret7{
    position: absolute;
    bottom: 37%;
    left: 9%;
}
.secret8{
    position: absolute;
    bottom: 37%;
    left: 45%;
}
.secret9{
    position: absolute;
    top: 1%;
    left: 5%;
}
.secret10{
    position: absolute;
    bottom: 67.8%;
}

.secret11{
  position: absolute;
  bottom: 75.3%;
  left: 8.5%;
  width: 83%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
}

.secret11 video {
    width: 100%;
    height: 150%;
    object-fit: cover;
    transform: scale(1.5);
    transform-origin: 22% 125%;
}

.secret12{
    position: absolute;
    bottom: 55%;
}

.secret12_text{
    position: absolute;
    bottom: 62%;
    right: 9%;
    z-index: 20;
}

.secret13{
    position: absolute;
    bottom: 60.5%;
    left: 9%;
    width: 54%;
}

.secret14{
    position: absolute;
    bottom: 30%;
}

.secret15{
    position: absolute;
    bottom: 38%;
    left: 9%;
    width: 83%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;
}
.secret15 video {
    width: 100%;
    height: 180%;
    object-fit: cover;
    transform: scale(1.5);
    transform-origin: 60% 132%;
}

.secret16{
    position: absolute;
    bottom: 44.5%;
    left: 5%;
}

.secret17{
    position: absolute;
    bottom: 5%;
}
.secret18{
    position: absolute;
    bottom: 13%;
    left: 11%;
    border-radius: 20px;
    overflow: hidden;
    width: 80%;
}
.secret19{
    position: absolute;
    bottom: 19%;
    left: 5%;
}
.secret20{
    position: absolute;
    bottom: 74%;
    left: 5%;
}
.secret21{
    position: absolute;
    bottom: 29%;
    left: 5%;
}
.secret22{
    position: absolute;
    bottom: 16%;
    left: 50%;
}
.secret23{
    position: absolute;
    bottom: 96%;
    left: 16%;
}
.secret24{
    position: absolute;
    bottom: 83%;
    left: 8%;
}
.secret25{
    position: absolute;
    bottom: 63%;
    left: 3%;
}
.secret26{
    position: absolute;
    bottom: 44%;
    left: 7%;
}
.secret27{
    position: absolute;
    bottom: 39%;
    left: 17%;
}
.secret28{
    position: absolute;
    bottom: 20%;
    left: 3%;
}
.secret29{
    position: absolute;
    bottom: 6%;
    left: 40%;
}
.secret30{
    position: absolute;
    bottom: 82%;
    left: 10%;
}
.secret31{
    position: absolute;
    bottom: 57%;
    left: 37%;
}
.secret32{
    position: absolute;
    bottom: 4%;
    left: 6%;
}
.secret33{
    position: absolute;
    bottom: 65%;
    left: 0%;
}
.secret34{
    position: absolute;
    bottom: 34%;
    left: 5%;
}
.secret35{
    position: absolute;
    bottom: 8%;
    left: 30%;
    z-index: 20;
}
.secret36{
    position: absolute;
    bottom: 2%;
    left: 0%;
}
.secret37{
    position: absolute;
    bottom: 3%;
    right: 0%;
}
.secret38{
    position: absolute;
    bottom: 80%;
    left: 14%;
}
.secret39{
    position: absolute;
    bottom: 70%;
    left: 14%;
}
.secret40{
    position: absolute;
    bottom: 43%;
    right: 3%;
    z-index: 20;
}
.secret5 img, .secret40 img{
  animation: lunaRotate 20s linear infinite;
  transform-origin: center center;
}

@keyframes lunaRotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.secret41{
    position: absolute;
    bottom: 6%;
    left: 0%;
}
.secret42{
    position: absolute;
    bottom: 79%;
    left: 19%;
}
.secret43{
    position: absolute;
    bottom: 66%;
    left: 7%;
}
.secret44{
    position: absolute;
    bottom: 65.5%;
    left: 52%;
}
.secret45{
    position: absolute;
    bottom: 56%;
    left: 26%;
}
.secret46{
    position: absolute;
    bottom: 1%;
    left: 0%;
}

.secret47{
    position: absolute;
    bottom: 90%;
    left: 10%;
}
.secret48{
    position: absolute;
    bottom: 28%;
    left: 10%;
}
.secret49{
    position: absolute;
    top: 21%;
    left: 52.5%;
}
.secret50{
    position: absolute;
    top: 21%;
    left: 34%;
}
.secret51{
    position: absolute;
    bottom: 87%;
    left: 42%;
}
.secret52{
    position: absolute;
    bottom: 31%;
    left: 27%;
    z-index: 10;
}
.secret53{
    position: absolute;
    bottom: 60%;
    left: 1%;
}
.secret54{
    position: absolute;
    bottom: 53%;
    left: 54%;
}
.secret55{
    position: absolute;
    bottom: 33%;
    left: 1%;
    z-index: 20;
}
.secret56{
    position: absolute;
    bottom: 34%;
    left: 56%;
    z-index: 20;
}
.secret57{
    position: absolute;
    bottom: 24.5%;
    left: 30%;
    z-index: 20;
}
.secret58{
    position: absolute;
    bottom: 15.5%;
    left: 19%;
}
.secret59{
    position: absolute;
    bottom: 96%;
    left: 12%;
}
.secret60{
    position: absolute;
    bottom: 91%;
    left: 10%;
}
.secret61{
    position: absolute;
    bottom: 71%;
    left: 8%;
    border: solid 4px #fcd0df;
    border-radius: 1%;
}
.secret62{
    position: absolute;
    bottom: 58.5%;
    left: 4%;
}
.secret63{
    position: absolute;
    bottom: 56.7%;
    left: 66%;
}
.secret64{
    position: absolute;
    bottom: 31%;
    left: 8%;
}
.secret65{
    position: absolute;
    bottom: 18.5%;
    left: 33%;
}
.secret66{
    position: absolute;
    bottom: 10.5%;
    left: 9%;
}
.secret67{
    position: absolute;
    bottom: 2.5%;
    left: 39%;
}
.secret68{
    position: absolute;
    bottom: 77%;
    left: 3%;
    width: 87%;
}
.secret69{
    position: absolute;
    bottom: 62%;
    left: 9%;
}
.secret70{
    position: absolute;
    bottom: 49.5%;
    left: 6%;
}
.secret71{
    position: absolute;
    bottom: 25%;
    left: 7%;
}
.secret72{
    position: absolute;
    bottom: 5%;
    left: 2%;
}

.secret73{
    position: absolute;
    bottom: 96.3%;
    left: 24%;
}
.secret74{
    position: absolute;
    bottom: 68.7%;
    right: 0;
}
.secret75{
    position: absolute;
    bottom: 45.2%;
    left: 0%;
}
.secret76{
    position: absolute;
    bottom: 56.4%;
    left: 10%;
    border-radius: 5%;
    overflow: hidden;
}
.secret77{
    position: absolute;
    bottom: 60.4%;
    left: 8%;
}
.secret78{
    position: absolute;
    bottom: 21.2%;
    right: 0%;
}
.secret79{
    position: absolute;
    bottom: 33.2%;
    left: 14%;
    border-radius: 5%;
    overflow: hidden;
}
.secret80{
    position: absolute;
    bottom: 37.2%;
    left: 76%;
}
.secret81{
    position: absolute;
    bottom: 5.8%;
    left: 6%;
}
.secret82{
    position: absolute;
    bottom: 10.3%;
    left: 11%;
    border-radius: 5%;
    overflow: hidden;
}
.secret83{
    position: absolute;
    bottom: 90.6%;
    left: 5%;
}

.secret84{
    position: absolute;
    bottom: 77.5%;
    left: 5%;
    width: 87%;
    border-radius: 5%;
    overflow: hidden;
    border: solid 5px pink;
    box-shadow: 10px 10px 0 #fab0c37a;
}

.secret84::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #ff6fb5; 
    transform: translate(10px, 10px);
    z-index: -1;
}
.secret85{
    position: absolute;
    bottom: 70.3%;
    left: 31%;
}
.secret86{
    position: absolute;
    bottom: 60.5%;
    left: 7%;
}
.secret87{
    position: absolute;
    bottom: 49%;
    left: 6%;
}
.secret88{
    position: absolute;
    bottom: 37%;
    left: 32%;
}
.secret89{
    position: absolute;
    bottom: 13.3%;
    left: 4%;
}
.secret90{
    position: absolute;
    bottom: 7.3%;
    left: 9%;
}
.secret91{
    position: absolute;
    bottom: 4.5%;
    left: 22%;
}
.secret92{
    position: absolute;
    bottom: 94.2%;
    left: 45%;
}
.secret93{
    position: absolute;
    bottom: 81.5%;
    left: 0%;
}
.secret94{
    position: absolute;
    bottom: 70%;
    right: 0%;
}
.secret95{
    position: absolute;
    bottom: 60.2%;
    left: 27%;
}
.secret96{
    position: absolute;
    bottom: 48%;
    left: 8%;
}
.secret97{
    position: absolute;
    bottom: 48%;
    right: 7%;
}
.secret98{
    position: absolute;
    bottom: 24.5%;
    left: 0%;
}
.secret99{
    position: absolute;
    bottom: 20.5%;
    left: 16%;
}
.secret100{
    position: absolute;
    bottom: 16%;
    left: 5%;
}
.secret101{
    position: absolute;
    bottom: 86.8%;
    left: 46%;
    width: 40%;
}
.secret102{
    position: absolute;
    bottom: 81.5%;
    left: 3%;
    width: 47%;
}
.secret103{
    position: absolute;
    bottom: 82%;
    left: 58%;
    width: 36%;
}
.secret104{
    position: absolute;
    bottom: 70.5%;
    left: 22%;
}
.secret105{
    position: absolute;
    bottom: 57.8%;
    left: 15%;
}

.secret106{
    position: absolute;
    bottom: 38.5%;
    left: 0%;
}
.secret107{
    position: absolute;
    bottom: 22.5%;
    right: 0%;
}
.secret108{
    position: absolute;
    bottom: 6.1%;
    left: 0%;
}
.secret109{
    position: absolute;
    bottom: 93.8%;
    left: 18%;
}
.secret110{
    position: absolute;
    bottom: 35.5%;
    left: 2%;
}
.secret111{
    position: absolute;
    bottom: 18%;
    left: 0%;
}
.secret112{
    position: absolute;
    bottom: 8%;
    left: 5%;
}
.secret113{
    position: absolute;
    bottom: 6.5%;
    left: 50%;
}
.secret114{
    position: absolute;
    bottom: 95%;
    left: 30%;
}
.secret115{
    position: absolute;
    bottom: 94%;
    left: 4%;
}
.secret116{
    position: absolute;
    bottom: 88.2%;
    left: 8%;
}
.secret117{
    position: absolute;
    bottom: 74%;
    right: 0%;
}
.secret118{
    position: absolute;
    bottom: 60.5%;
    left: 0%;
}
.secret119{
    position: absolute;
    bottom: 47.5%;
    right: 0%;
}
.secret120{
    position: absolute;
    bottom: 17.5%;
    left: 0%;
}
.secret121{
    position: absolute;
    bottom: 16%;
    left: 25%;
}
.secret122{
    position: absolute;
    bottom: 9%;
    left: 3%;
}
.secret123{
    width: 40%;
    margin: 5% auto 9%!important;
}
.secret124{
    margin-bottom: 10%!important;
}
.secret125{
    margin-bottom: 10%!important;
}
.secret126{
    margin-bottom: 10%!important;
}
.secret127{
    position: absolute;
    bottom: 87.5%;
    left: 6%;
}
.secret128{
    position: absolute;
    bottom: 85%;
    left: 47%;
}
.secret129{
    position: absolute;
    bottom: 73%;
    left: 3%;
}
.secret130{
    position: absolute;
    bottom: 68.2%;
    left: 15%;
}
.secret131{
    position: absolute;
    bottom: 65.7%;
    left: 42%;
}
.secret132{
    position: absolute;
    bottom: 26.5%;
    left: 0%;
}
.secret133{
    position: absolute;
    bottom: 37%;
    left: 7%;
}
.secret134{
    position: absolute;
    bottom: 33.8%;
    left: 8%;
}
.secret135{
    position: absolute;
    bottom: 2%;
    right: 0%;
}
.secret136{
    position: absolute;
    bottom: 11.4%;
    left: 16%;
}
.secret137{
    position: absolute;
    bottom: 8.3%;
    left: 16%;
}
.secret138{
    position: absolute;
    bottom: 77.5%;
    left: 0%;
    z-index: 20;
}
.secret139{
    position: absolute;
    bottom: 72.3%;
    left: 9%;
}
.secret140{
    position: absolute;
    bottom: 70.3%;
    right: 0%;
}
.secret141{
    position: absolute;
    bottom: 41.5%;
    left: 4%;
}
.secret142{
    position: absolute;
    bottom: 39%;
    left: 11%;
}
.secret143{
    position: absolute;
    bottom: 35.5%;
    left: 11%;
}
.secret144{
    position: absolute;
    bottom: 18%;
    left: 0%;
}
.secret145{
    position: absolute;
    bottom: 3%;
    right: 0%;
}

/* カラバリセレクトcss */
.color-select-area{
  padding:calc(66/750*100%) calc(30/750*100%) calc(30/750*100%);
}
.color-select-area .color-select-head{
  width: calc(601/690*100%);
  margin: 0 auto calc(10/750*100%);
}
.color-select-area .color-select-sub{
  width:calc(523/750*100%);
  margin: 7% auto 0!important;
}
.color-select-area .color-select-slider{
  padding:0;
  margin:0 auto;
  width:calc(687/750*100%);
}
/* slick */

.color-select-area .color-select-wrap{
  padding-top: calc(20/750*100%);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;  /* ←変更 */
  gap: 2%;
}

.color-select-wrap > div {
    width: 31%!important;   /* 100 ÷ 3 - gap分 */
}


/* popup-container */

.color-select-area .popup-container{
  width: calc(200/690*100%);
  margin-bottom: 8%;
}

.color-select-area .popup-container a:not(:first-of-type){
  display: none;
}

.color-select-wrap:after{
  content:"";
  display: block;
  width: calc(200/690*100%);
  padding-top: calc(200/690*100%);
  display: none;
}

/* popup */
.mfp-bg{
  opacity: 0;
  transition: opacity 0.5s;
}
.mfp-bg.mfp-ready{
  opacity: 0.8;
}
.mfp-bg.mfp-removing{
  opacity: 0;
}

.mfp-wrap .mfp-content{
  opacity: 0;
  transition: opacity 0.5s;
}

.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
.mfp-bottom-bar{
  top:86%;
  margin-top: 0;
}
.mfp-counter{
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-size: min(calc(44/750*100vw),44px);
  color: #333333;
  line-height: 1;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
}

.mfp-content{
  box-shadow:0px 11px 18px -5px #000;
  border-radius: min(calc(20/750*100vw),20px);
}

.mfp-figure{
  background-color: #FFF;
  padding: 0 3%;
  border-radius: min(calc(20/750*100vw),20px);

}

.mfp-close,.mfp-close:active{
font-size: 0;
top:4%;
}

.mfp-close:before{
  content:"";
  display: block;
  width: 1px;
  height: min(calc(45/750*100vw),45px);
  border: 1px solid #000;
  position: absolute;
  top:0;
  right:6.5%;
  transform: rotate(45deg);
}

.mfp-close:after{
  content:"";
  display: block;
  width: 1px;
  height: min(calc(45/750*100vw),45px);
  border: 1px solid #000;
  position: absolute;
  top:0;
  right:6.5%;
  transform: rotate(-45deg);
}

img.mfp-img{
  padding:min(calc(90/750*100vw),90px) 0 min(calc(160/750*100vw),160px);
}

.mfp-arrow{
  opacity: 1;
  top:calc(50% - min(calc(45/750*100vw),45px));
  margin: 0;
  width: min(calc(45/750*100vw),45px);
  height: min(calc(45/750*100vw),45px);
}
.mfp-arrow:active{
  margin-top: 0;
}
.mfp-arrow-left{
  left: calc(50vw - 300px);
}
.mfp-arrow-left:after{
  border-right: min(calc(30/750*100vw),30px) solid #e27881;
  margin-left: 0;
}
.mfp-arrow-left:before{
  border: none;
}
.mfp-arrow-right{
  right:  calc(50vw - 310px);
}
.mfp-arrow:before, .mfp-arrow:after{
  margin: 0;
}

@media(max-width:750px){
  .mfp-arrow-left{
  left: 7%;
} 
.mfp-arrow-right{
  right:  5%;
}
}

.mfp-arrow-right:after {
  border-left: min(calc(30/750*100vw),30px) solid #e27881;
  margin-right: 0;
}
.mfp-arrow-right:before{
  border: none;
}
.mfp-arrow:after {
    border-top-width: min(calc(25/750*100vw),25px);
    border-bottom-width: min(calc(25/750*100vw),25px);
    top: 8px
}
	

/* カラバリセレクトcssここまで */

/*　横スライド　ここから　*/
.secret2{
  position:absolute; /* ←今の指定そのまま */
  overflow:hidden;
  white-space:nowrap;
}

/* 横並びにする */
.secret2 .marquee{
  display: inline-flex;
  width: max-content;
  animation: scroll-left 20s linear infinite;
  will-change: transform;
}

.secret2 .marquee img{
  display:block;
  flex: 0 0 auto;
  max-width: none;
  height: auto;
  width: 50%!important;
}

/* 2枚並べた全体の半分だけ動かす */
@keyframes scroll-left{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.secret3{
  position:absolute; /* ←今の指定そのまま */
  overflow:hidden;
  white-space:nowrap;
}

/* 横並びにする */
.secret3 .marquee{
  display: inline-flex;
  width: max-content;
  animation: scroll-left 20s linear infinite;
  will-change: transform;
}

.secret3 .marquee img{
  display:block;
  flex: 0 0 auto;
  max-width: none;
  height: auto;
  width: 50%!important;
}

/* 2枚並べた全体の半分だけ動かす */
@keyframes scroll-left{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* 横並びにする */
.secret98 .marquee{
  display: inline-flex;
  width: max-content;
  animation: scroll-left 20s linear infinite;
  will-change: transform;
}

.secret98 .marquee img{
  display:block;
  flex: 0 0 auto;
  max-width: none;
  height: auto;
  width: 70%!important;
}

/* 2枚並べた全体の半分だけ動かす */
@keyframes scroll-left{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* 横並びにする */
.secret129 .marquee{
  display: inline-flex;
  width: max-content;
  animation: scroll-left 20s linear infinite;
  will-change: transform;
}

.secret129 .marquee img{
  display:block;
  flex: 0 0 auto;
  max-width: none;
  height: auto;
  width: 50%!important;
}

/* 2枚並べた全体の半分だけ動かす */
@keyframes scroll-left{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/*　横スライド　ここまで　*/
/* ===== 左→右に徐々に表示する汎用クラス ===== */
.reveal-scroll{
  display:inline-block;
  overflow:hidden;
  clip-path: inset(0 100% 0 0); /* 初期：見えない */
  will-change: clip-path;
}

.reveal-scroll img{
  display:block;
  width:100%;
  height:auto;
}

.reveal-scroll > *{
  transform: translateX(-8px);
  will-change: transform;
}


/* 初期：隠す */
.js-sync-10,
.js-sync-12,
.js-sync-14,
.js-sync-17,
.js-sync-75,
.js-sync-78,
.js-sync-81,
.js-sync-132,
.js-sync-135{
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}

/* 表示：トリガー要素に aos-animate が付いたら同時表示 */
.secret10.aos-animate ~ .js-sync-10,
.secret12.aos-animate ~ .js-sync-12,
.secret14.aos-animate ~ .js-sync-14,
.secret17.aos-animate ~ .js-sync-17,
.secret75.aos-animate ~ .js-sync-75,
.secret78.aos-animate ~ .js-sync-78,
.secret81.aos-animate ~ .js-sync-81,
.secret132.aos-animate ~ .js-sync-132,
.secret135.aos-animate ~ .js-sync-135{
  opacity: 1;
  transform: translateY(0);
}

/* 一瞬ボワっと大きく */
.zoom-pop{
  opacity: 1;
  transform: scale(1);
  will-change: transform;
}

.zoom-pop.aos-animate{
  animation: zoomPop 1s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes zoomPop{
  0%{
    transform: scale(1);
  }
  50%{
    opacity: 1;
    transform: scale(1.08); /* ←ボワっ */
  }
  100%{
    opacity: 1;
    transform: scale(1);   /* ←戻る */
  }
}
/* 汎用シャイン */

.shine-wrap{
  display: inline-block;
  position: relative; /* ←光の疑似要素の基準はここ */
  overflow: hidden;   /* ←光を中だけに収める */
  line-height: 0;
}

/* imgがblockじゃないと下に隙間出ることがある */
.shine-wrap > img{
  display: block;
  height: auto;
}

/* キラッの本体 */
.shine-wrap::before{
  content: "";
  position: absolute;
  top: -20%;
  left: -80%;
  width: 45%;
  height: 140%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  animation: shineLoop 3.2s cubic-bezier(.22,.61,.36,1) infinite;
  will-change: transform, left;
}

@keyframes shineLoop{
  0%   { left: -80%; }
  100% { left: 140%; }
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .shine-wrap::before{ animation: none; }
}

/* 背景に影 */
.shadow{
  border-radius: 20px;
  box-shadow: 8px 8px 20px rgba(0,0,0,0.25); 
}
/* 3冊共通（imgがズレないように） */
/* 親：絶対配置の基準 */
.magazine-sec .rel_box{
  position: relative;
  max-width: 750px;
  margin: 0 auto;
}

/* 背景 */
.mag-bg img{
  display:block;
  width:100%;
  height:auto;
}


/* 画像のはみ出し・余白対策 */
.mag img{
  display:block;
  width:100%;
  height:auto;
}

/* --- アニメ：p自体は動かさない（座標ズレ防止） --- */
.mag{
  opacity: 0;
  will-change: opacity;
  transition: opacity 250ms ease;
}

/* 共通：imgを扇状に開く */
.mag img{
  will-change: transform, opacity;
  transform-origin: 50% 50%; 
  transition: transform 900ms cubic-bezier(.2,.8,.2,1),
              opacity 400ms ease;
}

/* 初期状態：3冊とも“中央寄り”に重ねる（左右を内側へ寄せる） */
.mag-center img{
  transform: scale(.92);
  opacity: 0;
  transition-delay: 0ms;
}

.mag-left img{
  transform: translateX(30%) rotate(0deg) scale(.95);
  opacity: 0;
  transition-delay: 140ms;
}

.mag-right img{
  transform: translateX(-30%) rotate(0deg) scale(.95);
  opacity: 0;
  transition-delay: 140ms;
}

/* 発火後：最終状態 */
.rel_box.aos-animate .mag{
  opacity: 1;
}

.rel_box.aos-animate .mag-center img{
  transform: scale(1);
  opacity: 1;
}

.rel_box.aos-animate .mag-left img{
  transform: translateX(0) rotate(-30deg) scale(1);
  opacity: 1;
}

.rel_box.aos-animate .mag-right img{
  transform: translateX(0) rotate(30deg) scale(1);
  opacity: 1;
}