/**** 加盟店サイトのPC版共通CSS *****/
/** Mainタグ **/
#MAIN {
  display:block;
  padding-top: 164px;
}


/********* PC・タブレット版のヘッダー ********/
#header_container {
  border-top-style: solid;
  border-top-width:5px;
  background-color: white;
  position:fixed;
  z-index: 800;
  top:0;
  left:0;
  width: 100%;
}

/** ヘッダーセンター寄せ **/
#header {
  width: 96%;
  max-width:1000px;
  margin: 0 auto;
}

/**** ヘッダー上段 ****/
#header_upper_row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  width: 100%;
  margin: 8px 0 16px;
}
/**** ロゴ ****/
#header h1 {
  width: 279px;
  height: 65px;
  text-align:center;
  transition: height .2s;
}
#header h1 img {
  height: 100%;
}
/**** 上段右 **/
#header_upper_items {
  display:table;
  margin-left:auto;
  margin-bottom: 6px;
}
#header_upper_items>* {
  display:table-cell;
  vertical-align:middle;
}


/** 電話 **/
#header_tel {
  padding-right:11px;
}
#header_tel a {
  color: black;
  text-decoration:none;
  line-height:1;
  font-size: 22px;
}
#header_tel a>* {
  vertical-align:bottom;
  display:inline-block;
}
#header_tel a span {
  background-image:url(/items/images/header/icon_tel.png);
  background-size: 14px auto;
  background-position:left top;
  background-repeat:no-repeat;
  padding-left: 18px;
}
/** 黄色のボタン **/
#header .yellow_link a {
  display:table;
  margin-right:8px;
  width: 120px;
  line-height:1;
}
#header .yellow_link span {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  height: 30px;
  background-color:#fabe00;
  transition: background .3s;
}
#header .yellow_link a:hover span {
  background-color: #f9db85;
}
#header .yellow_link img {
  height: 16px;
}
/** SNSアイコン **/
#header .sns_icon {
  padding-right:9px;
  transition: opacity .3s;
}
#header .sns_icon:hover {
  opacity: .7;
}
#header .sns_icon img {
  height: 30px;
}
/**** スクロール時のメニューボタン ***/
#header_menu_open a{
  background-color: #000;
  display:none;
  width: 100px;
  transition: background .3s;
}
#header_menu_open a:hover {
  background-color: #646464;
}
#header_menu_open span {
  display:table-cell;
  vertical-align:middle;
  line-height:1;
  text-align:center;
  height:30px;
}
#header_menu_open img {
  height: 16px;
}

/*************** メインメニュー *****************/
#gnavi {
  margin-bottom: 25px;
}
#gnavi ul {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
#gnavi li {
  margin: 9px 0;
}
#gnavi a {
  text-decoration:none;
  display:block;
  text-align:center;
  position:relative;
  color:black;
  line-height:1;
  box-sizing:border-box;
  background-size: 43px auto;
  background-position: left center;
  background-repeat:no-repeat;
  padding: 8px 0 0 46px;
  height: 28px;
}
#GN_TOP a {
    background-image:url(../images/header/pc_gnavi/gn_top.png);
}
#GN_SERVICE a {
    background-image:url(../images/header/pc_gnavi/gn_service.png);
}
#GN_ESTATE a {
    background-image:url(../images/header/pc_gnavi/gn_estate.png);
}
#GN_WORKS a {
    background-image:url(../images/header/pc_gnavi/gn_works.png);
}
#GN_EVENT a {
    background-image:url(../images/header/pc_gnavi/gn_event.png);
}
#GN_COMPANY a {
    background-image:url(../images/header/pc_gnavi/gn_company.png);
}
#GN_SHOWROOM a {
    background-image:url(../images/header/pc_gnavi/gn_showroom.png);
}
#GN_COLUMN a {
    background-image:url(../images/header/pc_gnavi/gn_column.png);
}

#gnavi a .din {
    font-size:14px;
}

#gnavi a .gn_pop {
    position:absolute;
    left:50%;
    top:100%;
    background-color: #000;
    color:white;
    display:block;
    white-space:nowrap;
    padding: 4px 6px;
    opacity:0;
    -webkit-transform:translate(-50%,-10px) scaleY(0.8);
    transform:translate(-50%,-10px) scaleY(0.8);
    -webkit-transition: -webkit-transform .4s, opacity .3s;
    transition: transform .4s, opacity .3s;
}
#gnavi a .gn_pop:before {
    position:absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: -1px;
    background-color:#000;
    display:block;
    content:"";
    transform:rotate(45deg) translateX(-50%);
}
#gnavi a:hover .gn_pop {
  -webkit-transform:translate(-50%,0) scaleY(1);
  transform:translate(-50%,0) scaleY(1);
  opacity:1;
}



