#main_visual{
    max-width: var(--page-max-width);
    width: 100%;
    min-width: var(--page-min-width);
    position: relative;
    margin-bottom: var(--section-margin3);
    height: 100svh;
    overflow: hidden;
    margin: 0 auto;
}
#main_visual img.visual{
    width: 100%;
    height: 100svh;
    object-fit: cover;
    object-position: center;
}
#main_visual img.catch{
    width: 1400px;
    padding: 0 var(--page-padding);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.catch {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
  }
  .catch.is-visible {
    opacity: 1;
    transform: scale(1);
  }
@media screen and (max-width: 1024px) {
    #main_visual img.catch{
        width: 100%;
    }
}
/* Vision */
#vision{
    max-width: var(--page-max-width);
    width: 100%;
    min-width: var(--page-min-width);
    margin: 0 auto;
    padding:var(--section-margin) var(--page-padding);
    background-image: url(https://city-point.jp/wp-content/uploads/vision.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#vision .box_wrap{
    width: 100%;

}
#vision .box_wrap img.title{
    max-width:600px;
    width: 100%;
    min-width: 300px;
    margin:0 0 var(--section-margin3) 100px;
}
#vision .box_wrap .text_wrap{
    width: 100%;
    text-align: left;
}
#vision .box_wrap .text_wrap .title{
    text-align: left;
}
#vision .box_wrap .text_wrap .text{
    text-align: left;
    margin-bottom: var(--section-margin3);
}
@media screen and (max-width: 1024px) {
    #vision .box_wrap img.title{
        max-width:70%;
        width: 70%;
        min-width: 70%;
        margin:0 0 var(--section-margin3);
    }
}
/* Service */
#service{
    max-width: var(--page-max-width);
    width: 100%;
    min-width: var(--page-min-width);
    margin: calc(var(--section-margin) * -1) auto 0;
    background-color: var(--service-color);
    padding:var(--section-margin) var(--page-padding);
    clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
    position: relative;
    z-index: 1;
}
#service .box_wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--section-margin3);
    margin-bottom: var(--section-margin2);
    align-items: end;
}
#service .box_wrap .text_wrap {
    width: 100%;
}
#service .box_wrap .text_wrap .title{
    text-align: left;
}
#service .box_wrap .text_wrap .text{
    text-align: left;
}
#service .box_wrap img.title {
    width: 100%;
    min-width: 300px;
    max-width: 600px;
    margin: 0;
}
#service .service_list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--section-margin3);
}
#service ul.service_list li.service_item{
    width: calc((100% - var(--section-margin3) * 1) / 2);
    
}
#service ul.service_list li.service_item img.service_img{
    width: 100%;
    margin-bottom: var(--section-margin3);
}
#service ul.service_list li.service_item .service_content{
    padding: 0 var(--section-margin4);
}
#service ul.service_list li.service_item .service_title{
    width: 100%;
    display: block;
    font-size: var(--font-x);
    font-weight: 700;
    
    text-align: left;
    color: var(--primary-color);
    margin-bottom: var(--section-margin1);
}
#service ul.service_list li.service_item .service_text{
    width: 100%;
    text-align: left;
    margin-bottom: var(--section-margin3);
}

