@charset "UTF-8";

.root{
  --white:#f6f0d8;
  --yellow:#fed287;
  --navy:#071a3b;
}

/*書き換え禁止*/
* ,*::before,*::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.iks_logo_left, .iks_logo_right {display: none !important;}
#header_bot {display: none !important;}
/*書き換え禁止*/

/*ここから書いてね*/





html {
  scroll-behavior: smooth;
}

body{
  background-color:#052f56; 
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
}

.first-view{
  position:relative;
  height:256px;
  width:100%;
}


.first-view-inner{
  height: 256px;
}

.first-view-photo{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0%;
  z-index:2;

  object-fit: cover;
  display: block;
  object-position: center top;
}

/* -------------------- タイトル文字 -------------------- */
/* タイトル全体 */
.fv-title {
    position: absolute;
    top: 46%;
    left: 5%;
    z-index: 10;
    color: #f6f0d8;
    font-family: "ab-andante", sans-serif;
}

.fv-title::before{
    content: "";
    position: absolute;
    width: 350px;
    height: 202px;
    top: 10px;
    left: 99px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(14, 26, 52, 0.8) 0%, rgba(14, 26, 52, 0.5) 35%, rgba(14, 26, 52, 0) 65%, transparent 100%);
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
    z-index: -1;
    pointer-events: none;
}




/* 4文字共通のアニメーション */
.title-ya,
.title-sai,
.title-toku,
.title-syu {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}

.title-syu{
     transition:
        opacity 1.5s ease,
        transform 1.5s ease;
}

/* 表示開始 */
.fv-title.is-visible .title-ya,
.fv-title.is-visible .title-sai,
.fv-title.is-visible .title-toku,
.fv-title.is-visible .title-syu {
    opacity: 1;
    transform: translateY(0);
}

/* 一文字ずつ時間差をつける */
.title-ya {
    transition-delay: 1.0s;
}

.title-sai {
    transition-delay: 1.4s;
}

.title-toku {
    transition-delay: 2.1s;
}

.title-syu {
    transition-delay: 2.8s;
}

.title-ya,.title-sai ,.title-toku,.title-syu{
        text-shadow: 6px 6px 6px #071a3b;
        color: #f6f0d8;
        position: absolute;
}

.title-ya { 
    font-size: 27vw;
    top: -7vw;
    left: 0;
          }


.title-sai {
    font-size: 18vw;
    top: 8vw;
    left: 24vw;
            }

.title-toku {
    font-size: 20vw;
    top: 21vw;
    left: 10vw;
            }

.title-syu {
    font-size: 27vw;
    top: 26vw;
    left: 26vw;
            }

.title-syu::before{
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    width: 33vw;
    height: auto;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/fv-shu-star.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -13%;
    left: -7%;
  
}

.title-syu::after{
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    width: 73vw;
    height: auto;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/fv-moon1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    transform: rotate(26deg);
    top: 39%;
    left: -3%;
    filter: drop-shadow(0 0 8px rgba(255, 220, 140, 0.8)) drop-shadow(0 0 20px rgba(255, 220, 140, 0.45));
}



  


/* -------------------- first-view -------------------- */
.first-view {
        position: relative;
        height: auto;
        width: 100%;
        background-color: #032039;
        aspect-ratio: 375 / 170;
}

.first-view-1 {
  position: absolute;
  width: 68vw;
  height: 68vw;
  top: 0;
  left: 0;
  z-index: 2;
}

.first-view-2, .first-view-3 {
  position: absolute;
  width: 34vw; /* 固定128px → vwに */
  height: 34vw;
  z-index: 2;
}

.first-view-2 { top: 0; left: 51vw; }
.first-view-3 { top: 34vw; left: 51.3vw; }

.first-view-inner{
  height: 256px;
}


/* --------------------res ポエム -------------------- */
.fv-poem-area-sp
{
        position: relative;
        width: 100%;
        aspect-ratio: 375 / 450;
        z-index: -1;
        background-color: #233657;
}

.fv-moon-wrap{
        position: absolute;
        width: 100%;
        aspect-ratio: 1;
        top: 0;
        left: 0;
        z-index: 3;
}

.fv-moon1
{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;
        object-fit: contain;
        filter: drop-shadow(0 0 8px rgba(255, 220, 140, 0.8)) drop-shadow(0 0 20px rgba(255, 220, 140, 0.45));
}

.fv-moon-wrap::before
{
        content: "";
        position: absolute;
        width: 100%;
        aspect-ratio: 1;
        top: 0%;
        right: 5%;
        border-radius: 50%;
        background: linear-gradient(to left, rgba(7, 26, 59, 0.8) 0%, rgba(7, 26, 59, 0.5) 60%, rgba(7, 26, 59, 0) 100%);
        z-index: -2;

        
}


.fv-poem
{
    position: absolute;
    z-index: 4;
    color: #f6f0d8;
    font-size: 3vw;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    top: 20%;
    letter-spacing: 0.08em;
    left: 9%;
    line-height: 1.6;
}

/* 文字の背後のぼかし */
.fv-poem::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 202%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(55, 101, 155, 0.8) 0%, rgba(55, 101, 155, 0.5) 35%, rgba(55, 101, 155, 0) 65%, transparent 100%);
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
    z-index: -1;
    pointer-events: none;
}

.fv-poem-p{
  position: relative;
  z-index: 1;
}

.poem-cloud{
    position: absolute;
    width: 60%;
    height: 30%;
    top: 41%;
    left: -16%;

}
.poem-scroll-guide-wrapper{
    display: flex;
    gap: 1px;
    position: relative; /* absolute から変更 */
    align-items: center;
}


.poem-scroll-guide{
    color: #f6f0d8;
    writing-mode: vertical-rl;/*文字を縦方向にする*/
    transform: rotate(180deg);
    letter-spacing: 5px;
    font-size: 2.5vw;
}

.poem-scroll-arrow{
    display: block;
    width: 2.5vw;/*aspect-ratioを入れなければ写真本来の縦横比になる*/
    height: auto;
    position: static;
}

.scroll-animation-pc{
    display: none;
}

.scroll-animation-sp {
    position: absolute;
    top: 525px;
    left: 77%; 
    animation: scroll-reveal 3s ease-in-out /*最初ゆっくり、中盤早く*/ infinite;
    animation-delay: 10.2s;
    animation-fill-mode: backwards;
    z-index: 100;
}


