*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}img{max-width:100%;height:auto;vertical-align:bottom}table{border-collapse:collapse}textarea{white-space:revert}input,textarea{-webkit-user-select:auto;user-select:auto}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}:where([hidden]){display:none}:where([contenteditable]){-webkit-user-modify:read-write;overflow-wrap:break-word}:where([draggable="true"]){-webkit-user-drag:element}:where(iframe){border:none;}



:root {
    --color-theme-yellow: #F7DF2C;
    --color-sumi: #212121;
    --color-grey: #7F7F7F;
    --box-shadow-img: 2em 2em 0 var(--color-theme-yellow);
    --box-shadow-img-pc: 3em 3em 0 var(--color-theme-yellow);
    --box-shadow-img-small: 1.2em 1.2em 0 var(--color-theme-yellow);
    --round-L:2em;
    --round-M:1em;
}


/* =============================
   汎用パーツ
============================= */
.sp {
    display: block;
}
.pc {
    display: none;
}
@media (min-width: 768px) {
    .sp {
        display: none;
    }
    .pc {
        display: block;
    }
}
a {
    transition: .2s;
}
a.blank::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f35d";
    font-size: .7em;
    transform: translate(0, -.2em);
    display: inline-block;
    margin-left: .3em;
}
.iframe_wrap {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    max-width:100%;
    border-radius:var(--round-M);
}
.iframe_wrap iframe, .iframe_wrap object, .iframe_wrap embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.anchor {
    position: absolute;
    top: -8em;
}
.null {
    pointer-events:none;
    /* opacity:.4; */
}

.post_desc {
  line-height: 1.8;
}
.post_desc h1 {
  font-size: 3em;
  font-weight: 700;
  line-height: 1.2em;
}
.post_desc h2 {
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.2em;
}
.post_desc h3 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.2em;
}
.post_desc h4 {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.4em;
}
.post_desc h5 {
  font-size: 1.2em;
  font-weight: 700;
}
.post_desc h6 {
  font-size: 1em;
  font-weight: 700;
}
.post_desc a {
  text-decoration: underline;
}
.post_desc a:hover:has(img) {
  opacity: 0.7;
}
.post_desc strong {
  font-weight: 700;
}
.post_desc em {
  display: inline-block;
  transform: skew(-10deg, 0deg);
}
.post_desc hr {
  display: block;
  height: 1px;
  background: var(--color-grey);
}
.post_desc li {
    padding-left: 1.2em;
    position: relative;
}
.post_desc li:before {
    content: "●";
    position: absolute;
    top: 0;
    left: 0;
}

.toggle_switch {
    cursor: pointer;
}
.toggle_content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-out;
}

.link_btn {
    margin: 1em auto;
    display: block;
    background: rgb(255 255 255 / 0.8);
    width: 80%;
    max-width: 240px;
    line-height: 2.6em;
    border: 2px solid var(--color-sumi);
    border-radius: 2em;
}
.text_link {
    text-decoration: underline;
}

html {
    color: var(--color-sumi);
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight:700;
    font-style:normal;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    color: var(--color-sumi);
    background: url(../img/bg_body.webp) center top / 1000px auto repeat;
    overflow-x: clip;
}
@media (width >= 768px) {
    html {
        font-size: 16px;
    }
    body {
        font-size: 16px;
    }
}
.monoton {
    font-family: "Monoton", sans-serif;
    font-weight: 400;
    font-style: normal;
}



/* =================================================
HEADER
================================================= */
#header {
    width: 100%;
	height: 100vh;
    display: grid;
    place-content: center;
    place-items: center;
}
#header .sitetitle {
    width: 90vw;
    aspect-ratio: 1400 / 392;
    font-size: 0;
    line-height: 0;
    background: url(../img/logo_bar.webp) center / 100% no-repeat;
    margin-bottom: 32px;
}
#header .event_txt {
    font-size: 4.8vw;
    line-height: 1.2;
    margin-bottom: 48px;
}
#header .event_txt a {
    margin-top: 1em;
    font-size: .8em;
    display: inline-block;
    border: 2px solid var(--color-sumi);
    padding: .3em 1.2em;
    border-radius: 2em;

}
#header .event_txt small{
    font-size: .8em;
}
#header .event_txt i {
    font-size: .9em;
    letter-spacing: -.05em;
}
#header .copy_desc {
    display: grid;
    gap:32px;
    position: relative;
    font-size: clamp(14px, 4vw, 18px);
}
#header .copy_desc::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -5%);
    width: 100vw;
    aspect-ratio: 780 / 1332;
    background: url(../img/bg_section_sp.webp) 0 0 / 100% auto no-repeat;
    z-index: -1;
    mix-blend-mode: darken;
}

