@charset "UTF-8";

/* ====================================
   Section Wrapper (Mobile First)
==================================== */
.section-wrapper {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    /* background-color: #fff; */
    /* overflow: hidden; */
}

.section-wrapper > .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 768px) {
    .section-wrapper {
        max-width: 760px;
    }

    .section-wrapper > .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ====================================
   サイドスクロール画像
==================================== */
.side-scroll {
    position: fixed;
    top: 0;
    width: calc((100vw - 760px) / 2);
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.side-scroll--left {
    left: 0;
}

.side-scroll--right {
    right: 0;
}

.side-scroll-inner {
    display: flex;
    flex-direction: column;
    animation: sideScrollDown 20s linear infinite;
}

.side-scroll--right .side-scroll-inner {
    animation: sideScrollUp 20s linear infinite;
}

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

@keyframes sideScrollDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes sideScrollUp {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* SP: サイドスクロール非表示 */
@media (max-width: 767px) {
    .side-scroll {
        display: none;
    }
}

/* section-wrapper内のheaderをwrapper幅に合わせる */
.section-wrapper .header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100vw;
}

@media (min-width: 768px) {
    .section-wrapper .header {
        max-width: 760px;
    }
}

/* ====================================
   Hero
==================================== */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
}

/* 背景 */
.hero-bg {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    background: url('../img/hero_visual.png') no-repeat center center;
    background-size: cover;
    z-index: -2;
    animation: heroBlurIn 1.5s ease-out forwards;
}

/* ヒーロー背景ブラーアニメーション */
@keyframes heroBlurIn {
    0% {
        filter: blur(20px);
    }
    100% {
        filter: blur(0);
    }
}

@media (min-width: 768px) {
    .hero-bg {
        max-width: 760px;
    }
}

.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
}

.hero-bg.is-hidden::after {
    background: rgba(0, 0, 0, 1);
}

/* 左側縦書きテキスト */
.hero-text-left {
    grid-column: 1;
    writing-mode: vertical-rl;
    font-size: 20px;
    color: #ffe600;
    letter-spacing: 0.1em;
    line-height: 2;
    justify-self: center;
    height: 21em;
    margin-top: 10vh;
    opacity: 0;
    animation: heroTextBlurIn 0.8s ease-out 1.6s forwards;
}

/* 右側縦書きテキスト */
.hero-text-right {
    grid-column: 3;
    writing-mode: vertical-rl;
    font-size: 20px;
    color: #ffe600;
    letter-spacing: 0.1em;
    line-height: 2;
    justify-self: center;
    height: 21em;
    margin-top: 10vh;
    opacity: 0;
    animation: heroTextBlurIn 0.8s ease-out 1.8s forwards;
}

/* 左右テキスト ブラーから登場 */
@keyframes heroTextBlurIn {
    0% {
        opacity: 0;
        filter: blur(15px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* 中央コンテンツ */
.hero-center {
    grid-column: 2;
    text-align: center;
    z-index: 1;
    margin-bottom: 13vh;
}
.hero-logo{
    transform: scale(1.4);
    opacity: 0;
    animation: heroLogoIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

/* ヒーローロゴ ドーンと登場 */
@keyframes heroLogoIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    70% {
        opacity: 1;
        transform: scale(1.7);
    }
    100% {
        opacity: 1;
        transform: scale(1.4);
    }
}
.hero-logo img {
    max-width: 400px;
    width: 80%;
    height: auto;
}

.hero-date {
    margin-top: 20px;
    color: #fff;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    animation: heroFadeIn 0.6s ease-out 1s forwards;
}

/* ヒーロー日付・会場フェードイン */
@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-date-year {
    font-size: 24px;
    color: #d4af37;
}

.hero-date-day {
    font-size: 64px;
    font-weight: bold;
    color: #d4af37;
    line-height: 1;
}

.hero-date-week {
    font-size: 20px;
    color: #d4af37;
}

.hero-venue {
    margin-top: 0;
    padding: 5px 30px;
    background: #ffe600;
    color: #232323;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    border-radius: 30px;
    opacity: 0;
    animation: heroFadeIn 0.6s ease-out 1.2s forwards;
}

/* SP対応 */
@media (max-width: 768px) {
    .hero-text-left,
    .hero-text-right {
        font-size: 15px;
    }
    .hero {
        position: relative;
        height: 100vh;
        overflow: hidden;
        display: grid;
        grid-template-columns: 6em 1fr 6em;
        align-items: center;
    }
}

/* ====================================
   ONE DANCE セクション
==================================== */
.onedance {
    background: #f4dd26;
    padding: 60px 20px;
    position: relative;
}

/* 上部のドリップ装飾 */
.onedance-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_white.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}

.onedance-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px 15px;
    margin: 50px;
    position: relative;
    z-index: 1;
}

.onedance-title {
    width: 100%;
    margin-bottom: 0;
}

.onedance-title img {
    width: 100%;
    height: auto;
}

.onedance-content {
    flex: 1;
}

.onedance-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.onedance-text {
    font-size: 14px;
    line-height: 1.8;
    color: #232323;
    text-align:justify;
}

.onedance-logo {
    flex-shrink: 0;
    width: 270px;
    position: relative;
}

.onedance-logo > img:first-child {
    width: 90%;
    height: auto;
    position: relative;
    z-index: 2;
}

/* インクスプラッシュ画像 */
.onedance-splash {
    position: absolute;
    top: 10px;
    right: -40px;
    width: 130px;
    height: auto;
    z-index: 1;
    transform: scale(0) rotate(-15deg);
}

/* パシュッとインクが飛び散るアニメーション */
@keyframes inkSplash {
    0% {
        transform: scale(0) rotate(-15deg);
    }
    70% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.onedance-splash.is-animated {
    animation: inkSplash 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ====================================
   ダンサー紹介セクション
==================================== */
.dancers {
    background: #fff;
    padding: 60px 20px;
    position: relative;
}

/* 上部のドリップ装飾 */
.dancers-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_yellow.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}

/* ダンサー紹介 */
.onedance-dancers {
    background: #232323;
    padding: 45px 40px 30px;
    border-radius: 0;
    position: relative;
    z-index: 1;
    border-radius: 8px;
    margin: -130px 20px auto;
}

.onedance-dancers-title {
    font-size: 19px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}

.onedance-dancers-list {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.onedance-dancer {
    text-align: center;
    flex: 1;
    max-width: 200px;
}

.onedance-dancer-img {
    margin-bottom: 15px;
}

.onedance-dancer-img img {
    width: 100%;
    height: auto;
}

.onedance-dancer-name {
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    margin-bottom: 5px;
}

.onedance-dancer-team {
    font-size: 16px;
    color: #fff;
}

/* SP対応 */
@media (max-width: 768px) {
    .onedance-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }

    .onedance-inner {
        flex-direction: column;
    }

    .onedance-logo {
        width: 150px;
        align-self: flex-end;
    }

    .onedance-title {
        font-size: 24px;
    }

    .dancers-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }

    .onedance-dancers-list {
        flex-direction: column;
        align-items: center;
    }

    .onedance-dancer {
        max-width: 250px;
    }
}

/* ====================================
   シンクロステージセクション
==================================== */
.synchro-stage {
    background: #f4dd26;
    padding: 60px 20px 40px;
    text-align: center;
    position: relative;
}

/* 上部のドリップ装飾 */
.synchro-stage-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_white.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}

.synchro-stage-balloon {
    display: inline-block;
    background: #c85078;
    padding: 15px 30px;
    border-radius: 30px;
    margin-bottom: 30px;
    position: relative;
}


