@charset "utf-8";

@media (min-width: 769px) {
    .wrap {
        background:url(../images/bg_all_pc.jpg) no-repeat 50% 0 / 101% auto;
    }
}
@media (max-width: 768px) {
    .wrap {
        background:url(../images/bg_all_sp.jpg) no-repeat 50% 0 / 101% auto;
    }
}
.section_wrap {
    position: relative;
}
.section_wrap > section {
    position: relative;
    z-index: 1;
}
.parallax_elem {
    width: 100%;
    height: auto;
    position: absolute;
    pointer-events: none;
}
@media (min-width: 769px) {
    .parallax_1 {
        top: calc(188 / 1900* 100vw);
        right: calc(238 / 1900* 100vw);
        width: calc(533 / 2 / 1900* 100vw);
    }
    .parallax_2 {
        top: calc(628 / 1900* 100vw);
        left: calc(208 / 1900* 100vw);
        width: calc(466 / 2 / 1900* 100vw);
    }
    .parallax_3 {
        top: calc(1598 / 1900* 100vw);
        right: calc(189 / 1900* 100vw);
        width: calc(466 / 2 / 1900* 100vw);
        mix-blend-mode: screen;
    }
    .parallax_4 {
        top: calc(2328 / 1900* 100vw);
        left: calc(139 / 1900* 100vw);
        width: calc(522 / 2 / 1900* 100vw);
        mix-blend-mode: screen;
    }
    .parallax_5 {
        top: calc(3250 / 1900* 100vw);
        right: calc(100 / 1900* 100vw);
        width: calc(466 / 2 / 1900* 100vw);
    }
    .parallax_6 {
        top: calc(4680 / 1900* 100vw);
        left: calc(190 / 1900* 100vw);
        width: calc(500 / 2 / 1900* 100vw);
    }
    .parallax_7 {
        top: calc(5700 / 1900* 100vw);
        right: calc(120 / 1900* 100vw);
        width: calc(466 / 2 / 1900* 100vw);
        mix-blend-mode: screen;
    }
    .parallax_8 {
        top: calc(6432 / 1900* 100vw);
        left: calc(198 / 1900* 100vw);
        width: calc(549 / 2 / 1900* 100vw);
    }
    .parallax_9 {
        top: calc(7842 / 1900* 100vw);
        right: calc(188 / 1900* 100vw);
        width: calc(501 / 2 / 1900* 100vw);
    }
    .parallax_10 {
        top: calc(9080 / 1900* 100vw);
        left: calc(288 / 1900* 100vw);
        width: calc(466 / 2 / 1900* 100vw);
        z-index:1;
    }
    .links_obj_1 {
        top: calc(260 / 1900* 100vw);
        right: calc(178 / 1900* 100vw);
        width: calc(575 / 2 / 1900* 100vw);
    }
}
@media (max-width: 768px) {
    .parallax_1 {
        top: 0.4rem;
        right: -2.8rem;
        width: 7.8rem;
    }
    .parallax_2 {
        top: 46.9rem;
        left: 4rem;
        width: 4.7rem;
    }
    .parallax_3 {
        top: 71.5rem;
        right: 1rem;
        width: 5rem;
    }
    .parallax_4 {
        top: 138.8rem;
        left: -1.9rem;
        width: 6rem;
        mix-blend-mode: screen;
    }
    .parallax_5 {
        top: 223.2rem;
        right: -3.7rem;
        width: 9rem;
    }
    .parallax_6 {
        top: 367rem;
        right: 0rem;
        width: 11rem;
    }
    .parallax_7 {
        top: 656rem;
        left: -1rem;
        width: 9rem;
    }
    .parallax_8 {
        top: 764rem;
        left: -2rem;
        width: 12rem;
    }
    .parallax_9 {
        top: 1rem;
        right: 1rem;
        width: 1rem;
    }
    .parallax_10 {
        top: 930rem;
        left: -6rem;
        width: 12rem;
        z-index: 1;
    }
    .links_obj_sp_1 {
        top: 2rem;
        left: 0rem;
        width: 11rem;
    }
    .links_obj_sp_2 {
        top: 37rem;
        right: -0.5rem;
        width: 10rem;
    }
}
.c-mainContents {
    overflow: hidden;
    font-feature-settings: 'palt';
}
.c-mainContents img {
    vertical-align: bottom;
}
.c-mainContents h1,
.c-mainContents h2,
.c-mainContents h3,
.c-mainContents p,
.c-mainContents li,
.c-mainContents ul,
.c-mainContents a {
    font-size: initial;
}

