@charset "UTF-8";
/* ▼▼▼ トップ
======================================================*/
/* ▼ KEY VISUAL
----------------------------------------*/
.kv_lead {
	color: transparent;
	font-size: 0;
	line-height: 0;
}
	.kv_scroll {
		position: absolute;
		bottom: 30px;
		left: 0;
		right: 0;
		text-align: center;
	}
/* ▼ コンセプト
----------------------------------------*/
#concept .read {
	margin-bottom: 60px;
}
	#concept .read h3{
		margin-bottom: 30px;
		font-size: 35px;
		font-size: 1.944em;
		font-weight: normal;
		text-align: center;
	}
	#concept .read p{
		padding: 0 15px;
		text-align: center;
	}
	#concept .flex_box p{
		flex:1;
	}
/* TIME TABLE
 * -------------------------------------------------- */
.c-timeTable_tbody {
	width: 49%;
	margin-right: 10px;
}
	.c-timeTable_tbody:last-child {
		margin-right: 0;
	}
	.c-timeTable_tbody table{
		width: 100%;
		border: solid 2px #ababab;
		margin-bottom: 5px;
		border-collapse: collapse;
	}
	.c-timeTable_tbody caption{
		padding: 10px 0;
    background: #f8f8f8;
    font-weight: bold;
    border: solid 2px #ababab;
    border-bottom: none;
    text-align: center;
	}
	.c-timeTable_row {
		border-top: solid 1px #ababab;
	}
	.c-timeTable_head {
		width: 275px;
		padding: 5px 15px;
		font-weight: normal;
		vertical-align: middle;
	}
	.c-timeTable_grid {
		display: table;
		width: 100%;
	}
	.c-timeTable_head .e-name,
	.c-timeTable_head .e-type {
		display: table-cell;
		vertical-align: middle;
	}
	.c-timeTable_head .e-name {
		text-align: left;
	}
	.c-timeTable_head .e-type {
		text-align: right;
	}
	.c-timeTable_data {
		padding: 5px;
		font-size: 20px;
		text-align: center;
		border-left: solid 1px #ababab;
	}
	.c-timeTable_data + .c-timeTable_data {
		background: #fff2fa;
		line-height: 1.2;
	}
	.c-timeTable_tbody p.kome{
		font-size: 85%;
	}
/* 路線図 */
.map .pass_link{
	font-size: 24px;
	font-size: 1.333em;
	font-weight: bold;
}
	.map .pass_link::before{
		display: inline-block;
		content: "●";
		margin-right: 5px;
		color: #007BC7;
		font-size: 17px;
		font-size: 0.944em;
		vertical-align: 3px;
	}
	.map .pass_link a {
		color: #007BC7;
		text-decoration: underline;
	}
	.map .pass_link a:hover {
		text-decoration: none;
	}