#service ul.service_list li.service_item .viewmore{
    text-align: right;
    display: block;
}
@media screen and (max-width: 1024px) {
    #service{
        margin: calc(var(--section-margin3) * -1) 0 0;
    }
    #service .box_wrap {
        display: flex;
        flex-wrap: wrap;
    }
    #service .box_wrap img.title {
        width: 70%;
        min-width: 70%;
        max-width: 70%;
        margin-top: var(--section-margin2);
        order: 1;
    }
    #service .box_wrap .text_wrap {
        order: 2;
    }
    #service .service_list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--section-margin3);
    }
    #service ul.service_list li.service_item{
        width: 100%;
        
    }
    #service ul.service_list li.service_item img.service_img{
        width: 100%;
        margin-bottom: var(--section-margin3);
    }
    #service ul.service_list li.service_item .service_content{
        padding: 0 var(--section-margin4);
    }
    #service ul.service_list li.service_item .service_title{
        width: 100%;
        display: block;
        font-size: var(--font-x);
        font-weight: 700;
        
        text-align: left;
        color: var(--primary-color);
        margin-bottom: var(--section-margin3);
    }
    #service ul.service_list li.service_item .service_text{
        width: 100%;
        text-align: left;
        margin-bottom: var(--section-margin3);
    }
    
    #service ul.service_list li.service_item .viewmore{
        text-align: right;
        display: block;
    }
}
/* Paralax */
#paralax {
    width: 100%;
    height: 80svh;
    position: relative;
    overflow: hidden;
    background-image: url('https://city-point.jp/wp-content/uploads/paralax.png?2510021508');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#paralax .paralax-img {
    display: none;
}

@media screen and (max-width: 1024px) {
    #paralax {
        background-attachment: scroll;
    }

}
/* News */
#news{
    max-width: var(--page-max-width);
    width: 100%;
    min-width: var(--page-min-width);
    margin: 0 auto;
    padding:var(--section-margin) 0 var(--section-margin) var(--page-padding);
    overflow: hidden;
    background-color: var(--news-color);
}
#news .main_wrap{
    display: flex;
    grid-template-columns: 1fr auto;
}
#news .box_wrap{
    max-width: 350px;
    width: 100%;
    min-width: 200px;
}
#news .box_wrap img.title{
    width: 100%;
    padding-right: 10%;
    box-sizing: border-box;
}
#news .box_wrap .text_wrap{
    width: 100%;
}
#news .box_wrap .text_wrap .title{
    text-align: left;
}
#news .box_wrap .text_wrap .text{
    text-align: left;
}

#news .news_list{
    width: calc(100% - 350px);

}
#news .column-outside-right{
    flex: 1;
    margin-right: calc(50% - 50vw);
}
#news .news_list .news_content{
    width: 100%;
    margin-top: var(--section-margin2);
}
#news .news_list .news_content .news_title{
    width: 100%;
    text-align: left;
    font-family: var(--font-en);
    font-size: var(--font-m);
    font-weight: 400
}
#news .news_list .news_content .news_text{
    width: 100%;
    text-align: left;
}
#news .swiper-horizontal>.swiper-pagination-bullets{
    bottom: calc(var(--section-margin) * -1) !important;
}
#news .news_list .news_item img.news_img{
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
}
@media screen and (max-width: 1024px) {
    #news {
        max-width: var(--page-max-width);
        width: 100%;
        min-width: var(--page-min-width);
        margin: 0 auto;
        padding: var(--section-margin) var(--page-padding);
        overflow: hidden;
        background-color: var(--news-color);
    }
    #news .main_wrap{
        display: flex;
        flex-wrap: wrap;
    }
    #news .box_wrap{
        max-width: 100%;
    }
    #news .box_wrap img.title{
        width: 35%;
        padding-right: initial;
        box-sizing: border-box;
    }
    #news .news_list{
        width: 100%;
    }
    #news .box_wrap .text_wrap{
        margin-bottom: var(--section-margin3);
    }
    #news .column-outside-right{
        margin-right: 0;
    }

}
/* Feature */
#feature{
    max-width: var(--page-max-width);
    width: 100%;
    min-width: var(--page-min-width);
    margin: 0 auto;
    padding:var(--section-margin) var(--page-padding) 0;
   
}
#feature .main_wrap{
    width: 100%;
    padding: 0 var(--page-padding);
}
#feature img.title{
    max-width: 600px;
    width: 100%;
    min-width: 300px;
    position: relative;
    z-index: 1;
    
}
#feature .feature_wrap{
    max-width: var(--page-width);
    width: 100%;
    min-width: var(--page-min-width);
    margin: -80px auto 0;
    padding: var(--section-margin4);
    background-color: var(--feature-color);
    position: relative;
    z-index: 0;
}
#feature ul.feature_list{
    max-width: calc(var(--page-max-width));
    width: 100%;
    min-width: calc(var(--page-min-width));
    padding: 0 var(--page-padding);
    margin:auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--section-margin6);
}
#feature ul.feature_list li.feature_item{
    width: calc((100% - var(--section-margin6) * 1) / 2);
    position: relative;
    padding-bottom: var(--section-margin6);
    
}
#feature ul.feature_list li.feature_item img.feature_img{
    width: 100%;
    margin-bottom: var(--section-margin3);
}

