@charset "utf-8";
/* CSS Document */


/*
パンくずリストは、左端が揃うように調整
*/


/* =====　ガイドライン　====
■スマホにした時 ･･･90%で左右に余白(wrapper,tbwrapperに付与)
■遊明朝、遊ゴシック･･･font-weight: 500;は使用禁止(ﾌﾞﾗｳｻﾞ表示異なる為)

/*------------------------------
[制作ガイド]gnavpc
////////////////モバイルファーストで作成//////////////
min-width: 491px~
min-width: 770px~
min-width: 1025px~
それぞれのクラス名は下記「★使い分け★」参照



[セリフ]
  font-family:"Yu Mincho",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",serif;

[サンセリフ]
 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", sans-serif;
}

[おしゃれ英語]
font-family: emily-austin, Georgia, "Times New Roman", Times, "serif";

[カラーコード]
★緑(文字)#224c4b

グレー　#2F3131
青　　　#426E86
ﾍﾞｰｼﾞｭ　#F8F1E5
--------------------------------*/

body {
	/*font-family:'EB Garamond', serif;*/
  font-family:"Yu Mincho","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",serif;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  font: 13px/1.231;
  line-height: 1;
  color:#333;
}

@media screen and (max-width: 490px) {
  h3{
  /*font-family:'EB Garamond', serif;*/
	 font-family:"Yu Mincho","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",serif;
  }
}

.font-style01 {
  font-size: 16px;
  line-height: 1.8em;
  text-align: left;
  color: #333;
  margin: 20px 0;
  letter-spacing: 0;
}

.font-style02 {
  font-size: 16px;
  line-height: 1.8em;
  text-align: justify;
  color: #333;
  margin: 20px 0;
}

.kome {
  font-size: 12px;
  vertical-align: 15%;
}

.attention, .attention-center {
  font-size: 0.8em;
  line-height: 1.8;
  color: #555;
  text-align: left;
}

.attention-center {
  text-align: center;
}

.attentionLeft {
    margin-top: 15px;
	margin-bottom: 40px;
	font-size: 0.8em;
	line-height: 1.7em;
	color: #9A9A9A;
}

.nohover:hover {
opacity: 1!important;
}
/*------------------------------
SEO対策 h1 
	htmlの構造上、h1はページ上部に必ず入れること。
	cssで下部に移動させるため、.seoでページ全体を囲っている。
--------------------------------*/

.seo {
  display: flex;
  -ms-flex-direction: column;
  /*IE10*/
  -webkit-flex-direction: column;
  /*old webkit browser*/
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-bottom: 60px;
}

.seo * {
  min-height: 0%;
  /*IE11で変なpaddingが入らないように*/
}

h1.lead {
  padding: 10px 10px 20px;
  text-align: left;
  line-height: 1.8em;
  background: #222;
  font-size: 12px;
  order: 2;
  color: #FFF;
  display: none;
}

@media screen and (min-width: 770px) {
.seo { margin: 0;}
  h1.lead {
    text-align: center;
    padding: 10px;
  }
}


/*------------------------
PC,TB,SP　★使い分け★
--------------------------*/

.mb-50 {
  margin-bottom: 50px;
}

.mt-50 {
  margin-top: 50px;
}


/*------------------------
PC,TB,SP　★使い分け★
--------------------------*/

.tb-sp {  display: block !important;}
.sp-only {  display: block !important;}
.sp-only2 {  display: block !important;}
.pc-tb {  display: none !important;}
.pc-only {  display: none !important;}
.tb-only {  display: none !important;}
.br-fix{display: block !important;}
.wrapper {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  max-width: 780px;
  margin-top: 60px;
}

.wrapper1200 {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  max-width: 1200px;
}

.wrapper1400 {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  max-width: 1400px;
}


.graybg {
  background: #2f3131;
  width: 100%;
  color: #FFF;
  margin: 0;
  height: auto;
}

.graybg .topcontent-area {
  color: #FFF;
}

.bgfloor {
  background: url(../img/cmn/bg_floor.png);
}

.relative {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  box-shadow: 4px 6px 15px -2px #999999;
}

@media screen and (min-width:770px) {
  .tb-sp {    display: block !important;  }
  .sp-only {    display: none !important;  } 
  .sp-only2 {    display: block !important;  }
  .pc-tb {    display: block !important;  }
  .pc-only {    display: none !important;  }
  .tb-only {    direction: block !important;  }
  .br-fix{display: block !important;}
}

@media screen and (min-width:1025px) {
  .tb-sp {    display: none !important;  }
  .sp-only {    display: none !important;  }
	.sp-only2 {    display: none !important;  }
  .pc-tb {    display: block !important;  }
  .pc-only {    display: block !important;  }
  .tb-only {    display: none !important;  } 
  .br-fix{display: block !important;}
}

header {
  position: fixed;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  z-index: 98;
  top: 0;
  left: 0;
  box-shadow: 3px 3px 3px #CCC;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  height: 60px;
}

.gnavpc {
  display: none;
}

.hnavpc {
  display: none;
}

.logo {
  /* width: 300px; */
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  /*padding-top: 5px;*/
}

.logo img {
  width: auto;
  height: auto;
}
.logo a{
	margin: auto;
	text-align: center;
}
.pcHeadWrapper{
  padding-top: 5px;
  padding-bottom: 5px;
}

@media screen and (min-width: 490px) {
  /*.pcHeadWrapper{
    padding-top: 10px;
    padding-bottom: 10px;
  }*/
  .logo img {
    width: 80%;
    height: auto;
  }
}


/*------------------------
menu sp
--------------------------*/

.menu {
    height: 18px;
    position: absolute;
    right: 20px;
    top: 15px;
    width: 30px;
    z-index: 99;
	display: block;
}

.menu2 {
  height: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 39px;
  z-index: 99;
  /*99*/
  cursor: pointer;
  transform: translateY(-50%) translateX(-50%);
}

.menu__line {
  background: #000;
  display: block;
  height: 1px;
  position: absolute;
  transition: transform .3s;
  width: 100%;
}

.menu__line--top {
  margin-top: 10px;
}
.menu__line--center {
  top: 8px;
  margin-top: 10px;
}

.menu__line--bottom {
  top: 16px;
  margin-top: 10px;
}

.menu__line--top.active {
  top: 8px;
  background: #000;
  transform: rotate(45deg);
}

.menu__line--center.active {
  top: 8px;
  transform: rotate(135deg);
  background: #000;
}

.menu__line--bottom.active {
  top: 8px;
  transform: rotate(135deg);
  background: #000;
}

@media screen and (min-width: 491px) and (max-width: 1024px) {
  .menu__line--top.active, .menu__line--center.active, .menu__line--bottom.active {
    background: #9e9e9e;
  }
  .menu__line--top.active, .menu__line--center.active, .menu__line--bottom.active {
    background: #9e9e9e;
  }
}


@media screen and (min-width: 1025px) {
  .menu {
    height: 18px;
    position: absolute;
    left: 20px;
    top: 15px;
    width: 18px;
    z-index: 99;
    text-align: left;
  }
	  .menu2 {
    height: 18px;
    position: absolute;
    left: 20px;
    top: 15px;
    width: 18px;
    z-index: 99;
    text-align: left;
    display: none;
  }
  .menu.menu_appear {
    display: block;
  }
	  .menu2.menu_appear {
    display: block;
  }
  .menu__line--top.active, .menu__line--center.active, .menu__line--bottom.active {
    background: white;
  }
}



/*------------------------
gnav sp
--------------------------*/

.gnav {
  background:#FFF;
  display: none;
 /*display: block; これを削除*/
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 98;
  top: 0;
}

.gnav__wrap {
  align-items: center;
  height: 100%;
  position: absolute;
  width: 100%;
  padding-top: 52px;
  z-index: 2;
}

#menu-bar-area2 .menu-bar2 {
  background: #426E86;
  display: block;
}

.gnav__menu, .gnav__menu2 {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  margin: auto;
  justify-content: space-around;
  height: calc(70% - 81px);
}

.gnav__menu {
  height: /*50%*/42%;
  background: #FFF;
  color: #000;
}

