@charset "UTF-8";


/******************************************************
 tab / access
******************************************************/
.accessTraficTab {
	width: 100%;
}
.accessTab {
	margin: 0 auto 60px;
}
.accessTabNav {
	display: flex;
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	gap: 4px;
}
.accessTabNav ul {
	background: #b8b6bc;
}
.accessTabNav li {
	flex:1;
}
@media screen and ( max-width:768px ) {
	.accessTab {
		margin: 0 auto;
	}
	.accessTabNav {
		width: 100%;
	}
}

.accessTabNav button {
	width: 100%;
	height: 70px;
	border: 1px solid #a99b8b;
	background: #f7f6f4;
	font-size: 18px;
	line-height: 1.2em;
	font-weight: 400;
	cursor: pointer;
	transition:.25s;
}
.accessTabNav button:hover {
	background:#a99b8b;
	color:#fff;
}
.accessTabNav button.active {
	background: #a99b8b;
	color:#fff;
}
.accessTabContents {
	width: 100%;
	margin-bottom: 30px;
}
.accessTabContent {
	display: none;
}
.accessTabContent.active {
	display: block;
}
@media screen and ( max-width:768px ) {
	.accessTabNav button {
		height: 50px;
		font-size: 3.8vw;
	}
	.accessTabContents {
		margin-bottom: 10px;
		padding: 40px 0 0;
	}
}



/******************************************************
 access / tab inner
******************************************************/
.acsTrfcHead {
	width: 100%;
	font-size: 24px;
	text-align: left;
    line-height: 1em;
	border-bottom: 1px solid #3E3A39;
	margin-bottom: 30px;
	padding-bottom: 15px;
}
.acsTrfcLine {
    font-size: 18px;
    line-height: 1em;
    text-align: left;
    margin-bottom: 30px;
}
.accessTabContent .bx2 {
    margin-bottom: 30px;
}

@media screen and (max-width: 768px){
	.acsTrfcHead {
		font-size: 4.8vw;
		line-height: 1.5em;
		text-align: center;
		padding-bottom: 20px;
	}
	.acsTrfcLine {
		font-size: 3.5vw;
		margin-bottom: 20px;
	}
	.accessTabContent .bx2 {
		width: 100%;
		margin-bottom: 15px;
	}
}

.acsTrfcClmCtnr {
	position: relative;
	width: 100%;
	background: #ece8e3;
	margin-bottom: 100px;
	padding: 60px 50px 50px;
}
.acsTrfcClmInnr {
	width: 900px;
	margin: 0 auto;
}
.acsTrfcClmInnr .bx1 {width: 360px;}
.acsTrfcClmInnr .bx1 .head {
    font-size: 25px;
    line-height: 1em;
    text-align: left;
	margin-bottom: 20px;
}
.acsTrfcClmInnr .bx1 .bdy {
    font-size: 18px;
    line-height: 1.8em;
    text-align: justify;
	letter-spacing: 0;
}
.acsTrfcClmInnr .bx2 {width: 500px;}
.acsTrfcClmInnr .bx3 {
	position: absolute;
	width: 360px;
    font-size: 12px;
    line-height: 1.4em;
    text-align: justify;
	left: 50px;
	bottom: 50px;
}
@media screen and (max-width: 768px){
	.acsTrfcClmCtnr {
		position: static;
		width: 100%;
		margin-bottom: 50px;
		padding: 30px 20px 20px;
	}
	.acsTrfcClmInnr {
		width: 100%;
	}
	.acsTrfcClmInnr .bx1 {width: 100%;}
	.acsTrfcClmInnr .bx1 .head {
		font-size: 6.5vw;
		line-height: 1.5em;
		text-align: center;
	}
	.acsTrfcClmInnr .bx1 .bdy {
		font-size: 3.8vw;
		letter-spacing: 0;
		margin-bottom: 25px;
	}
	.acsTrfcClmInnr .bx2 {
		width: 100%;
		margin-bottom: 20px;
	}
	.acsTrfcClmInnr .bx3 {
		position: static;
		width: 100%;
		font-size: 2.8vw;
	}
}




/******************************************************
 tab / transport
******************************************************/
.accessTransportTab {
	width: 100%;
}
.transportTab {
	margin: 0 auto 60px;
}
.transportTabNav {
	display: flex;
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	gap: 4px;
}
.transportTabNav ul {
	background: #b8b6bc;
}
.transportTabNav li {
	flex:1;
}
@media screen and ( max-width:768px ) {
	.transportTab {
		margin: 0 auto;
	}
	.transportTabNav {
		width: 100%;
	}
}

.transportTabNav button {
	width: 100%;
	height: 70px;
	border: 1px solid #a99b8b;
	background: #f7f6f4;
	font-size: 18px;
	line-height: 1.2em;
	font-weight: 400;
	cursor: pointer;
	transition:.25s;
}
.transportTabNav button:hover {
	background:#a99b8b;
	color:#fff;
}
.transportTabNav button.active {
	background: #a99b8b;
	color:#fff;
}
.transportTabContents {
	width: 100%;
	margin-bottom: 30px;
}
.transportTabContent {
	display: none;
}
.transportTabContent.active {
	display: block;
}
@media screen and ( max-width:768px ) {
	.transportTabNav button {
		height: 50px;
		font-size: 3.8vw;
	}
	.transportTabContents {
		margin-bottom: 10px;
		padding: 40px 0 0;
	}
}



/******************************************************
 transport / tab inner
******************************************************/
.transportTabContent .bx2 {
    margin-bottom: 30px;
}
.transportTabContent .contentsTtlSub2 {
	margin-bottom: 50px;
}

@media screen and (max-width: 768px){
	.transportTabContent .contentsTtlSub2 {
		margin-bottom: 40px;
	}
	.transportTabContent .bx2 {
		width: 100%;
		margin-bottom: 15px;
	}
}