:root {
    --letter-space-h3: 10px;
}

.top-heading h3 {
    font-family: 'Cormorant', "Noto Serif JP","ヒラギノ明朝 ProN"," Hiragino Mincho ProN","YuMincho Medium",serif;
    font-size: 41px;
    color: var(--color-contents-dark-green);
    letter-spacing: var(--letter-space-h3);
    max-width: 60%;
    margin: 100px auto 15px;
}

.top-heading .lead {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
}

.top-heading .lead span {
    display: inline-block;
}

.top-page {
    background: #fff;
}

.contents-layout-left-title.full .contents.full {
    margin-right: auto;
}

/*--------------------------------------
    メインビジュアル
*/
.top-page #main-visual {
    height: auto;
}
#main-visual {
    background: #fff;
}

#main-visual img {
    width: 100%;
    display: block;
}

#main-visual .swiper {
    --swiper-pagination-bullet-width: 20px;
    --swiper-pagination-bullet-height: 20px;
    padding-bottom: 55px;
}

#main-visual .swiper .swiper-wrapper {
    background: var(--color-contents-dark-green);
}

#main-visual .swiper .swiper-pagination-bullet {
    background: #fff;
    border: 1px solid var(--color-font-base);
    opacity: 100;
}

#main-visual .swiper .swiper-pagination-bullet-active {
    background: var(--color-font-base);
}

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

    #main-visual .swiper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    #main-visual .swiper-button-next,
    #main-visual .swiper-button-prev {
        margin-top: calc(0px - (var(--swiper-navigation-size)/ 2) + 55px);
    }
    
}

@media screen and (max-width: 639px) {
    #main-visual .swiper {
        padding-bottom: 30px;
    }
    #main-visual .swiper-button-next,
    #main-visual .swiper-button-prev {
            display: none;
    }

}


.top-page #main-contents {
    padding-top: 10px;
    position: relative;
}

#main-contents > * {
    z-index: 1;
    position: relative;
}

@media screen and (max-width: 639px) {
    .top-page #main-contents {
        padding-top: 0;
    }
}

/*--------------------------------------
    top-start
*/
#top-start .top-start-visual-sp {
    display: none;
}

#top-start .contents {
    position: relative;
    width: 1200px;
    max-width: 95%;
}

#top-start .top-start-visual {
    aspect-ratio: 2494 / 2503;
    position: relative
}

#top-start .top-start-visual .top-visual-content {
    background: url(../img/top/top-start-visual.jpg) no-repeat top center / cover;
    margin: 0 auto 50px auto;
    position: relative;
    clip-path: inset(0 round 30px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 45px;
    text-align: center;
}
#top-start .top-start-visual .visual-title {
    width: 100%;
    max-width: 100%;;
}

#top-start .top-start-visual .visual-title h2 {
    margin: 0;
}

#top-start .top-start-visual .visual-title img.pc {
    height: 200px;
}



#top-start .top-start-visual .visual-copy p {
    color: #fff;
    font-size: 20px;
    letter-spacing: 3px;
    line-height: 1.6;
}

#top-start .top-start-visual .visual-copy p:not(:last-child) {
    margin-bottom: 1em;
}

#top-start .top-start-visual .top-start-movie {
    margin-left: auto;
    margin-right: auto;
    width: 48%;
}


#top-start .top-main-logo {
    text-align: center;
    margin-top: 36px
}

@media (max-width: 1200px) {

    #top-start .top-start-visual .visual-copy p { 
        letter-spacing: 1px;
        font-size: 19px;
    }

    #top-start .top-start-visual .visual-copy p:not(:last-child) {
        margin-bottom: .8em;
    }

    #top-start .top-start-visual .top-start-movie {
        width: 51%;
    }
    

}

@media (min-width: 1000px) {
    #top-start .top-start-visual .top-visual-content {
        aspect-ratio: 1200 / 810;
    }
}