#feature ul.feature_list li.feature_item .feature_content{
    width: 100%;
}
#feature ul.feature_list li.feature_item .feature_title{
    width: 100%;
    display: block;
    font-size: var(--font-x);
    font-weight: 700;
    
    text-align: left;
    line-height: 1.8;
    color: var(--primary-color);
    margin-bottom: var(--section-margin1);
}
#feature ul.feature_list li.feature_item .feature_text{
    width: 100%;
    text-align: left;
    margin-bottom: var(--section-margin3);
}

#feature ul.feature_list li.feature_item .viewmore{
    text-align: right;
    display: block;
    position: absolute;
    bottom: 0;
    right: var(--section-margin4);
}
@media screen and (max-width: 1024px) {

    #feature .main_wrap{
        padding: 0;
    }
    #feature .feature_wrap {
        max-width: var(--page-width);
        width: 100%;
        min-width: var(--page-min-width) ;

    }
    #feature img.title{
        max-width: 70%;
        width: 70%;
        min-width: 70%;
        
    }
    #feature ul.feature_list{
        gap: var(--section-margin6);
    }
    #feature ul.feature_list li.feature_item{
        width: 100%; 
    }
    #feature ul.feature_list li.feature_item .feature_content{
        padding: 0;
    }
    #feature ul.feature_list li.feature_item .viewmore{
        position: initial;
    }
}
/* Recruit */
#recruit{
    max-width: var(--page-max-width);
    width: 100%;
    min-width: var(--page-min-width);
    margin: 0 auto;
    padding:var(--section-margin) var(--page-padding);
}
#recruit .main_wrap{
    display: grid;
    grid-template-columns: 1fr auto;
    margin-bottom: var(--section-margin2);
}
#recruit .box_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--section-margin3);
    margin-bottom: var(--section-margin2);
}
#recruit .box_wrap .title_wrap{
    width: 100%;
    min-width: 300px;
    max-width: 600px;
    margin: 0;
}
#recruit .box_wrap .title_wrap img.title {
    width: 100%;
}
#recruit .box_wrap .title_wrap {
    width: 100%;
}
#recruit .box_wrap .title_wrap .recruit_title{
    width: 100%;
    display: block;
    font-size: var(--font-x);
    font-weight: 700;
    text-align: left;
    color: var(--primary-color);
    margin-top: var(--section-margin2);
    margin-bottom: var(--section-margin1);
}
#recruit .box_wrap .title_wrap .recruit_text{
    width: 100%;
    text-align: left;
    margin-bottom: var(--section-margin3);
}
#recruit .box_wrap .text_wrap{
    width: 100%;
    padding-left: var(--section-margin6);
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1024px) {
    #recruit .main_wrap{
        display: flex;
        flex-wrap: wrap;
    }
    
    #recruit .box_wrap {
        display: flex;
        flex-wrap: wrap;
    }
    #recruit .box_wrap .title_wrap img.title {
        width: 70%;
    }
    #recruit .box_wrap .title_wrap {
        width: 100%;
        min-width: var(--page-min-width);
        max-width: var(--page-width);
        margin: 0;
    }
    #recruit .box_wrap .text_wrap{
        padding:0
    }
}