@charset "UTF-8";

/* @class */
.contents {
	padding-top: 0; }
.section {
	width: 100%;
	min-width: 960px; }
	.section .in-section {
		width: 960px;
		margin: 0 auto;
		padding: 40px 0; }

	.m-moreinfo a {
		display: inline-block;
		position: relative;
		max-width: 100%;
		padding: 10px 2em 12px 1em;
		border-radius: 4px;
		background-color: rgb(38, 139, 186);
		color: #fff;
		font-weight: bold;
		text-align: left; }
		.m-moreinfo a:hover,
		.m-moreinfo a:focus {
			text-decoration: none;
			opacity: .5;
			-webkit-transition: 0.3s ease;
			transition: 0.3s ease; }

a.moreinfo {
	display: inline-block;
	position: relative;
	color: #333;
	padding-right: 1em;
	font-size: .75rem; }
	a.moreinfo::after {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		width: .5em;
		height: .5em;
		border-top: 2px solid #333;
		border-right: 2px solid #333;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg); 
		vertical-align: middle;
		content: ""; }

a.btn-close {
	display: inline-block;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 5px 1em;
	background-color: #333;
	color: #fff;
	font-size: .875rem;
	line-height: 1; }

a.m-button {
	display: inline-block;
	position: relative;
	max-width: 100%;
	padding: 12px 1em;
	border-radius: 4px;
	background-color: rgb(38, 139, 186);
	color: #fff;
	font-size: 1.125rem;
	font-weight: bold;
	text-align: left; }
	a.m-button:hover,
	a.m-button:focus {
		text-decoration: none;
		background-color: rgb(146, 197, 220);
		opacity: 1;
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease; }
	a.m-button.mark-arrow {
		padding-right: 2em !important; }

.btn-search {
	display: block;
	padding: 13px 1em;
	border-radius: 4px;
	background-color: rgb(251, 145, 0);
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	text-align: center; }

.m-attention {
	display: table;
	position: relative;
	margin-top: 0;
	width: 428px;
	border: 1px solid red;
	border-radius: 4px;
	background-color: #fff;
	color: red;
	font-weight: bold; }
	.m-attention > div {
		display: table-cell;
		padding: 8px;
		vertical-align: middle; }

@media screen and (max-width: 768px) {
	.section {
		min-width: 100%; }
		.section .in-section {
			width: 100%;
			max-width: 768px;
			padding: 40px 20px; }
	a.moreinfo.sp {
		margin: 20px auto 0;
		padding: 10px 2em 10px 1em;
		border-radius: 4px;
		background-color: rgb(38, 139, 186);
		color: #fff;
		font-size: .875rem;
		font-weight: bold; }
		a.moreinfo.sp::after {
			top: 0;
			bottom: 0;
			right: 1em;
			border-top: 2px solid #fff;
			border-right: 2px solid #fff; }
	.m-attention {
		width: 100%; }
}

/* mainvisual */
.mainvisual {
    width: 100%;
    min-width: 1300px;
    margin: 0 auto;
    background-image: url(/hon/NewContent/Images/home/mainvisual.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; }
    .mainvisual .in-mainvisual {
    	position: relative;
    	width: 1300px;
    	height: 542px;
    	margin: auto; }

/* corona */
#corona-pic {
    display: block;
    position: absolute;
    right: 530px;
    bottom: 20px;
    width: 295px; }
#mobilecorona-pic {
    display: none;
}

/* disaster */
#disaster, #important-information {
    display: block;
	position: absolute;
	right: -40px;
	bottom: 20px;
	width: 338px;
    height: 190px;
	padding: 10px 15px;
	border: 1px solid #fff;
	border-radius: 4px;
	background-color: rgba(51, 51, 51, 0.5);
	color: #fff; }
	#disaster h3, #important-information h3 {
		margin-bottom: 10px;
		line-height: 1.2; }
		#disaster h3 span {
			margin-right: .5em;
			color: rgb(255, 190, 0); }
    #important-information a {
        color: inherit;
        text-decoration: underline; }

#mobiledisaster, #important-information {
    display: none;
    position: absolute;
    right: -40px;
    bottom: 20px;
    width: 338px;
    height: 185px;
    padding: 10px 15px;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: rgba(51, 51, 51, 0.5);
    color: #fff; }
    #mobiledisaster h3, #important-information h3 {
        margin-bottom: 10px;
        line-height: 1.2; }

            #mobiledisaster h3 span {
                margin-right: .5em;
                color: rgb(255, 190, 0);
            }

#covidvideo {
    position: absolute;
    right: 320px;
    bottom: 20px;
    height: 133px;
    width: 180px;
    box-sizing: content-box;
    padding: 5px 5px;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: rgba(51, 51, 51, 0.5);
    color: #fff;}
    #covidvideo iframe{
        width: 180px;
        height: 135px;
    }
    #mobilecovidvideo {
        display: none;
    }
