@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');
nav.header-nav ul li.family::before {
    width: 140%;
}
@media screen and (max-width: 750px){
    nav.header-nav ul li.family::after {
        content: "";
        width: calc(100% + 52px);
        height: 100%;
        background: -webkit-linear-gradient(45deg, #9292a5 0%, #737380 100%);
        background: linear-gradient(45deg, #9292a5 0%, #737380 100%);
        position: absolute;
        top: 0;
        left: -26px;
        z-index: -1;
        opacity: .5;
    }
}

.family_inner{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}
.sec_link{
    padding-top: 210px;
    margin-top: -210px;
}
.mb80{
    margin-bottom: 80px !important;
}
.bottom_cap{
    margin-top: 60px;
}
.db1000{
    display: none;
}
.db650{
    display: none;
}
.db550{
    display: none;
}

@media screen and (max-width: 1500px) {
.sec_link{
    padding-top: 100px;
    margin-top: -100px;
}
}
@media screen and (max-width: 1000px) {
.mb80{
    margin-bottom: 60px !important;
}
.db1000{
    display: block;
}
.dn1000{
    display: none;
    }
}
@media screen and (max-width: 750px) {
.sec_link{
    padding-top: 122px;
    margin-top: -122px;
}
}
@media screen and (max-width: 650px) {
.mb80{
    margin-bottom: 40px !important;
}
.dn650{
    display: none;
}
.db650{
    display: block;
}
}
@media screen and (max-width: 550px) {
.mb80{
    margin-bottom: 40px !important;
}
.db550{
    display: block;
}
.dn550{
    display: none;
}
}


/* scroll */
.scroll_flex{
    display: none;
}
@media screen and (max-width: 650px) {
.scroll {
    position: relative;
    color: #000;
    padding: 0;
    display: inline-block;
    text-decoration: none;
    outline: none;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
}
.scroll::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #29ac39;
}
.scroll::after {
    content: "";
    position: absolute;
    bottom: -3px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #29ac39;
    border-right: 2px solid #29ac39;
    transform: rotate(45deg);
}
.scroll::before {
    animation: arrowlong01 2s ease infinite;
}
.scroll::after {
    animation: arrowlong02 2s ease infinite;
}
@keyframes arrowlong01 {
    0% {
        width: 0;
        opacity: 0
    }
    20% {
        width: 0;
        opacity: 1
    }
    80% {
        width: 105%;
        opacity: 1
    }
    100% {
        width: 105%;
        opacity: 0
    }
}
@keyframes arrowlong02 {
    0% {
        left: 0;
        opacity: 0
    }
    20% {
        left: 0;
        opacity: 1
    }
    80% {
        left: 103%;
        opacity: 1
    }
    100% {
        left: 103%;
        opacity: 0
    }
}

/* scroll_l */
.scroll_b{
    padding: 10px 0;
    margin: 10px auto 0;
}
.scroll_l {
    position: relative;
    color: #29ac39;
    padding: 0;
    display: inline-block;
    text-decoration: none;
    outline: none;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    /* margin-bottom: 40px; */
}
.scroll_l::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #29ac39;
}
.scroll_l::after {
    content: "";
    position: absolute;
    bottom: -3px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #29ac39;
    border-right: 2px solid #29ac39;
    transform: rotate(-135deg);
}
.scroll_l::before {
    animation: arrowlong03 2s ease infinite;
}
.scroll_l::after {
    animation: arrowlong04 2s ease infinite;
}
@keyframes arrowlong03 {
    0% {
        right: 0;
        width: 0;
        opacity: 0
    }
    20% {
        right: 0;
        width: 0;
        opacity: 1
    }
    80% {
        right: 0;
        width: 105%;
        opacity: 1
    }
    100% {
        right: 0;
        width: 105%;
        opacity: 0
    }
}
@keyframes arrowlong04 {
    0% {
        right: 0;
        opacity: 0
    }
    20% {
        right: 0;
        opacity: 1
    }
    80% {
        right: 103%;
        opacity: 1
    }
    100% {
        right: 103%;
        opacity: 0
    }
}
.scroll_flex {
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin: 10px auto 0;
    flex-wrap: wrap;
}
.scroll_flex_p {padding: 10px 0;text-decoration: none;outline: none;font-size: 12px;width: 100%;text-align: center;color: #29ac39;font-weight: 600;}

.scroll_flex .scroll_l, .scroll_flex .scroll {
    width: 48%;
    left: unset;
    right: unset;
    transform: unset;
}

.park04_scroll{
    overflow-x: scroll;
}
.park04_scroll img{
    min-width: 650px;
}
.aerial02_scroll,.aerial03_scroll{
    overflow-x: scroll;
}
.aerial02_scroll img{
    min-width: 700px;
}
.aerial03_scroll img{
    min-width: 650px;
}
}







/*  */
.family_bg{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.family_fade{
    font-size: 16px;
}
.de01{
    transition-delay: 0.5s;
}
.de02{
    transition-delay: 1s;
}
.ab_item{
    position: absolute;
    z-index: 1;
}


.fv{
    margin: 0 auto 20px;
}
.fv_fade{
    opacity: 0;
    transition-duration: 0.5s;
    transform: scale(0.9);
}
.is-show .fv_fade{
    opacity: 1;
    transform: scale(1);
}


.fv_img01, .fv_img02{
    width: 100%;
    left: 0;
    top: 0;
    transition-duration: 0.8s;
    transform: scale(0);
    opacity: 0;
}
.is-show .fv_img01, .is-show .fv_img02{
    transform: scale(1);
    opacity: 1;
}
.fv_ttl_en{
    top: 5.3%;
    left: 30.67%;
    width: 39.9%;
}
.fv_ttl_ja{
    width: 40.1%;
    top: 70.55%;
    left: 30%;
}
.fv_sun{
    width: 7.9%;
    top: 5.2%;
    left: 63.9%;
}
.fv_bird{
    left: 88.1%;
    top: 83.3%;
    width: 7.9%;
}
.fv_rainbow{
    top: 53.85%;
    left: 25.85%;
    width: 5.5%;
}
.fv_bug{
    width: 6.8%;
    top: 49.5%;
    left: 4%;
}

.family_bg{
    background: url(../img/lifestyle/family_bg.jpg);
    background-size: contain;
    background-repeat: repeat-y;
}



.family_lead{
    font-size: 16px;
    letter-spacing: 0.1em;
}
#family_intro .family_lead{
    text-align: center;
    line-height: 3;
}

.family_btn_ttl{
    max-width: 220px;
    margin: 0 auto 20px;
}

.family_btn_box{
    margin: 60px auto 0;
}
.family_btn_flex{
    display: flex;
    justify-content: center;
    gap: 6%;
}
.family_btn{
    width: 48%;
    max-width: 265px;
    transition-duration: 0.5s;
}
.family_btn:hover{
    transform: scale(1.1);
}

.triangle{
    width: 25px;
}

.triangle01_01{
    right: 10%;
    top: 0;
}
.triangle01_02{
    left: 23%;
    bottom: -20%;
}
.triangle01_03{
    right: 5%;
    top: 71%;
}
.bee01{
    left: 0;
    top: 10%;
    width: 80px;
}
.flower01{
    right: 15%;
    top: -7%;
    width: 90px;
}
.cat01{
    left: 13%;
    bottom: -5%;
    width: 120px;
}
.tree01{
    right: 15%;
    bottom: -3%;
    width: 90px;
}
.cloud01{
    width: 110px;
    right: -70px;
    top: 20px;
}
.triangle02{
    left: -60px;
    top: 50%;
}
.tree02{
    width: 95px;
    left: -80px;
    bottom: -30px;
}
.flower02{
    width: 170px;
    top: -30px;
    right: 0;
}
.balloon01{
    width: 100px;
    right: -40px;
    top: 0;
}
.triangle03{
    left: -7%;
    transform: rotate(-70deg);
}
.star01{
    width: 65px;
    right: 40%;
    bottom: -40px;
}
.rainbow01{
    width: 100px;
    right: -60px;
    top: -30px;
}
.dog01{
    left: -5%;
    bottom: -7%;
    width: 11%;
}
.triangle04{
    right: 0;
    top: 3%;
    transform: rotate(-70deg);
}
.tree03{
    width: 114px;
    right: -70px;
    bottom: 10px;
}
.tree04{
    top: -4%;
    left: -12%;
    width: 15%;
}
.fish01{
    width: 90px;
    bottom: -50px;
    left: 20%;
}
.float01{
    width: 126px;
    right: -70px;
    top: 10px;
}
.triangle05{
    left: -4%;
    transform: rotate(-40deg);
    top: -3%;
}
.triangle06{
    right: -7%;
    transform: rotate(-70deg);
    top: -3%;
}
.tree05{
    top: -160px;
    width: 114px;
    right: 12%;
}
.fish02{
    width: 105px;
    bottom: -100px;
    left: -40px;
}
.triangle07{
    right: 51%;
    transform: rotate(-40deg);
    top: -15%;
}
.triangle08{
    right: -15px;
    transform: rotate(-70deg);
    top: 15%;
}
.giraffe01{
    top: -130px;
    width: 93px;
    right: 5%;
}
.triangle09{
    top: -30px;
    right: 20px;
    transform: rotate(-80deg);
}
.bag01{
    max-width: 128px;
    width: 24%;
    bottom: -6%;
    right: -4%;
}
.strawberry01{
    top: -40px;
    left: -90px;
    width: 68px;
}
.triangle10{
    bottom: -50px;
    left: -59px;
    transform: rotate(-18deg);
}
.abc01{
    width: 140px;
    top: -30px;
    right: 20px;
}
.book01{
    max-width: 130px;
    width: 27%;
    bottom: -18%;
    left: -12%;
}
.parasol01{
    width: 98px;
    left: -20px;
    top: -20px;
}
.ribbon01{
    width: 15.2%;
    top: -8%;
    right: -18%;
}
.crown01{
    width: 14.2%;
    bottom: 28%;
    left: -7%;
}
.smile01{
    width: 15%;
    bottom: 27%;
    right: -10%;
}
.pencil01{
    width: 24%;
    bottom: 24%;
    left: -17%;
}
.wrench01{
    max-width: 140px;
    width: 29%;
    bottom: 13%;
    right: -20%;
}
.flower03{
    width: 133px;
    top: -30px;
    right: -20px;
}
.tree06{
    width: 82px;
    top: -85px;
    left: -30px;
}



#family_intro{
    margin: 0 auto 60px;
}

