@charset "utf-8";

:root {
    --black: #141414;
    --black80: rgb(20 20 20 / 0.8);
    --white: #fff;
    --whiteOpacity: #ffffff30;
    --gray: #7E7E7E;
    --gray02: #EAEAEA;
    --commonColor: #93B3BC;
    --hero: #a8cedc;
    --mainColor: #E63082;
    --bg: linear-gradient(180deg, rgba(177, 212, 218, 1) 0%, rgba(216, 237, 242, 1) 100%);
    --bgSub: #B1D4DA;
    --commonFont: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    --titleFont: "benton-modern-display", serif;
}



/*===================================================
  AOP
====================================================*/
header.header {
    display: none;
}

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



/*===================================================
  anim
====================================================*/
.loader{
    position: fixed;
    height: 100%;
    width: 100%;
    background: var(--hero);
    z-index: 9999;
}

.mainWrap .anim.fadeX,
.mainWrap .anim.fadeY {
    opacity: 0;
    transition: all .5s ease-out;
}
.mainWrap .anim.fadeX {
    transform: translateX(20px);
}
.mainWrap .anim.fadeY {
    transform: translateY(20px);
}
.mainWrap .anim.fadeX.on,
.mainWrap .anim.fadeY.on {
    opacity: 1;
}
.mainWrap .anim.fadeX.on {
    transform: translateX(0px);
}
.mainWrap .anim.fadeY.on {
    transform: translateY(0px);
}

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



/*===================================================
    bgBox
====================================================*/
.bgBox {
    pointer-events: none;
    width: 100%;
    height: 100%;
    padding: 0;
    position: fixed;
    z-index: -2;
    left: 0;
    top: 0;
    min-height: 750px;
    transform: translate3d(0, 0, -1px);
    overflow: hidden;
}
.bgBox .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.bgBox .bg01 {
    background: var(--bgSub);
    background: var(--bg);
}

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

	.bgBox {
	    min-height: 450px;
	    height: 100vh;
	}
	.bgBox .bg {
		height: 100vh;
	}
    .bgBox .bg.bg01 {}

}



/*===================================================
	memu
====================================================*/
.hamBtn {
    display: block;
    position: fixed;
    right: 40px;
    top: 40px;
    width: 60px;
    height: 25px;
    transition: all .3s ease;
    cursor: pointer;
    z-index: 9998;
}
.hamBtn span {
    display: block;
    position: absolute;
    right: 0;
    width: 100%;
    height: 2px;
    background: var(--black);
    transition: all .3s ease;
}
.hamBtn :nth-of-type(1) {
    top: 0;
}
.hamBtn :nth-of-type(2) {
    bottom: 0;
}
.hamBtn.open span {}
.hamBtn.open span:nth-of-type(1) {
    transform: translateY(-50%) rotate(-15deg);
    top: 50%;
}
.hamBtn.open span:nth-of-type(2) {
    transform: translateY(50%) rotate(15deg);
    bottom: 50%;
}

.navigation {
    opacity: 0;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    position: fixed;
	transition: all 0.5s ease-out;
}
.navigation.active {
    transition: opacity 0.5s ease;
    pointer-events:auto;
    opacity:1;
}
.navigation .headerNav {
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    background: var(--hero);
}
.navigation .headerNav li {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
}
.navigation .headerNav li:nth-last-child(3) {
    margin-bottom: 30px;
}
.navigation .headerNav li:last-child {
	margin: 0;
}
.navigation .headerNav li a {
    display: block;
    position: relative;
    color: var(--black);
    font-family: var(--titleFont);
    font-size: 24px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
}
.navigation .headerNav li.snsWrap {
    display: flex;
}
.navigation .headerNav li.snsWrap p {
    margin: 0 20px 0 0;
}
.navigation .headerNav li.snsWrap p:last-child {
    margin: 0;
}
.navigation .headerNav li.snsWrap p a {
    font-size: 20px;
}
.navigation .headerNav li.snsWrap p a i {}
.navigation .headerNav li.fc {}
.navigation .headerNav li.fc a {
    color: var(--white);
    background: var(--mainColor);
    font-size: 16px;
    padding: 15px 20px;
}

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

	.navigation .headerNav li a:hover {
	    opacity: 0.7;
	}

}

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

	.hamBtn {
        width: 40px;
        height: 10px;
        top: 30px;
        right: 20px;
    }

	.navigation .headerNav li {
	    line-height: 1.2;
	}
    
}



/*===================================================
	ALL
====================================================*/
html {}

.mainWrap {
    position: relative;
    z-index: 1;
    font-size: 15px;
    line-height: 1.5;
    font-family: var(--commonFont);
    color: var(--black);
}
.mainWrap img {
    display: block;
}

.container {
    padding: 0 0 150px;
}

section {
    margin-bottom: 50px;
}
section .inBox {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--commonColor);
    padding: 50px;
    border-radius: 20px;
}
section .inBox h3 {
    font-family: var(--titleFont);
    font-size: 50px;
    text-align: center;
    line-height: 1;
    margin: 0 0 20px;
}
section .inBox h4 {
    text-align: center;
    line-height: 1;
    margin-bottom: 30px;
    font-weight: 600;
}

@media screen and (min-width:961px) {
    
    .sp {
        display: none;
    }

    a {
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

}

@media screen and (max-width:960px) {
    
    .pc {
        display: none;
    }

    html {}

    .mainWrap {
        font-size: 14px;
        list-style: 1.4;
    }

    .container {
        padding: 0 0 100px;
    }

    section {
        margin-bottom: 30px;
    }
    section .inBox {
        padding: 30px 20px;
    }
    section .inBox h3 {
        font-size: 25px;
        margin-bottom: 10px;
    }
    section .inBox h4 {
        font-size: 12px;
        margin-bottom: 20px;
    }

}



/*===================================================
    heroView
====================================================*/
#heroView {
    position: relative;
    height: 100vh;
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
}
#heroView .mov {
    width: 100%;
    padding-top: 56.25%;
}
#heroView .mov video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
#heroView .movBg {
    width: 100%;
    padding-top: 56.25%;
}
#heroView .movBg video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120% !important;
    height: 120% !important;
    object-fit: cover;
    filter: blur(30px);
    z-index: -1;
}

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

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

    #heroView {
        height: 100svh;
        min-height: 450px;
    }
    #heroView .mov {}
    #heroView .mov video {}
    #heroView .movBg {}
    #heroView .movBg video {}

}