@keyframes scroll-reveal {
     0% {
        clip-path: inset(0 0 100%/*したから100%を切り取る*/  0);
        opacity: 0;
    }

    60% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    80% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

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

/* -------------------- 装飾 -------------------- */
.fv-e1{
        position: absolute;
        top: 0%;
        left: -1.5%;
        height: 57%;
        z-index: 3;
}
.fv-e2{
        position: absolute;
        top: 0vh;
        left: 36%;
        height: 40%;
        z-index: 30;
}

.fv-e3{
        position: absolute;
        top: 2px;
        left: 76%;
        height: 20%;
        z-index: 3;
}

.fv-e4{
        position: absolute;
        top: 1%;
        left: 63%;
        height: 50%;
        z-index: 3;
}

/* ------------- fv装飾アニメーション--------------- */
/* 星の装飾が上から垂れ下がる */
.fv-e1,
.fv-e2,
.fv-e3,
.fv-e4 {
    animation: star-drop 1.5s ease-out/* ---速→ゆっくり-- */ both/* ---フェード-- */;
}

/* それぞれ少しずつタイミングをずらす */
.fv-e1 {
    animation-delay: 0.5s;
}

.fv-e2 {
    animation-delay: 0.8s;
}

.fv-e3 {
    animation-delay: 1.0s;
}

.fv-e4 {
    animation-delay: 0.7s;
}

 
@keyframes star-drop {
    0% {
        transform: translateY(-120%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/*  fv装飾アニメーション--------------- */


.fv-poem-area-res{
  display: none;
}


.fv-cloud
{
  position: absolute;
  z-index: 6;
  inset: 0;
}

.fv-cloud1
{
    position: absolute;
    width: 111vw;
    top: 74%;
    left: -15vw;
    z-index: 8;
}
.fv-cloud2
{
    position: absolute;
    width: 110vw;
    top: 65%;
    z-index: 7;
    left: 25vw;
}

 .fv-cloud3,.fv-cloud4{display: none;}


/* -------------------- 概要 -------------------- */
.about{
    position: relative;
    color: #f6f0d8;
    height: auto;
    width: 100%;
    aspect-ratio: 375 / 350;
    background:linear-gradient(to bottom, #233657 0%, #2666a0 10%, #2666a0 80%, #233657 100%)
}

.about-title
{
    position: absolute;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    top: 6%;
    left: 17%;
    display: flex;
    align-items: baseline;
    gap: 0.5vw;
    z-index: 100;
}

.about-title-ya
{
    font-size: 11vw;
    text-shadow: 0 0 8px #f6f0d8

}

.about-title-except-ya
{
    font-size: 6vw;
    text-align: center;
    white-space: nowrap;

}

.about-contents{
  display: none;
}

.about-contents-sp
{
    position: absolute;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    font-size: 3vw;
    top: 27%;
    left: 19%;
    text-align: left;
    width: 90%;
    line-height: 2;
}
/* -------------- スマホ用------------ */
.about-cloud-sp
{
    position: absolute;
    top: -29%;
    z-index: 12;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.about-cloud-sp1
{
    position: absolute;
    width: 70%;
    left: 36%;
    z-index: -1;
}

.about-cloud-sp2
{
    position: absolute;
    width: 67%;
    left: -13%;
    transform: translateY(20%);
}
/* -------------- pc用------------ */
.about-cloud
{
display: none;
}

.about-cloud1
{
        position: absolute;
        width: 70%;
        left: 44%;
}

.about-cloud2
{
        position: absolute;
        width: 90%;
        left: -10%;
}

/* -------------- ページ内リンク------------- */

.page-inner-link{
        position: relative;
        background: linear-gradient(to top, #37659b 0%, #0b1a39 70%, #233657 100%);
        height: auto;
        width: 100%;
        aspect-ratio: 385 / 203;
}

@media screen and (min-width: 1024px){
    .page-inner-link{
        aspect-ratio: 385 / 153;
}
}

 
.page-inner-link-cloud
{
    position: absolute;
    top: -62%;
    z-index: 12;
    width: 100%;
    height: auto;
}

.page-inner-link-cloud1
{
    position: absolute;
    width: 70%;
    left: 54%;
    transform: translateY(15%);
    z-index: 1;
}

.page-inner-link-cloud2
{
    position: absolute;
    width: 95%;
    left: -13%;
    transform: translateY(20%);
    z-index: 2;
}

.anchor{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    font-size: 3vw;
    width: 100%;
    white-space: nowrap;
    margin: auto;
    }


.anchor_link{
        position: relative;
        z-index: 1;
        width: 33%;
        box-sizing: border-box;
        text-align: center;
        color: #f6f0d8;
        margin: auto;

}

.anchor_link::before{
        content: "";
        position: absolute;
        aspect-ratio: 2 / 1;
        width: 22vw;
        height: auto;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background-color: #2666a0;
        filter: blur(6vw);
        z-index: -1;
}

.anchor-title{
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

}


.anchor-link-jp{
  font-size: 3vw;
  
}

.anchor-link-en{
  font-size: 2vw;
}

.about-separator1{
    position: absolute;
    height: 12vw;
    left: 32%;

}

.about-separator2{
    position: absolute;
    height: 12vw;
    left: 67%;

}
/* ------------------------------ 見出し----------------------------- */
.section-title{
    position: relative;
    z-index: 100;
    text-align: center;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    text-indent: 2vw;
}

.section-title-jp{
    color: #f6f0d8;
    font-size: 6vw;

}

.section-title-en{
    color: #fed287;
    font-size: 2vw;
}

/* ------------------------------ 企画詳細----------------------------- */

.events{
    position: relative;
    height: auto;
    width: 100%;
    aspect-ratio: 375 / 600;
    background: linear-gradient(to bottom, #37659b 0%, #071a3b 13%, #071a3b 50%, #37659b 100%)
}

@media screen and (min-width: 1024px){
    .events{
        background: linear-gradient(to bottom, #37659b 0%, #071a3b 20%, #071a3b 50%, #37659b 100%);
    }

}



.events-cloud{
    position: absolute;
    width: 100%;
    height: 30%;
    top:-16%;  
}

.events-cloud1{
    position: absolute;
    width: 120%;
    left: 3%;
    z-index: 10;
}

.events-cloud2{
    position: absolute;
    width: 66%;
    top: -6vw;
    left: -25%;
}


.section-title-events{
    letter-spacing: 2vw;
    width: 100%;
    position: relative;
    padding-top: 8%;

}

@media screen and (max-width: 1023px) {
.section-title-events{
    padding-top: 45px;
}
}

.notice{
    position: relative;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    color: #f6f0d8;
    font-size: 2.5vw;
    z-index: 10;
    width: fit-content;
    margin: auto;
    white-space: nowrap;
    margin-top: 35px;
}


.notice-tt-finale{
    top: auto;
    left: auto;
    font-size: 8px;
    margin-top: 4px;
    margin-bottom: 2px;
}


@media screen and (min-width: 1024px)
 {
    .notice-tt-finale{
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }
 }



.artist-notice{
  top: 26%;
}

.wrapper {/* --------スライダー------- */
    max-width: 70vw;
    overflow: visible;
    width: 100%;
    position: relative;
    height: fit-content;
    margin: auto;
}

.next {
  aspect-ratio: 1/1;
  width: 9vw;
  height: auto;
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
  background: linear-gradient(to right, #416597 0%, #233657 100%);
  border-radius: 50%;
  border: solid 0.1vw #f6f0d8;

}

.next:hover{
  background-color: #071a3b;
}

.next::after {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 3vw;
  height: auto;
  border-top: solid 0.5px #f6f0d8;
  border-right: solid 0.5px #f6f0d8;
  position: absolute;
  right: 50%;
  top: 50%;
  -webkit-transform: rotate(45deg);
  transform: translate(20%,-50%) rotate(45deg) ;
 
}

.prev {
  aspect-ratio: 1/1;
  width: 9vw;
  height: auto;
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
  background: linear-gradient(to right, #233657 0%,#416597 100%);
  border-radius: 50%;
  border: solid 0.1vw #f6f0d8;
 
}


.next:active,
.prev:active {
    background: #071a3b;
}

@media (hover: none) {
    .prev,
    .next {
        transition: background-color 0.3s ease-out;
    }
}

.prev::after {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 3vw;
  height: auto;
  border-top: solid 0.5px #f6f0d8;
  border-right: solid 0.5px #f6f0d8;
  position: absolute;
  right: 50%;
  top: 50%;
  -webkit-transform: rotate(-135deg);
  transform:translate(60%,-50%) rotate(-135deg);
}

.slider-wrapper {
  width: 100%;
  aspect-ratio: 29 / 26;
  overflow: hidden;
  border: solid 0.1vw #f6f0d8;
  box-shadow:
    0 0 8px rgba(246, 240, 216, 0.6),
    0 0 20px rgba(246, 240, 216, 0.3);
}

.slider {
    width: 400%;
    height: 100%;
    display: flex;
    transition: transform 0.3s ease;
}

.content {
    flex: 0 0 25%;
    height: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider1 {
    transform: translateX(0);
}

.slider2 {
    transform: translateX(-25%);
}

.slider3 {
    transform: translateX(-50%);
}

.slider4 {
    transform: translateX(-75%);
}



.content1 {
  background-color: #0000;
  position: relative;
}

.content2 {
  background-color: #0000;
}

.content3 {
  background-color: #0000;
}

.slider .content img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*---------------スライダーの文字-------------*/


.slider-text-contet{
    position: absolute;
    inset: 0;
    color: #f6f0d8;
    width: 100%;
    height: 100%;
    z-index: 2;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    text-shadow: 1vw 1vw 0.5vw #071a3b;
}

.slider-date{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

}

.slider-date-month{
        position: absolute;
            font-size: 30px;
            left: 2%;
}

.slider-date-slash{
        position: absolute;
            font-size: 40px;
            left: 15%;
            top: -2%;
}

.slider-date-day{
        position: absolute;
        font-size: 60px;
        top: 1%;
        left: 20%;
}

.slider-date-week{
    position: absolute;
    font-size: 20px;
    top: 18%;
    left: 45%;
    text-shadow: 1vw 1vw 0.5vw #071a3b;
}

@media screen and (min-width: 1024px) {
    .slider-date-week{
    font-size: 2.2vw;
    top: 20%;
    left: 49%;
}
}

.slider-event-name{
    position: absolute;
    right: 4%;
    bottom: 2%;
    font-size: 13vw;
    text-shadow: 1vw 1vw 0.5vw #071a3b;
}

.slider-event-name-f{
    font-size: 10vw;
    text-align: right;
    line-height: 1.2;
}

.slider-event-name1{}

.slider-modal-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

/*---------------モーダル関連-------------*/


.slider-modal-inner{
    position: fixed;
    background-color: rgba(7, 26, 59, 0.8);
    width: 100%;
    height: fit-content;
    border: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overflow-x: hidden;/*モーダルからはみ出したら縦スクローくができる*/
}

@media screen and (min-width: 1024px) {
    .slider-modal-inner {
        width: 70%;
    }
}


.slider-modal-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    top: 80px;
}

.slider-modal-photo {
    position: absolute;
    top: 5%;
    left: 4%;
    width: 92%;
    height: 89%;
    object-fit: cover;
    object-position: center;
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    z-index: 1;
}


.modal-photo-frame1{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

/*-------------------------------------モーダル中身-------------------------------------*/


/* スマホ版：1023px以下 */
@media screen and (max-width: 1023px) {
    .slider-modal-inner-pc {
        display: none;
    }
}

/* PC版：1024px以上 */
@media screen and (min-width: 1024px) {
    .slider-modal-inner-sp {
        display: none;
    }
}





.slider-modal-contents{
    font-family: "Yu Mincho", "游明朝", serif;
    color: rgb(247, 241, 218);
    
}

.slider-modal-top{
    width: 95%;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5vw;
}

.slider-modal-left{
    width: 40vw;
    color: #f6f0d8;
    margin-left: 1vw;
}

.slider-modal-title{
     display: flex;
     align-items: baseline;
     white-space: nowrap;
     font-family: "ab-andante", sans-serif;
     margin-top: 5vw;
}

.slider-modal-title-capita-wrapper{
    position: relative;
    width: 100%;
}

.slider-modal-title-capita{
    color: #fed287;
    font-size: 20vw;
}

.slider-modal-title-capita-f{
    font-size: 25vw;
}

.slider-modal-title-others{
    font-size: 10vw;
}

.slider-modal-title-others-chu{
    transform: translateX(-2.5vw);
}

.slider-modal-title-others-f{
    transform: translate(-3vw, -1.7vw);
}

.slider-modal-info{
    font-size: 3vw;
    margin-left: 12vw;
    margin-top: 5vw;
    line-height: 2;
}

.slider-modal-intro{
    font-size: 2.7vw;
    margin-left: 7vw;
    margin-top: 2vw;
    line-height: 1.7;
}

.slider-modal-right{
    width: 100%;
    min-width: 0;
    margin-left: 10px;
}

.slider-modal-button-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 21px;
    margin-left: 5px;
    margin-top: 35px;
    margin-bottom: 20px;
    
}


.slider-modal-artist-btn,.slider-modal-timetable-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    aspect-ratio: 13 / 3;
    width: 40vw;
    height: auto;
    background: radial-gradient(circle 80px at center, #37659b 0%, #0b1a39 70%);
    border: 0.1px solid rgb(247, 241, 218);
    box-shadow: 0 0 10px rgb(247, 241, 218);
    cursor: pointer;
}




.btn-text {
    font-family: "Yu Mincho", "游明朝", serif;
    color: #f6f0d8;
    margin-left: 47px;
}

.btn-text-tt {
    margin-left: 23px;
}



/* 矢印 */
.btn-arrow {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 1px;
    background: #f6f0d8;
}

/* 矢印の先端 */
.btn-arrow::after {
    content: "";
    position: absolute;
    right: -4%;
    bottom: 0;
    aspect-ratio: 1 / 1;
    width: 5px;
    height: auto;
    border-right: 1px solid #f6f0d8;
    transform: skew(45deg);
    transform-origin: bottom right;
}

.slider-modal-date,.slider-modal-time{
    display: flex;
    align-items: center;
}

.slider-modal-date::before
{
    position: absolute;
    left: 8%;
    content: "";
    padding-top: 22px;
    display: block;
    aspect-ratio: 1 / 1;
    width: 4vw;
    height: auto;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-calender.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.slider-modal-time::before
{
    position: absolute;
    left: 8%;
    content: "";
    padding-top: 22px;
    display: block;
    aspect-ratio: 1 / 1;
    width: 4vw;
    height: auto;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-clock.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.slider-modal-place::before
{
    position: absolute;
    left: 8%;
    content: "";
    display: block;
    margin-top: 4px;
    aspect-ratio: 1 / 1;
    width: 4vw;
    height: auto;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/slider-modal-item5.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/*-------------------------------モーダル装飾---------------------------*/
.slider-modal-item1,.slider-modal-item1-2,.slider-modal-item1-3{
    width: 0.7%;
    position: absolute;
    top: 0.8%;
}

.slider-modal-item1{
    left: 6.7%;
    top: -3.8%;
}
.slider-modal-item1-2{
    left: 11.9%;
    top: 0%;

}
.slider-modal-item1-3{    
    position: absolute;
    transform: scaleY(1.2);
    left: 6.5%;
  }

.slider-modal-item2-1{
    width: 8%;
    position: absolute;
    left: 47%;
    top: 0%;
}

.slider-modal-item2{
    width: 8%;
    position: absolute;
    left: 41%;
    top: 0%;
}
.slider-modal-item3{
    width: 6%;
    position: absolute;
    left: 41%;
    top: 27%;
}
.slider-modal-item5{
    width: 3vw;
}


.slider-modal-item4{
    width: 25vw;
    position: absolute;
    right: -6%;
    top: 15%;
}

.slider-modal-item6{
    width: 5.5%;
    position: absolute;
    left: 47%;
    top: 0%;
}


/*-------------------------------FINALE　モーダル変更点---------------------------*/

.slider-modal-inner-finale{
    aspect-ratio: 374.5591 / 700;
}

.slider-modal-contents-3{
  height: 100%;
}

.slider-modal-video {
    width: 90%;
    aspect-ratio: 16 / 9;
    margin: 2vw auto;
    margin-top: 4vw;
    margin-bottom: 10vw;
    box-shadow: 0 0 5vw #f6f0d8;
}

.slider-modal-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.slider-modal-top-3{
    height: 50%;
}

.slider-modal-bottom{
    width: 90%;
    margin: auto;
    margin-top: 5vw;
}

.slider-modal-photo-frame-3{
      top: 120px;
}

.slider-modal-video-intro-text{
  color: #f6f0d8;
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  font-size: 3vw;
  margin: auto;
  width: fit-content;
}

.slider-modal-video-intro-text::before{
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20vw;
    height: 2vw;
    margin-right: 3vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-h2-left.svg");

}

.slider-modal-video-intro-text::after{
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20vw;
    height: 2vw;
    margin-left: 3vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-h2-right.svg")
}

/*-----------スライダーの仕切り------------*/
.indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw;
    margin: 4vw auto 0;
}

.indicator-number {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #f6f0d8;
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  font-size: 3vw;
  letter-spacing: 0.5vw;
  white-space: nowrap;
}

.slash,
.total-slide {
  opacity: 0.6;
}

.indicator-line {
width: 30%;
}

/*-------------------------------------タイムテーブルボタン-------------------------------------*/

/*-------------------------------------閉じるボタン-------------------------------------*/

.line-b,.line-a{
     position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 1px;
    background-color: #f6f0d8;
    border: none;

}

.line-a{
   transform: translate(-50%, -50%) rotate(45deg);
}

.line-b{
    transform: translate(-50%, -50%) rotate(-45deg);
}

.slider-modal-inner::backdrop {
  background: rgba(0, 0, 0, 0.65);
}


/* ------------------------------ タイムテーブル----------------------------- */
.timetable{
    position: relative;
    height: auto;
    width: 100%;
    height: calc(113.7vw + 480px);
    background: linear-gradient(to bottom, #37659b 20%, #071a3b 50%, #071a3b 100%);
  
}

.tt-cloud{
    position: absolute;
    width: 100%;
    height: 30%;
    top: -15vw;
}

.tt-cloud1{
    position: absolute;
    width: 100%;
    top: -8%;
    left: -12%;
    z-index: 10;
}

.tt-cloud2{
    position: absolute;
    width: 36%;
    left: 69%;
    top: 5%;
    z-index: 5;
}

.section-title-tt{
  top: 2%;
  width: 100%;
  letter-spacing: 2vw;
}



/*--- タブ--- */ 
/* タブ*/
.tabwrap{
    position: relative;
    height: 11vw;
    z-index: 12;
    display: flex;
    width: 80%;
    margin: auto;
    border-radius: 1vw;
    margin-top: 20px;
}


/* 何もない時に初夜祭とフィナーレの角を丸くする指定*/
.tab-button:first-child {
  border-radius: 1vw 0 0 1vw;
}

.tab-button:last-child {
  border-radius: 0 1vw 1vw 0;
}

.tab-button{
    cursor: pointer;/* カーソルを手の形にする指定 */
    flex: 1;/* 各子要素が横幅を均等に分け合う指定 */
    height: 100%;
    background-color: #071a3b;
    color: #f6f0d8;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    font-size: 2.5vw;
    width: auto;
    padding: 4%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 0.1vw #fed287;
    box-shadow: 0 0 7px #fed287;
}

.tab-button.active{
    background: radial-gradient(circle, #37659b 0%, #071a3b 100%);
    box-shadow: 0 0 10px #fed287;
    border-radius: 1vw;
    transform: scale(1.10);
    font-size: 3vw;
}

.tab-content{
display: none;
}

.tab-content.active{
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/* タブここまで*/ 


/* 初夜祭・中夜祭のコンテンツ全体を下に移動 */


.tt-areatitle-wrap{
  position: relative;
  margin-top: 55px;
}

.tt-title-wrap{
  position: absolute;
  color:#f6f0d8 ;
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  font-size: 3.5vw;
  z-index: 12;
  top: 35%;
  width: 100%;
}

.tt-title-wrap-finale{
    top: 21%;
    left: 31%;
}

.tt-title-front{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.tt-title-front::before{
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    width: 10vw;
    height: auto;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/tt-pointer.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.tt-title-auditorium{
    position: absolute;
    right: 9%;
    display: flex;
    align-items: center;
    gap: 1vw;
}

.tt-title-auditorium::before{
  content: "";
  display: block;/* 擬似要素をブロックとして扱う指定 */ 
  aspect-ratio: 1/1;
  width: 9vw;
  height: auto;
  background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/tt-pointer.svg");
  background-size: contain;/* 擬似要素をブロックに含まれるようにする指定 */ 
  background-repeat: no-repeat;/* ブロック内に余白ができた時に同じ画像がまた表示されるのを防ぐ指定 */ 
  background-position: center;/*画像をブロックの真ん中に置く指定 */ 
  flex-shrink: 0;/* flex-boxの中で勝手に縮まないようにする指定 */ 
}


.timeshaft{
    position: absolute;
    z-index: 13;
    left: 50%;
    transform: translateX(-50%);
    width: 66%;
    height: auto;
    aspect-ratio: 1 / 2;
    display: flex;
    justify-content: center;
    pointer-events: none; 
}

.timepoint{
    position: relative;
    left: auto;
    display: grid;
    grid-template-rows: repeat(36, 2.8vw);
    width: 100%;
    height: 100%;
}

.tt-shaft{
    position: absolute;
    width: 13%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.tt-shaft-finale-wrapper{
    position: absolute;
    top: 250px;
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
    pointer-events: none;
    left: 10%;
}


#line9{
    top: 1%;
}

#line10{
    top: 99%;
}

@media (max-width: 1023px) 
{
#line9,#line10{left: 10%;}
}


.tt-shaft-top {
    position: absolute;
    top: -24%;
    width: 24%;
}

.tt-shaft-middle1 {
    position: absolute;
    top: 5%;
}

.tt-shaft-middle2 {
    position: absolute;
    top: 38.5%;
}

.tt-shaft-bottom {
    position: absolute;
    top: 69%;
    aspect-ratio: 1 / 5;
    width: 88%;
}

.tt-shaft-bottom-line {
    position: absolute;
    top: 5%;
    width: 30%;
    height: 87%;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
}

.tt-shaft-bottom-pointer {
    position: absolute;
    top: 7%;
    width: 100%;
    height: 87%;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
}

.tt-shaft-bottom-end {
    position: absolute;
    top: 77%;
}

.tt-shaft-bottom-true {
    position: absolute;
    top: 102%;
    height: 21%;
    width: 107%;
    transform: rotate(180deg);
}



/* 軸　pc版位置調節*/
@media screen and (min-width:1024px)
{
   .tt-shaft-top {
    top: -22%;
    width: 28%;
} 

.tt-shaft-middle1{
    width: 137%; 
}

.tt-shaft-middle2{
    width: 137%;
}

.tt-shaft-bottom{
    width: 134%;
}

.tt-shaft-bottom-true {
    position: absolute;
    top: 102%;
    height: 21%;
    transform: rotate(180deg);
}

}

/* 軸　スマホ版位置調節*/
@media (max-width: 1023px) {

.tt-shaft-middle2 {
    top: 35.5%;
}

.tt-shaft-bottom{
    top: 66%;
}

.tt-shaft-bottom-true{
    top: 97%;
    width: 20%;
}
}


/* 横線全体を配置するレイヤー */
.timepoint-line {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* 横線の共通デザイン */
.hour-line {
    position: absolute;
    width: 33vw;
    border-top: 1px solid #fed28766;
}

/* 左側 */
.left-line {
    left: 0;
}

/* 右側 */
.right-line {
    right: 0;
}

/* 時間ごとの高さ */
.hour-17 {
    top: 0%;
}

.hour-18 {
    top: 33%;
}

.hour-19 {
    top: 65.5%;
}

.hour-20 {
    top: 100%;
}

.tt-grid{
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    grid-template-rows: repeat(36, 2.8vw);
    position: absolute;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 35px;
}



/*-------------------------ttモーダル関連------------------------- */ 
.event-card{
    position: relative;
    z-index: 14;
    width: 100%;
    background-color: rgba(7, 26, 59, 0.61);
    border: solid 0.01vw #f6f0d8;
    box-shadow: 0 0 1vw #f6f0d8;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    justify-self: center;
}

.event-card-finale{
    height: 40px;
    margin-bottom: 10px;
}

.event-card-wrapper{
    position: relative;
    left: 8vw;
    top: 200px;
    width: 70%;
    margin: auto;
}


.event-time-start,
.event-time-end{
  color: #f6f0d8;
  font-size: 2vw;
  position: absolute;
  font-family: "Yu Mincho", "游明朝", serif;
}

.event-time-start{
  top: 2px;
  left: 3px;
}

.event-time-end{
  bottom: 2px;
  right: 3px;
}


.event-card:hover{
  transform: scale(1.05);
}
.event-title{
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 2.5vw;
    text-align: center;
    color: #f6f0d8;
    line-height: 1.3;
}

/*--------TTモーダルデザイン-------*/


/* 通常は両方とも非表示 */
.tt-modal-inner-sp,
.tt-modal-inner-pc {
    display: none;
}


/* スマホ版 */
@media (max-width: 1023px) {
    .tt-modal-inner-sp[open] {
        display: block;
        
    }
}

/* PC版 */
@media (min-width: 1024px) {
    .tt-modal-inner-pc[open] {
        display: block;
    }
}

.tt-modal-inner{
    position: fixed;
    background-color: rgba(7, 26, 59, 0.8);
    width: 80%;
    height: auto;
    border: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

    .slider-modal-inner-sp {
        max-height: 90dvh;
        overflow-y: auto;
        overflow-x: hidden;
    }


.modal-contents{
    font-family: "Yu Mincho", "游明朝", serif;
    color: rgb(247, 241, 218);
 
}

.modal-top{
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 5vw;
    align-items: flex-end;
    margin-bottom: 55px;
    margin-top: 49px;
}

.modal-left {
    text-align: center;
    position: static;
    width: 100%;
    margin: 0;
    transform: translateY(20px);
}

.modal-title{
  text-align: center;
}

.modal-event-name {
  font-size: 3.5vw;
}

.modal-artist-name {
    font-size: 2.5vw;
    margin-bottom: 5vw;
    margin-top: -1vw;
}
.modal-name-line{
  
}

.modal-meta {
    display: flex;
    gap: 15px ;
    margin: auto;
    font-size: 2.5vw;
    text-align: center;
    letter-spacing: 0.1em;
    width: fit-content;
    align-items: center;
}



.modal-date1,.modal-date2,.modal-date3{
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}




.modal-date-wrapper,.modal-time-wrapper {
    position: relative;
    height: fit-content;
}

.modal-date-wrapper::before,.modal-time-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-2.8vw, -1vw);
    display: block;
    width: 2vw;
    aspect-ratio: 1 / 1;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-calender.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.modal-date-wrapper::before{
transform: translate(-2.8vw, -1.2vw);
}

.modal-time-wrapper::before {
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-clock.svg");
    top: 40%;
}

.modal-time1,.modal-time2,.modal-time3{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.modal-time2{
     margin-top:0.2vw;
}
.modal-time3{
    margin-top:0.4vw;
}






.modal-photo-wrapper {
    position: relative;
    width: 87%;
    margin: 0 auto;
    overflow: visible;
    aspect-ratio: 1/1;
}

.modal-photo-wrapper::after{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-photo-frame.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    z-index: 10;
    pointer-events: none;
}

.modal-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.modal-photo img {
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-photo-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 2;
    pointer-events: none;
}

.modal-right {
    position: static;
    width: 100%;
    margin: 0;
    transform: translate(-8%, 5.5vw);
}

.modal-info-block {
  margin-bottom: 30px;
}

.modal-info-block-h3{
    position: relative;
    text-align: center;
    font-size: 3.5vw;
    font-weight: normal;
    margin-bottom: 15px;
}

.modal-info-block-h3::before,.modal-info-block-h3::after{
    content: "";
    display: block;
    width: 30%;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.modal-info-block-h3::before{
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/indicator-line-left.svg");
    position: absolute;
    right: 10%;
    top: 25%;
}


.modal-info-block-h3::after{
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/indicator-line-right.svg");
    position: absolute;
    top: 31%;
    left: 10%;
}

.modal-info-block-p {
    position: relative;
    isolation: isolate;
    font-size: 2.5vw;
    line-height: 1.8;
    width: 80%;
    margin: auto;

}

.modal-info-block-p::before {
    content: "";
    position: absolute;

    width: 100%;
    height: 130px;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background: radial-gradient(ellipse at center, rgba(65, 101, 151, 0.7) 0%, rgba(65, 101, 151, 0.5) 20%, rgba(65, 101, 151, 0.3) 40%, transparent 75%);
    z-index: -1;
    pointer-events: none;
}



.modal-timetable-btn {
    font-family: "Yu Mincho", "游明朝", serif;
    background: radial-gradient(circle 80px at center, #37659b 0%, #0b1a39 70%);
    position: absolute;
    align-self: flex-end;
    padding: 1.5vw 4vw;
    color: #f6f0d8;
    border: 0.1px solid rgb(247, 241, 218);
    box-shadow: 0 0 10px rgb(247, 241, 218);
    cursor: pointer;
    right: 10%;
    display: flex;
    align-items: center;
    gap: 2vw;
    transform: translateY(8px);
}

.line-b,.line-a{
     position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 1px;
    background-color: #f6f0d8;
    border: none;

}
.line-a{
   transform: translate(-50%, -50%) rotate(45deg);
}

.line-b{
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close-btn {
position: sticky;
    top: 12px;
    display: block;
    margin-left: auto;
    margin-right: 12px;
    margin-bottom: -30px;
    aspect-ratio: 1 / 1;
    width: 8vw;
    height: auto;
    border-radius: 50%;
    border: 0.1px solid rgb(247, 241, 218);
    background: #071a3b;
    color: #f6f0d8;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 208, 113, 0.25);
    z-index: 100;
}

.tt-modal-inner::backdrop {
  background: rgba(0, 0, 0, 0.65);
}



/* ------------------------------ 出演団体----------------------------- */
.artist{
    position: relative;
    width: 100%;
    height: auto;
    background: linear-gradient(to bottom, #071a3b 0%, #071a3b 50%, #37659b 100%);
   padding-bottom: 30vw;
}

.section-title-artist{
  top: -9%;
  letter-spacing: 2vw;
}

.artist-cloud{
   position: absolute;
    width: 100%;
    height: auto;
    top: -85px;
}

.artist-cloud1{
    position: absolute;
    width: 100%;
    top: 0;
    left: -12%;
    z-index: 10;
}

.artist-cloud2{
    position: absolute;
    width: 36%;
    left: 69%;
    top: 34px;
    z-index: 5;
}

.artist-tab{
  top: 18%;
}

.tab-button2{
    cursor: pointer;/* カーソルを手の形にする指定 */
    flex: 1;/* 各子要素が横幅を均等に分け合う指定 */
    height: 100%;
    background-color: #071a3b;
    color: #f6f0d8;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    font-size: 2.5vw;
    width: auto;
    padding: 4%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 0.1vw #fed287;
    box-shadow: 0 0 7px #fed287;
}

.tab-button2:first-child {
  border-radius: 1vw 0 0 1vw;
}

.tab-button2:last-child{
  border-radius: 0 1vw 1vw 0;
}

.tab-button2.active{
    background: radial-gradient(circle, #37659b 0%, #071a3b 100%);
    box-shadow: 0 0 10px #fed287;
    border-radius: 1vw;
    transform: scale(1.10);
    font-size: 3vw;
}

.tab-button2:hover,.tab-button:hover {
background-color:#233657;
}

.artist-h2{
    width: fit-content;
    margin: 0 auto;
    color: #f6f0d8;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    font-size: 4.5vw;
    margin-bottom: 5vw;
    align-items: center;
    white-space: nowrap;
}

.artist-h2::before{
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 25vw;
    height: 2vw;
    margin-right: 2vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-h2-left.svg");

}

.artist-h2::after{
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 25vw;
    height: 2vw;
    margin-left: 2vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-h2-right.svg")
}

.artist-tab-content{
    position: relative;
    width: 85%;
    left: 50%;
    transform: translateX(-50%);
    top: 28%;
    display: none;
}

.artist-tab-content.active {
    display: block;
}

.artist-front{
    margin-top: 5vw;
    margin-bottom: 20vw;

}

.artist-auditorium{
  margin-top: 5vw;
}

.artist-intro-wrapper{
  display:flex;
  gap: 7vw;
  width: 100% ;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 10vw;
}

.artist-intro{

}

.artist-intro2::before
{
    position: absolute;
    content: "";
    height: 20vw;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-front-line1.svg");
    left: -67%;
    top: -27%;
    z-index: -1;
}

.artist-intro1{

}

.artist-intro2
{
  margin-top: 4vw;
  position: relative;
}

.artist-intro3
{
position: relative;
}

.artist-intro3::before
{
    position: absolute;
    content: "";
    height: 20vw;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-front-line1.svg");
    left: -81%;
    top: -3%;
    z-index: -1;
    transform: rotate(90deg);
}

.artist-intro4
{
  margin-top: 4vw;
  position: relative;
}

.artist-intro4::before
{
        left: -97%;
}

.artist-intro-res{
  display: none;
}
.artist-intro-sp{
  display: block;
}

.artist-photo{
  width: 45%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #fed287;
  background-color: #fed287;
  box-shadow:
    0 0 12px rgba(254, 210, 135, 0.7),
    0 0 24px rgba(254, 210, 135, 0.25);
  transition: transform 0.7s ease;
}

.artist-photo:hover{
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.artist-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

.artist-intro-text{
    color: #fff8de;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    text-align: center;
    display: grid;
    margin-top: 2vw;
    gap: 2vw;
    width: 45%
}

.artist-event{
  font-size: 14px;
}

.artist-name{
  font-size: 11px;
  margin-top: -1vw;
}

.artist-indicator{
    width: 100%;
}
/*-----------------------見返して*/
.artist-modal-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.artist-modal-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}






/*浮いてるハンバーガーメニューの色変更*/
.hamburger-fade__wrapper {
  background-color: #071a3b;
}
/*フッターの色変更*/
.footer_wrapper{
  background-color: #0b1a39!important;
}
/* img要素自体を新しい画像で上書きする */
/*おんなじ画像のURLで大丈夫だよ～*/
img.piece_pc {
  content: url("https://ikkyosai.com/visitor/57/topics/img/night/footer-piece.svg");
}
img.piece_sp {
  content: url("https://ikkyosai.com/visitor/57/topics/img/night/footer-piece.svg");
}
/*commonのホバー消し*/

#pagetop:hover img {
    transform: none;
}
@media screen and (min-width:1024px) {
#pagetop img{
    width: 90px;
}
}

/*----------------------フッダー調節*/

.piece{
    max-width: 100vw;
    margin-bottom: -2.5vw;
}

.img.piece_sp{
    content: url("https://ikkyosai.com/visitor/57/topics/img/night/footer-piece.svg");
    width: 51%;
    transform: translateX(46px);
}

footer{
    margin-top: -34.5vw;
    position: relative;
    z-index: 16;
}

  /*押した時に青い枠表示されるのを阻止する指定*/
button:focus {
    outline: none;
}

/*------------------------ローディング画面-----------------------*/
/* ローディング中はスクロール禁止 */
html.is-loading,
html.is-loading body {
  overflow: hidden;
}

/*ローディング画面*/
html.is-loading,
html.is-loading body {
  overflow: hidden;
}
#loader-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom right,#2666a0 30%, #233657 100%);
  z-index: 10000;
}
.loading-area {
  width: 100px;
  height: 100px;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  gap: 5px;
}
/* Web フォントの読み込みで字形が変わってガタつかないよう、端末のフォントで出す。
   1049 の Kiwi Maru に近い印象になるよう、ゴシックではなくセリフ体にする */
.loading-area span {
  display: inline-block;
  color: #f6f0d8;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  animation: rotate 1.7s infinite linear;
  text-transform: uppercase;
}
.loading-area span:nth-child(2) { animation-delay: 0.1s; }
.loading-area span:nth-child(3) { animation-delay: 0.2s; }
.loading-area span:nth-child(4) { animation-delay: 0.3s; }
.loading-area span:nth-child(5) { animation-delay: 0.4s; }
.loading-area span:nth-child(6) { animation-delay: 0.5s; }
.loading-area span:nth-child(7) { animation-delay: 0.6s; }
.loading-area span:nth-child(8) { animation-delay: 0.7s; }
.loading-area span:nth-child(9) { animation-delay: 0.8s; }
.loading-area span:nth-child(10) { animation-delay: 0.9s; }

@keyframes rotate {
  50% { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}


/*画面に入ったら表示*/
.fadeIn {
  transform: translate3d(0, 50px, 0);
  transition: 1s;
  opacity: 0;
}
.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}







  /*ここから書いてね*/

@media screen and (min-width:1024px) {

  /*PC版*/
  /*書き換え禁止*/

.hamburger-fade {display: none;}
main {padding-top: 65px;}
  /*書き換え禁止*/

body {
  background-color: #052f56; 
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  margin: 0;
  padding: 0;
}

.fv-cloud1
{
        position: absolute;
        width: 60vw;
        top: 74%;
        left: -15vw;
        z-index: 8;
}
.fv-cloud2
{
        position: absolute;
        width: 50vw;
        top: 70%;
        z-index: 7;
        left: 10vw;
}
 .fv-cloud3
{
        position: absolute;
        width: 44vw;
        left: 38vw;
        top: 86%;
        display: block; 
}
.fv-cloud4
{
        position: absolute;
        width: 45vw;
        left: 67vw;
        top: 90%;
        display: block; 
} 

.fv-title{
  position:absolute;
  top: 80px;
  left: 40px;
  z-index: 10;
  color: #f6f0d8;
  font-family: "ab-andante", sans-serif;

}

.title-ya { 
        position: absolute;
        font-size: 22vw;
        top: -6vw;
        left: -25px;
        color: #f6f0d8;
        text-shadow: 12px 12px 15px #071a3b;
          }
.title-sai {
        position: absolute;
        font-size: 13vw;
        top: 3vw;
        left: 17vw;
        color: #f6f0d8;
        text-shadow: 10px 10px 10px #071a3b;
            }
.title-toku {
        position: absolute;
        font-size: 15vw;
        top: 13vw;
        left: 6vw;
        color: #f6f0d8;
        text-shadow: 15px 15px 12px #071a3b;
            }
.title-syu {
        position: absolute;
        font-size: 19vw;
        top: 16vw;
        left: 18vw;
        color: #f6f0d8;
        text-shadow: 15px 15px 12px #071a3b;
            }

.title-syu::before{
        width: 25vw;
        top: -20%;
        left: -11%;
}
.title-syu::after{
  display: none;
}

/* --------------------res ポエム -------------------- */
.fv-poem-area-sp{
  display: none;
}

.fv-poem-area-res
{
  display: block; 
  position: absolute;
  width: 45%;
  aspect-ratio: 1;
  top: 5%;
  right: -3vw;
  z-index: 10;
}

.fv-moon-wrap{
        position: absolute;
        width: 100%;
        aspect-ratio: 1;
        top: 0;
        left: 0;
        z-index: 3;
}

.fv-moon1
{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;
        object-fit: contain;
        filter: drop-shadow(0 0 8px rgba(255, 220, 140, 0.8)) drop-shadow(0 0 20px rgba(255, 220, 140, 0.45));
}

.fv-moon-wrap::before
{
        content: "";
        position: absolute;
        width: 100%;
        aspect-ratio: 1;
        top: 0%;
        right: 5%;
        border-radius: 50%;
        background: linear-gradient(to left, rgba(7, 26, 59, 0.8) 0%, rgba(7, 26, 59, 0.5) 60%, rgba(7, 26, 59, 0) 100%);
        z-index: -2;

        
}


.fv-poem
{
        position: absolute;
        z-index: 4;
        color: #f6f0d8;
        font-size: 2.3vw;
        font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
        top: 20%;
        text-shadow: 2px 2px 2px #071a3b;
        letter-spacing: 0.08em;
        left: -4%;
        line-height: 2;
}

.fv-poem::before{
  display: none;
}

.fv-poem-p{
  position: relative;
  z-index: 1;
}

.poem-cloud{
  display: none;
}


/* --------------------aboutの上の雲 -------------------- */
.about{
        position: relative;
        color: #f6f0d8;
        height: auto;
        width: 100%;
        aspect-ratio: 375 / 220;
}

.about-title
{
        position: absolute;
        font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
        top: 24%;
        left: 25%;
        display: flex;/* 子要素にabsoluteは不要 */
        align-items: baseline; /* 「夜」と「祭りとは」を下揃え */
        gap: 0.5vw;/* 「夜」と「祭りとは」の間隔調整 */

}

.about-title-ya
{
   font-size: 5vw;

}

.about-title-except-ya
{
        font-size: 2vw;
        text-align: center;
        white-space: nowrap;

}

.about-contents
{
        position: absolute;
        font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
        font-size: 2vw;
        top: 37%;
        left: 50%;
        transform: translateX(-50%);
        text-align: left;
        display: block;
}

.about-contents-sp{
  display: none;
}

/* --------------------aboutの上の雲 -------------------- */
.about-cloud-sp{
  display: none;
}

.about-cloud
{
        position: absolute;
        top: 34vw;
        z-index: 12;
        width: 100%;
        display: block;
}

.about-cloud1
{
         position: absolute;
        width: 70%;
        left: 59%;
        top: -2vw;

}

.about-cloud2
{
        position: absolute;
        width: 90%;
        left: -14%;
}

/* --------------------目次 -------------------- */

.page-inner-link-cloud{
  display: none;
}

.anchor{
 width: 65%;
 top: 42%;
    }


.anchor_link{
        position: relative;
        z-index: 1;
        width: 33%;
        box-sizing: border-box;
        text-align: center;
        color: #f6f0d8;
        margin: auto;
        transition: transform 0.7s ease;

}

.anchor_link::before{
        content: "";
        position: absolute;
        aspect-ratio: 2 / 1;
        width: 18vw;
        height: auto;
        top: -28px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background-color: #2666a0;
        filter: blur(5vw);
        z-index: -1;
}

.anchor-title{
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

}

.anchor_link:hover{
    transform: scale(1.15);
    transition: transition;
    transition: transform 0.5s ease;
}

.anchor-link-jp{
  font-size: 20px;
  
}

.anchor-link-en{
  font-size: 10px;
}

.about-separator1,.about-separator2{
        height: 85px;
}



/*-------------------------企画詳細--------------------------*/
.events {
        aspect-ratio: auto;
        height: auto;
        padding-bottom: 20vw;
        padding-top: 5vw;
}

.notice{
    font-size: 13px;
    margin-top: 4vw;
    margin-bottom: 2vw;
}

.indicator {
    gap: 2vw;
}

.indicator-line {
    width: 15%;
}

.indicator-number {
    font-size: 12px;
}

.events-cloud{
  top: -43%;
  z-index: -1;
}

.prev::after {
width: 1vw;
}

.next::after {
width: 1vw;
}

.event-title{
    font-size: 12px;
}

/* ----------------------------PC版slider-modal　文字部分------------------------------ */
.slider-text-contet{
    text-shadow: 0.5vw 0.5vw 0.5vw #071a3b;
}


.slider-event-name{
    right: 4%;
    bottom: 2%;
    font-size: 5vw;
}

.slider-event-name-f{
     font-size: 40px;
}

.slider-date-month{
    font-size: 2.5vw;
}

.slider-date-slash{
        font-size: 5vw;
        left: 14%;
        top: -5%;
}

.slider-date-day{
    font-size: 5.5vw;
    top: 1%;
    left: 22%;
}

/* ------------------------------- PC版：モーダル中身 ------------------------------------ */



.line-b,.line-a{
     position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 1px;
    background-color: #f6f0d8;
    border: none;

}

.line-a{
   transform: translate(-50%, -50%) rotate(45deg);
}

.line-b{
    transform: translate(-50%, -50%) rotate(-45deg);
}




/*モーダル中身-------------------------------------*/


.slider-modal-contents{
    font-family: "Yu Mincho", "游明朝", serif;
    color: rgb(247, 241, 218);
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    display: grid;
}

.slider-modal-left{
    width: 100%;
}

.slider-modal-left{
    width: 100%;
}

.slider-modal-left-bottom{
    display: grid;    
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    margin-top: 2vw;
}



.slider-modal-title{
     display: flex;
     align-items: baseline;
     white-space: nowrap;
     font-family: "ab-andante", sans-serif;
     margin-top: 2vw;
}

.slider-modal-title-capita{
    color: #fed287;
    font-size: 10vw;
}


.slider-modal-title-capita-f{
    color: #fed287;
    font-size: 12vw;
}

.slider-modal-title-others{
    font-size: 5vw;
}

.slider-modal-title-others-chu{
    transform: translateX(-1vw);
}


.slider-modal-title-others-f{
    transform: translate(-1vw, -0.8vw);
}

.slider-modal-inner-pc .slider-modal-info,
.slider-modal-inner-pc .slider-modal-intro {
    margin-top: 0;
    align-self: start;
}

.slider-modal-info{
    font-size: 1.5vw;
    margin-left: 5vw;
    line-height: 2;
}

.slider-modal-intro{
        font-size: 1.5vw;
        margin-left: 5vw;
        line-height: 1.7;
        width: 66%;
}

.slider-modal-place{
    margin-top: 0.7vw;
    line-height: 1.4;
}


/*モーダル　誘導ボタン-----------------------------------*/
.slider-modal-button-wrapper{    
        gap: 3vw;
        margin-left: -1vw;
        margin-top: 3vw;
}

.slider-modal-artist-btn,.slider-modal-timetable-btn {
        gap: 1vw;
        margin-top: -1vw;
        aspect-ratio: 13 / 2.5;
        width: 17vw;
}

.btn-text {
        margin-left: 5vw;
        font-size: 15px;
}

/* スライダーモーダル用 */
.btn-text-tt {
    margin-left:3vw;
}

/* ttモーダル調整用 */
.btn-text-tt-2 {
    margin-left:10px;
}

/* 矢印 */
.btn-arrow {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 1px;
    background: #f6f0d8;
}

/* 矢印の先端 */
.btn-arrow::after {
    content: "";
    position: absolute;
    right: -4%;
    bottom: 0;
    aspect-ratio: 1 / 1;
    width: 5px;
    height: auto;
    border-right: 1px solid #f6f0d8;
    transform: skew(45deg);
    transform-origin: bottom right;
}

.slider-modal-date::before
{
    position: absolute;
    left: 3vw;
    content: "";
    padding-top: 2.5vw;
    display: block;
    aspect-ratio: 1 / 1;
    width: 1.6vw;
    height: auto;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-calender.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.slider-modal-time::before
{
    position: absolute;
    left: 3vw;
    content: "";
    padding-top: 2.5vw;
    display: block;
    aspect-ratio: 1 / 1;
    width: 1.6vw;
    height: auto;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-clock.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.slider-modal-place::before
{
        left: 3vw;
        content: "";
        width: 1.7vw;
}


/*モーダル装飾-----------------------------------*/
.slider-modal-item1,.slider-modal-item1-2,.slider-modal-item1-3{
    width: 0.5%;
    position: absolute;
    top: 0%;
}

.slider-modal-item1{        
        left: 5.1%;
        top: -8.5%;}
.slider-modal-item1-2{left: 8.5%;}
.slider-modal-item1-3{        
        left: 4.5%;
        top: -4%;}

.slider-modal-item2{
        width: 4.5%;
        position: absolute;
        left: 33%;
        top: -2%;
}

.slider-modal-item2-2{
    width: 4%;
    position: absolute;
    left: 41%;
    top: 0%;
}
.slider-modal-item3{
    width: 3%;
    position: absolute;
    left: 1%;
    top: 35%;
}
.slider-modal-item5{
    width: 3vw;
}


.slider-modal-item4{
    width: 25vw;
    position: absolute;
    right: -6%;
    top: 15%;
}

.slider-modal-item6{
        width: 3%;
        left: 31%;
        top: -3%;
}


/*モーダル写真部分-------------------*/

.slider-modal-right{
    width: 100%;
}

.slider-modal-photo-frame {
    position: relative;
    width: 65%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    top: 7vw;
    margin-left: 5vw;
}

.slider-modal-photo {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;

    object-fit: cover;
    object-position: center;
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    z-index: 1;
}


.modal-photo-frame1{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}


.slider-modal-video {
    width: 90%;
    aspect-ratio: 16 / 9;
    margin: 2vw auto;
    margin-top: 16.3vw;
    box-shadow: 0 0 5vw #f6f0d8;
}






/* ---------- PC版：スライダー3枚表示 ---------- */

.wrapper {/* ------.eventの中にある.wrapper----- */
    max-width: 90%;
}

.slider-wrapper {
    width: 100%;
    aspect-ratio: auto;
    overflow: visible;
    border: none;
    box-shadow: none;
}

.slider {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 2vw;
    transform: none;
}

/* 既存のスライド移動指定を、3枚同時表示するためPCでは解除 */
.slider1,.slider2,.slider3 { transform: none }

.content {
    flex: 0 0 calc((100% - 4vw) / 3);/* 3枚が横並びに収まるよう、各画像の横幅を計算する */
    /* 余ったスペースに広げない、スペースが足りなくても縮めない、画像1枚の基本幅の計算 */
    aspect-ratio: 29 / 26;
    height: auto;
    min-width: 0;
    position: relative;
    opacity: 0.55;
    transform: scale(0.9);
transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.65s ease-in-out;
}

.slide-modal-button {
    width: 100%;
    height: 100%;
    /* ボタンを表示領域に合わせる */
}

 .slide-modal-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 中央の画像だけ強調 */
.slider1 .content1,/*　一枚目が選択されている状態を表す */
.slider2 .content2,
.slider3 .content3 {
    opacity: 1;
    transform: scale(1.08);
    z-index: 2;
}

/* 画像の初期位置 */
.slider .content {
    translate: 0 0;
}

/* 1枚目が中央 */
.slider1 .content1,
.slider1 .content2 {
    translate: calc(100% + 2vw) 0;
}

.slider1 .content3 {
    translate: calc(-200% - 4vw) 0;
}

/* 2枚目が中央 */
/* 初期位置のままなので追加指定なし */

/* 3枚目が中央 */
.slider3 .content1 {
    translate: calc(200% + 4vw) 0;
}

.slider3 .content2,
.slider3 .content3 {
    translate: calc(-100% - 2vw) 0;
}


/* 左右の画像にホバーした場合 */
 .slider .content:hover {
        transform: scale(1);
        opacity: 0.8;
        z-index: 3;
    }

/* 中央の画像にホバーした場合 */
    .slider.slider1 .content1:hover,
    .slider.slider2 .content2:hover,
    .slider.slider3 .content3:hover {
        transform: scale(1.13);
        opacity: 0.85;
    }

/* 左右の矢印 */
.prev {
    left: -6vw;
    width: 4vw;
}

.next {
    right: -6vw;
    width: 4vw;
}


/* PC版ではループ用の4枚目を非表示 */
.content4 {
    display: none;
}
/*-------------------------タイムテーブル--------------------------*/

.section-title-tt{
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
}


.tt-title-auditorium{
  right: 23%;
}

.tt-title-front::before,.tt-title-auditorium::before{
  width: 35px;
}

.event-time-start,
.event-time-end{
  font-size: 12px;
}


.tt-grid{
        display: grid;
        grid-template-columns: 1fr 80px 1fr;
        grid-template-rows: repeat(36, 7px);
        position: absolute;
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
}

.timetable {
        height: auto;
        padding-top: 16vw;
        padding-bottom: 23vw;
    }

.tt-grid {
        position: relative;
        top: auto;
        margin-top: 30vw;
    }

.tt-areatitle-wrap{
        top: 28vw;
}

.tabwrap{
        height: 4vw;
        width: 50%;
        margin-top: 2vw;
}

.artist-tab{
    margin-top: 10vw;
}


.tab-button{
    font-size: 12px;
}

.tab-button.active{
    font-size: 15px;
}

.timeshaft-wrapper{
        position: relative;
        width: 100%;
        top: 32vw;
}

.timeshaft{
    width: 12%;
}

.section-title-jp{
    font-size: 30px;

}

.section-title-en{
    font-size: 15px;
}

.tt-title-wrap{
  font-size: 17px;
}
.timepoint{
    font-size: 13px;
}

.tt-shaft-finale-wrapper{
    left: 25%;
    top: 362px;
    width: 70px;
}


.event-card-wrapper{
        top: 32vw;
        left: 0;
        width: 50%;
}

.tt-title-wrap-finale{
        left: 22%;
        top: 31vw;

}

.event-card{
    width: 80%;
}

.hour-line{
    width: 45%;
}



/*--------------ttモーダル　pc版-----------------*/


.tt-modal-inner{
    position: fixed;
    background-color: rgba(7, 26, 59, 0.8);
    aspect-ratio: auto;
    width: 70%;
    height: auto;
    border: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modal-contents{
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        padding: 2vw;
        gap: 4vw;
}

.modal-left {
  text-align: center;
  justify-content: center;
  position: static;
  width: 100%;
  margin: 0;
  transform: none;
}

.modal-title{
  text-align: center;
}

.modal-event-name {
  font-size: 20px;
  margin-top: 1vw;
}

.modal-artist-name {
  font-size: 16px;
  margin-bottom: 3vw;
}

.modal-meta {
        gap: 4vw;
        font-size: 14px;
        width: 100%;
        margin-left: 3vw;
}



.modal-date1,.modal-date2,.modal-date3{
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}


/*
.modal-date1::before{
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-calender.svg");
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    width: 2vw;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    }
*/

.modal-time1,.modal-time2,.modal-time3{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

/*
.modal-time1::before{
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-clock.svg");
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    width: 2vw;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
}
*/


.modal-photo-wrapper {
        width: 60%;  
        margin: auto;
        margin-top: 2.5vw;
}

.modal-photo-wrapper::after{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/modal-photo-frame.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
    pointer-events: none;
}

.modal-photo {
    position: absolute;
    overflow: hidden;
    z-index: 1;
}

.modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/*-------右側------ */ 
.modal-right {
    position: static;
    width: 100%;
    margin: 0;
    margin-top: 3.5vw;
    transform: none;
}

.modal-info-block {
  margin-bottom: 5vw;
}

.modal-info-block-h3{
    position: relative;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 15px;
}

.modal-info-block-h3::before,.modal-info-block-h3::after{
    content: "";
    display: block;
    width: 30%;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.modal-info-block-h3::before{
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/indicator-line-left.svg");
    position: absolute;
    right: 7%;
    top: 25%;
}


.modal-info-block-h3::after{
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/indicator-line-right.svg");
    position: absolute;
    top: 31%;
    left: 7%;
}

.modal-info-block-p {
    position: relative;
    isolation: isolate;
    font-size: 14px;
    line-height: 1.8;
    width: 80%;
    margin: auto;
}

.modal-info-block-p::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(65, 101, 151, 0.7) 0%, rgba(65, 101, 151, 0.5) 20%, rgba(65, 101, 151, 0.3) 40%, transparent 75%);
    z-index: -1;
    pointer-events: none;
}


.modal-timetable-btn {
        padding: 0.8vw 3vw;
        right: 4vw;
}


.line-b,.line-a{
     position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 1px;
    background-color: #f6f0d8;
    border: none;

}
.line-a{
   transform: translate(-50%, -50%) rotate(45deg);
}

.line-b{
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close-btn {
    aspect-ratio: 1 / 1;
    width: 3vw;
    height: auto;
    border-radius: 50%;
    border: 0.1px solid rgb(247, 241, 218);
    background: #071a3b;
    color: #f6f0d8;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 208, 113, 0.25);
    z-index: 100;
    margin-bottom: -30.95px;
}

.tt-modal-inner::backdrop {
  background: rgba(0, 0, 0, 0.65);
}



/*-------------------------出演団体--------------------------*/
.artist-intro-res{
  display: block;
}
.artist-intro-sp{
  display: none;
}

.artist-notice{
  margin-top: 4vw;
}

/*------------出演団体　デザインそのもの pc用-------------*/
.artist{
    position: relative;
    width: 100%;
    height: auto;
    background: linear-gradient(to bottom, #071a3b 0%, #071a3b 50%, #37659b 100%);
    padding-bottom: 40vw;
    padding-top: 7vw;
}

.section-title-artist{
  top: 8vw;
}

.artist-cloud{
        position: absolute;
        width: 100%;
        height: auto;
        top: -16vw;
}

.artist-cloud1{
    position: absolute;
    width: 100%;
    top: -8%;
    left: -12%;
    z-index: 10;
}

.artist-cloud2{
    position: absolute;
    width: 36%;
    left: 69%;
    top: 5%;
    z-index: 5;
}


.tab-button2{
    cursor: pointer;/* カーソルを手の形にする指定 */
    flex: 1;/* 各子要素が横幅を均等に分け合う指定 */
    height: 55px;
    background-color: #071a3b;
    color: #f6f0d8;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    font-size: 12px;
    width: auto;
    padding: 4%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 0.1vw #fed287;
    box-shadow: 0 0 7px #fed287;
}

.tab-button2.active{
    background: radial-gradient(circle, #37659b 0%, #071a3b 100%);
    box-shadow: 0 0 10px #fed287;
    border-radius: 1vw;
    transform: scale(1.05);
    font-size: 15px;
}


.artist-h2{
        margin-top: -2vw;
        margin-bottom: 6vw;
        font-size: 20px;
}

.artist-h2::before{
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20vw;
    height: 2vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-h2-left.svg");

}

.artist-h2::after{
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20vw;
    height: 2vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-h2-right.svg")
}

.artist-tab-content{
    position: relative;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    top: 28%;



}

.artist-front{
        margin-top: 5vw;
        margin-bottom: 10vw;
}

.artist-auditorium{
  margin-top: -5vw;
}

.artist-intro-wrapper{
        margin-top: -3vw;
        margin-bottom: 3vw;
        align-items: flex-start;
}
  
.artist-intro1{

}

.artist-intro2
{
  margin-top: 4vw;
  position: relative;
}

.artist-intro3
{
position: relative;
}

.artist-intro4
{
  margin-top: 4vw;
  position: relative;
}

 /* 曲線の配置基準を統一 */
  .artist-intro {
        position: relative;
        width: 15vw;
  }

  /* 曲線の共通設定 */
  .artist-intro2::before,
  .artist-intro3::before,
  .artist-intro4::before,
  .artist-intro5::before {
    content: "";
    position: absolute;
    width: 20vw;
    height: 20vw;
    background-image: url("https://ikkyosai.com/visitor/57/topics/img/night/artist-front-line1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    /* いったん従来の位置指定をリセット */
    left: auto;
    top: auto;
  }

  .artist-intro2::before,
  .artist-intro4::before{
        right: 67%;
        top: 0;
        transform: translateY(-45%);
  }

  .artist-intro3::before,
  .artist-intro5::before {
        right: 67%;
        width: 21.5vw;
        top: -1%;
        transform: translateY(19%) rotate(110deg);
  }


.artist-intro-res{
  display: block;
}
.artist-intro-sp{
  display: none;
}

.artist-photo{
  width: 15vw;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fed287;
  box-shadow:
    0 0 12px rgba(254, 210, 135, 0.7),
    0 0 24px rgba(254, 210, 135, 0.25);
}

.artist-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

.artist-intro-text{
        font-size: 1vw;
        margin-top: 2vw;
        width: 104%;
        gap: 0.5vw;
}

.artist-event{
  font-size: 17px;
}

.artist-name{
  font-size: 12px;
  margin-top: 0;
}

.artist-indicator{
    width: 15vw;
}


/*-------pc　フッダー調整--------*/
footer{
    margin-top: -34vw;
}

.piece{
    margin-bottom: -0.5vw;
}

/*-------pc　fv scroll誘導--------*/
.scroll-animation-pc {
    display: block;
    top: 90%;
    left: 81%;
    position: absolute;
    animation: scroll-reveal 3s ease-in-out /*最初ゆっくり、中盤早く*/ infinite;
    animation-delay: 4s;
    animation-fill-mode: backwards;
    z-index: 100;
}

.scroll-animation-sp {
    display: none;
}

.poem-scroll-guide{
    color: #233657;
    font-size: 1.5vw;
}

.poem-scroll-arrow-pc{
    width: 1.5vw;
    display: block;
    height: auto;
    position: static;
}

/* -------------------- 装飾 pc-------------------- */
.fv-e1{
        position: absolute;
        top: 0%;
        left: 0%;
        height: 57%;
        z-index: 3;
}
.fv-e2{
        position: absolute;
        top: 0vh;
        left: 36%;
        height: 40%;
        z-index: 3;
}

.fv-e3{
        position: absolute;
        top: 2px;
        left: 50%;
        height: 20%;
        z-index: 3;
}

.fv-e4{
        position: absolute;
        top: 1%;
        left: 55%;
        height: 50%;
        z-index: 3;
}


}  /*@media*/


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

  .artist .title-wrapper {
    position: relative;
  }

  .section-title-artist {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding-top: 40px;
  }

  .artist-tab {
    top: auto;
    margin-top: 30px;
  }

  .artist-tab-content {
    top: auto;
    margin-top: 30px;
  }

}



/* ---------------------------アニメーション ---------------------------*/

/* ---------------fv-moon */
.fv-moon1 {
    animation: moon-reveal 3s ease-in-out 2.9s both;
}
.fv-moon-wrap::before {
    animation: moon-fade 3s ease-in-out 3s both;
}

@keyframes moon-reveal {
    0% {
        clip-path: inset(-80px -80px 120% -80px);
    }

    100% {
        clip-path: inset(-80px -80px -80px -80px);
    }
}

@keyframes moon-fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fv-poem::before{
        animation: moon-fade 2s ease-in-out 3s both;
}

/* ---------------fv-poem */
/* ポエムの各行 */
.poem-p > div {
    opacity: 0;
    animation: poem-reveal 2.0s ease-out both;
}

/* 表示タイミング */

.poem-p .line1 {
    animation-delay: 4.0s;
}

.poem-p .line2 {
    animation-delay: 5.0s;
}

.poem-p .line3 {
    animation-delay: 6.0s;
}

.poem-p .line4 {
    animation-delay: 7.0s;
}

.poem-p .line5 {
    animation-delay: 8.0s;
}

.poem-p .line6 {
    animation-delay: 9.5s;
}

/* 文字がふわっと現れる */
@keyframes poem-reveal {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------fv-cloud */
@keyframes cloud-in-left {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------------fv-cloud スマホ用動き */
/* 右から現れる雲 */
@keyframes cloud-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cloud-in-left-sp {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から現れる雲 */
@keyframes cloud-in-right-sp {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fv-cloud1{
    animation: cloud-in-left 2s ease-out 0.01s both;
}
.fv-cloud2 {
    animation: cloud-in-right 1.8s ease-out 0.01s both;
}

/* ---------------poem-cloud */

.poem-cloud {
    animation: cloud-in-left 1.8s ease-out 10s both;
}

/* ---------------about */

/* 初期状態 */
.about-fade {
    opacity: 0;
    transition: opacity 1.4s ease;
}

/* スクロール後 */
.about-fade.is-visible {
    opacity: 1;
}

/* 見出し */
.about-title.about-fade {
    transition-delay: 0s;
}

/* 説明文 */
.about-contents.about-fade,
.about-contents-sp.about-fade {
    transition-delay: 0.4s;
}




/* ---------------aboutの下のcloud */

/* 画面に入る前はアニメーションしない */
.about-cloud1,
.about-cloud2 {
    opacity: 0;
    animation: none;
}

/* 画面に入ったらアニメーション開始 */
.about-cloud.is-visible .about-cloud1 {
    animation: cloud-in-right 1.8s ease-out 0s both;
}

.about-cloud.is-visible .about-cloud2 {
    animation: cloud-in-left 1.8s ease-out 0s both;
}

.about.scroll-fade {
    position: relative;
    z-index: 0;
}


.page-inner-link.scroll-fade {
    position: relative;
    z-index: 0;
}
@media screen and (min-width: 1024px){
    .page-inner-link.scroll-fade{
            z-index: -1;
    }
}
.events.scroll-fade {
    position: relative;
    z-index: 12;
}
.timetable.scroll-fade {
    position: relative;
    z-index: 13;
}
.artist.scroll-fade {
    position: relative;
    z-index: 14;
}

.map.scroll-fade {
    position: relative;
    z-index: 15;
}


/* ---------------eventsのタイトルのとこのcloud */

/* 画面に入る前はアニメーションしない */
.events-cloud1,
.events-cloud2 {
    opacity: 0;
    animation: none;
}

/* 画面に入ったらアニメーション開始 */
.events-cloud.is-visible .events-cloud1 {
    animation: cloud-in-right 1.8s ease-out 0s both;
}

.events-cloud.is-visible .events-cloud2 {
    animation: cloud-in-left 1.8s ease-out 0s both;
}


/* ---------------timetableのタイトルのとこのcloud */

/* 画面に入る前はアニメーションしない */
.tt-cloud1,
.tt-cloud2 {
    opacity: 0;
    animation: none;
}

/* 画面に入ったらアニメーション開始 */
.tt-cloud.is-visible .tt-cloud2 {
    animation: cloud-in-right 1.8s ease-out 0s both;
}

.tt-cloud.is-visible .tt-cloud1 {
    animation: cloud-in-left 1.8s ease-out 0s both;
}

/* ---------------artistのタイトルのとこのcloud */

/* 画面に入る前はアニメーションしない */
.artist-cloud1,
.artist-cloud2 {
    opacity: 0;
    animation: none;
}

/* 画面に入ったらアニメーション開始 */
.artist-cloud.is-visible .artist-cloud2 {
    animation: cloud-in-right 1.8s ease-out 0s both;
}

.artist-cloud.is-visible .artist-cloud1 {
    animation: cloud-in-left 1.8s ease-out 0s both;
}

/* ---------------artistのタイトルのとこのcloud */

/* スマホ用の雲：初期状態 */
.about-cloud-sp1,
.about-cloud-sp2 {
    opacity: 0;
    animation: none;
}

/* スクロール後：右から出現 */
.about-cloud-sp.is-visible .about-cloud-sp1 {
    animation: cloud-in-right-sp 1.5s ease-out both;
}

/* スクロール後：左から出現 */
.about-cloud-sp.is-visible .about-cloud-sp2 {
    animation: cloud-in-left-sp 1.5s ease-out both;
}




/* ---------------ページ見えてから表示 */
/* 画面に入る前 */
.scroll-fade {
    opacity: 0;
    transform: translateY(0px);
    transition:
        opacity 1.5s ease,
        transform 1.5s ease;
}

/* 画面に入った後 */
.scroll-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------アニメーション PC---------------------------*/

@media screen and (min-width: 1024px) {

.fv-cloud1{
    animation: cloud-in-left 2s ease-out 0s both;
}
.fv-cloud2 {
    animation: cloud-in-left 1.8s ease-out 0s both;
}

.fv-cloud3 {
    animation: cloud-in-right  1.8s ease-out 0s both;
} 
.fv-cloud4 {
    animation: cloud-in-right 2s ease-out 0s both;
}



/* ---------------fv-poem */
/* ポエムの各行 */
.poem-p > div {
    opacity: 0;
    animation: poem-reveal 0.9s ease-out both;
}

/* 表示タイミング */
.poem-p .line1 {
    animation-delay: 4.0s;
}

.poem-p .line2 {
    animation-delay: 5.0s;
}

.poem-p .line3 {
    animation-delay: 6.0s;
}

.poem-p .line4 {
    animation-delay: 7.0s;
}

.poem-p .line5 {
    animation-delay: 8.0s;
}

.poem-p .line6 {
    animation-delay: 9.5s;
}

/* 文字がふわっと現れる */
@keyframes poem-reveal {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

}

html {
    scroll-behavior: auto !important;
}

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

    #slider-modal-3 {
        box-sizing: border-box;
        width: 92vw;
        max-width: 92vw;
        height: auto;
        max-height: 90dvh;
        aspect-ratio: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #slider-modal-3 .slider-modal-contents-3 {
        height: auto;
    }

    #slider-modal-3 .slider-modal-top-3 {
        height: auto;
    }

}


/* ----------------------------修正用指定--------------------------- */

/* 雲画像の長押し保存させない指定 */
.fv-cloud img,
.poem-cloud,
.about-cloud img,
.about-cloud-sp img,
.events-cloud img,
.tt-cloud img,
.artist-cloud img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

    #pagetop.is-show {
        bottom: 10px;
    }

    #pagetop img{
        width: 80px;
 
    }

@media screen and (min-width: 1024px) {
    #pagetop.is-show {
        bottom: 50px;
    }
    #pagetop {
        right: 50px;
    }
}


@media screen and (min-width: 1024px) {

  /* FINALEのPC版だけに適用 */
  #finale-front-pc > .artist-intro-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0vw;
    width: 84%;
    row-gap: 5vw;
    justify-items: center;
    align-items: start;
  }

  /* 団体紹介の共通設定 */
  #finale-front-pc .artist-intro {
    width: 100%;
    min-width: 0;/* 内容の長さによってwidthが大きくなりすぎるのを防ぐが、折り返しの指定でもない */
  }

  /* 上段：3団体 */
  #finale-front-pc .artist-intro:nth-child(1) {
    grid-column: 1 / span 2;
  }

  #finale-front-pc .artist-intro:nth-child(2) {
    grid-column: 3 / span 2;
  }

  #finale-front-pc .artist-intro:nth-child(3) {
    grid-column: 5 / span 2;
  }

  /* 下段：2団体を中央に配置 */
  #finale-front-pc .artist-intro:nth-child(4) {
    grid-column: 2 / span 2;
  }

  #finale-front-pc .artist-intro:nth-child(5) {
    grid-column: 4 / span 2;
  }

  /* 写真サイズ */
  #finale-front-pc .artist-photo {
    width: 15vw;
    max-width: 100%;
    margin: 0 auto;
  }

  /* 紹介文 */
  #finale-front-pc .artist-intro-text {
    width: 69%;
    margin: auto;
    margin-top: 2vw;
  }

 #finale-front-pc .artist-intro4::before {
  display: none;
  }
}
@media screen and (min-width: 1024px) 
{
.contents-wrapper{
width: 80%;
margin: auto;
}
}


/* ------------------------タイムテーブル修正-------------- */
@media screen and (min-width: 1024px) {
/* STEP 1：時間軸をGridの中央列に配置 */
.tt-grid > .timeshaft {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    width: 100%;
    height: 100%;
    top: auto;
    left: auto;
    transform: none;
    translate: none;
    aspect-ratio: auto;
}


/* STEP 2：時刻をGridで配置する */

.timepoint {
    position: relative;
    display: grid;
    grid-template-rows: repeat(36, minmax(0, 1fr));

    width: 100%;
    height: 100%;

    left: auto;
    transform: none;
}


#line9.timename,#line10.timename{
    position: absolute;
    transform: translate(-50%, -50%);
}


/* ------------------------フィナーレの構造修正------------------ */




#finale .tt-shaft-finale {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 4.6px;

}

#finale .tt-shaft-finale-wrapper #line9,
#finale .tt-shaft-finale-wrapper #line10 {
    position: absolute;
    left: auto;
    right: 12px;
    width: max-content;
    margin: 0;
}

/* 16:30 */
#finale .tt-shaft-finale-wrapper #line9 {
    top: 0;
    bottom: auto;
    transform: translateY(-50%);
}

/* 18:00 */
#finale .tt-shaft-finale-wrapper #line10 {
    top: auto;
    bottom: 0;
    transform: translateY(50%);
}
}



/* timetable構造修正 */
@media screen and (min-width: 1024px) {
.tt-areatitle-wrap {
    position: relative;
    top: auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);

    width: 70%;
    margin: 5vw auto 1.5vw;
    align-items: center;
}

.tt-title-wrap {
    position: static;
    width: auto;
}

.tt-title-wrap:first-child {
    grid-column: 1;
}

.tt-title-wrap:nth-child(2) {
    grid-column: 3;
}

.tt-title-front,
.tt-title-auditorium {
    position: static;
    justify-content: center;
    margin-top: 3vw;
}

.tt-title-front::before,
 .tt-title-auditorium::before {
    width: clamp(20px, 3vw, 36px);
}

/* 上側の余白を会場名側に移したので解除 */
.tt-grid {
    margin-top: 0;
}
}


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

    /* 初夜祭・中夜祭の左右余白を解除 */
    #first,
    #second {
        padding-left: 0;
        padding-right: 0;
    }

    /* 会場名をイベントカードと同じ列構成にする */
    .tt-areatitle-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
        width: 80%;
        margin: 50px auto 0;
        left: auto;
        transform: none;
        gap: 0;
    }

    .tt-title-wrap {
        position: static;
        width: 100%;
        min-width: 0;
        font-size: 15px;
        margin-top: 30px;
    }

    /* 左側の会場名 */
    .tt-title-wrap:first-child {
        grid-column: 1;
    }

    /* 右側の会場名 */
    .tt-title-wrap:nth-child(2) {
        grid-column: 3;
    }

    .tt-title-front,
    .tt-title-auditorium {
        position: static;
        margin-top: 0;
        justify-content: center;
        white-space: nowrap;
    }

    .tt-title-front::before,
    .tt-title-auditorium::before {
        width: 30px;
    }
}



/* 各時刻をGridの行に配置 */
 #line1,#line5 {
    grid-row: 1;
}

#line2 ,#line6{
    grid-row: 13;
}

#line3 ,#line7{
    grid-row: 25;
}

#line4 ,#line8{
    grid-row: 36;
    align-self: end;
}

@media screen and (min-width: 1024px) {
#line4 ,#line8{
    transform: translateY(50%);
}
}


/* FINALE全体の2列レイアウト */
#finale .finale-layout {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 24px;
    width: 70%;
    margin: 0 auto;
    align-items: stretch;/* 子要素をGridの行の高さに合わせて伸ばす */
}


