@charset "UTF-8";
/* MainVisual
======================================================================*/
.MainVisual {
  text-align: center;
  margin-bottom: 80px;
	position: relative;
}
@media screen and (max-width: 768px) {
.MainVisual {
  margin-bottom: 40px;
}
}

.MainVisual video {
	width: 100%;
    height: auto;
    position: relative;
}


.MainPhoto {
  position: relative;
  width: 100%;
}

.MainVisual p.ttl {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}

.MainVisual p.cap,
.MainPhoto p.cap {
  text-align: right;
  position: absolute;
  bottom: 5px;
  right: 10px;
}

@media screen and (max-width: 768px) {
.MainVisual p.ttl img{
	max-width: 80px;
}
}

@media screen and (max-width: 480px) {
.MainVisual p.ttl img{
	max-width: 60px;
}
}


/* introWrap
======================================================================*/
.introWrap {
	margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
.introWrap {
	margin-bottom: 40px
}
}

.introWrap h2{
	margin-bottom: 80px
}
@media screen and (max-width: 768px) {
.introWrap h2{
	margin-bottom: 40px
}
}
.introWrap h3{
	margin-bottom: 20px
}

.introWrap p.lead{
	letter-spacing: -0.05em;
}

.introWrap p.caption{
	font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
.introWrap p.caption{
	font-size: 1.2rem;
}
}

/* tab-wrap
===================================*/

.tab-wrap {
    width: 100%;
    position: relative;
    z-index: 2;
	overflow: hidden;
	margin-top: 80px;
}
@media screen and (max-width: 768px) {
.tab-wrap {
	margin-top: 40px;
}
}

.tab-wrap ul{
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/*background-color: #F7F7F7;*/
}

.tab-wrap li{
	width: 49%;
	max-width: 490px;
	margin: 0;
	text-align: center;
}

.tab-wrap li a span{
	font-size: 2.0rem;
	line-height: 1.4;
	color: #8C7D75;
}
@media screen and (max-width: 768px) {
.tab-wrap li a span{
	font-size: 1.4rem;
}
}
@media screen and (max-width: 480px) {
.tab-wrap li a span{
	font-size: 1.2rem;
}
}

/* tab
======================================================================*/

/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
}
.tab li a{
	width: 100%;
	height: 55px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border: 1px solid #8c7d75;
	background-color: #FFFFFF;
	transition: all 0.3s ease-out;
}
@media screen and (max-width: 768px) {
.tab li a{
}
}

.tab li a:hover {
	/*opacity: 0.6;*/
	background-color: #8C7D75;
}
.tab li a:hover span{
	/*opacity: 0.6;*/
	color: #FFFFFF;
}

/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background-color: #8C7D75;
}
.tab li.active a span{
	/*opacity: 0.6;*/
	color: #FFFFFF;
}

.tab li.active a:hover{
	background-color: #8C7D75;
}

/*エリアの表示非表示と形状*/
.area{
  /*display:none;*/ /* はじめは非表示 */
  padding:0;
}