.synchro-stage-balloon p {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

.synchro-stage-subtitle {
    font-size: 18px;
    font-style: italic;
    color: #333;
    margin-bottom: 10px;
}

.synchro-stage-title {
    font-size: 42px;
    font-weight: 900;
    color: #333;
    margin-bottom: 10px;
}

.synchro-stage-with {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

.synchro-stage-text {
    font-size: 15px;
    line-height: 1.8;
    color: #232323;
    text-align: left;
    margin: 20px 50px;
    z-index: 2;
    position: relative;
}
.synchro-title {
    width: 400px;
    margin: 10px auto 30px;
    position: relative;
    z-index: 1;
}

.synchro-title img:first-child {
    z-index: 1;
    position: relative;
}

/* スプラッシュ画像 */
.synchro-splash {
    position: absolute;
    top: 0;
    left: -80px;
    width: 140px;
    height: auto;
    z-index: 0;
    transform: scale(0) rotate(-15deg);
}

.synchro-splash.is-animated {
    animation: inkSplash 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* カード */
.synchro-stage-card {
    background: #232323;
    padding: 55px 40px 40px;
    position: relative;
    z-index: 1;
    border-radius: 8px;
    margin: auto 20px;
}

.synchro-stage-card-inner {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.synchro-stage-card-content {
    flex: 1;
    text-align: left;
}

.synchro-stage-card-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 15px;
}

.synchro-stage-card-header-text {
    text-align: left;
}

.synchro-stage-card-header-logo img {
    width: 75px;
    height: auto;
}

.synchro-stage-card-ruby {
    font-size: 14px;
    color: #ffe500;
    margin-bottom: -5px;
}

.synchro-stage-card-name {
    font-size: 18px;
    font-weight: bold;
    color: #ffe500;
    margin-bottom: 0;
}

.synchro-stage-card-league {
    font-size: 15px;
    color: #ffe500;
    margin-bottom: 0;
    margin-top: -5px;
    padding-top: 0;
}

.synchro-stage-card-text {
    font-size: 15px;
    line-height: 1.8;
    color: #ffe500;
}

.synchro-stage-card-media {
    flex-shrink: 0;
    width: 51%;
}

.synchro-stage-card-logo {
    width: 120px;
    height: auto;
    margin-bottom: 15px;
}

.synchro-stage-card-photo {
    width: 100%;
    height: auto;
}

.synchro-stage-card-btn {
    text-align: center;
}

.synchro-stage-card-btn .btn {
    display: inline-block;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 15px 40px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 10px;
    font-size: 12px;
}

.synchro-stage-card-btn .btn:hover {
    background: #fff;
    color: #222;
}

/* SP対応 */
@media (max-width: 768px) {
    .synchro-stage-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }

    .synchro-stage-title {
        font-size: 28px;
    }

    .synchro-stage-card-inner {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .synchro-stage-card-media {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
    }

    .synchro-stage-card-photo {
        max-width: 100%;
    }
    .synchro-stage-card-inner {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}
}

/* ====================================
   フローセクション
==================================== */
.flow {
    background: #fff;
    padding: 60px 20px 80px;
    text-align: center;
    position: relative;
}

/* 上部のドリップ装飾 */
.flow-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_yellow.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}

.flow_header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
    margin: 0 40px 20px;
    position: relative;
    z-index: 1;
}

.flow_header .flow-title {
    text-align: center;
    color: #232323;
    font-size: 23px;
}
.flow_header .flow-title span{
    display: block;
    font-size: 15px;
}

.flow_header .flow-sprash {
    justify-self: end;
}

.flow_header .flow-sprash img {
    width: 100%;
    height: auto;
    transform: scale(0) rotate(-15deg);
}

.flow_header .flow-sprash.is-animated img {
    animation: inkSplash 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.flow-logo {
    width: 150px;
    height: auto;
}

.flow-line-btn {
    display: inline-block;
    background: #06c755;
    color: #fff;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    transition: opacity 0.3s ease;
}

.flow-line-btn:hover {
    opacity: 0.8;
    color: #fff;
}

.flow-title {
    font-size: 24px;
    font-weight: 900;
    /* color: #333; */
    line-height: 1.4;
}

/* フローカード */
.flow-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: center;
}

.flow-card {
    background: #ccc;
    border-radius: 8px;
    padding: 50px 40px 10px;
    text-align: center;
    position: relative;
    margin: 0 10px;

    max-width: 300px;
}
.flow-card::after {
    display: block;
    content: '';
    position: absolute;
    right: -35px;
    top: 30%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 10;
}
.flow-card.card01::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23d29614' d='M20.21.15c-.32.15-1.08.65-1.08,1.99v9.65c0,.37-.32.69-.69.69H2.99c-1.65,0-2.99,1.34-2.99,2.98v19.29c0,1.65,1.34,2.99,2.99,2.99h15.46c.37,0,.69.32.69.69v9.41c0,1.34.75,1.84,1.08,1.99.32.15,1.19.41,2.22-.45l26.58-22.21c.63-.53.99-1.28,1-2.06h0c0-.78-.36-1.54-.99-2.06L22.43.62c-1.03-.87-1.89-.61-2.22-.46Z'/%3E%3C/svg%3E");
}
.flow-card.card02::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23c85078' d='M20.21.15c-.32.15-1.08.65-1.08,1.99v9.65c0,.37-.32.69-.69.69H2.99c-1.65,0-2.99,1.34-2.99,2.98v19.29c0,1.65,1.34,2.99,2.99,2.99h15.46c.37,0,.69.32.69.69v9.41c0,1.34.75,1.84,1.08,1.99.32.15,1.19.41,2.22-.45l26.58-22.21c.63-.53.99-1.28,1-2.06h0c0-.78-.36-1.54-.99-2.06L22.43.62c-1.03-.87-1.89-.61-2.22-.46Z'/%3E%3C/svg%3E");
}
.flow-card.card03::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%235a8c78' d='M20.21.15c-.32.15-1.08.65-1.08,1.99v9.65c0,.37-.32.69-.69.69H2.99c-1.65,0-2.99,1.34-2.99,2.98v19.29c0,1.65,1.34,2.99,2.99,2.99h15.46c.37,0,.69.32.69.69v9.41c0,1.34.75,1.84,1.08,1.99.32.15,1.19.41,2.22-.45l26.58-22.21c.63-.53.99-1.28,1-2.06h0c0-.78-.36-1.54-.99-2.06L22.43.62c-1.03-.87-1.89-.61-2.22-.46Z'/%3E%3C/svg%3E");
}
.flow-card.card04::after {
    display: none;
}
.flow-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
}
.flow-card-label {
    font-size: 12px;
    font-weight: bold;
    color: #999;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    padding: 2px 15px 3px;
    border-radius: 20px;
    display: inline;
}
.flow-card-title {
    font-size: 18px;
    font-weight: 500;
    color: #232323;
    margin: 30px 0;
    line-height: 1.4;
    border-bottom: 1px dotted #919191;
    padding-bottom: 20px;
}
.flow-card-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    text-align: left;
    border-bottom: 1px dotted #919191;
    padding-bottom: 30px;
    margin-bottom: 25px;
    text-align: center;
}
.flow-card-text > p{
    margin-bottom: 0;
}
.time-wrap p{
    margin-bottom: .75rm;
    line-height: 1.5;
}

/* card01 */
.flow-card.card01 {
    background: #faf4e7;
    color: #232323;
}
.flow-card.card01 .flow-card-label{
    background-color: #d29614;
    color: #fff
}
.flow-card.card01 .btn{
    background-color: #d29614;
    color: #fff;
    border-color: #d29614;
}
.flow-card.card01 .btn::after{
    border-color: #fff;
}
/* card02 */
.flow-card.card02 {
    background: #f9edf1;
    color: #232323;
}
.flow-card.card02 .flow-card-label{
    background-color: #c85078;
    color: #fff
}
.flow-card.card02 .btn{
    background-color: #c85078;
    color: #fff;
    border-color: #c85078;
}
.flow-card.card02 .btn::after{
    border-color: #fff;
}
/* card03 */
.flow-card.card03 {
    background: #eef3f1;
    color: #232323;
}
.flow-card.card03 .flow-card-label{
    background-color: #5a8c78;
    color: #fff
}
.flow-card.card03 .btn{
    background-color: #5a8c78;
    color: #fff;
    border-color: #5a8c78;
}
.flow-card.card03 .btn::after{
    border-color: #fff;
}
/* card04 */
.flow-card.card04 {
    background: #eef3f9;
    color: #232323;
}
.flow-card.card04 .flow-card-label{
    background-color: #5a8cc8;
    color: #fff
}
.flow-card.card03 .btn{
    background-color: #5a8cc8;
    color: #fff;
    border-color: #5a8cc8;
}
.flow-card.card03 .btn::after{
    border-color: #fff;
}




.flow-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.flow-card-label {
    font-size: 12px;
    font-weight: bold;
    color: #999;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}
.flow .slick-list{
    overflow: visible;
}
/* SP対応 */
@media (max-width: 768px) {
    .flow-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }
    .flow-card::after {
        /* display: none; */
    }
}

/* PC: 4カラム表示 */
@media (min-width: 768px) {
    .flow-cards {
        flex-direction: row;
        gap: 15px;
        padding: 0 40px;
        align-items: stretch;
    }

    .flow-cards .flow-card {
        flex: 1 1 0;
        margin: 0;
    }
}

