/**
 * 影響範囲をカプセル化するためのカスタマイズCSS
 * theme.cssからカスタマイズの際、少しずつ影響範囲をカプセル化しながら分離
 */

/**
 * 電話番号表示
 * 汎用部品
 */
.odb-telnumber {
	padding: 20px 0;
	background-color: #fff;
	text-align: center;
}
.odb-telnumber--header p {
	margin-bottom: 8px;
	color: #f00;
	font-size: 18px;
	font-weight: bold;
	text-decoration: underline;
}
.odb-telnumber--number {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 5px;
	font-size: 46px;
	font-weight: bold;
}
.odb-telnumber--number a:hover {
	color: #333;
	cursor: default;
	text-decoration: none;
}
.odb-telnumber--number img {
	height: 0.8em;
	margin-right: 0.1em;
}
.odb-telnumber--number .text-red {
	color: #f00;
	font-size: 50px;
}
.odb-telnumber--time {
	margin-top: 5px;
	font-size: 18px;
	letter-spacing: 0.1em;
}
.odb-telnumber--small {
	margin-top: 2px;
}

@media (max-width: 768px) {
	.odb-telnumber--header p {
		font-size: 14px;
	}
	.odb-telnumber--number {
		font-size: 30px;
	}
	.odb-telnumber--number .text-red {
		font-size: 32px;
	}
	.odb-telnumber--time {
		font-size: 14px;
	}
	.odb-telnumber--small {
		font-size: 12px;
	}
}

/* トップページでの表示用調整 */
.odb__app-contact-box--tel .odb-telnumber--header p {
	font-size: 14px;
}
.odb__app-contact-box--tel .odb-telnumber--number {
	font-size: 30px;
}
.odb__app-contact-box--tel .odb-telnumber--number .text-red {
	font-size: 32px;
}
.odb__app-contact-box--tel .odb-telnumber--time {
	font-size: 14px;
}
.odb__app-contact-box--tel .odb-telnumber--small {
	font-size: 12px;
}

/**
 * トップページ
 * https://maas.osakametro.co.jp/odb/
 */
@media (min-width: 993px) {
	.odb__app-contact-box--app_sp {
		display: none;
	}
}
@media (max-width: 992px) {
	.odb__app-contact-box--app_pc {
		display: none;
	}
}

/*
  * 運行エリア 乗降場所へのリンク
	* https://maas.osakametro.co.jp/odb/area/
	*/
.mt-btn__box .mt-btn {
	width: 25%;
	margin-left: 0px;
}

.mt-btn__box .mt-btn a {
	padding: 5px !important;
	line-height: 1.2;
	font-size: 13px;
}

.mt-btn__box {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.mt-btn {
	margin-top: 20px;
	margin-left: 15px;
}
.mt-btn a {
	position: relative;
	min-height: 5em;
	padding: 13px 20px !important;
	border-radius: 5px;
	background-color: #5bc1d8;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-align: center;
}
.mt-btn a.is-disabled {
	background: #efefef;
}
.mt-btn a.is-disabled:hover,
.mt-btn a.is-disabled:active,
.mt-btn a.is-disabled:focus {
	cursor: default;
	text-decoration: none;
	color: #333;
}

#odb-area__togglebox-trigger {
	display: block;
	padding: 0.5em;
	border: 1px solid #333;
	border-radius: 4px;
	color: #333;
	font-size: 18px;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	max-width: 250px;
	margin: auto;
}
#odb-area__togglebox-trigger:hover,
#odb-area__togglebox-trigger:focus,
#odb-area__togglebox-trigger:active {
	color: #333;
}
#odb-area__togglebox.is-close {
	display: none;
}

@media (max-width: 992px) {
	.mt-btn {
		margin-left: 0;
	}
	.mt-btn__box {
		flex-wrap: wrap;
		gap: 0px;
	}
	.mt-btn__box .mt-btn {
		width: 100%;
	}
}

/*
 * モバイルチケット料金表
 * https://maas.osakametro.co.jp/odb/mobile_ticket/
 */
.mobile_ticket_price_list {
	--mobile_ticket_price_list--image-attentionwidth: 260px;
	--mobile_ticket_price_list--body-flexgap: 25px;

	width: 930px;
	max-width: 100%;
	padding: 0 25px;
	margin: auto;
}
@media (max-width: 991px) {
	.mobile_ticket_price_list {
		padding: 0;
	}
}
.mobile_ticket_price_list--body {
	display: flex;
	justify-content: flex-start;
	padding-top: 20px;
	gap: var(--mobile_ticket_price_list--body-flexgap);
}
@media (max-width: 991px) {
	.mobile_ticket_price_list--body {
		flex-direction: column;
	}
}