.gnav__menu2 {
  /*height: 25.57%;*/
  height: /*15.57%*/20%;
  background: #FFF;
  color: #000;
}

.gnav__menu__item {
  width: 50%;
  /*width: 88%;*/
  border-bottom: 1px solid powderblue;
  color: #000;
  font-weight: bold;
  font-size: 3.5vw;
  text-decoration: none;
  transition: .5s;
  text-align: center;
  letter-spacing: 0.1em;
}

.gnav__menu__item:nth-child(n+9) {
  border-bottom: none;
}

/*.gnav__menu__item:nth-child(-n+1) {
  width:100%;
}
*/
.gnav__menu .gnav__menu__item:nth-child(-n+2) {
  border-top: 1px solid powderblue;
}

.gnav__menu__item {
  border-right: 1px solid powderblue;
}

.gnav__menu .gnav__menu__item:nth-child(2n) {
  border-right: none;
}

.gnav__menu2 .gnav__menu__item:nth-child(n+2) {
  border-right: none;
}

.gnav__menu__item a {
  width: 100%;
  height: 100%;
  padding: 4% 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gnav__menu__item a:hover{
  backgournd:#9e9e9e;

}
.gnav__menu2 .gnav__menu__item a {
  color: inherit;
}

.gnav__menu2 .gnav__menu__item {
  width:50%;
}

.gnav__menu2 .gnav__menu__item.reserve {
  width:100%;
  background: #436f98;
  text-align: inherit;
  color: #FFF;
  font-weight: normal;
}

.gnav__menu2 .gnav__menu__item.request {
  width:100%;
  background-color: #094067;
  color: #fff;
}

.gnav__menu2 .gnav__menu__item.limit {
  width:100%;
  letter-spacing: -0.01em;
  background: lightblue;
}

.gnav__menu2 .gnav__menu__item {
  height: 50%;
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); */
}

.gnav__menu2 .gnav__menu__item {
  font-size: 3.5vw;
}

.gnav__menu__item:hover {
  color: #666;
}

.comingsoon a, .new a {
  position: relative;
}

.comingsoon a:after, .new a:after {
  content: "coming soon";
  position: absolute;
  display: block;
  top: 27%;
  right: 0;
  left: 0;
  text-align: center;
  font-size: 0.7em;
  letter-spacing: 0;
}

.new a:after {
  content: "new";
  color: #d5a02e;
}

/*------------------
tablet
--------------------*/

@media screen and (min-width: 491px) {
  .comingsoon a:after,
  .new a:after {
    position: relative;
    display: block;
    top: 0;
    text-align: right;
    width: 100%;
    padding-top: 0;
    padding-bottom: 10px;
  }
  .gnav {
    height: 100%;
    width: 200px;
    right: 0;
    left: auto;
  }
  .gnav__wrap {
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
    border-left: 1px solid lightblue;
  }
  .gnav__menu, .gnav__menu2 {
    display: block;
    height: auto;
    margin: 0;
    background: inherit;
  }
  .gnav__menu {
    margin-top: 65px;
  }
  .gnav__menu .gnav__menu__item, .gnav__menu2 .gnav__menu__item {
    width: 100%;
    height: 50px;
    font-weight: bold;
    font: 12px/1.8 YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 700;
	border-right: none;
  }
  .gnav__menu2 .gnav__menu__item a, .gnav__menu .gnav__menu__item a {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    padding: 0;
    line-height: 0.8;
  }
  .gnav__menu2 .gnav__menu__item.limit br {
    display: none;
  }
  .gnav__menu2 .request, .gnav__menu2 .reserve {
    border: 1px solid #FFF;
    max-width: 100%;
    /*margin: auto;*/
    /*margin-bottom: 15px;*/
    /*height: 40px;*/
  }
  /*.gnav__menu2 .request a, .gnav__menu2 .reserve a {
    text-align: left;
    justify-content: center;
    padding-left: 15px;
  }*/
  .gnav__menu2 .request:hover, .gnav__menu2 .reserve:hover {
    background: #555;
  }
  .menu__line {
    background: #000;
  }
  /*白い部分*/
  .gnav__menu__item, .gnav__menu2 .gnav__menu__item {
    box-shadow: 0;
  }
}


/*------------------------------------
PC版ナビゲーション
--------------------------------------*/

@media screen and (min-width: 1025px) {
  header {
    /*position: fixed;*/
    background: rgba(255,255,255,1);
	height: 90px;
  }
  header .wrapper {
    height: 75px;
  }
  .pcHeadWrapper {
    width: 100%;
    max-width: 1024px;
    margin: auto;
    overflow: hidden;
    padding: 10px;
  }
  .logo {
    height: 100%;
    text-align: center;
    vertical-align: middle;
    /* float: left; */
  }
  .menu-bar-area {
    display: none;
  }
  .menu-bar {
    position: relative;
    display: none;
  }
  .fixed_menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0px;
    transition: all .5s;
    z-index: 100;
    background: #c8d627;
    background: rgb(184, 178, 136);
    /*background: linear-gradient(130deg, rgba(207, 176, 81, 1) 0%, rgba(207, 176, 81, 1) 90%);*/
    /*background:#A9A93C;*/
    /*background:#538283;*/
	background:#436f98;
    height: 55px;
    width: 200px;
    margin-top: 0px;
    cursor: pointer;
    color: #FFF;
  }
  .fixed_menu.active {
    background: #000;
  }
  .fixed_menu:after {
    content: "MENU";
    display: block;
    position: absolute;
    left: 50px;
    top: 17px;
    height: 15px;
  }
  .fixed_menu a.menu {
    width: 100%;
    height: 50px;
  }
	  .fixed_menu a.menu2 {
    width: 100%;
    height: 50px;
  }
  .menu__line {
    display: none;
    background: #FFF;
  }
  .fixed_menu .menu__line {
    display: block;
    max-width: 20px;
  }
  /*hnav,gnav PC版*/
  .hnavpc, .gnavpc {
    display: block;
  }
  .hnavpc a, .gnavpc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 100%;
  }
  .gnavpc {
    display: block;
    /*★追加*/
    height: 30px;
    /*background: #2F3131;*/
    clear: both;
    color: #000;
    /*color: #FFF;*/
    font-size: 13px;
    font-weight: bold;
  }
  .hnavpc a {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  .hnavpc {
    float: right;
    width: 600px;
    height: 100%;
    transition: 0.3s;
  }
  .hnavpc__menu {
    display: flex;
    justify-content: flex-end;
  }
  .hnavpc__menu li {
    transition: .1s;
	  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	  margin: 0 10px;
  }
  .hnavpc__menu li:not(.hnav__btn) a:after {
    content: ">";
    display: inline;
    padding-left: 5px;
  }

  .hnavpc__menu .request {
    width: 120px;
  }
  .hnavpc__menu li:hover {
    opacity: 0.5;
  }
  .hnavpc__menu .request, .hnavpc__menu .reserve {
    background: #A9A93C;
    background: #436f98;
    margin-left: 10px;
    font-size: 13px;
    width: 130px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: 0.05em;
    /*border-radius: 20px;*/
  }
  
   .hnavpc__menu .reserve {
   /*width:170px;*/
   letter-spacing: 0;
   }
  .hnavpc__menu .request a, .hnavpc__menu .reserve a {
    font-family: inherit;
    letter-spacing: 0.2em;
    font-size: 1em;
    font-weight: normal;
    border-radius: 15px;
  }
  .hnavpc__menu .request a:before, .hnavpc__menu .reserve a:before {
    content: "";
  }
  .hnavpc__menu .request {
    /*background: #697BB6;*/
    background: #094067;
    color: #FFF;
  }	
	
	
  .gnavpc__menu {
    width: 100%;
    max-width: 1024px;
    margin: auto;
    /*display: flex; ★消す*/
    justify-content: space-between;
    text-align: center;
    /*★追加*/
  }
  

  .gnavpc__menu li {
    /*width: 14.2%; ★消す*/
    transiton: .5s;
    position: relative;
    height: 35px;
    /*★追加*/
    display: inline-block;
    /*★追加*/
    vertical-align: middle;
  }
  .gnavpc__menu li a {
    display: block;
    /*position: relative;*/
    width: 100%;
    height: 100%;
    padding: 5px 25px 0;
    letter-spacing: .12em;
    -webkit-transition: .3s;
    transition: .3s;
    box-sizing: border-box;
  }
  /*hover時に出てくるアンダーバー*/
  /*.gnavpc__menu li::after {
  position: absolute;
  bottom: -0px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #426E86;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}*/
  .gnavpc__menu li:hover::after, #gNav li a.current::after {
    transform: scale(1, 1);
  }
  .gnavpc__menu li:hover, #gNav li a.current {
    color: #637788;
    /*#009EDE*/
  }
  .gnavpc__menu li.active {
    border-bottom: 3px solid #007D7D;
    color: #92AFA6;
  }

  .hnavpc__menu .comingsoon a:after, .gnav__menu .comingsoon a:after,  .hnavpc__menu .new a:after, .gnav__menu .new a:after {
    content: none;
  }
  
    .comingsoon a:after, .new a:after {
	text-align: center;
  }
}