.mv_logo img,
.mv_mirai img,
.blackpackage_ttl img,
.package_car img,
.crosstalk_ttl img,
.lineup_ttl img,
.package_slider .swiper-slide img,
.crosstalk_cs img,
.links_list img,
.links_ttl img,
.btn_pagetop img {
    width: 100%;
    height: auto;
}

/* mirai_mv */
.mirai_mv_inner {
    margin: auto;
    position: relative;
}
.mv_logo {
    position: relative;
    z-index:3;
    margin-inline: auto;
}
.mv_ttl {
    position: relative;
    z-index:3;
    display: block;
    height:auto;
    margin-inline: auto;
}

.mv_mirai {
    position: relative;
    overflow: hidden;
}

@media (min-width: 769px) {
    .mirai_mv {
        padding-top: calc(78 / 1900 * 100vw);
    }
    .mirai_mv_inner {
        max-width: calc(1020 / 1900 * 100vw);
    }
    .mv_logo {
        width: calc(783 / 1900 * 100vw);
    }
    .mv_ttl {
        width: calc(555 / 1900* 100vw);
        margin-top: calc(44 / 1900* 100vw);
        left: calc(23 / 1900* 100vw);
    }   
    .mv_mirai {
        width: calc(1013.5 / 1900* 100vw);
        margin-top: calc(-146 / 1900* 100vw);
        left: calc(3 / 1900* 100vw);
    }     
}
@media (max-width: 768px) {
    .mirai_mv {
        padding-top: 3.8rem;
        padding-bottom: 4.8rem;
    }
    .mirai_mv_inner{
        max-width: 34.5rem;
    }
    .mv_logo {
        margin: auto;
        width: 24.5rem;
    }
    .mv_ttl {
        width: 24.2rem;
        margin-top: 2.3rem;
        left: 0.8rem;
    }
    .mv_mirai {
        width: 34.5rem;
        margin-top: -7rem;
        left: 0rem;
    }     

}
/* MVアニメーション */
.mv_logo_animation,
.mv_logo_animation_sp {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    opacity:0;
}
.mv_logo_animation path,
.mv_logo_animation_sp path,
.mv_logo_animation polygon,
.mv_logo_animation_sp polygon {
    stroke: #0231b9;
    stroke: #0031ba;
    stroke-miterlimit: 10;
    fill: none;
}

/* MVアニメーション: 準備 */
.animation_ready .mirai_mv_inner {
    opacity:0;
}
.animation_ready .mv_logo img {
    opacity:0;
}
.animation_ready .mv_logo_animation,
.animation_ready .mv_logo_animation_sp {
    opacity: 1;
}
.animation_ready .mv_ttl {
    opacity:0;
}
.animation_ready .mv_mirai img {
    opacity:0;
    scale:1.1;
}

/* MVアニメーション: 発火 */
.animation_loaded .mirai_mv_inner {
    opacity: 1;
}
.animation_loaded .mv_logo_animation path,
.animation_loaded .mv_logo_animation_sp path,
.animation_loaded .mv_logo_animation polygon,
.animation_loaded .mv_logo_animation_sp polygon {
    stroke-dashoffset: 0!important;
    transition: stroke-dashoffset 0.8s 0.1s;
}
.animation_loaded .mv_logo_animation,
.animation_loaded .mv_logo_animation_sp {
    opacity: 0;
    transition: opacity 1.2s 0.9s;
}
.animation_loaded .mv_logo img {
    opacity: 1;
    transition: opacity 1.2s 0.9s;
}
.animation_loaded .mv_ttl {
    opacity:1;
    transition: opacity 1.2s 2.4s;
}
.animation_loaded .mv_mirai img {
    opacity:1;
    scale:1;
    transition: opacity 1.2s 1.6s, scale 1.2s 1.6s;
}