/* 表示状態 */
.area.is-active{
  display:block;
  animation-name:displayAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



/* location
======================================================================*/
.location {
	margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.location {
	margin-bottom: 60px;
}
}

.location.last-child {
	margin-bottom: 0px;
}

.dwnArrow {
	text-align: center;
	margin: 40px auto;
	padding-right: 30px;
}
.dwnArrow.yoko {
	padding-right: 0px;
}

@media screen and (max-width: 768px) {
.dwnArrow {
	text-align: center;
	margin: 20px auto;
	padding-right: 10px;
}
.dwnArrow img{
	max-width: 30px;
}
}

.location h2{
	margin-bottom: 40px
}
@media screen and (max-width: 768px) {
.location h2{
	margin-bottom: 20px
}
}

.location h2.sht{
	margin-bottom: 10px
}
@media screen and (max-width: 768px) {
.location h2.sht{
	margin-bottom: 5px
}
}

.location p.lead{
	margin-bottom: 40px
}
@media screen and (max-width: 768px) {
.location p.lead{
	margin-bottom: 20px
}
}

.location p.lead.sht{
	letter-spacing: -0.05em;
}

.location p.lead.mb10{
	margin-bottom: 10px
}


.posi-img-1,
.posi-img-3{
	position: relative;
	text-align: center;
	margin-top: 20px;
}
@media screen and (max-width: 768px) {
.posi-img-3{
	margin-top: 0px;
}
}

.mid-col{
	position: relative;
	margin-top: 80px;
}
@media screen and (max-width: 768px) {
.mid-col{
	margin-top: 40px;
}
}

.mid-col h4{
	margin-bottom: 20px;
}

.mid-col p.lead{
	max-width: 440px;
}
@media screen and (max-width: 768px) {
.mid-col p.lead{
	max-width: 100%;
}
}

.posi-img-2{
	position: absolute;
	right: 20px;
	top: -80px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
.posi-img-2{
	position: relative;
	right: 0px;
	top: 0px;
	text-align: center;
}
.posi-img-2 img{
	max-width: 100%;
}
}

.img-obi{
	width: 100%;
	position: relative;
	margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
.img-obi{
	margin-bottom: 40px;
}
}

.img-obi h2{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	color: #FFFFFF;
}
@media screen and (max-width: 768px) {
.img-obi h2{
	width: 100%;
	font-size: 2.0rem;
}
}

.img-obi.map{
	margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
.img-obi.map{
	margin-bottom: 20px;
}
}

.img-obi p.cap{
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 3;
}

.btm-box{
	margin-top: 60px;
	margin-bottom: 120px;
	padding: 30px;
	border: 10px solid #ECEAE9;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.btm-box{
	margin-top: 0px;
	margin-bottom: 60px;
	padding: 20px;
	border: 6px solid #ECEAE9;
}
}

.btm-box h4{
	text-align: center!important;
}


.grm-box{
	margin-top: 60px;
	margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.grm-box{
	margin-top: 0px;
	margin-bottom: 60px;
}
}

.grm-box ul.grm{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
}

.grm-box ul.grm li{
	width: 47.8%;
	max-width: 100%;
	margin-bottom: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.grm-box ul.grm li.odd{
	width: 52.2%;
	padding-right: 1px; 
}

@media screen and (max-width: 768px) {
.grm-box ul.grm li{
	width: 100%;
}
.grm-box ul.grm li.odd{
	width: 100%;
	padding-right: 0; 
}
}

.grm-box p.caption{
	font-size: 1.2rem;
	line-height: 1.3;
	margin-top: 20px;
}

.lifeinfo{
	max-width: 664px;
	margin: 0 auto 80px;
}
@media screen and (max-width: 768px) {
.lifeinfo{
	margin: 0 auto 40px;
}
}

/***** inside *****/

.location .inside {
	position: relative;
    max-width: 1060px;
    padding: 0 30px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.location .inside {
    padding: 0 20px;
}
}

.location .inside.hd-line {
	border-top: 1px solid #8e7e76;
	padding-top: 80px;
}
@media screen and (max-width: 768px) {
.location .inside.hd-line {
	padding-top: 40px;
}
}

.location .inside .phboxL {
    position: relative;
    width: 100%;
    max-width: 472px;
    -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*padding: 0 25px;*/
}

.location ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 35px;
}
@media screen and (max-width: 768px) {
.location ul {
    margin-top: 20px;
}
}

.location ul.rev {
    flex-direction:row-reverse; 
}

.location ul li {
	position: relative;
    width: 48%;
    max-width: 472px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.location ul li {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 20px;
}
.location ul li:last-child{
    margin-bottom: 0;
}
}


.location ul li h4.line{
	font-size: 2.2rem!important;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.location ul li h4.line{
	font-size: 1.8rem!important;
}
}

.location ul li h4.line.sht{
	letter-spacing: -0.05em;
}

.location ul li.sml {
    width: 41%;
    max-width: 410px;
}

