@charset 'Shift_JIS';
/* 文字コード Shift_JIS */

:root{
    --window-width: 100vw;
    --window-width-px: 640;

    --text-min-40px : min(40px, calc(40 / var(--window-width-px) * var(--window-width)));
    --text-min-38px : min(38px, calc(38 / var(--window-width-px) * var(--window-width)));
    --text-min-35px : min(35px, calc(35 / var(--window-width-px) * var(--window-width)));
    --text-min-33px : min(33px, calc(33 / var(--window-width-px) * var(--window-width)));
    --text-min-30px : min(30px, calc(30 / var(--window-width-px) * var(--window-width)));
    --text-min-28px : min(28px, calc(28 / var(--window-width-px) * var(--window-width)));
    --text-min-25px : min(25px, calc(25 / var(--window-width-px) * var(--window-width)));
    --text-min-24px : min(24px, calc(24 / var(--window-width-px) * var(--window-width)));
    --text-min-22px : min(22px, calc(22 / var(--window-width-px) * var(--window-width)));
    --text-min-18px : min(18px, calc(18 / var(--window-width-px) * var(--window-width)));
    --text-min-16px : min(16px, calc(16 / var(--window-width-px) * var(--window-width)));
    --text-min-14px : min(14px, calc(14 / var(--window-width-px) * var(--window-width)));
    --text-min-12px : min(12px, calc(12 / var(--window-width-px) * var(--window-width)));

    --px-1: 40;

    --px-vw-3_75: calc(calc(var(--px-1) * 3.75) / var(--window-width-px) * var(--window-width));
    --px-vw-3_5: calc(calc(var(--px-1) * 3.5) / var(--window-width-px) * var(--window-width));
    --px-vw-2_5: calc(calc(var(--px-1) * 2.5) / var(--window-width-px) * var(--window-width));
    --px-vw-2_375: calc(calc(var(--px-1) * 2.375) / var(--window-width-px) * var(--window-width));
    --px-vw-2_25: calc(calc(var(--px-1) * 2.25) / var(--window-width-px) * var(--window-width));
    --px-vw-2: calc(calc(var(--px-1) * 2) / var(--window-width-px) * var(--window-width));
    --px-vw-1_8: calc(calc(var(--px-1) * 1.8) / var(--window-width-px) * var(--window-width));
    --px-vw-1_75: calc(calc(var(--px-1) * 1.75) / var(--window-width-px) * var(--window-width));
    --px-vw-1_7: calc(calc(var(--px-1) * 1.7) / var(--window-width-px) * var(--window-width));
    --px-vw-1_65: calc(calc(var(--px-1) * 1.65) / var(--window-width-px) * var(--window-width));
    --px-vw-1_625: calc(calc(var(--px-1) * 1.625) / var(--window-width-px) * var(--window-width));
    --px-vw-1_5: calc(calc(var(--px-1) * 1.5) / var(--window-width-px) * var(--window-width));
    --px-vw-1_375: calc(calc(var(--px-1) * 1.375) / var(--window-width-px) * var(--window-width));
    --px-vw-1_25: calc(calc(var(--px-1) * 1.25) / var(--window-width-px) * var(--window-width));
    --px-vw-1_125: calc(calc(var(--px-1) * 1.125) / var(--window-width-px) * var(--window-width));
    --px-vw-1: calc(var(--px-1) / var(--window-width-px) * var(--window-width));
    --px-vw-0_875: calc(calc(var(--px-1) * 0.875) / var(--window-width-px) * var(--window-width));
    --px-vw-0_75: calc(calc(var(--px-1) * 0.75) / var(--window-width-px) * var(--window-width));
    --px-vw-0_625: calc(calc(var(--px-1) * 0.625) / var(--window-width-px) * var(--window-width));
    --px-vw-0_5: calc(calc(var(--px-1) * 0.5) / var(--window-width-px) * var(--window-width));
    --px-vw-0_4: calc(calc(var(--px-1) * 0.4) / var(--window-width-px) * var(--window-width));
    --px-vw-0_375: calc(calc(var(--px-1) * 0.375) / var(--window-width-px) * var(--window-width));
    --px-vw-0_3: calc(calc(var(--px-1) / 3) / var(--window-width-px) * var(--window-width));
    --px-vw-0_25: calc(calc(var(--px-1) * 0.25) / var(--window-width-px) * var(--window-width));
    --px-vw-0_2: calc(calc(var(--px-1) * 0.2) / var(--window-width-px) * var(--window-width));
    --px-vw-0_125: calc(calc(var(--px-1) * 0.125) / var(--window-width-px) * var(--window-width));

    --w-image1: calc(160 / var(--window-width-px) * var(--window-width));
}