.gnavpc__menu li.comingsoon a, .gnav__menu__item.comingsoon a, .hnavpc__menu li.comingsoon a {
  cursor: default;
  pointer-events: none;
  color: #777;
}

.gnavpc__menu li.comingsoon a:hover, .gnav__menu__item.comingsoon a:hover, .hnavpc__menu li.comingsoon:hover {
  opacity: inherit;
}


/*------------------------------------
スマホフッター
--------------------------------------*/
.sp-footer {
display: flex;
justify-content: space-between;
position: fixed;
bottom:0;
left:0;
right:0;
z-index:5000;
background: rgba(255,255,255,0.95);
/*padding-top: 5px;*/
font-size: 11px;
	font-weight: bold;
height: 70px;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"!important;
}
.sp-footer li {
width : calc(100% / 3) ;
border: 1px solid #9A9FAF;
text-align: center;
padding: 10px 5px 5px;
letter-spacing: 0;
}
.sp-footer li:not(last-child) {
border-right: none;
	}
.sp-footer li:last-child {
border-right: 1px solid #9A9FAF;
	background-color: #436f98;
	color: #FFF;
	}
/*.sp-footer li:not(last-child) {
width: 25%;
margin: 2px;
border: 1px solid #9A9FAF;
text-align: center;
padding: 5px;
letter-spacing: 0;
}
.sp-footer li:last-child {
width: 50%;
margin: 2px;
border: 1px solid #9A9FAF;
text-align: center;
padding: 5px;
letter-spacing: 0;
	background-color: #95BDD9;
	color: #FFF;
}*/

.sp-footer li.reserve {
border:1px solid #A4A43D;
color: #FFF;
}
.sp-footer span {
display: block;
}
.sp-footer img {
width: 33px;
margin: auto;
}
/*------------------------------------
コンテンツクリックボタン
--------------------------------------*/

.click {
  display: inline-block;
  position: relative;
  font-size: 17px;
  margin: 3% 0;
  overflow: hidden;
  cursor: pointer;
}

.click::after {
  content: "";
  position: absolute;
  display: block;
  right: 25px;
  top: 50%;
  margin-top: -7px;
  width: 9px;
  height: 14px;
  background: url(../img/cmn/arrow.fw.png) no-repeat right center;
  background-size: 100%;
  animation: click_arrow 1.5s linear infinite;
}

@keyframes click_arrow {
  0% {
    right: 25px
  }
  100% {
    right: 5px;
  }
}

.click span {
  display: block;
  padding: 15px 80px 15px 15px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #555;
  text-decoration: none;
  transition: all .5s;
  letter-spacing: 2px;
}

.click span:hover {
  background: #222;
  color: #fff;
  letter-spacing: 4px;
}

.click, #contents_wrap section:nth-child(2n) .inner .click {
  font-size: 11px;
}


/*------------------------------------
コンタクト
--------------------------------------*/

#contact h2 {
  padding-top: 25px;
  padding-bottom: 10px;
}

.contactArea {
  padding: 40px 0 40px;
  font-size: 2vw;
  border-top: 1px solid #BBB;
  width: 100%;
  text-align: center;
  margin: auto;
  background: #FFF;
  margin-bottom: 20px;
  margin-top: 0px;
}

.telArea {
  background: #f2f9cb;
  text-align: center;
  font-size: 1.5em;
  padding-top: 30px;
  padding-bottom: 50px;
  letter-spacing: 0;
}

.toiawase {
  font-size: 1.9em;
  letter-spacing: -0.02em;
  line-height: 1.6em;
}

.telArea h2 {
  font-size: 2.4em;
  margin-bottom: 15px;
  letter-spacing: 0.3em;
}

.tel {
  font-size: 4.5em;
  margin-top: 15px;
}

.teikyu {
  width: 350px;
  margin: auto;
  text-align: center;
}

.gclogo {
  width: 200px;
  margin: 25px auto;
}

.gccopy {
  font-size: 1.2em;
}

@media screen and (min-width: 491px) {
  .contactArea {
    font-size: 10px;
    margin-bottom: 0;
    margin-top: 0px;
	  padding: 15px 0 15px;
  }
}

#mainvisual {
  display: none;
}

#mainvisual-sp {
  display: block;
}


/*------------------------------------
ページトップ
--------------------------------------*/

div.tothetopfixed {
  position: fixed;
  right: 5px;
  bottom: 3px;
  z-index: 90;
  width: 40px;
  text-align: right;
  margin-right: auto;
  margin-left: auto;
  display: inline;
}

div.tothetopfixed img {
  widht: 48px;
  height: 40px;
}

@media screen and (min-width:491px) {
  div.tothetopfixed {
    right: 15px;
    bottom: 30px;
  }
}


/*---------------------------
各コンテントメインビジュアル　背景設定
-----------------------------*/
.bg_location {
  background-image: url("../img/location/kawasaki.jpg");
  background-position: bottom 60% right 0px;
}

.bg_plan {
  background-image: url(../img/top/mv-plan.jpg);
  background-position: top 10% right 0px;
}

.bg_mr {
  background-image: url(../img/top/mv-mr.jpg);
  background-position: bottom 60% right 0px;
}

.bg_access {
  background-image: url(../img/top/mv-access.jpg);
  background-position: bottom 60% right 0px;
}

.bg_concept {
  background-image: url("../img/concept/lot.png");
  background-position: bottom 60% right 0px;
}

.bg_design {
  background-image: url(../img/top/top_mv.jpg);
  background-position: bottom 60% right 0px;
}

.bg_modelroom {
  background-image: url(../img/top/007.jpg);
  background-position: bottom 60% right 0px;
}

.bg_quality {
  background-image: url(../img/top/mv-quality.jpg);
  background-position: bottom 60% right 0px;
}

.bg_plankodawari {
  background-image: url(../img/top/015.jpg);
  background-position: bottom 60% right 0px;
  width: 100%;
}

.bg_os {
  background-image: url(../img/top/mv-os.jpg);
  background-position: bottom 60% right 0px;
  width: 100%;
}

/*---------------------------
各コンテント共通　メインビジュアルｓ
-----------------------------*/
.content-mv{
  position: relative;
  margin-top: 60px;
}
/*.content-mv{
  z-index: 1;
  max-height: 500px;
}*/
.content-mv img{
  width: 100%;
    max-height: 500px;
    object-fit: cover;
	vertical-align: bottom;
}

.content-mv .content-caption {
  color: #fff;
  background: rgba(0,0,0,.4);
  position: absolute;
  font-size: 10px;
  letter-spacing: .05em;
  line-height: 1;
  text-align: right;
  right: 0;
  bottom: 0;
  padding: 5px 7px;
}