#tabsName {
	width: 90px;
	position: absolute;
	top: 30px;
	left: 30px; }
	#tabsName > a {
		display: block;
		height: 79px;
		margin-bottom: 1px;
		padding: 45px 0 0;
		background-color: #999;
		background-repeat: no-repeat;
		background-position: center 5px;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		line-height: 1;
		text-decoration: none;
		text-align: center; }
	#tabsName a:last-of-type {
		margin-bottom: 0; }
		#tabsName a.current {
			background-color: #fff;
			color: rgb(38, 139, 186); }
	#tabsName .name-highway {
		background-image: url(/hon/NewContent/Images/home/icon-tab-highway.png); }
		#tabsName .name-highway.current {
			background-image: url(/hon/NewContent/Images/home/icon-tab-highway_on.png); }
	#tabsName .name-air {
		background-image: url(/hon/NewContent/Images/home/icon-tab-airportline.png); }
			#tabsName .name-air.current {
		background-image: url(/hon/NewContent/Images/home/icon-tab-airportline_on.png); }
	#tabsName .name-tour {
		background-image: url(/hon/NewContent/Images/home/icon-tab-tours.png); }
			#tabsName .name-tour.current {
				background-image: url(/hon/NewContent/Images/home/icon-tab-tours_on.png); }
	#tabsName .name-route {
		background-image: url(/hon/NewContent/Images/home/icon-tab-routelist.png); }
		#tabsName .name-route.current {
			background-image: url(/hon/NewContent/Images/home/icon-tab-routelist_on.png); }
#tabsBodyExpo,
#tabsBody {
	position: absolute;
	top: 30px;
	left: 120px; }
	#tabsBodyExpo *,
	#tabsBody * {
		line-height: 1.2;
	}
	#tabsBodyExpo a:hover,
	#tabsBodyExpo a:focus,
	#tabsBody a:hover,
	#tabsBody a:focus {
		text-decoration: none;
	}
	.tabs-box {
		display: none;
		width: 338px;
		height: 319px;
		padding: 20px;
		background-color: #fff;	}
		.tabs-box h2 {
			margin-bottom: 11px; }

@media screen and (max-width: 1300px) {
	.mainvisual {
		background-size: auto; }
}

@media screen and (max-width: 768px) {
    .ads-right {
        display: none;
    }
	.mainvisual {
		min-width: 100%;
		background-image: none; }
		.mainvisual .in-mainvisual {
			width: 100%;
			height: auto; }
    #corona-pic {
        display:none; }
    #mobilecorona-pic {
        display: block;
        width: 100%;
        text-align: center;
        position: static;
    }
    #disaster, #important-information {
        display: none;
    }

    #mobiledisaster, #important-information {
        display: block;
        width: 100%;
        position: static;
        padding: 15px 20px;
        border: none;
        border-radius: 0;
        background: #333;
    }
    #covidvideo {
        display:none;
    }
    #mobilecovidvideo {
        display: block;
        position: static;
        width: auto;
        height: 200px;
    }
        #mobilecovidvideo iframe {
            height: inherit;
            width: 100%;
        }
	#tabsName {
		display: table;
		table-layout: fixed;
		position: static;
		width: 100%;
		/*margin-left: 6%;*/
	}
		#tabsName > a {
			display: table-cell;
			vertical-align: top;
			border-right: 1px solid #fff; }
			#tabsName > a.current {
				background-color: rgb(38, 139, 186);
				color: #fff; }
			#tabsName a:last-of-type {
				border: none; }
		#tabsName .name-highway.current {
			background-image: url(/hon/NewContent/Images/home/icon-tab-highway.png); }
		#tabsName .name-air.current {
			background-image: url(/hon/NewContent/Images/home/icon-tab-airportline.png); }
		#tabsName .name-tour.current {
			background-image: url(/hon/NewContent/Images/home/icon-tab-tours.png); }
		#tabsName .name-route.current {
			background-image: url(/hon/NewContent/Images/home/icon-tab-routelist.png); }
	#notice02 {
		padding: 15px 20px;
		background-color: rgb(255, 239, 234); }
		#notice02 * {
			line-height: 1.2; }
		#notice02 .layout-table > * {
			vertical-align: middle; }
		#notice02 h2 {
			position: relative;
			width: 7em;
			padding: 0 1em 0 2em;
			color: rgb(254, 7, 1);
			font-size: 1rem;
			text-align: center;
			white-space: nowrap; }
			#notice02 h2.icon-exclamation::before {
				position: absolute;
				margin: auto;
				font-size: 1.5em;
				font-weight: normal;
				vertical-align: middle;
				content: ""; }
			#notice02 h2.icon-exclamation::before {
				left: 0;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				text-align: center;
				content: "\f071";
				font-family: FontAwesome; }
		#notice02 h3 {
			font-size: 1rem; }
			#notice02 h3 a {
				display: block;
				position: relative;
				padding-right: 1em; }
				#notice02 h3 a::after {
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto;
					vertical-align: middle;
					content: ""; }
				#notice02 h3 a::after {
					right: 0;
					width: 0.5em;
					height: 0.5em;
					border-top: 2px solid #333;
					border-right: 2px solid #333;
					-webkit-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					transform: rotate(45deg); }
	#tabsBody {
		position: static;
		width: 100%;
	}
	#tabsBodyExpo {
		position: static;
		width: 94%;
		margin-left: 6%;
	}
	.tabs-box {
		width: 100%;
		height: auto; }
}