.location ul li.mid {
    width: 40%;
    max-width: 394px;
}

.location ul li.lrg {
    width: 56%;
    max-width: 566px;
}

.location ul li.flx {
    display: flex;
    flex-wrap: wrap;
}


@media screen and (max-width: 768px) {
.location ul li.sml {
    width: 100%;
	margin: 0 auto 20px;
}

.location ul li.mid {
    width: 100%;
	margin: 0 auto 20px;
}

.location ul li.lrg {
    width: 100%;
	margin: 0 auto 20px;
}
}
	
/* lifestyle */

.location .ttlbox{
	text-align: center;
	padding: 40px 0;
}
@media screen and (max-width: 768px) {
.location .ttlbox{
	padding: 20px 0;
}
.location .ttlbox img{
	max-width: 140px;
}
}

.location .inside.lifestyle{
	max-width: 1400px;
}

.location .inside.lifestyle.rev{
	flex-direction:row-reverse; 
}

.location ul li.mid-2 {
    width: 32%;
    max-width: 446px;
}

.location ul li.lrg-2 {
    width: 65%;
    max-width: 913px;
}


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

.location ul li.mid-2 {
    width: 100%;
	margin: 0 auto 20px;
}

.location ul li.lrg-2 {
    width: 100%;
	margin: 0 auto 20px;
}
}

.lrg-2-in{
	position: relative;
	padding-left: 200px;
	margin-top: 30px;
}
@media screen and (max-width: 768px) {
.lrg-2-in{
	padding-left: 0px;
	margin-top: 10px;
}
}

.lrg-2-in.rev{
	padding-right: 200px;
	padding-left: 0;
}
@media screen and (max-width: 768px) {
.lrg-2-in.rev{
	padding-right: 0px;
	padding-left: 0px;
}
}

.lrg-2-in p.cap {
    position: absolute;
    right: 5px;
	top: 5px;
    bottom: auto;
	z-index: 3;
}
@media screen and (max-width: 768px) {
.lrg-2-in p.cap {
    position: relative!important;
	text-align: right;
	right: 0;
	top: 0;
	margin-bottom: 10px;
}
}

.ph-2col{
	display: flex;
	flex-wrap: wrap;
}
.ph-2col div{
	width: 50%;
	position: relative;
}

.location .photo {
    position: relative;
}

.location .photo-left {
    position: relative;
	margin-left: -200px;
}
@media screen and (max-width: 768px) {
.location .photo-left {
	margin-left: 0;
}
}

.location .photo-right {
    position: relative;
	margin-right: -200px;
}
@media screen and (max-width: 768px) {
.location .photo-right {
	margin-right: 0;
}
}

.location ul li .btm {
    margin-top: auto;
	padding-top: 40px;
}

/*col3-wrap*/

.location ul.col3-wrap {
    margin-top: 20px;
}

.location ul.col3-wrap li {
    width: 32%;
    max-width: 306px;
}
@media screen and (max-width: 768px) {
.location ul.col3-wrap li {
    width: 100%;
	margin: 0 auto;
}
}

.location ul.col3-wrap li div{
    position: relative;
}

/*.location .inside h4 {
    text-align: left;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #D4CECB;
}*/

.location .inside p.caption {
  font-size: 1.4rem;
  text-align: justify;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
    .location .inside p.caption {
		font-size: 1.2rem;
		margin-bottom: 10px;
}
}

.location .inside p.annotation.t-aC {
	text-align: center;
    margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
.location .inside p.annotation.t-aC {
	margin-bottom: 20px
}
}



.location .inside p.caption-right {
  text-align: right;
	 font-size: 1.4rem;
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
.location .inside p.caption-right {
		font-size: 1.2rem;
		margin-bottom: 10px;
}
}

.location .inside p.caption span {
  font-size: 1.2rem;
  display: block;
}

.location .inside p.caption-btm{
    font-size: 1.2rem;
    text-align: justify;
    line-height: 1.6;
	margin-top: 80px;
}
@media screen and (max-width: 768px) {
.location .inside p.caption-btm{
	margin-top: 40px;
}
}