@media (max-width: 999px) {
    #top-start .contents {
        width: 84%;
        margin-left: auto;
        margin-right: auto;
    }
    #top-start .top-start-visual .top-visual-content {
        background: none;
        display: block;
        text-align: left;
        padding-bottom: 0;
    }
    #top-start .top-start-visual-sp {
        display: block;
        position: relative;
    }
    #top-start .top-start-visual-sp h2 {
        margin: 0;
        position: absolute;
        top: 0;
    }
    #top-start .top-start-visual-sp img {
        display: block;
    }
    #top-start .top-start-visual-sp .bg-stadium {
        border-radius: 15px;
    }
    #top-start .top-start-visual-sp .director {
        position: absolute;
        left: -6%;
        bottom: 0;
        width: 54%;
    }
    #top-start .top-start-visual .top-visual-content .visual-title {
        display: none;
    }
    #top-start .top-start-visual .top-visual-content .visual-copy {
        margin-top: 0;
        text-align: center;
    }
    
    #top-start .top-start-visual .top-start-movie {
        position: static;
        width: 100%;
    }

    #top-start .top-start-visual {
        background: none;
        aspect-ratio: auto;
        margin-left: auto;
    }

    #top-start .top-start-visual .visual-title img.pc {
        display: none;
    }
    #top-start .top-start-visual .visual-title img.sp {
        display: block !important;
    }
    #top-start .top-start-visual .visual-copy {
        width: 100%;
        position: static;
        margin-top: 30px;
    }
    #top-start .top-start-visual .visual-copy p {
        color: var(--color-font-base);

    }
}


@media (max-width: 639px) {
    .swiper.sp .swiper-pagination {
        display: none;
    }
    
    #top-start .contents {
        width: 90%;
    }
    #top-start .top-start-visual .top-visual-content {
        margin-left: 0;
        margin-right: 0;
    }

    #top-start .visual-title {
        margin: 0 auto 20px;
    }

    #top-start .top-start-visual .visual-copy p {
        font-size: 17px;
    }

}




/*--------------------------------------
    top-movie
*/

#top-movie .contents {
    text-align: center;
    padding: 20px 0 0 0;
    /* background: url(../img/top/top-movie-bg.png) repeat-x bottom; */
}

#top-movie iframe {
    max-width: 100%;
}

#top-movie img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 639px) {
    #top-movie .contents {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9のアスペクト比 */
        height: 0;
    }

    #top-movie .contents iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/*--------------------------------------
    top-howto
*/

#top-howto .spectators img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: left top;
}

#top-howto img {
    display: block;
    max-width: 100%;
}

#top-howto .top-howto-detail {
    display: grid;
    grid-template-columns: min(60%, 700px) auto;
    width: 100%;
    max-width: 1086px;
    margin-top: 60px;
    column-gap: 45px;
}

#top-howto .top-howto-detail .ticket-image {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: grid;
    align-items: end;
}

#top-howto .top-howto-detail .howto-detail-content {
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-rows: auto 1fr;
    gap: 10px 20px;
    padding: 30px 0 30px;
    border-bottom: 1px solid #000;
}

#top-howto .top-howto-detail .howto-detail-content:first-of-type {
    padding-top: 0;
}

#top-howto .top-howto-detail .howto-detail-content:last-of-type {
    border-bottom-width: 0;

}

#top-howto .howto-detail-text h3 {
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 24px;
}

#top-howto .howto-detail-text p {
    font-size: 13px;
    font-family: var(--font-family-gothic);
}

#top-howto .howto-detail-title,
#top-howto .howto-detail-text {
    padding-left: 35px;

}

#top-howto .howto-detail-text .anchor-transition {
    width: 207px;
    max-width: 100%;
}

#top-howto  .fot-private .howto-detail-text .anchor-transition:before {
        background: linear-gradient(90deg, rgba(203, 128, 0, 1) 54.48%, rgba(203, 130, 7, 1) 60.07%, rgba(204, 136, 25, 1) 68.04%, rgba(204, 146, 56, 1) 77.4%, rgba(205, 153, 77, 1) 82.78%);
}

#top-howto .howto-detail-image {
    grid-column: 2;
    grid-row: 1 / span 2;
}

#top-howto .howto-detail-title img {
    height: 40px;
    width: auto;
}

@media (min-width: 640px) and (max-width: 860px) {
    #top-howto .top-howto-detail {
        grid-template-columns: 100%;
    }
    #top-howto .top-howto-detail .ticket-image {
        display: none;
    }
}


