@charset "utf-8";
/* CSS Document */

.sub_title {
	margin-bottom: 10vh;
}
.access_02{
	margin-bottom: 15vh;
}
.access_02 h3{
	font-size: var(--27px);
		text-indent:1.3em;
	line-height: 2.2em;
	margin-bottom: 1.0em;
	margin-left: -1.2em;
	white-space: nowrap;
}
.access_02 .si{
	font-size: var(--20px);
}
.access_02 .sayama{
	font-size: var(--50px);
}
.access_02 .ten_min{
	font-family: "Jost", sans-serif;
	font-weight: 500;
	color:#e5507a;
	font-size: var(--80px);
}
.station{
    display: grid;
    align-items: flex-end;
    column-gap: 5%;
    margin-bottom: 5vh;
    grid-template-columns: 1.8fr 1fr;
}
.train{
font-size: var(--18px);
    color: #ffffff;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 3%;
    padding-bottom: 10px;
	}
.train li{
	width: 7.5em;
	padding:0.2em 0;
	text-align: center;
	border-radius:3px;
}
.train li:first-child{
   background-color: #ff6b00;
}

.train li:nth-child(2){
    background-color: #ffb700;
}

.train li:nth-child(3){
    background-color: #00acd1;
}

.train li:nth-child(4){
    background-color: #00a794;
}

.train li:last-child{
    background-color:#9fa0a0;
}
.train_map{
	width: 80%;
	margin: 0 auto 10vh;
}
.access_02 .time_list{
	font-size: var(--20px);
	border-bottom:solid 1px #333333;
	margin-bottom: 3.0em;
	text-indent: 0;
}
.access{
font-size: var(--16px);
    width: 220px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-left: -1.0em;
	white-space: nowrap;
}
.motomachi{
	letter-spacing: -0.1em;
}

.sta{
	font-size: var(--27px);
}
.chuka{
	font-size: var(--23px);
	letter-spacing: -0.1em;
}
.min{
	font-family: "Jost", sans-serif;
	font-weight: 500;
	color:#e5507a;
	font-size: var(--35px);
	align-self: flex-end;
}
.acc_list{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	justify-items: center;
	grid-row-gap: 3.0em;
	column-gap: 2.0em;
	margin-bottom: 3.0em;
}

@media (max-width: 768px) {
	.sayamagaoka{
		padding: 0 10%;
	}
	.train {
    display: flex;
		flex-wrap:wrap;
		column-gap: 3px;
		row-gap:3px; 
    padding-bottom: 10px;
}
	.train li {
    width: 5.5em;
	}
	.station {
    display: flex;
    align-items: center;
    column-gap: 5vh;
    margin-bottom: 5vh;
    flex-direction: column-reverse;
	}
.access_02 .sayama {
    font-size: var(--40px);
	}
.access_02 .ten_min {
    font-size: var(--60px);
	}
}	
	
	
	
	
	
	
	
	
	
	
	
}