#tabHighway {
	display: block; }
	#tabHighway .tabs-box-flex .order-1 {
		text-align: right;
		margin-bottom: 12px; }
		#tabHighwayFav {
			display: inline-block;
			position: relative;
			padding: 8px 2em 8px 1em;
			border: 1px solid rgb(251, 145, 0);
			border-radius: 4px;
			color: rgb(251, 145, 0);
			font-size: 0.875rem;
			font-weight: bold; }
			#tabHighwayFav:hover,
			#tabHighwayFav:focus {
				background-color: rgb(251, 145, 0);
				color: #fff;
				-webkit-transition: 0.3s ease;
				transition: 0.3s ease; }
			#tabHighwayFav::after {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 1em;
				width: 0.5em;
				height: 0.5em;
				margin: auto;
				border-top: 2px solid rgb(251, 145, 0);
				border-right: 2px solid rgb(251, 145, 0);
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				transform: rotate(45deg);
				vertical-align: middle;
				content: ""; }
			#tabHighwayFav:hover::after,
			#tabHighwayFav:focus::after {
				border-top: 2px solid #fff;
				border-right: 2px solid #fff; }
	#tabHighway .tabs-box-flex .wrap-order-2 {
		margin-bottom: 20px; }
		#tabHighway .wrap-order-2 > .order-2 {
			-js-display: flex;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 12px; }
			#tabHighway .wrap-order-2 .wrap-from-to {
				-webkit-flex: 1;
				flex: 1;
				padding-right: 6px; }
				#tabHighwayFrom {
					width: 100%;
					margin-bottom: 6px; }
				#tabHighwayTo,
				#tabHighwayDate {
					width: 100%; }
					#tabHighwayFrom > a,
					#tabHighwayTo > a,
					#tabHighwayDate > a {
						display: block;
						position: relative;
						padding: 10px 10px 10px 1em;
						border: 1px solid #ccc;
						border-radius: 4px;
						font-size: .875rem; }
						#tabHighwayDate .icon-calendar::after {
							position: absolute;
							margin: auto;
							font-weight: normal;
							vertical-align: middle;
							content: ""; }
						#tabHighwayDate .icon-calendar::after {
							right: 10px;
							top: 50%;
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
							content: "\f073";
							font-family: FontAwesome; }
			#tabHighwayReplace {
				width: 36px;
				border: 1px solid #ccc;
				border-radius: 4px; }
				#tabHighwayReplace > a {
					display: block;
					position: relative;
					padding: 13px 0;
					text-align: center;
					vertical-align: middle; }
	#tabHighwaySub {
		position: absolute;
		top: 0;
		left: 338px;
		width: 498px;
		overflow: hidden; }
		#tabHighwaySubBody {
			position: relative;
			padding: 20px;
			background-color: #eee;
			transform: translate3d(-498px, 0, 0);
			-o-transform: translate3d(-498px, 0, 0);
			-ms-transform: translate3d(-498px, 0, 0);
			-moz-transform: translate3d(-498px, 0, 0);
			-webkit-transform: translate3d(-498px, 0, 0);
			/* slide speed */
			transition: all 1000ms ease;
			-o-transition: all 1000ms ease;
			-ms-transition: all 1000ms ease;
			-moz-transition: all 1000ms ease;
			-webkit-transition: all 1000ms ease; }
		#tabHighwaySubBody.show {
			transform: translate3d(0, 0, 0);
			-o-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			display:block !important;
		}
			#tabHighwaySubBody .tabs-sub-box {
				margin-bottom: 20px; }
				#tabHighwaySubBody .tabs-sub-box p {
					height: 128px;
					font-size: .875rem;
					line-height: 1.6; }
			#tabHighwaySub h3 {
				color: rgb(38, 139, 186);
				margin-bottom: 12px; }
			#tabHighwaySub .order-3 {
				float: right; }
			#tabHighwaySub li {
				margin-bottom: 6px; }
				#tabHighwaySub ul li:last-of-type {
					margin-bottom: 0; }
			#tabHighwaySub li a {
				display: block;
				width: 100%;
				overflow: hidden;
				padding: 10px 1em 10px 1em;
				border: 1px solid #ccc;
				border-radius: 4px;
				background-color: #fff;
				color: #333;
				white-space: nowrap; }

@media screen and (max-width: 768px) {
	#tabHighway {}
		#tabHighway .tabs-box-flex {
			-js-display: flex;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap; }
		#tabHighway .tabs-box-flex > * {
			width: 100%; }
		#tabHighway .tabs-box-flex .order-1 {
			-webkit-box-ordinal-group: 1;
			-ms-flex-order: 1;
			-webkit-order: 1;
			order: 1;
			margin: 30px 0 0;
			text-align: left; }
	#tabHighwayFav {
		padding: 0 0 0 1em;
		border: none;
		color: #333;
		text-align: left; }
	#tabHighwayFav:hover,
	#tabHighwayFav:focus {
		background: none;
		color: #333; }
		#tabHighwayFav::after {
			content: none; }
		#tabHighwayFav::before {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 0;
			height: 0;
			margin: auto;
			border: 5px solid transparent;
			border-left: 5px solid #333;
			vertical-align: middle;
			content: ""; }
			#tabHighwayFav.is-open::before {
				border: 5px solid transparent;
				border-top: 5px solid #333;}
		#tabHighwaySub {
			position: static;
			width: 100%; }
			#tabHighwaySub li a {
				white-space: normal; }
			#tabHighwaySubBody {
				display: none;
				transform: none; }
			#tabHighwaySubBody .tabs-sub-box {
				-js-display: flex;
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				-webkit-flex-wrap: wrap;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				width: 100%; }
				#tabHighwaySubBody .tabs-sub-box .order-3 {
					webkit-box-ordinal-group: 1;
					-ms-flex-order: 1;
					-webkit-order: 1;
					order: 1;
					float: none; }
				#tabHighwaySubBody .tabs-sub-box h3 {
					width: 100%; }
				#tabHighwaySubBody .tabs-sub-box ul {
					width: 100%; }
				#tabHighwaySubBody .tabs-sub-box p{
					height:auto;
					width:100%; }
}