/* 1250px以下でpadding調整 */
@media (max-width: 1250px) {
    .flow-card {
        padding: 50px 20px 10px;
    }
}

/* ====================================
   エントリーフローセクション
==================================== */
.entry-flow {
    background: #f4dd26;
    padding: 185px 10px 20px;
    text-align: center;
    position: relative;
}

/* 上部のドリップ装飾 */
.entry-flow-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_white.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}

.entry-flow-logo {
    width: 320px;
    height: auto;
    margin-bottom: 40px;
    z-index: 2;
    position: relative;
}

/* ボックス共通 */
.entry-flow-box {
    border-radius: 8px;
    padding: 35px 30px 30px 30px;
    margin: 0 auto;
    max-width: 500px;
    text-align: center;
    background-color: #232323;
    color: #fff;
}

.entry-flow-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.entry-flow-box-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.entry-flow-box-title--dark {
    color: #333;
}

.entry-flow-box.red-box {
    background-color: #c85078;
    padding: 40px 30px 30px;
}
.entry-flow-box.blue-box {
    background-color: #325078;
    padding: 40px 30px 30px;
}
.entry-flow-box.white-box {
    background-color: #fff;
    padding: 40px 30px 30px;
    color: #333;
    border: 2px solid #232323;
}
.entry-flow-box.small-box {
    padding: 24px 30px;
}

/* ボックスカラーバリエーション */
.entry-flow-box--purple {
    background: #6b5b95;
    color: #fff;
}

.entry-flow-box--white {
    background: #fff;
    color: #333;
    border: 2px solid #ddd;
}

.entry-flow-box--dark {
    background: #333;
    color: #fff;
}

.entry-flow-box--dark .entry-flow-box-title {
    color: #ff6b9d;
}

.entry-flow-box--pink {
    background: #ff6b9d;
    color: #fff;
}

.entry-flow-box--green {
    background: #4a9b6b;
    color: #fff;
}

.entry-flow-box--small {
    padding: 15px;
}

.entry-flow-box--small p {
    font-size: 12px;
}

/* ボタン */
.entry-flow-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 15px;
    transition: opacity 0.3s ease;
}

.entry-flow-btn:hover {
    opacity: 0.8;
}

.entry-flow-btn--line {
    background: #06c755;
    color: #fff;
}

.entry-flow-btn--line:hover {
    color: #fff;
}