@media screen and (max-width: 639px) {
    #top-howto .top-howto-detail {
        width: 93%;
    }
    #top-howto .spectators img {
        width: 100%;
        height: auto;
    }
    #top-howto .top-howto-detail {
        grid-template-columns: 1fr;
    }
    #top-howto .top-howto-detail .howto-detail-content {
        grid-template-columns: 1fr;
        grid-template-rows: inherit;
    }

    #top-howto .howto-detail-title {
        order: 0;
    }
    #top-howto .howto-detail-image {
        order: 1;
    }
    #top-howto .howto-detail-text {
        order: 2;
    }

    #top-howto .howto-detail-title img {
        height: 55px;
        max-width: 100%;
    }

    #top-howto .howto-detail-text h3 {
        padding-left: 0;
        padding-right: 0;
        font-size: 21px;
    }
    #top-howto .howto-detail-text p {
        font-size: 12px;
    }

    #top-howto .howto-detail-image {
        grid-column: auto;
        grid-row: auto;
    }
    
    #top-howto .top-howto-detail .ticket-image {
        display: none;
    }

    #top-howto .howto-detail-title,
    #top-howto .howto-detail-text {
        padding-left: 3.5vw;
    }

}


/*--------------------------------------
    top-users-voice
*/
#top-users-voice {
    background: #8f0811;
    width: 100%;
    max-width: 1010px;
}

#top-users-voice a {
    padding: 18px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap :20px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}

#top-users-voice a:hover {
    opacity: .6;
}

#top-users-voice .top-users-voice-text span {
    display: inline-block;
}

#top-users-voice .use-voice-arrow {
    display: flex;
    align-items: center;
    justify-content: right;
    flex-shrink: 0;
    gap: 5px;
    font-family: 'EB Garamond', 'Cormorant', "Noto Serif JP", "ヒラギノ明朝 ProN", " Hiragino Mincho ProN", "YuMincho Medium", serif;
    font-size: 15px;
    font-style: italic;
    font-weight: normal;
}


#top-users-voice .use-voice-arrow .circle {
    fill: rgba(255,255,255,.7);
}

#top-users-voice .use-voice-arrow .arrow {
    stroke: #970811;
}

@media (min-width: 640px) and (max-width: 860px) {
    #top-users-voice .top-users-voice-text span.line {
        display: inline !important;
    }
}

@media screen and (max-width: 639px) {
    #top-users-voice {
        width: 95%;
    }
    #top-users-voice a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        padding: 20px 5%;
        gap: 10px;
    }

    #top-users-voice .top-users-voice-text {
        text-align: center;
        font-weight: 500;
        font-size: 12px;
    }
    #top-users-voice .use-voice-arrow {
        font-size: 17px;
    }
}


/*--------------------------------------
    seat-line-up
*/

#top-seat-line-up {
    margin-top: 130px;
}
#top-seat-line-up .seat-list {
    width: 100%;
    max-width: 1010px;
    display: grid;
    grid-template-columns: 42% 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

#top-seat-line-up .seat-stadium img {
    width: 100%;
}

#top-seat-line-up .seat-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
#top-seat-line-up .seat-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-family-gothic);
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 6px 12px;
    line-height: 1.3;;
}

#top-seat-line-up .seat-links a {
    position: relative;
}

#top-seat-line-up .seat-links a:hover {
    opacity: 1;
    filter: brightness(1.25);
    transition: filter .15s;
}

#top-seat-line-up .seat-right-links a:last-child {
    padding-top: 3px;
    padding-bottom: 4px;
}

#top-seat-line-up .seat-links .circle-arrow {
    width: 30px;
    height: 30px;;
}
#top-seat-line-up .seat-links .circle-arrow svg {
    display: block;
}

#top-seat-line-up .seat-links .circle-arrow .circle {
    fill: rgba(255,255,255,.7);
}


@media (min-width: 640px) and (max-width: 999px) {
    #top-seat-line-up .seat-list {
        grid-template-columns: 48% 48%;
    }
    #top-seat-line-up .seat-list .seat-stadium {
        grid-column: span 2;
    }
     #top-seat-line-up .seat-list .seat-stadium img {
        width: 50%;
        display: block;
        margin: 0 auto;
     }
}


@media (max-width: 639px) {
    #top-seat-line-up .seat-list {
        grid-template-columns: 1fr;
        width: 95%;
        gap: 12px;
    }
    #top-seat-line-up .seat-links a {
        letter-spacing: -1px;
    }
}

#top-seat-line-up .seat-toshiba {
    background: var(--color-seat-toshiba);
}
#top-seat-line-up .seat-toshiba .circle-arrow .arrow {
    stroke: var(--color-seat-toshiba);
}