/* 料金 */
.price ul.price_list li{
	flex: 1;
	background: #fff;
	padding: 20px;
	margin-right: 15px;
}
	.price ul.price_list li:last-child{
		margin-right: 0;
	}
	.price ul.price_list li h4{
		color: #007BC7;
		font-size: 22px;
		font-size: 1.2em;
		text-align: center;
		font-weight: normal;
	}
	.price ul.price_list li > p,
	.price ul.price_list li .detail p {
		text-align: center;
	}
	.price ul.price_list li p.boder_b{
		padding-bottom: 10px;
		margin-bottom: 25px;
		border-bottom: 1px solid #007BC7;
		color: #007BC7;
	}
	.price ul.price_list li p.boder_b span{
		font-size: 38px;
		font-size: 2.111em;
	}
	.price ul.price_list li .detail{
		margin-bottom: 20px;
		font-size: 14px;
		font-size: 0.778em;
	}
	.price ul.price_list li .detail p span{
		display: inline-block;
		padding-left: 10px;
		font-size: 22px;
		font-size: 1.222em;
		line-height: 1.3;
	}
	.price ul.price_list li .detail p:first-child::after {
		display: block;
		content:"";
		width: 30px;
		height: 30px;
		margin: 0 auto;
		background: url(../img/price_list_icon01.png)no-repeat top center/contain;
	}
	.btn-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 60px;
		border-radius: 5px;
		background: #007BC7;
		box-shadow: 0 3px 6px rgba(0, 0, 0,.16);
		color: #fff;
		font-size: 16px;
		font-size: 0.889em;
		line-height: 1.3;
		text-align: center;
		position: relative;
		}
	.btn-open::after {
		display: block;
		content:"";
		width: 15px;
		height: 15px;
		background: url(../img/price_list_icon02.png)no-repeat top center/contain;
		position: absolute;
		top: 35%;
		right: 15px;
	}

	/* ポップアップウインドウの設定 */
	.popup {
	  background-color: #fff;
	  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	  display: none;
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: auto;
	  width: 80vw;
	  height: 100vw;
	  max-width: 1000px;
	  max-height: 700px;
	  overflow-y: scroll;
		z-index: 9999;
	}
	/* チェックボックスの初期設定 */
	.popup-on{
	  display: none;
	}
	/* チェックされたらポップアップウインドウを開く */
	/* .popup-on:checked + .popup{ */
	.popup-on:checked + .popup{
	  display: block;
	}
	/* 閉じるアイコン（右上） */
	.icon-close{
		width: 60px;
		height: 60px;
	  background: #A3A3A3;
	  color: #fff;
	  font-size: 40px;
		font-size: 2.222em;
		line-height: 60px;
		text-align: center;
	  position: absolute;
	  right: 0;
		z-index: 99999;
	}
	/* 閉じるボタン */
	.btn-close{text-align: right;}
	.btn-close span{
		display: inline-block;
		width: 130px;
		height: 80px;
		background: #A3A3A3;
		padding-right: 15px;
		margin-right: -35px;
		color: #fff;
		font-size: 24px;
		font-size: 1.333em;
		text-align: center;
		cursor: pointer;
		line-height: 80px;
		position: relative;
	}
	.btn-close span::before{
		display: inline-block;
		content:"×";
		margin-right: 15px;
		font-size: 40px;
		vertical-align: -5px;
	}
	.btn-close span::after{
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 80px 40px;
		border-color: transparent transparent #A3A3A3 transparent;
		position: absolute;
		top: 0;
		left: -40px;
		bottom: 0;
		margin: auto;
		}
	/* ポップアップの内容 */
	.popup-content{
	  width: 94%;
		height: 100vw;
		max-height: 800px;
	  margin: 30px auto;
	}
	.popup h5 {
		margin-bottom: 20px;
		color: #007BC7;
		font-size: 22px;
		font-size: 1.222em;
		font-weight: normal;
	}
	.popup table{
		margin-bottom: 30px;
		border-collapse: collapse;
	}
	.popup table tr th,
	.popup table tr td {
		border: 1px solid #707070;
		width: 90px;
		height: 70px;
		font-size: 16px;
		font-size: 0.889em;
		text-align: center;
		vertical-align: middle;
	}
	.popup table tr th{
		background: #DBF1FC;
		font-weight: normal;
	}
	.popup table tr .bg_none{
		background: none!important;
	}
	.popup table tr .boder_none{
		border: none;
	}
	.popup table tr td {
		font-size: 20px;
		font-size: 1.111em;
		line-height: 1.3;
	}
	/* 京都 - 賢島 */
	.price_list li:nth-child(2) .popup table tr th{
		background: #ECF8E5;
	}
	/* 近鉄名古屋 - 賢島 */
	.price_list li:nth-child(3) .popup table tr th{
		background: #FFF4FE;
	}
	/* スクロールバー perfect-scrollbar */
	.table_wrap{
		overflow: auto;
		position: relative;
		margin: 0 0 20px;
	}
	.table_wrap.ps--active-x {
		padding-bottom:15px;
		margin-bottom: 10px;
	}
	.table_wrap .ps__rail-x {
		background: #eee!important;
		opacity: 1!important;
		border-radius: 10px;
	}
	.table_wrap .ps__thumb-x {
		background-color: #003E8E;
		height: 12px;
		}
	/* 通常スクロール */
	.table_wrap::-webkit-scrollbar {
		height: 12px;
	}
	.table_wrap::-webkit-scrollbar-track {
		border-radius: 10px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	}
	.table_wrap::-webkit-scrollbar-thumb {
		background-color: #003E8E;
		border-radius: 10px;
	}

/* ▼ サービス
----------------------------------------*/
#info {
	padding-top: 0;
}
#service {
	padding: 60px 0;
	background: url(../img/info_bg.jpg)no-repeat top center/cover;
}
	#service .title_boder_img{
		color: #fff;
	}
	#service ul.service_list li{
		width: 31.1%;
		margin: 0 20px 20px 0;
	}
	#service ul.service_list li:nth-child(3n){
		margin-right: 0;
	}
	#service ul.service_list li > label{
		display: block;
		position: relative;
	}
	#service ul.service_list li > label:hover{
		cursor: pointer;
		opacity: .7;
	}
	#service ul.service_list li > label::before{
		display: block;
		content: "";
		width: 50px;
		height: 50px;
		background: rgba(51, 51, 51,.8);
		color: #fff;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	#service ul.service_list li > label::after {
		display: block;
		content: "";
		width: 15px;
		height: 15px;
		background: url(../img/price_list_icon02.png)no-repeat top center/contain;
		position: absolute;
		bottom: 17px;
		right: 17px;
	}