/*===================================================
    visual
====================================================*/
#visual {
    margin-bottom: 120px;
}
#visual .kv {
    max-width: 1920px;
    margin: 0 auto;
}

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

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

    #visual {
        margin-bottom: 60px;
    }
    #visual .kv {}

}



/*===================================================
    news
====================================================*/
#news {}
#news .inBox {}
#news .inBox h3 {}
#news .inBox h4 {}

#news .inBox .newsList {
    max-width: 750px;
    margin: 0 auto;
}
#news .inBox .newsList li {
    margin-bottom: 20px;
}
#news .inBox .newsList li:last-child {
    margin-bottom: 0;
}
#news .inBox .newsList li a {
    display: block;
    display: flex;
    justify-content: flex-start;
    background: var(--black);
    color: var(--white);
    padding: 40px;
    border-radius: 10px;
    line-height: 1.4;
}
#news .inBox .newsList li a .date {
    margin: 0 40px 0 0;
}
#news .inBox .newsList li a .listTxt {}

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

    #news .inBox .newsList li a:hover {
        opacity: 0.7;
    }

}

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

    #news {}
    #news .inBox {}
    #news .inBox h3 {}
    #news .inBox h4 {}

    #news .inBox .newsList {}
    #news .inBox .newsList li {
        margin-bottom: 10px;
    }
    #news .inBox .newsList li:last-child {}
    #news .inBox .newsList li a {
        padding: 20px;
        flex-direction: column;
        line-height: 1.4;
    }
    #news .inBox .newsList li a .date {
        font-size: 12px;
        margin-bottom: 5px;
    }
    #news .inBox .newsList li a .listTxt {}

}



/*===================================================
    schedule
====================================================*/
#schedule {}
#schedule .inBox {}
#schedule .inBox h3 {}
#schedule .inBox h4 {}

#schedule .inBox .detailBox {
    display: block;
    background: var(--black);
    color: var(--white);
    padding: 40px;
    border-radius: 10px;
    line-height: 1.4;
}
#schedule .inBox .detailBox .detailTit {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    margin: 0 0 40px;
}
#schedule .inBox .detailBox ul {}
#schedule .inBox .detailBox ul li {
    display: flex;
    border-bottom: 1px solid;
    padding: 30px 20px;
    align-items: stretch;
}
#schedule .inBox .detailBox ul li:first-child {
    border-top: 1px solid;
    padding: 30px 20px;
}
#schedule .inBox .detailBox ul li:last-child {}
#schedule .inBox .detailBox ul li .left {
    width: 20%;
    padding: 0 40px 0 0;
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.6em;
    font-size: 14px;
}
#schedule .inBox .detailBox ul li .right {
    width: 80%;
    position: relative;
    padding: 0 0 0 40px;
    border-left: 1px solid;
    text-align: left;
}

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

    #schedule .inBox .scheduleBox .scheduleTit span.spSpan,
    #schedule .inBox .scheduleBox .scheduleTxt span.spSpan {
        display: none;
    }

}

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

    #schedule {}
    #schedule .inBox {}
    #schedule .inBox h3 {}
    #schedule .inBox h4 {}

    #schedule .inBox .detailBox {
        padding: 20px;
    }
    #schedule .inBox .detailBox .detailTit {
        font-size: 16px;
        margin: 0 0 20px;
    }
    #schedule .inBox .detailBox ul {}
    #schedule .inBox .detailBox ul li {
        padding: 15px 0;
        display: flex;
        flex-direction: column;
    }
    #schedule .inBox .detailBox ul li:first-child {
        padding: 15px 0;
    }
    #schedule .inBox .detailBox ul li:last-child {}
    #schedule .inBox .detailBox ul li .left {
        width: 100%;
        padding: 0 0 0 10px;
        margin: 0 0 10px;
        border-left: 5px solid;
    }
    #schedule .inBox .detailBox ul li .right {
        width: 100%;
        border: none;
        padding: 0;
    }

}








/*===================================================
    about
====================================================*/
#about {}
#about .inBox {}
#about .inBox h3 {}
#about .inBox h4 {}

#about .inBox .detailBox {
    display: block;
    background: var(--black);
    color: var(--white);
    padding: 40px;
    border-radius: 10px;
    line-height: 1.4;
}
#about .inBox .detailBox .detailTit {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    margin: 0 0 40px;
}
#about .inBox .detailBox ul {}
#about .inBox .detailBox ul li {
    display: flex;
    border-bottom: 1px solid;
    padding: 30px 20px;
    align-items: stretch;
}
#about .inBox .detailBox ul li:first-child {
    border-top: 1px solid;
    padding: 30px 20px;
}
#about .inBox .detailBox ul li:last-child {}
#about .inBox .detailBox ul li .left {
    width: 20%;
    padding: 0 40px 0 0;
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.6em;
    font-size: 14px;
}
#about .inBox .detailBox ul li .right {
    width: 80%;
    position: relative;
    padding: 0 0 0 40px;
    border-left: 1px solid;
    text-align: left;
}

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

    #about .inBox .aboutBox .aboutTit span.spSpan,
    #about .inBox .aboutBox .aboutTxt span.spSpan {
        display: none;
    }

}

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

    #about {}
    #about .inBox {}
    #about .inBox h3 {}
    #about .inBox h4 {}

    #about .inBox .detailBox {
        padding: 20px;
    }
    #about .inBox .detailBox .detailTit {
        font-size: 16px;
        margin: 0 0 20px;
    }
    #about .inBox .detailBox ul {}
    #about .inBox .detailBox ul li {
        padding: 15px 0;
        display: flex;
        flex-direction: column;
    }
    #about .inBox .detailBox ul li:first-child {
        padding: 15px 0;
    }
    #about .inBox .detailBox ul li:last-child {}
    #about .inBox .detailBox ul li .left {
        width: 100%;
        padding: 0 0 0 10px;
        margin: 0 0 10px;
        border-left: 5px solid;
    }
    #about .inBox .detailBox ul li .right {
        width: 100%;
        border: none;
        padding: 0;
    }

}





