@charset "Shift_JIS";
/************************************************************************************
*  suparobo-y section
************************************************************************************/
body {
    background-color: #000000;
    position: relative;
}

article.suparobo-y {
    background-color: #000;
    background-image: url('../img/bg.jpg');
    background-position: center calc(-1800 / 640 * 100vw);
    background-repeat: repeat-y;
    background-size: contain;
    color: #FFF;
    display: block;
    width: 100%;
}

.suparobo-y h2,
.suparobo-y h3 {
    font-weight: 700;
}

.suparobo-y img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    width: auto;
}

.suparobo-y li {
    padding-left: 1em;
    text-indent: -1em;
}

.suparobo-y section {
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
}


/* mv
-----------------------------------------------------------*/
.mv {
    margin-bottom: calc(20 / 640 * 100vw);
}

.suparobo-y img.release_date {
    margin-bottom: calc(30 / 640 * 100vw);
    width: calc(319 / 640 * 100vw);
}


/* itemInfo_wrap
-----------------------------------------------------------*/
.itemInfo_wrap {
    margin: 0 auto calc(42 / 640 * 100vw);
    width: calc(620 / 640 * 100vw);
}

/* itemInfo_wrap > earlyPurchaseReservationPrivilege */
.earlyPurchaseReservationPrivilege {
    margin-bottom: calc(40 / 640 * 100vw);
    position: relative;
    z-index: 1;
}

.suparobo-y img.earlyPurchaseReservationPrivilege_title {
   margin-bottom: calc(-43 / 640 * 100vw);
}

.earlyPurchaseReservationPrivilege_item {
    align-items: center;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    flex-direction: column;
    padding-top: calc(63 / 640 * 100vw);
    text-align: center;
}

.suparobo-y img.earlyPurchaseReservationPrivilege_contents {
    margin-bottom: calc(20 / 640 * 100vw);
    width: calc(600 / 640 * 100vw);
}

.earlyPurchaseReservationPrivilege .privilege01 {
    border-bottom: solid #FFF calc(3 / 640 * 100vw);
    font-size: calc(26 / 640 * 100vw);
    font-weight: 700;
    margin-bottom: calc(20 / 640 * 100vw);
    padding-bottom: calc(20 / 640 * 100vw);
    width: calc(590 / 640 * 100vw);
}

.earlyPurchaseReservationPrivilege .privilege02 {
    font-size: calc(26 / 640 * 100vw);
    font-weight: 700;
    letter-spacing: calc(-1 / 640 * 100vw);
}

.earlyPurchaseReservationPrivilege .privilege02_detail {
    font-size: calc(14 / 640 * 100vw);
    margin-bottom: calc(30 / 640 * 100vw);
}

.earlyPurchaseReservationPrivilege ul.notice {
    background-color: rgb(0 0 0 / 50%);
    font-size: calc(14 / 640 * 100vw);
    padding: 0 calc(35 / 640 * 100vw) calc(40 / 640 * 100vw);
}

/* itemInfo_wrap > items */
.items {
    margin: auto;
    width: calc(598 / 640 * 100vw);
    z-index: 1;
}

.suparobo-y img.items_title {
    margin-bottom: calc(40 / 640 * 100vw);
}

/* items_wrap */
.item_info {
    background-color: #FFF;
    font-weight: 700;
    margin: auto;
    padding-bottom: calc(40 / 640 * 100vw);
    text-align: center;
    width: calc(540 / 640 * 100vw);
}

.item_info + .item_info {
    margin-top: calc(30 / 640 * 100vw);
}

/* model */
.model {
    font-size: calc(30 / 640 * 100vw);
    height: calc(58 / 640 * 100vw);
    line-height: calc(60 / 640 * 100vw);
    width: calc(540 / 640 * 100vw);
}

.model_swi .model {
    background-color: #E4000F;
    color: #FFF;
}

.model_ps5 .model {
    background-color: #D6DCE5;
    color: #000;
}

/* price */
.price_title {
    color: #FF000C;
    font-size: calc(34 / 640 * 100vw);
}

.item_price {
    margin-bottom: calc(30 / 640 * 100vw);
}

.item_price .price_font {
    color: #FF000C;
    font-size: calc(110 / 640 * 100vw);
    letter-spacing: calc(-4 / 640 * 100vw);
}

.model_ps5 .item_price .price_font {
    letter-spacing: calc(8 / 640 * 100vw);
}