#header .copy_desc strong {
    text-decoration: underline;
    display: inline-block;
    font-size: clamp(24px, 6.5vw, 32px);
    letter-spacing: .05em;
    font-weight: 400;
    transform: skew(-20deg, 0deg);
}

.gNav {
	position:fixed;
	top:0;
	left:0;
    width: 100%;
    padding: 24px 0;
    z-index: 9999;
}
.gNav::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-theme-yellow);
    z-index: -1;
    transform: translate(0, -100%);
    transition: transform .4s;
}
.gNav.background::after {
    transform: translate(0, 0);
}
.gNav .menu {
    display: flex;
    gap: 32px;
    justify-content: center;
}
.gNav .menu a {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
}
@media (width >= 768px) {
    #header .sitetitle{
        max-width: 700px;
    }
    #header .event_txt {
        font-size: 32px;
        letter-spacing: -.02em;
    }
    .gNav .menu a {
        font-size: 24px;
    }
    #header .copy_desc::after {
        transform: translate(-50%, -22%);
        aspect-ratio: 256 / 160;
        background: url(../img/bg_section.webp) center / 100% auto no-repeat;
    }
}






/* =================================================
CONTENT
================================================= */
.wrap {
    padding: 0 24px;
    overflow: clip;
}
.content_sec {
    padding-bottom: 10em;
    max-width: 700px;
    margin: auto;
    position: relative;
}
.sec_title {
    font-size: 50px;
    line-height: 1;
    margin-bottom: 48px;
    position: relative;
}

.news_list {
    border-top: 1px solid var(--color-sumi);
    text-align: left;
}
.news_list.toggle_content {
    border-top: none;
}
.news_list li {
    padding: 2em 0;
    display: grid;
    gap: 7px;
    border-bottom: 1px solid var(--color-sumi);
}
.more_news {
    display: grid;
}
.more_news .more_btn {
    margin-top: 32px;
    font-size: 14px;
    text-decoration: underline;
    opacity: 1;
    visibility: visible;
    transition: .4s;
}
.more_news .more_btn.open {
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    height: 0;
}
@media (width >= 768px) {
    .content_sec {
        padding-bottom: 12em;
    }
    .sec_title {
        font-size: 60px;
        margin-bottom: 64px;
    }
    .news_list li {
        display: flex;
        /* align-items: center; */
        gap: 0;
    }
    .news_list .news_date {
        flex: 0 0 8em;
    }
    .news_title {
        flex: 1;
        word-break: break-all;
    }
}



.lineup_sec .sec_title::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0, -50%);
    width: 50vw;
    aspect-ratio: 128 / 80;
    background: url(../img/bg_section_mini.webp) center / 100% auto no-repeat;
    z-index: -1;
    mix-blend-mode: darken;
}
.lineup_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 2em;
    position: relative;
}
.lineup_list li {
    /* width: 46%; */
}
.lineup_list .head_liner {
    width: 100%;
}
.lineup_list li a {
    display: block;
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: .1em;
    border-radius: var(--round-L);
    box-shadow: var(--box-shadow-img-small);
    overflow: hidden;
}
.lineup_list li.head_liner a {
    border-radius: var(--round-L);
    box-shadow: var(--box-shadow-img);
}
.lineup_list li a img {
    transition: .2s;
}
.artist_name {
    line-height: 1.2;
}
.artist_name span,
.artist_name i {
    background: var(--color-sumi);
    color: var(--color-theme-yellow);
}
.artist_name span{
    font-size: clamp(16px, 6vw, 24px);
}
.artist_name i {
    font-size: clamp(14px, 3vw, 18px);
}
.head_liner .artist_name span{
    font-size: clamp(16px, 9vw, 60px);
}
.head_liner .artist_name i {
    font-size: clamp(16px, 5vw, 32px);
}


.andmore {
    margin-top: 32px;
    font-style: italic;
}

@media (width >= 768px) {
  .lineup_list li {
        width: 46%;
    }
    .lineup_list li a {
        border-radius: var(--round-M);
    }
}



.ticket_sec .sec_title::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -5%);
    width: 100vw;
    aspect-ratio: 780 / 1332;
    background: url(../img/bg_section_sp.webp) 0 0 / 100% auto no-repeat;
    z-index: -1;
    mix-blend-mode: darken;
}

.ticket_sec .lead_txt {
    display: grid;
    gap: 18px;
}
.ticket_sec .lead_txt strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.03em;
    margin-bottom: 8px;
}

