@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
.headLine01 {
	margin-bottom: 4.8rem;
}
#main .rates {
	margin-bottom: 12rem;
}
#main .rates:last-child {
	margin-bottom: 0;
}
#main .rates p {
	margin-bottom: 2.4rem;
}
#main .rates p:last-child {
	margin-bottom: 0;
}
#main .fares {
	min-height: 51.5rem;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main .fares .map {
	width: 46.6rem;
	margin: 0 5.5rem 0 0;
}
#main .fares .map img {
	width: 100%;
}
#main .fares .rInner {
	width: calc(100% - 46.6rem - 5.5rem);
}
#main .fares .rBox {
	position: relative;
	margin-right: 2.2rem;
	padding: 3.7rem 3.7rem 2.6rem;
	border-radius: 1.6rem;
	background-color: #FAF8ED;
	display: none;
}
#main .fares .rBox::before {
	width: 0.8rem;  
	aspect-ratio: 16 / 40;
	background: url(../img/gaspayment/arrow.png) no-repeat;
	background-size: 100% auto;
	position: absolute;  
	top: 50%;
	transform: translateY(-50%);
	left: -0.8rem;
	content: ""; 
}
#main .fares .rBox .comLink {
	position: absolute;
	top: 3.6rem;
	right: 3.6rem;
}
#main .fares h4 {
	margin-bottom: 2.4rem;
	font-size: 2rem;
	font-weight: 700;
	color: #F47804;
}
#main .fares .ttl {
	font-weight: 700;
	margin-bottom: 0.8rem;
}
#main .tableBox{
	border-radius: 0.5rem;
	overflow: hidden;
}
#main .regionsList {
	margin-bottom: 12rem;
}
/* #main .comImgBox {
	align-items: flex-start;
} */
.comTable {
	overflow: hidden;   
	box-shadow: 0 0 0 1px transparent;   
	border-radius: 0.5rem;
}
@media all and (min-width: 897px) {
	.comTable {
		margin-bottom: 1rem;
	}
	.comTable th {
		padding-block: 0.6rem;
		width: 18.4%;
		font-size: 1.2rem;
		background-color: #FBE4C0;
		border-top: 1px solid #fff;
	}
	.comTable td {
		padding-block: 0.6rem;
		font-size: 1.2rem;
		background-color: #fff;
	}
	.comTable .tableDl dt .subSpan {
		min-width: 17rem;
	}
	.comTable .tableDl dd {
		font-size: 1.2rem;
		text-align: center;
	}
	.comTable td:has(.tableDl) {
		padding-block: 0.3rem 0.4rem;
	}
	#main .regionsList {
		padding-top: 0;
		gap: 1.6rem;
	}
	#main .regionsList li {
		width: calc((100% - (1.6rem * 3 + 0.1rem)) / 4);
	}
	#main .comImgBox .textBox h3 {
		margin-bottom: 3.3rem;
	}
	#main .comImgBox .textBox p {
		margin-bottom: 3.3rem;
	}
	#main .fares .ttl:first-of-type {
		margin-top: -1rem;
	}
	#main .fares .map p {
		margin-top: -2rem;
		text-align: center;
		font-size: 1.2rem;
		color: #999999;
	}
	#main .comImgBox .textBox {
		margin-top: -2.1rem;
	}
}

@media all and (max-width: 896px) {
	.headLine01 {
		margin-bottom: 2.5rem;
		font-size: 2.4rem;
	}
	#main .rates p {
		margin-bottom: 1.5rem;
	}
	#main .rates {
		margin-bottom: 6rem;
	}
	#main .fares {
		min-height: inherit;
		display: block;
	}
	#main .fares .selectBox {
		margin: 0 auto 1.2rem;
		width: 20rem;
		position: relative;
		z-index: 10;
	}
	select {
		padding: 0 2rem;
		text-align: center;
		height: 3.6rem;
		border-radius: 5rem;
		border-color: transparent;
		background: #EEE url(../img/gaspayment/icon.png) no-repeat right 2rem center;
		background-size: 1.6rem auto;
		text-align-last: center;  
  		direction: ltr;  
	}
	#main .fares .map {
		width: auto;
		margin: 0 6.7rem -0.4rem;
	}
	#main .rates .spTxt {
		text-align: center;
		color: #999;
		font-size: 1rem;
	}
	#main .fares .rInner {
		width: auto;
		margin-top: 2.8rem;
	}
	#main .fares .rBox {
		margin: 0;
		padding: 2.4rem 2.4rem 2rem;
	}
	#main .fares h4 {
		margin-bottom: 1.3rem;
		text-align: center;
		font-size: 1.6rem;
	}
	#main .fares .rBox .comLink {
		margin-bottom: 1.5rem;
		position: static;
		max-width: 18rem;
	}
	#main .comLink.small a {
		min-height: 3.1rem;
		font-size: 1rem;
		padding-right: 1rem;
		padding-left: 2rem;
	}
	#main .comLink.small .subSpan {
		background-size: 1.7rem auto;
	}
	.comTable th {
		padding: 0.85rem 0.3rem;
		width: 21.0%;
		font-size: 1rem;
		background-color: #FBE4C0;
		border-top: 1px solid #fff;
	}
	.comTable td {
		padding: 0.85rem 0.3rem;
		font-size: 1rem;
		background-color: #fff;
	}
	.comTable .tableDl {
		padding-right: 0;
	}
	.comTable .tableDl dd {
		font-size: 1rem;
	}
	.comTable .tableDl dt {
		min-width: 15rem;
		padding-right: 1.2rem;
		text-align: right;
	}
	.comTable .tableDl dt .subSpan {
		min-width: 13rem;
	}
	.comTable td:has(.tableDl) {
		padding-block: 0.4rem 0.5rem;
	}
	.comTable tr:first-child th {
		border-top-color: transparent;
	}
	.tableBox {
		border-radius: 0.3rem;
	}
	.comTable {
		margin-bottom: 0;
	}
	#main .tableBox {
		margin-bottom: 1.5rem;
	}
	#main .tableBox:last-child {
		margin-bottom: 0;
	}
	#main .regionsList {
		margin-bottom: 6rem;
	}
	#main .fares .rBox::before {
		width: 2.6rem;
		aspect-ratio: 52 / 20;
		left: 50%;
		transform: translateX(-50%);
		top: -1rem;
		background-image: url(../img/gaspayment/arrow_sp.png);
	}
}