.location .phboxR {
    position: absolute;
    top: 0;
    right: 0;
    width: 48%;
    max-width: 620px;
}

.location p.cap-2 {
    position: absolute;
    right: 5px;
    top: -12px;
    /*color: #FFFFFF;*/
	z-index: 3;
	font-size: 1.4rem;
}
@media screen and (max-width: 768px){
.location p.cap-2 {
	position: relative;
    text-align: right;
	font-size: 1.2rem;
	padding-top: 5px;
}
}

.location p.cap {
	 position: absolute;
    right: 5px;
    bottom: 5px;
	z-index: 3;
}

.location p.cap.left {
    right: auto;
    left: 5px;
}

.location .mapbox{
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.location .mapbox p.cap{
    position: absolute;
    left: 5px;
    bottom: 40px;
    color: #000000;
}


@media screen and (max-width: 768px) {
.location .inside .phboxL {
    width: 100%;
    max-width: 100%;
}
.location .phboxR {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.location .mapbox.no1{
    overflow: hidden;
}
	
.location .mapbox.no1 img{
    max-width: 120%;
    margin-left: -10%;
}
    
.location .mapbox p.cap{
    left: 5px;
    bottom: 5px;
}
    
}



/* 左タイトル */
.lifeinfo-ttl{
  width:180px;
	text-align: left!important;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 2.2rem!important;
  letter-spacing: .06em;
  line-height: 1.4;
  font-weight: 400;
	margin: 0;
}



/* ===============================
   LIFE INFORMATION 3カラム
=============================== */

.lifeinfo-row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 26px 0;
  border-top: 1px solid rgba(0,0,0,.15);
}

/* タイトル */
.lifeinfo-ttl{
	width: 24%;
	text-align: left!important;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 2.2rem!important;
	letter-spacing: .06em;
	line-height: 1.4;
	font-weight: 400;
	margin: 0;
}

/* カラム */
.lifeinfo-col{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 0!important;
	width: 33%;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* リスト */
.lifeinfo-col li{
	width: 100%!important;
	position: relative;
	padding-left: 18px;
	margin-bottom: 5px;
	font-size: 1.4rem;
	line-height: 1.7;
}

/* 四角 */
.lifeinfo-col li:before{
  content:"";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 0.5em;
  background: #666;
}

/* カテゴリカラー */
.lifeinfo--shop .lifeinfo-ttl{color:#9b4f2c;}
.lifeinfo--shop li:before{background:#9b4f2c;}
.lifeinfo-row.lifeinfo--shop {border-top: 1px solid #9b4f2c;}

.lifeinfo--park .lifeinfo-ttl{color:#1f7a3a;}
.lifeinfo--park li:before{background:#1f7a3a;}
.lifeinfo-row.lifeinfo--park {border-top: 1px solid #1f7a3a;}

.lifeinfo--edu .lifeinfo-ttl{color:#1f6ea8;}
.lifeinfo--edu li:before{background:#1f6ea8;}
.lifeinfo-row.lifeinfo--edu {border-top: 1px solid #1f6ea8;}

.lifeinfo--bank .lifeinfo-ttl{color:#9b7a33;}
.lifeinfo--bank li:before{background:#9b7a33;}
.lifeinfo-row.lifeinfo--bank {border-top: 1px solid #9b7a33;}

.lifeinfo--medical .lifeinfo-ttl{color:#6b4aa8;}
.lifeinfo--medical li:before{background:#6b4aa8;}
.lifeinfo-row.lifeinfo--medical {border-top: 1px solid #6b4aa8;}


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

  .lifeinfo-row{
    flex-wrap:wrap;
  }

  .lifeinfo-ttl{
	  font-size: 1.8rem!important;
	  width:100%;
	  margin-bottom: 10px;
  }

  .lifeinfo-col{
	  width:100%;
	  margin-bottom: 0;
  }

	.lifeinfo-col li{
	margin-bottom: 5px!important;
	line-height: 1.5;
}

}