/* profile */
.profile_ttl {
    display:block;
    height:auto;
    margin-inline:auto;
}
.profile_list {
    display:flex;
    justify-content: center;
}
.profile_icon_x {
    width:100%;
    height:auto;
}
.profile_icon_data_wrap {
    text-align: center;
    color: #0231b9;
}
@media (min-width: 769px) {
    .profile {
        margin-top: calc(112 / 1900 * 100vw);
    }
    .profile_ttl {
        width: calc(178 / 1900 * 100vw);
    }
    .profile_list {
        gap: calc(300 / 1900* 100vw);
        margin-top: calc(32 / 1900* 100vw);
    }
    .profile_list > li {
        width: calc(228.5 / 1900 * 100vw);
    }
    .profile_icon_data_wrap {
        width: calc(400 / 1900* 100vw);
        margin-left: calc(-90 / 1900* 100vw);
        margin-top: calc(10 / 1900* 100vw);
    }
    .profile_icon_name {
        font-size: calc(35 / 1900 * 100vw);
        letter-spacing:0.08em;
        font-weight: 700;
    }
    .profile_icon_ttl {
        font-feature-settings: initial;
        font-size: calc(15 / 1900 * 100vw);
        font-weight: 500;
        margin-top: calc(10 / 1900 * 100vw);
    }
}
@media (max-width: 768px) {
    .profile {
        margin-top: 2.1rem;
    }
    .profile_ttl {
        width: 12.9rem;
    }
    .profile_list {
        gap: 8.3rem;
        margin-top: 2.7rem;
    }
    .profile_list > li {
        width: 8rem;
    }
    .profile_icon_data_wrap {
        width: 11rem;
        margin-left: -1.5rem;
        margin-top: 0.4rem;
    }
    .profile_icon_name {
        font-size: 2rem;
        letter-spacing: 0.08em;
        font-weight: 700;
    }
    .profile_icon_ttl {
        font-feature-settings: initial;
        font-size: 1.1rem;
        line-height: 1.5;
        font-weight: 500;
        margin-top: 0.15rem;
    }
}
.animation_ready .profile_list > li {
    opacity: 0;
    transform: translateY(10px);
}
.animation_loaded .profile_list.is_animated > li {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s, transform 0.4s;
}
.animation_loaded .profile_list.is_animated > li:nth-child(2) {
    transition-delay: 0.4s;
}