/* 左列：時間軸 */
#finale .tt-shaft-finale-wrapper {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 0;
}

/* 右列：企画カード */
#finale .event-card-wrapper {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0;
}

/* 時刻表示の共通設定 */
.timename {
    position: static;
    margin: 0;
   color: #fed287;
    justify-self: center;
    align-self: start;

    transform: translateY(-50%);
    white-space: nowrap;
    row-gap: 0;
}

/* 横線の共通設定 */
.timepoint-line .hour-line {
    position: static;
    width: 100%;
    height: 0;
    align-self: start;
    justify-self: center;
}


/* 横線をtt-gridの直接のGridアイテムとして扱う */
.timepoint-line {
    display: contents;
    /* ↑hour-lineの親であるtimepoint-lineにつけることによって、レイアウト用の箱が無くなり、hour-lineがtt-gridのgridアイテムとして扱われる。 */
    position: static;
}

/* 左側の横線 */
.timepoint-line .left-line {
    grid-column: 1;
}

/* 右側の横線 */
.timepoint-line .right-line {
    grid-column: 3;
}

/* 時刻ごとの行 */
.timepoint-line .hour-17 {
    grid-row: 1;
}

.timepoint-line .hour-18 {
    grid-row: 13;
}

.timepoint-line .hour-19 {
    grid-row: 25;
}
.timepoint-line .hour-20 {
    grid-row: 36;
    align-self: end;
}