/* ポップアップ */
#service .popup-content .flex_box{
	margin-bottom: 40px;
}
	#service .popup-content .flex_box .photo{
		flex: 1;
		margin-right: 30px;
	}
	#service .popup-content .flex_box .txt{
		flex: 1;
	}
	#service .popup-content .flex_box .txt h5{
		margin-bottom: 0;
	}
	#service .popup-content .flex_box .txt h4{
		margin-bottom: 10px;
		color: #007BC7;
		font-size: 20px;
		font-size: 1.111em;
		font-weight:normal;
		line-height: 1.5;
	}
	#service .popup-content .flex_box .txt p{
		font-size: 16px;
		font-size: 0.889em;
	}
/* ▼ 快適な旅をサポート
----------------------------------------*/
#support p.mb10{
	font-size: 22px;
	font-size: 1.222em;
}
	#support ul.flex_box li{
		flex: 1;
		margin-right: 30px;
	}
	#support ul.flex_box li:last-child{
		margin-right: 0;
	}

/* ▼ しまかぜWi-Fiサービス
----------------------------------------*/
#wifi .inner {
	border: 1px solid #007BC7;
	padding: 40px 50px;
}
	#wifi .inner .flex_box .txt{
		flex: 1.5;
		margin-right: 40px;
	}
	#wifi .inner .flex_box .txt h3{
		margin-bottom: 30px;
		color: #007BC7;
		font-size: 26px;
		font-size: 1.444em;
		font-weight: normal;
	}
	#wifi .inner .flex_box .txt h3::before{
		display: inline-block;
		content: "";
		width: 102px;
		height: 102px;
		margin-right: 30px;
		background: url(../img/channel_title_img.png) no-repeat top center/contain;
		vertical-align: middle;
	}
	#wifi .inner .flex_box .photo{
		flex: 1;
	}
	#wifi .inner.channel .flex_box .kome{
		color: #007BC7;
		font-weight: bold;
	}
	#wifi .inner .flex_box p.small{
		font-size: 12px;
		font-size: 0.667em;
		text-align: right;
	}
	#wifi .inner h4{
		margin-bottom: 20px;
		color: #007BC7;
		font-size: 16px;
		font-size: 0.889em;
		font-weight: bold;
	}
	#wifi .inner ul.content_box li {
		width: 33.333%;
		margin-bottom: 40px;
	}
	#wifi .inner ul.content_box li:nth-child(n+3) {
		margin-bottom: 0;
	}
	#wifi .inner ul.content_box li p{
		display: flex;
		align-items: center;
		font-size: 14px;
		font-size: 0.778em;
		font-weight: bold;
	}
	#wifi .inner ul.content_box li p img{
		width: 60px;
		margin-right: 15px;
	}
/* Free Wi-Fi */
#wifi .inner.wifi {
	border: 1px solid #B41A36;
}
	#wifi .inner.wifi .flex_box .txt h3{
		color: #B41A36;
	}
	#wifi .inner.wifi .flex_box .txt h3::before{
		background: url(../img/wifi_title_img.png) no-repeat top center/contain;
	}
/* 映像サービス */
#video_service .flex_box p{
	flex: 1;
	max-width: 620px;
	margin-right: 30px;
}
	#video_service .flex_box p.photo{
		max-width: 340px;
		margin-right: 0;
	}

