@charset 'utf-8';


/* =========================================================
access
========================================================= */
#access {
	--royte_box_size:180px;
}
@media print,screen and (max-width: 1000px) and (min-width: 751px),(max-device-width: 1024px) and (min-device-width: 768px){
	#access {
		--royte_box_size:120px;
	}
}
@media only screen and (max-width: 750px){
}


/* =========================================================
access_top
========================================================= */
#access_top {
}
#access_top .inner {
	padding-top: 120px;
	padding-bottom: 60px;
}
#access_top .inner .gmap_area {
	position: relative;
	z-index: 1;
	width: 100%;
	margin-bottom: 60px;
}
#access_top .inner .gmap_area iframe {
	width: 100%;
	height: 460px;
	vertical-align: top;
	border: none;
}
#access_top .inner .parking_area {
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	        align-items: flex-start;
	-webkit-align-items: flex-start;
}
#access_top .inner .parking_area .txt_bloc {
	width: 39.22%;
	padding-right: 20px;
}
#access_top .inner .parking_area .txt_bloc h3 {
	text-align: left;
	margin-top: -4px;
	margin-bottom: 18px;
}
#access_top .inner .parking_area .txt_bloc p {
	line-height: 1.7em;
	width: 100%;
}
#access_top .inner .parking_area .img_bloc {
	width: 60.78%;
	max-width: 620px;
}
#access_top .inner .parking_area .img_bloc .map_bloc{
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
}
#access_top .inner .parking_area .img_bloc .map_bloc:last-child {
	margin-bottom: 0;
}
@media only screen and (max-width: 750px){
	#access_top .inner {
		padding-top: 1.2rem;
		padding-bottom: 0.6rem;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
	#access_top .inner .gmap_area {
		padding-right: 0.25rem;
		padding-left: 0.25rem;
		margin-bottom: 0.52rem;
	}
	#access_top .inner .gmap_area iframe {
		height: 4.6rem;
	}
	#access_top .inner .parking_area {
		        flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
	}
	#access_top .inner .parking_area .txt_bloc {
		width: 100%;
		padding-right: 0.25rem;
		padding-left: 0.25rem;
		margin-bottom: 0.62rem;
	}
	#access_top .inner .parking_area .txt_bloc h3 {
		margin-top: 0;
		margin-bottom: 0.26rem;
	}
	#access_top .inner .parking_area .txt_bloc p {
		line-height: 1.4em;
	}
	#access_top .inner .parking_area .img_bloc {
		width: 100%;
		max-width: 100%;
		position: relative;
	}
	#access_top .inner .parking_area .img_bloc:after{
		content: "";
		width: 100%;
		border-bottom: 1px solid #dedede;
		display: block;
		position: absolute;
		top: calc(270px + 0.3rem);
		left: 0.25rem;
	}
	#access_top .inner .parking_area .img_bloc .map_bloc{
		width: 100%;
		max-width: 620px;
		overflow-x: visible;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
		padding-bottom: 0;
		margin-bottom: 0.6rem;
	}
	#access_top .inner .parking_area .img_bloc .map_bloc:last-child {
		margin-bottom: 0;
	}
	#access_top .inner .parking_area .img_bloc .map_bloc picture{
		width: 620px;
		-webkit-user-select: none;
		   -moz-user-select: none;
		    -ms-user-select: none;
		        user-select: none;
	}
}


/* =========================================================
access_route
========================================================= */
#access_route {
}
@media only screen and (max-width: 750px){
}


