@charset "shift_jis";

/* *******************************************************************

	観光周遊バス「びゅうばす」トップページ用CSS（RWD）
	/travel/viewbus/index.html

	01. メインビジュアル
	02. びゅうばすナビ
	03. びゅうばすとは
	04. オススメコース
	05. ご利用方法

******************************************************************* */

/* *******************************************************************

	01. メインビジュアル

******************************************************************* */
#mainVisual-top {
	overflow:hidden;
	max-width:100%;
	max-height:485px;
	background-color: #fff;
}
#mainVisual-top #mvt-inner {
	position: relative;
	margin: 0 auto;
	max-width: 950px;
}
#mainVisual-top #mvt-inner img {
	max-width: 100%;
}
#mainVisual-top #mvt-inner h1 {/* タイトル */
	z-index: 1;
	position: absolute;
	top: 18px;
	left: 20px;
	max-width: 180px;
}
#mainVisual-top #mvt-inner #bus-image {/* びゅうばすのイメージ */
	position: absolute;
	bottom: 38px;
	left: 18px;
}

/* 地図【PC only】 */
#mainVisual-top #mvt-inner #map {
	position: absolute;
	top: 0;
	right: 80px;
	text-align: left;
}
#mainVisual-top #mvt-inner #map ul li {
	box-sizing: border-box;
	margin: 3px;
	border-radius: 5px;
	list-style: none;
}
#mainVisual-top #mvt-inner #map ul li.kitatouhoku {
	position: absolute;
	top: 85px;
	right: -48px;
	background: #47b6cd;
}
#mainVisual-top #mvt-inner #map ul li.minamitouhoku {
	position: absolute;
	top: 198px;
	right: -56px;
}
#mainVisual-top #mvt-inner #map ul li.shinetsu {
	position: absolute;
	bottom: 135px;
	left: 20px;
}
#mainVisual-top #mvt-inner #map ul li.kanto {
	position: absolute;
	bottom: 67px;
	right: -32px;
}

/* スライダー */
#mainVisual-top .bx-wrapper {}
#mainVisual-top .bx-viewport {overflow: visible !important;}
#mainVisual-top ul#slider {}
#mainVisual-top ul#slider li,
#mainVisual-top ul#slider li a {}
#mainVisual-top ul#slider li a img {}
#mainVisual-top .bx-controls {
	margin: 11px 0;
	text-align: center;
}
#mainVisual-top .bx-controls .bx-pager-item {
	display:inline-block;
	margin-right:15px;
}
#mainVisual-top .bx-controls .bx-pager-item:last-child {margin-right: 0;}
#mainVisual-top .bx-pager .bx-pager-item a {
	display:block;
	overflow: hidden;
	width:12px;
	height:12px;
	white-space: nowrap;
	text-indent: 100%;
}
#mainVisual-top .bx-pager .bx-pager-item a {background:url(../img/icon-slide_off.png) 0 0 no-repeat;}
#mainVisual-top .bx-pager .bx-pager-item a.active {background:url(../img/icon-slide_on.png) 0 0 no-repeat;}
#mainVisual-top .bx-default-pager {}


/* 【SP】 ************************************************ */
@media only screen and (max-width: 640px) {
	#mainVisual-top #mvt-inner h1 {/* タイトル */
		top: 3vw;
		left: 3vw;
		max-width: 37vw;
	}
	#mainVisual-top #mvt-inner #bus-image {/* びゅうばすのイメージ */
		bottom: 4vw;
		left: 3vw;
		max-width: 32vw;
	}

}










/* *******************************************************************

	02. びゅうばすナビ

******************************************************************* */
#naviViewbus-top {
	margin-bottom: 30px;
	border-top: solid 3px #e90a1b;
	border-bottom: solid 1px #e3eced;
	width: 100%;
	background: #fff;
}
#naviViewbus-top #nvb-inner {
	margin: 0 auto;
	width: 950px;
}
#naviViewbus-top #nvb-inner ul {
	margin: 8px 0;
	padding: 0;
	background: url(../img/header-line.gif) right top no-repeat;
}
#naviViewbus-top #nvb-inner ul li {
	display: block;
	float: left;
	list-style:none;
	padding: 6px 9px 6px 12px;
	background: url(../img/header-line.gif) left top no-repeat;
}
#naviViewbus-top #nvb-inner ul li a {
	display: block;
	border-radius: 5px;
	padding: 12px 46px 12px 38px;
	background-color: #fff;
}
#naviViewbus-top #nvb-inner ul li a:hover {
	background-color: #fef054;
}
#naviViewbus-top #nvb-inner ul li a:hover img {
	opacity: 1;
}
#naviViewbus-top #nvb-inner ul li a img {
	display: block;
	max-height: 18px;
}