#tabAir {}
.tabs-box#tabAir { }
	#tabAir .copy {
		margin-bottom: 10px; }
	#tabAirPlace {
		padding: 0; }
		#tabAirPlace ul.level-1 {
			position: relative;	}
			#tabAirPlace ul.level-1 > li {
				position: static; }
				#tabAirPlace ul.level-2 {
				 	display: none;
				 	position: absolute;
				 	top: 0;
				 	left: 318px;
				 	width: 600px; }
				 #tabAirPlace ul.level-2 > li {
				 	position: static;
				 	width:	600px; }
				 	#tabAirPlace ul.level-3 {
				 		position: absolute;
				 		display: none;
				 		top: 0;
				 		left: 300px;
				 		width: 300px; }
				 		#tabAirPlace ul.level-3 > li {
				 			position: static; }
				#tabAirPlace ul li a {
					display: block;
					position: relative;
					width: 300px;
					padding: 8px 2em 8px 10px;
					background: #fff; }
					#tabAirPlace ul li a:after {
						position: absolute;
						top: 0;
						bottom: 0;
						right: 1em;
						width: 0.5em;
						height: 0.5em;
						margin: auto;
						border-top: 2px solid #333;
						border-right: 2px solid #333;
						-webkit-transform: rotate(45deg);
						-ms-transform: rotate(45deg);
						-moz-transform: rotate(45deg);
						transform: rotate(45deg);
						vertical-align: middle;
						content: ""; }
	#tabAirDate > a {
		display: block;
		position: relative;
		/*margin-top: 12px;*/
		padding: 10px 10px 10px 1em;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: .875rem; }
		#tabAirDate .icon-calendar::after {
			position: absolute;
			margin: auto;
			font-weight: normal;
			vertical-align: middle;
			content: ""; }
			#tabAirDate .icon-calendar::after {
				right: 10px;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				content: "\f073";
				font-family: FontAwesome; }

#tabAirPlace ul.level-1 > li > a {
	width: 338px;
	margin-left: -20px;
	padding-left: 20px;
	border-bottom: 1px solid rgb(246, 246, 246);
	color: rgb(38, 139, 186);
	font-weight: bold; }
	#tabAir #tabAirPlace ul.level-1 > li > a::after {
		border-top: 2px solid rgb(38, 139, 186);
		border-right: 2px solid rgb(38, 139, 186); }

#tabAirPlace ul.level-2 > li > a {
	background-color: rgb(246, 246, 246);
	border-bottom: 1px solid #fff; }
#tabAirPlace ul.level-3 > li > a {
	background-color: #eee;
	border-bottom: 1px solid #fff; }
#tabAirPlace a.current {
	background-color: rgb(227, 243, 251) !important; }

@media screen and (max-width: 768px) {
	#tabAirPlace {
		margin-bottom: 20px; }
	#tabAirPlace ul.level-1 > li {
		margin-bottom: 10px; }
		#tabAirPlace ul.level-1 > li > a {
			display: block;
			width: 100%;
			margin: 0;
			border: 1px solid rgb(38, 139, 186);
			border-radius: 4px; }
			#tabAirPlace ul.level-1 > li > a.current {
				background-color: rgb(38, 139, 186) !important;
				color: #fff; }
			#tabAirPlace ul.level-1 > li > a::after {
				content: none; }
	#tabAirPlace ul.level-2 {
		position: static;
		width: 100%;
		margin-top: 10px; }
		#tabAirPlace ul.level-2 > li {
			width: 100%;
			margin-bottom: 10px; }
			#tabAirPlace ul.level-2.level-last > li {
				margin-bottom: 0; }
			#tabAirPlace ul.level-2 > li > a { 
				padding-left: 20px; }
				#tabAirPlace ul.level-2 > li > a::after {
					content: none; }
				#tabAirPlace ul.level-2.level-last > li > a::after {
					content: ""; }
		#tabAirPlace ul li > a {
			width: 100%; }
	#tabAirPlace ul.level-3 {
		position: static;
		width: 100%; }
			#tabAirPlace ul.level-3 > li { }
				#tabAirPlace ul.level-3 > li > a { 
					padding-left: 40px; }
}

#tabTour {
	position: relative; }
	#tabTour .ut-position { 
		position: relative; }
		#tabTour .ut-position .copy {
			position: absolute;
			top: 0;
			left: 0; }
	#tabTour .figure {
		height: 201px; }
		#tabTour .figure img { 
		 position: absolute;
		 top: 20px;
		 right: 20px; }
	#tabTour .tabs-box-flex {
		-js-display: flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		width: 100%; }
		#tabTour select {
			width: 158px;
			padding: 10px 1em;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: .875rem; }
		#tabTour .tabs-box-flex .order-2 {
			width: 128px; }

@media screen and (max-width: 768px) {
	#tabTour .ut-position .copy {
		position: static; }
	#tabTour .figure {
		height: auto;
		margin: 12px 0; }
		#tabTour .figure img {
			position: static;
			margin: auto; }
	#tabTour .tabs-box-flex {
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap; }
		#tabTour select {
			width: 100%;
			margin-bottom: 15px; }
		#tabTour .tabs-box-flex .order-2 {
			width: 100%; }
}

#tabRoute {}
	#tabRoute .copy {
		margin-bottom: 10px; }
	#tabRoutePlace ul {
		-js-display: flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap; }
		#tabRoutePlace li {
			width: 48%;
			margin-bottom: 5px; }
			#tabRoutePlace a {
				display: block;
				padding: 8px 1em;
				border: 1px solid rgb(38, 139, 186);
				border-radius: 4px;
				color: rgb(38, 139, 186);
				font-size: .875rem;
				font-weight: bold;
				text-align: center; }
				#tabRoutePlace a:hover,
				#tabRoutePlace a:focus {
					background-color: rgb(38, 139, 186);
					color: #fff;
					-webkit-transition: 0.3s ease;
					transition: 0.3s ease; }