/* 矢印 */
.entry-flow-arrow {
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.entry-flow-arrow.arrow02{
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.entry-flow-arrow img {
    object-fit: contain;
    height: 80px;
}
.entry-flow-arrow.arrow02 img {
    object-fit: contain;
    height: 40px;
}

.entry-flow-arrow-label {
    background: #ffe600;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    position: relative;
    z-index: 1;
    border: 2px solid #333;
    border-radius: 20px;
}

.entry-flow-arrow--down {
    height: 40px;
}

.entry-flow-arrow--small {
    height: 35px;
}

.entry-flow-arrow-label--small {
    font-size: 12px;
    padding: 3px 10px;
}

/* 分岐エリア */
.entry-flow-branch {
    /* margin-top: 20px; */
    padding: 0 60px;
}

.entry-flow-branch .col-12 {
    padding: 0 10px;
}

.entry-flow-branch .entry-flow-box {
    max-width: 100%;
}

.entry-flow-sub-branch {
    margin-top: 15px;
}

.entry-flow-sub-branch .col-6 {
    padding: 0 5px;
}

/* SP対応 */
@media (max-width: 767px) {
    .entry-flow-branch .col-12 {
        margin-bottom: 20px;
    }

    .entry-flow-branch .col-12:last-child {
        margin-bottom: 0;
    }
}

/* SP対応 */
@media (max-width: 768px) {
    .entry-flow-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }
}

/* Entry Flow カスタムアニメーション（移動距離少なめ） */
@keyframes fadeInUpSmall {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.entry-flow .animate__fadeInUp {
    animation-name: fadeInUpSmall;
}

/* PC対応 */
@media (min-width: 768px) {
    .entry-flow-box {
        max-width: 600px;
    }

    .entry-flow-branch .row {
        display: flex;
        align-items: stretch;
    }

    .entry-flow-branch .col-6 {
        display: flex;
        flex-direction: column;
    }

    .entry-flow-branch .col-6 .entry-flow-box {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ====================================
   募集要項セクション
==================================== */
.bosyu-youko {
    background: #fff;
    /* padding: 100px 20px 0px; */
    padding: 30px 20px 0px;
    position: relative;
}

/* 上部のドリップ装飾 */
.bosyu-youko-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_yellow.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}
.bosyu-youko-inner{
    padding: 20px 40px;
}
.bosyu-youko-subtitle {
    font-size: 14px;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.6;
    z-index: 4;
    position: relative;
}

.bosyu-youko-title {
    text-align: center;
    margin-bottom: 30px;
    z-index: 2;
    position: relative;
}

.bosyu-youko-title img {
    max-width: 230px;
    height: auto;
}

/* スプラッシュ画像 */
.bosyu-youko-splash {
    position: absolute;
    top: -70px;
    left: 20px;
    width: 120px;
    height: auto;
    z-index: 0;
    transform: scale(0) rotate(-15deg);
}

.bosyu-youko-splash.is-animated {
    animation: inkSplash 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.bosyu-youko-intro {
    margin-bottom: 40px;
}

.bosyu-youko-intro p {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}

/* 定義リスト */
.bosyu-youko-dl {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.bosyu-youko-dl dt {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
    /* padding-left: 15px; */
    /* border-left: 4px solid #ff6b9d; */
}

.bosyu-youko-dl dd {
    margin: 0;
}

/* リスト */
.bosyu-youko-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
}

.bosyu-youko-list li {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    padding-left: 20px;
    position: relative;
    margin-bottom: 0;
}

.bosyu-youko-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #919191;
    font-size: 13px;
    line-height: 2.15;
}
.bosyu-youko-list.dot-maroon li::before{
    color: #c85078;
}

/* 注釈 */
.bosyu-youko-note {
    font-size: 15px;
    line-height: 1.8;
    color: #232323;
}

.bosyu-youko .bosyu-youko-inner a {
    /* color: #ff6b9d; */
    text-decoration: underline;
}
.bosyu-youko .team-wrap a {
    /* color: #ff6b9d; */
    text-decoration: none;
}

/* ボックス共通 */
.bosyu-youko-box {
    padding: 40px 30px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.bosyu-youko-box--gray {
    background: #f5f5f5;
}

.bosyu-youko-box--yellow {
    background: #ffe500;
}

.bosyu-youko-box-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.bosyu-youko-box-title--pink {
    color: #ff6b9d;
}

.bosyu-youko-box-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bosyu-youko-box-list li {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    padding-left: 20px;
    position: relative;
    margin-bottom: 5px;
}

.bosyu-youko-box-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #333;
    font-size: 10px;
}

.bosyu-youko-box-list--star li::before {
    content: '★';
    color: #ff6b9d;
    font-size: 14px;
}

.icon_circle {
    color: #919191;
}
.icon_star {
    color: #c85078;
}

.team-wrap {
    border: 1px solid #919191;
    border-radius: 8px;
    margin: 50px 0 0;
    padding: 30px 50px;
}


/* セクション */
.bosyu-youko-section {
    margin-bottom: 40px;
}

.bosyu-youko-section:last-child {
    margin-bottom: 0;
}

.bosyu-youko-section-title {
    text-align: center;
    margin: 50px 0 40px;
}
.bosyu-youko-section-title span{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 3px 12px 4px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: #232323;
    color: #fff;
}
.bosyu-youko-section-title.small span{
    font-size: 14px;
}


.bosyu-youko-section-title--green {
    background: #4a9b6b;
    color: #fff;
}

.bosyu-youko-section-subtitle {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.bosyu-youko-section-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.bosyu-youko-venue {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

/* ボタン */
.bosyu-youko-btn-wrap {
    margin-top: 30px;
    text-align: center;
}

.bosyu-youko-btn {
    display: inline-block;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: opacity 0.3s ease;
}

.bosyu-youko-btn:hover {
    opacity: 0.8;
}

.bosyu-youko-btn--green {
    background: #4a9b6b;
    color: #fff;
}

.bosyu-youko-btn--green:hover {
    color: #fff;
}

.bosyu-youko-btn i {
    margin-left: 10px;
}

/* SP対応 */
@media (max-width: 768px) {
    .bosyu-youko-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }
}

/* ====================================
   参加方法セクション
==================================== */
.howtojoin {
    background: #bd4e72;
    padding: 160px 20px 0px;
    position: relative;
}

/* 上部のドリップ装飾 */
.howtojoin-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_white2.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}

.howtojoin-subtitle {
    font-size: 14px;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.6;
    position: relative;
    z-index: 5;
}

.howtojoin-title {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 4;
}

.howtojoin-title img {
    max-width: 230px;
    height: auto;
}

/* スプラッシュ画像 */
.howtojoin-splash {
    position: absolute;
    top: -40px;
    left: 0;
    width: 120px;
    height: auto;
    z-index: 0;
    transform: scale(0) rotate(-15deg);
}

.howtojoin-splash.is-animated {
    animation: inkSplash 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.howtojoin-period {

    margin-bottom: 30px;
    text-align:center;
}
.howtojoin-period > span{
    font-size: 14px;
    text-align: center;
    color: #fff;
    font-weight: 500;
    padding: 5px 20px;
    /* border: 2px solid #ffe600; */
    border-radius: 30px;
    display: inline-block;
    /* max-width: 400px; */
    margin-left: auto;
    margin-right: auto;
    background: #232325;
    display: inline-block
}

/* ステップリスト */
.howtojoin-steps {
    margin: 20px 50px 30px;
}

.howtojoin-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
}

.howtojoin-step:last-child {
    border-bottom: none;
}

.howtojoin-step-num {
    font-size: 32px;
    font-weight: 900;
    color: #ffe600;
    font-style: italic;
    line-height: 1;
    flex-shrink: 0;
    width: 40px;
}

.howtojoin-step-content {
    flex: 1;
}

.howtojoin-step-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffe600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.howtojoin-step-text {
    font-size: 14px;
    line-height: 1.8;
    color: #fff;
    margin: 0;
    text-align: justify;
}

/* SAMPLE VIDEO */
.howtojoin-video {
    margin-bottom: 60px;
}

.howtojoin-video-title {
    text-align: left;
    margin-bottom: 30px;
    padding-left: 50px;
    position: relative;
}

.howtojoin-video-title img:first-child {
    max-width: 360px;
    height: auto;
}

/* スプラッシュ画像 */
.howtojoin-video-splash {
    position: absolute;
    top: -20px;
    right: 120px;
    width: 160px;
    height: auto;
    z-index: 0;
    transform: scale(0) rotate(-15deg);
}

.howtojoin-video-splash.is-animated {
    animation: inkSplash 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* SP: 縦積み */
.howtojoin-video-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.howtojoin-video-item {
    width: 100%;
    max-width: 200px;
}

.howtojoin-video-thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.howtojoin-video-dummy {
    width: 100%;
    padding-top: 177.78%; /* 9:16 ratio for Shorts */
    background: #222;
}

.howtojoin-video-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.howtojoin-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff0000;
    font-size: 28px;
}

/* PC: 2カラムレイアウト */
@media (min-width: 768px) {
    .howtojoin-video-slider {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }

    .howtojoin-video-item {
        max-width: 325px;
        background: #fff;
        border-radius: 5px;
    }
    .howtojoin-video-item blockquote{
        margin: 0;
        border-radius: 5px;
    }
    .howtojoin-video-item blockquote iframe{
        width: 100%;
    }
}

/* 投稿先 */
.howtojoin-post {
    padding: 30px 20px;
    border-radius: 10px;
    text-align: left;
}

.howtojoin-post-header {
    display: flex;
    justify-content: left;
    gap: 20px;
    margin: 10px 40px 10px;
    flex-wrap: wrap;
}

.howtojoin-post-title {
    margin: 0;
    width: 150px;
    /* background: #f00; */
}

.howtojoin-post-title img {
    width: 100%;
    height: auto;
    display: block;
}

.howtojoin-post-sns {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.howtojoin-post-sns li {
    width: 40px;
    height: 40px;
}

.howtojoin-post-sns li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.howtojoin-post-text {
    font-size: 14px;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 25px;
    margin: 0 40px 25px;
}

.howtojoin-post-btns {
    display: flex;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
}

.howtojoin-post-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 25px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: opacity 0.3s ease;
    min-width: 200px;
    text-align: center;
}

.howtojoin-post-btn:hover {
    opacity: 0.8;
}

.howtojoin-post-btn--yellow {
    background: #ffe600;
    color: #333;
}

.howtojoin-post-btn--yellow:hover {
    color: #333;
}

.howtojoin-post-btn--white {
    background: #fff;
    color: #333;
    border: 2px solid #333;
}

.howtojoin-post-btn--white:hover {
    color: #333;
}

/* SP対応 */
@media (max-width: 767px) {
    .howtojoin-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }

    .howtojoin-step {
        /* flex-direction: column; */
        gap: 20px;
        padding: 25px 0;
    }

    .howtojoin-step-num {
        font-size: 28px;
    }

    .howtojoin-step-title {
        font-size: 16px;
    }

    .howtojoin-video-item {
        width: 80vw;
        max-width: unset;
    }

    .howtojoin-post-btn {
        width: 100%;
        min-width: auto;
    }
}

/* ====================================
   シンクロディテールセクション
==================================== */
.synchro-detail {
    position: relative;
    padding: 240px 0px 0;
    overflow: hidden;
    background:
        url('../img/onedance/synchro2_bg.webp') no-repeat top center / contain,
        linear-gradient(to bottom, #020217 0%, #030110 100%);
}

/* 上部のドリップ装飾 */
.synchro-detail-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_maroon.svg') no-repeat top center;
    background-size: cover;
    z-index: 1;
}

/* SP対応 */
@media (max-width: 768px) {
    .synchro-detail-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }
}


.synchro-detail-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* 吹き出し */
.synchro-detail-balloon {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 30px;
    margin-bottom: 10px;
    position: relative;
}

.synchro-detail-balloon p {
    font-size: 28px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 30px;
    width: 370px;
}

/* タイトル */
.synchro-detail-subtitle {
    font-size: 16px;
    font-style: italic;
    color: #d4af37;
    margin-bottom: 10px;
}

.synchro-detail-title {
    margin-bottom: 10px;
}
.synchro-detail-title img{
    width: 450px;
}

.synchro-detail-with {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 40px;
}
.synchro-detail-inner{
    margin: 60px 20px 0;
    padding: 0 40px;
}

/* 説明テキスト */
.synchro-detail-text {
    margin-bottom: 40px;
}

.synchro-detail-text p {
    font-size: 14px;
    line-height: 2;
    color: #fff;
    text-align: justify;
}

.synchro-detail-yellow-box {
    background: #ffe600;
    border-radius: 8px;
    text-align: left;
    padding: 30px 40px 20px;
}

/* 参加費 */
.synchro-detail-fee {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 30px 20px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.synchro-detail-fee-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffe600;
    margin-bottom: 20px;
}

.synchro-detail-fee-text {
    font-size: 14px;
    line-height: 2;
    color: #fff;
    margin-bottom: 15px;
}

.synchro-detail-fee-text strong {
    color: #ffe600;
    font-size: 18px;
}

.synchro-detail-fee-price {
    display: inline-block;
    background: #ffe600;
    color: #333;
    padding: 8px 20px;
    border-radius: 5px;
    margin: 10px 0;
}

.synchro-detail-fee-price strong {
    color: #333;
    font-size: 24px;
}

.synchro-detail-fee-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* 含まれる内容 */
.synchro-detail-include {
    background: #333;
    padding: 25px 20px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.synchro-detail-include-title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
}

.synchro-detail-include-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.synchro-detail-include-list li {
    font-size: 14px;
    line-height: 1.8;
    color: #fff;
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.synchro-detail-include-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #ffe600;
    font-size: 10px;
}

.synchro-detail-include-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

/* 参加特典 */
.synchro-detail-benefit {
    background: #fff;
    padding: 25px 20px;
    margin-bottom: 40px;
    border-radius: 10px;
}

.synchro-detail-benefit-title {
    font-size: 16px;
    font-weight: bold;
    color: #ff6b9d;
    margin-bottom: 20px;
}

.synchro-detail-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
    text-align: left;
}