.family_sec_ttl{
    height: 80px;
    width: auto;
    display: block;
    z-index: 2;
    position: relative;
    margin: 0 auto;
}
.family_sec_ttl_box{
    padding: 40px 0;
    margin: 0 auto 40px;
}
#machi_area .family_sec_ttl_box::before{
    content: "";
    background: #27ac38;
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#residence_area .family_sec_ttl_box::before{
    content: "";
    background: #1da6cc;
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#machi_area, #residence_area{
    padding: 0 0 100px;
}

.flex_col2_basic{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flex_col2_basic_item{
    width: 48%;
    max-width: 490px;
}
.flex_col2_basic_item:nth-child(n + 3){
    margin-top: 6%;
}

.flex_col2_basic_ttl{
    width: 100%;
    text-align: center;
    margin: 50px auto 40px;
}
.flex_col2_basic_ttl.row2{
    height: 72px;
}
.flex_col2_basic_ttl.row3{
    height: 118px;
}
.flex_col2_basic_ttl img{
    height: 100%;
    width: auto;
}

.flex_col2_basic_item .family_lead{
    text-align: justify;
    max-width: 335px;
    width: 90%;
    margin: 0 auto;
    line-height: 2.5;
}

.family_img_cap{
    height: 10px;
    width: auto;
    position: absolute;
    right: 0;
    bottom: -15px;
}


.machi_separate01{
    width: 100%;
    height: 4.3px;
    margin: 80px auto;
}
.machi_separate02{
    width: 100%;
    height: 4.3px;
    top: -2px;
    padding: 0 20px;
    position: absolute;
}


.subsec_box{
    margin: 0 auto 60px;
}
.subsec_flex{
    display: flex;
    gap: 4%;
}
.subsec_icon{
    max-width: 180px;
    min-width: 180px;
}
.subsec_ttl{
    height: 30px;
    width: 100%;
    margin: 40px auto 60px;
}
.subsec_ttl img{
    height: 100%;
    width: auto;
}
.subsec_text .family_lead{
    text-align: justify;
    line-height: 2.5;
}


.turns{
    padding: 100px 0;
}
.machi_bg{
    position: relative;
}
.machi_bg .family_inner{
    z-index: 2;
}
.machi_bg::before{
    content: "";
    background: #e0f0e2;
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#residence_area .machi_bg::before{
    background: #d9eaf1;
}

.family_img_cap02{
    position: absolute;
    bottom: 7%;
    height: 10px;
    width: auto;
}
.family_img_cap02.left{
    left: 5%;
}
.family_img_cap02.right{
    right: 5%;
}
.family_img_cap02 img{
    height: 100%;
    width: auto;
}

.flex_col2_ex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.flex_col2_ex_img{
    max-width: 552px;
    width: 51%;
    z-index: 1
    ;
}
.flex_col2_ex_text{
    width: 46%;
    max-width: 500px;
}

.flex_col2_ex02{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 4%;
}
.flex_col2_ex02 .flex_col2_ex_img{
    max-width: 505px;
    width: 46%;
}
.flex_col2_ex02 .flex_col2_ex_text{
    width: auto;
    max-width: unset;
}

.niconico_logo{
    max-width: 318px;
    margin: 0 auto 30px;
}
.niconico_link{
    text-align: center;
}
.niconico_link a{
    display: inline-block;
    font-size: 14px;
    padding: 0.3em 1em;
    background: #fff;
    border: solid 1px #29ac39;
    transition-duration: 0.3s;
    color: #29ac39;
    margin-top: 0.5em;
}
.niconico_link a:hover{
    background: #29ac39;
    color: #fff;
}

.flex_col2_ex_name_pt01{
    height: 75px;
    width: 100%;
    text-align: center;
    margin: 0 auto 40px;
}
.flex_col2_ex_name_pt01 img{
    height: 100%;
    width: auto;
}
.flex_col2_ex_name_pt02{
    height: 125px;
    width: 100%;
    text-align: center;
    margin: 0 auto 40px;
}
.flex_col2_ex_name_pt02 img{
    height: 100%;
    width: auto;
}
.flex_col2_ex_text .family_lead{
    text-align: center;
    line-height: 2.5;
}

.bubble_niconico01{
    width: 35%;
    right: -8%;
    bottom: -25%;
}
.bubble_niconico02{
    width: 17.5%;
    left: 4%;
    bottom: -5%;
}
.bubble_niconico03{
    width: 17.5%;
    right: -4%;
    bottom: 3%;
}

.machi03_img02{
    margin: 30px auto 0;
}
.family_cap{
    text-align: left;
    font-size: 10px;
    display: inline-block;
    margin-top: 1em;
    line-height: 1.5;
}
.machi05_img02, .machi05_img03{
    max-width: 263px;
    width: 70%;
}
.machi05_img02{
    margin-left: auto;
    margin-bottom: 80px;
}

.bubble_koshiba01{
    width: 42.4%;
    top: 19%;
    right: -36%;
}
.bubble_koshiba02{
    width: 101.8%;
    top: 77%;
    right: -45%;
}
.bubble_koshiba03{
    width: 89.4%;
    top: 50%;
    right: -76%;
}
.flex_umi_img{
    width: 49%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_umi_img img{
    width: 108%;
    max-width: 603px;
    margin-top: -3%;
}

.bubble_umi01{
    width: 35.65%;
    top: 45%;
    left: 9%;
}
.bubble_umi02{
    width: 35.65%;
    top: 3%;
    right: 12%;
}
.bubble_umi03{
    width: 38%;
    top: -15%;
    right: -10%;
}
.machi07_img02{
    bottom: -22%;
    max-width: 310px;
    right: -260px;
    width: 95%;
}
.machi09_img02{
    bottom: -22%;
    max-width: 310px;
    right: -260px;
    width: 95%;
}
.machi08_img02{
    bottom: -32%;
    max-width: 310px;
    left: -27%;
    width: 62%;
}

.flex_name_cap{
    text-align: center;
    font-size: 10px;
    margin-top: 1.5em;
}

.shop_flex{
    display: flex;
    justify-content: space-between;
    margin: 60px auto 0;
    gap: 0.7%;
}
.shop_img{
    max-width: 552px;
}
.shop_text{
    max-width: 540px;
}
.shop_name{
    /* height: 175px; */
    text-align: center;
    width: 91%;
    margin: 0 auto;
}
.shop_name > img{
    /* height: 100%; */
    /* width: auto; */
}
.shop_logo{
    margin: 30px auto 0;
}


.educate_item{
    padding: 20px 0;
}

.resi_kids_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 60px auto 120px;
}
.resi_kids_text{
    width: 50%;
}
.resi_kids_img{
    max-width: 490px;
    width: 48%;
}
.resi_kids_text{
    text-align: center;
}
.resi_kids_text .flex_col2_basic_ttl_row2{
    margin-top: 0
}
.resi_kids_text .family_lead, .resi_guest_text .family_lead{
    line-height: 2.5;
    text-align: justify;
    max-width: 450px;
    display: inline-block;
}

.resi_guest_flex{
    display: flex;
    justify-content: space-between;
}
.resi_guest_img_flex{
    /* max-width: 750px; */
    display: flex;
    justify-content: space-between;
    width: 68%;
}
.resi_guest_img{
    width: 48%;
    max-width: 355px;
}
.resi_guest_name{
    width: 75%;
    margin: 25px auto 0;
}
.resi_guest_text{
    max-width: 300px;
    width: 28%;
}

.resi_park_flex{
    display: flex;
    justify-content: space-between;
}
.resi_park_item{
    max-width: 500px;
    width: 48%;
}

.resi_park_ttl{
    height: 30px;
    text-align: center;
    margin: 0 auto 60px;
}
.resi_park_ttl img{
    height: 100%;
    width: auto;
}

.resi_park_name{
    width: 75%;
    margin: 30px auto 0;
    max-width: 300px;
}
.cap_illust{
    display: inline-block;
    height: 12px;
    width: auto;
    position: relative;
    top: 2px;
}
.cap_illust img{
    height: 100%;
    width: auto;
    display: block;
}
.machi_04_img02_box{
    background: url(../img/lifestyle/family_bg.jpg);
    background-size: cover;
}








#family_nav{
    position: fixed;
    top: 120px;
    left: 0;
    width: 100%;
    z-index: 700;
    /* 追加 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-duration: 0.3s;
}
#family_nav.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.family_nav_inner{
    display: flex;
    /* align-items: center; */
    max-width: 1360px;
    /* padding: 0 20px; */
    position: relative;
    margin: 0 auto;
}
.family_nav_left{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 75%;
}
.family_nav_right{
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.family_nav_machi_box{
    display: flex;
    align-items: center;
    width: 69.6%;
    justify-content: space-between;
}
.family_nav_machi_flex{
    display: flex;
    align-items: center;
    justify-content: right;
    width: 87%;
    gap: 8%;
}

.family_nav_top{
    width: 8%;
}
.family_nav_machi{
    width: 13.7%;
}
.family_nav_play{
    width: 20.75%;
}
.family_nav_shop{
    width: 21.3%;
}
.family_nav_educate{
    width: 14.2%;
}
.family_nav_sumai{
    width: 46%;
}
.family_nav_sepa{
    width: 0.35%;
}
.family_nav_item a{
    display: block;
    width: 100%;
    /* SVGの実寸比率に合わせる */
    background-image: var(--normal);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: 0.3s;
}
/* .family_nav_af{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    transition-duration: 0.3s;
}
.family_nav_item:hover .family_nav_af{
    opacity: 1;
} */

.family_nav_item a:hover,
.family_nav_item a:focus-visible {
    background-image: var(--hover);
}

.family_nav_item.family_nav_machi a{
    aspect-ratio: 104 / 54;
}
.family_nav_item.family_nav_top a{
    aspect-ratio: 81 / 50;
}
.family_nav_item.family_nav_play a{
    aspect-ratio: 128 / 39;
}
.family_nav_item.family_nav_shop a{
    aspect-ratio: 131 / 41;
}
.family_nav_item.family_nav_educate a{
    aspect-ratio: 92 / 42;
}
.family_nav_item.family_nav_sumai a{
    aspect-ratio: 156 / 51;
}

@media screen and (max-width: 650px) {
    .family_nav_item.family_nav_play a {
        --normal: url('../img/lifestyle/family_nav_play_sp.svg')!important;
        --hover: url('../img/lifestyle/family_nav_play_sp_hover.svg')!important;
        aspect-ratio: 73 / 70;

    }
    .family_nav_item.family_nav_shop a {
        --normal: url('../img/lifestyle/family_nav_shop_sp.svg')!important;
        --hover: url('../img/lifestyle/family_nav_shop_sp_hover.svg')!important;
        aspect-ratio: 77 / 73;
    }
    .family_nav_item.family_nav_educate a {
        --normal: url('../img/lifestyle/family_nav_educate_sp.svg')!important;
        --hover: url('../img/lifestyle/family_nav_educate_sp_hover.svg')!important;
        aspect-ratio: 44 / 73;
    }
}


.family_nav_left,
.family_nav_right {
    position: relative;
    height: 90px;
}

/* 緑 */
.family_nav_left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(39, 172, 56, 0.8);
    mix-blend-mode: multiply;
    z-index: 0;
    pointer-events: none;
}

