@charset "UTF-8";
/* ------------------------
Design Studio Doors CSS home.css 2026.4.07
---------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap");

.home {
  overflow: hidden;
  padding-bottom: 20px;
}

.msn-h2 {
  margin-bottom : 80px;
}

.msn-h2__inner {
  /*font-family: "Sorts Mill Goudy", serif;*/
  font-weight: 400;
  font-style: normal;
}

.msn-h2--cap .msn-h2__title {
  letter-spacing : 0.2rem;
  font-family:'Arial', 'Noto Sans JP', sans-serif;
  font-weight: 600;
}

.msn-h2--cap .msn-h2__cap {
  margin-top : 10px;
}

@media screen and (max-width: 767px) {
  .msn-h2 {
    margin-bottom : 40px;
  }
}

/*fv*/
#sec-fv {
  margin-bottom : 100px;
}

@media screen and (max-width: 767px) {
  #sec-fv {
    margin-bottom : 40px;
  }
}

/*mv*/
.mv {
    display:block;
    position : relative;
    background : #000;
}

.mv__img img {
    width : 100%;
    opacity : 0;
}


.mv img {
  width : 100%;
}


.top-mv .cap,
.mv .cap {
  color : #000!important;
  bottom : -18px;
  right : 10px;
}

.mv {
  position: relative;
  width: 100%;
  /* height: 100vh; */
  overflow: hidden;
}

/* 画像（最背面） */
.mv__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 動画（画像の上） */
.mv__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 黒カバー（最初は真っ黒） */
.mv__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 2;
  opacity: 0;
}

/* SKIPボタン */
.mv__skip {
  display : none;
  
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
}

/* 少しだけUX改善 */
.mv__skip:hover {
  background: rgba(0,0,0,0.7);
}


.mv__1-txt {
  position :absolute;
  left : 0;
  bottom : 10%;
  width : 100%;
  color : #fff;
  z-index : 2;
  text-align : center;
  font-size: clamp(23px,3.4vw,36px);
}


/*merit*/

.merit {
  background : #f1f1e9;
  padding : 30px;
  position : relative;
}

.merit:before {
  content : "";
  display : block;
  height : 20px;
  width : 50%;
  background : #7eb6e3;
  position : absolute;
  left : 0;
  bottom : -20px;
}

.merit:after {
  content : "";
  display : block;
  height : 20px;
  width : 50%;
  background : #d9e591;
  position : absolute;
  right : 0;
  bottom : -20px;
}


.merit img {
  display : block;
  width: 1320px;
  margin : 0 auto;
}

@media screen and (max-width: 767px) {
  .merit {
    padding-top: 25px;
  }
}

.feature-read {
  margin: 0 auto 100px;
  width: 1440px;
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .feature-read {
    margin-bottom : 40px;
  }
}


.feature-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

/* ===== 1行目 ===== */
.feature-grid__b  { grid-column: 1 / 4; grid-row: 1; }      /* 1,2,3 */
.feature-grid__z1 { grid-column: 4;     grid-row: 1; }      /* 4 */
.feature-grid__d  { grid-column: 5 / 7; grid-row: 1 / 3; }  /* 5,6,11,12 */

/* ===== 2〜4行目 ===== */
.feature-grid__c  { grid-column: 1 / 3; grid-row: 2 / 4; }  /* 7,8,13,14 */

/* ★ 修正ポイント（A） */
.feature-grid__a  { grid-column: 3 / 5; grid-row: 2 / 5; }  /* 9,10,15,16,21,22 */

.feature-grid__e  { grid-column: 5 / 7; grid-row: 3; }      /* 17,18 */
.feature-grid__f1 { grid-column: 5 / 7; grid-row: 4; }      /* 23,24 */

.feature-grid__g  { grid-column: 1 / 3; grid-row: 4; }      /* 19,20 */

/* ===== 5〜6行目 ===== */
.feature-grid__z2 { grid-column: 1;     grid-row: 5; }      /* 25 */
.feature-grid__l  { grid-column: 2 / 4; grid-row: 5; }      /* 26,27 */

.feature-grid__f2 { grid-column: 4 / 6; grid-row: 5 / 7; }  /* 28,29,34,35 */
.feature-grid__m  { grid-column: 6;     grid-row: 5 / 7; }  /* 30,36 */