/*===================================================
    ticket
====================================================*/
#ticket {}
#ticket .inBox {}
#ticket .inBox h3 {}
#ticket .inBox h4 {}

#ticket .inBox .indent {
    text-indent: -0.5em;
    padding: 0 0 0 0.5em;;
}
#ticket .inBox .indent.indent01 {
    text-indent: -1em;
    padding: 0 0 0 1em;;
}
#ticket .inBox .note {
    text-indent: -1em;
    padding: 0 0 0 1em;
    font-size: 14px;
}
#ticket .inBox .bold {
    font-weight: bold;
}

#ticket .inBox .ticketWrap {
    margin: 0 0 50px;
}
#ticket .inBox .ticketWrap .ticketBoxTit.ticketBox {
    text-align: center;
    font-weight: bold;
    border-bottom: none;
    margin: 0 0 1px;
    font-size: 13px;
}
#ticket .inBox .ticketWrap .ticketBoxTit.ticketBox .seat {
    background: var(--black);
    color: var(--white);
    padding: 5px;
}
#ticket .inBox .ticketWrap .ticketBoxTit.ticketBox .price {
    background: var(--black);
    color: var(--white);
    padding: 5px;
    border: none;
}
#ticket .inBox .ticketWrap .ticketBoxTit.ticketBox .detail {
    background: var(--black);
    color: var(--white);
    padding: 5px;
}
#ticket .inBox .ticketWrap .ticketBox {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    margin: 0 0 1px;
}
#ticket .inBox .ticketWrap .ticketBox:nth-last-child(2),
#ticket .inBox .ticketWrap .ticketBox:last-child {
    margin: 0;
}
#ticket .inBox .ticketWrap .ticketBox .seat {
    width: calc(20% - 2px / 3);
    padding: 20px;
    background: var(--black);
    color: var(--white);
    font-weight: bold;
}
#ticket .inBox .ticketWrap .ticketBox .price {
    width: calc(20% - 2px / 3);
    padding: 20px;
    border-right: 1px solid var(--black);
}
#ticket .inBox .ticketWrap .ticketBox .detail {
    width: calc(60% - 2px / 3);
    padding: 20px;
}
#ticket .inBox .ticketWrap .ticketBox .detail .detailTxt {
    margin: 0 0 20px;
}
#ticket .inBox .ticketWrap .ticketBox .detail .detailTxt:last-child {
    margin-bottom: 0;
}
#ticket .inBox .ticketWrap .ticketBox .detail .detailTxt p {
    margin-bottom: 5px;
}
#ticket .inBox .ticketWrap .ticketBox .detail .detailTxt p:last-child {
    margin-bottom: 0;
}
#ticket .inBox .ticketWrap .ticketBox .detail .upDateBox {
    background: var(--whiteOpacity);
    padding: 30px;
}
#ticket .inBox .ticketWrap .ticketBox .detail .txtBox {
    margin: 0 0 20px;
}
#ticket .inBox .ticketWrap .ticketBox .detail .txtBox:last-child {
    margin-bottom: 0;
}
#ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTit {
    border-left: 3px solid;
    padding: 0 0 0 10px;
    font-weight: bold;
    margin: 0 0 5px;
}
#ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTxt {}
#ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTxt p {
    margin-bottom: 5px;
}
#ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTxt p:last-child {
    margin-bottom: 0;
}
#ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTxt span {
    display: block;
    margin: 2px 0 0;
}

#ticket .inBox .ticketWrap .ticketBox .detail .detailTxt p a.innerLink {
    font-size: 13px;
    text-align: center;
    background-color: var(--black);
    color: var(--white);
    width: 100%;
    max-width: 120px;
    text-decoration: none;
    border-radius: 100px;
    padding: 10px;
    display: block;
    margin: 10px 0 0;
    font-weight: bold;
}

#ticket .inBox .dome {
    margin-bottom: 50px;
}

#ticket .inBox .tokuten {
    margin-bottom: 50px;
}

#ticket .inBox .accordBoxTit {
    text-align: center;
    margin: 0 0 30px;
}
#ticket .inBox .accordBoxTit span {
    background: var(--black);
    color: var(--white);
    padding: 5px 40px;
    border-radius: 100px;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
}

