/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500&display=swap');

:root {
    --color-text-main: #B28155;
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

a {
    color: inherit;
    text-decoration: none;
    /* transition: transform .3s, opacity .3s; */
}
a.link_urltext {
    text-decoration: underline;
}
/* a:hover {
    transform: scale(.97);
    transition: transform .3s, opacity .3s;
} */
.hover:hover {
    animation: pyoko 1.6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@keyframes pyoko {
    0% { transform: translateY(0); }
    10% { transform: translateY(-5px); }
    20% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
    40% { transform: translateY(0); }
    100% { transform: translateY(0); }
}
img {
    display: block;
    max-width: 100%;
}
img.center {
    max-width: unset;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 400;
    background-color: #00b8ee;
    font-size: 1rem;
    color: #552e31;
    width: 100%;
    min-width: 1200px;
    overflow-x: hidden;
}
/* footer, header, hgroup, main, menu, nav, summary {
    overflow-x: hidden;
} */
.font_kiwi {
    font-family: 'Kiwi Maru', serif;
}
strong {
    font-weight: 900;
}
figure {
    margin: 0;
}

.sp {
    display: none !important;
}
@media only screen and (max-width: 768px) {
    html, body {
        width: 100vw;
        min-width: unset;
        overflow-x: hidden;
    }
    .pc {
        display: none !important;
    }
    .sp {
        display: initial !important;
    }
    img {
        max-width: unset;
    }
}
.disabled {
    cursor: initial;
    pointer-events: none;
    opacity: 0;
    display: none !important;
}


/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
    Author's custom styles
   ========================================================================== */

/*
 * nav
 */
nav {
    cursor: pointer;
}
nav img {
    width: 100px;
    height: 100px;
    transition: opacity 0.3s;
}
nav img:hover {
    opacity: 0.7 !important;
}
.nav_open {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: all 200ms;
}
nav.is-open .nav_open {
    opacity: 0;
    visibility: hidden;
    transition: all 200ms;
}
.nav_close {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 200ms;
}
nav.is-open .nav_close {
    opacity: 1;
    visibility: visible;
    transition: all 200ms;
}
.nav {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow-y: scroll;
    z-index: -1;
    opacity: 0;
    transition: all 200ms;
}
.nav.is-open {
    opacity: 1;
    z-index: 1000;
    transition: all 200ms;
}
.nav_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 97;
    background: #fff;
    opacity: 0;
    transition: all 200ms;
    cursor: pointer;
}
.nav.is-open .nav_bg {
    opacity: .6;
    opacity: 1;
}
.nav_cont {
    position: relative;
    background: #fff;
    width: 100vw;
    padding: 40px 0 50px;
    z-index: 1000;
}
.nav_wrapper {
    /* width: 675px; */
    margin: auto;
    text-align: center;
}
.nav_logo {
    margin: auto;
}
.nav_menu_wrapper {
    width: 1020px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nav_menu_wrapper > * {
    margin-top: 35px;
}
.nav_menu_wrapper img.nav_banner_special {
    margin-bottom: 12px;
    box-shadow: 0px 3px 8px #ccc;
}
.nav_menu_sub_wrapper {
    width: 1000px;
    box-sizing: border-box;
    background: #BAE3F9;
    padding: 35px 40px;
    display: flex;
    justify-content: space-between;
}
.nav_menu_sub_item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nav_menu_sub_item a + a img {
    margin-top: 18px;
}
.nav_menu_sub_item .disabled {
    display: block !important;
    opacity: 1;
}
.nav_twitter_wrapper {
    width: 1025px;
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 768px) {
    nav img {
        width: calc(100vw / 375 * 60);
        height: calc(100vw / 375 * 60);
    }
    .nav_cont {
        padding: calc(100vw / 375 * 31) 0 0;
    }
    .nav_logo {
        width: calc(100vw / 375 * 132);
    }
    .nav_menu_wrapper {
        width: 100%;
        margin-top: calc(100vw / 375 * 15);
    }
    .nav_menu_wrapper > * {
        margin-top: calc(100vw / 375 * 3);
    }
    .nav_menu_wrapper img {
        width: calc(100vw / 375 * 350);
    }
    .nav_menu_wrapper img.nav_banner_special {
        width: calc(100vw / 375 * 350 * 0.948);
        margin-top: calc(100vw / 375 * 8);
        margin-bottom: 0;
        box-shadow: 0px 2px 7px #999;
    }
    .nav_menu_sub_wrapper {
        width: 100%;
        margin-top: calc(100vw / 375 * 25);
        flex-direction: column;
    }
    .nav_menu_sub_item img {
        width: calc(100vw / 375 * 335);
    }
    .nav_menu_sub_item a img {
        width: calc(100vw / 375 * 350);
    }
    .nav_menu_sub_item:not(:first-of-type) {
        margin-top: calc(100vw / 375 * 20);
    }
    .nav_menu_sub_item a img {
        margin-top: calc(100vw / 375 * 5);
    }
    .nav_menu_sub_item a + a img {
        margin-top: calc(100vw / 375 * 5);
    }
    .nav_menu_sub_title {
        margin: calc(100vw / 375 * 5) auto;

    }
    .nav_twitter_wrapper {
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: calc(100vw / 375 * 30) 0;
    }
    .nav_banner_cinapedia0225 {
        margin: calc(100vw / 375 * 20) auto calc(100vw / 375 * -20);
    }
}


/*
 * kv
 */
.kv {
    background: 
        url(../img/bg_kv_.png) top -27px center/auto no-repeat,
        #54C3F1
        url(../img/bg_bridge1.png) bottom 0 center/auto no-repeat;
    height: calc(911px + 123px);
    position: relative;
    overflow: hidden;
}
.kv.ie {
    background: 
        url(../img/bg_kv_.png) top -27px center/auto no-repeat,
        #54C3F1;
    height: 100vh;
    min-height: 850px;
}
.kv_main_wrapper {
    margin: 107px auto 0;
    position: relative;
    width: 687px;
}
.kv.ie .kv_main_wrapper {
    margin: 70px auto 0;
    position: relative;
    width: 499px;
}
.kv.ie p {
    font-size: 22px;
    line-height: 45px;
    color: #fff;
    text-align: center;
    position: relative;
    top: 516px;
}
.kv.ie .footer_ie {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}
.kv_main_cinamoroll {
    position: absolute;
    top: 0;
    left: 0;
}
.kv_text {
    /* background: url(../img/kv_text_box.png); */
    position: absolute;
    top: 333px;
    left: calc(50% - 314px);
    transform: translateX(-50%);
    width: 234px;
    height: 179px;
    color: #B28155;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
.kv_text p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 24px;
    box-sizing: border-box;
    font-size: 19px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.1rem;
    color: #B28155;
    display: flex;
    align-items: center;
    justify-content: center;
}
.float_topics {
    background: url(../img/kv_news_box.png);
    position: fixed;
    /* top: 543px; */
    top: calc(100vh - 258px - 60px);
    right: 100px;
    width: 258px;
    height: 258px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.float_topics p {
    margin-top: 6px;
    padding: 83px 35px;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    color: #54C3F1;
    text-align: center;
    align-self: center;
    display: flex;
}
.float_topics_menu {
    display: none;
}
@media only screen and (min-width: 1920px) {
    .kv {
        background: 
            url(../img/bg_kv.png) top -27px center/auto no-repeat,
            #54C3F1
            url(../img/bg_bridge1w.png) bottom 0 center/100% 285px no-repeat;
        height: calc(911px + 123px);
    }
}
@media only screen and (max-width: 768px) {
    .kv {
        background: 
            url(../img/bg_kv_sp.png) top 0 center/105% no-repeat,
            #54C3F1
            url(../img/bg_bridge1_sp.png) bottom 0 center/100% no-repeat;
        height: calc(100vw / 375 * 640);
    }
    .kv.ie {
        background: 
        url(../img/bg_kv_sp.png) top 0 center/105% no-repeat,
        #54C3F1;
        height: 100vh;
        min-height: calc(100vw / 375 * 740);
    }
    .kv_main_wrapper,
    .kv.ie .kv_main_wrapper {
        margin: calc(100vw / 375 * 139) auto 0;
        width: calc(100vw / 375 * 271);
    }
    .kv_main_wrapper img {
        width: 100%;
    }
    .kv.ie p {
        font-size: calc(100vw / 375 * 14);
        line-height: calc(100vw / 375 * 26);
        top: calc(100vw / 375 * 435);
    }
    .kv.ie .footer_ie {
        width: calc(100vw / 375 * 266);
        bottom: calc(100vw / 375 * 40);
    }

    .kv_text {
        /* background: url(../img/kv_text_box_sp.png) 0 / calc(100vw / 375 * 126); */
        top: calc(100vw / 375 * 30);
        left: calc(50% - (100vw / 375 * 0));
        width: calc(100vw / 375 * 126);
        height: calc(100vw / 375 *  114);
    }
    .kv_text img {
        width: 100%;
    }
    .kv_text p {
        padding: 0 calc(100vw / 375 * 10) calc(100vw / 375 * 20) calc(100vw / 375 * 10);
        margin-left: calc(100vw / 375 * -3);
        font-size: calc(100vw / 375 * 10);
        line-height: calc(100vw / 375 * 15);
        color: #B28155;
    }
    .float_topics {
        display: flex;
        background: url(../img/kv_news_box_sp.png) 0 / calc(100vw / 375 * 198);
        position: absolute;
        position: fixed;
        /* top: calc(100vw / 375 * 460); */
        top: calc(100vh - (100vw / 375 * (222 + 60)));
        right: calc(100vw / 375 * 20);
        width: calc(100vw / 375 * 198);
        height: calc(100vw / 375 * 222);
    }
    .float_topics p {
        margin-top: calc(100vw / 375 * 40);
        padding: 0 calc(100vw / 375 * 32) 0 calc(100vw / 375 * 35);
        font-size: calc(100vw / 375 * 12);
        line-height: calc(100vw / 375 * 19);
        text-align: left;
    }
    body:not(.top) .float_topics {
        display: none;
    }
    .float_topics_menu {
        background: url(../img/kv_news_box_menu_sp.png) 0 / calc(100vw / 375 * 356);
        position: fixed;
        top: calc(100vw / 375 * 0);
        right: calc(100vw / 375 * 0);
        width: calc(100vw / 375 * 356);
        height: calc(100vw / 375 * 60);
        z-index: 999;
        margin: 0;
        display: flex;
        align-items: center;
    }
    .float_topics_menu p {
        padding: 0 calc(100vw / 375 * 72) 0 calc(100vw / 375 * 138);
        font-size: calc(100vw / 375 * 11);
        line-height: calc(100vw / 375 * 15);
        font-weight: 500;
        text-align: left;
        color: #54C3F1;
    }
}



/*
 * title
 */
.title {
    position: relative;
    margin-top: -173px;
    z-index: 9;
}
.title_gate {
    width: 1500px;
}
.title_inner {
    position: absolute !important;
    bottom: 0;
}
.lead {
    position: relative;
    background: #BAE3F9;
    margin-top: -203px;
    height: auto;
}
.lead_text {
    color: #B28155;
    font-size: 22px;
    font-weight: 500;
    line-height: 45px;
    padding-top: 265px;
    text-align: center;
}
.btn_story_wrapper {
    margin: 50px auto 0;
    display: flex;
    justify-content: center;
}
.btn_story_wrapper img {
    width: 1000px;
}
/* bridge 2 */
.bg_bridge2 {
    position: relative;
    background: #BAE3F9 url(../img/bg_bridge2.png) top 0 center/auto no-repeat;
    height: 257px;
    margin-top: -35px;
}
@media only screen and (min-width: 1920px) {
    .bg_bridge2 {
        background: #BAE3F9 url(../img/bg_bridge2w.png) top 0 center/100% 100% no-repeat;
    }
}

@media only screen and (max-width: 768px) {
    .title {
        background: #BAE3F9;
        margin-top: calc(100vw / 375 * -1);
        padding-top: calc(100vw / 375 * 10);
    }
    .title_gate {
        width: 100%;
    }
    .title_inner {
        bottom: calc(100vw / 375 * -10);
        width: calc(100vw / 375 * 159);
    }
    .lead {
        position: relative;
        background: #BAE3F9;
        margin-top: 0;
        height: auto;
        padding-bottom: calc(100vw / 375 * 80);
    }
    .lead_text {
        font-size: calc(100vw / 375 * 16);
        line-height: calc(100vw / 375 * 30);
        padding-top: calc(100vw / 375 * 40);
    }
    .btn_story_wrapper {
        margin: calc(100vw / 375 * 25) auto 0;
    }
    .btn_story_wrapper img {
        width: calc(100vw / 375 * 322);
    }
    /* bridge 2 */
    .bg_bridge2 {
        position: relative;
        background: #BAE3F9 url(../img/bg_bridge2_sp.png) top 0 center/100% no-repeat;
        height: calc(100vw / 375 * 82);
    }
}



/*
 * movie
 */
.movie {
    position: relative;
    background: #fff;
    height: auto;
    padding-bottom: 45px;
    margin-top: -1px;
}
.movie_bge {
    position: absolute;
    transform: translateX(-50%);
}
.movie_bge1 {
    top: 216px;
    left: calc(50% + 715px);
}
.movie_bge2 {
    top: 325px;
    left: calc(50% - 740px);
}
.movie_bge3 {
    top: 640px;
    left: calc(50% + 734px);
}
img.center.movie_bg_under {
    left: calc(50% - 158px);
    margin-top: -354px;
}

.movie_video_box {
    position: relative;
    margin: 61px auto;
    z-index: 1;
}
.movie_video {
    width: 1000px;
    margin: 52px auto 0;
}
.movie_video_wrapeer {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.3%;
}
.movie_video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.movie_spacer {
    height: 120px;
}
@media only screen and (max-width: 768px) {
    .movie {
        padding-top: calc(100vw / 375 * 70);
        padding-bottom: 0;
    }
    .movie_title_img  {
        width: calc(100vw / 375 * 335);
    }
    .movie_bge1 {
        top: calc(100vw / 375 * 0);
        left: calc(50% + (100vw / 375 * 125));
        width: calc(100vw / 375 * 94);
    }
    .movie_bge2 {
        top: calc(100vw / 375 * -75);
        left: calc(50% + (100vw / 375 * -127));
        width: calc(100vw / 375 * 67);
    }
    img.center.movie_bg_under {
        left: calc(50% - (100vw / 375 * 45));
        margin-top: calc(100vw / 375 * -20);
        width: calc(100vw / 375 * 422);
    }
    .movie_video_box {
        position: relative;
        margin: calc(100vw / 375 * -30) auto calc(100vw / 375 * 60);
    }
    .movie_video {
        width: calc(100vw / 375 * 331);
        margin: calc(100vw / 375 * 40) auto 0;
    }
    .movie_spacer {
        height: 1px;
    }
}


/* bridge 3 */
.bg_bridge3 {
    position: relative;
    background: #fff url(../img/bg_bridge3.png) top 0 center/auto no-repeat;
    height: 240px;
    margin-top: -35px;
}
.bg_bridge3:after {
    display: block;
    position: absolute;
    bottom: 20px;
    left: 0;
    animation: bg_ft_repeat 25s linear infinite;
    background: url(../img/march.png) repeat-x center left;
    background-size: auto;
    background-size: auto 171px;
    width: 100vw;
    height: 171px;
    content: "";
}
@keyframes bg_ft_repeat {
    0% { background-position: 0 center; }
    100% { background-position: -1759px center; }
}
.bg_bridge4 {
    position: relative;
    background: #54C3F1 url(../img/bg_bridge4.png) top 0 center/auto no-repeat;
    height: 38px;
}
@media only screen and (min-width: 1920px) {
    .bg_bridge3 {
        background: #fff url(../img/bg_bridge3w.png) top 0 center/100% 100% no-repeat;
    }
    .bg_bridge4 {
        background: #54C3F1 url(../img/bg_bridge4w.png) top 0 center/100% 100% no-repeat;
    }
}
@media only screen and (max-width: 768px) {
    .bg_bridge3 {
        position: relative;
        background: #BAE3F9 url(../img/bg_bridge3_sp.png) top 0 center/100% no-repeat;
        height: calc(100vw / 375 * (19 + 75));
        margin-top: 0;
    }
    .bg_bridge3:after {
        bottom: calc(100vw / 375 * 3);
        animation: bg_ft_repeat_sp 25s linear infinite;
        background: url(../img/march_sp.png) repeat-x center left;
        background-size: calc(100vw / 375 * 702);
        background-size: calc(100vw / 375 * 702) calc(100vw / 375 * 71);
        height: calc(100vw / 375 * 71);
    }
    @keyframes bg_ft_repeat_sp {
        0% { background-position: 0 center; }
        100% { background-position: calc(100vw / 375 * -702) center; }
    }
    .bg_bridge4 {
        background: #54C3F1 url(../img/bg_bridge4_sp.png) top 0 center/100% no-repeat;
        height: calc(100vw / 375 * 11);
    }
}


/*
 * topics
 */
section.topics {
    position: relative;
    background: #54C3F1 url(../img/bg_topics.png) top 300px center/auto repeat-y;
    height: auto;
    padding-bottom: 45px;
}
.topics_box_wrapper {
    padding-top: 80px;
}
.topics_box {
    position: relative;
    background: #fff;
    margin: 100px auto;
    padding: 20px;
    width: 1000px;
    height: auto;
    color: #29A5DB;
    text-align: center;
    box-sizing: border-box;
}
.topics_box_inner {
    padding: 20px 105px 92px;
    border: 3px solid #54C3F1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.topics_date {
    margin: 20px auto 0;
    font-size: 22px;
    font-weight: 500;
}
.topics_icon_wrapper {
    margin: 20px auto 20px;
    display: flex;
}
.topics_icon_wrapper > *:not(:first-of-type) {
    margin-left: 15px;
}
.topics_post_title {
    font-size: 35px;
    font-weight: 500;
    line-height: 60px;
}
.topics_post_img {
    width: 600px;
    margin: 36px auto;
}
.topics_post_text {
    width: 600px;
    margin: auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: -0.05rem;
    text-align: left;
}
.btn_topics_detail_wrapper {
    margin: 30px auto 0;
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 768px) {
    section.topics {
        background: #54C3F1;
        padding-bottom: calc(100vw / 375 * 1);
    }
    .topics_box_wrapper {
        padding-top: calc(100vw / 375 * 10);
    }
    .topics_box {
        margin: calc(100vw / 375 * 50) auto;
        padding: calc(100vw / 375 * 5);
        width: calc(100vw / 375 * 335);
    }
    .topics_box_inner {
        padding: calc(100vw / 375 * 20) calc(100vw / 375 * 20) calc(100vw / 375 * 25);
        border: 1px solid #54C3F1;
    }
    .topics_date {
        margin: 0 auto calc(100vw / 375 * 5);
        font-size: calc(100vw / 375 * 14);
    }
    .topics_icon_wrapper {
        margin: 0 auto calc(100vw / 375 * 10);
        display: flex;
    }
    .topics_icon_wrapper > *:not(:first-of-type) {
        margin-left: calc(100vw / 375 * 10);
    }
    .topics_post_title {
        font-size: calc(100vw / 375 * 18);
        line-height: calc(100vw / 375 * 30);
        letter-spacing: -0.02rem;
        margin: 0 calc(100vw / 375 * -1);
    }
    .topics_post_img {
        width: calc(100vw / 375 * 285);
        margin: calc(100vw / 375 * 17) auto;
    }
    .topics_post_text {
        width: calc(100vw / 375 * 285);
        font-size: calc(100vw / 375 * 14);
        line-height: calc(100vw / 375 * 25);
    }
    .btn_topics_detail_wrapper {
        margin: calc(100vw / 375 * 20) auto 0;
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }
    .btn_topics_detail_wrapper img {
        width: calc(100vw / 375 * 303);
    }
    .icon_topics {
        width: calc(100vw / 375 * 65);
    }
    .icon_topics_campaign {
        width: calc(100vw / 375 * 83);
    }
}

/*
 * footer
 */
.footer {
    background: url(../img/bg_footer.png) top 0 center/auto no-repeat;
    height: 1502px;
    text-align: center;
    position: relative;
    margin-top: -133px;
    padding-top: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.footer .pagetop {
    position: absolute;
    bottom: 136px;
    left: calc(50% + 660px);
    transform: translateX(-50%);
    /* right: 116px; */
    width: 134px;
    z-index: 99;
    display: flex;
    justify-content: center;
}
.footer_twitter_wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 45px;
}
.footer_twitter_item {
    flex-direction: column;
    align-items: center;
    display: flex;
}
.footer_twitter_item:not(:first-of-type) {
    margin-left: 34px;
}
.footer_btn_twitter {
    margin: 0 -20px 0 -10px;
    width: calc(100% + 30px);
    max-width: unset;
}
.footer_twitter_timeline {
    width: 483px;
    height: 469px;
    margin-top: 26px;
    background-color: #fff;
    border: 1px solid #54C3F1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn_footer_link1_wrapper {
    margin: 78px auto 0;
    display: flex;
    justify-content: center;
    z-index: 1;
}
.footer_cinnamoroll {
    position: absolute;
    bottom: 260px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.footer_bg_under {
    position: absolute;
    bottom: 243px;
    left: calc(50% - 10px);
    transform: translateX(-50%);
    max-width: unset;
}
.footer_footer {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}
.footer_bge_star_wrapper {
    transform: translateX(-50%);
    position: absolute;
    width: 228px;
    height: 335px;
}
.footer_bge_star_wrapper1 {
    top: 608px;
    left: calc(50% - 693px);
}
.footer_bge_star_wrapper2 {
    top: 255px;
    left: calc(50% + 725px);
}
.bge_footer_star1 {
    position: absolute;
    top: 0;
    left: 0;
}
.bge_footer_star2 {
    position: absolute;
    bottom: 0;
    right: 0;
}
.bge_footer1 {
    position: absolute;
    top: 200px;
    left: calc(50% - 785px);
    transform: translateX(-50%);
}
.bge_footer2 {
    position: absolute;
    top: 380px;
    left: calc(50% - 660px);
    transform: translateX(-50%);
}
.bge_footer3 {
    position: absolute;
    top: 640px;
    left: calc(50% + 660px);
    transform: translateX(-50%);
}
@media only screen and (max-width: 1500px) {
    .footer .pagetop {
        bottom: 136px;
        right: 44px;
        left: unset;
        transform: unset;
        width: 134px;
    }
}
@media only screen and (max-width: 768px) {
    .footer {
        background: #54C3F1 url(../img/bg_footer_sp.png) top 0 center/100% no-repeat;
        height: calc(100vw / 375 * 1376);
        margin-top: 0;
        padding-top: calc(100vw / 375 * 80);
    }
    .footer .pagetop {
        bottom: calc(100vw / 375 * 200);
        left: unset;
        transform: unset;
        right: calc(100vw / 375 * 20);
        width: calc(100vw / 375 * 71);
    }
    .footer .pagetop img {
        width: calc(100vw / 375 * 71);
    }
    .footer_title {
        width: calc(100vw / 375 * 320);
    }
    .footer_twitter_wrapper {
        display: flex;
        flex-direction: column;
        margin-top: calc(100vw / 375 * 18);
        width: calc(100vw / 375 * 335);
    }
    .footer_twitter_item:not(:first-of-type) {
        margin-left: 0;
        margin-top: calc(100vw / 375 * 46);
    }
    .footer_twitter_title {
        width: calc(100vw / 375 * 335);
    }
    .footer_btn_twitter {
        margin: auto;
        width: calc(100vw / 375 * 303);
    }
    .footer_twitter_timeline {
        width: calc(100vw / 375 * 335);
        height: calc(100vw / 375 * 325);
        /* height: 400px; */
        margin-top: calc(100vw / 375 * 12);
    }
    .footer_twitter_timeline.sp {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
    .btn_footer_link1_wrapper {
        margin: calc(100vw / 375 * 15) auto 0;
    }
    .btn_footer_link1_wrapper img {
        width: calc(100vw / 375 * 303);
    }
    .footer_cinnamoroll {
        bottom: calc(100vw / 375 * 214);
        width: calc(100vw / 375 * 154);
    }
    .footer_bg_under {
        position: absolute;
        bottom: calc(100vw / 375 * 185);
        left: calc(100vw / 375 * -9);
        transform: unset;
        width: calc(100vw / 375 * 84);
    }
    .footer_footer {
        bottom: calc(100vw / 375 * 10);
        width: calc(100vw / 375 * 266);
    }
    .bge_footer2 {
        top: calc(100vw / 375 * 50);
        left: calc(50% + (100vw / 375 * -130));
        width: calc(100vw / 375 * 34);
    }
    .bge_footer3 {
        top: calc(100vw / 375 * 50);
        left: calc(50% + (100vw / 375 * 130));
        width: calc(100vw / 375 * 39);
    }
}


.anime_blink1 {
    animation: bg_blink1 1s infinite;
}
.anime_blink2 {
    animation: bg_blink2 1s infinite;
}
@keyframes bg_blink1 {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes bg_blink2 {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.anime_fluffy1 {
    animation:
        wobbling_x 1.6s ease-in-out infinite alternate,
        wobbling_y 1.1s ease-in-out infinite alternate;
}
.anime_fluffy2 {
    animation:
        wobbling_x 1.3s ease-in-out infinite alternate,
        wobbling_y 0.9s ease-in-out infinite alternate;
}
.anime_bubble_text,
.anime_kv_text {
    animation:
        kvTextFadeIn 0.5s ease-in-out 0.5s forwards;
}
.anime_bubble_text_box,
.anime_kv_text_box {
    animation:
        fuwafura 1s ease-in-out 0s infinite alternate;
        /* wobbling_x 0.8s ease-in-out infinite alternate,
        wobbling_y 1.3s ease-in-out infinite alternate, */
}
@keyframes wobbling_x {
	0% { margin-left: 3px; }
	100% { margin-left: -2px; }
}
@keyframes wobbling_y {
	0% { margin-top: -9px; }
	100% { margin-top: 0px; }
}
@keyframes fuwafura {
	0% { transform: scale(0.95); }
	100% { transform: scale(1.02); }
}
@keyframes kvTextFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@media only screen and (min-width: 1920px) {
    .footer {
        background: url(../img/bg_footerw.png) top 0 center/100% 100% no-repeat;
    }
}


/*
 * story
 */
body.story {
    color: #fff;
}
section.story {
    position: relative;
    height: auto;
    display: flex;
    justify-content: center;
}
.story1 {
    background: #54C3F1 url(../img/story/bg_story1.png) top -30px center/auto no-repeat;
    padding-bottom: 200px;
}
.story_logo {
    margin: 57px auto 68px;
}
.story h2 {
    text-align: center;
    font-size: 50px;
    /* font-weight: 500; */
    font-weight: 400;
    line-height: 60px;
}
.story_item_wrapper {
    width: 1300px;
    margin: 75px auto 0;
}
.story_item_cont {
    display: flex;
    justify-content: center;
}
.story_item_cont p {
    display: flex;
    font-size: 24px;
    /* font-weight: 500; */
    line-height: 45px;
}
.story_item_cont.reverse picture {
    order: 2;
}
.story_item_cont.reverse p {
    order: 1;
}
.story_item_cont.horizon {
    flex-direction: column;
    align-items: center;
}

.story_item1 p {
    align-items: flex-end;
    margin: 0 0 40px 65px;
}
.story_item2 {
    margin-top: 365px;
}
.story_item2 p {
    margin: 65px 20px 0 0;
}
.story_item3 {
    margin-top: 354px;
}
.story_item3 p {
    align-items: flex-end;
    margin: 20px 0 60px 40px;
}
@media only screen and (max-width: 768px) {
    .story1 {
        background: #54C3F1 url(../img/story/bg_story1_sp.png) no-repeat;
        background-size: calc(100vw / 375 * 425) auto;
        background-position: center calc(100vw / 375 * 55);
        padding-bottom: calc(100vw / 375 * 53);
    }
    .story_logo {
        margin: calc(100vw / 375 * 100) auto calc(100vw / 375 * 35);
        width: calc(100vw / 375 * 167);
    }
    .story h2 {
        font-size: calc(100vw / 375 * 25);
        line-height: calc(100vw / 375 * 32);
    }
    .story_item_wrapper {
        width: 100%;
        margin: calc(100vw / 375 * 25) auto 0;
    }
    .story_item_cont {
        flex-direction: column;
        align-items: center;
    }
    .story_item_cont p {
        font-size: calc(100vw / 375 * 16);
        font-weight: 500;
        line-height: calc(100vw / 375 * 30);
        text-align: center;
    }
    .story_item_cont.reverse picture { order: unset; }
    .story_item_cont.reverse p { order: unset; }
    .story_item_cont.reverse_sp picture { order: 2; }
    .story_item_cont.reverse_sp p { order: 1; }

    .story_item1 img {
        width: calc(100vw / 375 * 217);
    }
    .story_item1 p {
        align-items: center;
        margin: calc(100vw / 375 * 35) auto 0;
    }
    .story_item2 {
        margin-top: calc(100vw / 375 * 98);
    }
    .story_item2 img {
        width: calc(100vw / 375 * 237);
    }
    .story_item2 p {
        margin: calc(100vw / 375 * 30) auto 0;
    }
    .story_item3 {
        margin-top: calc(100vw / 375 * 152);
    }
    .story_item3 img {
        width: calc(100vw / 375 * 263);
    }
    .story_item3 p {
        align-items: center;
        margin: calc(100vw / 375 * 30) auto 0;
    }
}


.bg {
    position: relative;
    z-index: 1;
}
.bg > * {
    position: absolute;
}
.bge_star1 {
    top: 0px;
    left: calc(50% - 686px);
    transform: translateX(-50%);
}
.bge_star2 {
    top: -125px;
    left: calc(50% + 624px);
    transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
    .bge_star {
        width: calc(100vw / 375 * 95);
    }
    .bge_star1 {
        top: calc(100vw / 375 * -15);
        left: calc(50% - (100vw / 375 * 163));
    }
    .bge_star2 {
        top: calc(100vw / 375 * -78);
        left: calc(50% + (100vw / 375 * 129));
    }
}


.bg_story_bridge1 {
    background: #54C3F1 url(../img/story/bg_story_bridge1.png) top 0 center/auto no-repeat;
    height: 213px;
    margin-top: -1px;
}
.story2 {
    background: #BAE3F9 url(../img/story/bg_story2.png) top 0 center/auto no-repeat;
    padding-bottom: 145px;
}
.story2 .story_item_wrapper {
    margin: 120px auto 0;
}
.story_item4 p {
    color: #54C3F1;
    margin: 105px 100px 0 100px;
}
@media only screen and (max-width: 768px) {
    .bg_story_bridge1 {
        background: #54C3F1 url(../img/story/bg_story_bridge1_sp.png) top 0 center/100% no-repeat;
        height: calc(100vw / 375 * 35.5);
    }
    .story2 {
        background: #BAE3F9 url(../img/story/bg_story2_sp.png) top calc(100vw / 375 * 20) center/calc(100vw / 375 * 300) no-repeat;
        padding-bottom: calc(100vw / 375 * 40);
        margin-top: -1px;
    }
    .story2 .story_item_wrapper {
        margin: calc(100vw / 375 * 88) auto 0;
    }
    .story_item4 img {
        width: calc(100vw / 375 * 242);
    }
    .story_item4 p {
        color: #54C3F1;
        margin: calc(100vw / 375 * 25) auto 0;
    }
}


.bg_story_bridge2 {
    background: #BAE3F9 url(../img/story/bg_story_bridge2.png) top 0 center/auto no-repeat;
    height: 319px;
    margin-top: -1px;
}
.story3 {
    background: #87D3F6 url(../img/story/bg_story3.png) top 410px center/auto no-repeat;
    padding-bottom: 200px;
}
.story3 .story_item_wrapper {
    margin: -50px auto 0;
}
.story_item5 p {
    margin: auto;
}
.story_item5 img {
    position: relative;
    left: -60px;
}
.story_item6 {
    margin-top: 407px;
}
.story_item6 p {
    margin: 30px 0 0 120px;
}
.story_item7 {
    margin-top: 414px;
    position: relative;
    right: -151px;
}
.story_item7 p {
    margin: 47px 0 0 0;
}
.story_item8 {
    margin-top: 460px;
}
.story_item8 p {
    margin: 35px 0 0 50px;
}
@media only screen and (max-width: 768px) {
    .bg_story_bridge2 {
        background: #BAE3F9 url(../img/story/bg_story_bridge2_sp.png) top 0 center/100% no-repeat;
        height: calc(100vw / 375 * 62);
    }
    .story3 {
        background: #87D3F6 url(../img/story/bg_story3_sp.png) no-repeat;
        background-position: calc(100vw / 375 * -50) calc(100vw / 375 * 150);
        background-size: calc(100vw / 375 * 448);
        padding-bottom: calc(100vw / 375 * 75);
    }
    .story3 .story_item_wrapper {
        margin: calc(100vw / 375 * 38) auto 0;
    }
    .story_item5 p {
        margin: calc(100vw / 375 * 25)  auto 0;
    }
    .story_item5 img {
        left: calc(100vw / 375 * -13);
        width: calc(100vw / 375 * 363);
    }
    .story_item6 {
        margin-top: calc(100vw / 375 * 228);
    }
    .story_item6 p {
        margin: calc(100vw / 375 * 21) auto 0;
    }
    .story_item6 img {
        width: calc(100vw / 375 * 242);
    }
    .story_item7 {
        margin-top: calc(100vw / 375 * 180);
        right: unset;
    }
    .story_item7 p {
        margin: 0 auto calc(100vw / 375 * 23);
    }
    .story_item7 img {
        width: calc(100vw / 375 * 243);
    }
    .story_item8 {
        margin-top: calc(100vw / 375 * 140);
    }
    .story_item8 p {
        margin: 0 auto calc(100vw / 375 * 40);
    }
    .story_item8 img {
        width: calc(100vw / 375 * 284);
    }
}


.bg_story_bridge3 {
    background: #54C3F1 url(../img/story/bg_story_bridge3.png) top 0 center/auto no-repeat;
    height: 130px;
    margin-top: -1px;
}
.story4 {
    background: #54C3F1 url(../img/story/bg_story4.png) top 220px center/auto no-repeat;
    padding-bottom: 50px;
}
.story4 .story_item_wrapper {
    margin: 190px auto 0;
}
.story_item9 p {
    margin-top: 121px;
}
.story_item_last_cont {
    margin: 296px auto 0;
    position: relative;
    height: 650px;
}
.story_item_last1 {
    position: absolute;
    top: 30px;
    left: calc(50% - 190px);
    transform: translateX(-50%);
}
.story_item_last1 p {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 80px 50px 100px 40px;
    box-sizing: border-box;
    color: #B28155;
    text-align: center;
}
.story_item_last2 {
    position: absolute;
    top: 0px;
    left: calc(50% + 140px);
    transform: translateX(-50%);
    z-index: 1;
}
.story_item_last3 {
    position: absolute;
    top: 262px;
}
@media only screen and (max-width: 768px) {
    .bg_story_bridge3 {
        background: #54C3F1 url(../img/story/bg_story_bridge3_sp.png) center 0/100% no-repeat;
        height: calc(100vw / 375 * 27);
    }
    .story4 {
        background: #54C3F1 url(../img/story/bg_story4_sp.png) no-repeat;
        background-position: calc(100vw / 375 * -25) calc(100vw / 375 * 64);
        background-size: calc(100vw / 375 * 467) auto;
        padding-bottom: calc(100vw / 375 * 225);
    }
    .story4 .story_item_wrapper {
        margin: calc(100vw / 375 * 141) auto 0;
    }
    .story_item9 p {
        margin-top: calc(100vw / 375 * 53);
    }
    .story_item9 img {
        width: calc(100vw / 375 * 285);
    }
    .story_item_last_cont {
        margin: calc(100vw / 375 * 292) auto 0;
        height: calc(100vw / 375 * 404);
        width: 100vw;
    }
    .story_item_last1 {
        top: calc(100vw / 375 * 100);
        left: calc(100vw / 375 * 27);
        transform: unset;
    }
    .story_item_last1 img {
        width: calc(100vw / 375 * 226);
    }
    .story_item_last1 p {
        padding: 0;
        font-size: calc(100vw / 375 * 12);
        line-height: calc(100vw / 375 * 21);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        top: calc(100vw / 375 * -11);
        left: calc(100vw / 375 * -3);
    }
    .story_item_last2 {
        top: 0px;
        left: 50%;
        width: calc(100vw / 375 * 286);
    }
    .story_item_last3  {
        top: calc(100vw / 375 * 215);
        left: unset;
        right: calc(100vw / 375 * 20);
        transform: unset;
    }
    .story_item_last3 img {
        width: calc(100vw / 375 * 236);
    }
}


body.story .footer:not(.v3) {
    background: #54C3F1 url(../img/bg_footer.png) top 0 center/auto no-repeat;
    margin-top: 0;
}
@media only screen and (min-width: 1920px) {
    .bg_story_bridge1,
    .bg_story_bridge2,
    .bg_story_bridge3 {
        background-size: 100% 100%;
    }
    body.story .footer:not(.v3) {
        background: #54C3F1 url(../img/bg_footerw.png) top 0 center/100% 100% no-repeat;
    }
}

@media only screen and (max-width: 768px) {
    body.story .footer:not(.v3) {
        background: #54C3F1 url(../img/bg_footer_sp.png) top 0 center/100% no-repeat;
    }
}



@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(+50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -------------------------------------------- 0225 */
/*
 * story
 */
section.announce {
    background: url(../img/bg_announce.png) top 0 center/auto no-repeat;
    height: auto;
    text-align: center;
    position: relative;
    /* margin-top: -100px; */
    margin-top: -290px;
    padding-top: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.announce_top_wrapper {
    position: relative;
    height: 600px;
}
.announce_top_cloud {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 856px;
}
.announce_title {
    position: absolute;
    top: 116px;
    left: 50%;
    transform: translateX(-50%);
}
.announce_box {
    position: relative;
    background-color: #fff;
    width: 1000px;
    border-radius: 120px;
    margin-top: -290px;
    padding-top: 1px;
    padding-bottom: 111px;
    color: #B28155;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -0.05rem;
}
.announce_icon_twitter {
    position: absolute;
    top: -20px;
    left: -40px;
}
.announce_box_text1 {
    margin: 35px auto 0;
}
.announce_box_text2 {
    font-size: 16px;
    line-height: 30px;
    margin: 20px auto 45px;
}
.annouce_inner_box {
    width: 880px;
    box-sizing: border-box;
    margin: auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #29A5DB;
}
.annouce_inner_box hr {
    width: 600px;
    border-top: 5px solid #fff;
    margin: 20px auto;
}
.annouce_inner_box p {
    margin: auto;
}
.annouce_inner_box:not(:first-of-type) {
    margin-top: 32px;
}
.annouce_inner_box1 {
    background-color: #FDF8B8;
}
.annouce_inner_box2 {
    background-color: #FFEDF6;
}
.announce_twitter_text {
    margin: 42px auto 10px;
    font-size: 19px;
    line-height: 27px;
    letter-spacing: -0.1rem;
}
.announce_btn_twitter {
    margin: 20px auto;
}
.btn_announce_twitter_wrapper {
    display: flex;
    justify-content: center;
}
.btn_announce_terms_wrapper {
    display: flex;
    justify-content: center;
    margin: 25px auto 30px;
}
.btn_announce_terms {
    cursor: pointer;
}
.announce_image1_wrapper {
    position: relative;
    width: 706px;
    height: 187px;
    margin: 30px auto 30px;
}
.announce_image1 {
    position: absolute;
    bottom: 0;
    left: 20px;
    z-index: 1;
}
.announce_bubble_wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}
.announce_bubble_text {
    position: absolute;
    top: 0;
    left: -3px;
    margin: -8px auto 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    line-height: 27px;
    letter-spacing: -0.1rem;
}
.announce_adjust_spacer {
    height: 200px;
}
@media only screen and (min-width: 1920px) {
    section.announce {
        background-size: 100% 100%;
        max-height: unset;
    }
    .announce_adjust_spacer {
        /* height: calc(100vw / 1920 * 200); */
    }
}
@media only screen and (max-width: 768px) {
    section.announce {
        background: url(../img/bg_announce_sp.png) top 0 center/100% no-repeat;
        margin-top: -1px;
        padding-top: calc(100vw / 375 * 100);
    }
    .announce_top_wrapper {
        height: calc(100vw / 375 * 100);
    }
    .announce_top_cloud {
        position: absolute;
        top: 0;
        width: calc(100vw / 375 * 283);
    }
    .announce_title {
        position: absolute;
        top: calc(100vw / 375 * -35);
        left: calc(50% + (100vw / 375 * 4));
        width: calc(100vw / 375 * 346);
        z-index: 1;
    }
    .announce_box {
        position: relative;
        width: calc(100vw / 375 * 335);
        border-radius: calc(100vw / 375 * 30);
        margin-top: calc(100vw / 375 * 4);
        padding-top: calc(100vw / 375 * 100);
        padding-bottom: calc(100vw / 375 * 51);
        font-size: calc(100vw / 375 * 14);
        line-height: calc(100vw / 375 * 25);
    }
    .announce_icon_twitter {
        top: calc(100vw / 375 * -26);
        left: calc(100vw / 375 * -30);
        width: calc(100vw / 375 * 113);
        z-index: 2;
    }
    .announce_box_text1 {
        margin: calc(100vw / 375 * 10) auto 0;
    }
    .announce_box_text2 {
        font-size: calc(100vw / 375 * 11);
        line-height: calc(100vw / 375 * 20);
        margin: calc(100vw / 375 * 25) auto calc(100vw / 375 * 30);
    }
    .annouce_inner_box {
        width: calc(100vw / 375 * 285);
        padding: calc(100vw / 375 * 20);
        border-radius: calc(100vw / 375 * 10);
    }
    .annouce_inner_box hr {
        width: calc(100vw / 375 * 237);
        border-top: calc(100vw / 375 * 5) solid #fff;
        margin: calc(100vw / 375 * 10) auto;
    }
    .annouce_inner_box img {
        width: calc(100vw / 375 * 285);
    }
    .annouce_inner_box:not(:first-of-type) {
        margin-top: calc(100vw / 375 * 16);
    }
    .announce_twitter_text {
        margin: calc(100vw / 375 * 30) auto calc(100vw / 375 * 3);
        font-size: calc(100vw / 375 * 14);
        line-height: calc(100vw / 375 * 20);
    }
    .announce_btn_twitter {
        margin: calc(100vw / 375 * 0) auto;
    }
    .btn_announce_twitter_wrapper img {
        width: calc(100vw / 375 * 287);
    }
    .btn_announce_terms_wrapper {
        margin: calc(100vw / 375 * 10) auto calc(100vw / 375 * 20);
    }
    .btn_announce_terms_wrapper img {
        width: calc(100vw / 375 * 196);
    }
    .announce_image1_wrapper {
        height: calc(100vw / 375 * 131);
        margin: calc(100vw / 375 * 20) auto;
        width: 100%;
    }
    .announce_image1_wrapper img {
        width: calc(100vw / 375 * 340);
    }
    .announce_image1 {
        left: calc(100vw / 375 * 10);
    }
    .announce_bubble_wrapper {
        top: calc(100vw / 375 * 10);
        left: calc(50% + (100vw / 175 * 4));
    }
    .announce_bubble_wrapper img {
        width: calc(100vw / 375 * 108);
    }
    .announce_bubble_text {
        top: 0;
        left: -3px;
        margin: calc(100vw / 375 * -1) auto 0;
        font-size: calc(100vw / 375 * 13);
        line-height: calc(100vw / 375 * 19);
    }
    .announce_adjust_spacer {
        height: calc(100vw / 375 * 200);
    }
}


.footer.v2 {
    margin-top: -170px;
}
@media only screen and (min-width: 1920px) {
    .footer.v2 {
    }
}
@media only screen and (max-width: 768px) {
    .footer.v2 {
        background: url(../img/bg_footer_sp.png) top 0 center/100% no-repeat;
        margin-top: calc(100vw / 375 * -170);
    }
}

.btn_footer_link_wrapper {
    margin: 78px auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
.btn_footer_link_wrapper > *:not(:first-of-type) {
    margin-top: 15px;
}
.footer.v4 {
    /* background: url(../img/bg_footer2.png) top 0 center/auto no-repeat; */
    background: #29A5DB url(../img/bg_footer5.png) center bottom 0px/auto no-repeat;
    height: 375px;
}
@media only screen and (min-width: 1920px) {
    .footer.v4 {
        /* background: url(../img/bg_footerw2.png) top 0 center/100% 1850px no-repeat; */
        background: #29A5DB url(../img/bg_footer5w.png) center bottom 0px/100% 251px no-repeat;
    }
}
@media only screen and (max-width: 768px) {
    .btn_footer_link_wrapper {
        margin: calc(100vw / 375 * 15) auto 0;
    }
    .btn_footer_link_wrapper > *:not(:first-of-type) {
        margin-top: calc(100vw / 375 * 3);
    }
    .btn_footer_link_wrapper img {
        width: calc(100vw / 375 * 300);
    }
    .footer.v4 {
        background: #29A5DB url(../img/bg_footer5_sp.png) bottom 0 center/100% no-repeat;
        height: calc(100vw / 375 * 350);
        margin-top: calc(100vw / 375 * -170);
        padding-top: calc(100vw / 375 * 80);
    }
}


/*
 * RESULT _ MODAL
 */
.remodal-overlay {
    background: #00b8eebb;
}
.remodal.terms {
    max-width: 90%;
    max-height: 90%;
    width: 1000px;
    height: 800px;
    padding: 20px 20px 30px 30px;
    box-sizing: border-box;
    background: #fff;
    color: var(--color-text-main);
}
.remodal_close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
}
.terms article {
    display: none;
    position: relative;
}
.terms_wrapper {
    width: auto;
    height: calc(100% - 2rem - 30px);
    padding: 5px;
    overflow-y: scroll;
}
.terms h2 {
    margin: 0 0 1rem;
    font-size: 26px;
}
.terms h3 {
    margin: .5rem 0 .5rem;
    font-size: 21px;
    line-height: 1.5;
    text-align: left;
}
.terms p + h3 {
    margin: 1.5rem 0 .5rem;
}
.terms p {
    margin: 0.5rem 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}
@media only screen and (max-width: 1500px) {
    .remodal {
        padding: calc(100vw / 1500 * 35);
        margin-bottom: calc(100vw / 1500 * 10);
    }
    .result_close img {
        width: calc(100vw / 1500 * 41);
    }
}
@media only screen and (max-width: 768px) {
    .remodal.terms {
        max-width: 95%;
        max-height: 95%;
        width: 100%;
        height: 100%;
        padding: calc(100vw / 375 * 15) calc(100vw / 375 * 5) calc(100vw / 375 * 30) calc(100vw / 375 * 20);
    }
    .remodal_close {
        top: calc(100vw / 375 * 10);
        right: calc(100vw / 375 * 10);
    }
    .remodal_close img {
        width: calc(100vw / 375 * 20);
    }
    .terms_wrapper {
        height: calc(100% - 2rem - (100vw / 375 * 0));
        padding: 0 calc(100vw / 375 * 15) 0 0;
    }
    .terms h2 {
        margin: 0 0 1rem;
        font-size: calc(100vw / 375 * 19);
    }
    .terms h3 {
        font-size: calc(100vw / 375 * 15);
    }
    .terms p + h3 {
        margin: 1rem 0 .5rem;
    }
    .terms p {
        margin: 0.5rem 0;
        font-size: calc(100vw / 375 * 11);
        letter-spacing: -0.03rem;
    }
}