/* ▼ 時刻表・路線図・料金
----------------------------------------*/
#timetable {
	background: #EFF5FC;
}
/* 時刻表 */
input[type="radio"]{
	display:none;
}
	.tab_area{
		display: flex;
	}
	.tab_area label{
		flex: 1;
		background: #007BC7;
		padding: 20px 0 25px;
		margin-right:10px;
		color:#fff;
		text-align:center;
		font-size: 20px;
		font-size: 1.111em;
		cursor:pointer;
		transition:ease 0.2s opacity;
		position: relative;
	}
	.tab_area label:last-child{
		margin-right: 0;
		}
	.tab_area label::after {
		display: block;
		content: "";
		width: 9px;
		height: 9px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 13px;
		margin: auto;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.tab_area label:hover{
		background: #fff;
		color: #007BC7;
	}
	.tab_area label:hover::after {
		border-top: 1px solid #007BC7;
		border-right: 1px solid #007BC7;
	}
	#tab1:checked ~ .tab_area .tab1_label,
	#tab2:checked ~ .tab_area .tab2_label,
	#tab3:checked ~ .tab_area .tab3_label{
		background: #fff;
		color: #007BC7;
		border-bottom: none;
		position: relative;
	}
	.tab_area label:hover::before,
	#tab1:checked ~ .tab_area .tab1_label::before,
	#tab2:checked ~ .tab_area .tab2_label::before,
	#tab3:checked ~ .tab_area .tab3_label::before{
		content: "";
		display: block;
		width: 100%;
		height: 2px;
		background: #007BC7;
		position: absolute;
		top: 0px;
		left: 0;
	}
	#tab1:checked ~ .tab_area .tab1_label::after,
	#tab2:checked ~ .tab_area .tab2_label::after,
	#tab3:checked ~ .tab_area .tab3_label::after {
		display: none;
	}
	#tab1:checked ~ .panel_area #panel1,
	#tab2:checked ~ .panel_area #panel2,
	#tab3:checked ~ .panel_area #panel3{
		display:block;
	}

	.panel_area{background:#fff;}
	.tab_panel{
		width:100%;
		padding:20px;
		display:none;
	}

/* ご予約・ご購入
----------------------------------------*/
#reservation .read{
	margin-bottom: 40px;
}
	#reservation .read > p{
		text-align: center;
	}
	#reservation .read > p.red{
		color: #FF0000;
	}
	#reservation .btn {
		text-align: center;
	}


/* ▼▼▼ 多言語
====================================================== */
/* 英語
--------------------------------------- */
.c-timeTable_tbody .c-timeTable_data:lang(en) {
	font-size: 100%;
}

/* 簡体語
--------------------------------------- */

/* 繁体語
--------------------------------------- */

/* 韓国語
--------------------------------------- */