#top-seat-line-up .seat-green {
    background: var(--color-seat-green);
}
#top-seat-line-up .seat-green .circle-arrow .arrow {
    stroke: var(--color-seat-green);
}

#top-seat-line-up .seat-smbc {
    background: var(--color-seat-smbc);
}
#top-seat-line-up .seat-smbc .circle-arrow .arrow {
    stroke: var(--color-seat-smbc);
}

#top-seat-line-up .seat-breeze {
    background: var(--color-seat-breeze);
}
#top-seat-line-up .seat-breeze .circle-arrow .arrow {
    stroke: var(--color-seat-breeze);
}

#top-seat-line-up .seat-breeze-upper {
    background: var(--color-seat-breeze-upper);
}
#top-seat-line-up .seat-breeze-upper .circle-arrow .arrow {
    stroke: var(--color-seat-breeze-upper);
}

#top-seat-line-up .seat-right {
    background: var(--color-seat-right);
}
#top-seat-line-up .seat-right .circle-arrow .arrow {
    stroke: var(--color-seat-right);
}

#top-seat-line-up .seat-left {
    background: var(--color-seat-left);
}
#top-seat-line-up .seat-left .circle-arrow .arrow {
    stroke: var(--color-seat-left);
}

#top-seat-line-up .seat-green-premium {
    background: var(--color-seat-green-premium);
}
#top-seat-line-up .seat-green-premium .circle-arrow .arrow {
    stroke: var(--color-seat-green-premium);
}

#top-seat-line-up .seat-green-upper {
    background: var(--color-seat-green-upper);
}
#top-seat-line-up .seat-green-upper .circle-arrow .arrow {
    stroke: var(--color-seat-green-upper);
}

#top-seat-line-up .seat-smbc-first {
    background: var(--color-seat-smbc-first);
}
#top-seat-line-up .seat-smbc-first .circle-arrow .arrow {
    stroke: var(--color-seat-smbc-first);
}

#top-seat-line-up .seat-ivy {
    background: var(--color-seat-ivy);
}
#top-seat-line-up .seat-ivy .circle-arrow .arrow {
    stroke: var(--color-seat-ivy);
}

#top-seat-line-up .seat-smbc-relax {
    background: var(--color-seat-smbc-relax);
}
#top-seat-line-up .seat-smbc-relax .circle-arrow .arrow {
    stroke: var(--color-seat-smbc-relax);
}

#top-seat-line-up .seat-panorama {
    background: var(--color-seat-panorama);
}
#top-seat-line-up .seat-panorama .circle-arrow .arrow {
    stroke: var(--color-seat-panorama);
}

#top-seat-line-up .seat-secom {
    background: var(--color-seat-secom);
}
#top-seat-line-up .seat-secom .circle-arrow .arrow {
    stroke: var(--color-seat-secom);
}


/*--------------------------------------
    top-seat-slides
*/

#top-seat-slides {
    margin-top: 100px;
    position: relative;
}

#top-seat-slides img {
    display: block;
}
#top-seat-slides .seat-slides {
    background: #000;
}
#top-seat-slides .seat-slides .swiper-slide {
    text-align: center;
}

#top-seat-slides .seat-slides .seat-slide-label {
    font-family: var(--font-family-gothic);
    line-height: 1;
    color: #fff;
    height: 2em;
    display: grid;
    place-content: center;
    background: #000;
}
#top-seat-slides .seat-slides-wrap {
    position: relative;
}
#top-seat-slides .seat-slides-wrap .swiper-wrapper {
    transition-timing-function: linear;
}

#top-seat-slides .slide-view-all {
    position: absolute;
    background: #000;
    width: 250px;
    height: 100%;
    top: 0;
    right: 20%;
    z-index: 10;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
    gap: 55px;
    place-content: center;
    padding-top: 40px;
}

#top-seat-slides .slide-view-all > * {
    margin-left: auto;
    margin-right: auto;
}

#top-seat-slides .slide-view-all .view-all {
    width: 64%;
    display: block;
}

#top-seat-slides .slide-view-all p {
        color: #fff;
        font-family: 'EB Garamond', "Noto Serif JP", "ヒラギノ明朝 ProN", " Hiragino Mincho ProN", "YuMincho Medium", serif;
        font-style: italic;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
}