.mb-3_75{ margin-bottom: var(--px-vw-3_75) !important; }
.mb-3_5{ margin-bottom: var(--px-vw-3_5) !important; }
.mb-2_5{ margin-bottom: var(--px-vw-2_5) !important; }
.mb-2_375{ margin-bottom: var(--px-vw-2_25) !important; }
.mb-2_25{ margin-bottom: var(--px-vw-2_25) !important; }
.mb-2{ margin-bottom: var(--px-vw-2) !important; }
.mb-1_8{ margin-bottom: var(--px-vw-1_8) !important; }
.mb-1_75{ margin-bottom: var(--px-vw-1_75) !important; }
.mb-1_7{ margin-bottom: var(--px-vw-1_7) !important; }
.mb-1_65{ margin-bottom: var(--px-vw-1_65) !important; }
.mb-1_625{ margin-bottom: var(--px-vw-1_625) !important; }
.mb-1_5{ margin-bottom: var(--px-vw-1_5) !important; }
.mb-1_375{ margin-bottom: var(--px-vw-1_375) !important; }
.mb-1_25{ margin-bottom: var(--px-vw-1_25) !important; }
.mb-1_125{ margin-bottom: var(--px-vw-1_125) !important; }
.mb-1{ margin-bottom: var(--px-vw-1) !important; }
.mb-0_875{ margin-bottom: var(--px-vw-0_875) !important; }
.mb-0_75{ margin-bottom: var(--px-vw-0_75) !important; }
.mb-0_625{ margin-bottom: var(--px-vw-0_625) !important; }
.mb-0_5{ margin-bottom: var(--px-vw-0_5) !important; }
.mb-0_4{ margin-bottom: var(--px-vw-0_4) !important; }
.mb-0_375{ margin-bottom: var(--px-vw-0_375) !important; }
.mb-0_3{ margin-bottom: var(--px-vw-0_3) !important; }
.mb-0_25{ margin-bottom: var(--px-vw-0_25) !important; }
.mb-0_2{ margin-bottom: var(--px-vw-0_2) !important; }
.mb-0_125{ margin-bottom: var(--px-vw-0_25) !important; }
.mb-1em{ margin-bottom: 1em !important; }

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

.text-center{
    text-align: center;
}

.text-color-white{
    color: #fff;
}

.article *,
.article *:before,
.article *:after{
    box-sizing: border-box;
}

.article{

}

.article img{
    width: 100%;
    height: auto;
    vertical-align: top;
}

.article iframe{
    vertical-align: top;
}

.wrapper_ {
    background-color: #FFF;
}