.feature-grid__h  { grid-column: 1;     grid-row: 6 / 8; }  /* 31,37 */
.feature-grid__k  { grid-column: 2 / 4; grid-row: 6; }      /* 32,33 */

/* ===== 7行目 ===== */
.feature-grid__z3 { grid-column: 2;     grid-row: 7; }      /* 38 */
.feature-grid__j  { grid-column: 3 / 5; grid-row: 7; }      /* 39,40 */
.feature-grid__i  { grid-column: 5 / 7; grid-row: 7; }      /* 41,42 */


/* 見た目確認 */
.feature-grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position : relative;
  z-index : 1;
}
.feature-grid > div:hover {
  z-index : 99;
}


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

  .feature-grid {
    display: flex;
    flex-direction: column;
  }

  

  /* A〜Mを縦並び（アルファベット順） */
  .feature-grid__a { order: 1; }
  .feature-grid__b { order: 2; }
  .feature-grid__c { order: 3; }
  .feature-grid__d { order: 4; }
  .feature-grid__e { order: 5; }
  .feature-grid__f1 { order: 6; }
  .feature-grid__f2 { order: 7; }
  .feature-grid__g { order: 8; }
  .feature-grid__h { order: 9; }
  .feature-grid__i { order: 10; }
  .feature-grid__j { order: 11; }
  .feature-grid__k { order: 12; }
  .feature-grid__l { order: 13; }
  .feature-grid__m { order: 14; }

  /* 縦1列にする */
  .feature-grid > * {
    display: block;
    width: 100%;
    margin-bottom : 10px;
  }

  /* Zは非表示 */
  .feature-grid > div.feature-grid__z1,
  .feature-grid > div.feature-grid__z2,
  .feature-grid > div.feature-grid__z3 {
    display: none;
  }

}

.feature-grid a picture {
  background : #19499d;
  display : block;
}

.feature-grid a.comingsoon:after {
  content : "COMING SOON";
  display : flex;
  font-family:'Arial', 'Noto Sans JP', sans-serif;
  
  justify-content:center;
  align-items : center;
  width : 100%;
  height : 100%;
  position : absolute;
  top : 0;
  left : 0;
  color : #fff;
  font-size : 20px;
  opacity : 0;
  transition : .5s;
  letter-spacing : 0.1em;
}

.feature-grid a,
.feature-grid a picture,
.feature-grid a picture img{
  transition : .5s;
}


.feature-grid a:hover picture {
  transform:scale(1.05);
}

.feature-grid a:hover picture img {
  opacity : 1;
}

.feature-grid a.comingsoon:hover picture {
  transform:scale(1);
}

.feature-grid a.comingsoon:hover picture img {
  opacity : 0.2;
}

.feature-grid a.comingsoon:hover:after {
  opacity : 1;
}



.feature-copy {
  text-align : center;
  font-size : 19px;
  letter-spacing : 0.3em;
  line-height : 2.4;
  margin-bottom : 100px;
}

.features {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto 0;
  padding-bottom: 100px;
  display :flex;
  justify-content : space-between;
  flex-wrap : wrap;
}

.features > div {
  width : 48%;
}

@media screen and (max-width: 767px) {
  .features {
    width : calc(100% - 30px);
    margin-bottom : 40px;
    padding-bottom: 10px;
  }
  .features > div {
    width : 100%;
  }
}

.features-sec {
  /* display : flex; */
  /* justify-content : space-between; */
  margin-bottom: 100px;
  /* flex-wrap : wrap; */
}

.sec-plan {
  margin-bottom : 0px;
}

@media screen and (max-width: 767px) {
  .features-sec {
    margin-bottom : 50px;
  }
  .feature-copy {
    margin-bottom: 50px;
    letter-spacing: 0.2em;
  }
}

.sec {
  display : block;
}

.sec__image {
  transition : 1s;
  /* filter: brightness(0.8); */
  /* width: calc(614 / 1000 * 100%); */
}

.sec__image img {
  width : 100%;
}

a:hover .sec__image {
  filter: brightness(1.2);
}

.sec-cap {
  position : absolute;
  top : 5px;
  right : 10px;
  text-align : right;
  font-size : 12px;
  color : #fff;
  z-index: 3;
  margin-bottom : 0;
}

