@charset "utf-8";

:root {
    --white: #fff;
    --black: #333;
    --gray: #707F89;
    --blue: #004bb1;

    --font-weight-bold: 700;

    --font-point:"Yusei Magic", serif;
}

.align-center {
    text-align: center;
    font-size: 14px;
}
.flex-end {
    align-items: flex-end;
}
@media screen and (max-width: 768px) {
    .c-reverse {
        flex-direction: column-reverse!important;
    }
    .row {
        display: flex!important;
        flex-direction: row!important;
        align-items: center!important;
    }
}


.mv {
    width: 100%;
    max-height: 560px;
    background: url(../images/mv-bg.jpg) center bottom / auto repeat;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0 40px;
}
.mv::after {
    content: '';
    position: absolute;
    width: 50vw;
    height: 10vw;
    max-width: 577px;
    min-height: 100px;
    bottom: -30px;
    z-index: 100;
    background: url(../images/mv-character.png) bottom center / contain no-repeat;
}
.mv-inner {
    width: 100%;
    max-width: 1200px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 64px;
    margin: 50px 0;
    padding: 3rem 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.mv-inner::before {
    width: 10vw;
    height: 10vw;
    content: '';
    position: absolute;
    bottom: -30px;
    left: -33px;
    z-index: 10;
    background: url(../images/mv-img01.png) top center / contain no-repeat;
}
.mv-inner::after {
    width: 14vw;
    height: 14vw;
    max-width: 200px;
    content: '';
    position: absolute;
    top: 20px;
    right: -40px;
    z-index: 10;
    background: url(../images/mv-img02.png) top center / contain no-repeat;
}
@media screen and (max-width: 768px) {
    .mv {
        padding: 0 12px;
        max-height: inherit;
    }
    .mv::after {
        width: 90%;
        bottom: -20px;
    }
    .mv-inner {
        margin: 16px 0;
        flex-direction: column;
        padding: 10px 10px 40px;
        border-radius: 34px;
        gap: 10px;
    }
    .mv-inner::before {
        width: 20vw;
        height: 20vw;
        top: 45%;
        left: 9px;
    }    
    .mv-inner::after {
        width: 25vw;
        height: 25vw;
        top: 44%;
        right: -3px;
    }
    .mv-inner-book {
        width: 85%;
        display: flex;
        justify-content: center;
    }
}
.mv-inner-logo {
    font-family: "Yusei Magic", serif;
    display: flex;
    flex-direction: column;
}
.mv-inner-logo p {
    text-align: center;
    background: url(../images/mv-text02.png) center / 100% no-repeat;
    padding: 0 10px 0 0;
    font-size: 1.3rem;
    color: #fff;
}
@media screen and (max-width: 768px) {
    .mv-inner-logo {
        margin-top: 10px;
    }
    .mv-inner-logo h2 span {
        width: 90%;
        display: block;
        margin: auto;
    }
    .mv-inner-logo p {
        background: url(../images/mv-text02.png) center right / auto no-repeat;
        font-size: 16px;
    }
}
.wrapper {
    display: flex;
    flex-direction: column;
}
.l-content {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 70px 40px;
}
.l-content-inner {
    width: 100%;
    max-width: 1000px;
    background: #fff;
    border-radius: 60px;
    padding: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.04);
}
.l-content-inner h3 {
    width: 100%;
    max-width: 450px;
    font-family: var(--font-point);
    color: var(--white);
    background: url(../images/title-bg.png) left top 50% / auto no-repeat,#E2577C;
    border-radius: 15px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0 7px;
    position: relative;
}
.l-content-inner h3::after {
    content: '';
    position: absolute;
    bottom: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    border-top: 15px solid #e2577c;
    border-bottom: 0;
}
.l-content-inner-contents {
    display: flex;
    position: relative;
}
.baloon {
    font-family: var(--font-point);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
}
@media screen and (max-width: 768px) {
    .l-content {
        padding: 70px 13px;
    }
    .l-content-inner {
        padding: 18px 15px;
        border-radius: 34px;
    }
    .l-content-inner h3 {
        font-size: 20px;
    }
    .l-content-inner-contents {
        flex-direction: column;
    }
}