/* accord */
#ticket .inBox .accordBox {
    max-width: 800px;
    margin: 0 auto 50px;
}
#ticket .inBox .accordBox .op_ticket {
	margin: 0 0 20px;
}
#ticket .inBox .op_ticket:last-child {
	margin: 0;
}
#ticket .inBox .op_ticket .ticketTit {
    background: var(--black);
    color: var(--white);
    padding: 30px 60px 30px 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    border-radius: 10px;
}
#ticket .inBox .op_ticket .ticketTit .op_tit {
    text-align: center;
}
#ticket .inBox .op_ticket .ticketTit.open {}
#ticket .inBox .op_ticket .ticketTit span {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 15px;
    height: 15px;
    transform: rotate(180deg) translateY(50%);
    transition: 0.3s ease;
}
#ticket .inBox .op_ticket .ticketTit.open span {
    transform: translateY(-50%);
}
#ticket .inBox .op_ticket .ticketTit span:before {
    content: "";
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
}
#ticket .inBox .op_ticket .ticketDetail{
    display: none;
    padding: 40px 0;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox {
	display: flex;
    border-bottom: 1px solid;
    padding: 0 0 20px;
    margin: 0 0 20px;
    align-items: center;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox:first-child {
    border-top: 1px solid;
    padding: 20px 0;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox:last-of-type {
    margin: 0 0 40px;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .tit {
    width: 25%;
    text-align: center;
    font-weight: 600;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt {
    width: 75%;
    padding: 0 30px;
    border-left: 1px solid;
}
#ticket .inBox .op_ticket .ticketDetail .noteBox {
    margin: 0 0 35px;
}
#ticket .inBox .op_ticket .ticketDetail .noteBox p {
    margin-bottom: 5px;
    text-indent: -1em;
    padding: 0 0 0 1em;
}
#ticket .inBox .op_ticket .ticketDetail .noteBox p:last-child {
    margin-bottom: 0;
}

#ticket .inBox .op_ticket .ticketDetail .btn {
    margin-bottom: 20px;
}
#ticket .inBox .op_ticket .ticketDetail .btn:last-child {
    margin-bottom: 0px;
}
#ticket .inBox .op_ticket .ticketDetail .btn a {
    font-size: 16px;
    text-align: center;
    background-color: var(--black);
    color: var(--white);
    width: 100%;
    max-width: 350px;
    text-decoration: none;
    border-radius: 100px;
    padding: 20px;
    display: block;
    margin: 0px auto;
    font-weight: bold;
}
#ticket .inBox .op_ticket .ticketDetail .btn.fcBtn a {
    background-color: var(--mainColor);
    color: var(--white);
}
#ticket .inBox .op_ticket .ticketDetail .btn.grayBtn a {
    pointer-events: none;
    background-color: var(--gray);
    color: var(--black);
}
#ticket .inBox .op_ticket .ticketDetail .btn.grayBtn.fin a {
    pointer-events: auto;
}
/* ここまで */

#ticket .inBox  .attWrap {}
#ticket .inBox  .attWrap .attBox {
    margin: 0 0 25px;
}
#ticket .inBox  .attWrap .attBox:last-child {
    margin: 0;
}
#ticket .inBox  .attWrap .attBox .attTit {
    border-left: 3px solid;
    padding: 0 0 0 10px;
    font-weight: bold;
    margin: 0 0 10px;
}
#ticket .inBox  .attWrap .attBox ul {}
#ticket .inBox  .attWrap .attBox ul li {
    text-indent: -1em;
    padding: 0 0 0 1em;
    margin: 0 0 5px;
}
#ticket .inBox  .attWrap .attBox ul li:last-child {
    margin-bottom: 0;
}
#ticket .inBox  .attWrap .attBox .txtBox {
    margin: 0 0 15px;
}
#ticket .inBox  .attWrap .attBox .txtBox:last-child {
    margin: 0;
}
#ticket .inBox  .attWrap .attBox .txtBox p {
    margin-bottom: 5px;
}
#ticket .inBox  .attWrap .attBox .txtBox p:last-child {
    margin-bottom: 0;
}
#ticket .inBox  .attWrap .attBox .txtBox p a {
    text-decoration: underline;
}

#ticket .inBox .soonBox {
    max-width: 800px;
    margin: 20px auto 0;
    background: var(--gray);
    text-align: center;
    padding: 30px 60px 30px 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    border-radius: 10px;
}
#ticket .inBox .soonBox .soon {}


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

    #ticket .inBox .op_ticket .ticketDetail .btn a:hover {
        color: var(--black);
        background-color: var(--white);
    }

    #ticket .inBox .op_ticket .ticketDetail .btn.fcBtn a:hover {
        color: var(--mainColor);
        background-color: var(--white);
    }

    #ticket .inBox .op_ticket .ticketDetail .btn.grayBtn.fin a:hover {
        background-color: var(--black);
        color: var(--white);
    }

}

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

    #ticket {}
    #ticket .inBox {}
    #ticket .inBox h3 {}
    #ticket .inBox h4 {}

    #ticket .inBox .indent {}
    #ticket .inBox .note {
        font-size: 12px;
    }
    #ticket .inBox .bold {}

    #ticket .inBox .ticketWrap {
        margin: 0 0 30px;
    }
    #ticket .inBox .ticketWrap .ticketBoxTit.ticketBox {
        display: none;
    }
    #ticket .inBox .ticketWrap .ticketBoxTit.ticketBox .seat {
        border-radius: 100px;
    }
    #ticket .inBox .ticketWrap .ticketBoxTit.ticketBox .price {}
    #ticket .inBox .ticketWrap .ticketBoxTit.ticketBox .detail {}
    #ticket .inBox .ticketWrap .ticketBox {
        display: block;
        border: none;
        margin-bottom: 30px;
    }
    #ticket .inBox .ticketWrap .ticketBox:last-child {
        margin-bottom: 0;
        padding-top: 15px;
    }
    #ticket .inBox .ticketWrap .ticketBox .seat {
        width: auto;
        display: inline-block;
        padding: 5px 15px;
        margin: 0 0 10px;
        border-radius: 100px;
        min-width: 90px;
        text-align: center;
    }
    #ticket .inBox .ticketWrap .ticketBox .price {
        width: 100%;
        padding: 0;
        border-right: none;
        margin: 0 0 15px;
        font-weight: bold;
    }
    #ticket .inBox .ticketWrap .ticketBox .detail {
        width: 100%;
        padding: 20px;
        margin: 0;
        border: 1px solid;
        border-radius: 10px;
    }
    #ticket .inBox .ticketWrap .ticketBox .detail .detailTxt {
        margin-bottom: 15px;
    }
    #ticket .inBox .ticketWrap .ticketBox .detail .txtBox {
        margin-bottom: 15px;
    }
    #ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTit {}
    #ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTxt {}
    #ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTxt {}
    #ticket .inBox .ticketWrap .ticketBox .detail .txtBox .txtBoxTxt span {}

    #ticket .inBox .ticketWrap .ticketBox .detail .detailTxt p a.innerLink {}

    #ticket .inBox .ticketWrap .ticketBox .detail .upDateBox {
        padding: 20px;
        border-radius: 10px;
    }
    
    #ticket .inBox .dome {
        margin: 0 0 30px;
    }

    #ticket .inBox .tokuten {
        margin: 0 0 30px;
    }

    #ticket .inBox .accordBoxTit {
        margin: 0 0 20px;
        font-size: 13px;
    }
    #ticket .inBox .accordBoxTit span {
        font-size: 16px;
        padding: 5px 20px;
    }

    /* accord */
    #ticket .inBox .accordBox {
        margin: 0 auto 30px;
    }
    #ticket .inBox .op_ticket {
        margin-bottom: 10px;
    }
    #ticket .inBox .op_ticket .ticketTit{
        padding: 20px 40px 20px 15px;
        font-size: 16px;
    }
    #ticket .inBox .op_ticket .ticketTit .op_tit {
        text-align: center;
        margin: 0px 0 0 20px;
    }
    #ticket .inBox .op_ticket .ticketTit span {
        right: 20px;
        width: 12px;
        height: 12px; 
    }
    #ticket .inBox .op_ticket .ticketDetail{
        padding: 20px 0;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox {
        display: block;
        padding: 0 0 15px;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox:first-child {
        border-top: 1px solid;
        padding: 20px 0 15px;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox:last-of-type {
        margin: 0 0 20px;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .tit {
        width: 100%;
        text-align: left;
        line-height: 1;
        margin: 0 0 10px;
        color: var(--red);
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt {
        width: 100%;
        border-left: none;
        padding: 0;
    }
    #ticket .inBox .op_ticket .ticketDetail .noteBox {
        margin: 0 0 20px;
    }
    #ticket .inBox .op_ticket .ticketDetail .noteBox p {}
    #ticket .inBox .op_ticket .ticketDetail .noteBox p:last-child {}

    #ticket .inBox .op_ticket .ticketDetail .btn {
        margin-bottom: 15px;
    }
    #ticket .inBox .op_ticket .ticketDetail .btn a {}
    #ticket .inBox .op_ticket .ticketDetail .btn.grayBtn a {}
    /* ここまで */

    #ticket .inBox  .attWrap {}
    #ticket .inBox  .attWrap .attBox {
        margin: 0 0 20px;
    }
    #ticket .inBox  .attWrap .attBox:last-child {}
    #ticket .inBox  .attWrap .attBox .attTit {}
    #ticket .inBox  .attWrap .attBox ul {}
    #ticket .inBox  .attWrap .attBox ul li {}
    #ticket .inBox  .attWrap .attBox ul li:last-child {}
    #ticket .inBox  .attWrap .attBox .txtBox {}
    #ticket .inBox  .attWrap .attBox .txtBox:last-child {}

    #ticket .inBox .soonBox {
        padding: 20px;
        font-size: 16px;
        margin: 10px auto 0;
    }
    #ticket .inBox .soonBox .soon {}

}