@media screen and (max-width: 767px) {
  .sec__image {
    width : 100%;
  }
  .sec-cap {
    font-size : 10px;
  }
}

.sec__contents {
  position : relative;
  /* width : calc(306 / 906 * 100%); */
  margin-top: 30px;
}

@media screen and (min-width: 768px) {
  .sec__image {
    /* order : 2; */
  }
}

.sec__contents-inner {
  display : flex;
  /* flex-direction : column; */
  align-items: center;
  flex-wrap :wrap;
  height: 100%;
  /*text-align : center;*/
}

.sec__contents-txts {
    padding-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid #000;
    margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
  .sec__contents,
  .sec__contents-txts {
    width : 100%;
    max-width : 100%;
  }
  .sec__contents-txts {
    display : flex;
    justify-content: center;
    /* align-items: self-start; */
    flex-direction: column;
    /* padding-top: 40px; */
    text-align: center;
  }
  .sec__contents-inner {
    flex-direction : column;
    width : 100%;
    /* padding-bottom: 60px; */
  }
}

.sec__en-ttl {
  padding : 0;
  font-size: 26px;
  line-height : 1;
  font-family:'Arial', 'Noto Sans JP', sans-serif;
  font-weight: bold;
}

.sec__ttl {
  /* margin-bottom : 20px; */
  position : relative;
  font-size: 15px;
  font-weight: 100;
  text-align : left;
  line-height : 1.8;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 767px) {
  .sec__en-ttl {
    /* font-size: 13px; */
    text-align : center;
    /* padding-left: 5px; */
    margin-bottom: 20px;
  }
  .sec__ttl {
    font-size: 16px;
    margin-bottom: 10px;
    /* padding-left: 30px; */
    line-height: 1.6;
    text-align: center;
    /* padding-bottom: 10px; */
  }
}

.sec__contents-btn {
  display : flex;
  /* flex-direction:column; */
  justify-content: space-between;
  align-items : center;
  margin-top: auto;
  flex: 1;
}

@media screen and (max-width: 767px) {
  .sec__contents-btn {
    flex-direction : column;
  }
}

.sc-btn {
  width: 254px;
}

.sc-btn a {
  display: flex;
  justify-content : center;
  align-items : center;
  border : solid 1px #000;
  text-align : center;
  padding : 10px;
  transition : .5s;
  color : #000;
  border-radius : 5px;
  position : relative;
}

.sc-btn a:hover,
.sc-btn.comingsoon a {
  background : #666;
  color : #fff;
}

.sc-btn a:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  border-radius: 1px;
  position: absolute;
  right: 15px;
}

.sc-btn a:hover:after {
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
}

@media screen and (max-width: 767px) {
  .sc-btn {
    
  }
}

.sc-btn p {
  margin-bottom : 0;
}


/*info*/

@media screen and (min-width: 768px) {
  .msn-section__container--narrow {
    max-width : 1000px;
  }
  .msn-newsTopicsBlock {
    margin-bottom : 100px;
  }

}

@media screen and (max-width: 767px) {
  .msn-newsTopicsBlock__item {
    flex-wrap : wrap;
  }
  .msn-newsTopicsBlock__date,
  .msn-newsTopicsBlock__content {
    width : 100%;
  }
}

.msn-newsTopicsBlock__topicLabel {
  margin-left : 10px;
}
.msn-newsTopicsBlock__item:not(:last-child) {
  margin-bottom : 5px;
}
.crbox {
    background-color: #f2f2f2;
    border: none;
}

.msn-topInfo__copy {
  font-weight : normal;
  margin-bottom : 80px
}

.info__text1 {
  font-size : 27px;
}

.info__text1 sub,
.info__text1 sup {
  font-size : 10px;
  padding-left : 3px;
}

.info__text2 {
  font-size : 40px;
  margin : 10px 0 15px;
}

@media screen and (max-width: 767px) {
  .info__text1 {
    font-size : 22px;
  }
  
  .info__text2 {
    font-size : 30px;
    margin : 10px 0 15px;
  }
  .info__text-day {
    font-size : 20px;
  }
}

/*オーダーシステムバナー*/
.infoBnr__ordersystem {
    margin: 0 auto 100px;
    width: 886px;
    max-width : 80%;
}
@media screen and (max-width: 767px) {
    .infoBnr__ordersystem {
        margin: 0 auto 60px;
        width: calc(100% - 30px);
        max-width : 375px;
    }
}