/* ---------
content01
--------- */
.content01 {
    background: url(../images/content01-bg.png) top center / auto repeat;
    position: relative;
    padding-top: 90px;
}
.content01::before {
    background: url(../images/line.png) top center / contain no-repeat;
    content: '';
    width: 100%;
    height: 40px;
    position: absolute;
    top: 35px;
}
.content01 .l-content-inner::before {
    content: '';
    position: absolute;
    width: 25vw;
    height: 25vw;
    max-width: 268px;
    max-height: 217px;
    top: 0;
    left: -10%;
    z-index: 100;
    background: url(../images/content01-img01.png) top center / contain no-repeat;
}
.content01 .l-content-inner::after {
    content: '';
    position: absolute;
    width: 15vw;
    height: 15vw;
    max-width: 130px;
    max-height: 130px;
    bottom: 0;
    right: 20px;
    z-index: 100;
    background: url(../images/content01-img04.png) top center / contain no-repeat;
}
.content01 .l-content-inner-contents {
    width: 90%;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
}
.content01 .l-content-inner-contents img:nth-of-type(2) {
    margin: 20px 0 0 -20px;
}
.content01 .l-content-inner-contents .baloon {
    width: 218px;
    height: 172px;
    background: url(../images/content01-baloon-left.png) 50% / contain no-repeat;
    position: absolute;
    right: -40px;
}
@media screen and (max-width: 768px) {
    .content01 .l-content-inner {
        padding-bottom: 100px;
        gap: 0;
    }
    .content01 .l-content-inner-contents img:first-child {
        width: 50%;
    }
    .content01 .l-content-inner-contents {
        align-items: center;
        gap: 20px;
    }
    .content01 .l-content-inner-contents img:nth-of-type(2) {
        margin: 0;
    }
    .content01 .l-content-inner-contents .baloon {
        width: 180px;
        height: 160px;
        background: url(../images/content01-baloon-left.png) 50% / contain no-repeat;
        bottom: 0;
        right: 0;
        font-size: 16px;
    }
    .content01 .row{
        width: 100%;
        margin-top: 45px;
    }
    .content01 .l-content-inner::before {
        content: none;
    }
    .content01 .l-content-inner::after {
        width: 25vw;
        height: 25vw;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }
}

