@charset "utf-8";

/**
 *
 *  ページ用CSS
 *concept
 */

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page_mv */

.page_mv{
    background-image: url(../img/modelhouse/mv_pc.webp);
}
.page_content_ttl{
    top: 2%;
    right: 12%;
}



/* ページ共通テキスト */

.page_sec_content_txt .en{
    font-size: 140%;
    font-weight: 400;
}
.page_sec_content_txt dt{
    font-size: 3.2rem;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 3.2rem;
}
.page_sec_content_txt dd{
    font-size: 1.8rem;
    line-height: 2;
}
.page_sec_content_txt dd:nth-of-type(2){
    padding-top: 3.2rem;
}
.page_sec_content_txt dd .line{position: relative;}
.page_sec_content_txt dd .line::before{
    content: '';
    display: inline-flex;
    align-items: center;
    width: 40px; height: 1px;
    vertical-align: 22%;
    margin: 0 4px;
}
.lgold .page_sec_content_txt dd .line::before{
    background: var(--dark);
}
.gra_brown .page_sec_content_txt dd .line::before,
.dark .page_sec_content_txt dd .line::before{
    background: var(--light);
}


/* page_sec */

.page_sec{position: relative;}
.page_sec_content h3{
    text-align: center;
    font-size: 3.2rem;
    line-height: 1.6;
    font-weight: 400;
    padding-bottom: 5.6rem;
}
.page_sec_content h3 span{
    display: block;
    font-size: 1.6rem;
}
.sec01 .page_sec_content h3 span,
.sec03 .page_sec_content h3 span{color: var(--gold);}
.sec02 .page_sec_content h3 span{color: var(--lgold);}

.page_sec_content{padding: 8% 0;}
.lgold{
    background: url(../img/common/bg_b.png), var(--gra_gold);
}
.gra_brown{
    background: url(../img/common/bg.png), var(--gra_brown);
    color: var(--light);
}
.gra_beige{
    background:var(--gra_beige);
}
.beige{
    background:var(--beige);
}
.dark{
    background: var(--dark);
    color: var(--light);
}

.zumen_wrap{
  margin-top: 6.4rem;
}
.zumen_wrap dl{
  max-width: 38%;
  margin-left: auto;
  margin-top: -12%;
}
.zumen_wrap dt{
  margin-left: auto;
  width: fit-content;
  font-size: 2rem;
  color: var(--gold);
}
.zumen_wrap dt span{
  font-size: 150%;
}
.zumen_wrap dd{
  margin-left: auto;
  width: fit-content;
  font-size: 1.8rem;
}
.zumen_wrap dd:nth-of-type(3){
  font-size: 1.3rem;
}

/* slick
----------------------------------------*/

.location_slider{
  margin: 0 auto;
  max-width: 1300px;
}
.arrow_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 300px;
    margin: auto;
    position: relative;
}

.prev-arrow,
.next-arrow {
    display: block;
    margin: auto;
    text-align: center;
    width: 50px;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
}

.prev-arrow {background-image: url(../img/modelhouse/prev.svg);}
.next-arrow {background-image: url(../img/modelhouse/next.svg);}

/* .prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:6px;
    height:6px;
    border-right: 2px solid #054B41;
    border-top: 2px solid #054B41;
    top:0;
    bottom:0;
    left:0;
    right:2px;
    margin:auto;
    transform:rotate(45deg);
} */
.slick-num{
      text-align: center;
    top: 45px;
    position: relative;
    font-family: "EB Garamond", serif;
    font-style: normal;
    font-size: 2rem;
}
.now-count1{
  font-size: 150%;
  color: var(--lgold);
}

.slick .slick__img{
  margin: 0 10px;
}
@media screen and (max-width: 768px) {
  .slick .slick__img{
  margin: 0 4px;
}
}

small.model_cap{
    font-size: 1.2rem;
    line-height: 1.5;
    display: block;
    margin: auto;
    padding-top: 8px;
}

/* フジ住宅の家づくり */
.house_point{
    margin-top: 6rem;
}
.house_point_img{
    text-align: center;
    position: relative;
    max-width: 760px;
    margin: auto;
}
.house_point small{
    max-width: 760px;
}
.house_point_txt{
    font-size: 2.2rem;
    line-height: 1.5;
    margin-top: 6rem;
}

.house_system_wrap{
    margin-top: 8rem;
}
.house_system_wrap ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.house_system_wrap li{
    background: var(--light);
    padding: 3.2rem;
}
.house_system_wrap li:nth-of-type(1){
    flex-basis: 100%;
}
.house_system_wrap li:nth-of-type(2),
.house_system_wrap li:nth-of-type(3){flex-basis: 49.3%;}
.house_system_flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.house_system_flex .img{
    flex-basis: 27%;
}
.house_system_flex dl{
    flex-basis: 70%;
}
.house_system_wrap h5:not(.house_system_wrap li:first-child){
    text-align: center;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.4;
    padding-bottom: 1.6rem;
}
.house_system_wrap dt{
    font-size: 2.2rem;
}
.house_system_wrap li:nth-of-type(2) dt,
.house_system_wrap li:nth-of-type(3) dt{
    color: var(--gold);
    padding-bottom: .3rem;
    margin-top: 1.6rem;
    border-bottom: 1px solid var(--gold);
    font-size: 1.8rem;
}
.house_system_wrap dd{
    font-size: 1.8rem;
    text-align: justify;
    line-height: 2;
    padding-top: 1.6rem;
}