/* crosstalk */
.crosstalk {
    text-align: center;
    color: #fff;
    position: relative;
}
.crosstalk_ttl {
    display: block;
    height:auto;
    margin-inline:auto;
}
.crosstalk_txt {
    text-align: center;
}
.crosstalk_col_set {
    display: flex;
    margin-inline:auto;
}
.crosstalk_col {
    flex:1;
    text-align: left;
}
.crosstalk_col_comment_set {
    display: flex;
}
.crosstalk_col_comment_icon_img {
    height:auto;
}
.crosstalk_col_comment_txt {
    flex: 1;
    text-align:justify;
}
.crosstalk_list > li {
    color:var(--txt-color);
}
.txt_color_w {
    --txt-color: #fff;
}
.txt_color_b {
    --txt-color: #0031BA;
}
.crosstalk_set_img_cover {
    overflow:hidden;
}
.crosstalk_set_img {
    width:100%;
    height:auto;
}
.crosstalk_img_wrap {
    display: flex;
    justify-content: center;
}
.crosstalk_img_cover {
    position: relative;
    overflow: hidden;
}
.c-mainContents .crosstalk_btn img {
    width:100%;
    height:auto;
}
.c-mainContents .crosstalk_btn {
    position: relative;
    display: inline-block;
}
@media (min-width: 769px) {
    .crosstalk {
        text-align: center;
        color: #fff;
        padding-top: calc(205 / 1900 * 100vw);
        position: relative;
    }
    .c-mainContents .crosstalk_ttl {
        width: calc(1039/ 2 / 1900 * 100vw);
    }
    .c-mainContents .crosstalk_txt {
        margin-top: calc(40 / 1900* 100vw);
        font-size: calc(25 / 1900* 100vw);
        line-height: 1.8;
        font-feature-settings: "pwid" 0, "fwid" 1;
    }
    .crosstalk_list {
        margin-top: calc(120 / 1900* 100vw);
    }
    .crosstalk_col_inner {
        width: calc(100% + (10 / 1900* 100vw));
    }    
    .crosstalk_col_set {
        width: calc(1200 / 1900* 100vw);
        gap: calc(40 / 1900* 100vw);
    }
    .crosstalk_col_inner {
        width: calc(100% + (20 / 1900* 100vw));
    }
    .crosstalk_col_set_left .crosstalk_col_inner {
        padding-left: calc(7 / 1900* 100vw);
    }
    .crosstalk_col_set_right .crosstalk_col_inner {
        padding-right: calc(7 / 1900* 100vw);
    }
    .crosstalk_col_inner > * + * {
        margin-top: calc(32 / 1900* 100vw);
    }
    .c-mainContents .crosstalk_col_ttl {
        font-size: calc(35 / 1900* 100vw);
        line-height: calc(45.25/35);
        letter-spacing: 0.08em;
        font-weight: 700;
        margin-top: calc(-13 / 1900* 100vw);
    }
    .c-mainContents .crosstalk_col_txt {
        font-size: calc(23 / 1900* 100vw);
        line-height: calc(35.25/23);
        letter-spacing: 0.08em;
        font-weight: 500;
    }
    .c-mainContents * + .crosstalk_col_txt {
        margin-top: calc(47 / 1900* 100vw);
    }
    .crosstalk_col_comment_set {
        gap: calc(20 / 1900* 100vw);
    }
    .crosstalk_col_txt + .crosstalk_col_comment_set {
        margin-top: calc(34 / 1900* 100vw);
    }
    .crosstalk_col_comment_set + .crosstalk_col_comment_set:not(:has(.crosstalk_col_comment_icon_img)) {
        margin-top: calc(16 / 1900* 100vw);
    }
    .crosstalk_col_comment_set + .crosstalk_col_comment_set:has(.crosstalk_col_comment_icon_img) {
        margin-top: calc(23 / 1900* 100vw);
    }

    .crosstalk_col_comment_set:has(.crosstalk_col_comment_icon_img) + .crosstalk_col_comment_set:has(.crosstalk_col_comment_icon_img) {
        margin-top: calc(23 / 1900* 100vw);
    }
    
    .crosstalk_col_comment_icon {
        width: calc(51 / 1900* 100vw);
    }
    .crosstalk_col_comment_icon_img {
        width: calc(51 / 1900* 100vw);
    }
    .crosstalk_col_comment_txt {
        padding-right: calc(20 / 1900* 100vw);
        font-size: calc(15.1912 / 1900* 100vw);
        line-height: calc(28.1626 / 15.1912);
        margin-top: calc(-2 / 1900* 100vw);
    }
    .crosstalk_col_set_2 {
        margin-top: calc(90 / 1900* 100vw);
    }
    .crosstalk_col_set_3 {
        margin-top: calc(140 / 1900* 100vw);
    }
    .crosstalk_col_set_4 {
        margin-top: calc(55 / 1900* 100vw);
    }
    .crosstalk_col_set_5 {
        margin-top: calc(147 / 1900* 100vw);
    }
    .crosstalk_col_set_6 {
        margin-top: calc(55 / 1900* 100vw);
    }
    .crosstalk_col_set_7 {
        margin-top: calc(28 / 1900* 100vw);
    }
    .crosstalk_col_set_8 {
        margin-top: calc(126 / 1900* 100vw);
    }
    .crosstalk_col_set_9 {
        margin-top: calc(22 / 1900* 100vw);
    }
    .crosstalk_col_set_10 {
        margin-top: calc(55 / 1900* 100vw);
    }
    .crosstalk_col_set_11 {
        margin-top: calc(30 / 1900* 100vw);
    }
    .crosstalk_col_set_12 {
        margin-top: calc(52 / 1900* 100vw);
    }
    .crosstalk_img_wrap {
        margin-top: calc(470 / 2 / 1900* 100vw);
    }
    .crosstalk_img {
        width: calc(2022 / 2 / 1900* 100vw);
        height:auto;
    }
    .crosstalk_btn_wrap {
        text-align: center;
        margin-top: calc(107 / 1920* 100vw);
        font-size: 0;
    }
    .c-mainContents .crosstalk_btn {
        width: calc(595 / 1900* 100vw);
    }
    .c-mainContents .crosstalk_img_on {
        position:absolute;
        top:0;
        left:0;
    }
    @media(hover: hover){
        .c-mainContents .crosstalk_img_on {
            transition: opacity 0.4s;
            opacity: 0;
        }
        .c-mainContents .crosstalk_btn:hover .crosstalk_img_on {
            opacity: 1;
        }
    }
}
@media (max-width: 768px) {
    .crosstalk {
        text-align: center;
        color: #fff;
        padding-top: 7rem;
        position: relative;
    }
    .c-mainContents .crosstalk_ttl {
        width: 20rem;
    }
    .c-mainContents .crosstalk_txt {
        margin-top: 1.5rem;
        font-size: 1.2rem;
        line-height: 2.2;
        font-feature-settings: "pwid" 0, "fwid" 1;
    }
    .crosstalk_list {
        margin-top: calc(120 / 1900* 100vw);
    }
    .crosstalk_col_inner {
        width: calc(100% + (10 / 1900* 100vw));
    }    
    .crosstalk_col_set {
        flex-direction: column;
        width: 33rem;
        gap: 2rem;
    }
    .crosstalk_col_set_right .crosstalk_col:nth-child(2) {
        order: -1;
    }
    .crosstalk_col_inner {
        width: calc(100% + (20 / 1900* 100vw));
    }
    .crosstalk_col_set_left .crosstalk_col_inner {
        padding-left: calc(7 / 1900* 100vw);
    }
    .crosstalk_col_set_right .crosstalk_col_inner {
        padding-right: calc(7 / 1900* 100vw);
    }
    .crosstalk_col_inner > * + * {
        margin-top: calc(32 / 1900* 100vw);

    }
    .c-mainContents .crosstalk_col_ttl {
        text-align: center;
        font-size: 2.1rem;
        line-height: calc(45.25/35);
        letter-spacing: 0.08em;
        font-weight: 700;
        margin-top: 1.6rem;
    }
    .c-mainContents .crosstalk_col_txt {
        text-align: center;
        font-size: 1.4rem;
        line-height: calc(35.25/23);
        letter-spacing: 0.08em;
        font-weight: 500;
    }
    .c-mainContents * + .crosstalk_col_txt {
        margin-top: 1.3rem;
        width: 110%;
        margin-left: -5%;
    }
    .crosstalk_col_comment_set {
        gap: 1rem;
        width: 32rem;
        margin-inline: auto;
    }
    .crosstalk_col_txt + .crosstalk_col_comment_set {
        margin-top: 2.1rem;
    }
    .crosstalk_col_comment_set + .crosstalk_col_comment_set:not(:has(.crosstalk_col_comment_icon_img)) {
        margin-top: 1.5rem;
    }
    .crosstalk_col_comment_set + .crosstalk_col_comment_set:has(.crosstalk_col_comment_icon_img) {
        margin-top: 2rem;
    }

    .crosstalk_col_comment_set:has(.crosstalk_col_comment_icon_img) + .crosstalk_col_comment_set:has(.crosstalk_col_comment_icon_img) {
        margin-top: 2rem;
    }
    
    .crosstalk_col_comment_icon {
        width: 3.4rem;
    }
    .crosstalk_col_comment_icon_img {
        width: 3.4rem;
    }
    .crosstalk_col_comment_txt {
        font-size: 1.2rem;
        letter-spacing: 0.05em;
        line-height: 1.68;
        margin-top: -0.5rem;
    }
    .crosstalk_col_set_2 {
        margin-top: 2.5rem;
    }
    .crosstalk_col_set_3 {
        margin-top: 2.7rem;
    }
    .crosstalk_col_set_4 {
        margin-top: 2rem;
    }
    .crosstalk_col_set_5 {
        margin-top: 2.6rem;
    }
    .crosstalk_col_set_6 {
        margin-top: 2.6rem;
    }
    .crosstalk_col_set_7 {
        margin-top: 3.2rem;
    }
    .crosstalk_col_set_8 {
        margin-top: 4.6rem;
    }
    .crosstalk_col_set_9 {
        margin-top: 1.8rem;
    }
    .crosstalk_col_set_10 {
        margin-top: 2.6rem;
    }
    .crosstalk_col_set_11 {
        margin-top: 2.6rem;
    }
    .crosstalk_col_set_12 {
        margin-top: 2.6rem;
    }
    .crosstalk_img_wrap {
        margin-top: 5.6rem;
    }
    .crosstalk_img {
        width: 32.7rem;
        height:auto;
    }
    .crosstalk_btn_wrap {
        text-align: center;
        margin-top: 5.4rem;
        font-size: 0;
    }
    .c-mainContents .crosstalk_btn {
        display: inline-block;
        width: 30rem;
    }
    .c-mainContents .crosstalk_img_on {
        display: none;
    }
}
.animation_ready .crosstalk_set_img_cover {
    transform: translateY(10px);
    opacity:0;
}
.animation_loaded .crosstalk_set_img_cover.is_animated {
    transform: translateY(0%);
    opacity:1;
    transition: transform 0.8s, opacity 0.8s;
}
.animation_ready .crosstalk_col_comment_txt {
    opacity:0;
    transform: translateX(-10px);
}
.animation_loaded .crosstalk_col_comment_txt.is_animated {
    opacity:1;
    transform: translateX(0px);
    transition: opacity 0.8s, transform 0.8s;
}
.animation_ready .crosstalk_img_cover {
    transform: translateY(10px);
    opacity: 0;
}
.animation_loaded .crosstalk_img_cover.is_animated {
    transform: translateY(0px);
    opacity:1;
    transition: transform 0.8s, opacity 0.8s;
}