@media screen and (max-width: 768px) {
	#tabRoutePlace a {
		padding: 10px 1em; }
}

#tabsOthers {
	position: absolute;
	top: 355px;
	left: 30px; }
	#tabsOthers * {
		line-height: 1.2; }
	#tabsOthers .m-attention {
		margin-bottom: 10px; }
	#tabsOthers .layout-flex {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap; }
		#tabsOthers .layout-flex > * {
			width: 48%; }
			#tabsOthers .to-service {
				padding-left: 56px;
				background-image: url(/hon/NewContent/Images/home/pic-tabsother-ticket.png);
				background-repeat: no-repeat;
				background-position: 8px center; }
			#tabsOthers .to-highway {
				padding-left: 56px;
				background-image: url(/hon/NewContent/Images/home/pic-tabsother-smartphone.png);
				background-repeat: no-repeat;
				background-position: 8px center; }

@media screen and (max-width: 768px) {
	#tabsOthers {
		position: static;
		padding: 30px 20px;
		background-color: #eee; }
		#tabsOthers .m-attention .figure {
			background: none;
			color: red; }
		#tabsOthers .m-attention .body {
			padding-left: 0; }
}

@media screen and (max-width: 480px) {
	#tabsOthers .layout-flex > * {
		width: 100%;
		margin-bottom: 10px; }
	#tabsOthers .layout-flex > a:last-of-type {
		margin-bottom: 0; }
}

/* bus */
.section-bus {
	min-width: 1300px;
	background-color: rgb(38, 139, 186); }
	.section-bus .in-section {
		width: 1300px;
		padding: 0; }
		.section-bus .layout-table {
			table-layout: fixed;
			width: 100%;}
		.section-bus .layout-table > div {
			vertical-align: middle;
			text-align: center; }
		.section-bus .layout-table .layout-left {
			width: 530px;
			padding: 20px 20px 20px 0;
			background-color: rgb(38, 139, 186); }
		.section-bus .layout-table .layout-right {
			padding: 20px 0 0 40px;
			background-color: #fff; }
			.section-bus .layout-table .layout-left h2 {
				color: #fff;
				font-size: 1.5rem; }
			.section-bus .performance.layout-flex {
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				align-items: center; }
				.section-bus .performance .ut-bg-circle {
					width: 4em;
					height: 4em;
					margin-right: 5px; }
					.section-bus .performance .bus-route {
						margin-left: 20px; }
					.section-bus .performance .ut-bg-circle h3 {
						position: relative;
						top: 50%;
						color: rgb(38, 139, 186);
						line-height: 1;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%); }
					.section-bus .performance p {
						color: #fff;
						font-weight: bold;
						font-size: 56px;
						/*font-size: 5vw;*/
						letter-spacing: -0.05em;
						text-align: center; }
						.section-bus .performance p span {
							margin-left: 5px;
							font-size: 1.5rem;
							letter-spacing: normal; }
			.section-bus .layout-right ul {
				-ms-flex-wrap: wrap;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				align-items: center; }
				.section-bus .layout-right li {
					margin: 0 20px 20px 0; }

.triangle-r {
	position: relative; }
	.triangle-r::after {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		vertical-align: middle;
		content: ""; }
	.triangle-r::after {
		display: block;
		right: -40px;
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-left: 20px solid rgb(38, 139, 186); }

@media screen and (max-width: 768px) {
	.section-bus {
		min-width: 100%; }
		.section-bus .in-section {
			width: 100%; }
			.section-bus .layout-table .layout-left {
				width: 100%; } 
	.triangle-r::after {
		content: none; }
		.section-bus .performance .ut-bg-circle {
			width: 10vw;
			height: 10vw; }
		.section-bus .performance h3 {
			font-size: 3vw; }
		.section-bus .performance p {
			font-size: 10vw;  }
			.section-bus .performance p span { 
				font-size: 4vw; }
}