.w-600_m-auto{
    width: calc(600 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.w-580_m-auto{
    width: calc(580 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.w-fit_m-auto{
    width: fit-content;
    margin: auto;
}

.common_text{
    font-size: var(--text-min-25px);
    color: #fff;
    line-height: calc(48/26);
    text-align: center;
}

.release_date img{
    display: block;
    width: calc(363 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.contents_bg {
    background-image: url(./img/bg_base_repeat.png);
    background-size: calc(298 / var(--window-width-px) * var(--window-width));
}

/* geo_original
-----------------------------------------------------------*/
.geo_original {
    border: solid 1px #927C65;
    background-color: #F2EFE7;
}

.geo_original * {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.geo_original_title{
    margin: 0 auto;
}

.geo_original_item_img{
    width: calc(400 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.geo_original_item_title {
    font-size: var(--text-min-28px);
    font-weight: bold;
    text-align: center;
}

.geo_original_item_subtitle {
    font-size: var(--text-min-24px);
    font-weight: bold;
    text-align: center;
}

.geo_original_item_notes {
    font-size: var(--text-min-14px);
    width: calc(530 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.geo_original_video>iframe {
    aspect-ratio: 560 / 315;
    width: calc(530 / var(--window-width-px) * var(--window-width));
    height: auto;
    display: block;
    margin: 0 auto;
}

/* benefits_early
-----------------------------------------------------------*/
.benefits_early {
    border: solid 1px #927C65;
    background-color: #F2EFE7;
}

.benefits_early * {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.benefits_early_item_title {
    font-size: var(--text-min-28px);
    font-weight: bold;
    text-align: center;
}

.benefits_early_item_detail {
    font-size: calc(20 / 640 * 100vw);
    width: calc(480 / var(--window-width-px) * var(--window-width));
    margin: 0 auto calc(20 / 640 * 100vw) auto;
}

.benefits_early_item_notes {
    font-size: var(--text-min-14px);
    width: calc(530 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

/* benefits_package
-----------------------------------------------------------*/
.benefits_package {
    border: solid 1px #927C65;
    background-color: #F2EFE7;
}

.benefits_package * {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.benefits_package_item_title {
    font-size: var(--text-min-28px);
    font-weight: bold;
    text-align: center;
}

.benefits_package_item_detail {
    font-size: calc(20 / 640 * 100vw);
    width: calc(360 / var(--window-width-px) * var(--window-width));
    margin: 0 auto calc(20 / 640 * 100vw) auto;
}

.benefits_package_item_notes {
    font-size: var(--text-min-14px);
    width: calc(530 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

/* product
-----------------------------------------------------------*/
.product {
    background-image: url(./img/product_bg_bottom.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom center;
    background-color: #FFF;
    height: calc(5314 / 640 * 100vw);
}

.product_inner {
    background-image: url(./img/product_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: calc(580 / var(--window-width-px) * var(--window-width));
    height: calc(5176 / 640 * 100vw);
    margin: 0 auto;
    border: 3px solid #CFC355;
    background-color: #FFF;
}

.product_title {
    position: relative;
    z-index: 1;
    width: calc(450 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
    padding: calc(30 / var(--window-width-px) * var(--window-width)) calc(25 / var(--window-width-px) * var(--window-width)) calc(20 / var(--window-width-px)* var(--window-width));
}

.product_wrapper {
    margin: 0 auto;
}

.product .product_wrapper:first-child {
    height: calc(2124 / 640 * 100vw);
}

.product .product_wrapper:nth-child(2) {
    padding-top: calc(20 / 640 * 100vw);
}

.product_item_detail {
    font-size: calc(20 / 640 * 100vw);
    margin-left: calc(40 / 640 * 100vw);
}

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

.product_text li {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.product_item_notes {
    font-size: calc(14 / 640 * 100vw);
    width: calc(500 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.product_item {
    margin: 0 auto;
    background: #FFF;
    width: calc(500 / var(--window-width-px) * var(--window-width));
}

.product_item+.product_item {
    margin-top: calc(20 / var(--window-width-px)* var(--window-width));
}

.product_item_text {
    width: calc(500 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.product_image{
    width: calc(250 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.product_info{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.product_info_label{
    font-size: var(--text-min-24px);
    line-height: 1.5;
    letter-spacing : calc(20em / 1000);
    font-weight: bold;
    background-color: #E4000F;
    color: #FFF;
    padding: 
        calc(12 / var(--window-width-px) * var(--window-width))
        calc(25 / var(--window-width-px) * var(--window-width));
    position: relative;
    z-index: 1;
    margin: 0 auto;
    text-align: center;
}

.color_ps5 {
    color: #000000;
    background-color: #CECECE;
}

.color_ps4 {
    color: #FFFFFF;
    background-color: #0033CC;
}

.product_price_type{
    color: #FF1500;
    font-size: var(--text-min-30px);
    font-weight: bold;
    letter-spacing: -0.02em;
    line-height: calc(59/34);
    text-align: center;
}

.product_price{
    color: #FF1500;
    display: flex;
    justify-content: center;
}

.product_price_num{
    font-size: calc(98 / 640 * 100vw);
    font-weight: bold;
    letter-spacing: -0.02em;
    line-height: 1;
    font-family: 'Public Sans', 'arial black', sans-serif;
}

.product_price_yen{
    line-height: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-end;
    margin-left: calc(15 / var(--window-width-px) * var(--window-width));
    width: calc(56 / var(--window-width-px) * var(--window-width));
}

.product_price_yen .tax{
    letter-spacing: -0.02em;
    font-size: var(--text-min-18px);
    font-weight: bold;
    width: 100%;
    margin-bottom: 10px;
}

.product_price_yen .yen{
    font-weight: bold;
    letter-spacing: -0.02em;
    font-size: min(56px, calc(56 / var(--window-width-px) * var(--window-width)));
    font-weight: bold;
    width: 100%;
}

.product_link{
    width: calc(390 / var(--window-width-px) * var(--window-width));
    margin: 0 auto calc(30 / 640 * 100vw) auto;
}

/* about
-----------------------------------------------------------*/
.about {
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: calc(-120 / 640 * 100vw);
}

.about_title {
    width: calc(326 / var(--window-width-px) * var(--window-width));
    height: auto;
}

/* movie
-----------------------------------------------------------*/
.movie {
    background-image: url(./img/movie_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: calc(606 / 640 * 100vw);
}

.movie_title {
    width: calc(326 / var(--window-width-px) * var(--window-width));
    height: auto;
    padding-top: calc(60 / 640 * 100vw);
}

.movie_wrapper {
    width: calc(550 / 640 * 100vw);
    margin: 0 auto;
}

.movie_wrapper > iframe {
    aspect-ratio: 560 / 315;
    width: calc(550 / var(--window-width-px) * var(--window-width));
    height: auto;
}

/* story
-----------------------------------------------------------*/
.story_title {
    width: calc(326 / var(--window-width-px) * var(--window-width));
    height: auto;
    padding-top: calc(60 / 640 * 100vw);
    margin-top: calc(-200 / 640 * 100vw);
}

/* features
-----------------------------------------------------------*/
.features {
    background-image: url(./img/features_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    height: calc(2800 / 640 * 100vw);
}

.features * {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.features_title {
    width: calc(441 / var(--window-width-px) * var(--window-width));
    height: auto;
    padding-top: calc(68 / 640 * 100vw);
}

.adventure_life_title{
    width: calc(337 / var(--window-width-px) * var(--window-width));
}

.features_subtitle {
    font-weight: bold;
    font-size: var(--text-min-30px);
    text-align: center;
    color: #fff;
    line-height: calc(40/30);
}

.features_list {
    width: calc(580 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.features_list_img {
    width: calc(500 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

.features_list li .features_list_text {
    background-repeat: no-repeat;
    background-size: 100%;
    padding: calc(32 / 640 * 100vw) 0 calc(30 / 640 * 100vw) calc(40 / 640 * 100vw);
}

.features_list li:nth-child(1) .features_list_text {
    background-image: url(./img/features_bg01.png);
}

.features_list li:nth-child(2) .features_list_text {
    background-image: url(./img/features_bg02.png);
}

.features_list li:nth-child(3) .features_list_text {
    background-image: url(./img/features_bg03.png);
}

.features_list li:nth-child(4) .features_list_text {
    background-image: url(./img/features_bg04.png);
}

.features_list_text {
    margin: 0 auto;
}

.features_list_text>h3 {
    font-size: calc(32 / 640 * 100vw);
    line-height: 1;
    font-weight: bold;
}

.features_list_text>p {
    font-size: calc(18 / 640 * 100vw);
    color: #685348;
    line-height: 1.8;
    width: calc(510 / 640 * 100vw);
}

.dance_village_title{
    width: calc(463 / var(--window-width-px) * var(--window-width));
}


/* characters
-----------------------------------------------------------*/
.characters {
    background-image:
        url(./img/characters_h2_bg.png),
        url(./img/characters_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center, bottom center;
    height: calc(2867 / 640 * 100vw);
}

.characters_title{
    width: calc(572 / var(--window-width-px) * var(--window-width));
    height: calc(97 / 640 * 100vw);
}

.characters_list {
    display: flex;
    margin: calc(40 / 640 * 100vw) auto 0 auto;
    width: calc(520 / 640 * 100vw);
    flex-flow: wrap;
    gap: calc(20 / 640 * 100vw) calc(40 / 640 * 100vw);
}

.characters_list .characters_img {
    width: calc(240 / 640 * 100vw);
}

.link_wrapper{
    padding-top: calc(80 / var(--window-width-px) * var(--window-width));
}

.link_wrapper .notes{
    font-size: var(--text-min-14px);
    text-align: center;
}

.link{
    width: calc(390 / var(--window-width-px) * var(--window-width));
    margin: 0 auto;
}

/* article_footer
-----------------------------------------------------------*/
.article_footer{
    text-align: center;
    padding:
        calc(40 / var(--window-width-px) * var(--window-width))
        calc(20 / var(--window-width-px) * var(--window-width))
        calc(100 / var(--window-width-px) * var(--window-width));
    font-size: var(--text-min-16px);
}

.article_footer > p:first-child{
    margin-bottom: 1em;
}

.article img.playstation_familymark{
    width: calc(25 / var(--window-width-px) * var(--window-width));
}

.article img.ps5_logo{
    width: calc(55 / var(--window-width-px) * var(--window-width));
}

.article img.ps4_logo{
    width: calc(55 / var(--window-width-px) * var(--window-width));
}

.article img.playstation_familymark,
.article img.ps5_logo,
.article img.ps4_logo{
    vertical-align: middle;
}