/* =========================================================
access_route_train
========================================================= */
#access_route_train.inner{
	padding-top: 54px;
	padding-bottom: 60px;
}
#access_route_train h3{
	margin-bottom: 58px;
}
#access_route_train .route_list{
	position: relative;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	        align-items: flex-start;
	-webkit-align-items: flex-start;
	overflow: hidden;
	padding-right: var(--royte_box_size);
}
#access_route_train .route_list .route{
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	        align-items: stretch;
	-webkit-align-items: stretch;
	width: 100%;
	margin-top: 30px;
}
#access_route_train .route_list .route:first-child{
	margin-top: 0;
}
#access_route_train .route_list .route .station{
	font-size: 16px;
	font-weight: 500;
	position: relative;
	z-index: 1;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: center;
	        justify-content: center;
	        align-items: center;
	-webkit-align-items: center;
	overflow: hidden;
	width: var(--royte_box_size);
	height: 80px;
	border: 1px solid #dadada;
	border-radius: 6px;
	background-color: #eee;
}
#access_route_train .route_list .route .point{
	position: relative;
	z-index: 0;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: center;
	        justify-content: center;
	        flex-flow: column wrap;
	-webkit-flex-flow: column wrap;
	        align-items: center;
	-webkit-align-items: center;
	overflow: hidden;
	width: calc(100% - var(--royte_box_size));
}
#access_route_train .route_list .route .point .name{
	font-weight: 500;
	line-height: 1.3em;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-end;
	        justify-content: flex-end;
	        flex-flow: column wrap;
	-webkit-flex-flow: column wrap;
	        align-items: center;
	-webkit-align-items: center;
	height: 50%;
	padding-right: 20px;
	padding-bottom: 8px;
	letter-spacing: 0.05em;
}
#access_route_train .route_list .route .point .time{
	font-weight: 500;
	line-height: 1.3em;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: column wrap;
	-webkit-flex-flow: column wrap;
	        align-items: center;
	-webkit-align-items: center;
	height: 50%;
	padding-top: 8px;
	padding-right: 20px;
}
#access_route_train .route_list .route .point .arrow{
	position: absolute;
	z-index: 0;
	top: 50%;
	width: 100%;
	height: 0;
	-webkit-transition-delay: 0.5s !important;
	        transition-delay: 0.5s !important;
	-webkit-transition-timing-function: linear;
	        transition-timing-function: linear;
	-webkit-transition-duration: 1s !important;
	        transition-duration: 1s !important;
	-webkit-transition-property: transform;
	        transition-property: transform;
	-webkit-transform: translateX(-100%);
	        transform: translateX(-100%);
	text-align: right;
}
#access_route_train .route_list .route .point .arrow:before{
	position: absolute;
	z-index: 0;
	top: 50%;
	right: 0;
	display: block;
	width: 101%;
	height: 1px;
	content: '';
	background: linear-gradient(to right, #dadada, #dadada 4px, transparent 2px, transparent 6px);
	background-size: 6px 1px;
}
#access_route_train .route_list .route.aos-animate .point .arrow{
	-webkit-transform: translateX(0px);
	        transform: translateX(0px);
}
#access_route_train .route_list .route .point .arrow i{
	margin-top: -5.5px;
}
#access_route_train .route_list .station.end{
	font-size: 16px;
	font-weight: 500;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: center;
	        justify-content: center;
	        align-items: center;
	-webkit-align-items: center;
	width: var(--royte_box_size);
	height: 100%;
	border-radius: 6px;
	background-color: #d4d4d4;
}
#access_route_train .route_list .route.okayama .point{
	width: calc((100% - var(--royte_box_size) * 2) / 2);
}
#access_route_train .route_list .route.okayama .point:nth-child(2) .name,
#access_route_train .route_list .route.okayama .point:nth-child(2) .time{
	padding-right: 0;
}
@media only screen and (max-width: 750px){
	#access_route_train.inner{
		padding-top: 0.5rem;
		padding-bottom: 0.6rem;
	}
	#access_route_train h3{
		margin-bottom: 0.58rem;
	}
	#access_route_train .route_list{
		padding-right: 0;
	}
	#access_route_train .route_list .route{
		        flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		        align-items: flex-start;
		-webkit-align-items: flex-start;
		width: 100%;
		margin-top: 0.6rem;
	}
	#access_route_train .route_list .route .station{
		font-size: 0.26rem;
		width: 100%;
		height: 0.8rem;
		border-radius: 0.1rem;
	}
	#access_route_train .route_list .route .point{
		-webkit-justify-content: flex-start;
		        justify-content: flex-start;
		        flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		        align-items: center;
		-webkit-align-items: center;
		width: 100%;
		padding: 0.25rem 0 0.26rem;
	}
	#access_route_train .route_list .route .point .name{
		font-weight: 500;
		line-height: 1.3em;
		display: block;
		height: auto;
		padding-right: 0;
		padding-bottom: 0;
		letter-spacing: 0.05em;
		width: 100%;
		text-align: center;
	}
	#access_route_train .route_list .route .point .arrow{
		top: 0;
		width: 0.16rem;
		height: 100%;
		-webkit-transform: translateY(-100%);
		        transform: translateY(-100%);
		text-align: left;
	}
	#access_route_train .route_list .route .point .arrow::before {
		position: absolute;
		z-index: 0;
		top: 0;
		right: auto;
		display: block;
		width: 0.03rem;
		height: calc(100% - 0.1rem);
		content: '';
		background: linear-gradient(to bottom, #dadada, #dadada 0.12rem, transparent 0.06rem, transparent 0.18rem);
		background-size: 0.03rem 0.18rem;
		left: 0.3rem;
	}
	#access_route_train .route_list .route.aos-animate .point .arrow{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	#access_route_train .route_list .route .point .arrow i{
		margin-top: 0;
		margin-left: -0.06rem;
		position: absolute;
		left: 0.3rem;
		bottom: 0;
	}
	#access_route_train .route_list .station.end{
		font-size: 0.26rem;
		position: static;
		display:         flex;
		display: -webkit-flex;
		-webkit-justify-content: center;
		        justify-content: center;
		        align-items: center;
		-webkit-align-items: center;
		width: 100%;
		height: 0.8rem;
		border-radius: 0.1rem;
	}
	#access_route_train .route_list .route.okayama .point{
		width: 100%;
	}
	#access_route_train .route_list .route.okayama .point:nth-child(2) .arrow::before {
		height: 100%;
	}
}