/* 【SP】 ************************************************ */
@media only screen and (max-width: 640px) {
	#naviViewbus-top {
		border-top: none;
		border-bottom: none;
	}
	#naviViewbus-top #nvb-inner {
		width: 100%;
	}
	#naviViewbus-top #nvb-inner ul {
		box-sizing: border-box;
		margin: 0;
		padding: 0 10px;
		width:100%;
		background:none;
	}
	#naviViewbus-top #nvb-inner ul li {
		display:inline-block;
		float: left;
		list-style:none;
		margin: 0;
		padding: 0;
		width:48.7%;
		background: none;
	}
	#naviViewbus-top #nvb-inner ul li:nth-child(even) {
		float: right;
	}
	#naviViewbus-top #nvb-inner ul li:nth-child(n+3) {
		margin-top: 2.4vw;
	}
	#naviViewbus-top #nvb-inner ul li a {
		display: block;
		box-sizing: border-box;
		border-radius: 5px;
		padding: 10px 0 10px 6px;
		width:100%;
	}
	#naviViewbus-top #nvb-inner ul li:nth-child(1) a {
		border:solid 1px #a3dae6;
		background-color: #ecf8fb;
	}
	#naviViewbus-top #nvb-inner ul li:nth-child(2) a {
		border:solid 1px #e9d585;
		background-color: #fcf5d9;
	}
	#naviViewbus-top #nvb-inner ul li:nth-child(3) a {
		border:solid 1px #b9dca2;
		background-color: #ebf6e3;
	}
	#naviViewbus-top #nvb-inner ul li:nth-child(4) a {
		border:solid 1px #f6bec7;
		background-color: #fdf0f2;
	}
	#naviViewbus-top #nvb-inner ul li a:hover {}
	#naviViewbus-top #nvb-inner ul li a img {
		display: block;
		max-height: 4.4vw;
	}
}










/* *******************************************************************

	03. びゅうばすとは

******************************************************************* */
#about {margin-bottom: 30px;}
#about h2 {
	margin-bottom: 20px;
	width:200px;
}
#about h2 img {width: 100%;}
#about .cb-inner > p {
	font-size: 1.6rem;
}
#about #about-point-box {
	margin: 20px 0 10px;
	font-size: 1.4rem;
}
#about #about-point-box ul {font-size: 1.2rem;}
#about #about-point-box .apb-layout {
	float: left;
	box-sizing: border-box;
	padding: 12px;
	width:425px;
	background-color: #fef5ee;
}
#about #about-point-box .apb-layout:first-child {
	margin-right: 30px;
}
#about #about-point-box .apbl-inner {
	border-radius: 3px;
	padding: 20px;
	background-color: #fff;
}
#about #about-point-box .apbl-title {
	margin-bottom: 20px;
}
#about #about-point-box .apbl-title h3 {float: left;}
#about #about-point-box .apbl-title p {float: right;}
#about #about-point-box .apbl-title p img {
	position: relative;
	top:-2px;
}
#about #shouninzu .apbl-title h3 {width:150px;}
#about #shouninzu .apbl-title p {
	margin-right: 40px;
	width:98px;
}
#about #jiyuni .apbl-title h3 {width:184px;}
#about #jiyuni .apbl-title p {width:163px;}
#about #about-point-box .apbl-title img {width:100%;}
#about ul#image-box {
	margin: 0 auto;
	padding:20px 0 15px;
	width: 788px;
}
#about ul#image-box li {
	float: left;
	margin-right: 25px;
}
#about ul#image-box li:last-child {margin-right:0;}