/* 住まいの性能 */
.spec_wrap{
    margin-top: 6rem;
}
.spec_wrap ul{
    display: flex;
    flex-direction: column;
    gap: 1.6rem 0;
}
.spec_wrap li{
    background: var(--light);
    padding: 3.2rem;
}
.spec_wrap dt{
    font-size: 2.2rem;
    color: var(--dark);
}
.spec_wrap dt span{
    font-style: italic;
    color: var(--light);
    font-size: 90%;
    background: var(--gold);
    margin-right: 1.6rem;
    padding: 6px 9px;
}
.spec_wrap dd{
    padding-top: 1.8rem;
    font-size: 1.6rem;
    text-align: justify;
    color: var(--dark);
}


/* アフターサポート */
.after_wrap{
    margin-top: 6rem;
}
.after_wrap ul{
    display: flex;
    justify-content: space-between;
    gap: 0 12px;
    flex-wrap: nowrap;
}
.after_wrap li{
    flex: 1;
    background: var(--light);
    padding: 3.2rem;
}
.after_wrap li .img{
    text-align: center;
    max-width: 90px;
    margin: auto;
}
.after_wrap li dl{
    margin-top: 1.6rem;
}
.after_wrap li dt{
    font-size: 2.0rem;
    text-align: center;
}
.after_wrap li dd{
    font-size: 1.6rem;
    margin-top: .8rem;
}


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


/* page_mv */    

.page_mv{
    background-image: url(../img/modelhouse/mv_sp.webp);
}
.page_content_ttl{
    top: 2%;
    right: 20px;
}


/* ページ共通テキスト */

.page_sec_content_txt dt{
    font-size: 2.2rem;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 3.2rem;
}
.page_sec_content_txt dd{
    font-size: 1.6rem;
    line-height: 2;
}
.page_intro .page_sec_content_txt dd{
    font-size: 1.8rem;
    line-height: 2;
}

/* page_sec */


.page_sec_content{padding: 16% 0;}


/* page_sec */

.page_sec_content h3{
    font-size: 2.4rem;
    padding-bottom: 3.2rem;
}
.page_sec_content h3 span{
    font-size: 1.3rem;
}


/* フロアプラン */

.zumen_wrap{
  margin-top: 3rem;
}
.zumen_wrap dl{
  max-width: 100%;
  margin: auto;
  margin-top: 1.6rem;
}
.zumen_wrap dt{
  margin: auto;
  width: auto;
  font-size: 1.6rem;
  color: var(--gold);
}
.zumen_wrap dt span{
  font-size: 150%;
}
.zumen_wrap dd{
  margin: auto;
  width: auto;
  font-size: 1.3rem;
}
.zumen_wrap dd:nth-of-type(3){
  font-size: 1.0rem;
}

small.model_cap{
    font-size: 1.1rem;
    letter-spacing: 0;
    line-height: 2;
    display: block;
    margin: auto;
    padding-top: 8px;
}

/* フジ住宅の家づくり */
.house_point{
    margin-top: 3rem;
}
.house_point_img{
    max-width: 100%;
}
.house_point small{
    max-width: 100%;
}
.house_point_txt{
    font-size: 1.8rem;
    margin-top: 3rem;
}

.house_system_wrap{
    margin-top: 4rem;
}
.house_system_wrap ul{
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px 0;
}
.house_system_wrap li{
    background: var(--light);
    padding: 3.2rem 2.4rem;
}

.house_system_wrap li:nth-of-type(2),
.house_system_wrap li:nth-of-type(3){flex-basis: 100%;}
.house_system_flex{
    display: block;
}
.house_system_wrap h5:not(.house_system_wrap li:first-child){
    font-size: 1.6rem;
    padding-bottom: 2.4rem;
}
.house_system_wrap li:nth-of-type(2) dt,
.house_system_wrap li:nth-of-type(3) dt{
    font-size: 1.6rem;
}
.house_system_wrap dd{
    font-size: 1.3rem;
}

/* 住まいの性能 */
.spec_wrap{
    margin-top: 3rem;
}
.spec_wrap li{
    background: var(--light);
    padding: 3.2rem 2.4rem;
}
.spec_wrap dt{
    font-size: 1.8rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 0 8px;
}
.spec_wrap dt span{
    margin-right: 0;
    font-size: 150%;
    padding: 3px 9px;
}
.spec_wrap dd{
    font-size: 1.3rem;
}


/* アフターサポート */
.after_wrap{
    margin-top: 3rem;
}
.after_wrap ul{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.after_wrap li{
    flex:none;
    flex-basis: 48%;
    padding: 2.4rem 1.6rem;
}
.after_wrap li .img{
    max-width: 50px;
}
.after_wrap li dl{
    margin-top: 1.6rem;
}
.after_wrap li dt{
    font-size: 1.5rem;
    text-align: left;
}
.after_wrap li dd{
    font-size: 1.3rem;
    margin-top: .8rem;
}

}