.content-mv .txt{
  opacity: 1;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 0 30px;
  transition: opacity 1s ease-in-out 1s;
}
.content-mv .txt img{
  width: auto;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
/*甲斐追加*/
/*.content-mv::before {
  width: 100%;
  height: 487px;
  content: "";
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}*/

.content-mv::after {
content: '';
position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* background-color: #040E3B; */
    opacity: 0.5;
    display:block;
}

.mvTxt {
	font-family: 'EB Garamond', serif;
	font-size: 4.2rem;
	line-height: 1em;
	color: #FFF;
}
.mvTxt span {
	display:block;
	font-size: 1.2rem;
	line-height: 1.2em;
}
.mvTxt span::before {
	content: "\A" ;
	white-space: pre ;
}

@media screen and (max-width: 769px) {
  /*.content-mv{
    height: 300px;
  }*/
  .content-mv img{
    height: 300px;
  }
  .content-mv .content-caption{
    font-size: 8px;
  }
	.mvTxt {
	font-size: 2.2rem;
	}
.mvTxt span {
	display:block;
	font-size: 1.2rem;
	line-height: 1.2em;
}
}
/* .content-header {
  width: 100%;
  height: 550px;
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  margin-top: 50px;
	animation: main 2s ease-in;
	-webkit-animation: main 2s ease-in;
	-mz-animation: main 2s ease-in;
	-mos-animation: main 2s ease-in;
	-o-animation: main 2s ease-in;
}

.content-header::before {
  width: 100%;
  height: 550px;
  content: "";
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
} */


.content-header-title p {
display: block;
letter-spacing: 0.2em;
font-size: 14px;
}

.content-header-title span.text-combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

.content-header-title h2:first-letter {
font-size: 1.5em;
}


@media screen and (max-width: 769px) {
  .content-header {
    height: 50vh;
  }

  .content-header::before {
    height: 50vh;
  }

.content-header-title {
font-size: 35px;
}

}

@media screen and (min-width: 1025px) {
  .content-header {
    margin-top: 130px;
  }
  .content-mv {
	margin-top: 90px;
  }
}

@media screen and (max-width: 490px) {
.content-header-title {
    font-size: 35px;
    line-height: 1.2em;
	text-align: center;
  }
.logo img {
	width: 75%;
  }

}

figure {
  position: relative;
}

/*--------------------
各ページ共通　見出しとメインの文章
content-area-title txt-cmn
----------------------*/

.content-area-title {
  color: #426E86;
  font-size: 1.5em;
  letter-spacing: 0.2em;
  position: relative;
  font-feature-settings: "palt";
  line-height: 1.8em;
  text-align: center;
}

/*.bg-01 {
  background: url(../img/cmn/bg-01.jpg)
}*/

.content-area-title:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  /*下線の上下位置調整*/
  display: inline-block;
  width: 0px;
  /*下線の幅*/
  height: 1px;
  /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  /*位置調整*/
  background-color: #426E86;
  /*下線の色*/
  animation: line 2s ease 0s 1 forwards;
}

@keyframes line {
  0% {
    width: 0px;
  }
  100% {
    width: 30px;
  }
}

@-webkit-keyframes line {
  0% {
    width: 0px;
  }
  100% {
    width: 30px;
  }
}

.txt-cmn {
  text-align: left;
  line-height: 2.0em;
  letter-spacing: 0;
  font-size: 14px;
}

.txt-cmn br {
  display: none;
}

@media screen and (min-width: 770px) {
  .content-area-title {
    font-size: 2.3em;
  }
  .txt-cmn {
    text-align: center;
  }
  .txt-cmn br {
    display: block;
  }
}


/*------------------------------------
下層ページ 定型ボックス
*box-areaはフォントのみ指定。親要素に付属。
　　box-title 相対サイズ指定
   box-text　相対サイズ指定
*box+数字でレイアウト
*box01は左右で文章+写真のとき
*box02は文章だけのとき
--------------------------------------*/

.box-area {
  font-size: 14px;
  line-height: 2em;
  letter-spacing: 0;
}

.box-area .box-title {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: bold;
  font-feature-settings: "pkna" 1;
}

.box-area .box-title span {
  display: block;
  opacity: 0.8;
  font-size: 0.7em;
  margin-top: -2px;
}

.box-area .box-text br {
  display: none;
}


/*box01 文章+写真のレイアウト*/

.box01 .box-title {
  margin-top: 40px;
}

.box01 .box-text {
  margin-bottom: 40px;
}

.box01 figure {
  margin-bottom: 20px;
}


/*box02 文章のみのレイアウト*/

.box02 {
  text-align: justify;
}

.box02 br {
  display: none;
}

@media screen and (min-width: 1025px) {
  .box01 {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }
  .box01 div {
    width: 44%;
    margin-right: 40px;
  }
  .box01 .text {
    padding-right: 25px;
    margin-top: 20px;
  }
  .box02-text {
    margin-top: 20px;
  }
  .box02 {
    text-align: left;
  }
  .box02 br {
    display: block;
  }
  .box-area br {
    display: block;
  }
}


/*--------------------
txt-main
----------------------*/

.box-area .txt-main {
  width: 90%;
  margin: 0px auto;
  text-align: justify;
  margin-bottom: 40px;
}

.box-area .txt-main br {
  display: none;
}

@media screen and (min-width: 770px) {
  .box-area .txt-main {
    max-width: 960px;
    margin: 50px auto;
    text-align: center;
    font-size: 1em;
    line-height: 3.0em;
  }
  .box-area .txt-main br {
    display: block;
  }
}


/*------------------------------------
下層ページ 定型ボックス②　ホワイト
--------------------------------------*/

.white-box-area {
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  max-width: 1200px;
  width: 90%;
  margin: auto;
}

.white-box-inner {
  padding: 20px 20px 40px;
  width: 100%;
  height: 100%;
  border: 1px solid #426E86;
  margin: 0;
}

@media screen and (min-width: 770px) {
  .white-box-inner {
    padding: 60px;
  }
  .box01 br {
    display: block;
  }
}


/*------------------------------------
下層ページ 定型ボックス③　ブラック
--------------------------------------*/

.black-box-area {
  background: #000;
  padding: 20px 20px 40px;
  color: #DDD;
  max-width: 1200px;
  margin: auto;
}

@media screen and (min-width: 770px) {
  .black-box-area {
    background: #000;
    padding: 60px;
    color: #DDD;
    max-width: 1200px;
    margin: auto;
  }
  .box01 br {
    display: block;
  }
}


/* ------------------------
pagenavigation
------------------------ */

.pagenavigation-area {
  border-top: 1px solid #AAA;
  border-bottom: 1px solid #AAA;
  height: 137px;
  font-size: 19px;
  letter-spacing: 0;
  position: static;
}

.pagenavigation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: auto;
  position: relative;
}

.pagenavigation span {
  display: block;
  font-size: 13px;
  color: #999;
  margin-top: 10px;
}

.pagenavigation .left, .pagenavigation .right {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: left;
}

.pagenavigation a {
  width: 100%;
  height: 100%;
}

.pagenavigation .btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 30%;
  align-items: center;
  height: 100%;
}

.pagenavigation .left .btn {
  flex-direction: row-reverse;
}

.pagenavigation li:hover {
  cursor: pointer;
}

.pagenavigation .left {
  position: relative;
}

.pagenavigation .right {
  position: relative;
}

.pagenavigation .left::after {
  content: "";
  background: #AAA;
  width: 1px;
  height: 70%;
  display: block;
  position: absolute;
  top: 20px;
  bottom: 0;
  right: 0;
}

.pagenavigation .right .pagenavigation .left {
  position: relative;
  display: inline-block;
  color: #333;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}

.pagenavigation .right:before, .pagenavigation .left:before {
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 4;
  z-index: -1;
  content: '';
  background: url(../img/cmn/pagenavbg.png);
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.5s;
  width: 95%;
  margin: auto;
}

.pagenavigation .left:before {
  transform-origin: left top;
}

.pagenavigation .right:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


.pagenavigation .left:hover::before {
  transform-origin: right top;
  transform: scale(1, 1);
}

.arrow-left, .arrow-right {
  transition: -webkit-transform 0s linear;
  transition: transform 1.3s ease;
  transition: transform 1.3s ease, -webkit-transform 1.3s ease;
}

.pagenavigation .left:hover .arrow-left {
  transition-delay: 0s;
  -webkit-transform: scale(1, 1) translateX(-70px);
  -ms-transform: scale(1, 1) translateX(-70px);
  transform: scale(1, 1) translateX(-70px);
}

.pagenavigation .right:hover .arrow-right {
  transition-delay: 0s;
  -webkit-transform: translateX(70px);
  -ms-transform: translateX(70px);
  transform: translateX(70px);
}

@media screen and (max-width: 769px) {
  .pagenavigation {
    display: block;
  }
  .pagenavigation .left::after {
    display: none;
  }
  .pagenavigation .left {
    display: none;
  }
}


/*---------------------------
ポイント
-----------------------------*/

#point-area .slick-slide {
  margin: 10px;
}