/* 【SP】 ************************************************ */
@media only screen and (max-width: 640px) {
	#about h2 {
		margin-bottom:1em;
		width:50%;
	}
	#about .cb-inner > p {
		font-size: 1.4rem;
	}
	#about #about-point-box {
		margin: 15px 0 30px;
		font-size: 1.2rem;
	}
	#about #about-point-box ul {}
	#about #about-point-box .apb-layout {
		float:none;
		padding: 15px;
		width:100%;
	}
	#about #about-point-box .apb-layout:first-child {
		margin-right:0;
		padding-bottom: 0;
	}
	#about #about-point-box .apbl-inner {padding: 15px;}
	#about #about-point-box .apbl-title {margin-bottom: 10px;}
	#about #about-point-box .apbl-title p img {top:0;}
	#about #shouninzu .apbl-title h3 {width:116px;}
	#about #shouninzu .apbl-title p {
		margin-right:3vw;
		width:77px;
	}
	#about #jiyuni .apbl-title h3 {width:143px;}
	#about #jiyuni .apbl-title p {width:127px;}
	#about ul#image-box {display: none;}
}









/* *******************************************************************

	04. オススメコース

******************************************************************* */
#recomend { margin-bottom: 30px; }
#recomend h2 {
	margin:0 0 20px 10px;
	width:200px;
}
#recomend img {max-width: 100%;}
#recomend.viewbus-cont-box .cb-inner {padding: 0 0 10px 20px;}
#recomend #reco-box .box {
	cursor: pointer;
	position: relative;
	float: left;
	box-sizing: border-box;
	margin-right: 2px;
	border: 5px solid #fff;
	padding: 8px;
	max-width: 226px;
}
#recomend #reco-box .box .box-inner {}
#recomend #reco-box .box:last-child {margin-right:0;}
#recomend #reco-box .box h3 {
	margin-bottom: 8px;
	padding: 11px 0 9px;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
}
#recomend #reco-box .box:nth-child(1) h3,
#recomend #reco-box .box:nth-child(1) p.area {
	background: #47b6cd;
}
#recomend #reco-box .box:nth-child(2) h3,
#recomend #reco-box .box:nth-child(2) p.area {
	background: #d4ac0c;
}
#recomend #reco-box .box:nth-child(3) h3,
#recomend #reco-box .box:nth-child(3) p.area {
	background: #74b946;
}
#recomend #reco-box .box:nth-child(4) h3,
#recomend #reco-box .box:nth-child(4) p.area {
	background: #ed7d8f;
}
#recomend #reco-box .box p.area {
	display: inline-block;
	margin-top: 10px;
	padding: 3px 5px 2px;
	line-height: 1.4;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
}
#recomend #reco-box .box p.link,
#recomend #reco-box .box p.price {
	margin: 0.6em 0;
	font-size: 1.3rem;
}

#recomend #reco-box .box p.link a {
	display: inline-block;
	position: relative;
	padding-left: 16px;
	font-weight: bold;
}
#recomend #reco-box .box p.link a:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 2.5px;
	width: 12px;
	height: 12px;
	background: url(../img/arrow.png) no-repeat;
}
#recomend #reco-box .box p.price span {
	font-weight: bold;
	color: #e50000;
}
#recomend #reco-box .box p.txtRed {
	margin: 0.6em 0;
	font-size: 1.3rem;
}
#recomend #reco-box .box:hover {
	border: 5px solid #ddd;
	padding: 8px;
	transition: 0.7s, border-color 0.7s;
}
#recomend #reco-box .box p.link a {color: #00e;}
#recomend #reco-box .box:hover p.link a {
	color: #f00;
	transition: color 0.7s ease 0s;
}
#recomend #reco-box .box .noCource {
	margin: 0 0 0.6em;
	padding-left: 1em;
	text-indent: -1em;
	font-size: 1.3rem;
}
#recomend #reco-box .box .noCource a:link,
#recomend #reco-box .box .noCource a:visited {
	color: #e50000;
	text-decoration: none;
}


/* 【SP】 ************************************************ */
@media only screen and (max-width: 640px) {
	#recomend {}
	#recomend h2 {
		margin:0 0 15px;
		width:50%;
	}
	#recomend.viewbus-cont-box .cb-inner {padding: 0 10px;}
	#recomend #reco-box .box {
		cursor:inherit;
		float:none;
		margin-right: 0;
		border:none;
		padding: 0;
		max-width: 100%;
	}
	#recomend #reco-box .box .box-inner {padding: 10px;}
	#recomend #reco-box .box h3 {
		margin-bottom: 8px;
		padding: 6px 0 5px;
		font-size: 1.4rem;
	}
	#recomend #reco-box .box p.link,
	#recomend #reco-box .box p.price {
		font-size: 1.4rem;
	}
	#recomend #reco-box .box:hover {
		border:none;
		padding:inherit;
		transition:none;
	}
	#recomend #reco-box .box p.link a {
		text-decoration: underline;
		color: #00e;
		}
	#recomend #reco-box .box:hover p.link a {
		color: #00e;
		transition:none;
	}
	#recomend #reco-box .box .noCource {
		font-size: 1.4rem;
	}
	#recomend #reco-box .box .pic-link:hover {cursor:pointer;}
}








