@charset "utf-8";

/* --------------------------
   動画
---------------------------- */
.hero{
    background-color: #0c0c0c;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* --------------------------
   導入部分
---------------------------- */
.info_wrap{
    background-color: #0c0c0c;
}
.info{
    max-width: 1200px;
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 5.5vw 0;
    margin-bottom: 5.6vw;
}
.noge_logo{
    max-width: 220px;
    width: 20%;
    margin: auto;
    margin-bottom: 4vw;
}
.info .text1{
    font-size: clamp(2rem, 1.6vw, 2.2rem);
    color: #fff;
    line-height: 2;
    letter-spacing: 0.1em;
    margin-bottom: 2em;
}
.price{
    font-size: 32px;
    color: #fff;
    text-align: center;
    padding-bottom: 30px;
}
.info_img{
    max-width: 770px;
    width: 100%;
    margin: auto;
    padding: 1vw 0 2.2vw;  
}
.info .text2{
    font-size: clamp(2rem, 1.8vw, 2.6rem);
    color: #fff;
    padding-bottom: 1.5em;
    letter-spacing: 0.1em;
}
.info_box{
    border-top: 0.5px solid #fff;
    display: flex;
    justify-content: center;
    gap: 5vw;
    padding-top: 30px;
}
.on_foot12{
    max-width: 368px;
}
.on_foot2{
    max-width: 535px;
}

/* --------------------------
   ロケーション
---------------------------- */
.location_wrap{
    background-color: #e5e7eb;
    margin-bottom: 5.6vw;
}
.location{
    max-width: 1200px;
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 5.5vw 0
}
.en_title{
    font-size: clamp(6.4rem, 6.9vw, 10rem);
    line-height: 1;
}
.location .text1{
    font-size: clamp(2.6rem, 2.6vw, 3.8rem);
    padding: 0.6em 0;
    letter-spacing: 0.1em;
}
.location .text2 {
    font-size: clamp(1.6rem, 1.4vw, 2rem);
    font-weight: 200;
    line-height: 2;
    letter-spacing: 0.1em;
}
#map {
    width: 100%;
    height: clamp(360px, 40.1vw,600px);
    overflow: hidden;
    background: #e5e7eb;
    /* 読み込み前の下地（map内グレー） */
}
.area_wrap{
    background-color: #0c0c0c;
    background-image: url(../image/bg1.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    
}
.area{
    max-width: 1200px;
    width: 90%;
    margin: auto;
    padding: 7vw 0 5.5vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2.5%;
}
.area li {
    width: 23.1%;
    margin-bottom: 1.5vw;
}

.area img {
    width: 100%;
    height: auto;
}

.area p {
    font-size: clamp(1.2rem, 1.2vw, 1.6rem);
    line-height: 1.2em;
    padding-top: 0.5em;
    color: #fff;
}


/* --------------------------
   プランとデザイン
---------------------------- */
.plan-design_wrap{
    background-image: url(../image/bg3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.plan-design{
    width: 90%;
    max-width: 1400px;
    margin: auto;
    padding: 5.5vw 0;
}
.en_title2{
    font-size: clamp(2.6rem, 2.6vw, 3.8rem);
    color: #fff;
    line-height: 1.1;
}
.ja_title{
    font-size: clamp(1.4rem, 1.25vw, 1.8rem);
    color: #fff;
}
.plan-design .text1 {
    font-size: clamp(2.4rem, 2.5vw, 3.6rem);
    color: #fff;
    padding: 1em 0;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.floor_plan{
    background-image: url(../image/floor_plan.jpg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: right top;
}

.text_box {
    width: 35%;
    color: #fff;
}
.text_box .text2 {
    font-size: clamp(1.6rem, 1.4vw, 2rem);
    font-weight: 200;
    line-height: 2;
    padding-bottom: 4vw;
}
.text_box .text5 {
    font-size: 3.2rem;
    line-height: 1.2;
    padding-bottom: 0.4em;
}

.text_box .text6 {
    font-size: clamp(1.6rem, 1.4vw, 2rem);
    padding-bottom: 2em;
}
.text_box .text3 {
    font-size: clamp(1.8rem, 1.38vw, 2rem);
    padding-bottom: 0.6em;
}
.text_box .text4 {
    font-size: clamp(1.6rem, 1.25vw, 1.8rem);
}

.plan_wrap{
    background-color: #0c0c0c;
}
.plan{
    max-width: 1200px;
    width: 90%;
    margin: auto;
    padding: 5.5vw 0 3vw;
}
.photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.photos li {
    width: 48%;
    margin-bottom: 2.3vw;
}

.photos li img {
    width: 100%;
    height: auto;
}

.photos li p {
    font-size: clamp(1.4rem, 1.2vw, 1.6rem);
    padding-top: 0.5em;
    line-height: 1.5;
    color: #fff;
}
.photos_b {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2.75%;
}
.photos_b li {
    width: 31.5%;
    margin-bottom: 2.3vw;
}
.photos_b li img {
    width: 100%;
    height: auto;
}
.photos_b li p {
    font-size: clamp(1.4rem, 1.2vw, 1.6rem);
    padding-top: 0.5em;
    line-height: 1.5;
    color: #fff;
}

/* --------------------------
   住宅機能
---------------------------- */
.point_wrap{
    background-image: url(../image/bg_performance.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.point {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 5.5vw 0;
}

.point_title {
    font-size: 26px;
    padding-bottom: 30px;
    font-weight: 500;
    line-height: 1.3;
}

.point_text {
    font-size: 18px;
    padding-bottom: 30px;
    line-height: 1.5;
    font-weight: 500;
}

.performance_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 20px;
}

.performance_item {
    width: 31%;
    padding-bottom: 30px;
}

.performance_item .title {
    min-height: 68px;
    background-color: #131D3D;
    display: grid;
    place-items: center;
    padding: 10px;
    margin-bottom: 10px;
}

.performance_item .title p {
    font-size: 2rem;
    color: #fff;
    line-height: 1.2;
}

.performance_item .text {
    letter-spacing: normal;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}

.architect_wrap {
    max-width: 660px;
    margin: auto;
    border: #131D3D 1px solid;
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.architect {
    max-width: 368px;
}

.architect_title {
    padding: 15px 20px;
    background-color: #131D3D;
    font-size: 2rem;
    color: #fff;
    letter-spacing: 0.1em;
}

.architect_text {
    letter-spacing: normal;
    text-align: left;
    padding-top: 10px;
    font-weight: 500;
}

.architect_img {
    width: 140px;
    margin: 0 20px;

}

.architect_img img {
    width: 100%;
    height: auto;
}
/* --------------------------
   物件概要
---------------------------- */
#overview {
    width: 90%;
    max-width: 1000px;
    margin: 100px auto 0 auto;
}
.en_itile3{
    text-align: center;
    color: #131d3d;
}
.ja_title2{
    text-align: center;
    color: #595959;
}
#overview dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
    font-size: 18px;
    line-height: 1.7em;
    color: #595959;
    border-bottom: 1px solid #B2B2B2;
    box-sizing: border-box;
    margin: 50px 0 10px 0;
    width: 100%;
}

#overview dt {
    width: 20%;
    max-width: 200px;
    box-sizing: border-box;
    background-color: #F4F4F4;
    padding: 1em;
    border-top: 1px solid #B2B2B2;
}

#overview dd {
    width: 80%;
    max-width: 800px;
    box-sizing: border-box;
    padding: 1em 1.5em 1em 1.5em;
    border-top: 1px solid #B2B2B2;
}

#overview .text {
    text-align: right;
}
/* --------------------------
   保証について
---------------------------- */
#quality {
    background-image: url("../image/qualty_p1.jpg");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: right bottom;
    padding: 7vw 0 6vw 0;
    margin: 100px auto 0 auto;
}

#quality dl {
    width: 75vw;
    margin: 0 auto;
}
#quality dl dt {
    width: 45%;
}
#quality dl dt h3 {
    font-weight: 500;
    font-size: clamp(1.4rem, 1.2vw, 2rem);
    line-height: 1em;
}
#quality dl dt h3 b {
    font-size: clamp(2.4rem, 2.2vw, 3.6rem);
    line-height: 1.5em;
    letter-spacing: 0.05em;
}
#quality dl dt h4 {
    font-size: clamp(22px, 2.6vw, 2.6vw);
    line-height: 1.5em;
    font-weight: 500;
    padding: 1em 0 1em 0;
}
#quality dl dt p {
    font-size: clamp(16px, 1.28vw, 24px);
}