@media screen and (max-width: 1023px) {
#line4 ,#line8{
    grid-row: 38;
    align-self: end;
}

.timepoint-line .hour-line {
    width: 130%;
    justify-self: center;
}
}



@media screen and (min-width: 1024px) {
#finale .event-card-wrapper {
    width: 90%;
}
}

@media screen and (max-width: 1023px) {
    #finale .finale-layout {
    grid-template-columns: 40px minmax(0, 1fr);
    margin: 20px 0 auto 40px;
    }

    .tt-cloud{
        top: -29vw;
    }
}


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

    /* 左右の列を同じ高さにする */
    #finale .finale-layout {
        align-items: stretch;
    }

    /* 時間軸の親要素 */
    #finale .tt-shaft-finale-wrapper {
        position: relative;
        top: auto;
        left: auto;
        height: 100%;
        min-height: 0;
        align-self: stretch;
    }

    /* 時間軸の画像 */
    #finale .tt-shaft-finale {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
    }

    /* 時刻の位置 */
    #finale .tt-shaft-finale-wrapper #line9 {
        position: absolute;
        top: 0;

        left: -22px;
        transform: translateY(-50%);
    }

    #finale .tt-shaft-finale-wrapper #line10 {
        position: absolute;
        top: auto;
        bottom: 0;
        left: auto;
        right: 12px;
        transform: translateY(50%);
    }
}