/*===================================================
    access
====================================================*/
#access {}
#access .inBox {}
#access .inBox h3 {}
#access .inBox h4 {}

#access .inBox .accessBox {
    max-width: 500px;
    margin: 0 auto 50px;
    background: var(--black);
    color: var(--white);
    padding: 40px 30px;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    border-radius: 10px;
}
#access .inBox .accessBox .accessTit {
    margin-bottom: 20px;
}
#access .inBox .accessBox .accessBtn {}
#access .inBox .accessBox .accessBtn a {
    display: block;
    background-color: var(--mainColor);
    color: var(--white);
    border-radius: 100px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    font-size: 17px;
}
 
#access .inBox .map {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#access .inBox .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px;
}

.linkBtn a {
  display: block;
  background-color: var(--mainColor);
  color: var(--white);
  border-radius: 100px;
  padding: 20px;
  width: 100%;
  max-width: 320px;
  margin: 30px auto 0;
  font-size: 17px;
  text-align: center;
}
@media screen and (min-width: 961px) {

    #access .inBox .accessBox .accessBtn a:hover {

        background-color: var(--white);
        color: var(--mainColor);

    }
    .linkBtn a:hover {

        background-color: var(--white);
        color: var(--mainColor);

    }

}

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

    #access {}
    #access .inBox {}
    #access .inBox h3 {}
    #access .inBox h4 {}

    #access .inBox .accessBox {
        padding: 30px 20px;
        margin: 0 auto 10px;
    }
    #access .inBox .accessBox .accessTit {
        font-size: 13px;
    }
    #access .inBox .accessBox .accessTit span {
        display: block;
        margin-bottom: 10px;
    }
    #access .inBox .accessBox .accessBtn {}
    #access .inBox .accessBox .accessBtn a {
        font-size: 13px;
    }
    .linkBtn a {
        font-size: 13px;
    }
    
    #access .inBox .map {}
    #access .inBox .map iframe {}

}



/*===================================================
    goods
====================================================*/
#goods {}
#goods .inBox {}
#goods .inBox h3 {}
#goods .inBox h4 {}

#goods .inBox .lineUp {}
#goods .inBox .lineUp img {
    border-radius: 10px;
}

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

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

    #goods {}
    #goods .inBox {}
    #goods .inBox h3 {}
    #goods .inBox h4 {}

    #goods .inBox .lineUp {}
    #goods .inBox .lineUp img {}

}



/*===================================================
    sticker
====================================================*/
#sticker {}
#sticker .inBox {}
#sticker .inBox h3 {}
#sticker .inBox h4 {}

#sticker .inBox .stickerImg {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
#sticker .inBox .stickerImg p {
    text-align: center;
}
#sticker .inBox .stickerImg p:nth-child(1) {
    width: calc(40% - 15px);
}
#sticker .inBox .stickerImg p:nth-child(2) {
    width: calc(60% - 15px);
}
#sticker .inBox .stickerImg p .name {
    width: auto;
    display: inline-block;
    padding: 5px 15px;
    margin: 20px auto 0;
    border-radius: 100px;
    min-width: 105px;
    text-align: center;
    background: var(--black);
    color: var(--white);
}