/* feature */
.section-feature {
	background-color: rgb(242, 242, 242); }
	.section-feature .in-section {
		padding: 30px 0; }
		.section-feature .layout-flex {
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between; }
			.hoverbox {}
				.hoverbox .figure {
					position: relative;
					overflow: hidden; }
					.hoverbox .figure img {
						max-width: 100%; }
						.hoverbox .figure a {
							display: block;
							position: absolute;
							z-index: 2;
							bottom: -85%;
							left: 0;
							width: 100%;
							height: 100%;
							padding: 10px 20px 20px;
							background: rgba(0, 0, 0, 0.5);
							text-decoration: none;
							-webkit-transition: 0.3s ease;
							transition: 0.3s ease; }
						.hoverbox .figure a h3 {
							text-align: center;
							color: #fff;
							margin-bottom: 20px; }
						.hoverbox .figure a p {
							color: #fff; }
						.hoverbox .figure a:focus,
						.hoverbox .figure:hover a {
							bottom: 0; }

@media screen and (max-width: 768px) {
	.section-feature {
		background: #fff; }
		.section-feature .in-section {
			padding: 20px 20px 0; }
			.section-feature .layout-flex {
				display: block; }
				.section-feature .hoverbox { 
					max-width: 580px;
					margin: 0 auto 20px; } 
					.section-feature .hoverbox:last-of-type {
						margin-bottom: 0; }
					.section-feature .hoverbox .figure a {
						position: static; }
}

/* pickup */
.section-pickup {}
    .section-pickup .in-section {
        padding-top: 15px;
    }
        .section-pickup .in-section .subsection {}
        .section-pickup .subsection h2 {
            margin-bottom: 20px;
            padding: 13px 20px;
        }

        .section-pickup .subsection h2 span {
            margin-right: .5em;
        }

    .section-pickup .in-section-notify-bnr {
        padding:0;
        margin: 0;
        }
        .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr {}
        .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr h2 {
            margin: 0;
            padding:10px 0;
            text-align: center;
    
        }
            .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr h2 a {
                background-color: #fff;
                color: red;
                font-weight: bold;
            }
                .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr h2 a span {}
                    .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr h2 a span.subsection-notify-bnr--i {
                        color: red;
                        color: #ffffff;
                        background-color: #ff0000;
                        font-size: 1em;
                        font-weight: bold;
                        padding: 0 1em;
                        font-size: smaller;
                    }
                    .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr h2 a span.subsection-notify-bnr--ttl {
                        font-size: smaller;
                    }
	.section-pickup .subsection#notice {
		margin-bottom: 40px;
		background-color: rgb(255, 239, 234); }
		.section-pickup .subsection#notice h2 {
			background-color: rgb(254, 7, 1);
			color: #fff; }
		.section-pickup .subsection#notice .m-moreinfo a {
			background-color: rgb(254, 7, 1); }
	.section-pickup .subsection#noriai {}
        .section-pickup .subsection#noriai h2,
        .section-pickup .subsection#placesearch_main h2{
            background-color: rgb(38, 139, 186);
            color: #fff; }
		.section-pickup .subsection#noriai h3 {
			margin-bottom: 20px;
			font-size: 1.75rem; }
		.section-pickup .subsection#noriai .figure {
			float: left;
			margin-right: 30px; }
		.section-pickup .subsection#noriai .body-noriai {
			padding: 0; }
        #placesearch_main .map_area {
            margin: 0 10% -10em 10%;
            width: 94%;
            height: 35em;
        }
        #placesearch_main .tab_direction{
            margin: 0 10%;
            width: 80%;
        }
        #placesearch_main .balloon_area{
            margin-right: 10%;
            margin-left: 10%;
        }
        #placesearch_main .map_area {
            padding-left: 0;
        }

	.section-pickup .subsection#pr-company {
        padding-top: 20px;
	}
        .section-pickup .subsection#pr-company h2 {
            background-color: rgb(38, 139, 186);
            color: #fff; }
		.section-pickup .subsection#pr-company .body-pr-company {
			padding-left: 30px; }

@media screen and (max-width: 768px) {
	.section-pickup {}
		.section-pickup .subsection h2 {
			display: none;
			margin-right: -20px;
			margin-left: -20px; }
		.section-pickup .subsection#noriai h3 {
			font-size: 1.125rem; }
			.section-pickup .subsection#noriai h3 .br::before {
				content: none; }
		.section-pickup .subsection#noriai .figure {
			float: none;
			margin: 0 auto 20px;
			text-align: center; }
		.section-pickup .subsection#noriai .body-noriai {
			padding: 0; }
        .section-pickup .subsection#placesearch_main {
            display: none;
        }
		.section-pickup .subsection#noriai .body-pr-company {
			padding: 0; }
        .section-pickup .in-section-notify-bnr {}
            .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr h2 {
                padding: 3px 0; }
                    .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr h2 a span.subsection-notify-bnr--i {
                        font-size: small;
                    }
                    .section-pickup .in-section .subsection.section-pickup__subsection-notify-bnr h2 a span.subsection-notify-bnr--ttl {
                        font-size: small;
                    }
}


/* ownmedia */
.section-ownmedia {
	display: block;
}

.section-ownmedia-sp {
	display: none;
}

.section-ownmedia .subsection#ombanner div#omtitle {
	display: inline-block;
	background-color: #1d7151;
	color: #fff;
	height: 92px;
	margin-bottom: 20px;
	padding: 8px 51px;
	border-radius: 25px;
}

		.section-ownmedia .subsection#ombanner div span#busrepoLogo img {
			/*margin-right: .5em;*/
			width: 38%;
			margin-bottom: -34px;
		}

		.section-ownmedia .subsection#ombanner div span#busrepoTitle {
			font-size: 1.125rem;
			font-weight: bold;
			line-height: 5.5;
		}
    .section-ownmedia .subsection#ombanner .busrepo div#wordpress_blog_sp {
        display: none;
    }

	.section-ownmedia .subsection#ombanner .busrepo div#wordpress_blog {
		display: block;
	}


@media screen and (max-width: 768px) {
	.section-ownmedia-sp {
		display: block;
	}

	.section-ownmedia {
		display: none;
	}
	.section-ownmedia-sp .in-section {
		padding: 0px 20px;
		/*margin-left: -5px;*/
	}
	.section-ownmedia-sp .subsection#ombanner div#omtitle {
		margin-right: -20px;
		margin-left: -20px;
		display: inline-block;
		background-color: #1d7151;
		color: #fff;
		/*height: 107px;*/
		margin-bottom: 10px;
		padding: 8px 51px;
		text-align: center;
		padding-left: 4%;
		padding-right: 5%;
	}

			.section-ownmedia-sp .subsection#ombanner div span#busrepoLogo img {
				/*margin-right: 0.5em;*/
				/*margin-top: 11px;*/
				width: 40%;
				/*margin-left: -44px;*/
				/*float: left;*/
			}

			.section-ownmedia-sp .subsection#ombanner div span#busrepoTitle {
				font-size: 1.125rem;
				font-weight: bold;
				line-height: 1.5;
				float: right;
				/*margin-left: 96px;
				margin-right: -20px;
				margin-top: -60px;*/
				width: 100%;
			}
}
@media screen and (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
	.section-ownmedia-sp .subsection#ombanner div span#busrepoLogo img {
		margin-right: 0.5em;
		margin-top: -8px;
		width: 46%;
		margin-left: -43px;
		float: left;
	}

	.section-ownmedia-sp .subsection#ombanner div span#busrepoTitle {
		font-size: 1.125rem;
		font-weight: bold;
		line-height: 1.5;
		float: right;
		width: 21em;
	}
}

