html, body {
        overscroll-behavior-x: none; /* 横方向のバウンスを禁止 */
        overscroll-behavior-y: none; /* 縦方向も禁止したい場合 */
        }
@media all and (min-width:768px){
    .pc
    {
        display: block;
    }
    .sp
    {
        display: none;
    }
}
footer
{
    margin: 0;
}
body
{
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 0;
    overflow-x: hidden;

}
body *
{
    font-family: "fot-tsukuardgothic-std", YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif;
}
body:before
{
    content: "";
    width: 5.6vw;
    display: inline-block;
    height: 100%;
    background-image: url(/images/pre2025/pc/obi_hidari.jpg);
    background-repeat: repeat-y;
    background-position: top;
    background-size: contain; 
    image-rendering: pixelated;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -5;
}
body:after
{
    content: "";
    width: 5.6vw;
    display: inline-block;
    height: 100%;
    background-image: url(/images/pre2025/pc/obi_migi.jpg);
    background-repeat: repeat-y;
    background-position: top;
    background-size: contain; 
    image-rendering: pixelated;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -5;
}

.pre-2025-top
{    
    width: 100%;
    max-width: 1920px;
    max-height: 1080px;
    aspect-ratio: 16/9;
    position: relative;
    margin: 0 auto;
}
.pre-2025-title
{
    position: absolute;
    top: 15.8vw;
    left: 50%;
    transform: translateX(-50%);
    width: 45.3%;
    max-width: 871px;
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.pre-title-img
{
    max-width: 100%;
}
.pre-top-date-img
{
    width: 61%;
    margin: 0 auto 10px;
}
.pre-2025-title>p
{
    margin: 0;
}
.pre-2025-title>p>.spot {
    font-size: clamp(21px, 1.93vw, 37px);
}

.pre-2025-title>p>.place {
    font-size: clamp(16px, 1.72vw, 33px);
    white-space: nowrap;
    position: relative;
    display: block;
}
.pre-2025-title>p>.place>span
{
    position: absolute;
    font-size: clamp(16px, 1.72vw, 33px);
    top:0;
    left: 50%;
    transform: translateX(-50%);
}
.pre-2025-title>p>.time {
    font-size: clamp(17px, 1.56vw, 30px);
    
}

.top-il-left
{
    position: relative;
    width: 29.4%;
    max-width: 566px;
    height: 89%;
    max-height: 970px;
    top: 9.1vw;
    left: 37px;
}
.top-il-right
{
    position: absolute;
    width: 31.6%;
    max-width: 607px;
    height: 87.6%;
    max-height: 947px;
    top: 9.1vw;
    right: 33px;
}
.top-il-right>div
{
    display: inline-block;
    width:100%;
    height: 100%;
    position: relative;
}
.pre-top-text
{
    display: flex;
    flex-direction: column;
    position: relative;
}
.pre-top-hukidashi
{
    width: 9.4%;
    aspect-ratio: 182/323.41;
    margin: 0 auto;
    opacity: 0;
}
.top-mozi
{
    position: absolute;
    width: 30.2%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.popUp {
    animation: popUpAnim 0.8s ease-out forwards;
}

@keyframes popUpAnim {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) translateY(20px);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2) translateY(-10px);
  }
  60% {
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.sec-text
{
    position: relative;
    display: flex;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}
.amba
{
    margin: 11.25vw auto;
}
.amba-text
{
    padding-left: 50px;
    box-sizing: border-box;
}
.amba-text>p
{
   font-size: clamp(14px, 1.30vw, 25px);
   width: 28vw;
   max-width: 539px;
   text-align: left;
   margin: 0 1.3vw 0 2.6vw;
   padding-right: 2.6vw;
   line-height: 1.8;
}
.amba-midashi
{
    width: 11.25%;
    max-width: 216px;  
}

.pre-2025-kagura
{
    position: absolute;
    width: 20.3%;
    right: 13.5vw;
    bottom: 3.1vw;
}
.amba-photo
{
    position: relative;
    z-index: 1;
}
.amba-photo-accent
{
    position: absolute;
    z-index: -1;
}

.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.amba-up {
  display: flex;
  justify-content: center; /* 中央揃え */
  gap: 40px; /* 間隔は調整可 */
  margin-bottom: 40px;
}
.amba-up .amba-photo
{
    height: 350px;
}
.amba-up .amba-photo .amba-photo-img
{
    z-index: 1;
    width: auto;
    height: 100%;
    object-fit: contain;
}
.amba-lw {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3つ並べる */
  gap: 40px 20px;
  max-width: 897px;
  margin: 0 auto;
}
.amba-lw .amba-photo
{
    width: 270px;
}
.amba-lw .amba-photo .amba-photo-img
{
    z-index: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.cast-item {
  text-align: center;
}
.cast-item p{
    font-size: clamp(14px, 1.30vw, 25px);
}
.amba-photo-accent-1
{
    width: 302px;
    left: 34.4%;
    top: 7.7%;
}
.amba-photo-accent-2
{
    width: 271px;
    left: 28.2%;
    top: 8.9%;
}
.amba-photo-accent-3
{
    width: 260px;
    right: 18.1%;
    top: 11%;
}
.amba-photo-accent-4
{
    width: 292px;
    left: 11.4%;
    top: 11%;
}
.amba-photo-accent-5
{
    width: 264px;
    left: 38.8%;
    top: 17.7%;
}
.amba-note
{
    font-size: clamp(14px, 1vw, 20px);
    margin: 25px auto 0;
}

.obi-yoko
{
    width: 24.8%;
    margin: 0 auto;
    min-width: 477px;
    opacity:0;
}
.obi-yoko>img
{
    width: 100%;
}

.art
{
    margin: 11.25vw auto;
}
.art-il-wrap
{
    position: absolute;
    bottom:-7.8vw;
    right: 65.5vw;
}
.art-il
{
    display: inline-block;
    width: 26.8vw;
    aspect-ratio: 515/566;    
    position: relative;
}
.art-il-accent
{
    position: absolute;
    width: 94.7%;
    top: 0;
    left: 0;
}
.art-il-img
{
    position: absolute;
    width: 56.1%;
    bottom: 0;
    right: 0;
}
.art-text>p
{
    width: 24.3%;
    text-align: left;
    line-height: 1.8;
    font-size: clamp(14px, 1.30vw, 25px);
}
.art-midashi
{
    position: absolute;
    width: 8.2vw;
    aspect-ratio: 158/335;
    top: 50%;
    right: 28.1vw;
    transform: translateY(-50%);
}

.artists {
  display: block;
  margin: 50px auto 0;
}
.artists-sp {
  
  margin: 50px auto 0;
  display: none;
}

.artists-row {
  display: grid;
  justify-content: center;
  gap: 40px;
}
.artist-wrap
{
    margin: 11.25vw auto;
}
.artist-wrap>h3
{
    width: 626px;
    background-color: #E6DA47;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50px;
    font-size: clamp(14px, 1.30vw, 25px);
}

.top-row {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1015px;
  margin: 0 auto 5.2vw;
}

.bottom-row {
  grid-template-columns: repeat(2, 1fr);
  max-width: 663px;
  margin: 0 auto 5.2vw;
}

/* 画像とテキスト */
.artist-item {
  text-align: center;
}

.artist-item img {
  width: 311px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.present
{
    margin:  0 auto;
    position: relative;
    width: 787px;
    padding: 50px 0 50px 126px;
    border-radius: 22px; 
    max-width: 80vw;
    background-color: #E6DA47;
    font-size: clamp(16px, 1.56vw, 30px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.present>p
{
    text-align: left;
    width: 69%;
}
.present-icon
{
    position: absolute;
    top: 50%;
    left: -4.5%;
    transform: translateY(-50%);
    width: 21.9%;
    height: auto;
}

.workshop
{
    margin: 0 auto;
    overflow-x: hidden;
    padding-top: 11.25vw;
    padding-bottom: 11.25vw;
}
.workshop-text
{
    display: flex;
}
.workshop-midashi
{

    width: 7.3vw;

}
.workshop-text>p
{
    width: 24.3%;
    text-align: left;
    line-height: 1.8;
    font-size: clamp(14px, 1.30vw, 25px);
    padding-left: 2.7vw;
}
.workshop-il-wrap
{
    position: absolute;
    bottom:-17.2%;
    left: 66.3vw;
}
.workshop-il
{
    display: inline-block;
    width: 30.4vw;
    aspect-ratio: 585/570;    
    position: relative;
}
.workshop-il-accent
{
    position: absolute;
    width: 85.4%;
    top: 0;
    right: 0;
}
.workshop-il-img
{
    position: absolute;
    width: 56.2%;
    bottom: 0;
    left: 0;
}
.workshop-wrap>h3
{
    width: 626px;
    background-color: #7CB559;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px auto 0;
    border-radius: 50px;
    font-size: clamp(14px, 1.30vw, 25px);
    color: #fff;
}
.workshop-grid {
  max-width: 883px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 40px; /* 縦・横の間隔 */
}

.workshop-item {
  text-align: center;
  width: 421px;
}

.workshop-item img {
  width: 100%;
  display: block;
}

.workshop-item p {
  font-size: clamp(14px, 1.30vw, 25px);
  line-height: 1.6;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  
}
.workshop-item .nowrap
{
    display: inline-block;
  left: calc(50% - 5px);
  position: relative;
  transform: translateX(-50%);
  
  
}
.note-sp
    {
        display: none;
    }
.photospot
{
    margin: calc(11.25vw - 3.9vw) auto;
    position: relative;
}
.photospot-text>p
{
    width: 20.4%;
    text-align: left;
    line-height: 1.8;
    font-size: clamp(14px, 1.30vw, 25px);
    padding-right: 2.2vw;
}
.photospot-midashi
{
    width: 7.6vw;
    aspect-ratio: 147/316;
    position: relative;
    top: 3.9vw;
}
.photospot figure
{
    width: 36vw;
    max-width: 692px;
    margin: 0 auto;
    position: relative;
    top: -6.5vw;
    z-index: -1;
}
.photospot figure img
{
    width: 100%;
}
.photospot figcaption
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.photospot figcaption p
{
    font-size: clamp(14px, 1vw, 20px);
    text-align: center;
    padding-right: 2vw;
    margin: 0;
}
.photospot-il-wrap
{
    position: absolute;
    bottom:-4.2vw;
    right: 68vw;
}
.photospot-il
{
    display: inline-block;
    width: 29.1vw;
    aspect-ratio: 560/507;    
    position: relative;
}
.photospot-il-accent
{
    position: absolute;
    width:92.6%;
    top: 0;
    left: 0;
    z-index: -1;
}
.photospot-il-img
{
    position: absolute;
    width: 46%;
    bottom: 0;
    right: 0;
}
.handsign-text
{
    align-items: flex-start;
}
.handsign-text p
{
    width: 22.4vw;
    text-align: left;
    line-height: 1.8;
    font-size: clamp(14px, 1.30vw, 25px);
    margin-left: 40px;
}
.handsign-midashi1
{
    width: 7.2vw;
    aspect-ratio: 139/266;
}
.handsign-midashi2
{
    width: 7.7vw;
    aspect-ratio: 148/329;
}
.quiz
{
    margin: 84px auto calc(216px - 3.8vw);
}
.quiz-text
{
    align-items: flex-start;
}
.quiz-text p
{
    width: 27.9vw;
    text-align: left;
    line-height: 1.8;
    font-size: clamp(14px, 1.30vw, 25px);
    margin-right: 30px;
}
.quiz-midashi
{
    width: 8vw;
    aspect-ratio: 155/310;
    position: relative;
}
.quiz>img
{
    width: 14.4vw;
    position: relative;
    top: -3.8vw;
}

.stage
{
    margin: 11.25vw auto;
}


@media all and (min-width:768px){
    
    /*TOP画像・イラスト*/
    .top-il
    {
        position: absolute;
    }
    .top-il-1
    {
        width: 53%;
        top: 0;
        left: 13.75vw;
        z-index: 1;
    }
    .top-il-2
    {
        width: 53.5%;
        top: 7.4%;
        left: 16.7%;
        z-index: 0;
    }
    .top-il-3
    {
        width: 70.1%;
        top: 27.6%;
        left: 0;
        z-index: 1;
    }
    .top-il-4
    {
        width: 46.8%;
        top: 60.5%;
        left: 31.0%;
        z-index: 1;
    }
    .top-il-5
    {
        width: 48.7%;
        top: 71.6%;
        left: 51.2%;
        z-index: 0;
    }
    .top-il-6
    {
        width: 60.4%;
        top: 0;
        right: 25%;
        z-index: 1;
    }
    .top-il-7
    {
        width: 63.2%;
        top: 14.5%;
        right: 0;
        z-index: 0;
    }
    .top-il-8
    {
        width: 74.6%;
        top: 41.9%;
        right: 5.2%;
        margin: 0;
        z-index: 1;
        
    }
    .top-il-8>img
    {
        max-width: 100%;
    }
    .top-il-9
    {
        width: 46.2%;
        top: 71.2%;
        right: 53.7%;
        z-index: 0;
    }
    .workshop-item:last-of-type
    {
        position:relative;
        height:503px;
    }
    .workshop-item:last-of-type>div
    {
        position:absolute;
        top:0;
        left:calc( 50% + 10px);
        width:100%;
    }
    
}
@media all and (max-width:1250px){
    .amba-midashi
    {
        min-width: 115px;
    }
    .amba
    {
        margin: 0 auto 11.25vw;
    }
    .amba-text
    {
        padding-left: 18%;
        padding-top: 11.25vw;
        box-sizing: border-box;
        overflow-x: hidden;
        
    }
    .amba-text>p
    {
        padding-right: 0;
        margin: 0 0 0 50px;
        min-width: 350px
    }
    .pre-2025-kagura
    {
        position: relative;
        right: 2.5%;
        min-width: 208px;
        
    }
    .amba-up .amba-photo
    {
        height: 226px;
    }
    .amba-lw .amba-photo
    {
        width: 175px;
    }
    .amba-photo-accent-1,
    .amba-photo-accent-2
    {
        width: 90%;
        top: 50%;
        transform: translateY(-50%)
    }
    .amba-photo-accent-3,
    
    .amba-photo-accent-5
    {
        width: 96%;
        top: 50%;
        transform: translateY(-50%)
    }
    .amba-photo-accent-4
    {
        width: 106%;
        top: 50%;
        transform: translateY(-50%)
    }
    .amba-lw
    {
        max-width: 674px;
    }
    .cast-item p
    {
        font-size: 16.25px;
    }
    .sec-text
    {
        display: flex;
        position: relative;
    }
    .art-il-wrap
    {
        width: 310px;
        right: 75%;
    }
    .art-il
    {
        width: 100%;
    }
    .art-text>p
    {
        margin: 25px 30px;
        width: 304.2px;
        font-size: 16.25px;
    }
    .art-midashi
    {
     width:102px;
     position: relative;
     right: 0;
     top: 0;
     transform: none;
    }
    .top-row
    {
        width: 660px;
        margin-bottom: 40px;
    }
    .bottom-row
    {
        width: 430px;
    }
    .present
    {
        width: 511px;
        padding: 32px 0 32px 126px;
    }
    .workshop-midashi
    {
        width: 91px;
    }
    .workshop-il-wrap
    {
        left: 75%;
    }
    .workshop-text>p
    {
        width: 304px;
    }
    .workshop-grid
    {
        width:573px;
    }
    .workshop-item
    {
        width: 273px;
    }
    .workshop-item:last-of-type
    {
        height:250px;
    }
    
    .photospot-text>p
    {
        width: 254px;
    }
    .photospot-midashi
    {
        width: 95.55px;
    }
    .photospot-il-wrap
    .photospot-il
    {
        width:364px;
    }
    .photospot figure
    {
        width:450px;
    }
    .handsign-midashi1
    {
        width: 90px;
    }
    .handsign-midashi2
    {
        width: 96px;
    }
    .handsign-text p
    {
        width: 260px;
        font-size: 16.25px;
    }
    .quiz-text p
    {
        width: 350px;
        font-size: 16.25px;
    }
    .quiz-midashi
    {
        width: 100px;
    }
    .quiz>img
    {
        width: 180px;
    }
}
@media all and (max-width:767px){
    .pre-2025-top
    {
        max-width: 100%;
        max-height: none;
        aspect-ratio: 215 / 413;
        overflow-x: hidden;
    }
    .top-il-left
    {
        width: 100%;
        overflow: visible;
        top: 115vw;
        bottom: 0;
        left: 0;
        height: 35%;
        max-width: none;
        max-height: none;
    }
    .top-il-right
    {
        width: 100%;
        overflow: hidden;
        top: 2%;
        left: 0;
        height: 42%;
        max-width: none;
        max-height: none;
    }
    .pre-2025-title
    {
        top: 50%;
        transform: translate(-50%,-65%);
        width: 76%;
          
    }
    .pre-top-date-img
    {
        width:58%;
    }
    /*TOP画像・イラスト*/
    .top-il
    {
        position: absolute;
    }
    .top-il-1
    {
        width: 35.8%;
        top: 0;
        right: -6.25%;
        z-index: 1;
    }
    .top-il-2
    {
        width: 26%;
        top: 31vw;
        right: -1.8%;
        z-index: 0;
    }
    .top-il-3
    {
        width: 38.1%;
        top: 17vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
    .top-il-4
    {
        width: 30%;
        top: 3.1vw;
        left:0;
        z-index: 1;
    }
    .top-il-5
    {
        width: 30.4%;
        top: 15.8vw;
        left: -6.4%;
        z-index: 0;
    }
    .top-il-6
    {
        width: 40.8%;
        top: 10.6%;
        left: 1%;
        z-index: 1;
    }
    .top-il-7
    {
        width: 33.9%;
        top: 22.5%;
        right: -10.6%;
        z-index: 0;
    }
    .top-il-8
    {
        width: 46.25%;
        top: 7.14%;
        right: -1%;
        margin: 0;
        z-index: 1;
        font-size: 8px;
        
    }
    .top-il-8>img
    {
        max-width: 100%;
    }
    .top-il-9
    {
        width: 37.7%;
        top: 0;
        left: -6.6%;
        z-index: 0;
    }
    .pre-top-hukidashi
    {
        width: 100px;
    }
    .top-mozi
    {
        width: 318px;
    }
    .obi-yoko
    {
        width: 76%;
        min-width: 0;
    }
    .sec-text
    {
        max-width: 100%;
        flex-direction: column;
        max-width: 400px;
        width: 76%;
        overflow-x: visible;
    }
    .amba
    {
        margin-top: 11.25vw;
    }
    .amba-text
    {
        padding: 0;
        
    }
    .amba-text>p
    {
        width: 100%;
        min-width: 0;
        margin: 75px 0 40px 0;
    }
    .pre-2025-kagura
    {
        position: absolute;
        width: 240px;
        top: 45px;
        right: -10%;
        z-index: -1;
    }
    .amba-midashi
    {
        width: 142px;
        padding-right: 145px;
    }
    .amba-up
    {
        
        gap: 20px;
    }
    .amba-up .amba-photo
    {
        height: 160px;
    }
    .amba-lw
    {
        width: 76%;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 5px;
        max-width: 340px;
    }
    .amba-lw .amba-photo
    {
        width: 138px;
    }
    .workshop-grid {
        grid-template-columns: 1fr;
      }
      .top-row
      {
          grid-template-columns: 1fr;
          max-width: 76%;
      }
      .amba-photo-accent-1
      {
          width: 85%;
        left: 22%;
      }
     .amba-photo-accent-2
    {
        width: 75%;
        left: 22%;
    }
    .cast-item p
    {
        margin: 5px 0;
    }
    .lw-1
    {
        order: 3;
        position: relative;
        padding-top: 200px;
    }
    .lw-1 .amba-photo
    {
        position: absolute;
        top: 0;
        left: calc(50% + 10px);
        
    }
    .lw-1 p
    {
        position: absolute;
        width: 100%;
        left: calc(50% + 10px);
        bottom: 0;
    }
    .lw-2
    {
        order: 1;
    }
    .lw-3
    {
        order: 2;
    }
    .amba-photo-accent-4
    {
        top: 40%;
        left: 18%;
    }
    .amba-photo-accent-5
    {
        top: 45%;
        left: 25%;
    }
    .art-text
    {
        margin-top: 0;
        padding-top: 30px;
    }
    .art-il-accent
    {
        display: none;
    }
    .art-il-wrap
    {
        width: 186px;
        position: relative;
        top: 0;
        left: 0;
        
    }
    .art-il
    {
        width: 100%;
        padding-right: 90px;
        left: 50%;
        transform: translateX(-50%);
    }
    .art-il-img
    {
        position: relative;
        width: 100%;
    }
    .art-midashi
    {
        position: absolute;
        top:0;
        right:5%; 
    }
    .art-text>p
    {
        margin: 25px 0;
   
    }
    .artists
    {
        display: none;
    }
    .artist-item p
    {
        margin: 10px auto;
        font-size: 16px;
    }
    .artists-sp
    {
        
        margin: 40px auto 85px;
        width: 76%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

    }
    .item-5
    {
        width: 100%;
        aspect-ratio: 132/171;
    }
    .item-5>div
    {
        position: absolute;
        width: calc(38vw - 10px);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
    }
    .artist-wrap>h3
    {
        max-width: 76%;
        height: 29px;
    }
    .artist-item img
    {
        margin: 0;
    }
    .present
    {
        max-width: 76%;
        box-sizing: border-box;
        padding: 60px 0 30px;
    }
    .present>p
    {
        margin: 0;
        text-align: center;
        width:90%;
        font-size: 14px;
    }
    .present-icon
    {
        top: -45px;
        left: 50%;
        transform: translateX(-50%);
        width: 135px;
    }
    
    .workshop-il-wrap
    {
        width: 210px;
        top: 55px;
        left: 35%;
        bottom: 0;
        z-index: -1
    }

    .workshop-il
    {
        width: 100%;
    }
    .workshop-il-img
    {
        width: 100%;
    }
    .workshop-midashi
    {
        width: 100px;
        padding-right: 150px;
            aspect-ratio: none;
    }
    .workshop-il-accent
    {
        display: none;
    }
    .workshop-text>p
    {
        padding-left: 0;
        margin: 40px 0;
        width: 100%;
    }
    .workshop-wrap>h3
    {
        max-width: 76%;
        height: 29px;
        margin: 0 auto;
    }
    .workshop-grid
    {
        width: 55.5%;
        display: block;
    }
    .workshop-item
    {
        width: 100%;
        margin: 30px auto;
    }
    .workshop-item .nowrap
    {
        width: 100%;
        min-width: 100vw;
    }
    .workshop-item p
    {
        margin-top: 10px;
    }
    .photospot figure
    {
        width: 100%;
        max-width: 100%;
        padding-left: 30px;
        z-index: 2;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .photospot figure>img
    {
        width: 370px;
        
    }
    .photospot-text
    {
        width: 76%;
        flex-direction: row-reverse;
    }
    .photospot-text>p
    {
        width: 201px;
        padding: 0;
        margin-left: 20px;
    }
    .note-sp
    {
        display: block;
    }
    .photospot-midashi
    {
        top: 0;
        width: 99px;
    }
    .photospot figure figcaption
    {
        display: none;
    }
    .photospot-il-wrap .photospot-il
    {
        display: none;
    }
    .photospot
    {
        margin: 11.25vw auto calc(11.25vw - 3.9vw);
    }
    .handsign-midashi-sp
    {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 76%;
        margin: 11.25vw auto 40px;
    }
    .handsign-text p {
        width: 100%;
        font-size: 16px;
        margin: 0;
    }
    .quiz-text
    {
        width: 76%;
        flex-direction: row;
    }
    .quiz-text p
    {
        font-size: 15px;
        text-align: justify;
        margin-right: 15px;
    }
    .quiz-midashi
    {
        width: 105px;
    }
    .quiz>img
    {
        top:0;
    }
    .quiz
    {
        margin: 84px auto 11.25vw;
    }
    .workshop-item:last-of-type
    {
        height:auto;
    }
}
/*CSSアニメーション*/

.fadeBlur
{
  opacity: 0; 
  display: inline-block;
  animation: imgBlur 1.5s forwards; /* フェードインアニメーション */
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  animation-fill-mode: both;
}
.bequeath .txt-box {
  animation-delay: 1.5s;
}
/* フェードインのアニメーション */
@keyframes imgBlur {
  0% {
    opacity: 0;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes BlurUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes BlurDw {
  0% {
    opacity: 0;
    transform: translateY(-20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes BlurUpAbsolute {
  0% {
    opacity: 0;
    transform: translateY(20px) translateX(-50%);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    transform: translateY(0px) translateX(-50%);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes fadeIn {
  0% {
      opacity: 0; 
  }100%{
    opacity: 1;
  }
}

.slideInLeft-trig
    {
        opacity: 0;
    }
    .slideInLeft
    {

        animation: bg 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

  @keyframes bg {
    0% {
      opacity: 0; /* 最初は非表示 */
      clip-path: inset(-0.8vw 100% -0.8vw 0); /* 右端から全体を隠す */
      
    }
    50% {
      opacity: 1; /* 表示を開始 */
      clip-path: inset(-0.8vw 0 -0.8vw 0); /* 全体が表示されるように */
    }
    100% {
      opacity: 1; /* 完全に表示 */
      clip-path: inset(-0.8vw 0 -0.8vw 0); /* 完全に表示された状態を維持 */
    }
  }
  .slideInCenter-trig
  {
      opacity: 0;
  }
  .slideInCenter
  {

      animation: center 1.5s cubic-bezier(0.6,0.7,1,1) forwards;
  }

@keyframes  center{
  0% {
    opacity: 0; /* 最初は非表示 */
    clip-path: inset(-0.8vw 50% -0.8vw 50%); /* 中央から隠す */
    filter: blur(5px); 
}
50% {
    opacity: 1; /* 表示を開始 */
    clip-path: inset(-0.8vw 25% -0.8vw 25%); /* 表示範囲を広げる */
    filter: blur(0px); 
}
100% {
    opacity: 1; /* 完全に表示 */
    clip-path: inset(-0.8vw 0 -0.8vw 0); /* 全体を表示 */
    filter: blur(0px); 
}
}

/* 各spanに遅延を加える */
.title-img{
  animation-delay: 0.5s;
}

.fadeUpTrigger,
.fadeDwTrigger,
.fadeUpTrigger-sp,
.fadeLeftTrigger,
.fadeRightTrigger,
.rotateRightZTrigger,
.strongTrigger,
.RightTrigger
.popInTrigger
.BgTrigger
{
  transform: translateZ(0); 
  opacity: 0;
}
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
     opacity: 0;
    transform: translateY(20px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fadeDw{
  animation-name:fadeDwAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDwAnime{
    from {
     opacity: 0;
    transform: translateY(-50px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeLeftAnime{
    from {
     opacity: 0;
    transform: translateX(-20px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }
  .fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  
  }

  .figure .fadeRight
  {
    animation-delay: 0.5s;
  }

  
  @keyframes fadeRightAnime{
    from {
     opacity: 0;
    transform: translateX(20px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }
  .rotateRightZ{
    animation-name:rotateRightZAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
  }
  
  @keyframes rotateRightZAnime{
    from{
      transform: rotateZ(0);
      opacity: 0;
      }
    to{  
      transform: rotateZ(360deg);
      opacity: 1;
      }
  }
.top-il {
    position: absolute;

    /* 2つの transform を合成する */
    --layout-transform: none;
    --anim-transform: none;
    transform: var(--layout-transform) var(--anim-transform);

    opacity: 0;
    animation: il-pop 0.8s ease-out forwards;
}

.popIn
{
    opacity:0;
    animation: popin 0.8s ease-out forwards;
    
}
@keyframes popin {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0) scale(1.4);
  }
  60% {
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: none;  /* ★元の absolute 位置に戻る！ */
  }
}
/* 全部ランダムっぽく出るようにディレイを追加 */
.top-il-1 { animation-delay: 0.1s; }
.top-il-2 { animation-delay: 0.70s; }
.top-il-3 { animation-delay: 0.40s; }
.top-il-4 { animation-delay: 0.25s; }
.top-il-5 { animation-delay: 0.40s; }
.top-il-6 { animation-delay: 0.70s; }
.top-il-7 { animation-delay: 0.25s; }
.top-il-8 { animation-delay: 0.90s; }
.top-il-9 { animation-delay: 0.1s; }

/* 花火風ポンッ！と出るアニメ */
@keyframes il-pop {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0) scale(1.4) rotate(8deg);
  }
  60% {
    transform: scale(1) rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: none;  /* ★元の absolute 位置に戻る！ */
  }
}
.pre-top-date-img,
.pre-2025-title p
{
    opacity:0;
    animation: bg 0.8s ease-out forwards;
    animation-delay: 1.3s;
}
.Bg
{
    opacity:0;
    animation: bg 0.5s ease-out forwards;
}
@keyframes bg {
  0% {
    opacity: 0;
    /* 中央に1点だけ見える状態（左右を 50% 隠す） */
    clip-path: inset(0 50% 0 50%);
  }
  60% {
    opacity: 1;
    /* だいぶ広がった状態 */
    clip-path: inset(0 10% 0 10%);
  }
  100% {
    opacity: 1;
    /* 全面表示 */
    clip-path: inset(0 0 0 0);
  }
}
.pre-title-img
{
    opacity:0;
    animation: bounceInUp 0.8s ease-out forwards;
    animation-delay: 1.1s;
}
@keyframes bounceInUp {
    0,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215,.61,0.355,1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scaleY(1)
    }
    60% {
        
        transform: translate3d(0, -20px, 0) scaleY(1)
    }
    75% {
        transform: translate3d(0, 10px, 0) scaleY(1)
    }
    90% {
        transform: translate3d(0, -5px, 0) scaleY(1)
    }
    100% {
        opacity: 1;
        transform: translateZ(0)
    }
}

/*スマホ限定アニメーション*/
@media all and (max-width:767px){
    .top-il-3
{
    animation: il-pop-3 0.8s ease-out forwards;
}
@keyframes il-pop-3 {
      0% {
        opacity: 0;
        transform: translate(0, 0) translateX(-50%)  scale(0.2) rotate(0deg);
      }
      20% {
        opacity: 1;
        transform: translate(0, 0) translateX(-50%) scale(1.4) rotate(8deg);
      }
      60% {
        transform: translateX(-50%) scale(1) rotate(-4deg);
      }
      100% {
        opacity: 1;
        transform: none;  /* ★元の absolute 位置に戻る！ */
        transform:translateX(-50%);
      }
    }
}