/* 青 */
.family_nav_right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(29, 166, 204, 0.8);
    mix-blend-mode: multiply;
    z-index: 0;
    pointer-events: none;
}

/* ナビ文字・SVGは背景より前へ */
.family_nav_left > *,
.family_nav_right > * {
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 1361px) {
    #family_nav {
        overflow: hidden;
    }
    .family_nav_left::before {
        inset: auto;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100vw;
    }
    .family_nav_right::before {
        inset: auto;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
    }
}





@media screen and (max-width: 1500px) {
#family_nav {
    top: 100px;
}
}
@media screen and (max-width: 1300px) {
.bee01 {
    left: 1%;
}
.cloud01 {
    right: 20px;
    top: -30px;
}
.tree02 {
    width: 70px;
    left: -20px;
    bottom: -90px;
}
.triangle02 {
    left: -10px;
}
.triangle {
    width: 20px;
}
.flower02 {
    width: 113px;
    top: 10px;
}
.rainbow01 {
    width: 80px;
    right: -10px;
}
.dog01 {
    left: -1%;
    bottom: -9%;
    width: 11%;
}
.tree03 {
    width: 90px;
    right: -40px;
    bottom: -10px;
}
.tree04 {
    top: -3%;
    left: -2%;
}
.bubble_koshiba03 {
    width: 76%;
    top: 50%;
    right: -65%;
}
.bubble_koshiba02 {
    width: 81.8%;
    top: 77%;
    right: -10%;
}
.bubble_umi03 {
    width: 38%;
    top: -12%;
    right: -2%;
}
.float01 {
    width: 90px;
    right: -10px;
    top: -50px;
}
.tree05 {
    top: -160px;
    width: 94px;
    right: 12%;
}
.machi07_img02 {
    bottom: -14%;
    max-width: 310px;
    right: -54%;
    width: 70%;
}
.fish02 {
    width: 95px;
    bottom: -90px;
    left: -10px;
}
.machi08_img02 {
    bottom: -25%;
    max-width: 310px;
    left: -16%;
    width: 54%;
}
.machi09_img02 {
    bottom: -22%;
    max-width: 310px;
    right: -180px;
    width: 60%;
}
.giraffe01 {
    top: -150px;
    width: 80px;
    right: 5%;
}
.strawberry01 {
    top: -90px;
    left: -10px;
    width: 68px;
}
.bag01 {
    max-width: 98px;
    width: 24%;
    bottom: -6%;
    right: -2%;
}
.smile01 {
    width: 15%;
    bottom: 27%;
    right: -3%;
}
.crown01 {
    width: 14.2%;
    bottom: 28%;
    left: -1%;
}
.pencil01 {
    width: 18%;
    bottom: 27%;
    left: -4%;
}
.wrench01 {
    max-width: 140px;
    width: 17%;
    bottom: 25%;
    right: -5%;
}
.tree06 {
    width: 82px;
    top: -85px;
    left: 20px;
}
.flower03 {
    width: 113px;
    top: -30px;
    right: 20px;
}
}