/* ---------
content02
--------- */
.content02 {
    background: url(../images/content02-bg.png) top center / auto repeat;
}
.content02 .l-content-inner h3 {
    background: url(../images/title-bg.png) left top 50% / auto no-repeat,#BC9F00;
}
.content02 .l-content-inner h3::after {
    border-top: 15px solid #BC9F00;
}
.content02 .l-content-inner::before {
    content: '';
    position: absolute;
    width: 25vw;
    height: 25vw;
    max-width: 268px;
    max-height: 217px;
    top: 50px;
    left: -80px;
    z-index: 100;
    background: url(../images/content02-img01.png) top center / contain no-repeat;
}
.content02 .l-content-inner::after {
    content: '';
    position: absolute;
    width: 25vw;
    height: 25vw;
    max-width: 216px;
    max-height: 185px;
    bottom: 30%;
    right: -10%;
    z-index: 100;
    background: url(../images/content02-img07.png) top center / contain no-repeat;
}
.content02 .baloon01 {
    width: 250px;
    background: url(../images/content02-baloon01.png) 50% / contain no-repeat;
    font-family: var(--font-point);
    padding-bottom: 30px;
}
.content02 .baloon02 {
    width: 185px;
    height: 140px;
    background: url(../images/content02-baloon02.png) 50% / contain no-repeat;
    font-family: var(--font-point);
    padding-left: 10px;
    position: absolute;
    left: -150px;
    top: 50px;
}
.content02 .baloon03 {
    width: 230px;
    height: 160px;
    background: url(../images/content02-baloon03.png) 50% / contain no-repeat;
    font-family: var(--font-point);
    padding-bottom: 20px;
    padding-left: 10px;
    font-size: 24px;
}
.content02 .baloon04 {
    width: 250px;
    height: 175px;
    background: url(../images/content02-baloon04.png) 50% / contain no-repeat;
    font-family: var(--font-point);
    padding-right: 30px;
    position: absolute;
    right: -150px;
    bottom: 20px;
}
.content02 .l-content-inner-contents {
    position: relative;
}
.content02 .sticker {
    width: 200px;
    height: 240px;
    position: absolute;
    left: -160px;
    top: 50px;
}
.content02 .text {
    position: absolute;
    font-family: var(--font-point);
    bottom: 40px;
    left: 30px;
}
@media screen and (max-width: 768px) {
    .content02 .l-content-inner h3 {
        margin-bottom: 30px;
    }
    .content02 .l-content-inner {
        gap: 10px;
        padding-bottom: 40px;
    }
    .content02 .baloon01 {
        height: 165px;
        padding: 0 10px 30px 0;
        margin: 0 0 10px 50px;
    }
    .content02 .l-content-inner-contents:nth-of-type(1) img {
        width: 70%;
        padding-left: 20px;
    }
    .content02 .l-content-inner-contents:nth-of-type(2) img {
        width: 100%;
    }
    .content02 .l-content-inner-contents:nth-of-type(3) img {
        width: 100%;
        margin: auto;
    }
    .content02 .text {
        font-size: 18px;
        top: 0;
        bottom: inherit;
    }
    .content02 .baloon02 {
        left: 0px;
        top: -28px;
    }
    .content02 .l-content-inner::before {
        width: 40vw;
        height: 40vw;
        top: 67px;
        left: -25px;
    }
    .content02 .baloon04 {
        width: 213px;
        height: 156px;
        right: -35px;
        bottom: 0;
    }
    .content02 .l-content-inner::after,
    .content02 .sticker {
        content: none;
        display: none;
    }
}

/* ---------
content03
--------- */
.content03 {
    background: url(../images/content03-bg.png) top center / auto repeat;
}
.content03 .l-content-inner h3 {
    background: url(../images/title-bg.png) left top 50% / auto no-repeat,#88358F;
}
.content03 .l-content-inner h3::after {
    border-top: 15px solid #88358F;
}
.content03 .l-content-inner::before {
    content: '';
    position: absolute;
    width: 25vw;
    height: 25vw;
    max-width: 268px;
    max-height: 217px;
    top: 50px;
    left: -80px;
    z-index: 100;
    background: url(../images/content03-img01.png) top center / contain no-repeat;
}
.content03 .l-content-inner::after {
    content: '';
    position: absolute;
    width: 166px;
    height: 166px;
    bottom: 0;
    right: 0;
    z-index: 100;
    background: url(../images/content03-img04.png) top center / contain no-repeat;
}
.content03 .text {
    font-family: var(--font-point);
    padding: 0 0 40px 20px;
    text-align: center;
}
.content03 .baloon01 {
    width: 185px;
    height: 140px;
    background: url(../images/content03-baloon.png) 50% / contain no-repeat;
    font-family: var(--font-point);
    margin: 80px -50px 0 0;
    position: inherit;
    z-index: 10;
}
@media screen and (max-width: 768px) {
    .content03 .text {
        padding: 0;
    }
    .content03 .l-content-inner {
        gap: 0;
    }
    .content03 .l-content-inner h3 {
        margin-bottom: 30px;
    }
    .content03 .l-content-inner-contents {
        align-items: center;
        gap: 20px;
    }
    .content03 .baloon01 {
        margin: 0 -100px 40px 0;
        background: url(../images/sp-content03-baloon.png) 50% / contain no-repeat;
    }
    .content03 .l-content-inner::before {
        width: 45vw;
        height: 45vw;
        bottom: 25px;
        top: inherit;
        left: -0;
    }
    .content03 .l-content-inner::after {
        width: 100px;
        height: 100px;
        bottom: -30px;
    }
}