/* -モーダルが開かれている間のスクロールを阻止-*/
html:has(dialog:modal) {
    overflow: hidden;
}

@media screen and (min-width: 1024px) {
    .tt-modal-inner-pc .modal-right {
        height: auto;
        max-height: none;
        overflow: visible;
    }

        .tt-modal-inner-pc {
        height: max-content;
        max-height: calc(100dvh - 10vw);
        overflow-y: auto;
    }
}

    .tt-modal-inner-sp .modal-right {
        height: auto;
        max-height: none;
        overflow: visible;
    }

        .tt-modal-inner-sp {
        height: max-content;
        max-height: calc(100dvh - 10vw);
        overflow-y: auto;
    }

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

  .artist-intro-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 7vw;
    align-items: center;
  }

  .artist-photo {
    width: 100%;
    min-width: 0;
  }

  .artist-intro-text {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .artist-indicator {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

}

.map-btn{
    text-align: center;
    margin: 150px 0 30px 0;
    position: relative;
    display: flex;
    justify-content: center;
}

.map-btn a{
    width: fit-content;
    font-family: "Yu Mincho", "游明朝", serif;
    background: radial-gradient(circle 80px at center, #37659b 0%, #0b1a39 70%);
    align-self: flex-end;
    padding: 15px 40px;
    color: #f6f0d8;
    border: 0.1px solid rgb(247, 241, 218);
    box-shadow: 0 0 10px rgb(247, 241, 218);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2vw;
}


.modal-photo-preload {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.events::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, transparent 0%, #071a3b 50%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

.anchor.scroll-fade,
.anchor.scroll-fade.is-visible {
    transform: translateX(-50%);
}

/*----------------tt　背景にだけアニメーションがかかってないように見せる----------------*/
/* タイムテーブルの背景は常に表示 */
.timetable.scroll-fade {
    opacity: 1;
}

/* 中身だけ最初は透明にする */
.timetable .title-wrapper,
.timetable .tabwrap,
.timetable .area-container {
    opacity: 0;
    transition: opacity 1.5s ease;
}

/* 画面内に入ったら中身を表示 */
.timetable.scroll-fade.is-visible .title-wrapper,
.timetable.scroll-fade.is-visible .tabwrap,
.timetable.scroll-fade.is-visible .area-container {
    opacity: 1;
}

/*----------------artist　背景にだけアニメーションがかかってないように見せる----------------*/
/* 出演団体の背景は常に表示 */
.artist.scroll-fade {
    opacity: 1;
}

/* コンテンツは最初は透明 */
.artist .title-wrapper,
.artist .tabwrap,
.artist .notice,
.artist .artist-tab-content,
.artist .map-btn {
    opacity: 0;
    transition: opacity 1.5s ease;
}

/* 画面内に入ったらコンテンツを表示 */
.artist.scroll-fade.is-visible .title-wrapper,
.artist.scroll-fade.is-visible .tabwrap,
.artist.scroll-fade.is-visible .notice,
.artist.scroll-fade.is-visible .artist-tab-content,
.artist.scroll-fade.is-visible .map-btn {
    opacity: 1;
}

.timetable .title-wrapper {
    position: relative;
    z-index: 20;
}

.artist .title-wrapper {
    position: relative;
    z-index: 20;
}


@media screen and (max-width: 1023px){
.modal-info-block-p {
    white-space: pre-line;
}
}

.modal-tt-btn-wrapper{
    position: relative;
    margin: 3px 0 100px 0;
}

.slider-notice{
    margin-top: 20px;
    margin-bottom: 20px;
}


.tt-modal-close-btn{
    margin-bottom: -50px;

}

.slider-modal-video-waitting{
    color: #f6f0d8;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    font-size: 10px;
    margin: auto;
    width: fit-content;
    margin-top: 30px;
}

@media screen and (min-width: 1024px){
    .slider-modal-video-waitting {
        font-size: 10px;
        margin-top: 16vw;
        padding: 60px;
        border: solid 1px;
        text-align: center;
    }
}

.title-syu::before{
 transform-origin: center center;
 animation: star-grow 1.2s ease-out 4.4s both;
}

@keyframes star-grow {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media screen and (max-width: 1023px) {
    .title-syu::after {
        animation: moon-reveal 3s ease-in-out 4.4s both;
    }
}