.follow_bnr { gap: 1rem; z-index: 9; bottom: 2rem; right: 2rem; }
.follow_bnr a { width: 140px; height: 140px; border-radius: 50%; }
.follow_bnr a span { display: block; color: #fff; font-size: 1.25rem; font-weight: 600; }
.follow_bnr .img_bnr { width: 295px; height: auto; }

.bg-line { background-image: url(../img/bg-line.png); background-position: center center; background-size: 1600px auto; }

/* -------------------------------------------- fv */

.fv { z-index: 0; padding: 130px 0 0; text-align: center; z-index: 3; }
.fv::before { top: 0; left: 0; width: 100%; height: 100%; background: url(../img/fv-img1.png?v=5) no-repeat center 30px; background-size: 1620px auto; }
.fv::after { width: 100%; height: calc(100% - 30px); left: 0; top: 0; background: url(../img/fv-bg.jpg) no-repeat center center; background-size: cover; z-index: -1; }
.fv .fv_img { max-width: 550px; }

/* -------------------------------------------- concept */

.concept { box-shadow: 0px 0px 20px 5px rgb(219, 219, 219); margin-top: -30px; padding: 4rem 0 12rem; background-image: url(../img/concept-bg.jpg); z-index: 2; }
.concept .inner { z-index: 2; }
.concept::before { left: 0; top: 0; width: 100%; height: 100%; background: url(../img/concept-bg.png) no-repeat center 20px; background-size: 1600px auto; }
.concept h4 { font-size: 1.75rem; font-weight: 600; padding: 0 0 2rem; line-height: 200%; }
.concept .txt { font-size: 1.1rem; line-height: 280%; padding: 0 0 4rem; }
.concept .logos { max-width: 560px; margin: auto; }

/* -------------------------------------------- performance */ 

.performance { padding: 6rem 0 12rem; }
.performance .caption { line-height: 220%; font-size: 1.1rem; padding: 0 0 3rem; }
.performance ul { padding: 1rem 0 0; }
.performance ul li { width: 31%; max-width: 320px; }
.performance ul li img { width: 94%; max-width: 188px; left: 0; right: 0; margin: auto; top: 102%; }
.performance ul li .circle { padding: 100% 0 0; background-color: #6EA13D; width: 100%; overflow: hidden; border-radius: 50%; }
.performance ul li .content { width: 100%; top: 0; height: 100%; color: #fff; }
.performance ul li .content .num { padding: 1.5rem 0 0; font-size: 2rem; }
.performance ul li .content .num span { display: inline-block; border-bottom: 4px solid #fff; font-weight: bold; line-height: 100%; }
.performance ul li .content .title { font-size: 1.6rem; padding: 1rem 0; font-weight: 600; }

/* -------------------------------------------- life_style1 */ 

.life_style { padding: 6rem 0; }
.life_style::before { background: url(../img/bg-1.png) no-repeat center 2rem; background-size: 3100px auto; width: 100%; height: 100%; left: 0; top: 0; }
.life_style .row { max-width: 1156px; padding: 12px 0; }
.life_style .row::before { background: url(../img/bg-2.png) no-repeat left center; background-size: contain; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.6; }
.life_style .content { width: 88%; max-width: 790px; margin: auto; padding: 10% 0 6%; position: relative; z-index: 2; }
.life_style .content .img { width: calc(100% - 260px); max-width: 530px; z-index: 2; }
.life_style .content .img img { border-radius: 8px; }
.life_style .content .name { top: -70px; left: 0; text-align: right; padding: 8px 0 0; font-size: 3.25rem; font-weight: 600; }
.life_style .content .texts { width: 240px; flex-direction: row-reverse; }
.life_style .content .title span { font-size: 1.1rem; display: inline-block; margin: 0 2px; padding: 8px 0; letter-spacing: 2px; }
.life_style .content .txt { letter-spacing: 2px; padding-right: 12px; }

.life_style .row.right { margin: 0 0 0 auto; }
.life_style .row.right .content { flex-direction: row-reverse; }
.life_style .row.right::before { background-image: url(../img/bg-3.png); }
.life_style .right .content .name { right: 0; left: auto; }
.life_style .row.hall::before { transform: scaleY(-1); }

.life_style .obj { z-index: 2; pointer-events: none; }
.life_style .obj1 { max-width: 170px; top: -5rem; left: 4%; }
.life_style .obj2 { max-width: 200px; top: 2rem; right: 0; }
.life_style .obj3 { max-width: 153px; bottom: 0; right: 0; }
.life_style .obj4 { max-width: 96px; bottom: 2rem; left: 4rem; }
.life_style .obj5 { max-width: 192px; top: 6rem; right: 0; }
.life_style .obj6 { max-width: 106px; top: 2rem; left: 0; z-index: 3; }
.life_style .obj7 { max-width: 150px; bottom: 2rem; right: 2rem; }
.life_style .obj8 { max-width: 150px; top: 2rem; left: 0; }
.life_style .obj9 { max-width: 170px; bottom: 0; left: 0; }

/* -------------------------------------------- plan */ 

.plan { padding: 6rem 0 12rem; background-image: url(../img/concept-bg.jpg); }
.plan::before { background: url(../img/plan-bg.png) no-repeat center 2rem; background-size: 1500px auto; width: 100%; height: 100%; left: 0; top: 0; }
.plan .inner { z-index: 2; }
.plan .floors { padding: 4rem 0 6rem; }
.plan .floors .col { max-width: 418px; width: 48%; }
.plan .floors .col .txt { padding: 3rem 0 0; }
.plan .points::before { width: 94%; max-width: calc(50% + 650px); right: 0; background: url(../img/bg-line.png) repeat center center; background-size: 1600px auto; height: 100%; top: 0; }
.plan .points { padding: 6rem 0; }
.plan .points h4 { font-size: 3rem; font-weight: bold; top: -1.25rem; left: 0; width: 100%; text-align: center; z-index: 2; }
.plan .points .slider { margin-left: auto; margin-right: 0; width: 88%; max-width: calc(50% + 500px); }
.plan .points .slider_arw { width: 40px; top: 0; bottom: 0; left: -60px; margin: auto; z-index: 2; cursor: pointer; }
.plan .points .slider .slide { width: 464px; background-color: #fff; }
.plan .points .slider .slide img { width: 100%; }
.plan .points .slider .slide .num { line-height: 69px; font-weight: 600; height: 58px; width: 58px; text-align: center; top: 0; left: 0; font-size: 3rem; }
.plan .points .slider .slide .txt { padding: 1rem 1.5rem; }
.plan .small_txt { padding: 2rem 0 0; font-size: 12px; line-height: 220%; }

/* -------------------------------------------- scene */ 

.scene { padding: 6rem 0; background: url(../img/fv-bg.jpg) no-repeat center center; background-size: cover; }
.scene .scene_slider .slide { width: 450px; }
.scene .scene_slider .slide figure { margin: auto; width: 100%; padding-top: 64%; }
.scene .scene_slider .slide figure img { width: 100%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.scene_slider .slider_arw { width: 55px; height: auto; left: 3%; top: -2rem; cursor: pointer; }
.scene_slider .slider_arw.next { left: auto; right: 3%; transform: scaleX(-1); }

.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: linear;
}

/* -------------------------------------------- benefits */ 

.benefits { padding: 6rem 0; background-color: #6EA13D; }
.benefits .box { background-color: #fff; padding: 4rem 4% 2rem; border-radius: 1rem; }
.benefits h4 { font-size: 2.5rem; width: 100%; left: 0; top: -30px; }
.benefits h4 span { display: inline-block; height: 60px; line-height: 60px; padding: 0 2rem; border-radius: 1rem; font-weight: 600; }
.benefits .present { width: 52%; }
.benefits .contents { width: 46%; }
.benefits .contents h5 { font-weight: 600; font-size: 1.1rem; padding: 8px 0; border-bottom: 1px solid #484354;  border-top: 1px solid #484354; }
.benefits .contents ol { padding: 1rem 0; }
.benefits .contents ol li { padding: 3px 0 3px 2rem; letter-spacing: 1px; }
.benefits .contents ol li::before { content: '1'; width: 22px; height: 22px; line-height: 22px; font-size: 12px; left: 0; top: 5px; background-color: #484354; color: #fff; text-align: center; border-radius: 50%; padding-left: 2px; box-sizing: border-box; font-weight: 600; }
.benefits .contents ol li:nth-child(2)::before { content: '2'; }
.benefits .contents ol li:nth-child(3)::before { content: '3'; }
.benefits .contents .notes { font-size: 12px; line-height: 200%; }

/* -------------------------------------------- faq */ 

.faq { padding: 6rem 0 4rem; background-image: url(../img/bg-4.jpg); }
.faq h4 img { width: 271px; } 
.faq ul { padding: 2rem 0; }
.faq ul li { padding: 2.5rem 0; }
.faq ul li::before { width: 94%; height: 1px; background-color: #999999; left: 0; right: 0; top: 0; margin: auto; }
.faq ul li p { font-size: 1.6rem; padding: 0.5rem 0 0.5rem 4rem; line-height: 180%; }
.faq ul li p::before { top: 8px; width: 43px; height: 43px; background-image: url(../img/icn_q.png); background-size: 100% auto; background-repeat: no-repeat; left: 0; }
.faq ul li p.a::before { background-image: url(../img/icn_a.png); }

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {
    
    .performance ul li { width: 32%; }
    .performance ul li .content { display: flex; flex-wrap: wrap; justify-content:  center; align-content: center; }
    .performance ul li .content .title { font-size: 1.25rem; padding: 12px 0 8px; width: 100%; }
    .performance ul li .txt { line-height: 150%; font-size: 14px; width: 100%; padding: 0 0 12px; }
    .performance ul li .content .num { padding-top: 0; font-size: 1.5rem; }

    .life_style .inner { width: 100%; }
    .life_style .content { width: 88%; }
    .life_style .content .name { font-size: 2.5rem; top: -55px; left: auto; right: 0; }
    .life_style .row { padding: 2rem 0; }
    .life_style .row::before { background-size: auto 100%; background-position: center center; } 
    
    .life_style .obj1 { top: 0; width: 100px; left: 4%; }
    .life_style .obj2 { width: 120px; }
    .life_style .obj3 { width: 120px; }
    .life_style .obj4 { width: 50px; left: 4%; }
    .life_style .obj5 { top: auto; bottom: 1rem; width: 140px; }
    .life_style .obj6 { width: 130px; left: 4%; top: 0; }
    .life_style .obj7 { width: 100px; top: auto; bottom: 4rem; right: 3%; } 
    .life_style .obj8 { width: 90px; top: 0; left: 4%; }
    .life_style .obj9 { width: 100px; left: auto; right: 0; bottom: -2rem; }
    
    .plan { padding: 4rem 0; }
    .plan .floors { padding: 2rem 0 4rem; }

    .plan .points .slider .slide { width: 350px; }
}


/* -------------------------------------------- sp */

@media screen and (max-width: 797px) {

    .follow_bnr  { gap: 8px; right: 3%; left: auto; bottom: 1rem; margin: auto; z-index: 8; }
    .follow_bnr a { width: 90px; height: 90px; }
    .follow_bnr a span { font-size: 12px; }
    .follow_bnr .img_bnr { width: calc(100% - 220px); max-width: 220px; }

    .fv  { padding-top: 34%; }
    .fv::before { background-image: url(../img/fv-img1-sp.png?v=3); background-size: 110% auto; background-position: center top; }
    .fv .fv_img { width: 70%; position: relative; z-index: 2; }

    .concept { padding: 4rem 0 6rem; }
    .concept .txt { text-align: left; line-height: 200%; max-width: 420px; margin: auto; }
    .concept .logos { max-width: 420px; }

    .performance { padding: 4rem 0 6rem; }
    .performance .caption { max-width: 420px; margin: auto; text-align: left; }
    .performance ul { justify-content: center; gap: 2rem; padding-top: 6rem; }
    .performance ul li { width: 70%; max-width: 320px; }
    .performance ul li .content .num { font-size: 2.5rem; }
    .performance ul li .content .title { font-size: 1.5rem; }
    .performance ul li .txt { font-size: 1rem; line-height: 180%; }
    .performance ul li img { top: auto; bottom: 102%; }

    .life_style .row { padding: 6rem 0 2rem; }
    .life_style .row::before { background-position: 20% center; }
    .life_style .content { display: block; width: 80%; max-width: 420px; }
    .life_style .content .img { width: 100%; }
    .life_style .content .texts { width: 100%; padding: 2rem 0 0; align-items: flex-start; }
    .life_style .content .txt { padding-right: 1.5rem; font-size: clamp(1rem, 3.5vw, 4rem); line-height: 180%; letter-spacing: 1px; word-break: keep-all; }
    .life_style .content .title span { font-size: clamp(1.25rem, 4vw, 5rem);  word-break: keep-all; }
    .life_style .right .content .name { right: auto; left: 0; }

    .life_style .obj2 { display: none; }
    .life_style .obj3 { width: 78px; right: 4%; }
    .life_style .obj4 { width: 60px; left: 6%; }
    .life_style .obj5 { width: 100px; top: 2rem; bottom: auto; right: 4%; }
    .life_style .obj6 { width: 55px; top: 2rem; }
    .life_style .obj7 { width: 86px; }
    .life_style .obj9 { width: 77px; right: 4%; bottom: 0; }

    .plan .floors { justify-content: center; }
    .plan .floors .col { width: 100%; padding: 2rem 0; }
    .plan .floors .col img { width: 88%; margin: auto; display: block; }

    .plan .points { padding: 4rem 0; }
    .plan .points .slider { width: 80%; }
    .plan .points .slider .slide { width: 65vw; }
    .plan .points .slider_arw { width: 30px; left: -50px; }
    .plan .points .slider .slide .num { font-size: 2rem; height: 40px; line-height: 47px; width: 40px; }
    .plan .points .slider .slide .txt { line-height: 180%; font-size: 12px; }

    .scene { padding: 3rem 0 4rem; }
    .scene_wrap { padding-top: 2rem; }
    .scene .scene_slider .slide { width: 300px; }
    .scene_slider .slider_arw { width: 40px; }
    
    .benefits { padding: 4rem 0 3rem; }
    .benefits h4 span { font-size: 1.5rem; height: 40px; line-height: 40px; border-radius: 8px; }
    .benefits .present { max-width: 320px; width: 88%; margin: auto; }
    .benefits .contents { width: 94%; margin: auto; }
    .benefits .contents h5 { font-size: 1rem; padding: 5px 0; }
    .benefits .contents .notes { font-size: 11px; line-height: 160%; }
    .benefits .contents ol li::before { font-size: 11px; width: 20px; height: 20px; line-height: 20px; }

    .faq { padding: 4rem 0 2rem; }
    .faq h4 img { width: 70%; max-width: 150px; }
    .faq ul li { padding: 1.5rem 0; }
    .faq ul li p { font-size: 1.1rem; padding-left: 35px; }
    .faq ul li p::before { width: 25px; height: 25px; }
}