.ticket_type {
    display: grid;
    gap: 16px;
    margin-top: 48px;
    grid-template-columns: repeat(2, 1fr);
    --color-standing: #2F6593;
    --color-seat: #209751;

    max-width: 460px;
    margin-inline: auto;
}
.ticket_type .ticket_cnt {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    border-radius: var(--round-M);
    background: rgb(255 255 255 / 0.8);
    border-width: 2px;
    border-style: solid;
    overflow: hidden;
    gap: 0;
}
.ticket_type .ticket_cnt.standing {
    color: var(--color-standing);
    border-color: var(--color-standing);
}
.ticket_type .ticket_cnt.seat {
    color: var(--color-seat);
    border-color: var(--color-seat);
}
.ticket_type .ticket_cnt .ticket_name {
    color: #fff;
    padding: .8em 0;
}
.ticket_type .ticket_cnt.standing .ticket_name {
    background: var(--color-standing);
}
.ticket_type .ticket_cnt.seat .ticket_name {
    background: var(--color-seat);
}
.ticket_type .ticket_cnt .ticket_price {
    padding:2em 0;
    min-height: 140px;
    place-content: center;
    font-size: 1.2em;
}
.ticket_type .ticket_cnt .ticket_price small {
    font-size: .8em;
}
.ticket_type .ticket_cnt .ticket_price i {
    font-weight: 400;
    font-size: .9em;
}
.ticket_type .ticket_cnt .barcode {
    aspect-ratio: 2 / 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70% auto;
    border-top-width: 2px;
    border-top-style: dashed;
}
.ticket_type .ticket_cnt.standing .barcode {
    border-color: var(--color-standing);
    background-image: url(../img/barcode_blu.webp);
}
.ticket_type .ticket_cnt.seat .barcode {
    border-color: var(--color-seat);
    background-image: url(../img/barcode_grn.webp);
}
.ticket_note {
    margin-top: 1.2em;
    font-size: .9em;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    max-width: 470px;
    margin-inline: auto;
    display: grid;
    gap: .8em;
}
.ticket_note li {
    position: relative;
    padding-left: 1em;
}
.ticket_note li::before {
    content: "※";
    position: absolute;
    left: 0;
}
@media (width >= 768px) {
    .ticket_sec .lead_txt {
        gap: 24px;
    }
    .ticket_sec .lead_txt strong {
        font-size: 24px;
    }
    .ticket_type {
        gap: 48px;
    }
    .ticket_type .ticket_cnt .ticket_price {
        min-height: 160px;
    }
    .ticket_sec .sec_title::after {
        transform: translate(-50%, -22%);
        aspect-ratio: 256 / 160;
        background: url(../img/bg_section.webp) center / 100% auto no-repeat;
    }
}


.credit_list {
    border-radius: var(--round-L);
    border: 1px solid var(--color-grey);
    background: rgb(255 255 255 / 0.8);
    padding: 3em 1em;
    display: grid;
    gap: 2em;
    position: relative;
}
.credit_item {
    display: grid;
    gap: 1em;
}
.credit_desc {
    font-weight: 400;
}
.credit_desc small {
    font-size: .8em;
}

.credit_list::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(0, -50%) scale(-1, 1);
    width: 50vw;
    aspect-ratio: 195 / 122;
    background: url(../img/bg_section_mini.webp) center / 100% auto no-repeat;
    z-index: -1;
}




/* =================================================
FOOTER
================================================= */
#footer {
    padding: 80px 0;
    background: var(--color-theme-yellow);
}
#footer .footer_logo a {
    display: block;
    text-indent: -9999px;
    width: 125px;
    background: url(../img/logo_box.webp) center / 100% no-repeat;
    aspect-ratio: 251 / 340;
    margin: 0 auto 32px;
}
.sns_lnik{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:16px;
}
.sns_lnik a {
    display: block;
    font-size: 24px;
}
.copyright{
    margin-top: 80px;
	font-size:12px;
    font-weight: 400;
}





/* =============================
   HOVER
============================= */
@media (any-hover: hover) {
    .gNav .menu a:hover,
    .sns_lnik a:hover,
    .lineup_list .head_liner a:hover img {
        transform: scale(1.1);
    }
    #footer .footer_logo a:hover {
        opacity: 0.8;
    }
    .more_news .more_btn:hover,
    .text_link:hover {
        text-decoration: none;
    }
    #header .event_txt a:hover,
    .link_btn:hover {
       background:var(--color-theme-yellow);
    }
}