@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Bold.woff') format('woff');
  font-weight: 700;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP/NotoSansJP-Regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP/NotoSansJP-Medium.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP/NotoSansJP-Bold.woff') format('woff');
  font-weight: 700;
}

html{
  font-size: 62.5%; /*62.5% = 16px;*/
}

body{
  /*font-family:  'Noto Sans JP', sans-serif;*/
  font-family: "A1 Gothic M", "Noto Sans JP", "Noto Sans CJK JP", "Noto Sans Japanese", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}


img {
width:100%;
max-width: 100%;
height: auto;
}

.ttl-01{
 position: absolute;
 bottom: 3%;
 left: 3%;
 z-index: 10;
 background: #181818;
 border-radius: 8px;
 padding: 24px 28px;
 font-size: 2.4rem;
}

.ttl-01 h2{
 font-size: 2.4rem;
 margin: 0;
}

.ttl-01 h2 span{
 display: block;
 font-size: 1.6rem;
}


.fill {
    fill: #181818; 
}

.nav svg {
    width: 23px;
    height: 23px;
 transform: rotate(180deg);
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.header {
display: flex;
color: #181818;
justify-content: space-between;	
align-items: center;
width: 94%;
z-index: 10;	
position: fixed;
top: 20px;
left: 150px; 
}

.header .p-header-logo {
    /*position: fixed;*/
    /*z-index: 500;*/
    width: 200px;
    height: 46px;
    padding: 10px 16px 0;
    background-color: #ffffff;
    border-radius: 8px;
}

.header div.nav {
background: #FFFFFF;
border: 1px solid #ECEAEA;
border-radius: 30px; 
padding: 13px 32px; 
font-size: 13px; 
}

.header div.nav a.g-btn {
color: #181818;
text-decoration: none;
margin-right: 1em;
}

.header div.nav a:last-child {
color: #BD2222;
text-decoration: none;
margin-left: 1em; 
}

.header h1 {
display: inline-block;
width: 410px;
margin: 0px 0 0px 24px;
}

/*　ハンバーガーボタン　*/
.header .hamburger a.btn_map img {
width: 50px;
}

.header .hamburger.active a.btn_map{
display: none;
}

.header .hamburger {
  display : block;
  position: fixed;
  z-index : 3;
right: 100px;
    bottom: 20px;
  /*width : 42px;
  height: 42px;*/
  /*cursor: pointer;*/
  /*text-align: center;*/
  /*background: rgba(2,104,177,0.9);*/
}
@media screen and  (max-width:830px) {

  .header .hamburger {
    display : block;
    position: fixed;
    z-index : 3;
  right: 80px;
      bottom: 75px;
    /*width : 42px;
    height: 42px;*/
    /*cursor: pointer;*/
    /*text-align: center;*/
    /*background: rgba(2,104,177,0.9);*/
  }

  } 
.header .hamburger span {
  display : block;
  position: absolute;
  /*width   : 30px;
  height  : 2px ;
  left    : 6px;*/
  /*background : #fff;*/
  /*-webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;*/
}
.header .hamburger span:nth-child(1) {
  top: 10px;
}
.header .hamburger span:nth-child(2) {
  top: 20px;
}
.header .hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.header .hamburger.active {
background: #fff; 
width : 42px;
height: 42px; 
/*top: 0;
right: 0; */
z-index : 501; 
    top: 40px;
    right: 40px; 
}

.header .hamburger.active span:nth-child(1) {
  top : 18px;
  left: 7px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
 width   : 30px;
  height  : 2px;
 overflow: hidden;
 background : #BD2222;
}

.header .hamburger.active span:nth-child(2),
.header .hamburger.active span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
 width   : 30px;
  height  : 2px;
  left: 7px;
 overflow: hidden;
 background : #BD2222;
}

.header div.globalMenuSp{
display: block;
} 

.header div.globalMenuSp {
  position: fixed;
  z-index : 500;
  top  : 0;
  right : 0;
  color: #000;
  background: #fff;
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 50%;
  height: 100%;
 padding: 40px;
     overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 50px;
}

/*div.scroll{
 overflow:scroll;
}*/

.header div.globalMenuSp ul {
 background: rgba(255,255,255,0.8);
 margin: 40px auto 40px;
 padding: 0;
 width: 100%;
 display: flex;
 flex-wrap: wrap; 
 gap: 16px 24px;
 /*justify-content: space-around;*/
}

.header div.globalMenuSp ul li {
 /*flex-grow: 1;*/
  list-style-type: none;
  padding: 0;
  width: 168px;
  border: 1px solid #ECEAEA;
  border-radius: 40px;
  font-weight: 700;
  height: 50px;
  line-height: 1.3rem;
}

.header div.globalMenuSp ul::before{
  content:"";
  display: block;
  width:23%;
  order:1;
}
.header div.globalMenuSp ul::after{
  content:"";
  display: block;
  width:23%;
}