#point-area .title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}

#point-area {
  margin-top: 40px;
  margin-bottom: 30px;
}

#point-area li:hover {
  cursor: pointer;
  opacity: 0.8;
}

@media screen and (min-width: 770px) {
  #point-area {
    margin-bottom: 50px;
  }
}


/*---------------------------
attention
-----------------------------*/

.attention-area {
  font-size: 11px;
  line-height: 1.8em;
  color: #333333;
  border-top: 1px solid #888;
  margin-top: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", sans-serif;

}

@media screen and (min-width: 770px) {
  .attention-area {
    margin-top: 50px;
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

.attention-mv {
  font-size: 11px;
  line-height: 1.8em;
  color: #333333;
  width: 90%;
  margin: auto;
  margin-top: 10px;
  text-align: justify;
  font-feature-settings: "palt" 1;
  opacity: 0.8;
  letter-spacing: 0.05em;
}


/*---------------------------
バナー
-----------------------------*/

.banner-area {
  padding-top: 30px;
  padding-bottom: 30px;
}

.slider_footer li img {
  width: 90%;
  margin: auto;
}

.slider_footer li a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}


/*---------------------------
バナー
-----------------------------*/

.btn_kosodate {
  width: 90%;
  max-width: 600px;
  margin: auto;
  margin-top: 30px;
  transition: .3s;
  cursor: pointer;
}

.btn_kosodate:hover {
  opacity: 0.8;
}


/*------------------------------------
各ページタイトル画像部分
--------------------------------------*/

.title_area {
  position: relative;
  text-align: center;
  text-shadow: 0 0 5px #000;
}

.title_area figure {
  filter: brightness(70%);
}

#topmain figure {
  filter: none;
}

.title_area figure img {
  width: 100%;
}

.title_pc {
  display: block;
}

.title_sp {
  display: none;
}

.title_text {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 23px;
  color: #fff;
  line-height: 1.6;
}

.title_area h2 {
  font-size: 90px;
  line-height: 1;
  margin-bottom: 30px;
}

.title_text span {
  font-size: 20px;
  letter-spacing: 6px;
}

@media screen and (max-width:1024px) {
  .title_pc {
    display: none;
  }
  .title_sp {
    display: block;
  }
  .title_area {
    top: 50px;
  }
  h2 {
    top: 40%;
  }
}

@media screen and (max-width:490px) {
  .title_text {
    font-size: 12px;
  }
  .title_area h2 {
    font-size: 50px;
    margin-bottom: 10px;
  }
  .title_text span {
    font-size: 12px;
  }
}


/*--------------------
各ページ共通の見出し等
----------------------*/

.page {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  text-align: center;
  position: relative;
}

.caption {
  font-size: 12px;
  color: #333;
  line-height: 1.2;
  padding-top: 5px;
}

.imgcap{
	position: absolute;
    right: 10px;
    bottom: 5px;
    z-index: 1;
    color: rgba(255,255,255,.85);
    font-size: 0.6rem;
	letter-spacing: -.01rem;

}

.imgcaption {
	display: block;
	margin: auto;
	text-align: right;
	font-size: 0.9em;
}

figcaption {
  position: absolute;
  bottom: 11px;
  right: 3px;
  font-size: 0.7em;
  color: #fff;
}

figcaption.gray {
  color: #2F3131;
}

.figure-caption {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  padding: 5px 7px;
  color: #FFF;
  font-size: 12px;
  font-weight: normal;
  bottom: 0;
  left: 0;
  line-height: 1;
}
.figure-caption-right{
  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 10px;
  line-height: 1.8;
  color: #fff;
}

@media screen and (min-width: 770px) {
  figcaption {
    font-size: 0.7em;
  }
}

@media screen and (max-width:1020px) {
  .page {
    font-size: 16px;
    font-weight: normal;
    margin: 50px 0 0;
    text-align: left;
    position: relative;
  }
  br {
    display: none;
  }
  .br_fix {
    display: block;
  }
}


/*/////////////////////////
     各項目の見出し文字など
/////////////////////////*/

.mainlead {
  margin-bottom: 50px;
}

.white {
  color: #FFF;
}


/*----------------------
ボタン
-----------------------*/

.btn {
  /*background:#094067;*/
  color: #FFF;
  padding: 1px;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  max-width: 350px;
  transition: .5s;
}

.btn a {
  width: 100%;
  height: 100%;
  padding: 25px 0;
  border: 1px solid #FFF;
  display: block;
}

.btn:hover {
  opacity: 0.8;
  color: #FFF;
}


/*------------------------------------
.top-content-title
--------------------------------------*/

.top-content {
margin-top: 30px;
}
.top-content-title {
  /*color: #fff;*/
  font-size: 6vw;
  line-height: 1.3;
  text-align: center;
  position: relative;
  letter-spacing: 0em;
  margin-bottom: 30px;
	color:rgba(21,70,98,1.00);
}

.top-content-title h2 {
	color:rgba(21,70,98,1.00);
}

.top-content-title span {
	font-size: 0.6em;
	color: #1D328A;
	display: block;
	line-height: 1.2;
}



#toplink-point02 .photo {
  max-width: 1024px;
}

@media screen and (max-width:769px){
	
#walk-point03 .flex2{
	display: block;	
}
	#walk-point03 .flex2 div{
	width: 100%;
	}
}
@media screen and (max-width:490px){
	.top-content-title {
	font-size: 20px;
line-height: 1.8;
  /*color: #fff;*/
  
  text-align: center;
  position: relative;
  letter-spacing: 0em;
  margin-bottom: 30px;
	color:rgba(21,70,98,1.00);
}
}
/*本文*/
/*------------------------------------
.top-content-text-title
--------------------------------------*/
.top-content-text-title{
  margin: auto;
  text-align: center;
  width: 100%;
  padding: 15px 0px;
  border-top: 1px solid rgb(106, 106, 106); 
  border-bottom: 1px solid rgb(106, 106, 106);
}
/*------------------------------------
.top-content-text
--------------------------------------*/
.top-content-text {
  font-size: 14px;
  line-height: 1.875;
  color: #333;
  margin: 20px 0;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
}
.top-content-title span {
	display: block;
	line-height: 1.6em;
}
.top-content-text br {
  display: none;
}

.top-content-text p {
  margin-bottom: 40px;
}

@media screen and (min-width: 491px) {
  .top-content-title {
    font-size: 28px;
	line-height: 1.6em;
  }
}

@media screen and (min-width: 770px) {
  .top-content-title {
    font-size: 30px;
    margin-bottom: 50px;
  }
  .top-content-text {
    text-align: center;
    margin-bottom: 50px;
    line-height: 2.3;
	  font-size: 16px;
  }
  .top-content-text br {
    display: block;
  }
}

.photo {
  margin: auto;
  text-align: center;
  width: 100%;
  max-width: 700px;
}

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

/*#walk-point01 {
margin-top: 50px;
}*/
/* #walk-point02 {
margin-top: 50px;
  margin-bottom: 50px;
} */


/* ------------------------
pagenavigation
------------------------ */
.pagenavigation-area {
	border-top: 1px solid #AAA;
	border-bottom: 1px solid #AAA;
	height: 137px;
	font-size: 19px;
	letter-spacing: 0;
	position: static;
}

.pagenavigation {
	display: flex;
	justify-content: center;
	align-items:center;
	height: 100%;
	margin:auto;
	position: relative;
}

.pagenavigation span {
	display: block;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", sans-serif;
	font-size:13px;
	color:#999;
	margin-top:10px;
}