/* *******************************************************************

	05. ご利用方法

******************************************************************* */
#goriyou {margin:20px 0 30px;}
#goriyou .cb-inner {padding:0 24px;}
#goriyou h2 {padding:0 2px;}
#goriyou h2 img {width:100%;}

/* ご利用方法1 */
#goriyou #use01 {
	position: relative;
	padding: 20px 0 0;
}
#goriyou #use01 h3 {
	border-bottom: solid 5px #fef054;
	margin-bottom: 20px;
	padding: 0 0 3px 180px;
}
#goriyou #use01 h3 span,
#goriyou #use02 h3 span {
	display: inline-block;
	margin-right: 15px;
	border-radius: 2px;
	padding:4px 12px;
	background-color: #34a16b;
}
#goriyou #use01 h3 span img,
#goriyou #use02 h3 span img {
	display: block;
	height: 23px;
}
#goriyou #use01 h3 img.ttl-txt {
	display: inline-block;
	width:403px;
	vertical-align:4px;
}
#goriyou #use01 #web-ok {
	position: absolute;
	top:-2px;
	left:34px;
	width:110px;
}
#goriyou #use01 #web-ok img {width:100%;}
#goriyou #use01 .txt-box,
#goriyou #use02 .txt-box {
	text-align: center;
	font-size: 1.4rem;
}
#goriyou #use01 .kakomi-box {
	box-sizing: border-box;
	margin: 20px auto;
	padding: 20px;
	width:830px;
	background-color:#e7e6e6;
	text-align: center;
}
#goriyou #use01 .kakomi-box .kakomi-box-inner {
	border-radius: 2px;
	padding: 20px;
	background-color: #fff;
}
#goriyou #use01 .kakomi-box dl {
	display: inline-block;
	text-align: left;
}
#goriyou #use01 .kakomi-box dl dt {
	float: left;
	width:268px;
}
#goriyou #use01 .kakomi-box dl dd {
	margin-left: 268px;
	padding-top: 5px;
	font-size: 1.5rem;
	font-weight: bold;
}
#goriyou #use01 .kakomi-box dl dd span {
	font-size: 1.2rem;
	font-weight: normal;
}
#goriyou #use01 .kakomi-box .btn-arrow a {
	position: relative;
	display: block;
	box-sizing: border-box;
	margin: 15px auto 0;
	border-radius: 5px;
	padding: 12px 16px 10px 24px;
	width: 200px;
	background-color: #e90a1b;
	text-decoration: none;
	font-size: 1.6rem;
	font-weight: bold;
	color:#fff;
}
#goriyou #use01 .kakomi-box .btn-arrow a:before {
	content: "";
	display: block;
	position: absolute;
	top:50%;
	left:8px;
	margin: -6px 0 0;
	width:7px;
	height: 12px;
	background: url(../img/icon_arrow.png) 0 0 no-repeat;
	background-size: contain;
}
#goriyou #use01 .kakomi-box .ico-win-pc a:after {
	content: "";
	display: inline-block;
	position: relative;
	left: 0.5em;
	width:14px;
	height:14px;
	background: url(../img/icon_window.png) 0 0 no-repeat;
	background-size: contain;
	vertical-align: -1px;
}
#goriyou #use01 .kakomi-box .btn-arrow a:hover,
#goriyou #use02 .kakomi-box .btn-arrow a:hover {opacity: 0.6;}