#gnavi a .gn_btn {
  height:27px;
}
#gnavi a .gn_popup {
  height: 26px;
  position:absolute;
  display:block;
  left:50%;
  top:100%;
  -webkit-transform:translate(-50%,-10px) scaleY(0.8);
  transform:translate(-50%,-10px) scaleY(0.8);
  opacity:0;
  -webkit-transition: -webkit-transform .4s, opacity .3s;
  transition: transform .4s, opacity .3s;
}
#gnavi a:hover .gn_popup {
  -webkit-transform:translate(-50%,0) scaleY(1);
  transform:translate(-50%,0) scaleY(1);
  opacity:1;
}

/********** スクロール時の表記 ***********/
/* ロゴ */
.scrolled #header h1 {
  width: 200px;
  height: 46px;
}
.scrolled #header_menu_open a {
  display:table;
}
.scrolled #gnavi {
  -webkit-transform:scaleY(0);
  transform:scaleY(0);
  height: 0px;
  display:none;
}



/********** media query ***********/
@media only screen and (max-width: 980px) {
  #header h1 {
    width: 200px;
    height: 46px;
  }
  #header_menu_open a {
    display:table;
  }
  #gnavi {
    display:none;
  }
}
@media only screen and (max-width: 860px) {
  #header_upper_row {
    display:block;
  }
  #header h1 {
    margin: 0 auto;
    width: 100%;
    height: 65px;
    text-align:center;
  }
  #header .yellow_link a {
    width: 95px;
  }
  #header_upper_items {
    margin: 0 auto;
  }
}
@media only screen and (max-width: 650px) {
  #header_upper_items {
        display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  #header_upper_items>* {
    display:inilne-block;
    margin-bottom: 6px;
  }
}


/************** メニューレイヤー *********************/
#menu_layer {
  position: fixed;
  background-color:#4d4d4d;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 8000;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  -webkit-transform: translateX(100%);
  -webkit-transition: -webkit-transform .4s;
  transform: translateX(100%);
  transition: transform .4s;
}
.popup_menu #menu_layer {
  -webkit-transform:translateX(0);
  transform:translateX(0);
}

/** 閉じるボタン **/
#menu_layer_closer {
  position:absolute;
  top: 44px;
  width:100%;
  left:0;
}
#menu_layer_closer>div{
  width: 96%;
  max-width:911px;
  margin:0 auto;
}
#menu_layer_closer a {
  display:block;
  position: relative;
  width:70px;
  height:70px;
  box-sizing:border-box;
  border: 1px solid #fff;
  margin-left:auto;
}
#menu_layer_closer a:before,
#menu_layer_closer a:after {
  content:"";
  display:block;
  transform-origin:center center;
  margin-top: -3px;
  position: absolute;
  top: 50%;
  left: 8px;
  width:53px;
  height: 3px;
  background-color: #fff;
}
#menu_layer_closer a:before {
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
#menu_layer_closer a:after {
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
#menu_layer_closer span {
  color: white;
  text-align:center;
  width: 100%;
  position: absolute;
  bottom: -21px;
  font-size:13px;
}
/**** ボタンメイン ****/
#menu_layer>nav {
  max-width:911px;
  width: 96%;
}
#menu_layer ul {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
#menu_layer ul li {
  width: 30%;
  display:table;
  margin: 16px 0;
}
#menu_layer ul a {
  display:table-cell;
  height: 200px;
  vertical-align:middle;
  text-align:center;
  border: 1px solid #fff;
  
}
#menu_layer figure img {
  height: 69px;
}
#menu_layer a {
  color:white;
  transition: background .3s;
  text-decoration:none;
}
#menu_layer a:hover {
  background-color: #000;
}
#menu_layer a .din{
    font-size:14px;
    letter-spacing:0.1em;
}
/*** media query ***/
@media only screen and (max-width: 700px) {
  #menu_layer ul li {
    width: 30%;
  }
  #menu_layer ul a {
    height: 180px;
  }
}
@media only screen and (max-height: 860px) {
  #menu_layer ul a {
    height: 150px;
  }
  #menu_layer ul img {
    height: 98px;
  }

}