@media screen and (max-width: 1000px) {
.family_lead {
    font-size: 13px;
    letter-spacing: 0.05em;
}
.family_btn_flex {
    gap: 10%;
    max-width: 500px;
    margin: 0 auto;
}
.family_btn_ttl {
    max-width: 180px;
}
.flower01 {
    right: 5%;
    top: -10%;
    width: 70px;
}
.cat01 {
    left: 0%;
    bottom: -5%;
    width: 100px;
}
.bee01 {
    width: 60px;
}
.tree01 {
    right: 0%;
    bottom: -3%;
    width: 80px;
}
.triangle01_03 {
    right: 5%;
    top: 51%;
}
.triangle01_02 {
    left: 10%;
    bottom: -20%;
}
.family_sec_ttl {
    height: 65px;
}
.family_sec_ttl_box {
    padding: 30px 0;
}
.flex_col2_basic_ttl.row2 {
    height: 56px;
}
.flex_col2_basic_ttl {
    margin: 35px auto 20px;
}
.cloud01 {
    right: 20px;
    top: -30px;
    width: 90px;
}
.tree02 {
    width: 50px;
    left: -10px;
    bottom: -100px;
}
.machi_separate01 {
    margin: 60px auto;
}
.subsec_icon {
    max-width: 120px;
    min-width: 120px;
}
.subsec_ttl {
    height: 25px;
    margin: 40px auto 30px;
}
.flower02 {
    width: 100px;
    top: -40px;
}
.niconico_logo {
    max-width: 220px;
}
.flex_col2_ex_name_pt01 {
    height: 60px;
    margin: 0 auto 20px;
}
.balloon01 {
    width: 70px;
    right: -12px;
    top: -70px;
}
.star01 {
    width: 50px;
    right: 40%;
    bottom: -30px;
}
.rainbow01 {
    width: 60px;
    right: -10px;
}
.flex_col2_ex_name_pt02 {
    height: 95px;
    margin: 0 auto 30px;
}
.bubble_koshiba03 {
    width: 76%;
    top: 50%;
    right: -50%;
}
.bubble_koshiba02 {
    width: 78%;
    top: 69%;
    right: -10%;
}
.turns {
    padding: 80px 0;
}
.tree03 {
    width: 60px;
    right: -30px;
    bottom: 10px;
}
.flex_name_cap {
    margin-top: 1em;
}
.machi09_img02 {
    bottom: 20%;
    right: -100px;
    width: 55%;
}
.strawberry01 {
    top: -90px;
    left: -10px;
    width: 58px;
}
.shop_logo {
    margin: 20px auto 0;
}
.abc01 {
    width: 100px;
    top: -30px;
    right: 20px;
}
.resi_guest_img_flex {
    width: 64%;
}
.resi_guest_text {
    width: 32%;
}
.flex_col2_basic_ttl.row3 {
    height: 85px;
}
.resi_park_ttl {
    height: 25px;
    margin: 0 auto 40px;
}
.flower03 {
    width: 100px;
    top: -30px;
    right: 20px;
}
.niconico_link a {
    font-size: 12px;
}
}