#sticker .inBox .txtBox {
    margin-bottom: 50px;
    display: block;
    background: var(--black);
    color: var(--white);
    padding: 40px;
    border-radius: 10px;
    line-height: 1.4;
}
#sticker .inBox .txtBox p {
    margin: 0 0 5px;
}
#sticker .inBox .txtBox p:nth-child(3) {
    margin: 0 0 20px;
}
#sticker .inBox .txtBox p:last-child {
    margin: 0;
}
#sticker .inBox .txtBox p.note {
    font-size: 13px;
    text-indent: -1em;
    padding: 0 0 0 1em;
}

#sticker .inBox .map {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 50px;
}
#sticker .inBox .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px;
}

/* accord */
#sticker .inBox .accordBox {
    max-width: 800px;
    margin: 0 auto;
}
#sticker .inBox .accordBox .op_ticket {
	margin: 0 0 20px;
}
#sticker .inBox .op_ticket:last-child {
	margin: 0;
}
#sticker .inBox .op_ticket .ticketTit {
    background: var(--black);
    color: var(--white);
    padding: 30px 60px 30px 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    border-radius: 10px;
}
#sticker .inBox .op_ticket .ticketTit .op_tit {
    text-align: center;
}
#sticker .inBox .op_ticket .ticketTit.open {}
#sticker .inBox .op_ticket .ticketTit span {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 15px;
    height: 15px;
    transform: rotate(180deg) translateY(50%);
    transition: 0.3s ease;
}
#sticker .inBox .op_ticket .ticketTit.open span {
    transform: translateY(-50%);
}
#sticker .inBox .op_ticket .ticketTit span:before {
    content: "";
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
}
#sticker .inBox .op_ticket .ticketDetail {
    display: none;
    padding: 40px 0 0;
}
#sticker .inBox .op_ticket .ticketDetail .qaBox {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid;
}
#sticker .inBox .op_ticket .ticketDetail .qaBox:first-child {
    margin: 0 0 20px;
    padding: 20px 0;
    border-top: 1px solid;
}
#sticker .inBox .op_ticket .ticketDetail .qaBox:last-child {
    margin: 0;
}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox {
    display: flex;
}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox .boxTit {
    width: 30px;
}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox .boxTxt {
    width: calc(100% - 30px);
}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.q {
    font-size: 1.25em;
    font-weight: bold;
    margin: 0 0 10px;
}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.a {}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.q .boxTit {}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.q .boxTxt {}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.a .boxTit {}
#sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.a .boxTxt {}

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

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

    #sticker {
        margin-bottom: 30px;
    }
    #sticker .inBox {}
    #sticker .inBox h3 {}
    #sticker .inBox h4 {}

    #sticker .inBox .stickerImg {
        margin-bottom: 20px;
    }
    #sticker .inBox .stickerImg p {}
    #sticker .inBox .stickerImg p:nth-child(1) {
        width: calc(40% - 7.5px);
    }
    #sticker .inBox .stickerImg p:nth-child(2) {
        width: calc(60% - 7.5px);
    }
    #sticker .inBox .stickerImg p .name {
        padding: 5px 10px;
        margin: 10px auto 0;
        min-width: 80px;
        font-size: 12px;
    }

    #sticker .inBox .txtBox {
        padding: 30px 20px;
        margin: 0 auto 20px;
    }
    #sticker .inBox .txtBox p {}
    #sticker .inBox .txtBox p:nth-child(3) {
        margin-bottom: 15px;
    }
    #sticker .inBox .txtBox p:last-child {}
    #sticker .inBox .txtBox p.note {
        font-size: 12px;
    }

    #sticker .inBox .map {
        margin-bottom: 20px;
        padding-top: 100%;
    }
    #sticker .inBox .map iframe {}

    /* accord */
    #sticker .inBox .op_ticket {
        margin-bottom: 10px;
    }
    #sticker .inBox .op_ticket .ticketTit{
        padding: 20px 40px 20px 15px;
        font-size: 16px;
    }
    #sticker .inBox .op_ticket .ticketTit .op_tit {
        text-align: center;
        margin: 0px 0 0 20px;
    }
    #sticker .inBox .op_ticket .ticketTit span {
        right: 20px;
        width: 12px;
        height: 12px; 
    }
    #sticker .inBox .op_ticket .ticketDetail{
        padding: 20px 0 0;
    }
    #sticker .inBox .op_ticket .ticketDetail .qaBox {        
        padding: 0 0 15px;
        margin: 0 0 15px;
    }
    #sticker .inBox .op_ticket .ticketDetail .qaBox:first-child {
        margin: 0 0 15px;
        padding: 15px 0;
    }
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox {}
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.q {
        font-size: 14px;
    }
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.a {
        font-size: 12px;
    }
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox .boxTit {}
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox .boxTxt {}
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.q .boxTit {}
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.q .boxTxt {}
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.a .boxTit {}
    #sticker .inBox .op_ticket .ticketDetail .qaBox .qaInBox.a .boxTxt {}

}



/*===================================================
    teaser
====================================================*/
#teaser {}
#teaser .inBox {}
#teaser .inBox h3 {}
#teaser .inBox h4 {}

#teaser .inBox .mov {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#teaser .inBox .mov iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

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

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

    #teaser {}
    #teaser .inBox {}
    #teaser .inBox h3 {}
    #teaser .inBox h4 {}

    #teaser .inBox .mov {}
    #teaser .inBox .mov iframe {}

}



/*===================================================
    youtube
====================================================*/
#youtube {
    margin-top: 200px;
    margin-bottom: 150px;
}

#youtube .sliderWrap {
    position: relative;
    margin-bottom: 90px;
}
#youtube .sliderWrap .ytFrame {
    position: absolute;
    z-index: -1;
    top: -25%;
    left: 50%;
    width: 95%;
    min-width: 1400px;
    transform: translate(-50%, 25%);
}