/* ---------
content04
--------- */
.content04 {
    font-size: 14px;
    background: url(../images/content04-bg.png) top center / auto repeat;
}
.content04 .l-content-inner-contents {
    margin-left: 50px;
}
.content04 .l-content-inner h3 {
    background: url(../images/title-bg.png) left top 50% / auto no-repeat,#26A6DE;
    text-align: center;
}
.content04 .l-content-inner h3::after {
    border-top: 15px solid #26A6DE;
}
.content04 .l-content-inner::before {
    content: '';
    position: absolute;
    width: 25vw;
    height: 25vw;
    max-width: 240px;
    max-height: 190px;
    top: 50px;
    left: -80px;
    z-index: 100;
    background: url(../images/content04-img01.png) top center / contain no-repeat;
}
.content04 .l-content-inner::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    bottom: 10px;
    right: 10px;
    z-index: 100;
    background: url(../images/content04-img03.png) top center / contain no-repeat;
}
.content04 .text {
    font-family: var(--font-point);
    padding: 0 0 40px 20px;
    text-align: center;
}
.content04 .baloon01 {
    width: 155px;
    height: 120px;
    background: url(../images/content04-baloon01.png) 50% / contain no-repeat;
    font-family: var(--font-point);
    position: absolute;
    right: 80px;
    top: 0;
}
.content04 .baloon02 {
    width: 200px;
    height: 160px;
    background: url(../images/content04-baloon02.png) 50% / contain no-repeat;
    font-family: var(--font-point);
    position: absolute;
    left: -60px;
    bottom: 10px;
}
.content04 p.ex-text {
    font-size: 12px;
}
@media screen and (max-width: 768px) {
    .content04 {
        text-align: center;
    }
    .content04 .l-content-inner h3 {
        margin-bottom: 30px;
    }
    .content04 .l-content-inner {
        gap: 0;
    }
    .content04 .l-content-inner-contents {
        display: flex;
        position: relative;
        align-items: center;
        margin: 0;
    }
    .content04 .baloon01 {
        right: 21px;
        width: 120px;
        height: 95px;
        top: -23px;
    }
    .content04 .baloon02 {
        width: 200px;
        height: 150px;
        position: inherit;
    }
    .content04 .l-content-inner::before {
        content: none;
    }
    .content04 .l-content-inner::after {
        width: 80px;
        height: 80px;
        bottom: inherit;
        right: inherit;
        left: 5px;
        top: 248px;
    }
}