.header div.globalMenuSp ul li a {
 font-size: 12px;
  display: flex;
  color: #181818;
  padding: 0.5em 0;
  text-decoration :none;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.header div.globalMenuSp ul li a span {
margin-left: 10px;
}

/* このクラスを、jQueryで付与・削除する */
.header div.globalMenuSp.active {
  transform: translateY(0%);
} 

.header div.globalMenuSp h3{
padding: 1em 0; 
background: #181818;
/*width: 120px;*/
 width: 180px;
color: #fff;
text-align: center;
margin: 0.5em auto 0.5em;
font-size: 62.5%
}

.header div.globalMenuSp p{
color: #A6A3A3;
font-size: 13px;
text-align: left;
padding: 10px 0 35px; 
}

.header .map_box{
border: 1px solid #ECEAEA;
padding: 40px;
margin: 3em auto 0;
}

.header .map_box .map_box_wrapper{
  display : block;
  position: relative;
  width : 100%;
}

.header .map_box .map_box_wrapper:before{
  content: '';
  display : block;
  padding-top : 46.80656934%;
}

.header .map_box .map_box_wrapper img.map{
  width : 100%;
  height : 100%;
  position: absolute;
  top : 0px;
  left : 0px;
  display : block;
}

.header .map_box .map_box_wrapper .mappoint{
  width : 3.722627737%;
  height : 7.953216374%;
  position: absolute;
  display : block;
  cursor: pointer;
}

.mappoint_blue{
  background-image: url(../images/map-icon-blue.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.mappoint_red{
  background-image: url(../images/map-icon-red-01.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* ショップスペース */
.mappoint_01{top : 32.5%;left : 31%;}
/* 和室 */
.mappoint_02{top : 16%;left : 38%;}
/* リビング01 */
.mappoint_03{top : 25%;left : 24.5%;}
/* リビング02 */
.mappoint_04{top : 49%;left : 16%;}
/* ダイニング */
.mappoint_05{top : 22%;left : 6%;}
/* カフェキッチン */
.mappoint_06{top : 61%;left : 7%;}
/* テラス */
.mappoint_07{top : 71%;left : 12%;}
/* ファミリースタディ */
.mappoint_08{top : 45%;left : 72.5%;}
/* 主寝室 */
.mappoint_09{top : 68.5%;left : 58%;}
/* ファミリーランドリー&クロゼット */
.mappoint_10{top : 38%;left : 55.7%;}
/* 洗面室 */
.mappoint_11{top : 18%;left : 58.0%;}




.v_screen{
  display: none;
}



@media screen and  (max-width:1502px) {
.header div.globalMenuSp ul {
 background: rgba(255,255,255,0.8);
 margin: 40px auto 40px;
 padding: 0;
 width: 100%;
 display: flex;
 flex-wrap: wrap; 
 gap: 16px 24px;
 justify-content: space-around;
}
} 



/*@media screen and  (max-width:1115px) {*/
@media screen and  (max-width:1311px) {
.header div.globalMenuSp ul {
 background: rgba(255,255,255,0.8);
 margin: 40px auto 40px;
 padding: 0;
 width: 100%;
 display: flex;
 flex-wrap: wrap; 
 gap: 16px 24px;
 justify-content: space-around;
}



.header div.globalMenuSp ul::before{
  content:none;
  display: block;
  width:0%;
  order:1;
}
.header div.globalMenuSp ul::after{
  content:none;
  display: block;
  width:0%;
} 
 
 

} 



/* スマホ横 */
@media  only screen and (min-width: 0px) and (max-width:829px) and (orientation: landscape){ 
.p-header-menu-trigger--pc {
    display: none!important;
}

.p-header-menu-trigger--sp {
    display: inline-block!important;
} 

header h1 .logo{
width: 70%;
margin-left: 0.5em;
}

header .btn_theater{
background: #b71c25;
border-radius: 14px;
text-align: center;
color: #fff;
padding: 0.3em 1.5em;
height: 1.5em;
text-decoration: none;
margin-top: 0em;
margin-right: 0.5em; 
overflow: hidden;
display: block;
font-size: 14px;
}

.header div.globalMenuSp {
    position: fixed;
    z-index: 500;
    top: 0;
    right: 0;
    color: #000;
    background: #fff;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
    height: 100%;
    padding: 40px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 50px;
} 

.header .hamburger.active {
    background: #fff;
    width: 42px;
    height: 42px;
    z-index: 501;
    top: 75px;
    right: 20px;
} 

/*.header .hamburger {
    display: block;
    position: fixed;
    z-index: 3;
    right: 76px;
    bottom: 14px;
}*/ 

.v_screen{
  display: none;
} 


.c-page-nav {
  display: none;
} 

}


/* スマホ縦 */
@media only screen and (min-width: 0px) and (max-width:899px) and (orientation: portrait){
.v_screen{
    display: block;
    position: fixed;
    z-index: 2000;
    top:0;
    height: 100%;
    background-color: #fff;
}

.v_screen div{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.v_screen img{width: 100vw;}
body#screen  {
background-image: none;
background-repeat: no-repeat;
background-size: 100vw;
background-color: #fff;
} 

}



/*三菱地所ホームナビゲーション調整*/

.p-header-logo {
    display: none;
}

.p-header-menu-pc {
  /*overflow: inherit;*/
}


.p-header-menu-pc{
  height: 100% !important;
  background-repeat: no-repeat !important;
}