.synchro-detail-benefit-list li {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.synchro-detail-benefit-list li::before {
    content: '★';
    position: absolute;
    left: 0;
    color: #ff6b9d;
    font-size: 14px;
}

.synchro-detail-benefit-note {
    font-size: 12px;
    color: #666;
    text-align: left;
    margin: 0;
}


/* SP対応 */
@media (max-width: 767px) {
    .synchro-detail {
        padding: 60px 20px;
    }

    .synchro-detail-balloon p {
        font-size: 16px;
    }

    .synchro-detail-title {
        font-size: 28px;
    }

    .synchro-detail-fee-price strong {
        font-size: 20px;
    }
}

/* ====================================
   価格表
==================================== */
.price-table{
    background: #fff;
    padding: 120px 70px 1px;
    position: relative;
}
.table-wrappper{
    background: #f4f4f4;
    z-index: 9;
    position: relative;
    padding: 40px 40px;
    border-radius: 8px;
}
.table-wrappper h3 {
    font-size: 18px;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.65;
}
.table-wrappper h4 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 1.5;
    letter-spacing: -0.02rem;
}

.table-wrappper dl {
    border-top: 1px dotted #646565;
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1rem;
    margin-bottom: 0;
    align-items: center;
}
.table-wrappper dl dt,
.table-wrappper dl dd{
    font-size: 15px;
    padding: 15px 0;
    margin: 0;
}
.table-wrappper .black-table dl dt,
.table-wrappper .black-table dl dd,
.table-wrappper .navy-table dl dt,
.table-wrappper .navy-table dl dd{
    color: #fff;
}
.white-table{
    border: 2px solid #222;
}
.white-table,
.black-table,
.navy-table{
    padding: 30px 30px 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.white-table h4,
.black-table h4,
.navy-table h4{
    font-size: 18px;
}
.black-table h4,
.navy-table h4{
    color: #ffe600;
}
.white-table{
    background: #fff;
}
.black-table{
    background: #222;
}
.navy-table{
    background: #325078;
    margin-bottom: 0px !important;
}


/* ====================================
   アクセスセクション
==================================== */
.access {
    background: #f4dd26;
    padding: 120px 20px 1px;
    position: relative;
}

/* 上部のドリップ装飾 */
.access-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_white3.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}
.access-drip.overw_flow{
    background: url('../img/onedance/drip_black.svg') no-repeat top center;
    background-size: cover;
}

/* SP対応 */
@media (max-width: 768px) {
    .access-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }
}

.access-content {
    text-align: center;
    padding: 60px 40px 40px;
}

/* アイコン */
.access-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
}

.access-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* タイトル */
.access-title {
    font-size: 26px;
    font-weight: 900;
    color: #232323 !important;
    margin-bottom: 10px;
    /* letter-spacing: 0.1em; */
    position: relative;
    display: inline-block;
}

/* スプラッシュ画像 */
.access-splash {
    position: absolute;
    top: -70px;
    left: -160px;
    width: 130px;
    height: auto;
    z-index: 0;
    transform: scale(0) rotate(-15deg);
}

.access-splash.is-animated {
    animation: inkSplash 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.access-subtitle {
    font-size: 16px;
    color: #232323 !important;
    margin-bottom: 30px;
    font-weight: 500;
}

/* 地図 */
.access-map {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
}

.access-map iframe {
    display: block;
    width: 100%;
    height: 400px;
}

/* 会場情報 */
.access-info {
    text-align: center;
}

.access-event {
    font-size: 15px;
    color: #232323;
    margin-bottom: 5px;
    font-weight: 500;
}

.access-venue {
    font-size: 15px;
    font-weight: 500;
    color: #232323;
    margin: 0;
}

/* 注意事項 */
.access-notice {
    background: unset;
    padding: 60px 0px;
    margin: 30px 40px;
    color: #232323;
    border-top: 1px dotted #232323;
}

.access-notice-title {
    font-size: 16px;
    font-weight: bold;
    color: #232323;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.access-notice-text {
    font-size: 15px;
    /* line-height: 1.8; */
    color: #232323;
    margin-bottom: 15px;
}

.access-notice-text:last-child {
    margin-bottom: 0;
}

/* SP対応 */
@media (max-width: 767px) {
    .access-title {
        font-size: 28px;
    }

    .access-map iframe {
        height: 250px;
    }
}

/* ====================================
   プログラムセクション
==================================== */
.program {
    background: #fff;
    padding: 120px 20px 20px;
    position: relative;
}

/* 上部のドリップ装飾 */
.program-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 170px;
    background: url('../img/onedance/drip_yellow.svg') repeat-x top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.program-header {
    text-align: center;
    padding: 60px 0 40px;
}

/* アイコン */
.program-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
}

.program-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* タイトル */
.program-title {
    position: relative;
    font-size: 26px;
    font-weight: 900;
    color: #232323 !important;
    margin-bottom: 10px;
}

.program-splash {
    position: absolute;
    top: 0;
    left: 60px;
    width: 130px;
    height: auto;
    z-index: 0;
    transform: scale(0) rotate(-15deg);
}

.program-splash.is-animated {
    animation: inkSplash 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.program-subtitle {
    font-size: 16px;
    color: #232323;
    margin: 0;
}

/* スケジュール全体 */
.program-schedule {
    background: #232323;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    gap: 0 10px;
    margin: 10px 40px;
}

/* タイムライン（左側の時間軸） */
.program-timeline {
    flex-shrink: 0;
    width: 50px;
}

.program-time {
    height: 40px;
    font-size: 12px;
    color: #fff;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
    position: relative;
}

.program-time::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: calc(100vw - 100px);
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

/* イベントエリア */
.program-events {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(18, 40px);
    gap: 5px;
    position: relative;
}

/* イベント共通 */
.program-event {
    border-radius: 5px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.program-event-name {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
}

/* イベントカラーバリエーション */
.program-event--yellow {
    background: #ffe600;
    color: #333;
}

.program-event--white {
    background: #f5f5f5;
    color: #333;
}

.program-event--pink {
    background: #d4789c;
    color: #fff;
}

.program-event--red {
    background: #c23c3c;
    color: #fff;
}

/* 移動案内ノート */
.program-note {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.program-note p {
    font-size: 11px;
    color: #fff;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

/* SP対応 */
@media (max-width: 767px) {
    .program-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }

    .program-title {
        font-size: 28px;
    }

    .program-schedule {
        padding: 15px 10px;
        gap: 5px;
    }

    .program-timeline {
        width: 40px;
    }

    .program-time {
        font-size: 10px;
        height: 35px;
    }

    .program-events {
        grid-template-rows: repeat(18, 35px);
    }

    .program-event-name {
        font-size: 10px;
    }

    .program-note p {
        font-size: 9px;
    }
}

/* ====================================
   メッセージセクション
==================================== */
.message {
    background: #314e74;
    padding: 170px 20px 60px;
    position: relative;
}

/* 上部のドリップ装飾 */
.message-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_white.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}

.message-content {
    text-align: center;
}

/* タイトル */
.message-title {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
}

.message-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 60px;
}

/* メインヘッディング */
.message-heading {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* テキスト */
.message-text {
    margin-bottom: 50px;
}

.message-text p {
    font-size: 16px;
    line-height: 2.2;
    color: #fff;
    margin-bottom: 30px;
    font-weight: normal;
}

.message-text p:last-child {
    margin-bottom: 0;
}

.message-text-highlight {
    font-size: 16px !important;
    font-weight: bold;
    margin-top: 40px !important;
}

/* ロゴ */
.message-logo {
    width: 140px;
    margin: 0 auto;
}

.message-logo img {
    width: 100%;
    height: auto;
}

/* SP対応 */
@media (max-width: 767px) {
    .message {
        padding: 60px 20px;
    }

    .message-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }

    .message-title {
        font-size: 24px;
    }

    .message-heading {
        font-size: 18px;
    }

    .message-text p {
        font-size: 13px;
    }

    .message-logo {
        width: 160px;
    }
}

/* ====================================
   フッターセクション
==================================== */
.footer-onedance {
    background: #fff;
    padding: 160px 20px 40px;
    position: relative;
}

/* 上部のドリップ装飾 */
.footer-drip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: url('../img/onedance/drip_blue.svg') no-repeat top center;
    background-size: cover;
    z-index: 0;
}

/* スポンサー */
.footer-sponsor {
    text-align: center;
    margin: 60px;
}

.footer-sponsor-title {
    font-size: 26px;
    font-weight: 900;
    color: #232323 !important;
    margin-bottom: 40px;
    /* letter-spacing: 0.1em; */
}

.footer-sponsor-box {
    background: #657c9a;
    padding: 40px 20px;
    border-radius: 8px;
}

.footer-sponsor-box p {
    font-size: 18px;
    color: #fff;
    margin: 0;
}

/* お問い合わせ */
.footer-contact {
    text-align: center;
    margin-bottom: 60px;
}