/* ---------
content05
--------- */
.content05 {
    background: url(../images/content05-bg.png) top center / auto repeat;
}
.content05 .l-content-inner h3 {
    background: url(../images/title-bg.png) left top 50% / auto no-repeat,#2D8142;
    text-align: center;
}
.content05 .l-content-inner h3::after {
    border-top: 15px solid #2D8142;
}
.content05 .l-content-inner::before {
    content: '';
    position: absolute;
    width: 111px;
    height: 111px;
    top: 50px;
    left: 30px;
    z-index: 100;
    background: url(../images/content05-img01.png) top center / contain no-repeat;
}
.content05 .l-content-inner::after {
    content: '';
    position: absolute;
    width: 23vw;
    height: 22vh;
    max-width: 233px;
    max-height: 200px;
    bottom: 0;
    right: -80px;
    z-index: 100;
    background: url(../images/content05-img08.png) top center / contain no-repeat;
}
.content05 ul {
    max-width: 630px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.content05 ul span {
    font-size: 16px;
    background: #C6E1C7;
    display: flex;
    justify-content: center;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 3px 0;
}
@media screen and (max-width: 768px) {
    .content05 ul {
        gap: 25px 10px;
    }
    .content05 ul li {
        width: calc(50% - 10px);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .content05 .l-content-inner::before {
        width: 66px;
        height: 66px;
        top: -33px;
        left: 7px;
    }
    .content05 .l-content-inner::after {
        width: 120px;
        height: 107px;
        bottom: -75px;
        right: 0;
    }
}


/* ---------
lineup
--------- */
.lineup {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(232, 250, 253, 1));
    position: relative;
}
.lineup .l-content-inner {
    max-width: 1000px;
    background: none;
    padding: 0 0 60px;
    box-shadow: none;
}
.lineup h3 {
    background: url(../images/lineup-title-bg.png) top center / contain no-repeat;
    max-width: 513px;
    width: 100%;
    font-size: 34px;
    color: var(--black);
    padding-top: 30px;
}
.lineup h3::after {
    content: 'Lineup';
    width: auto;
    font-size: 14px;
    border: none;
    bottom: 5px;
    margin: auto;
    letter-spacing: 2px;
}
.lineup ul {
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}
.lineup ul img {
    margin-bottom: 4px;
}
.lineup .baloon {
    width: 330px;
    height: 180px;
    background: url(../images/lineup-baloon.png) 50% / contain no-repeat;
    font-size: 20px;
}
.lineup .name {
    position: absolute;
    font-family: var(--font-point);
    bottom: -60px;
    right: 0;
    font-size: 0.9rem;
}
.lineup::after {
    content: '';
    position: absolute;
    width: 60vw;
    height: 17vh;
    max-width: 577px;
    bottom: -15px;
    z-index: 100;
    background: url(../images/mv-character.png) bottom center / contain no-repeat;
}
@media screen and (max-width: 768px) {
    .lineup ul {
        gap: 25px 15px;
        flex-wrap: wrap;
    }
    .lineup ul li {
        width: calc(50% - 20px);
        display: flex;
        flex-direction: column;
    }
    .lineup .l-content-inner {
        padding: 0;
    }
    .lineup::after {
        width: 95%;
        bottom: -20px;
        height: 14vh;
    }
    .lineup .name {
        bottom: -10px;
        font-size: 12px;
        left: 0;
    }
    .lineup h3 {
        padding-top: 30px;
    }
}



/* ---------
purchase
--------- */
.purchase {
    background: url(../images/cta-bg.png) top center / auto repeat;
    position: relative;
}
.lineup__cta-head {
    width: 100%;
    max-width: 450px;
    font-family: var(--font-point);
    color: var(--white);
    background: url(../images/title-bg.png) left top 50% / auto no-repeat, #E6605A;
    border-radius: 15px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0 7px;
    position: relative;
    margin-top: 30px;
}
.lineup__cta-head::after {
    content: '';
    position: absolute;
    bottom: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    border-top: 15px solid #E6605A;
    border-bottom: 0;
}
.lineup__cta-head::before {
    content: '';
    position: absolute;
    width: 38px;
    height: 34px;
    top: -40px;
    background: url(../images/icon-cart.svg) top center / contain no-repeat;
}
.lineup__cta-body {
    position: relative;
}
.lineup__cta-body::before {
    content: '';
    position: absolute;
    width: 114px;
    height: 114px;
    top: 0;
    left: -40px;
    background: url(../images/cta-img01.png) top center / contain no-repeat;
}
.lineup__cta-body::after {
    content: '';
    position: absolute;
    width: 234px;
    height: 166px;
    bottom: -46px;
    right: -131px;
    background: url(../images/cta-img02.png) top center / contain no-repeat;
}
@media screen and (max-width: 768px) {
    .lineup__cta-block {
        padding: 70px 13px;
    }
    .lineup__cta-body {
        padding: 30px 15px 50px;
        border-radius: 34px;
    }
    .lineup__cta-buttons {
        margin-top: 2rem;
    }
    .lineup__cta-head {
        font-size: 20px;
    }
    .lineup__cta-body::before {
        width: 70px;
        height: 70px;
        top: -30px;
        right: 0;
        left: inherit;
    }
    .lineup__cta-body::after {
        width: 127px;
        height: 90px;
        left: -10px;
        bottom: -50px;
    }
    .cta-button {
        font-size: 14px;
    }
}