.pagenavigation .left,
.pagenavigation .right {
	height: 100%;
	width:100%;
	display: flex;
	align-items:center;
	justify-content: space-around;
	text-align : left;
}


.pagenavigation a {
	width:100%;
	height:100%;
}
.pagenavigation .navbtn {
	width:100%;
	display: flex;
	justify-content: space-around;
	padding: 0 30%;
	align-items: center;
	height:100%;

}
.pagenavigation .left .navbtn{
	flex-direction: row-reverse;
}

.pagenavigation li:hover {
	cursor: pointer;
}
.pagenavigation .left {
	position:relative;
}
.pagenavigation .right{
	position: relative;
}

.pagenavigation .left::after {
	content:"";
	background: #AAA;
	width: 1px;
	height: 70%;
	display: block;
	position:absolute;
	top:20px;
	bottom:0;
	right:0;
}

.pagenavigation .right
.pagenavigation .left{
  position: relative;
  display: inline-block;
  color: #333;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}

.pagenavigation .right:before,
.pagenavigation .left:before{
 position: absolute;
  top: 17px;
  bottom: 17px;
  left: 4;
  z-index: -1;
  content: '';
  background: url(../img/cmn/pagenavbg.fw.png);
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.5s;
	width:95%;
	margin: auto;

}

.pagenavigation .left:before{
	transform-origin: left top;
}
.pagenavigation .right:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.pagenavigation .left:hover::before {
	transform-origin: right top;
  	transform: scale(1, 1);
}

.arrow-left,
.arrow-right{
    transition: -webkit-transform 0s linear;
    transition: transform 1.3s ease;
    transition: transform 1.3s ease,
		-webkit-transform 1.3s ease;
}

.pagenavigation .left:hover .arrow-left {
	transition-delay: 0s; 
	-webkit-transform: scale(1, 1) translateX(-70px); 
	    -ms-transform: scale(1, 1) translateX(-70px); 
	        transform: scale(1, 1) translateX(-70px);
}

.pagenavigation .right:hover .arrow-right {
	transition-delay: 0s; 
	-webkit-transform: translateX(70px); 
	    -ms-transform: translateX(70px); 
	        transform: translateX(70px);
}

@media screen and (max-width: 769px){
	.pagenavigation {display: block;}
	
	.pagenavigation .left::after {
	display: none;
}
	
	.pagenavigation .left {display: none;}

}




.flash {
	position: relative;
	animation: main 2s ease-in;
	-webkit-animation: main 1s ease-in;
	-mz-animation: main 1s ease-in;
	-mos-animation: main 1s ease-in;
	-o-animation: main 1s ease-in;
}

@keyframes main {
	0% { opacity:0;}
	100% {opacity:1;}
}

@-webkit-keyframes main {
	0% { opacity:0;}
	100% {opacity:1;}
}


@-o-keyframes main {
	0% { opacity:0;}
	100% {opacity:1;}
}





/*--------------------
クオリティ・ロケーション内ナビゲーション
----------------------*/

/* .tab {
	padding-top: 60px;
	display:flex;
	justify-content:center;
	align-items:flex-start; 
	padding-bottom: 2.0em;
	letter-spacing: 0;
  margin: 0px auto 5px;
} */

/* .tab li{
	width: 20%;
	text-align: center;
	line-height: 1;
	margin: 0 2%;
	position: relative;
  box-shadow: 0 10px 8px #16166633;
} */


.tab li a:hover{
	background:linear-gradient(-74.27deg, rgba(84, 196, 151, .6) 0%, rgba(79, 195, 214, .6) 100%);
}

/* 
.tab li a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 3px 0;
	color: #000;
  border-top:solid 0.1em #161666;
  border-bottom:solid 0.1em #161666;
  line-height: 2;
} */

.tab li a:hover{
  color: #fff;
}

.tab li.current a{
	background: linear-gradient(-74.27deg, rgba(84, 196, 151, .8) 0%, rgba(79, 195, 214, .8) 100%);
  color: #fff;
/*	padding-bottom: 18px;*/
}

/* @media screen and (min-width: 770px){
.tab li.current:after, .tab li.current:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.tab li.current:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #436f98;
	border-width: 10px;
	margin-left: -10px;
}
.tab li.current:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #436f98;
	border-width: 10px;
	margin-left: -10px;
}

} */

.limit-area .tab li.current a{
	background: #9E8A63;
	padding-bottom: 10px;
	color:#FFF;
}
.title_haikei{
	background: #9E8A63;
	padding: 20px 0;
	text-align: center;
	margin-bottom: 20px;
	color:#FFF;
	line-height: 1.5em;
}

#location .tab {
margin-top: 100px;
}

@media screen and (max-width:769px){
#location .tab {
margin-top: 50px;
}

.tab {
margin-bottom:0px;
}
.tab li {
width: 48%;
}
.tab{
margin-bottom: 0;
}
/*.tab li a,
.tab li.current a{
	padding-bottom: 5px;
}*/
/* .tab li{
	margin-bottom: 5px;
	font-size: 14px;
} */


.title_haikei{
	padding: 10px 0;
	margin-bottom: 30px;
}


}



.fuwafuwa {
  -webkit-animation: fuwafuwa 1.5s infinite linear alternate;
  animation: fuwafuwa 1.5s infinite linear alternate;
}

@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, 0) rotate(-5deg);
  }
  50% {
    -webkit-transform: translate(0, -5px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, 0)rotate(5deg);
  }
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-5deg);
  }
  50% {
    transform: translate(0, -5px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0)rotate(5deg);
  }
}

.horizontal {
		display: block;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	-webkit-transform: translateY(-50%) translateX(-50%);
    	transform: translateY(-50%) translateX(-50%);
    	z-index: 301;
    	animation: horizontal 1s ease-in-out infinite alternate;
}


@keyframes horizontal {
0% {
    transform: translate(-30%,-50%);
}

100% {
    transform: translate(-70%,-50%);
}
}





/*--------------------------------------
modaaal-box
-----------------------------------------*/
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: #FFF;
  z-index: 1001;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: 200ms ease;
  overflow: auto;
  padding-top: 60px;
}

@media screen and (min-width:770px) {
  .modal {
    padding: 40px;
  }
}

.modal-close-btn {
  display: block;
  position: absolute;
  top: 60px;
  left: 0;
  background: url(../img/close.png) no-repeat center;
  width: 32px;
  height: 32px;
  padding: 32px;
  opacity: 0.8;
  cursor: pointer;
  transition: 0.3s ease;
  z-index: 10000;
  color: #FFF;
}

.modal-close-btn:hover {
  opacity: 1;
}

.modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media screen and (min-width:770px) {
.modal-close-btn {
top : 0;
}
}
/*--------------------------------------
modaaal-box内　次世代住宅ポイント　上部
-----------------------------------------*/

#zisedai-modal-area {
  width: 95%;
  max-width: 800px;
  margin: 20px auto 90px;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
}

#zisedai-modal-area .attentionLeft {
font-size: 13px;
color: #555;
text-align:left;
}

@media screen and (min-width: 491px) {
  #zisedai-modal-area {
    text-align: center;
  }
}

.bukken, .zisedai-title {
  color: #9E8A63;
  text-align: center;
  margin-bottom: 10px;
  font-size: 4.5vw;
  letter-spacing: 0;
}

.zisedai-title {
  font-size: 6vw;
  margin-bottom: 30px;
}

.zisedai-title-min {
  color: #9E8A63;
  font-size: 18px;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 18px;
  letter-spacing: 0.01;
}

.whats-area {
  border: 1px solid #999;
  padding: 25px 20px;
  margin-bottom: 30px;
  line-height: 1.6em;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.01;
}

.whats-title {
  font-size: 4.5vw;
  padding-bottom: 10px;
}

.attention-important {
  color: red;
  font-size: 13px;
  line-height: 1.5em;
}

@media screen and (min-width: 491px) {
  .bukken {
    font-size: 18px;
  }
  .zisedai-title {
    font-size: 28px;
  }
  .whats-title {
    font-size: 20px;
  }
  .attention-important {
    text-align: left;
  }
}

