@charset "utf-8";
/* ===================================================================
//CSS information

// file name  :  locationAccess.css
// style info :  スタイル指定
=================================================================== */

/* ===================================================================
//kv
=================================================================== */
.kvArea {
    position: relative;
    margin-bottom: 80px;
}
.kvText {
    position: absolute;
    top: 30%;
    z-index: 10;
    padding-left: 4.86%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.kvText .kvTextSubHdd {
    font-weight: 700;
    letter-spacing: .5em;
    color: #a9894a;
    margin-bottom: 30px;
}
.kvText .kvTextHdd {
    font-size: 46px;
    font-weight: 400;
    line-height: 1.4;
    padding-right: 1em;
}
.kvWrap {
    margin-left: 50%;
}
.kvWrap02 {
    position: absolute;
    top: 63.15%;
    left: 37.15%;
    z-index: 5;
    width: 32.63888%;
}

h2.kvTextHdd{
	text-shadow: 0px 0px 10px #1d252f;
}

.gradation-white{
	position: relative;
	  overflow: hidden;
}

.gradation-white:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.55;
	background-image: linear-gradient(45deg, #fff, rgba(255, 255, 255, 0));
}

/* ===================================================================
//ロケーション
=================================================================== */
.location2{overflow: hidden; padding: 80px 0 100px;}
.location3{overflow: hidden; padding: 50px 30px;}
.locationMap{overflow: hidden; padding-top: 15%; margin-bottom:-15%;}
.location4{overflow: hidden; padding-top: 15%; margin-bottom:-15%;}

/* streetSection */
.location3{
	background: url("../../../img/pages/locationAccess/streetBg.jpg");
}
.location3 .streetBg{
	width: 100%;
	background: #fff;
	text-align: center;	
	padding: 15px;
}
.location3 .streetBg p{font-size: 22px; color: #950012; margin-top: 20px;}	
.location3 .streetBg p span{font-size: 18px;}
.location3 .streetBg .shop{background: #fcf4e5; margin-left: 0; margin-right: 0;}
.location3 .streetBg p.caption{color: #fff; font-size: 12px;}

.mapImg {text-align: right; margin-bottom: 80px;}

.lifeinfoKV {position: relative; padding: 60px 0 60px 60px; margin-bottom: 40px;}
.lifeinfoKV .shadow { position: relative; z-index: 10;}
.lifeinfoKV::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 20%;
    bottom: 0;
    z-index: 1;
    background: #a9894a;
}
.lifeinfoKV .picCaps {color: #fff;}

.lifeinfoData > div { margin-bottom: 60px;}
.lifeinfoData dt { font-weight: 400; margin-bottom: .3em;}
.lifeinfoData dd { color: #a9894a; margin-bottom: 10px;}

.lo_RTmt{padding-top: 50px;}

/* ===================================================================
//アクセス
=================================================================== */
.accessWrap{padding-top:15%; margin-bottom:15%;}
.accessMap{ background:#fefefe; padding: 50px 30px; margin-top: 80px;}

.accessMap figure figcaption{
	font-weight: 400;
    color: #333;
    letter-spacing: 0;
    line-height: 1.4;
    text-align: left;
    font-size: 11px;
    margin-top: 30px;
}
.trainMinWrap > div {margin-bottom: -50px;}
.trainMinWrap h3.articleHdd {
    position: relative;
    font-weight: 400;
    letter-spacing: 0;
    color: #a9894a;
    margin-bottom: 15px;
	padding-left: 20px;
}
.trainMinWrap h3.articleHdd::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    z-index: 1;
    height: 15px;
    width: 15px;
    background: #a9894a;
}
.trainMinText {font-size: 18px; line-height: 1.4; margin-bottom: 10px;}
.trainMinText .large {font-size: 21px; font-weight: 500;}
.trainMinText .num { font-size: 30px; font-weight: 700;}

.railMaps {
    /* margin-top: 60px; */
    margin-bottom: 60px;
    background: #fefefe;
	padding: 20px;
}

/*TAXI*/
.taxiDataTable {margin-bottom: 60px;}
.taxiDataTable th, .taxiDataTable td {
    text-align: center;
    vertical-align: middle;
    padding: 15px 0;
    width: 20%;
    color: #fff;
}
.taxiDataTable th{color: #fff;}
.taxiDataTable td {position: relative;}
.taxiDataTable td::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 1px;
    background: rgba(255,255,255,.2);
}
.stationName {background: #151515; color: #fff!important;}
.taxiData01 { background: rgba(255,255,255,.2);}
.taxiData02 { background: rgba(255,255,255,.3);}

.caption p{margin-top:-20%; display:inline-block;}

@media only screen and (max-width: 1024px) {
	.taxi.vh-element{padding-top: 50% !important;}
}
@media only screen and (max-width: 991px) {
	.kvText .kvTextHdd {font-size: 40px;}
}
@media only screen and (max-width: 768px) {
	.kvArea {margin-top: 100px;}
	.kvText {position: relative; top: auto; -webkit-transform: translateY(0); transform: translateY(0);}
	.kvWrap {margin-top: -80px;}
	.kvWrap02 {top: 80%;}

	.gradation-white:after{background-image: none;}	

	h3.articleHdd {letter-spacing: .15em;}
	.taxi.vh-element{padding-top: 50% !important; }
}
@media only screen and (max-width: 767px) {
	.kvArea {margin-top: 0;}
	.kvText .kvTextHdd {font-size: 30px;}
	.kvWrap {margin-top: 10px; margin-left: 30%;}
	.kvWrap02 { width: 40%; top: 85%; left: 5%;}
	.mapImg { margin-bottom: 40px;}

	.railMaps {margin: 60px auto 0; }
	.trainMinWrap > div {margin: 0 !important;}
	.trainMinText {font-size: 16px; line-height: 1.4; margin-bottom: 10px;}
	.trainMinText .large {font-size: 20px;}
	.trainMinText .num {font-size: 26px; font-weight: 700;}
	
	.accessMap {padding: 15px 15px; margin-top: 30px;}
	.accessMap figure{margin-bottom: 0 !important;}
	.accessMap figure figcaption{font-size: 10px;}

	.location2, .location3{padding: 25px 0;}
	.locationMap, .location4{padding-top: 25px; margin-bottom:25px;}
	
	.location3 .streetBg{padding: 15px;}
	.location3 .streetBg p{font-size: 22px; color: #950012; margin-top: 20px;}	
	.location3 .streetBg p span{font-size: 18px;}
	.location3 .streetBg .shop{background: #fcf4e5; margin-left: 0; margin-right: 0;}
	.location3 .streetBg p.caption{color: #fff; font-size: 12px;}
	
	.secondSection vh-element{padding-top: 0 !important;}
	
	.sp_mb30{margin-bottom: 30px;}

}
@media only screen and (max-width: 679px) {
}
@media only screen and (max-width: 479px) {
    .caption.sp_mt{margin-top: -30px;}
	.taxi.vh-element{padding-top: 0 !important;}
}
@media only screen and (max-width: 320px) {
	.taxiDataTable {font-size: 14px;}
}