/*間取り*/

.ohkarte-floor-plan__content {
    position: relative;
    overflow: hidden;
    /* padding-top: 40px;*/
    max-width: 960px;/*1280px*/
    /*max-width: 620px;*/
    margin: 40px auto 0;
}

.ohkarte-floor-plan__content .txt-con__ttl {
  color : #fff;
  text-align : center;
  margin-bottom : 40px;
}

.ohkarte-floor-plan__contentInner {
    /*overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;*/
    padding: 0 0 30px 0;
}

.ohkarte-floor-plan__contentInner::-webkit-scrollbar {
  display: none;
}

.ohkarte-floor-plan__items {
    display: flex;
    white-space: nowrap;
    font-size: 0;
    margin-left: 0;
    font-size: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.ohkarte-floor-plan__items .type-be {
  aspect-ratio : 306 / 496;
}

.ohkarte-floor-plan__item {
    display: block;
    box-sizing: border-box;
    width: calc(33.3333% - 12px);
    /* width: calc(50% - 12px); */
    border: 1px solid #DDDDDD;
    margin-right: 12px;
    margin-right: 18px;
    font-size: 1rem;
    vertical-align: top;
    white-space: normal;
    margin-bottom: 20px;
    height: 100%;
}

/*.ohkarte-floor-plan__item:last-child::after {
  position: absolute;
  top: 0;
  left: 100%;
  width: 15px;
  height: 1px;
  content: '';
}*/

@media screen and (max-width: 767px) {
  .ohkarte-floor-plan__items {
    flex-direction: column;
  }
  .ohkarte-floor-plan__item {
    margin : 0 auto 20px;
  }
}



.ohkarte-floor-planTheme {
    display: block;
    width: 100%;
    padding: 10px 10px 6px;
    box-sizing: border-box;
    /* background: #c2bec1; */
    background: #fff;
    color: #000;
    /*-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.2);
    box-shadow: 0 3px 5px rgba(0,0,0,.2);*/
}

.ohkarte-floor-planTheme__title {
    width: 100%;
    margin-bottom: 12px;
    /*font-size: 24px;*/
    /*font-family: HiraginoSans-W6;*/
    letter-spacing: 0;
    font-family: UD Reimin Bold JIS2004,Yu Mincho,YuMincho,Hiragino Mincho ProN,"HG明朝E",serif;
}

.ohkarte-floor-planTheme__title .lay {
  border-left: solid 1px #000;
  padding-left : 10px;
  margin-left : 10px;
}

.ohkarte-floor-planTheme__title:first-letter,
.ohkarte-floor-planTheme__title span {
    font-size: 30px;
}

.ohkarte-floor-planTheme__image {
    width: 100%;
    height: 300px;
    text-align: center;
    box-sizing: border-box;
    /*padding: 10px 25px;*/
    padding: 10px 10px;
    /* background-color: #fff; */
    background: #efefef;
    margin-bottom: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ohkarte-floor-planTheme__image img {
    width: 200px;
    /* height: 270px; */
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out;
}

.ohkarte-floor-planTheme__description {
    overflow: hidden;
    /*font-size: 13px;*/
    line-height: 18px;
    /*font-weight: 700;*/
}

dl:last-child.ohkarte-floor-planDetail__list,
.ohkarte-floor-planDetail__list {
    display:flex;
    width: 100%;
    flex-wrap:wrap;
    margin-top: 10px;
}

.ohkarte-floor-planDetail__item1 {
    width: 35%;
    box-sizing: border-box;
    padding: 0px 5px 0 0;
    margin-bottom: 10px;
    /*font-family: HiraginoSans-W6;*/
    font-size: 12px;
    /*font-weight: 900;*/
    /* color: #333333; */
    letter-spacing: 0;
}

.ohkarte-floor-planDetail__item2 {
    width: 65%;
    min-width: 100px;
    box-sizing: border-box;
    padding: 0 10px 0 3px;
    margin-bottom: 10px;
    /*font-family: HiraginoSans-W3;*/
    font-size: 12px;
    /*font-weight: 900;*/
    /* color: #333333; */
    letter-spacing: 0;
}

.ohkarte-floor-planDetail__item2 strong{
  font-size: 1.2em;
  font-weight:normal;
}

.ohkarte-msds-buttonlist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.ohkarte-msds-button {
    margin: 0 auto 40px;
    width: 280px;
}

@media screen and (max-width: 767px) {
  .ohkarte-msds-button {
    margin-bottom : 100px;
  }
}

.top-btn-box {
  font-family: "UD Reimin Light", serif;
  background: #fff;
  font-size: 12px;
  text-align: center;
  /*width: 100%;
  height: 35px;*/
  width: 300px;
  display: block;
  margin-top: 16px;
  border-radius: 3px;
}
.top-btn-box:hover {
    opacity: 0.5;
}

.top-btn-box a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  font-size: 1.1rem;
  padding: 10px 0;
  background: #000;
  font-size: 14px;
}

@media screen and (min-width: 766px) {
  
  .ohkarte-floor-plan__content a {
    transition: all 0.3s linear;
  }
  .ohkarte-floor-plan__content a:hover {
    opacity: 0.6;
  }
  
}
@media screen and (max-width: 767px) {
    .ohkarte-floor-plan__content {
        max-width: none;
        margin: inherit;
        margin-top: 0;
    }
    .ohkarte-floor-plan__contentInner {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /*padding: 0 0 30px 30px;*/
    }
    .ohkarte-floor-plan__items.left-item {
      justify-content: left;
      margin-left: 15px;
    }
    .ohkarte-floor-plan__item {
        width: 248px;
    }
    .ohkarte-floor-planTheme {
        width: 248px;
    }
    .ohkarte-floor-planTheme__title {
        font-size: 14px;
    }
    .ohkarte-floor-planTheme__title:first-letter{
        font-size: 30px;
    }
    .ohkarte-floor-planDetail__item1 {
        width: 40%;
        font-size: 12px;
        padding: 0 10px 0 0;
    }
    .ohkarte-floor-planDetail__item2 {
        width: 60%;
        font-size: 13px;
        padding: 0;
    }
    .ohkarte-msds-button {
        width: calc(100% - 50px);
    }
}

/*間取りここまで*/

.msn-pageTitle2__title--emph,
.msn-pageTitle2__title {
  font-family: 'Yu Mincho Pr6N R', Yu Mincho, YuMincho, Hiragino Mincho ProN, 'HG明朝E', serif; 
  font-feature-settings: "palt";
  background: inherit;
  color : #000;
  font-size: 24px;
  font-weight: normal;
}

#sec-compact{
  background : #fff;
  padding : 60px 0;
  margin-bottom : 0;
}