.footer-contact-title {
    font-size: 26px;
    font-weight: 900;
    color: #232323 !important;
    margin-bottom: 40px;
    margin-top: 100px;
}

.footer-contact-text {
    font-size: 16px;
    color: #232323;
    margin-bottom: 25px;
}

.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 50px;
    background: #fff;
    border: 2px solid #333;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-contact-btn:hover {
    background: #333;
    color: #fff;
}

.footer-contact-btn i {
    font-size: 12px;
}

/* 主催情報 */
.footer-info {
    margin-bottom: 40px;
    padding-bottom: 40px;
    /* border-bottom: 1px solid #ddd; */
    padding: 0 70px;
}

.footer-info-list {
    margin: 0;
    padding: 0;
}

.footer-info-item {
    display: flex;
    margin-bottom: 10px;
    font-size: 13px;
    color: #232323;
    gap: 20px;
}

.footer-info-item:last-child {
    margin-bottom: 0;
}

.footer-info-item dt {
    width: 80px;
    flex-shrink: 0;
    font-weight: normal;
    font-size: 15px;
    width: 7em;
    font-weight: 500;
}

.footer-info-item dd {
    margin: 0;
    flex: 1;
    font-size: 15px;
}

/* コピーライト */
.footer-copyright {
    text-align: center;
}

.footer-copyright p {
    font-size: 14px;
    color: #232323;
    margin: 0;
}

/* SP対応 */
@media (max-width: 767px) {
    .footer-onedance {
        padding: 60px 20px 100px;
    }

    .footer-drip {
        width: 100%;
        height: 130px;
        background-size: 100%;
    }

    .footer-sponsor-title,
    .footer-contact-title {
        font-size: 20px;
    }

    .footer-sponsor-box {
        padding: 30px 15px;
    }

    .footer-info-item {
        /* flex-direction: column; */
        gap: 5px;
    }

    .footer-info-item dt {
        /* width: 100%; */
    }
}

/* ====================================
   Information
==================================== */
.information {
    position: relative;
    background: transparent;
    padding: 0;
    z-index: 1;
}

.information .container {
    position: relative;
    z-index: 1;
}

.information h2,
.information .info-date,
.information .info-title,
.information .btn-outline-dark {
    color: #eaedf1;
}

/* セクションタイトルラッパー */
.section-title-wrap {
    position: relative;
}

.info-fireworks-dots {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 262px;
    height: 262px;
}

@media (max-width: 768px) {
    .info-fireworks-dots {
        display: none;
    }
}
.information .info-item {
    border-bottom-color: rgba(234,237,241,0.3);
}

.information .info-item a {
    color: #eaedf1;
}

.information .btn-outline-dark {
    border-color: #eaedf1;
}

.information .btn-outline-dark:hover {
    background: #fff;
    color: #333;
}

.info-lead {
    font-size: 18px;
    margin-bottom: 30px;
    color: #fff;
}

/* イベント開催情報 */
.event-info {
    margin: 0;
    padding: 0;
}

.event-info-item {
    display: flex;
    /* border-bottom: 1px solid rgba(234,237,241,0.3); */
    padding: 5px 0;
    color: #fff;
    font-weight: normal;
    gap: 2em;
}

.event-info-item dt {
    width: 5.5em;
    flex-shrink: 0;
    font-weight: 500;
    text-align: justify;
    text-align-last: justify;
    color: #adb9c9;
}

.event-info-item dd {
    margin: 0;
    flex: 1;
}

@media (max-width: 768px) {
    .event-info-item {
        flex-direction: column;
        gap: 5px;
    }

    .event-info-item dt {
        width: 100%;
    }
}

/* ロゴエリア */
.logo-area {
    margin-top: 0;
}

.logo-area .main-logo {
    max-width: 280px;
    height: auto;
    filter: brightness(0) invert(1);
}

/* スライダー */
.info-slider-wrap {
    margin-top: 60px;
    overflow: hidden;
}

.info-slider {
    margin: 0 -10px;
}

.info-slider-item {
    padding: 0 10px;
}

.info-slider-item img {
    width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.info-slider .slick-dots {
    bottom: -40px;
}

.info-slider .slick-dots li button:before {
    color: rgba(234,237,241,0.5);
    font-size: 10px;
}

.info-slider .slick-dots li.slick-active button:before {
    color: #eaedf1;
}

@media (max-width: 768px) {
    .logo-area .main-logo {
        max-width: 200px;
    }
}

/* ====================================
   What's
==================================== */
.whats,
.guest,
.description,
.contact,
.footer {
    position: relative;
    z-index: 1;
}

.whats {
    background: #325078;
    padding: 100px 0;
    color: #fff;
    overflow: visible;
}

.whats h2 {
    color: #fff;
    margin-bottom: 0 !important;
}

.whats p {
    color: #fff;
}

.whats h2::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    margin: 0 auto 30px;
    background: url('../img/common/icon_fireworks_dots.svg') no-repeat center center;
    background-size: contain;
}

.whats-title-wrap {
    position: relative;
}

.whats-fireworks-dots {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
    height: 210px;
    opacity: 0;
}

.whats-fireworks-dots.is-active {
    animation: whats-fw-fadeInUp 1s ease-out forwards;
}

@keyframes whats-fw-fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(calc(-50% + 30px));
    }
    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}

@media (max-width: 768px) {
    .whats-fireworks-dots {
        display: none;
    }
}

/* whats-guest境界の花火 */
.whats-guest-fireworks-dots {
    position: absolute;
    left: 5%;
    bottom: -300px;
    width: 260px;
    height: 260px;
    z-index: 2;
    opacity: 0;
}

.whats-guest-fireworks-dots.is-active {
    animation: whats-fw-fadeInUp 1s ease-out forwards;
}

@media (max-width: 768px) {
    .whats-guest-fireworks-dots {
        display: none;
    }
}

/* ====================================
   Guest Artist
==================================== */
.guest {
    background: transparent;
    padding: 120px 0;
    overflow: visible;
}

.guest h2,
.guest p {
    color: #eaedf1;
}

.guest h2::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    margin: 0 auto 30px;
    background: url('../img/common/icon_fireworks_dots.svg') no-repeat center center;
    background-size: contain;
}

.guest .card {
    border: none;
    background: transparent;
    border-radius: 0;
}

.guest .card-img-top {
    border-radius: 0;
}

.guest .card-body {
    color: #eaedf1;
    padding: 20px 0;
}

.guest .card-title {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 5px;
    color: #eaedf1;
    margin-top: 5px;
}

.guest .card-role {
    font-size: 15px;
    color: #fff;
    margin-bottom: 15px;
}

.guest .card-text {
    font-size: 15px;
    line-height: 1.8;
    color: #eaedf1;
}

/* ====================================
   Description
==================================== */
.description {
    background: #eaedf1;
    padding: 120px 0;
    color: #325078;
}

.description h2 {
    color: #325078;
    margin-bottom: 5px;
}

.description h2::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    margin: 0 auto 30px;
    background: url('../img/common/icon_fireworks_dots.svg') no-repeat center center;
    background-size: contain;
    filter: brightness(0) saturate(100%) invert(24%) sepia(32%) saturate(878%) hue-rotate(175deg) brightness(95%) contrast(91%);
}

.description-heading {
    /* font-size: 24px; */
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}

.description-subheading {
    font-size: 14px;
    /* color: #666; */
    margin-bottom: 20px;
    text-align: center;
}

.description-content {
    font-size: 15px;
    line-height: 1.8;
}

.description-list {
    margin: 0;
    padding: 0;
}

.description-list-item {
    margin-bottom: 12px;
}

.description-list-item dt {
    font-weight: bold;
    font-size: 14px;
    margin: .75rem 0;
}

.description-list-item dd {
    margin: 0 0 2.25rem;
    font-size: 14px;
}

.notice {
    display: block;
}

.notice.important {
    color: #c85078;
}

.noticeList {
    list-style: none;
    padding-left: 1em;
    margin: 0;
}

.noticeList li {
    position: relative;
}

.noticeList li::before {
    content: '※';
    position: absolute;
    left: -1em;
}

.mark-circle {
    color: #98a7bb;
    font-size: 12px;
}

.description-video {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.description-video iframe {
    width: 100%;
    height: 533px; /* 300px × 16/9 */
    border: 0;
}

.description-block {
    margin-bottom: 40px;
}

.description-block:last-child {
    margin-bottom: 0;
}

/* ボタン */
.btn_wrap {
    margin-top: 20px;
}

.btn_wrap .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 40px;
    background: #fff;
    border: 1px solid #c1cad6;
    color: #325078;
    font-size: 15px;
    text-decoration: none;
    position: relative;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-weight: 500;
}