#youtube .slider {
    line-height: 0;
}
#youtube .slider .slick-next {
    right: 51%;
    top: auto;
    bottom: -60px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--black);
    z-index: 1;
    border-radius: 100px;
}
#youtube .slider .slick-prev {
    left: 51%;
    top: auto;
    bottom: -60px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--black);
    z-index: 1;
    border-radius: 100px;
}
#youtube .slider .slick-prev:before, 
#youtube .slider .slick-next:before {
    content: '';
    width: 30%;
    height: 30%;
    border-right: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    display: block;
    opacity: 1;
    bottom: auto;
    top: 50%;
    right: 50%;
    position: absolute;
    transform: rotate(-45deg) translate(50%, -15%);
    background: none;
    border-radius: 0;
    line-height: 0;
}
#youtube .slider .slick-next:before {
    transform: rotate(135deg) translate(-15%, 50%);
    right: auto;
    left: 50%;
}
#youtube .slider li {
    padding: 0 10%;
}
#youtube .slider li:last-child {}
#youtube .slider li .mov {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#youtube .slider li .mov iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

#youtube .more {
    text-align: center;
}
#youtube .more a {
    display: inline-block;
    text-align: center;
    width: 150px;
    background: var(--mainColor);
    color: var(--white);
    padding: 10px;
    border-radius: 100px;
}

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

    #youtube .inBox {
        width: initial;
        max-width: initial;
        background: initial;
        padding: initial;
        border-radius: initial;
    }
    #youtube .inBox h3,
    #youtube .inBox h4 {
        display: none;
    }

    #youtube .slider li a img {
        transition: all 0.5s ease;
    }
    #youtube .slider li a:hover img {
        opacity: 0.7;
    }

    #youtube .more a:hover {
        color: var(--mainColor);
        background: var(--white);
    }

}

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

    #youtube {
        margin-top: 0;
        margin-bottom: 30px;
    }
    #youtube .inBox {
        padding: 30px 0;
    }
    #youtube .inBox h3 {}
    #youtube .inBox h4 {}

    #youtube .slider {}
    #youtube .sliderWrap {
        margin-bottom: 70px;
    }
    #youtube .slider .slick-prev {
        left: 55%;
    }
    #youtube .slider .slick-next {
        right: 55%;
    }
    #youtube .slider li {
        padding: 0 3%;
    }
    #youtube .slider li:last-child {}
    #youtube .slider li .mov {}
    #youtube .slider li .mov iframe {}

    #youtube .more {}
    #youtube .more a {}

}



/*===================================================
    attention
====================================================*/
#attention {}
#attention .inBox {}
#attention .inBox h3 {}
#attention .inBox h4 {}

#attention .inBox .attBox {
    background: var(--black);
    color: var(--white);
    padding: 40px 60px;
    border-radius: 10px;
}
#attention .inBox .attBox li {
    text-indent: -1em;
    padding: 0 0 0 1em;
    margin-bottom: 10px;
}
#attention .inBox .attBox li:last-child {
    margin-bottom: 0;
}

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

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

    #attention {}
    #attention .inBox {}
    #attention .inBox h3 {}
    #attention .inBox h4 {}

    #attention .inBox .attBox {
        padding: 20px;
    }
    #attention .inBox .attBox li {}
    #attention .inBox .attBox li:last-child {}

}



/*===================================================
    fanclub
====================================================*/
#fanclub {}
#fanclub .inBox {}
#fanclub .inBox h3 {}
#fanclub .inBox h4 {}

#fanclub .inBox .detailBox {
    margin: 0 auto 50px;
    background: var(--whiteOpacity);
    padding: 50px;
    border-radius: 20px;
}
#fanclub .inBox .detailBox .detailTit {
    border-left: 5px solid;
    padding: 0 0 0 10px;
    margin: 0 0 20px;
    font-weight: 600;
    font-size: 20px;
}
#fanclub .inBox .detailBox .detailTxt {
    margin: 0 0 50px;
}
#fanclub .inBox .detailBox .fcImg {
    width: 40%;
    margin: 0 auto 50px;
}
#fanclub .inBox .detailBox .txtList {}
#fanclub .inBox .detailBox .txtList li {
    display: flex;
    border-bottom: 1px solid;
    padding: 30px 20px;
    align-items: stretch;
}
#fanclub .inBox .detailBox .txtList li:first-child {
    border-top: 1px solid;
    padding: 30px 20px;
}
#fanclub .inBox .detailBox .txtList li:last-child {}
#fanclub .inBox .detailBox .txtList li .main {
    width: 20%;
    padding: 0 40px 0 0;
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.6em;
    font-size: 14px;
}
#fanclub .inBox .detailBox .txtList li .main p {}
#fanclub .inBox .detailBox .txtList li .sub {
    width: 80%;
    position: relative;
    padding: 0 0 0 40px;
    border-left: 1px solid;
}
#fanclub .inBox .detailBox .txtList li .sub p {
    margin-bottom: 5px;
}
#fanclub .inBox .detailBox .txtList li .sub p:last-child {
    margin-bottom: 0;
}
#fanclub .inBox .detailBox .txtList li .sub p.note {
    text-indent: -1em;
    padding: 0 0 0 1em;
    font-size: 13px;
}