/* mirai_links */
.mirai_links {
    text-align: center;
    position: relative;
}
.links_ttl {
    max-width:calc(175/1900*100vw);
    margin: auto;
}
.links_list {
    display: flex;
    position: relative;
    justify-content: space-between;
    max-width:calc(1200/1920*100vw);
    margin: auto;
}
.btn_pagetop {
    position: absolute;
    top: 22.2%;
    right: 18.8%;
    width: 3.26%;
}
@media (min-width: 769px) {
    .mirai_links {
        padding-top: calc(90 / 1900* 100vw);
        padding-bottom: calc(70 / 1900* 100vw);
        margin-top: calc(172 / 1900* 100vw);
    }
    .links_list {
        margin-top: calc(40/1900 * 100vw);
        gap: 0 calc(30/1900 * 100vw);
    }
    .links_list > li {
        background-color: #fff;
    }
    @media(hover:hover){
        .links_link {
            display: block;
            transition: .2s ease-out;
        }
        .links_link:hover {    
            opacity: .7;
        }
    }
}
@media (max-width: 768px) {
    .mirai_links {
        padding-top: 4rem;
        padding-bottom: 4.5rem;
    }
    .links_ttl {
        max-width: 8.4rem;
    }
    .links_list {
        flex-direction: column;
        gap: 2rem 0;
        max-width: 28rem;
        margin-top: 2rem;
    }
    .btn_pagetop {
        top: 3%;
        right: 6%;
        width: 10%;
    }
}

/* animation */
.animation_ready .js_reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out,transform 1s ease-out;
}
.animation_loaded .js_reveal.is_animated {
    opacity: 1;
    transform: translateY(0%);
}
.banner_area_wrap {
    position: relative;
    background: #fff;
}
.banner_area {
    position: relative;
}
@media (min-width: 769px) {
    .banner_area {
        padding-top: 72px;
        margin-top: 0;
    }
}
@media (max-width: 768px) {
    .banner_area {
        padding-top: 35px;
        margin-top: 0;
    }
}