/* ==========================================================
   FEATURE
   自然素材・性能・住み継ぐ・沖縄の風土 共通
========================================================== */

.feature{

    padding:10rem 0;

}

/*----------------------------------------------------------
  レイアウト
----------------------------------------------------------*/

.feature__grid{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:7rem;

}

/* 写真を左にする */

.feature--reverse .feature__grid{

    flex-direction:row-reverse;

}

/*----------------------------------------------------------
  テキスト
----------------------------------------------------------*/

.feature__content{

    flex:0 0 42%;
    max-width:34rem;

    padding-top: 2.5rem;

}

.feature .section-header__title{

    margin-bottom:3rem;

    font-family: var(--font-title);

    font-weight:400;

    line-height:1.7;

    letter-spacing:.12em;

}

.feature__text{

    margin-bottom:2rem;

    line-height:2.2;

    letter-spacing:.05em;

    color:var(--color-sub);
    

     
    font-size:1.00rem;

    line-height:2.4;

    letter-spacing:.06em;

}

.feature__link{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    margin-top:2.5rem;

    text-decoration:none;

    color:var(--color-text);

    transition:.3s;

    font-size:1.00rem;

}

.feature__link span{

    transition:.3s;

}

.feature__link:hover span{

    transform:translateX(6px);

}

.feature__link:active span{

    transform:translateX(6px);

}

/*----------------------------------------------------------
  写真
----------------------------------------------------------*/

.feature__image{

    flex:0 0 52%;

    position:relative;

    min-width:0;

    padding-top:3rem;

}

.feature__image img{

    display:block;

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

}

/* 写真の後ろの柔らかい背景 */

.feature__image::after{

    content:"";

    position:absolute;

    top:5rem;

    left:2rem;

    width:100%;

    height:100%;

    background:#f4f1eb;

    z-index:-1;

}

/* 左右反転 */

.feature--reverse .feature__image::after{

    left:auto;

    right:2rem;

}

/*----------------------------------------------------------
  Tablet
----------------------------------------------------------*/

@media (max-width:960px){

    .feature{

        padding:8rem 0;

    }

    .feature__grid{

        gap:4rem;

    }

}

/*----------------------------------------------------------
  Smartphone
----------------------------------------------------------*/

@media (max-width:768px){

    .feature{

        padding:6rem 0;

    }

    .feature__grid{

        flex-direction:column;

        gap:3rem;

    }

    .feature--reverse .feature__grid{

        flex-direction:column;

    }

    .feature__content,
    .feature__image{

        flex:none;

        width:100%;

        max-width:none;

    }

    .feature__image{

        padding-top:0;

    }

    .feature__image::after{

        display:none;

    }

}

@media(max-width:768px){


.feature p{

    font-size:15px;

    line-height:2;

}

}

@media(max-width:768px){


.feature-content{

    padding-top:30px;
    padding-bottom:40px;

}

}