/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {
	/* ▼ KEY VISUAL
	----------------------------------------*/
	.kv img{
		width: 100%;
	}
		.kv_scroll {
			display: none;
		}
	/* ▼ コンセプト
	----------------------------------------*/
	#concept .read {
		margin-bottom: 40px;
	}
		#concept .read h3{
			margin-bottom: 20px;
			font-size: 19px;
			font-size: 1.056em;
		}

	/* TIME TABLE
	 * -------------------------------------------------- */
	.c-timeTable_tbody {
		width: 100%;
		margin: 0 auto 20px;
	}
		.c-timeTable_tbody:last-child {
			margin-right: 0;
		}
		.c-timeTable_head {
			width: auto;
			padding: 5px 10px;
		}
		.c-timeTable_head .e-name,
		.c-timeTable_head .e-type {
			display: table-cell;
			vertical-align: middle;
		}
		.c-timeTable_data {
			font-size: 16px;
			font-size: 0.889em;
		}
	/* 路線図 */
	.map .pass_link{
		margin-bottom: 10px;
		font-size: 17px;
		font-size: 1.1em;
		line-height: 1.4;
	}
		.map .pass_link::before{
			font-size: 14px;
			font-size: 0.778em;
			vertical-align: 1px;
		}

	/* 料金 */
	.price ul.price_list li{
		flex: unset;
		width: 100%;
		margin: 0 auto 15px;
	}
		.price ul.price_list li:last-child{
			margin: 0 auto;
		}
		.price ul.price_list li h4{
			font-size: 18px;
			font-size: 1.2em;
		}
		.price ul.price_list li p.boder_b{
			padding-bottom: 6px;
			margin-bottom: 12px;
		}
		.price ul.price_list li p.boder_b span{
			font-size: 27px;
			font-size: 1.6em;
			line-height: 1.3;
		}
		.price ul.price_list li .detail{
			margin-bottom: 15px;
			font-size: 13px;
			font-size: 0.9em;
		}
		.price ul.price_list li .detail p span{
			font-size: 19px;
			font-size: 1.056em;
		}
		.price ul.price_list li .detail p:first-child::after {
			width: 25px;
			height: 25px;
		}
		.btn-open {
			font-size: 15px;
			font-size: 0.833em;
		}
		.btn-open::after {
			width: 13px;
			height: 13px;
			top: 36%;
			right: 10px;
		}
		/* ポップアップウインドウの設定 */
		.popup {
			width: 90vw;
			}
		/* 閉じるアイコン（右上） */
		.icon-close{
			width: 40px;
			height: 40px;
			font-size: 30px;
			line-height: 40px;
		}
		/* 閉じるボタン */
		.btn-close span{
			width: 80px;
			height: 40px;
			padding-right: 0;
			margin-right: -10px;
			font-size: 17px;
			font-size: 0.944em;
			text-align: center;
			cursor: pointer;
			line-height: 39px;
		}
		.btn-close span::before{
			margin-right: 11px;
			font-size: 25px;
			vertical-align: -3px;
		}
		.btn-close span::after{
			border-width: 0 0 40px 20px;
			left: -20px;
		}
		/* ポップアップの内容 */
		.popup-content{
		  margin: 15px auto;
		}
		.popup h5 {
			margin-bottom: 15px;
			font-size: 18px;
			font-size: 1.2em;
		}
		.popup table{
			margin-bottom: 20px;
		}
		.popup table tr th,
		.popup table tr td {
			min-width: 65px;
			height: 50px;
			padding: 0 2px;
			font-size: 11px;
			font-size: 0.9em;
		}
		.popup table tr td {
			font-size: 14px;
			font-size: 1em;
		}

	/* ▼ サービス
	----------------------------------------*/
	#service {
		padding: 40px 0;
	}
		#service ul.service_list li{
			width: 31%;
			margin: 0 10px 10px 0;
		}
		#service ul.service_list li > label::before{
			width: 30px;
			height: 30px;
		}
		#service ul.service_list li > label::after {
			width: 11px;
			height: 11px;
			bottom: 9px;
			right: 9px;
		}
		#service .popup-content .flex_box{
			display: block;
		}
		#service .popup-content .flex_box .photo {
			margin:0 auto 10px;
		}
		#service .popup-content .flex_box .txt h4 {
			font-size: 18px;
			font-size: 1em;
		}
		#service .popup-content .flex_box .txt p {
	    font-size: 15px;
	    font-size: 1em;
	 }

	/* ▼ 快適な旅をサポート
	----------------------------------------*/
	#support p.mb10{
		font-size: 17px;
		font-size: 0.944em;
	}
		#support ul.flex_box li{
			margin-right: 5px;
		}

	/* ▼ しまかぜWi-Fiサービス
	----------------------------------------*/
	#wifi .inner {
		padding: 20px 15px;
	}
		#wifi .inner .sp_block {
			display: block;
		}
		#wifi .inner .flex_box .txt {
			margin: 0 auto;
		}
		#wifi .inner .flex_box .txt h3{
			margin-bottom: 15px;
			font-size: 20px;
			font-size: 1.3em;
		}
		#wifi .inner .flex_box .txt h3 + p{
			margin-bottom: 15px;
		}
		#wifi .inner .flex_box .txt h3::before{
			width: 60px;
			height: 60px;
			margin-right: 10px;
		}
		#wifi .inner .flex_box p.small{
			margin-bottom: 10px;
		}
		#wifi .inner h4{
			margin-bottom: 15px;
		}
		#wifi .inner ul.content_box li {
			width: 48%;
			margin-bottom: 15px;
		}
		#wifi .inner ul.content_box li:nth-child(3),
		#wifi .inner ul.content_box li:nth-child(4) {
			margin-bottom: 15px;
		}
		#wifi .inner ul.content_box li p{
			font-size: 12px;
			font-size: 0.8em;
			line-height: 1.2;
		}
		#wifi .inner ul.content_box li p img{
			width: 40px;
			margin-right: 5px;
		}
	/* Free Wi-Fi */
	#wifi .inner.wifi {
		margin-bottom: 40px;
	}
	/* 映像サービス */
	#video_service .flex_box {
		display: block;
	}
		#video_service .flex_box p{
			margin: 0 auto 15px;
		}
		#video_service .flex_box p.photo{
			margin: 0 auto;
		}

	/* ▼ 時刻表・路線図・料金
	----------------------------------------*/
	/* 時刻表 */
	.tab_area label{
		padding: 12px 0 20px;
		margin-right: 5px;
		font-size: 12px;
		font-size: 0.8em;
	}
		.tab_area label::after {
			width: 7px;
			height: 7px;
			bottom: 10px;
		}
		.tab_panel{
			padding: 15px;
		}

	/* ご予約・ご購入
	----------------------------------------*/
	#reservation .read{
		margin-bottom: 20px;
	}


}