.item_price .yen {
    color: #FF000C;
    font-size: calc(55 / 640 * 100vw);
    left: calc(10 / 640 * 100vw);
}

.item_price .yen::before {
    left: calc(-2 / 640 * 100vw);
    top: calc(-18 / 640 * 100vw);
}

.suparobo-y img.cta_btn {
    width: calc(390 / 640 * 100vw);
}

a.cta_btn,
img.cta_btn,
img.btn_soldout {
    width: calc(390 / 640 * 100vw);
    position: static;
}

/* package_img */
.suparobo-y .model_swi > img.package_img {
    margin: calc(30 / 640 * 100vw) auto calc(20 / 640 * 100vw);
    width: calc(258 / 640 * 100vw);
}

.suparobo-y .model_ps5 > img.package_img {
    margin: calc(37 / 640 * 100vw) auto calc(27 / 640 * 100vw);
    width: calc(314 / 640 * 100vw);
}


/* movie
-----------------------------------------------------------*/
section.movie {
    background-image: url('../img/title_bg.png');
    background-size: contain;
    margin-bottom: calc(42 / 640 * 100vw);
}

.movie h2 {
    font-size: calc(54 / 640 * 100vw);
    line-height: 1.2;
    margin-bottom: calc(85 / 640 * 100vw);
    padding-top: calc(6 / 640 * 100vw);
    text-align: center;
    text-shadow: 0 calc(3 / 640 * 100vw) 0 rgb(26 0 99 / 59%);
}

.suparobo-y .movie .movie_box {
    width: calc(550 * 100vw / 640);
    height: calc(310 * 100vw / 640);
    padding: 0;
    margin: auto;
}

.movie_box iframe {
    height: calc(310 * 100vw / 640);
    width: calc(550 * 100vw / 640);
}


/* system
-----------------------------------------------------------*/
section.system_wrap {
    background-image: url('../img/title_bg.png');
    background-size: contain;
    margin-bottom: calc(42 / 640 * 100vw);
}

.system_wrap h2 {
    font-size: calc(54 / 640 * 100vw);
    line-height: 1.2;
    margin-bottom: calc(85 / 640 * 100vw);
    padding-top: calc(6 / 640 * 100vw);
    text-align: center;
    text-shadow: 0 calc(3 / 640 * 100vw) 0 rgb(26 0 99 / 59%);
}

/* system > system_inner */
.system_inner {
    background-color: rgba(128,67,95,0.4);
    margin: 0 calc(20 * 100vw / 640) calc(43 * 100vw / 640);
    padding: calc(40 * 100vw / 640) calc(21 * 100vw / 640);
}

.suparobo-y img.system_title01 {
    margin-bottom: calc(37 / 640 * 100vw);
    width: calc(542 * 100vw / 640);
}

.system_inner p {
    font-size: calc(23 / 640 * 100vw);
    font-weight: 700;
    letter-spacing: calc(-1 / 640 * 100vw);
    text-align: center;
    text-shadow: calc(2 / 640 * 100vw) calc(2 / 640 * 100vw) calc(3 / 640 * 100vw) rgb(0 0 0 / 80%);
}

.system_inner .system_detai {
    margin: 0 auto calc(57 / 640 * 100vw);
    width: calc(520 * 100vw / 640);
}

.suparobo-y img.system_img {
    margin: calc(36 / 640 * 100vw) 0 calc(20 / 640 * 100vw);
}

.system_inner .system_detai p {
    font-size: calc(22 / 640 * 100vw);
    font-weight: 400;
    letter-spacing: -0.02em;
    text-align:left;
}

/* system > newSystem */
.newSystem {
    margin: 0 calc(20 * 100vw / 640) calc(40 * 100vw / 640);
}

.newSystem_inner {
    background-color: rgba(128,67,95,0.4);
    font-size: calc(20 / 640 * 100vw);
    font-weight: 400;
    padding: calc(30 * 100vw / 640) calc(40 * 100vw / 640);
    text-shadow: calc(2 / 640 * 100vw) calc(2 / 640 * 100vw) calc(3 / 640 * 100vw) rgb(0 0 0 / 80%);
}

.newSystem_inner + .newSystem_inner {
    margin-top: calc(20 * 100vw / 640);
}

.suparobo-y img.system_title02,
.suparobo-y img.system_title03,
.suparobo-y img.system_title04 {
    margin-bottom: calc(36 * 100vw / 640);
    width: calc(520 * 100vw / 640);
}