#quality dl dt ul {
    margin: 3.5vw 0 3.5vw 0;
}

#quality dl dt ul li {
    text-align: center;
    background-color: #131d3d;
    outline: 1px solid rgb(99, 99, 99);
    outline-offset: -5px;
    font-size: clamp(16px, 1.4vw, 24px);
    line-height: 1.5em;
    font-family: shippori-mincho, sans-serif;
    font-weight: 600;
    font-style: normal;
    padding: 10px;
    color: #FFF;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#quality dl dd {
    width: 50%;
}
.view_bt {
    width: 20vw;
}
.view_bt a {
    background-color: #6c7584;
    color: #FFF;
    border-radius: 100vh;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: clamp(14px, 1.5vw, 1.5vw);
    line-height: 1.5em;
    padding: 0.2em 0 0.3em 0;
}
.view_bt a:hover {
    background-color: #131d3d;
}
/*-------------------------
 *ここから640px以下
 --------------------------*/
@media screen and (max-width:640px){
    .logo_wrap{
        padding: 6px 10px 10px;
    }
    .hero{
        aspect-ratio: 9 / 16;
    }
    .info{
        padding: 60px 0;
        margin-bottom: 40px;
    }
    .noge_logo{
        width: 35%;
        margin-bottom: 30px;
    }
    .info .text1{
        font-size: 1.8rem;
        letter-spacing: 0.05em;
    }
    .info_box{
        flex-direction: column;
    }
    .on_foot12{
        max-width: 240px;
        margin: auto;
    }
    .on_foot2{
        max-width: 349px;
        margin: auto;
    }
    .info_box{
        gap: 30px;
    }
    .info .text2{
        font-size: 1.8rem;
        letter-spacing: 0.05em;
    }
    /*-------------------------
    *ロケーション
    --------------------------*/
    .location_wrap{
        margin-bottom: 40px;
    }
    .location{
        padding: 40px 0;
    }
    .en_title{
        font-size: 5.2rem;
    }
    .location .text1{
        letter-spacing: normal;
        font-size: 2.4rem;
    }
    .location .text2{
        letter-spacing: 0.05em;
    }
    .area{
        gap: 6%;
        padding: 60px 0 40px;
    }
    .area li{
        width: 47%;
        margin-bottom: 16px;
    }
    .plan-design{
        padding: 60px 0;
    }
    .floor_plan{
        background-image: none;
    }
    .text_box{
        width: 100%;
    }
    .text_box .text5{
        padding: 1em 0 0.4em;
    }
    /*-------------------------
    *プラン・デザイン
    --------------------------*/
    .plan{
        padding: 0 0 60px;
    }
    .photos{
        flex-direction: column;
    }
    .photos li{
        width: 100%;
        max-width: 400px;
        margin: auto;
        margin-bottom: 16px;
    }
    .photos_b li{
        width: 48%;
        margin-bottom: 16px;
    }
    /*-------------------------
     *構造
     --------------------------*/
    .point{
        padding: 60px 0;
    }
    .point_text {
        text-align: left;
    }
    .performance_inner {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        margin: auto;
        margin-bottom: 20px;
        margin-top: 0;
    }
    .performance_item {
        width: 100%;
        padding-bottom: 20px;
    }
    .performance_item .title {
        padding: 16px 10px;
        min-height: auto;
    }
    .performance_item .text {
        font-size: 14px;
        line-height: 1.5;
    }
    .architect_wrap {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }
    .architect_text {
        font-size: 14px;
        line-height: 1.5;
    }
    .architect_img {
        margin: auto;
    }
    #overview {
        margin-top: 60px;
    }
    #overview dl {
        font-size: 1.6rem;
        line-height: 1.3em;
    }
    #overview dt {
        width: 100%;
        max-width: 100%;
        padding: 0.4em;
        border-top: 1px solid #B2B2B2;
    }
    #overview dd {
        width: 100%;
        max-width: 100%;
        padding: 0.5em 1em 1em 0.5em;
    }
    /*-------------------------
    *保証
    --------------------------*/
    #quality{
        background-image: none;
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 0;
    }
    #quality dl{
        width: 90%;
        max-width: 500px;
        margin: auto;
    }
    #quality dl dt{
        width: 100%;
    }
    #quality dl dt h3{
        padding-bottom: 20px;
    }
    #quality dl dt ul li {
        font-size: 18px;
        margin-bottom: 10px;
        padding: 14px;
    }
    #quality .view_bt {
        width: 40%;
        margin: auto;
        margin-top: 30px;
    }
    #quality .view_bt a {
        font-size: 16px;
    }
    
}