@charset "utf-8";
body {
    background-image: url('../img/dance_back.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
/* =========================
音符
============================*/
.onpu {
    position: fixed;
    z-index: -1;
    width: 30px;      /* 少し小さめにすると12個あってもうるさくないです */
    opacity: 0.5;
    pointer-events: none;
    /* 共通のアニメーション（ふわふわ） */
    animation: fuwafuwa 4s ease-in-out infinite;
}

@keyframes fuwafuwa {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); } /* 上に動きつつ少し傾く */
}

/* 左側グループ */
.onpu:nth-of-type(1)  { top: 10%; left: 5%;  animation-delay: 0s; }
.onpu:nth-of-type(2)  { top: 30%; left: 12%; animation-delay: 1s; width: 30px; }
.onpu:nth-of-type(3)  { top: 50%; left: 3%;  animation-delay: 2s; }
.onpu:nth-of-type(4)  { top: 75%; left: 15%; animation-delay: 0.5s; width: 50px; }
.onpu:nth-of-type(5)  { top: 90%; left: 6%;  animation-delay: 1.5s; }
.onpu:nth-of-type(6)  { top: 20%; left: 20%; animation-delay: 2.5s; }

/* 右側グループ */
.onpu:nth-of-type(7)  { top: 15%; right: 5%;  animation-delay: 0.2s; }
.onpu:nth-of-type(8)  { top: 35%; right: 15%; animation-delay: 1.2s; width: 55px; }
.onpu:nth-of-type(9)  { top: 55%; right: 8%;  animation-delay: 2.2s; }
.onpu:nth-of-type(10) { top: 70%; right: 20%; animation-delay: 0.7s; width: 35px; }
.onpu:nth-of-type(11) { top: 85%; right: 4%;  animation-delay: 1.7s; }
.onpu:nth-of-type(12) { top: 45%; right: 25%; animation-delay: 2.7s; }
/* =========================
kv
============================*/
.kv {
    max-width: 1025px;
    margin: 0 auto;
    padding: 100px 20px;
}

/* SP 767px */
@media screen and (max-width: 767px) {
    .kv {
        padding: 50px 16px;
    }
}

/* =========================
entry
============================*/
.entry {
    max-width: 1025px;
    margin: 0 auto;
    padding: 0 20px 100px 20px;
}

.entry_img {
    max-width: 649px;
    display: block;
    margin: 0 auto;
    padding-bottom: 49px;
}

.entry p {
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
}

.entry_txtSp {
    display: none;
}

/* SP 767px */
@media screen and (max-width: 767px) {
    .entry {
        padding: 0 16px 25px 16px;
    }

    .entry_img {
        padding-bottom: 25px;
    }

    .entry p {
        font-size: 2.1rem;
    }

    .entry_txtSp {
        display: block;
    }

    .entry_txt {
        display: none;
    }
}
/* =========================
about
============================*/
.about {
    max-width: 1025px;
    margin: 0 auto;
    padding: 0 20px 100px 20px;
}

.txt_PC,.txt_SP {
    text-align: center;
    line-height: 2.2;
}

.txt_SP {
    display: none;
}

.about_img {
    max-width: 544px;
    margin-left: auto;  
    margin-right: 0;   
}

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

/* SP 767px */
@media screen and (max-width: 767px) {
.about {
    padding: 0 16px 50px 16px;
}

    .txt_PC {
        display: none;
    }

    .txt_SP {
        display: block;
    }
}
/* =========================
detail
============================*/
.ditail {
    max-width: 985px;
    width: 92%;
    margin: 0 auto 100px auto;
    background-color: #FFFFFF;
    border-radius: 20px;
    text-align: center; 
    padding: 80px 20px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.ditail_inner {
    display: inline-block;
    text-align: left;
}

.date {
    margin-bottom: 40px;
}

.titlle {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.txt li {
    list-style: none;
    line-height: 1.8;
    padding-left: 0;
}


/* =========================
but
============================*/
.but {
    padding-bottom: 100px;
}

.but a {
    display: block;
    background: linear-gradient(to right, #83D2FF, #FF85D8);
    background-size: 200% auto;  
    color: #FFFFFF;
    text-align: center;
    max-width: 352px;
    height: 85px;
    line-height: 75px;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
    border-radius: 50px;
    border: solid #FFFFFF 5px;
    margin: 0 auto;
    transition: 0.9s;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}


.but a:hover {
    color: #fff;
  background-position: right center;
}


.ditail_box {
    position: relative; 
    max-width: 1025px;
    margin: 0 auto;
    padding-bottom: 200px;
    width: 90%; 
}

/* 2. ダンサー共通 */
.dancer {
    position: absolute;
    bottom: 150px;
    z-index: 10;
    pointer-events: none;
    width: 30vw;
    max-width: 500px;  
    min-width: 100px;   
    
    transition: all 0.2s ease-out; 
}

.dancer-l {
    left: -25%; 
}

.dancer-r {
    right: -25%;
}

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

/* 画面幅が1600px以下の時 */
@media screen and (max-width: 1600px) {
    .dancer-l { left: -15%; }
    .dancer-r { right: -15%; }
}

/* 画面幅が1300px以下の時 */
@media screen and (max-width: 1300px) {
    .dancer {
        width: 25vw; 
    }
    .dancer-l { left: -5%; }
    .dancer-r { right: -5%; }
}

/* 1025px以下*/
@media screen and (max-width: 1025px) {
    .dancer {
        width: 30vw;
        bottom: 100px; 
    }
    /* 画面端にピッタリくっつけて見切れを防ぐ */
    .dancer-l { left: 0; }
    .dancer-r { right: 0; }
    
    .ditail_box {
        width: 95%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* SP 767px */
@media screen and (max-width: 767px) {
    .ditail {
        width: 100%;
        margin: 0 auto 50px auto;
        padding: 40px 16px;

    }

    .ditail_box {
        width: 95%;
        padding-left: 0px;
        padding-right: 0px;
    }
}