@charset "utf-8";

/*##################################################
　上書き
##################################################*/
#limo .main_in,
#salad .main_in {
	overflow: visible;
}

.c-timeTable_block,
.js-spOpeGuide {
	position: relative;
}


/*##################################################
　共通｜空港、高速
##################################################*/
/* SP 解説モーダル */

/*左右にスライド ←　削除*/
.sp-ope-guide-slideNone {
	.sp-ope-guide {
		.-slide {
			display: none;
		}
	}
}

.sp-ope-guide {
	
	& * {
		box-sizing: border-box;
	}
	
	&.overlay {
		display: none;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.2);
		position: absolute;
		z-index: 1000;
		top: 0;
		left: 0;
		
		.btn_area {
			width: calc(100% - (20px * 2));
			max-width: 420px;
			height: auto;
			background: #fff;
			text-align: center;
			margin: 40px auto 20px;
			padding: 30px;
			border-radius: 10px;
			position: sticky;
			top: 40px;
			left: 0;
			transform: translate(0,0);
			z-index: 100;
			box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
			
			.ttl {
				font-weight: bold;
			}
			
			p {
				padding: 15px;
			}
			
			button {
				display: block;
				margin: 20px auto 0 auto;
				background: #55514D;
				color: #fff;
				padding: 9px 40px 9px 25px;
				border: none;
				border-radius: 26px;
				position: relative;
				
				&:after {
					content: "";
					position: absolute;
					top: 18px;
					right: 13%;
					transform: translateY(-50%);
					width: 13px;
					height: 13px;
					background-image: url(../images/common/icon-close_w.svg);
					background-size: contain;
					background-repeat: no-repeat;
				}
				
				:hover {
					background: #333;
				}
			}
		}

		.l-caption_sp {
			margin-bottom: 10px;
			
			&:first-child {
				margin-bottom: 25px;
			}
			
			figcaption {
				font-size: 16px;
				font-weight: 500;
				margin-bottom: 5px;
			}
		}
	}
}

/* SP 時刻詳細モーダル */
.c-timeDetail {
	
	& * {
		box-sizing: border-box;
	}

	.c-mask_bk {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #333;
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}

	&.appear {
		.c-mask_bk {
			opacity: .8;
			visibility: visible;
		}
	}

	/* モーダル本体のスタイル */
	.c-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		background: #fff;
		padding: 30px;
		border-radius: 16px;
		z-index: 1001;
		opacity: 0;
		visibility: hidden;
		border: 1px solid #333;
		transition: all 0.3s ease;
		width: calc(100% - (24px * 2));
		max-width: none;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
		transform: translate(-50%, -50%) scale(1.05);
		
		p {
			color: #333;
			line-height: 1.6;
			margin-bottom: 25px;
			font-size: 16px;
			text-align: center;
		}
	}

	&.appear {
		.c-modal {
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, -50%) scale(1);
		}
	}

	.c-modal_wrap {
		position: relative;
	}

	.c-modal_label {
		width: 40px;
		margin: 0;
		
		p {
			width: 40px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-bottom: 0;
			background-color: #646464;
			line-height: 1;
			color: #fff;
			border-radius: 10px;
			font-size: 16px;
			font-weight: 600;
		}
		
		&.-red {
			p {
				background-color: #DB530E;
			}
		}
	}

	.c-modal_table {
		width: 100%;
		margin: 0 auto;
		
		.c-modal_table_item {
			display: flex;
			flex-wrap: nowrap;
			align-content: center;
			align-items: center;
			justify-content: flex-start;
			padding: 20px 0;
			border-bottom: 1px solid #000;
			
			&:last-child {
				border-bottom: none;
			}
			
			td {
				width: 33px;
				font-weight: bold;
				
				&.c-text_time {
					font-size: 16px;
					line-height: 1.6;
					text-align: center;
					white-space: nowrap;
					width: 90px;
					line-height: 1;
					font-weight: bold;
				}
				
				&.c-text_time_datail {
					font-size: 16px;
					line-height: 1.6;
					font-weight: bold;
					width: calc(100% - 40px - 90px);
					line-height: 1.4;
				}
			}
		}
	}
	
	.c-modal_button__prev,
	.c-modal_button__next {
		position: absolute;
		width: 38px;
		height: 120px;
		padding: 0;
		border: 0;
		top: 50%;
		z-index: 10;
		transition: transform 0s 1s ease;
	}

	.c-modal_button__prev {
		background-color: #646464;
		margin: 0 0 0 -24px;
		left: 0;
		border-radius: 0 8px 8px 0;
		transform: translate(-100%, -50%);
		
		
		&:after {
			content: "";
			position: absolute;
			top: 20px;
			left: 38%;
			transform: translateX(-50%);
			width: 8px;
			height: 13px;
			background-image: url(../images/common/icon-arrow.svg);
			background-size: contain;
			background-repeat: no-repeat;
			transform: scale(-1, 1);
		}
	}

	&.appear {
		.c-modal_button__prev {
			transform: translate(0, -50%);
			transition: transform .3s .6s ease;
		}
	}

	.c-modal_button__next {
		margin: 0 -24px 0 0;
		background-color: #45A814;
		left: auto;
		right: 0;
		border-radius: 8px 0 0 8px;
		transform: translate(100%, -50%);
		
		&:after {
			content: "";
			position: absolute;
			top: 20px;
			right: 34%;
			transform: translateX(-50%);
			width: 8px;
			height: 13px;
			background-image: url(../images/common/icon-arrow.svg);
			background-size: contain;
			background-repeat: no-repeat;
		}
	}

	&.appear {
		.c-modal_button__next {
			transform: translate(0, -50%);
			transition: transform .3s .6s ease;
		}
	}

	.c-modal_button__prev span,
	.c-modal_button__next span {
		color: white;
		margin: auto;
		padding: 45px 0 20px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		display: inline-block;
		color: #fff;
		font-size: 14px;
	}

	/* 閉じるボタンのスタイル */
	.modal_close-btn {
		width: calc(18px * 2);
		height: calc(18px * 2);
		background: transparent;
		color: #333;
		border: none;
		cursor: pointer;
		transition: all 0.2s ease;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -20px;
		right: -20px;
		z-index: 10;
		
		&:after {
			content: '';
			width: 18px;
			height: 18px;
			margin: 0;
			display: inline-block;
			position: relative;
			inset: auto;
			background: url(../images/common/icon-close.svg) no-repeat center / contain;
		}
	}
}