@media screen and (max-width: 750px) {
.flex_col2_basic {
    justify-content: center;
}
.flex_col2_basic_item {
    width: 100%;
    max-width: 600px;
}
.flex_col2_basic_item:not(:first-child){
    margin-top: 40px;
}
.tree02 {
    width: 50px;
    left: -20px;
    bottom: -20px;
}
.triangle {
    width: 15px;
}
.triangle02 {
    left: -10px;
}
.cloud01 {
    right: -10px;
    top: -30px;
    width: 90px;
}
.subsec_flex{
    flex-wrap: wrap;
}
.subsec_text{
    width: 100%;
}
.subsec_icon {
    max-width: 140px;
    min-width: 140px;
    margin: 0 auto;
}
.subsec_ttl {
    text-align: center;
    display: flex;
    justify-content: center;
}
.flower02 {
    width: 80px;
    top: -40px;
}
.flex_col2_ex{
    flex-wrap: wrap;
    justify-content: center;
}
.flex_col2_ex_text{
    width: 100%;
    order: 2;
    max-width: unset;
    z-index: 2;
}
.flex_col2_ex_img{
    width: 100%;
    max-width: 600px;
    margin: 0 auto 30px;
}
.bubble_niconico01 {
    width: 30%;
    right: -2%;
    bottom: -5%;
}
.balloon01 {
    width: 70px;
    right: -15px;
    top: 20px;
}
.niconico_logo {
    max-width: 200px;
    margin: 0 auto 20px;
}
.turns {
    padding: 60px 0;
}
.machi05_img02, .machi05_img03 {
    max-width: 310px;
    width: 70%;
}
.machi05_img02 {
    margin-bottom: 50px;
}
.machi05_map{
    width: 76%;
    margin-right: auto;
    margin-left: 0;
}
.tree03 {
    right: -10px;
}
.bubble_koshiba01 {
    width: 42%;
    top: 19%;
    right: -36%;
}
.machi05_img{
    max-width: 550px;
}
.bubble_koshiba02 {
    width: 65%;
    top: 64%;
    right: -10%;
}
.bubble_koshiba03 {
    width: 66%;
    top: 50%;
    right: -40%;
}
.machi_04_img02_box{
    margin: 20px auto 0;
}
.flex_umi_img {
    width: 100%;
    max-width: 450px;
    margin: 0 auto 30px;
}
.bubble_umi03 {
    width: 33%;
    top: -9%;
    right: -2%;
}
.fish01 {
    width: 70px;
    bottom: -10px;
    left: 0%;
}
.bubble_niconico03 {
    width: 20%;
    right: -1%;
    bottom: 3%;
}
.bubble_niconico02 {
    width: 19%;
    left: 1%;
    bottom: -5%;
}
.tree05 {
    top: -110px;
    width: 64px;
    right: 5%;
}
.flex_col2_ex02 {
    flex-wrap: wrap;
}
.flex_col2_ex02 .flex_col2_ex_img {
    max-width: 600px;
    width: 100%;
}
.flex_col2_ex02 .flex_col2_ex_text {
    width: 100%;
    order: 2;
}
.machi08_img02 {
    bottom: -12%;
    max-width: 310px;
    left: -5%;
    width: 47%;
}
.abc01 {
    width: 80px;
    top: -40px;
    right: 10px;
}
.shop_flex {
    flex-wrap: wrap;
    justify-content: center;
}
.shop_img {
    max-width: 600px;
    margin: 0 auto 30px;
}
.shop_name {
    max-width: 370px;
}
.strawberry01 {
    top: -35px;
    left: -10px;
    width: 50px;
}

.resi_kids_flex{
    flex-wrap: wrap;
    margin: 20px auto 80px;
    justify-content: center;
}
.resi_kids_img{
    width: 100%;
    max-width: 600px;
}
.resi_kids_text{
    width: 100%;
    order: 2;
}
.parasol01 {
    width: 72px;
    left: unset;
    top: 10px;
    right: 0%;
}
.book01 {
    max-width: 130px;
    width: 19%;
    bottom: 3%;
    left: -3%;
}

.resi_guest_flex{
    flex-wrap: wrap;
}
.resi_guest_img_flex{
    width: 100%;
}
.resi_guest_text{
    width: 100%;
    max-width: unset;
    text-align: center;
}
.resi_guest_name {
    width: 75%;
    margin: 15px auto 0;
    max-width: 190px;
}
.ribbon01 {
    width: 15.2%;
    top: -8%;
    right: -2%;
}
.smile01 {
    width: 15%;
    bottom: 16%;
    right: -3%;
}
.flower03 {
    width: 83px;
    top: -70px;
    right: 20px;
}
.tree06 {
    width: 67px;
    top: -90px;
    left: 20px;
}
.resi_park_name {
    margin: 15px auto 0;
}
.resi_park_flex{
    flex-wrap: wrap;
    justify-content: center;
}
.resi_park_item{
    width: 100%;
    max-width: 600px;
}
.resi_park_item:not(:first-child){
    margin-top: 40px;
}
#family_nav {
    top: 52px;
}