#fanclub .inBox .fc {}
#fanclub .inBox .fc a {
    display: block;
    max-width: 500px;
    margin: 0 auto;
}
#fanclub .inBox .fc a img {
    border-radius: 10px;
}

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

    #fanclub .inBox .fc a img {
        transition: all 0.5s ease;
    }
    #fanclub .inBox .fc a:hover img {
        opacity: 0.7;
    }

}

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

    #fanclub {}
    #fanclub .inBox {}
    #fanclub .inBox h3 {}
    #fanclub .inBox h4 {}

    #fanclub .inBox .detailBox {
        padding: 30px 20px;
        margin: 0 auto 30px;
    }
    #fanclub .inBox .detailBox .detailTit {
        font-size: 17px;
    }
    #fanclub .inBox .detailBox .detailTxt {
        margin: 0 0 30px;
    }
    #fanclub .inBox .detailBox .fcImg {
        width: 80%;
        margin: 0 auto 30px;
    }
    #fanclub .inBox .detailBox .txtList {}
    #fanclub .inBox .detailBox .txtList li {
        padding: 15px 0;
        display: flex;
        flex-direction: column;
    }
    #fanclub .inBox .detailBox .txtList li:first-child {
        padding: 15px 0;
    }
    #fanclub .inBox .detailBox .txtList li:last-child {}
    #fanclub .inBox .detailBox .txtList li .main {
        width: 100%;
        padding: 0 0 0 10px;
        margin: 0 0 10px;
        border-left: 5px solid;
    }
    #fanclub .inBox .detailBox .txtList li .main p {}
    #fanclub .inBox .detailBox .txtList li .sub {
        width: 100%;
        border: none;
        padding: 0;
    }
    #fanclub .inBox .detailBox .txtList li .sub p {}
    #fanclub .inBox .detailBox .txtList li .sub p:last-child {}
    #fanclub .inBox .detailBox .txtList li .sub p.note {}

    #fanclub .inBox .fc {}
    #fanclub .inBox .fc a {}
    #fanclub .inBox .fc a img {}

}



/*===================================================
    sponsorship
====================================================*/
#sponsorship {}
#sponsorship .inBox {
    background-color: var(--gray02);
}
#sponsorship .inBox h3 {}
#sponsorship .inBox h4 {}

#sponsorship .inBox .sponsorTit {
    font-weight: bold;
    text-align: center;
    font-size: 24px;
    margin-bottom: 250px;
}

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

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

    #sponsorship {}
    #sponsorship .inBox {}
    #sponsorship .inBox h3 {}
    #sponsorship .inBox h4 {}

    #sponsorship .inBox .sponsorTit {
        font-size: 18px;
    }

}



/*===================================================
    footer
====================================================*/
footer.footer {
    padding: 150px 0 0;
    border-radius: 30px 30px 0 0;
    z-index: 6;
    background-color: var(--commonColor);
}

footer.footer .copyright {
    padding: 0 30px 50px;
    color: var(--black);
}
footer.footer::before {}
footer.footer::after {
    display: none;
}

footer.footer h1 {
    width: 100%;
}
footer.footer h1 img {
    display: block;
    width: 100%;
}

@media screen and (min-width: 961px) {}
        
@media screen and (max-width: 960px) {

    footer.footer{
        padding: 150px 0px 50px;
    }

    footer.footer .copyright {
        padding: 0 20px 30px;
    }
    footer.footer::before {}
    footer.footer::after {}

    footer.footer h1 {}
    footer.footer h1 img {}

}



/*===================================================
	newsDetail
====================================================*/
.newsDetail .container {
    min-height: 100svh;
    padding: 120px 0;
}

.newsDetail .container #news {
    margin-bottom: 0px;
}

.newsDetail .container #news .newsDetailBox {
    margin-bottom: 40px;
}
.newsDetail .container #news .newsDetailBox .date {
    display: block;
    font-weight: bold;
    margin: 0 0 5px;
    font-size: 17px;
}
.newsDetail .container #news .newsDetailBox .tit {
    display: block;
    margin: 0 0 40px;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid;
    padding: 0 0 20px;
}
.newsDetail .container #news .newsDetailBox .txt {}
.newsDetail .container #news .newsDetailBox .txt a {
    text-decoration: underline;
} 

.newsDetail .container #news .backBtn a {
    display: block;
    text-align: center;
    text-decoration: underline;
}

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

    .newsDetail .container {
        padding: 90px 0;
    }

    .newsDetail .container #news {}

    .newsDetail .container #news .newsDetailBox {
        margin-bottom: 30px;
    }
    .newsDetail .container #news .newsDetailBox .date {
        font-size: 14px;
    }
    .newsDetail .container #news .newsDetailBox .tit {
        margin: 0 0 20px;
        font-size: 16px;
        padding: 0 0 10px;
    }
    .newsDetail .container #news .newsDetailBox .txt {}

    .newsDetail .container #news .backBtn a {}

}



/*===================================================
  OP:MODAL
====================================================*/
.op_modal{}
.op_modal .modPop {
  display:none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.op_modal .modPop.popActive {
  display:block;
}
.op_modal .modPop .popupShade{
  position: absolute;
  display: flex;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  background: rgb(0 0 0 / 0.75);
  z-index: 0;
  align-items: center;
  justify-content: center;
}

.op_modal .modPop .close {
  width: 45px;
  height: 45px;
  position: fixed;
  right: 30px;
  top: 30px;
  cursor: pointer;
  transition: 0.3s ease;
  transform: rotate(45deg);
  background: var(--black);
  border-radius: 100px;
}
.op_modal .modPop .close::before,
.op_modal .modPop .close::after {
  content: '';
  display: inline-block;
  width: 60%;
  height: 2px;
  background: var(--white);
  position: absolute;
  left: 50%;
  top: 50%;
}
.op_modal .modPop .close::before {
  transform: translate(-50%,-50%);
}
.op_modal .modPop .close::after {
  transform: translate(-50%,-50%) rotate(90deg);
}
.op_modal .modPop .popInBox {
    width: 90vh;
    max-width: 1200px;
}
.op_modal .modPop .popInBox.two {
    width: 90%;
    max-width: 1400px;
    display: flex;
}
.op_modal .modPop .popInBox .photo {
    position: relative;
    line-height: 0;
    margin-right: 20px;
}
.op_modal .modPop .popInBox .photo:last-child {
    margin-right: 0;
}
.op_modal .modPop .popInBox .photo img {
    pointer-events: none;
    user-select: none;  
}

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

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

  .op_modal .modPop .close {
    right: 20px;
    top: 20px;
  }

  .op_modal .modPop .popInBox.two {
    width: 80%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
  }
  .op_modal .modPop .popInBox {
    width: 80%;
        max-width: 400px;
  }
  .op_modal .modPop .popInBox .photo {
        margin: 0 0 10px;
  }

}