.newSystem_inner p + p {
    margin-top: 1em;
}


/* story
-----------------------------------------------------------*/
section.story {
    background-image: url('../img/story_bg.png');
    background-size: cover;
    padding-bottom: calc(85 / 640 * 100vw);
    width: 100%;
}

.story h2 {
    font-size: calc(54 / 640 * 100vw);
    line-height: 1.2;
    margin-bottom: calc(105 / 640 * 100vw);
    padding-top: calc(6 / 640 * 100vw);
    text-align: center;
    text-shadow: 0 calc(3 / 640 * 100vw) 0 rgb(26 0 99 / 59%);
}


/* character
-----------------------------------------------------------*/
section.character {
    background-image: url('../img/title_bg.png');
    background-size: contain;
    margin-bottom: calc(80 / 640 * 100vw);
    width: 100%;
}

.character h2 {
    font-size: calc(54 / 640 * 100vw);
    line-height: 1.2;
    margin-bottom: calc(85 / 640 * 100vw);
    padding-top: calc(10 / 640 * 100vw);
    text-align: center;
    text-shadow: 0 calc(3 / 640 * 100vw) 0 rgb(26 0 99 / 59%);
}

/* character > entryWorks */
.entryWorks {
    background-color: rgba(75,113,203,0.4);
    font-size: calc(24 / 640 * 100vw);
    font-weight: 700;
    margin: 0 calc(20 / 640 * 100vw) calc(80 / 640 * 100vw);
    padding: calc(30 / 640 * 100vw) calc(40 / 640 * 100vw);
}

.entryWorks li {
    line-height: 1.8;
}

.entryWorks span {
    font-size: calc(19 / 640 * 100vw);
}

.suparobo-y img.entryWorks_title {
    margin-bottom: calc(40 / 640 * 100vw);
    width: calc(217 * 100vw / 640);
}

/* character > originalCharacter */
.originalCharacter {
    margin-bottom: calc(60 / 640 * 100vw);
}

.suparobo-y img.originalCharacter_title {
    margin-bottom: calc(20 / 640 * 100vw);
    width: calc(261 * 100vw / 640);
}

.suparobo-y img.character02 {
    margin-top: calc(-78 / 640 * 100vw);
}

.suparobo-y img.character03 {
    margin-top: calc(20 / 640 * 100vw);
}

.suparobo-y img.character04 {
    margin-top: calc(-137 / 640 * 100vw);
}

.suparobo-y img.character05 {
    margin-top: calc(40 / 640 * 100vw);
}

.suparobo-y img.character06 {
    margin-top: calc(-84 / 640 * 100vw);
}


/* character > special */
.special {
    background-color: rgba(255,41,198,0.4);
    font-weight: 700;
    margin: 0 calc(20 / 640 * 100vw) calc(80 / 640 * 100vw);
    padding: calc(40 / 640 * 100vw) calc(20 / 640 * 100vw) calc(50 / 640 * 100vw);
    text-align: center;
}

.suparobo-y img.special_title {
    margin-bottom: calc(60 / 640 * 100vw);
    width: calc(301 * 100vw / 640);
}

.special .character {
    font-size: calc(30 / 640 * 100vw);
    margin: 0;
}

.special .title {
    font-size: calc(22 / 640 * 100vw);
    margin-bottom: calc(40 / 640 * 100vw);
}


/* cta_btn_bottom
-----------------------------------------------------------*/
.cta_btn_bottom {
    display: flex;
    justify-content: center;
    margin: 0 auto calc(80 / 640 * 100vw);
    width: calc(390 / 640 * 100vw);
}


/* inner footer
-----------------------------------------------------------*/
.inner_footer {
    align-content: center;
    align-items: center;
    color: #FFF;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding-bottom: calc(180 / 640 * 100vw);
    text-align: center;
}

.inner_footer p {
    font-size: calc(14 / 640 * 100vw);
}

.inner_footer .suparobo-y {
    margin-bottom: calc(88 / 640 * 100vw);
}

.inner_footer p.ps {
    font-size: calc(13 / 640 * 100vw);
    margin-bottom: calc(14 / 640 * 100vw);
}

.inner_footer .nintendo {
    font-size: calc(14 / 640 * 100vw);
    margin-bottom: calc(6 / 640 * 100vw);
}

.inner_footer img.ps {
    display: inline-block;
    height: 1.2em;
}

.inner_footer img.ps5 {
    display: inline-block;
    height: 0.8em;
}