.btn_wrap .btn::after {
    content: '';
    position: absolute;
    right: 20px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #325078;
    border-right: 1px solid #325078;
    transform: rotate(45deg);
    transition: border-color 0.3s ease;
}

.btn_wrap .btn:hover {
    opacity: 1;
    background: #325078;
    color: #fff;
    border-color: #325078;
}
.btn_wrap .btn:hover::after {
    border-color: #fff;
}

.btn_wrap.w-350{
    width: 350px;
    margin:auto;
}
.btn_wrap.w-300{
    width: 300px;
    margin:auto;
}
.btn_wrap.w-250{
    width: 250px;
    margin:auto;
}
.btn_wrap.w-45per{
    width: 45%;
    margin:auto;
}

.btn_wrap.c-rime .btn{
    padding: 14px;
    line-height: 1.25;
    background-color: #06c655;
    color: #fff;
    border: 1px solid #06c655;
}
.btn_wrap.c-rime .btn::after{
    border-color:#fff;
}
.btn_wrap.c-rime .btn:hover{
    background-color: #fff;
    color: #06c655;
    border: 1px solid #06c655;
}
.btn_wrap.c-rime .btn:hover::after{
    border-color: #06c655;
}

.btn_wrap.c-gray .btn{
    border-color: #4f4f4f;
    background-color: #4f4f4f;
    color: #fff;
}
.btn_wrap.c-gray .btn::after{
    border-color: #fff;
}
.btn_wrap.c-gray .btn:hover{
    background-color: #fff;
    color: #4f4f4f;
    border-color: #fff;
}
.btn_wrap.c-gray .btn:hover::after{
    border-color: #4f4f4f;
}

.btn_wrap.c-line .btn{
    border: 1px solid #06c655;
    background-color: #06c655;
    color: #fff;
}
.btn_wrap.c-line .btn::after{
    border-color: #fff;
}
.btn_wrap.c-line .btn:hover{
    background-color: #fff;
    color: #06c655;
    border: 1px solid #06c655;
}
.btn_wrap.c-line .btn:hover::after{
    border-color: #06c655;
}
.btn_wrap.c-yellow .btn{
    border-color: #ffe600;
    background-color: #ffe600;
    color: #232323;
}
.btn_wrap.c-yellow .btn::after{
    border-color: #232323;
}
.btn_wrap.c-yellow .btn:hover{
    background-color: #232323;
    color: #ffe600;
    border-color: #232323;
}
.btn_wrap.c-yellow .btn:hover::after{
    border-color: #ffe600;
}
.btn_wrap.c-black .btn{
    border-color: #232323;
    background-color: #232323;
    color: #fff;
}
.btn_wrap.c-black .btn::after{
    border-color: #fff;
}
.btn_wrap.c-black .btn:hover{
    background-color: #fff;
    color: #232323;
    border-color: #232323;
}
.btn_wrap.c-black .btn:hover::after{
    border-color: #232323;
}


.btn_wrap.c-navy .btn{
    border-color: #314e74;
    background-color: #314e74;
    color: #fff;
}
.btn_wrap.c-navy .btn::after{
    border-color: #fff;
}
.btn_wrap.c-navy .btn:hover{
    background-color: #fff;
    color: #314e74;
    border-color: #314e74;
}
.btn_wrap.c-navy .btn:hover::after{
    border-color: #314e74;
}


.descript_border {
    border-top: 1px solid #98a7bb;
    margin: 80px 0;
}

@media (max-width: 768px) {
    .description .col-12:first-child {
        margin-bottom: 40px;
    }
}

/* ====================================
   Contact
==================================== */
.contact {
    background: #325078;
    padding: 120px 0;
    color: #fff;
}

.contact h2::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    margin: 0 auto 30px;
    background: url('../img/common/icon_fireworks_dots.svg') no-repeat center center;
    background-size: contain;
}

/* ====================================
   Info List（汎用お知らせリスト）
==================================== */
.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}

.info-item {
    border-bottom: 1px solid #ddd;
}

.info-item a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    color: #333;
    transition: opacity 0.3s ease;
}

.info-item a:hover {
    opacity: 0.7;
}

.info-date {
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}

.info-category {
    display: inline-block;
    padding: 4px 12px;
    background: #333;
    color: #eaedf1;
    font-size: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.info-title {
    font-size: 15px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .info-item a {
        flex-wrap: wrap;
        gap: 10px;
    }

    .info-date {
        font-size: 13px;
    }

    .info-title {
        width: 100%;
        white-space: normal;
    }
    .flow-card-title {
    font-size: 20px;
    font-weight: 500;
    color: #232323;
    margin: 30px 0 20px;
    line-height: 1.4;
    border-bottom: 1px dotted #919191;
    padding-bottom: 30px;
}
.flow-card-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    text-align: left;
    border-bottom: 1px dotted #919191;
    padding-bottom: 7px;
    margin-bottom: 30px;
    text-align: center;
}.flow-card {
    margin: 0 20px;
    padding-bottom: 20px;
}
}


/* SP対応 */
@media (max-width: 768px) {
    .entry-flow-branch {
    /* margin-top: 20px; */
    padding: 0 ;
    }
    .entry-flow-branch .row {
        display: flex;
        align-items: stretch;
    }
    .entry-flow-branch .col-6 {
        display: flex;
        flex-direction: column;
    }
    .entry-flow-branch .col-6 .entry-flow-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.entry-flow-arrow.sp-70{
    height: 70px;
}
.howtojoin-post-btns {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}
.howtojoin,
.bosyu-youko,
.flow,
.synchro-stage,
.onedance{
    padding-left: 0;
    padding-right: 0;
    
}
.howtojoin-video-title img:first-child {
    max-width: 60vw;
    height: auto;
}
.howtojoin-video-title {
    text-align: left;
    margin-bottom: 10px;
    padding: 0 40px;
    position: relative;
}
.howtojoin-post-header {
    display: grid;
    justify-content: center;
    gap: 14px;
    margin: 0px 40px 10px;
    flex-wrap: wrap;
}
.btn_wrap.w-45per {
    width: 80vw;
}
.flow-card {
    margin: 0 auto;
    padding-bottom: 40px;
    width: 100% !important;
}
.flow-card::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -35px;
    transform: translateX(-50%) rotate(90deg);
}
.flow-card.card04::after {
    display: none;
}
.team-wrap {
    border: 1px solid #919191;
    border-radius: 8px;
    margin: 20px 0 0;
    padding: 10px 25px;
}
.btn_wrap.w-350{
    width: 100%;
}
.howtojoin-period > span {
    font-size: 14px;
    text-align: center;
    color: #fff;
    font-weight: 500;
    padding: 10px 30px 13px;
    /* border: 2px solid #ffe600; */
    border-radius: 70px;
    display: inline-block;
    /* max-width: 400px; */
    margin-left: auto;
    margin-right: auto;
    background: #232325;
    display: inline-block;
    line-height: 1.5;
}
.synchro-detail-title img {
    width: 80vw;
}
.synchro-stage-balloon p {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    line-height: 1.25;
    /* border-radius: 40px; */
}
.synchro-stage-balloon {
    display: inline-block;
    background: #c85078;
    padding: 15px 30px;
    border-radius: 60px;
    margin-bottom: 30px;
    position: relative;
}
.synchro-title {
    width: 80%;
    margin: 10px auto 30px;
    position: relative;
    z-index: 1;
}
.synchro-stage-text {
    font-size: 15px;
    line-height: 1.8;
    color: #232323;
    text-align: left;
    margin: 20px 40px;
    z-index: 2;
    position: relative;
    text-align: justify;
}
.synchro-stage-card-content {
    flex: 1;
    text-align: left;
    order: 2;
}
.bosyu-youko-splash {
    position: absolute;
    top: -20px;
    left: -42px;
    width: 120px;
    height: auto;
    z-index: 0;
    transform: scale(0) rotate(-15deg);
}
.bosyu-youko-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    margin-bottom: 30px;
}
.bosyu-youko-dl dt {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 0;
    /* padding-left: 15px; */
    /* border-left: 4px solid #ff6b9d; */
    text-align: center;
}
.bosyu-youko-box {
    padding: 40px 30px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}