.mobile_ticket_price_list--footer {
	margin-top: 3em;
}

.mobile_ticket_price_list--footer p {
	margin: 0;
}

.mobile_ticket_price_list--footer .font-color-red {
	text-indent: calc(-1em - 6px);
	padding-left: calc(1em + 6px);
}
.mobile_ticket_price_list--footer .font-color-red em {
	font-style: normal;
	margin-right: 6px;
}

.mobile_ticket_price_list--heading {
	font-weight: bold;
	transform: translateX(-5px);
}
.mobile_ticket_price_list--heading::before {
	content: '■';
	font-size: 40px;
}

/*
 * PCグローバルナビのサブメニューが画面外にはみ出さないよう調整
 */
@media (min-width: 1199px) {
	#header .header-nav-main nav > ul > li.dropdown {
		position: relative;
	}

	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu {
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.mobile_ticket_price_list--image-attention {
	width: var(--mobile_ticket_price_list--image-attentionwidth);
	max-width: 100%;
	text-align: center;
}
@media (max-width: 991px) {
	.mobile_ticket_price_list--image-attention {
		width: 100%;
	}
}
.mobile_ticket_price_list--image-attention img {
	max-width: 100%;
}
@media (max-width: 991px) {
	.mobile_ticket_price_list--image-attention img {
		max-height: 320px;
	}
}

/*
 * モバイルチケット料金表のセクション
 * https://maas.osakametro.co.jp/odb/mobile_ticket/
 */
.mobile_ticket_price_list_section + .mobile_ticket_price_list_section {
	margin-top: 20px;
}

.mobile_ticket_price_list_section--wrapper {
	flex: 1;
}

.mobile_ticket_price_list_section--heading {
	padding-left: 4px;
	border-left: 5px #333 solid;
	font-weight: bold;
	word-break: keep-all;
}
.mobile_ticket_price_list_section--table {
	width: 100%;
	background: #333;
	border-collapse: separate;
	border-spacing: 1px;
}
.mobile_ticket_price_list_section--table th,
.mobile_ticket_price_list_section--table td {
	padding: 0.8em;
	border: 2px solid #fff;
	font-weight: bold;
}
.mobile_ticket_price_list_section--table th {
	width: 320px;
	background: #5bc1d8;
}
@media (max-width: 767px) {
	.mobile_ticket_price_list_section--table th {
		width: 200px;
	}
}
@media (max-width: 480px) {
	.mobile_ticket_price_list_section--table th {
		width: auto;
	}
}
.mobile_ticket_price_list_section--table td {
	background: #c8e9f3;
}
.mobile_ticket_price_list_section--table td.is-blank {
	background: #e2e2e2;
}

/**
 * 予約方法 アプリでの予約
 * https://maas.osakametro.co.jp/odb/reserve/
 */
.odb-reserve__time-movie {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}
.odb-reserve__time-movie iframe {
	max-height: 50vh !important;
}

/**
 * 運賃とお支払い方法
 * https://test51.contents-preview.com/odb/price-time/
 */
.odb-price-time__box {
	display: flex;
	padding: 20px 0px;
	justify-content: space-around;
	min-height: 100px;
}
@media (max-width: 1199px) {
	.odb-price-time__box {
		justify-content: space-between;
		gap: 10px;
	}
}
@media (max-width: 992px) {
	.odb-price-time__box {
		flex-wrap: wrap;
		gap: 20px;
	}
}

.odb-price-time__box--ttl {
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	background: #000;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	border-radius: 4px;
	padding: 10px 0px;
	margin: 0;
	margin-right: 20px;
}
@media (max-width: 819px) {
	.odb-price-time__box--ttl {
		margin-right: 10px;
	}
}

.odb-price-time__box--ttl--row {
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	background: #000;
	display: inline-block;
	border-radius: 4px;
	padding: 5px 20px;
	margin: 20px 0px 10px 60px;
	min-width: 200px;
	text-align: center;
}
@media (max-width: 1199px) {
	.odb-price-time__box--ttl--row {
		margin-left: 0;
	}
}

.box--ttl--row .odb-price-time__box {
	padding-top: 0px;
	margin: 0px;
}
@media (max-width: 1199px) {
	.box--ttl--row .odb-price-time__box {
		justify-content: center;
		gap: 10px;
		margin: 0px 30px;
	}
}
@media (max-width: 992px) {
	.box--ttl--row .odb-price-time__box {
		margin: 0px 0px;
	}
}

.odb-price-time__box__other__quote .font-color-red {
	text-indent: calc(-1em - 6px);
	padding-left: calc(1em + 6px);
}
.odb-price-time__box__other__quote .font-color-red em {
	font-style: normal;
	margin-right: 6px;
}
.odb-price-time__box--ct-bx {
	padding: 10px 0px;
}

.odb-price-time__box--contents {
	display: flex;
	align-items: flex-start;
}

.odb-price-time__box--contents p {
	margin: 0;
	font-weight: bold;
}
.odb-price-time__box--contents p:nth-of-type(3) span {
	font-size: 11px;
}

.odb-price-time__box--text3 {
	margin-top: 5px !important;
	line-height: 1.4;
}
.odb-price-time__box--mt {
	gap: 10px;
	justify-content: space-between;
}
.odb-price-time__box--mt img {
	height: 80px;
}
.odb-price-time__box--mt p {
	font-weight: normal;
	font-size: 12px;
	line-height: 1.5;
	text-indent: -1em;
	padding-left: 1em;
}
.odb-price-time__discount-link {
	padding-top: 0;
	display: inline;
	font-weight: bold;
	text-decoration: underline;
}

.odb-price-time__box__basic {
	width: 22%;
	margin-right: 10px;
}
@media (max-width: 992px) {
	.odb-price-time__box__basic {
		width: 100%;
	}
}

.odb-price-time__box__secondary {
	width: 31%;
	margin-right: 10px;
}
.odb-price-time__box__secondary .odb-price-time__mobile__title {
	text-align: center;
}
@media (max-width: 992px) {
	.odb-price-time__box__secondary {
		width: 100%;
	}
}

.odb-price-time__box__tertiary {
	flex: 1;
}
.odb-price-time__box__tertiary__cont {
	width: 55%;
}
.odb-price-time__box__tertiary .odb-price-time__mobile__title {
	text-align: center;
}
@media (max-width: 992px) {
	.odb-price-time__box__tertiary {
		width: 100%;
	}
	.odb-price-time__box__tertiary__cont {
		width: 100%;
	}
}

.odb-price-time__box__other {
	width: 75%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
@media (max-width: 992px) {
	.odb-price-time__box__other {
		width: 100%;
	}
}
.odb-price-time__box__other__cont {
	width: calc((100% / 2) - 10px);
}
.odb-price-time__box__other__cont:first-of-type {
	margin-right: 10px;
}
.odb-price-time__box__other__quote {
	width: 100%;
	margin-top: 10px;
}
.odb-price-time__box__other__quote p {
	margin-bottom: 0;
	text-indent: -1em;
	padding-left: 1em;
}
.odb-price-time__box--quick-ride {
	background-color: #acd0ae;
	width: 60% !important;
	border-radius: 8px;
	margin-bottom: 60px;
}
@media (max-width: 992px) {
	.odb-price-time__box--quick-ride {
		width: 100% !important;
		margin-top: 20px;
	}
}
.odb-price-time__box--quick-ride__box {
	width: 100%;
	padding: 20px;
}
.odb-price-time__box--quick-ride__link {
	font-size: 12px;
	margin-bottom: 0;
}
.odb-price-time__box--quick-ride__link span {
	min-width: 70px;
	margin-right: 10px;
	display: inline-block;
}
@media (max-width: 510px) {
	.odb-price-time__box--quick-ride__link span {
		display: block;
	}
}

@media (max-width: 510px) {
	.odb-price-time__box--quick-ride__img {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
}
@media (max-width: 510px) {
	.odb-price-time__box--quick-ride__img img:first-child {
		margin-bottom: 5px;
	}
}
@media (max-width: 1200px) {
	.odb-price-time__box--mt {
		justify-content: flex-start;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}
@media (max-width: 992px) {
	.odb-price-time__box--quick-ride {
		margin-bottom: 0;
	}
}
@media (max-width: 992px) {
	.odb-price-time__discount-link {
		word-break: break-all;
	}
}