#sec-compact_interview{
  background : #fff;
  padding : 60px 0;
}

#sec-ekichika_no1{
  background : #fff;
  padding : 0 0 10px;
  margin-bottom : 0;
}

/* -------------------------
トップ・物件概要　販売予定時期
------------------------- */
.outline-preAd {
  margin: 0 auto;
  width: 96%;
}
.outline-preAd_header {
  display: inline-block;
  margin: 0 0 10px 0;
  padding: 3px 7px;
  border: 1px solid #787878;
  font-size: 15px;
  letter-spacing: 1;
  line-height: 30px;
}
.outline-preAd_txt1 {
  font-size: 12px;
  line-height: 1.5;
}
.outline-preAd_txt1 dt {
  float: left;
}
.outline-preAd_txt1 dd {
  margin-left: 1em;
}
dl:last-child {
  margin-top: 25px;
}
@media (max-width: 767px) {
  .outline-preAd_txt1 {
    font-size: 10px;
  }
}

/* course-btn */
.course-btn__area {
  width:980px;
  max-width: calc(100% - 30px);
  margin:80px auto 0;
  text-align : center;
}

.course-btn__ttl {
  font-size:24px;
  margin-bottom : 20px;
  line-height:1.6;
}

.course-btn__inner {
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
}

.course-btn__item {
  max-width:300px;
  /* margin : 10px; */
  display:block;
  opacity:1;
  transition:.5s;
}

.course-btn__item:hover {
  opacity:.8;
}

@media screen and (max-width: 767px) {
  .course-btn__area {
    margin-top:40px;
  }
  .course-btn__ttl {
    font-size :18px;
  }
  .course-btn__item {
    max-width:100%;
    margin:5px;
  }
}

.msn-cv-button__link.course-btn__item::after {
  content : none!important;
}