@media screen and (min-width: 770px) {
  .attention-important, .zisedai-title-min {
    text-align: center;
  }
  .zisedai-title-min {
    font-size: 20px;
  }
  .zisedai-title-min br {
    display: block;
    line-height: 1.6em;
  }
  .whats-area {
    padding: 30px 50px;
    line-height: 1.8em;
    font-size: 16px;
  }
}


/*--------------------------------------
modaaal-box内　次世代住宅ポイント ボックス
-----------------------------------------*/

.howmany-list {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.howmany-cross {
  width: 20px;
  margin: 0 auto 15px;
}

.howmany-arrow {
  width: 40px;
  margin: 0 auto 15px;
}

.howmany-point {
  background: #9E8A63;
  padding: 5px 10px;
  text-align: center;
  margin-top: 5px;
}

.howmany-point em {
  font-size: 1.5em;
  vertical-align: -2px;
}

.howmany-box {
  position: relative;
  border: 3px solid #DDD;
  border-radius: 10px;
  width: 100%;
  min-height: 130px;
  padding: 10px;
  margin: 0 auto 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  line-height: 1.4em;
  font-size: 18px;
  letter-spacing: 0;
}

.howmany-box span, .howmany-box br {
  display: block;
}

.howmany-item span {
  font-size: 0.8em;
}

.howmany-item span.long {
  line-height: 1.3;
  padding-top: 5px;
  letter-spacing: 0;
}

@media screen and (min-width: 770px) {
  #box01 .howmany-item {
    margin-top: 30px;
  }
  .howmany-list {
    flex-direction: row;
    align-items: center;
  }
  .howmany-box {
    width: 45%;
    height: 200px;
    justify-content: space-between;
  }
  .howmany-box#last {
    justify-content: space-around;
  }
  .howmany-item span.long {
    font-size: 0.7em;
  }
  .howmany-box {
    font-size: 22px;
  }
}



/*/*ハンバーガーメニュー*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn5{
  position: relative;/*ボタン内側の基点となるためrelativeを指定*/
  background:#666;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
}

/*ボタン内側*/
.openbtn5 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
  }

.openbtn5 span:nth-of-type(1),
.openbtn5 span:nth-of-type(3) {
    height: 2px;
  background: #fff;
    width: 62%;
    left: 10px;
 }

.openbtn5 span:nth-of-type(1) {
  top:13px; 
}

.openbtn5 span:nth-of-type(2) {
  top:19px;
  left:11px;
  font-size:0.6rem;
  text-transform: uppercase;
  color: #fff;
}

.openbtn5 span:nth-of-type(3) {
  top:36px;
}

/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
.openbtn5.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn5.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn5.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.grey_text {
	pointer-events: none;
	color: #B5B5B5;
}


#smpBtns {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 8000;
	width: 100%;
	height: 66px;
	border-top: 1px solid #fff;
}
#header .header-gnav {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
#header .header-gnav::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #bbe5f5;
}
#header .header-gnav > li {
	position: relative;
	width: 50%;
}
#header .header-gnav > li > a {
	display: block;
	height: 100%;
	padding: 18px 0;
	border-bottom: 1px solid #bbe5f5;
	font-size: 1.6rem;
}
#header .header-gnav > li:nth-child(odd) > a {
	padding-right: 10px
}
#header .header-gnav > li > a.new::before {
	content: 'NEW';
	display: block;
	position: absolute;
	top: 7px;
	left: 0;
	width: 36px;
	height: 11px;
	border-radius: 10px;
	background: #f14960;
	color: #fff;
	font-size: 1.0rem;
	line-height: 1;
	text-align: center;
}


.content-title {
    margin: auto;
    position: relative;
    top: 20%;
    padding-bottom: 50px;
    font-size: 27px;
    text-align: center;
    line-height: 1.8em;
}
.menu_area {
	position: relative;
}

/*----
------------------
フェードイン
-----------------------*/




