/*========================================
トップページcss


========================================*/

/*============================== topArea */
.topArea{
 height: 534px;
}

.topAreaR{
 position: absolute; top: 0; right: 0;
 width: 475px;
 padding-top: 30px; /* 50px */
}

.topAreaComment{
 margin-top: 0;
 padding: 13px 20px 13px 40px;
 color: #13607a;
 font-size: 1.5rem;
 line-height: 1.8;
 background: rgba(255,255,255,0.9);
}


/*============================== 魅力エリア */
.miryokuArea{
 height: 965px;
 margin-bottom: 35px;
}

.miryoku01 a img,
.miryoku02 a img,
.miryoku03 a img{transition: all 0.3s ease-out;}

.miryoku01 a img:hover,
.miryoku02 a img:hover,
.miryoku03 a img:hover{transform: scale(1.1,1.1);}

/*------------------------------ 魅力：仕事 */
.miryoku01{
 position: absolute; top: 59px; right: 0;
 width: 588px;
}

.miryoku01msg{
 position: absolute; top: 20px; left: 37px; z-index: 50;
}

.miryoku01link{
 position: absolute; bottom: 10px; right: 37px; z-index: 50;
}

/*------------------------------ 魅力：料理 */
.miryoku02{
 position: absolute; top: 308px; left: 0;
 width: 588px;
}

.miryoku02msg{
 position: absolute; top: 10px; left: 100px; z-index: 50;
}

.miryoku02link{
 position: absolute; bottom: 34px; left: 45px; z-index: 50;
}

/*------------------------------ 魅力：家族・グループ */
.miryoku03{
 position: absolute; bottom: 52px; right: 146px;
 width: 335px;
}

.miryoku03msg{
 position: absolute; top: -26px; left: 185px; z-index: 50;
}

.miryoku03link{
 position: absolute; bottom: -16px; left: 162px; z-index: 50;
}


/*============================== 周辺情報エリア */
.areaguideInner{
 padding: 110px 0 40px 0;
}

.areaguideInner ul{
 display: flex;
 flex-wrap: wrap;

 width: 950px;
 margin: 0 auto 0 auto;
 padding-top: 45px;
}

.areaguideInner li{
 margin: 0 70px 60px 0;
 list-style: none;
}

.areaguideInner li:nth-child(3n){
 margin-right: 0;
}

.areaguideInner a{transition: 0.4s ease-in;}

.areaguideInner a:hover{opacity: 0.5;}


/*============================== SNSエリア */
.sns{
 display: flex;
 justify-content: space-around;
 margin:135px auto 135px;
}
.facebook{
	flex:1;
	text-align: center;
}
.instagram{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.instagram a{
    transition: 0.4s ease-in;
	margin-bottom:30px;
	
}
.instagram a:last-of-type{
	margin-bottom:0;
}
.instagram a:hover{opacity: 0.5;}
.instagram img{
	width:100%;
	max-width: 450px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}