@charset "UTF-8";
/* ==============================================

新運賃移管対応 追加モジュール

================================================= */
@media only screen and (min-width: 768px) {
	.pc_only {
		display: block;
	}
	.sp_only {
		display: none;
	}
}
@media only screen and (max-width: 767px) {
	.pc_only {
		display: none;
	}
	.sp_only {
		display: block;
	}
}


/* ==============================================

共通注記

================================================= */
.apass-box-notice {
	margin: 30px 0 0;
	padding: 30px 15px 30px;
	text-align: left;
	border: 1px solid #900;
}
.apass-box-notice .apass-box-notice__txt {
	color: #000000;
	font-size: 1.6rem;
}
.apass-box-notice .apass-box-notice__txt strong {
	color: #900;
	font-weight: normal;
}
.apass-box-notice > *:first-child {
	margin-top: 0 !important;
}
.apass-box-notice > *:last-child {
	margin-bottom: 0 !important;
}

/* SP */
@media only screen and (max-width: 767px) {
	.apass-box-notice .apass-box-notice__txt {
		font-size: 1.4rem;
	}
}


/* ==============================================

タブ（新旧ページのリンク遷移）

================================================= */
.apass-tab.m-tab .m-tab-list li {
	-ms-flex-item-align: end;
	align-self: flex-end;
	width: 40%;
	font-family: ヒラギノ角ゴ\ Pro\ W3, "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, ＭＳ\ Ｐゴシック, "MS PGothic", sans-serif;
}
.apass-tab.m-tab .m-tab-list li a.is-current {
	font-weight: bold;
}
.apass-tab.m-tab .m-tab-list li a.is-current span {
	padding-block: 20px;
}
.apass-tab.m-tab .m-tab-list li:has(a.is-current) {
	width: 60%;
}

/* ==============================================

タブ（予約TOPのJSタブ切り替えベース）

================================================= */
.apass-reservation-tab-content {
  display: none;
}
.apass-reservation-tab-content.is-active {
  display: block;
}

/* ==============================================

予約TOP（タブパネル内の要素配置）

================================================= */
/* PC */
@media only screen and (min-width: 768px) {

.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout {
	display: grid;
	grid-template-columns: 452px 266px 224px;
	margin-top: 24px;
}

.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__place-apass{
	grid-column: 1/2;
	grid-row: 1/2;
	width: 100%;
}

.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__dep-date-apass{
	grid-column: span 1;
	grid-row: 1/2;
	width: 100%;
	padding-left: initial;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__dep-date-apass+.m-form__dep-date-apass{
	padding-left: 22px;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__place-apass+.m-form__dep-date-apass{
	padding-left: 64px;
}

.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__number-apass{
	grid-column: 1/4;
	grid-row: 2/3;
	width: 100%;
}

.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__fare-option-apass{
	grid-column: 1/4;
	grid-row: 3/4;
	width: 100%;
	padding-left: initial;
	margin-top: 24px;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__fare-option-apass tr{
	padding: 1.7em 0 0;
	position: relative;
	display: table;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__fare-option-apass th{
	width: 100%;
	padding: 0 0 3px 3px;
	font-weight: normal;
	position: absolute;
	top: 0;
	left: 0;
	vertical-align: middle;
	white-space: nowrap;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__fare-option-apass select{
	min-width: 178px;
}

/* 片道予約時の出発地と到着地の矢印 */
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-content#reservation-tab-02 .m-form__place-apass tbody tr:nth-child(2){
	padding-left: 25px;
	margin-left: 5px;
	position: relative;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-content#reservation-tab-02 .m-form__place-apass tbody tr:nth-child(2) th{
	padding-left: 25px;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-content#reservation-tab-02 .m-form__place-apass tbody tr:nth-child(2)::before{
	content: " ";
	display: block;
	width: 12px;
	height: 19px;
	filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(298deg) brightness(95%) contrast(97%);
	position: absolute;
	transform: translate(0,50%) rotate(-90deg);
	left: 5px;
	bottom: 30%;
	background-position: -416px -27px;
	background-image: url(../img/icn_sprite.svg?20230401);
}

/* 往復予約時の出発地と到着地の矢印 */
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-content#reservation-tab-01 .m-form__place-apass tbody tr:nth-child(2){
	padding-left: 25px;
	margin-left: 5px;
	position: relative;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-content#reservation-tab-01 .m-form__place-apass tbody tr:nth-child(2) th{
	padding-left: 25px;
}
.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-content#reservation-tab-01 .m-form__place-apass tbody tr:nth-child(2)::before{
	content: " ";
	display: block;
	width: 12px;
	height: 19px;
	filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(298deg) brightness(95%) contrast(97%);
	position: absolute;
	transform: translate(0,50%) rotate(-90deg);
	left: 5px;
	bottom: 30%;
	background-size: 500px 500px;
	background-position: -108px -48px;
	background-image: url(../img/icn_sprite.svg?20230401);
}

}


/* SP */
@media only screen and (max-width: 767px) {
	.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__fare-option-apass th{
		width: 45px;
		white-space: nowrap;
		vertical-align: middle;
		font-weight: normal;
	}
	.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__fare-option-apass td{
		width: 100%;
		padding: 8px 0 0 15px;
		vertical-align: middle;
	}
	.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__fare-option-apass .m-frm-select,
	.m-form-cont#snav1 .apass-reservation-tab .apass-reservation-tab-layout .m-form__fare-option-apass select{
		width: 100%;
	}
}