/*--------------------------------------
各ページ文字大きさ等
-----------------------------------------*/
p{
	font-size:0.9rem ;
	font-weight: 500;
    line-height: 1.5;
	letter-spacing: .1rem;
	font-family:/*"YakuHanJP", "Noto Sans JP","游ゴシック"," YuGothic", "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN" , "sans-serif";*/
	font-family: "Shuei Mincho M", "TBゴシック M", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", serif;
}
.SectionSub{
	font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    display: block;
    margin-bottom: 20px;
    letter-spacing: .3rem;
	color: rgb(51,180,149);
    background: linear-gradient(-74.27deg, rgba(84, 196, 151, 1) 0%, rgba(79, 195, 214, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.description{
	font-weight: 1000;
    font-size: 0.7rem;
    margin-top: 15px;
    line-height: 0.9;
    letter-spacing: 0;
}
.description span{
	font-weight: 500;
    font-size: 0.7rem;
    display: block;
    margin-top: 5px;
    letter-spacing: 0;
}
.SectionTitle ,.ConceptTitle{
	opacity: 1;
  filter: blur(0px);
	font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 3px;
}
.CategoryTitle,.ColumnTitle{
  opacity: 1;
  filter: blur(0px);
  font-weight: 1000;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 3px;
}

.ConceptTitle{
  opacity: 1;
  filter: blur(0px);
  font-weight: 1000;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: .1rem;
}

.ConceptDesc{
  line-height: 2.0;
  margin-top: 30px;
  font-size: 0.9rem;
  /* font-weight: 800; */
  /* font-family: 'YakuHanMP','Noto Serif JP',serif; */
}

.ConceptWrap{
  text-align: center;
  max-width:910px ;
  margin: 0 auto;
  padding-top:30px ;
  padding-bottom: 30px;
}



/*--------------------------------------
余白調整
-----------------------------------------*/

figure {
  position: relative;
}
.container{
	padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.container .CategoryText{
	padding-left: 15px;
    padding-right: 15px;
}
.container::after{
	clear: both;
	display: table;
	content: "";
}
.bg_01{
	background: #fff;
}
.bg_02{
	background-image:url(../img/cmn/bg_intro.png);
	background-size: cover;
  background-attachment: fixed;
}
.bg_04{
background-image: url(../img/cmn/bg_intro02.png);
    background-size: cover;
    background-attachment: fixed;
}
.TitleWrap{
  padding-top: 30px;
  padding-bottom: 30px;
}
.TitleWrap figure {
  width: 70%;
  margin: 0 auto;
}
.TitleWrap figure img{
	object-fit: cover;
    object-position: top center;
    font-family: 'object-fit: cover;object-position: top center;';
    width: 100%;
    height: 100%;
	vertical-align: top;
}
.ContentsWrap{
  display: flex;
  width: 70%;
  margin: 0 auto;
}
.ContentsWrap figure{
  width: 50%;
  margin: 0 auto;
}
.ContentsWrap figure:first-child{
  margin-right: 5px;
}
.ContentsWrap figure:last-child{
  margin-left: 5px;
}
.CategoryWrap{
	padding-bottom: 150px;
}
.CategoryWrap .mainImg {
  margin-bottom: 80px;
}
.ConceptDesc ,.CategoryDesc ,.ColumnDesc{
	font-size: 0.9rem;
	line-height: 2.0;
	margin-top: 40px;
}

.container_img{
	margin-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	
}

@media screen and (min-width:911px){
  .TitleWrap{
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    align-items: center;
  }
  .TitleWrap{
    padding-bottom:10px ;
  }
  .listlazonaeWrap{
    padding-bottom: 100px;
  }
  .lazona_listWrap{
    padding-bottom: 10px;
  }
	.flex_inner_content:nth-child(odd){
		display: flex;
		flex-direction: row;
	}
	.flex_inner_content:nth-child(even){
		display: flex;
		flex-direction: row-reverse;
		margin-top: 50px;
	}
	.flex_inner_content .CategoryText{
		padding-top: 20px;
	}
	.flex_inner_content .CategoryText ,.flex_inner_content .container_img{
		padding-left: 15px;
		padding-right: 15px;
		width: 50%;
	}
}
@media screen and (min-width:1201px){
	.container{
		width: 1200px;
	}
}
@media screen and (min-width:911px){
  .ContentsWrap{
    display: none;
  }
}
@media screen and (max-width:1200px){
  .CategoryWrap{
		padding-bottom: 75px;
	}
}
@media screen and (max-width:910px){
	.container{
		padding-right: 4%;
		padding-left: 4%;
	}
	.container .CategoryText{
		width: 100%;
    	margin-bottom: 1.4em;
	}
	.nearContent .CategoryText{
		width: 100%;
    	margin-bottom: 20px;
	}
	.ConceptDesc ,.CategoryDesc ,.ColumnDesc{
		margin-top: 20px;
	}
}
@media screen and (max-width:769px){
  .CategoryWrap{
		padding-bottom: 30px;
	}
	.SectionTitle,.CategoryTitle,.ColumnTitle ,.ConceptTitle{
		font-size: 1.2rem;
		line-height: 1.6;
	}
  .ConceptDesc ,.CategoryDesc ,.ColumnDesc{
		font-size: 0.8rem;
    line-height: 1.8;
	}
  .description{
		margin-top: 5px;
	}
  .TitleWrap figure {
    width: 100%;
  }
  .ContentsWrap{
    width: 100%;
  }
  .container_img{
		padding-left: 10px;
		padding-right: 10px;
	}
  .container .CategoryText{
		padding: 0;
	}
}
@media screen and (max-width:490px){
  .SectionTitle,.CategoryTitle,.ColumnTitle{
    font-size: 1.15rem;
    letter-spacing: 1px;
  }
  .ConceptDesc{
    line-height: 1.5;
    margin-top: 30px;}
.ConceptWrap{
  text-align: left;
}
}

/*----------------------
ナビ
-----------------------*/
.contentsNav{
	display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-flow: row nowrap;
}
.contentsNav li{
	width: 33.3333%;
	height: 300px;
	position: relative;
}
.contentsNav li a{
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-flow: column;
z-index: 1;
}
.contentsNav li a::after{
content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 72px;
  height: 75px;
  background: url(../img/cmn/scroll.png);
  background-size: contain;
z-index: 1;
}
.contentsNav li:nth-child(1)::after{
	content: '';
  background-color: rgba(0,0,0,.1);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.contentsNav li:nth-child(2)::after{
	content: '';
  background-color: rgba(0,0,0,.1);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.contentsNav li:nth-child(3)::after{
	content: '';
  background-color: rgba(0,0,0,.1);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.contentsNav li:nth-child(4)::after{
	content: '';
  background-color: rgba(0,0,0,.1);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.contentsNav .SectionTitle{
	font-size: 1rem;
    letter-spacing: .2rem;
    line-height: 1.4;
    text-align: center;
    margin: 0 auto;
    color: #fff;
}

@media screen and (max-width:490px){
	.contentsNav li{
		height: 200px;
	}
	.SectionTitle ,.ConceptTitle ,.CategoryTitle{
		font-size: 1.15rem;
		line-height: 1.6;
    font-weight: 600;
    letter-spacing: 1px;
	}
	.contentsNav .SectionTitle{
		font-size: 0.8rem;
	}
	.SectionSub {
		font-size:0.9rem;
		margin-bottom: 10px;
		letter-spacing: .2rem;
	}
	.contentsNav li a::after{
		width: 42px;
		height: 44px;
	}
  .columImgList .listContent .description{
    line-height: 1.2;
  }
}

/*----
------------------
コラム
-----------------------*/

.column::before{
	display: table;
	content: "";
}
.columBoxTitle::before{
	content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: -3%;
    width: 100%;
    height: 2em;
    background-color: rgba(191, 231, 226, 1);
    z-index: -1;
}
.column{
	margin-top: 50px;
  max-width: 769px;
}
.column .inner{
	  padding: 0 0 30px;
    background-color: rgba(255, 255, 255, .6);
    border: solid rgba(191, 231, 226, .8);
    position: relative;
} 
.column .white-inner{
  background-color: rgba(191, 231, 226, .1);
}
.columBoxTitle{
	font-weight: 1000;
    font-size: 1.2rem;
    line-height: 1.6;
    display: block;
    margin-bottom: 20px;
    letter-spacing: .15rem;
    color: #fff;
    position: relative;
    z-index: 0;
}


.ColumnText{
	padding: 0 5% 0  ;
    margin-top: 0;
	margin-bottom: 20px;
    width: 100%;
}
.ColumnTitle{
  margin-bottom: 20px;
	/* display: block;
  font-size: 1.3rem;
  font-weight: 500; */
}
.column_inner figure ,.columImgList{
  padding: 0 5% 0;
}

@media screen and (max-width:490px){
  .ColumnTitle{
    font-weight: 600;
  }
}

@media screen and (max-width:910px){
	.column .inner{
		padding: 0 0 30px;
	}
	.ColumnText{
	margin-bottom: 1.4em;
    width: 100%;
	}

}
@media screen and (min-width:491px) and (max-width:910px){
  .column_inner figure,.columImgList{
    width: 80%;
    padding: 0;
    margin: 0 auto;
    }
}

@media screen and (min-width:770px){
  .columImgList .listContent{
    width: 50%;
  }

}

@media screen and (min-width:911px){
  .column_inner{
    display: flex;
    flex-direction: row;
    margin: 0 30px;
  }
  .column_inner .ColumnText{
    padding: 0 5% 0 0 ;
    width: 60%;
  }
  .column_inner figure{
  width: 40%;
  padding: 0;
  }
  .columBoxTitle::before{
    left: -3%;
    height: 2em;
  }
  .columBoxTitle {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 20px;
    letter-spacing: .15rem;
  }
}


/*===========
.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  /*padding-bottom: 10px;*/
  -webkit-overflow-scrolling: touch;
}
.scroll-box figure img {
  max-width: 100%;
  min-width: 600px;
  vertical-align: top;
}
 
/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: linear-gradient(-74.27deg, rgba(84, 196, 151, 1) 0%, rgba(79, 195, 214, 1) 100%);
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
/* .scroll-box::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(-74.27deg, rgba(84, 196, 151, 1) 0%, rgba(79, 195, 214, 1) 100%);
} */

.privategardencap{
	position: relative;
	left: 95px;
    bottom: 35px;
    z-index: 1;
    color: black;
    font-size: 0.8rem;
	letter-spacing: -.01rem;

}

@media screen and (max-width:490px) {
.privategarden {
	display:block;
	}

.privategardencap{
    bottom: 20px;
	left: 110px;

}
}

.imgcap2{
	position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    color: black;
    font-size: 0.8rem;
	letter-spacing: -.01rem;

}

.btn_gmap a{
	display: block;
	width: 100%; /*300px*/
	background-color: #32b2b4;
	color: #fff;
	text-align: center;
	font-size: 13px;
	font-size: clamp(12px, 1.3vw, 13px);
	padding: 0.8em 0;
	border: 1px solid #fff;
}
.btn_gmap a .big{
	display: block;
	font-size: 130%;
}

.btn_gmap a:hover{
	background-color: #007b7c;
	box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

h2.h2_sta{
	font-size: 18px;
	font-size: clamp(16px, 1.8vw, 18px);
	text-align: center;
	color: #fff;
	padding: 0.6em 0;
	margin-bottom: 0.7em;
	background-color: #0C5780;
}

.kanbaiTxt {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 28px;
    color: #fff;
    background-color: rgba(0, 25, 0, 0.5);
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    white-space: nowrap;
    line-height: 2.5em;
    padding: 5% 0;
    transform: translate(-50%, -50%);
    font-weight: 400;
}

.kanbaiTxt span{
  font-size: 1.5em;
  line-height: 2.5em;
}

@media screen and (max-width: 768px) {
    .kanbaiTxt {
        font-size: 10px;
        line-height: 1.5em;
}}


.title {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #231815;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 5% 0 2%;
}
@media screen and (max-width: 768px) {
    .title {
        font-size: 15px;
}}


/*lineupとfootterのメニューがかぶらないようにする*/
@media screen and (max-width: 768px) {
.lineup_area{
margin-bottom:10px;
}
}