/* ご利用方法2 */
#goriyou #use02 {
	position: relative;
	padding: 20px 0 0;
}
#goriyou #use02 h3 {
	margin-bottom: 20px;
	border-bottom: solid 5px #fef054;
	padding: 0 0 9px 180px;
}
#goriyou #use02 h3 img.ttl-txt {
	display: inline-block;
	width:364px;
	vertical-align: -12px;
}
#goriyou #use02 .kakomi-box {
	box-sizing: border-box;
	margin: 20px auto 0;
	padding: 20px;
	width:830px;
	background-color:#d3f0e0;
	text-align: center;
}
#goriyou #use02 .kakomi-box .kakomi-box-inner {
	position: relative;
	border-radius: 2px;
	padding: 30px 20px;
	background-color: #fff;
}
#goriyou #use02 .kakomi-box h4,
#goriyou #use02 .kakomi-box p {
	display: inline-block;
	vertical-align: top;
}
#goriyou #use02 .kakomi-box h4 img {padding: 0 20px 0 0;}
#goriyou #use02 .kakomi-box .btn-arrow a {
	position: relative;
	display: block;
	box-sizing: border-box;
	margin: 0 0 0 34px;
	border-radius: 5px;
	padding: 10px 16px 8px 24px;
	width: 270px;
	background-color: #f74c64;
	text-decoration: none;
	font-size: 1.6rem;
	font-weight: bold;
	color:#fff;
}
#goriyou #use02 .kakomi-box .btn-arrow a:before {
	content: "";
	display: block;
	position: absolute;
	top:50%;
	left:8px;
	margin: -6px 0 0;
	width:7px;
	height: 12px;
	background: url(../img/icon_arrow.png) 0 0 no-repeat;
	background-size: contain;
}


/* 【SP】 ************************************************ */
@media only screen and (max-width: 640px) {
	#goriyou {margin:20px 0;}
	#goriyou .cb-inner {padding:0 10px;}
	#goriyou h2 {padding:0;}

	/* ご利用方法1 */
	#goriyou #use01 {
		margin-top: 30px;
		border: solid 3px #eee;
		padding: 18px 15px 15px;
	}
	#goriyou #use01 h3 {
		margin-bottom: 15px;
		border-bottom: solid 3px #fef054;
		padding: 0 0 2px;
	}
	#goriyou #use01 h3 span,
	#goriyou #use02 h3 span {
		display: inline-block;
		position: absolute;
		top:-28px;
		left:-3px;
		margin-right: 0;
		border-radius: 2px 2px 0 0 / 2px 2px 0 0;
	}
	#goriyou #use01 h3 span img,
	#goriyou #use02 h3 span img {
		height: 17px;
	}
	#goriyou #use01 h3 img.ttl-txt {
		display: inline-block;
		width:90%;
		vertical-align:0;
	}
	#goriyou #use01 #web-ok {
		position: absolute;
		top:-40px;
		left:inherit;
		right: -3px;
		width:72px;
	}
	#goriyou #use01 .txt-box,
	#goriyou #use02 .txt-box {
		text-align: left;
		font-size: 1.3rem;
	}
	#goriyou #use01 .kakomi-box {
		margin: 0;
		padding: 0;
		width:100%;
		background-color:#fff;
	}
	#goriyou #use01 .kakomi-box .kakomi-box-inner {
		padding: 0;
	}
	#goriyou #use01 .kakomi-box .btn-arrow a {
		margin: 15px auto 20px;
		width: 70vw;
		font-size: 1.4rem;
	}
	#goriyou #use01 .kakomi-box .ico-win-pc a:after {
		left: 0.5em;
		width:16px;
		height:14px;
		background: url(../img/icon_pc.png) 0 0 no-repeat;
		background-size: contain;
	}
	#goriyou #use01 .kakomi-box .kome {
		text-align: left;
		font-size: 1.3rem;
	}

	/* ご利用方法2 */
	#goriyou #use02 {
		margin-top: 35px;
		border: solid 3px #eee;
		padding: 18px 15px 15px;
	}
	#goriyou #use02 h3 {
		margin-bottom: 15px;
		border-bottom: solid 3px #fef054;
		padding: 0 0 2px;
	}
	#goriyou #use02 h3 img.ttl-txt {
			display: inline-block;
			width:82%;
			vertical-align:0;
	}
	#goriyou #use02 .kakomi-box {
		margin: 0;
		padding: 0;
		width:100%;
		background-color:#fff;
	}
	#goriyou #use02 .kakomi-box .kakomi-box-inner {
			padding: 0;
	}
	#goriyou #use02 .kakomi-box .btn-arrow a {
		margin: 20px auto 10px;
		width: 70vw;
		font-size: 1.4rem;
	}
}

/* 【PC】 */

#l_main .anzenlink a {
	text-decoration:underline;
	color:#008803;
}
#l_main .anzenlink a:link {
	color: #008803;
}
#l_main .anzenlink a:visited {
	color:#008803;
}
#l_main .anzenlink a:hover {
	color:#ff0000;
}
#l_main .anzenlink a:active {
	color:#ff6600;
}