/* table */
.modern_style {
	width: 100%;
	border-collapse: separate !important;
	table-layout: fixed;
	border-top: 0 !important;
	border-right: 0 !important;
	position: relative;
	cursor: default;
	
	.js-timeDetail {
		
		@media screen and (max-width: 799px) {
			text-decoration: underline;
			cursor: pointer;
		}
	}
	
	tr {
		border: 0 !important;
	}
	
	th {
		font-feature-settings: 'palt';
		vertical-align: middle;
		border-spacing: 0;
		box-shadow:inset 0 1px 0 0 rgba(0,0,0,.1);
	}

	td {
		vertical-align: middle;
		border-spacing: 0;
		box-shadow:inset 0 1px 0 0 rgba(0,0,0,.1);
	}

	.-on {

		&:not(th) {
			background-color: #fff4f3 !important;

			&.-on-center:not(th) {
				color: black;
				background-color: #ffd6d2 !important;
			}
		}
	}

	thead {
		tr {
			background-color: white;
			position: relative;
			
			&:last-child {
				th {
					
				}
			}
		}
	}

	tbody {
		td {
			white-space: nowrap;
		}
	}
	
	
}


/*##################################################
　空港バス
##################################################*/
#limo {
	
	#timeline {
		position: relative;
		
		.modern_style {
			thead {
				th {
					font-size: 14px;
					padding-block: 20px;
					
					@media screen and (max-width: 799px) {
						font-size: 13px;
						padding-block: 10px;
						
					
						@media screen and (max-width: 499px) {
							font-size: 12px;
							padding-block: 10px;
						}
					}
				}
				
				&.modern_style__sticky {
					th {
						position: sticky;
						top: -1px;
						z-index: 100;
					}
				}
			}

			tbody {
				tr {
					&.odd {
						background-color: #f3f3f3;
					}
					
					th {
						color: inherit;
						font-size: 14px;
						background-color: #fbf4ef;
					}

					td {
						font-size: 16px;
						border-top: 0;
						border-left: 0;
				
						@media screen and (max-width: 799px) {
							font-size: 15px;
						}
					}
				}
			}
		}
	}
}