@media screen and (max-width:411px) {
	.section-ownmedia-sp .subsection#ombanner div span#busrepoLogo img {
		/*margin-right: .5em;*/
		width: 60% !important;
		/*margin-left: 23% !important;*/
		/*margin-bottom: -34px;*/
	}

	.section-ownmedia-sp .subsection#ombanner div span#busrepoTitle {
		width: 100% !important;
	}
}
/* performance */
.section-performance {
	min-width: 1300px;
	background-color: rgb(38, 139, 186);
}
	.section-performance .in-section {
		width: 1300px;
		min-height: 423px;
		padding: 40px 0;
		background-image: url(/hon/NewContent/Images/home/photo-performance.png);
		background-repeat: no-repeat;
		background-position: right top;
		background-size: auto 100%; }
	.section-performance h2 {
		width: 624px;
		margin-bottom: 30px;
		color: #fff;
		font-size: 1.75rem;
		line-height: 1.2;
		text-align: center; }
	.section-performance .layout-flex {
		width: 624px;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap; }
		.section-performance .layout-flex > div {
			width: 300px;
			margin-bottom: 20px;
			background-color: #fff; }
			.section-performance .layout-flex > div h3 {
				background-color: #333;
				padding: 3px 0;
				color: #fff;
				text-align: center; }
			.section-performance .layout-flex > div p {
				color: rgb(38, 139, 186);
				font-weight: bold;
				font-size: 56px;
				letter-spacing: -0.05em;
				text-align: center; }
				.section-performance .layout-flex > div p span {
					margin-left: 5px;
					color: #333;
					font-size: 1.125rem;
					letter-spacing: normal; }

@media screen and (max-width: 768px) {
	.section-performance {
		min-width: 100%; }
		.section-performance .in-section {
			width: 100%;
			min-height: auto;
			padding-right: 20px;
			padding-left: 20px;
			background-image: none; }
			.section-performance  h2 {
				width: 100%;
				text-align: center; }
			.section-performance .layout-flex {
				width: 100%; }
				.section-performance .layout-flex > div {
					width: 48%; }
					.section-performance .layout-flex > div h3 {
						font-size: 3vw; }
					.section-performance .layout-flex > div p {
						font-size: 6vw; }
						.section-performance .layout-flex > div p span {
							font-size: 3vw; }
}

/* information */
.section-information {}
	.section-information h2 {
		margin-bottom: 20px;
		padding: 13px 20px;
		background-color: #333;
		color: #fff; }
		.section-information h2 span {
			margin-right: 5px; }
	.section-information .wrap-article {
		height: 100%;
		max-height: 30em;
		overflow-y: auto; }
		.section-information .wrap-article article {
			padding: 20px 0;
			border-bottom: 1px solid #ccc; }
			.section-information .wrap-article article header {
				letter-spacing: -0.5em; }
				.section-information .wrap-article article header > * {
					letter-spacing: normal; }
			.section-information article time {
				display: inline-block;
				width: 7em; }
			.section-information article h3 {
				display: inline-block;
				margin-bottom: .5em; }
			.section-information article .body {
				margin-left: 7em; }
		.section-information .m-moreinfo a {
			background-color: rgb(38, 139, 186); }

@media screen and (max-width: 768px) {
	.section-information h2 {
		margin-right: -20px;
		margin-left: -20px; }
	.section-information .wrap-article {
		max-height: 100%;
		margin: 0 -20px;
		overflow-y: visible; }
		.section-information .wrap-article article {
			padding: 20px; }
	.section-information article time,
	.section-information article h3 {
		display: block; }
		.section-information article .body {
			margin: 0; }
}

#sliding {
	position: absolute;
	top: 29px;
	left: -8px;
	width: 3%;
	height: 59%;
	background-color: #005CAF;
	transition: left 0.3s ease;
	z-index: 150;
	padding-top: 5px;
	padding-bottom: 5px;
	--col-gap: 2rem;
	--barH: 1rem;
	--roleH: 2rem;
	--flapH: 2rem;
	background: #fb9100;
	background-image: linear-gradient(rgb(57 47 47 / 32%) var(--roleH), rgb(0 0 0 / 21%) calc(var(--roleH) + 0.5rem), rgb(0 0 0 / 4%) calc(var(--roleH) + 0.5rem + 5rem));
	clip-path: polygon( calc(var(--col-gap) / -2 - 5px) 0, calc(100% + var(--col-gap) / 2 + 5px) 0, calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)), 50% 100%, calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH)) );
}

/*#sliding-border {
	position: absolute;
	background: red;
	top: 29px;
	left: -8px;
	width: 3%;
	height: 60%;
	--col-gap: 2rem;
	--barH: 1rem;
	--roleH: 2rem;
	--flapH: 2rem;
	background: #268bba;
	clip-path: polygon(calc(var(--col-gap) / -2 - 5px) 0, calc(100% + var(--col-gap) / 2 + 5px) 0, calc(100% + var(--col-gap) / 2 + 5px) calc(100% - var(--flapH)), 50% 100%, calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH)));
}*/

.hideSliding{
	display: none;
}

.showSliding{
	display: unset;
}

#sliding.active {
	height: auto;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 2%;
	padding-bottom: 4%;
	width: 33%;
	clip-path: polygon(0% 0%, 90% 0, 100% 50%, 88% 100%, 0% 100%);
}