.machi07_img02 {
    bottom: -8%;
    max-width: 310px;
    right: unset;
    width: 48%;
    left: -7%;
}
.machi09_img02 {
    bottom: -9%;
    right: unset;
    width: 47%;
    left: -8%;
}
}



@media screen and (max-width: 650px) {
.resi_park_ttl {
    height: 17px;
}
.family_sec_ttl {
    height: 45px;
}
.cat01 {
    left: -3%;
    bottom: -20%;
    width: 70px;
}
.bee01 {
    width: 50px;
    top: -3%;
    left: -2%;
}
.flower01 {
    right: 0%;
    top: -10%;
    width: 50px;
}
.tree01 {
    right: -2%;
    bottom: -13%;
    width: 50px;
}
.triangle {
    width: 10px;
}
.triangle01_03 {
    right: -5%;
    top: 21%;
}
.family_btn_ttl {
    max-width: 160px;
}
.flex_col2_basic_ttl.row2 {
    height: 50px;
}
.tree02 {
    width: 40px;
    left: -30px;
    bottom: 0px;
}
.subsec_ttl {
    height: 60px;
    margin: 30px auto 20px;
}
.balloon01 {
    width: 60px;
    right: -16px;
    top: 10px;
}
.tree03 {
    width: 45px;
}
.rainbow01 {
    top: -20px;
}
.float01 {
    width: 70px;
    top: -40px;
}
.bubble_umi03 {
    width: 37%;
    top: -13%;
}
/* .machi07_img02 {
    width: 45%;
    right: unset;
    left: -4%;
    bottom: unset;
    top: -56%;
} */
.flex_col2_ex_name_pt02 {
    height: 90px;
}
.fish02 {
    width: 70px;
    bottom: -50px;
    left: -10px;
}
.giraffe01 {
    top: -110px;
    width: 65px;
    right: 5%;
}
/* .machi09_img02 {
    width: 47%;
    right: unset;
    bottom: unset;
    top: -68%;
    left: -5%;
} */
.abc01 {
    width: 75px;
    top: -60px;
    right: 0px;
}
.machi_separate01 {
    margin: 40px auto;
}
#machi_area, #residence_area {
    padding: 0 0 80px;
}


