@charset "UTF-8";
:root {
    --sub-color: #e7b41a;
    --number: 'Ibarra Real Nova', serif;
}
::selection {
    background: var(--sub-color);
    color: black;
}
::-moz-selection {
    background: var(--sub-color);
    color: black;
}
/* common */
.bg {
    background: url(../../img/special-page/ambers/bg.jpg);
    background-size: cover;
    height: 100vh;
    width: 100%;
    z-index: -1;
    position: fixed;
}
article {
    box-shadow: 0px 4px 76px 0px rgb(127 43 0) !important;
}
/* intro */
#intro {
    padding: clamp(60px, calc(2.273vw + 53.636px), 80px) 0;
}
#intro::before {
    content: "";
    background: url(../../img/special-page/ambers/rose01.png);
    position: absolute;
    top: 40px;
    left: -10.01%;
    width: 15.99%;
    height: 8.17vw;
    background-size: contain;
    background-repeat: no-repeat;
}
#intro::after {
    content: "";
    background: url(../../img/special-page/ambers/rose02.png);
    position: absolute;
    bottom: 100px;
    right: -2.75%;
    width: 15.34%;
    height: 14.3vw;
    background-size: contain;
    background-repeat: no-repeat;
}
#intro h2 {
    margin-bottom: 0;
}
#intro h2 img {
    width: 53.39vw;
    max-width: 410px;
}
#intro .txtbox .lead {
    margin-bottom: clamp(24px, calc(1.136vw + 12.273px), 32px) 0;
}
@media screen and (max-width: 690px) {
    #intro {
        padding: 60px 0;
    }
    #intro::before {
        width: 25.99%;
        height: 18.17vw;
    }
    #intro::after {
        right: -4%;
        width: 35.34%;
        height: 34.3vw;
    }
}
/* youtube */
#youtube {
    padding: 0px 0 clamp(60px, calc(2.273vw + 53.636px), 80px);
}
.youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.youtube iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #868686;
}
@media screen and (max-width: 690px) {
    #youtube {
        padding: 0px 0 60px;
    }
}
/* creative */
#creative {
    padding: 0 0 clamp(60px, calc(2.273vw + 53.636px), 80px);
}
#creative h2 img {
    width: 37.76vw;
    max-width: 290px;
    margin: 0 auto;
    display: block;
}
#creative p {
    text-align: center;
    font-size: clamp(18px, calc(0.2273vw + 17.2727px), 20px);
}
/* cast */
#cast {
    padding: 0 0 100px 0;
    position: relative;
}
#cast::after {
    content: "";
    background: url(../../img/special-page/ambers/rose02.png);
    position: absolute;
    top: 50%;
    right: -3vw;
    width: 20.6%;
    height: 10.13vw;
    background-size: contain;
    background-repeat: no-repeat;
}
#cast h2 img {
    width: 27.34vw;
    max-width: 210px;
    margin: 0 auto;
    display: block;
}
#cast ul {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    gap: 1%;
}
#cast ul:last-child {
    margin-bottom: 0;
}
#cast ul li {
    width: calc((100% / 4) - 1%);
}
#cast ul li p {
    text-align: center;
    font-size: clamp(12px, calc(0.9091vw + 10.636px), 16px);
}
@media screen and (max-width: 690px) {
    #cast ul {
        margin-bottom: 24px;
    }
    #cast::after {
        right: -4%;
        width: 30.6%;
        height: 30.13vw;
    }
}
/* schedule */
#schedule {
    margin: 0 0 56px 0;
}
#schedule h2 {
    margin-bottom: 24px;
}
#schedule h2 img {
    width: 41.02vw;
    max-width: 315px;
}
#schedule::before {
    content: "";
    background: url(../../img/special-page/ambers/rose05.png);
    position: absolute;
    top: 150px;
    left: -3.01%;
    width: 10.34%;
    height: 8.3vw;
    background-size: contain;
    background-repeat: no-repeat;
}
#schedule::after {
    content: "";
    background: url(../../img/special-page/ambers/rose02.png);
    position: absolute;
    bottom: -4vw;
    right: -3vw;
    width: 20.6%;
    height: 10.13vw;
    background-size: contain;
    background-repeat: no-repeat;
}
#april:checked~#april_content,
#may:checked~#may_content {
    display: block;
}
.tab_item {
    width: calc(100% / 2);
    height: 50px;
    border-bottom: 2px solid #fff;
    background-color: #a3a3a3;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #000000;
    display: block;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.tab_content_description dl:last-child {
    border-bottom: none;
}
.tab_content_description dl dd .open,
.tab_content_description dl dd .start {
    position: relative;
    font-size: clamp(18px, calc(0.6818vw + 15.8182px), 24px);
}
.tab_content_description dl dd .star {
    padding-left: 24px;
}
.tab_content_description dl dt {
    font-size: clamp(30px, calc(0.6818vw + 27.8182px), 36px);
}
.tab_content_description dl dt span {
    font-size: clamp(13px, calc(0.3409vw + 11.9091px), 16px);
}
.tab_content_description dl dd .star::after {
    content: "☆";
    font-family: var(--jp);
    font-size: clamp(14px, calc(0.2273vw + 13.2727px), 16px);
    position: absolute;
    left: 0;
}
@media screen and (max-width: 690px) {
    .tab_content_description dl {
        display: flex;
    }
    #schedule::before {
        top: -20px;
        left: -3.01%;
        width: 20.34%;
        height: 18.3vw;
    }
    #schedule::after {
        bottom: -13%;
        right: -3vw;
        width: 30.6%;
        height: 27.13vw;
    }
}
@media screen and (max-width: 375px) {
    .tab_content_description dl dt span {
        display: block;
        padding-left: 0;
    }
}
/* ticket */
#ticket {
    padding: 0 0 clamp(60px, calc(2.273vw + 53.636px), 80px);
    margin: 0;
}
#ticket h2 img {
    width: 30.99vw;
    max-width: 238px;
    margin: 0 auto;
    display: block;
}
#ticket p {
    text-align: center;
}
@media screen and (max-width: 690px) {
    #ticket .wrap {
        padding: 0 10px;
    }
}
/* info */
#info {
    padding: 0;
    margin-top: 0;
    margin-bottom: clamp(60px, calc(2.273vw + 53.636px), 80px);
}
#info h2 {
    margin-bottom: 24px;
}
#info h2 img {
    width: 51.82vw;
    max-width: 398px;
    margin: 0 auto;
    display: block;
}
#info .attention li {
    text-indent: -1.5rem;
    padding-left: 1.5rem;
    display: block;
}
#official-hp a img {
    width: 42.69%;
}
/* official-hp */
#official-hp::before {
    content: "";
    background: url(../../img/special-page/ambers/);
    position: absolute;
    top: 150px;
    left: -3.01%;
    width: 10.34%;
    height: 8.3vw;
    background-size: contain;
    background-repeat: no-repeat;
}
@media screen and (max-width: 690px) {
    #official-hp a img {
        width: 62.69%;
    }
    #official-hp a span {
        margin-top: 10px;
    }
}