#sliding-arrow {
	font-size: 30px;
	color: white;
	left: 401px;
	position: absolute;
	top: 43%;
}

#sliding-content h4 {
	color: white;
	padding-bottom: 2%;
}

#section-title {
	writing-mode: vertical-rl;
	text-orientation: upright;
	margin-left: 26%;
	color: antiquewhite;
	padding-top: 35%;
}

@media (min-width: 769px){
	#sliding.extendheight {
		height: 136%;
		width: 45%;
	}
}

/* Mobile-specific styles */
@media (max-width: 768px) {
	#sliding {
		width: 47%;
		height: 28%;
		left: -166px; /* Hidden by default */
		transition: left 0.3s ease;
		top: initial;
		z-index: 200;
	}

		#sliding.active {
			left: 0; /* Slide in */
			height: auto;
			padding: 5%;
			width: 70%;
			--col-gap: 2rem;
			--barH: 1rem;
			--roleH: 2rem;
			--flapH: 2rem;
			clip-path: polygon( calc(var(--col-gap) / -2 - 5px) 0, calc(100% + var(--col-gap) / 2 + 5px) 0, calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)), 50% 100%, calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH)) );
		}

	#section-title {
		margin-left: 85.5%;
	}

	#sliding.extendheight {
		height: 80%;
	}
}

@media (max-width: 391px){
	#sliding{
		width: 52%;
	}
}

#sliding-content.hidden,
#section-title.hidden {
	display: none;
}

	#sliding-content.show,
	#section-title.show {
		display: block;
	}

#sliding-content{
	display: none;
}

#expo-logo{
	zoom:20%;
}

#expoBusList {
	padding: 0;
}

#expoBusList ul.level-1 {
	position: relative;
}

#expoBusList ul.level-1 > li {
	position: static;
}

#expoBusList ul.level-2 {
	display: none;
	position: absolute;
	top: 0;
	left: 318px;
	width: 600px;
}

#expoBusList ul.level-2 > li {
	position: static;
	width: 600px;
}

#expoBusList ul.level-3 {
	position: absolute;
	display: none;
	top: 0;
	left: 300px;
	width: 300px;
}

	#expoBusList ul.level-3 > li {
		position: static;
	}

	#expoBusList ul li a {
		display: block;
		position: relative;
		width: 144px;
		padding: 8px 2em 8px 10px;
		background: #fff;
	}

		#expoBusList ul li a:after {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 1em;
			width: 0.5em;
			height: 0.5em;
			margin: auto;
			border-top: 2px solid #333;
			border-right: 2px solid #333;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			transform: rotate(45deg);
			vertical-align: middle;
			content: "";
		}

#expoBusDate > a {
	display: block;
	position: relative;
	/*margin-top: 12px;*/
	padding: 10px 10px 10px 1em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: .875rem;
}

#expoBusDate.js-dialog-date {
	width: 90%;
}

#expoBusDate .icon-calendar::after {
	position: absolute;
	margin: auto;
	font-weight: normal;
	vertical-align: middle;
	content: "";
}

#expoBusDate .icon-calendar::after {
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	content: "\f073";
	font-family: FontAwesome;
}

#expoBusDate .dialog-date{
	width:100% !important;
}

#expoBusList ul.level-1 > li > a {
	width: 60%;
	/*	margin-left: -20px;*/
	padding-left: 20px;
	border-bottom: 1px solid rgb(246, 246, 246);
	color: rgb(38, 139, 186);
	font-weight: bold;
}

#expoBusList ul.level-1 > li > a::after {
	border-top: 2px solid rgb(38, 139, 186);
	border-right: 2px solid rgb(38, 139, 186);
}

#expoBusList ul.level-2 > li > a {
	background-color: rgb(246, 246, 246);
	border-bottom: 1px solid #fff;
	margin-left: -109px;
}

#expoBusList ul.level-3 > li > a {
	background-color: #eee;
	border-bottom: 1px solid #fff;
}

#expoBusList a.current {
	background-color: rgb(51, 51, 51) !important;
}

@media screen and (max-width: 768px) {
	#expoBusList {
		margin-bottom: 20px;
	}

		#expoBusList ul.level-1 > li {
			margin-bottom: 10px;
		}

			#expoBusList ul.level-1 > li > a {
				display: block;
				width: 100%;
				margin: 0;
				border: 1px solid rgb(38, 139, 186);
				border-radius: 4px;
			}

				#expoBusList ul.level-1 > li > a.current {
					background-color: rgb(51, 51, 51) !important;
					color: #fff;
				}

				#expoBusList ul.level-1 > li > a::after {
					content: none;
				}

		#expoBusList ul.level-2 {
			position: static;
			width: 100%;
			margin-top: 10px;
		}

			#expoBusList ul.level-2 > li {
				width: 100%;
				margin-bottom: 10px;
			}

			#expoBusList ul.level-2.level-last > li {
				margin-bottom: 0;
			}

			#expoBusList ul.level-2 > li > a {
				padding-left: 20px;
				color: #333333;
				width: auto;
				margin-left: 10%;
			}

				#expoBusList ul.level-2 > li > a::after {
					content: none;
				}

			#expoBusList ul.level-2.level-last > li > a::after {
				content: "";
			}

		#expoBusList ul li > a {
			width: 100%;
		}

		#expoBusList ul.level-3 {
			position: static;
			width: 100%;
		}

			#expoBusList ul.level-3 > li {
			}

				#expoBusList ul.level-3 > li > a {
					padding-left: 40px;
				}

	#expoBusDate.js-dialog-date{
		width: initial;
	}
}