.fv{
    height: calc(100svh - 112px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fv_stage{
    width: min(100%, calc((100svh - 112px) * 1300 / 2024));
    aspect-ratio: 1300 / 2024;
    position: relative;
    flex: 0 0 auto;
}
.fv_frame_sp {
    width: 100%;
    height: 100%;
    display: block;
}
.fv_ttl_en {
    top: 23%;
    left: 14.8%;
    width: 71%;
}
.fv_ttl_ja {
    width: 71%;
    top: 61.6%;
    left: 14.7%;
}
.fv_rainbow {
    top: 60.3%;
    left: -3%;
    width: 10.5%;
}
.fv_sun {
    width: 12.1%;
    top: 1.5%;
    left: 35.9%;
}
.fv_img01{
    width: 125.3%;
    left: -19.4%;
    top: -4%;
}
.fv_img02{
    width: 123%;
    left: -5.9%;
    top: -4.3%;
}
.fv_flower {
    width: 14%;
    top: 52.1%;
    right: -2.4%;
}
.fv_scroll{
    position: absolute;
    left: 44.3%;
    bottom: 2.5%;
    width: 12%;
    z-index: 10;
    animation: fluffy 1s ease-in-out infinite alternate;
}
@keyframes fluffy {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

.machi04_img02{
    overflow-x: scroll;
    /* direction: rtl; */
}
.machi_04_img02_box{
    min-width: 700px;
    padding-bottom: 10px;
    /* direction: ltr; */
}
.dog01 {
    left: 0%;
    bottom: 0%;
    width: 9%;
}

.educate_list{
    max-width: 500px;
    margin: 0 auto;
}
.subsec_box {
    margin: 0 auto 40px;
}
.bubble_niconico03 {
    width: 28%;
    right: -5%;
    bottom: -25%;
}
.bubble_niconico02 {
    width: 27%;
    left: -4%;
    bottom: -30%;
}


.family_nav_right {
    width: 23%;
    height: 70px;
}
.family_nav_left {
    width: 77%;
    height: 70px;
}
.family_nav_top {
    width: 17%;
}
.family_nav_machi_box {
    width: 75%;
}
.family_nav_machi{
    width: 26%;
}
.family_nav_machi_flex{
    gap: 6%;
    width: 73%;
    justify-content: space-around;
}
.family_nav_sumai{
    width: 90%;
}
.family_nav_educate {
    width: 15%;
}
.family_nav_play{
    width: 24%;
}
.family_nav_shop{
    width: 26%;
}
.family_nav_sepa {
    width: 1%;
}

}