/* =========================================================
access_route_car
========================================================= */
#access_route_car.inner {
	padding-top: 57px;
}
#access_route_car h3 {
	margin-bottom: 58px;
}
#access_route_car .route_list {
	position: relative;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	        align-items: flex-start;
	-webkit-align-items: flex-start;
}
#access_route_car .route_list .route {
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	        align-items: stretch;
	-webkit-align-items: stretch;
	width: 100%;
	margin-bottom: 30px;
}
#access_route_car .route_list .route:last-child {
	margin-bottom: 0;
}
#access_route_car .route_list .route .city {
	font-size: 16px;
	font-weight: 500;
	position: relative;
	z-index: 1;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: center;
	        justify-content: center;
	        align-items: center;
	-webkit-align-items: center;
	overflow: hidden;
	width: var(--royte_box_size);
	height: 80px;
	border: 1px solid #dadada;
	border-radius: 6px;
	background-color: #eee;
}
#access_route_car .route_list .route .point {
	position: relative;
	z-index: 0;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
	        align-items: center;
	-webkit-align-items: center;
	width: calc(100% - 325px);
	margin-left: 30px;
}
#access_route_car .route_list .route .point .inbox{
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	        align-items: flex-start;
	-webkit-align-items: flex-start;
	overflow: hidden;
	padding: 0;
	position: relative;
	z-index: 1;
}
#access_route_car .route_list .route .point .inbox *{
	position: relative;
	z-index: 1;
}
/*#access_route_car .route_list .route .point .inbox:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	mask-image: url(../../svg/access/route_line_pc.svg);
	-webkit-mask-image: url(../../svg/access/route_line_pc.svg);
	background-color: #dadada;
	background-repeat: repeat;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}*/