#top-seat-slides .pc-slide-2 {
    margin-top: 30px;
}
#top-seat-slides .pc-slide-2 .swiper-wrapper {
    padding-left: 200px;
}



@media screen and (max-width: 639px) {
    #top-seat-slides .seat-slides-wrap.sp .slide-view-all {
        position: static;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    #top-seat-slides .seat-slides-wrap.sp .slide-view-all .view-all {
        width: 40%;
    }

    #top-seat-slides .seat-slides .swiper-slide img {
        width: 100%
    }
}



/*--------------------------------------
    TOPICS
*/
#top-topics {
    margin-top: 110px;
    padding: 90px 0 70px;
    background: #f5f2e9;
}

#top-topics .topics-contents {
    display: flex;
    justify-content: space-between;
    gap: 55px;
    width: 1200px;
    max-width: 90%;
}

#top-topics .topics-contents .topics-left {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#top-topics .topics-contents .topics-right {
    width: 100%;
}
#top-topics .topics-left h3 {
    text-align: right;
    margin-top: 0;
}
#top-topics .topics-left h3 img {
    height: 55px;
    width: auto;
}

#top-topics .topics-right h5 {
    font-size: 27px;
    letter-spacing: -1px;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 500;
}

#top-topics .topics-row {
    padding-bottom: 25px;
}

#top-topics .topics-row:nth-of-type(n + 2) {
    padding-top: 25px;
    border-top: 1px dotted #000;
}

#top-topics .topics-contents .bottom {
    display: flex;
    justify-content: space-between;
    gap: 115px;
    position: relative;
}

#top-topics .topics-contents .topics-detail {
    font-size: 21px;
    font-family: var(--font-family-mincho);
    line-height: 1.5;
}
#top-topics .topics-contents .topics-detail a {
    color: #005d3b;
}

#top-topics .topics-contents .attn {
    font-size: 12px;
    font-family: var(--font-family-gothic);
    margin-top: 5px;
}

#top-topics .topics-contents .attn a {
    color: var(--color-font-base);
}


#top-topics .topics-contents .ticket-image img {
    width: 315px;
    max-width: 100%;
}

#top-topics .topics-contents .anchor-transition {
    width: 210px;
}

#top-topics .topics-contents .anchor-transition:before {
    background: linear-gradient(90deg, rgba(35, 0, 0, 1) 0%, rgba(182, 30, 45, 1) 100%);
}

#top-topics .ticket-image .attn-small {
    text-align: right;
}

@media (max-width: 1199px) {
    #top-topics .topics-contents .topics-row .bottom {
        padding-bottom: 0;
    }
}

@media (max-width: 999px) {
    #top-topics .topics-contents {
        flex-direction: column;
        align-items: center;
    }
    #top-topics .topics-contents .bottom {
        column-gap: 40px;
    }
}

@media (max-width: 960px) {
    #top-topics .topics-contents .topics-detail br.pc {
        display: none;
    }
}

@media (max-width: 639px) {
    
    #top-topics .topics-left h3 {
        text-align: center;
    }
    #top-topics .topics-contents .topics-left {
        width: 100%;
        justify-content: center;
    }
    #top-topics .topics-contents .topics-right {
        width: 90%;
        margin: 0 auto;
    }
    #top-topics .topics-row {
        padding-left: 0;
    }
    #top-topics .topics-right h4 {
        font-size: 36px;
        margin-top: 30px;
    }
    #top-topics .topics-right h5 {
        font-size: 19px;
        font-weight: 600;
    }
    #top-topics .topics-contents .bottom {
        display: grid;
        gap: 10px;
    }
}

/*--------------------------------------
    年間予約席のご注意
*/
#seat-note {
    width: 1000px;
    max-width: 90%;
    margin: 60px auto 0;
    font-size: 15px;
    font-family: var(--font-family-gothic);
}

#seat-note h2 {
    text-align: left;
    margin: 0;
    font-size: 20px;
    min-height: auto;
}

#seat-note .seat-note-detail {
    margin-top: 20px;
}

#seat-note .seat-note-detail ul {
    padding-left: 18px;
}

#seat-note .seat-note-detail ul li {
    list-style: '■ ';
}


#seat-note .seat-note-detail .underscore {
    padding-bottom: 1.2em;
}

@media (max-width: 639px) {
    #seat-note .seat-note-detail {
        font-size: 12px;
    }
}