.howtojoin-splash {
    position: absolute;
    top: 30px;
    left: -50px;
    width: 100px;
    height: auto;
    z-index: 0;
    transform: scale(0) rotate(-15deg);
    z-index: -45 !important;
}
.howtojoin-video-splash {
    position: absolute;
    top: -20px;
    right: -30px;
    width: 100px;
    height: auto;
    z-index: 0 !important;
    transform: scale(0) rotate(-15deg);
}
.howtojoin-video {
    margin-bottom: 20px;
}
.synchro-detail-inner {
    margin: 50px 20px 0;
    padding: 0 10px;
}
.synchro-detail-yellow-box {
    background: #ffe600;
    border-radius: 8px;
    text-align: left;
    padding: 30px 25px 20px;
    text-align: justify;
}
.access-splash {
    position: absolute;
    top: -30px;
    left: -180px;
    width: 150px;
    height: auto;
    z-index: 0 !important;
    transform: scale(0) rotate(-15deg);
}
.access-content {
    text-align: center;
    padding: 60px 20px 40px;
}
.access {
    background: #f4dd26;
    padding: 60px 20px 1px;
    position: relative;
}
.access-notice {
    background: unset;
    padding: 40px 0px;
    margin: 0px 20px;
    color: #232323;
    border-top: 1px dotted #232323;
}
.howtojoin-post-sns {
    list-style: none;
    padding: 0;
    margin: 10px 0 10px;
    display: flex;
    gap: 10px;
}
.program {
    background: #fff;
    padding: 60px 20px 20px;
    position: relative;
}
.program-schedule {
    background: #232323;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    gap: 0 10px;
    margin: 10px 10px;
}
.program-splash {
    position: absolute;
    top: -60px;
    left: -55px;
    width: 130px;
    height: auto;
    z-index: 0 !important;
    transform: scale(0) rotate(-15deg);
}
.message {
    padding: 110px 20px;
}
.message-text {
    margin-bottom: 50px;
    text-align: justify;
    margin: 0 20px 50px;
}
.message-title {
    font-size: 26px;
}
.message-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
}
.message-heading {
    font-size: 18px;
    text-align: justify;
    margin: 0 20px 30px;
}
.message-logo {
    width: 80px;
    float: right;
    margin-top: -8rem;
}
.message {
    padding: 110px 20px 1px;
}
.footer-sponsor-title, .footer-contact-title {
    font-size: 26px;
}
.footer-sponsor-box {
    padding: 50px 15px;
}
.footer-info {
    margin-bottom: 30px;
    padding-bottom: 40px;
    /* border-bottom: 1px solid #ddd; */
    padding: 0 30px;
}
.entry-flow-arrow.sp-70 {
    height: 80px;
}
.bosyu-youko-section-title span {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 3px 12px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: #232323;
    color: #fff;
    display: inline-block;
}
.bosyu-youko-section-subtitle {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}
.bosyu-youko-section-title span {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 10px 20px 10px;
    margin-bottom: 0px;
    border-radius: 30px;
    background: #232323;
    color: #fff;
    display: inline-block;
}
.bosyu-youko-section-title {
    text-align: center;
    margin: 40px 0 25px;
}
.btn_wrap.w-300{
    width: 100%;
}
.onedance-dancers {
    background: #232323;
    padding: 105px 30px 30px;
    border-radius: 0;
    position: relative;
    z-index: 1;
    border-radius: 8px;
    margin: -130px 20px auto;
}
.gnav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: #333;
    transition: right 0.3s ease;
    z-index: 1000;
    opacity: 0;
    overflow: scroll;
}
.synchro-detail {
    position: relative;
    padding: 240px 0px 0;
    overflow: hidden;
    background: url('../img/onedance/synchro2_bg_sp.webp') no-repeat top center / contain,
        linear-gradient(to bottom, #020217 0%, #030110 100%);
}
.synchro-detail-balloon {
    padding: 0 40px 15px;
}
.synchro-detail-balloon p {
    font-size: 28px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 20px;
    width: 260px;
}
.synchro-detail {
    position: relative;
    padding: 130px 0px 0;
    overflow: hidden;
    background: url('../img/onedance/synchro2_bg_sp.webp') no-repeat top center / contain,
        linear-gradient(to bottom, #020217 0%, #030110 100%);
}
.flow_header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0;
    margin: 0 20px 30px;
    position: relative;
    z-index: 1;
}
.btn_wrap.w-100per.c-rime.mt-60.mr-30{
    margin: 0 !important;
    order: 2;
}
.flow_header .flow-sprash {
    justify-self: unset;
    width: 110px;
    position: absolute;
    top: -30px;
    right: -30px;
}
.flow_header .flow-title {
    text-align: center;
    color: #232323;
    font-size: 23px;
    margin-bottom: 20px;
}
.onedance-logo.forSP {
    z-index: 11;
    position: absolute;
    top: -110px;
    right: 30px;
    width: 200px;
}
.onedance-dancer {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: .75rem;
    align-items: end;
}
.onedance-dancer-name {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    margin-bottom: 5px;
    text-align: left;
}
.onedance-dancer-team {
    font-size: 12px;
    color: #fff;
    text-align: left;
}
.hero-venue {
    margin-top: 0;
    padding: 5px 10px;
    background: #ffe600;
    color: #232323;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    border-radius: 30px;
    opacity: 0;
    animation: heroFadeIn 0.6s ease-out 1.2s forwards;
}
.howtojoin-steps {
    margin: 30px 30px;
}
.dancers {
    background: #fff;
    padding: 60px 20px 20px;
    position: relative;
}
.onedance-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px 15px;
    margin: 20px 40px 50px;
    position: relative;
    z-index: 1;
}
.entry-flow-box-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.5;
}
.message-text p {
    font-size: 16px;
}
.section-wrapper{
    overflow: hidden;
}
.howtojoin {
    background: #bd4e72;
    padding: 110px 20px 0px;
    position: relative;
}
.entry-flow {
    padding: 105px 20px 20px;
}

.price-table {
    padding: 90px 20px 0px;
}
.table-wrappper {
    padding: 40px 30px;
}
.table-wrappper dl {
    display: block;
}
.table-wrappper dl dd{
    text-align: justify;
}
.table-wrappper dl dt{
    padding: 15px 0 0;
}
.table-wrappper dl dd {
    padding: 0 0 15px;
}
.white-table h4, .black-table h4, .navy-table h4 {
    line-height: 1.5;
}
}

/* SP: スプラッシュ画像をタイトルの奥に配置 */
@media (max-width: 768px) {
    .onedance-splash,
    .synchro-splash,
    .bosyu-youko-splash,
    .howtojoin-splash,
    .howtojoin-video-splash,
    .access-splash,
    .program-splash {
        z-index: -1;
    }
}

/* ====================================
   モーダル
==================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.modal-container {
    position: relative;
    background: #f5f5f5;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #555;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    cursor: pointer;
    z-index: 1;
    transition: background 0.3s;
}

.modal-close:hover {
    background: #333;
}

.modal-content {
    padding: 60px 30px 30px;
    overflow-y: auto;
}

.modal-title {
    display: inline-block;
    background: #232323;
    color: #fff;
    padding: 12px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 30px;
}

.modal-body {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    /* border: 1px solid #ddd; */
}

.modal-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #232323;
    margin-bottom: 15px;
    margin-top: 25px;
}

.modal-section-title:first-child {
    margin-top: 0;
}

.modal-text {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    padding-left: 20px;
}

.modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-list li {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    padding-left: 20px;
    position: relative;
    margin-bottom: 5px;
}

.modal-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #ccc;
    font-size: 10px;
}

/* モーダル SP */
@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        max-height: 85vh;
    }

    .modal-content {
        padding: 50px 20px 20px;
    }

    .modal-title {
        font-size: 16px;
        padding: 10px 30px;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-close {
        top: 15px;
        right: 15px;
        padding: 6px 16px;
        font-size: 12px;
    }
}

/* 個人情報保護方針モーダル用 括弧付きタイトル */
.modal-title--bracket {
    background: transparent;
    color: #232323;
    border: 2px solid #232323;
    position: relative;
    padding: 12px 50px;
}

.modal-title--bracket::before,
.modal-title--bracket::after {
    position: absolute;
    font-size: 24px;
    font-weight: 700;
    color: #232323;
    top: 50%;
    transform: translateY(-50%);
}

.song-card {
    background-color: #ffe600;
    color: #232323;
    border-radius: 30px;
    padding: 0 1em 0;
    text-align: center;
}
.synchro-banner-area{
    margin: 20px 20px;
}

@media (max-width: 768px) {
    .song-card {
        margin-top: .5rem;
        font-size: 13px;
    }


    .synchro-splash{
        left: -100px;
    }
}