#access_route_car .route_list .route .point .i-route-line{
	position: absolute;
	z-index: 0;
	height: 100%;
}
#access_route_car .route_list .route .point span {
	position: relative;
	font-weight: 500;
	color: #000;
	line-height: 2.6em;
}
#access_route_car .route_list .route .point .fa-long-arrow-alt-right {
	color: #b3b3b3;
	line-height: 2.7em;
}
#access_route_car .route_list .route .point .fa-long-arrow-alt-right:before {
	padding: 0 3px;
}
#access_route_car .route_list .route .map {
	width: 30px;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: center;
	        justify-content: center;
	        flex-flow: column wrap;
	-webkit-flex-flow: column wrap;
	        align-items: center;
	-webkit-align-items: center;
	margin-left: 85px;
}
#access_route_car .route_list .route .map .btn_map {
}
#access_route_car .route_list .route .map span {
	text-align: center;
	line-height: 1em;
	margin-top: 5px;
}
@media print,screen and (min-width: 751px) {
	#access_route_car .route_list .route .point span:last-child:before {
		content: "";
		width: 100vw;
		bottom: -5px;
		left: 100%;
		display: block;
		position: absolute;
		z-index: 1;
		background-color: #fff;
		height: 100%;
	}
}
@media only screen and (max-width: 750px){
	#access_route_car.inner {
		padding-top: 0.52rem;
	}
	#access_route_car h3 {
		margin-bottom: 0.58rem;
	}
	#access_route_car .route_list {
		overflow: hidden;
	}
	#access_route_car .route_list .route {
		        flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		        align-items: flex-start;
		-webkit-align-items: flex-start;
		width: 100%;
		margin-bottom: 0.6rem;
	}
	#access_route_car .route_list .route:first-child {
		margin-bottom: 0.6rem;
	}
	#access_route_car .route_list .route:last-child {
		margin-bottom: 0;
	}
	#access_route_car .route_list .route .city {
		font-size: 0.26rem;
		width: 100%;
		height: 0.8rem;
		border-radius: 0.1rem;
	}
	#access_route_car .route_list .route .point {
		position: relative;
		z-index: 0;
		display:         flex;
		display: -webkit-flex;
		-webkit-justify-content: flex-start;
		        justify-content: flex-start;
		        flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		        align-items: center;
		-webkit-align-items: center;
		width: 100%;
		margin-left: 0;
		margin-top: 0.24rem;
	}
	#access_route_car .route_list .route .point .inbox{
		display:         flex;
		display: -webkit-flex;
		-webkit-justify-content: flex-start;
		        justify-content: flex-start;
		        flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		        align-items: flex-start;
		-webkit-align-items: flex-start;
		overflow: hidden;
		padding: 0;
		position: relative;
	}
	#access_route_car .route_list .route .point .inbox:before{
		display: none;
	}
	#access_route_car .route_list .route .point:before,
	#access_route_car .route_list .route .point:after,
	#access_route_car .route_list .route .point .inbox:after{
		position: absolute;
		left: 0;
		background: linear-gradient(to right, #dadada, #dadada 4px, transparent 2px, transparent 6px);
		background-size: 6px 1px;
		content: "";
		display: block;
		width: 100%;
		height: 1px;
	}
	#access_route_car .route_list .route .point:before{
		top: 0.43rem;
	}
	#access_route_car .route_list .route .point:after{
		top: 1.08rem;
	}
	#access_route_car .route_list .route .point .inbox:after{
		top: 1.74rem;
	}
	#access_route_car .route_list .route .point span {
		line-height: 1.4em;
		padding-bottom: 0.3rem;
	}
	#access_route_car .route_list .route .point span:last-child:before {
		position: absolute;
		top: 0;
		left: 100%;
		background-color: #fff;
		width: 100vw;
		height: 100%;
		display: block;
		z-index: 1;
		content: "";
	}
	#access_route_car .route_list .route .point .fa-long-arrow-alt-right {
		line-height: 1.6em;
	}
	#access_route_car .route_list .route .point s.fa-long-arrow-alt-right:before {
		padding: 0 0.06rem;
	}
	#access_route_car .route_list .route .map {
		width: 100%;
		margin-left: 0;
		margin-top: 0.07rem;
	}
	#access_route_car .route_list .route .map span {
		margin-top: 0.1rem;
	}
}