/*##################################################
　高速バス
##################################################*/
#salad {
	
	.scroll-wrap {
		position: relative;
	}
	
	.modern_style {
		border-left: 0 !important;
		
		thead {
			tr {
				background-color: white;
				
				&:first-of-type {
					th:not(:first-of-type) {
						color: #333;
						background-color: #ecf6e8 !important;
						
						&.-on {
							background-color: #dff0d8 !important;
						}
					}
					
					th {
						font-size: 14px;
					}
				}
				
				th,
				th.fixed02 {
					font-size: 12px;
					padding-block: 10px;
					background-color: #646464;
					border-top: 0;
					border-bottom: 0;
					border-left: 0;
					box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .5);
				}

				td {
					font-size: 14px;
					white-space: nowrap;
					padding-block: 10px;
					border-top: 0;
					border-bottom: 0;
					border-left: 0;
					
					@media screen and (max-width: 999px) {
						font-size: 13px;
						
						@media screen and (max-width: 799px) {
							font-size: 14px;
						}
					}
				
					&:nth-of-type(even) {
						background-color: #f3f3f3;
					}
				}
			}

			&.modern_style__sticky {
				th:first-of-type {
					position: sticky !important;
					left: 0;
					z-index: 100;
				}
			}
		}

		tbody {
			th,
			th.fixed02 {
				color: white;
				font-size: 12px;
				vertical-align: middle;
				background-color: #45A814;
				border-top: 0;
				border-bottom: 0;
				border-left: 0;
				box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .5);
			}

			td {
				font-size: 14px;
				white-space: nowrap;
				vertical-align: middle;
				border-top: 0;
				border-bottom: 0;
				border-left: 0;
				
				@media screen and (max-width: 999px) {
					font-size: 13px;
					
					@media screen and (max-width: 799px) {
						font-size: 14px;
					}
				}
				
				&:nth-of-type(even) {
					background-color: #f3f3f3;
				}
			}
			
			&.modern_style__sticky {
				th:first-of-type {
					position: sticky !important;
					left: 0;
					z-index: 50;
				}
			}
		}
		
	}
}

/* 高速バス イレギュラー */
.uwajima_page,
.tsuwano_page,
.narutoku_osaka_page,
.narutoku_kobe_page,
.kawanoe_page {
	
	#salad {
		
		tr.bl {
			td {
				background-color: #c5d9f1 !important;
			}
		}
		
		#ank1,
		#ank2,
		#ank3 {
			thead {
				th {
					@media screen and (max-width: 799px) {
						font-size: 12px;
						white-space: inherit;
					}
				}
			}
			tbody {
				td {
					@media screen and (max-width: 799px) {
						font-size: 10px;
						white-space: inherit;
					}
				}
			}
		}

		#ank1,
		#ank2 {

			.modern_style {
				thead {
					th {
						color: #fff;
						background-color: #646464 !important;

						&.c {
							background-color: #45a814 !important;
						}
					}
				}
				tbody {
					& td {
						background-color: #fff;
						
						&:nth-of-type(even) {
							background-color: #fff;
						}
					}
				}
			}
		}
		
		#ank3 {
			.modern_style {
				thead {
					th {
						color: #fff;
						background-color: #45a814 !important;
					}
				}
				tbody {
					th {
						color: #333;
						background-color: unset !important;
					}
					td {				
						&:nth-of-type(even) {
							background-color: unset;
						}
					}
				}
			}
		}
	}
}

.narutoku_osaka_page,
.narutoku_kobe_page {
	& #salad {
		& #ank1, & #ank2 {
			& .modern_style {
				& thead {
					th {
						position: sticky;
						
						@media screen and (max-width: 799px) {
							position: unset;
						}
					}
				}
				
				& tbody {
					tr:nth-child(even) {
						background: #f0f0f0;
						
						td {
							background-color: transparent;
						}
					}
				}
			}
		}
	}
}

/*##################################################
　左右矢印
##################################################*/
.table-scroll-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 60px;
	height: 60px;
	border-radius: 100vmax;
	background: rgba(0,0,0,.3);
	color: white;
	font-weight: 700;
	border: none;
	cursor: pointer;
	display: none;
	transition: .3s ease;
	transform-origin: center;
	z-index: 100;
	
	@media screen and (max-width: 799px) {
		width: 40px;
		height: 40px;
	}
	
	&:hover {
		background: rgba(0,0,0,.6);
	}

	&.-left {
		margin-left: 30px;
		left: 0;
		
		@media screen and (max-width: 799px) {
			margin-left: 15px;
		}
	}
	
	&.-right {
		margin-right: 30px;
		right: 0;
		
		@media screen and (max-width: 799px) {
			margin-right: 15px;
		}
	}
}


/*##################################################
　水平スクロール：スマホのみ
##################################################*/
.js-horizonScroll-spOnly {
	
	@media screen and (max-width: 799px) {
		overflow-x: auto;
		position: relative;
		
		table {
			min-width: 880px;
			
			thead {
				position: relative;
				z-index: 200;
				transition: transform .1s ease-out;
				will-change: transform;
				
				th {
					z-index: 10;
				}
			}
			
			tbody {
				position: relative;
				z-index: 0;
			}
		}
	}
	
	&.js-horizonScroll-spOnly-arrow {
		
		& + .table-scroll-arrow,
		& + .table-scroll-arrow + .table-scroll-arrow {
			opacity: 0;
			visibility: hidden;
			
			@media screen and (max-width: 799px) {
				opacity: unset;
				visibility: visible;
				transition: 0s;
			}
		}
		
		.fixed02 {
			position: unset !important;
		}
	}
}