/*
	2018-03-08
	阿寒バス旅行サービス
	http://www.akanbus.co.jp/abts/

	-- Base color --
	color: #;
*/
@charset "UTF-8";


/*
*	{ margin: 0; padding: 0; }
*/
/*-- Default --*/
body {
	margin: 0;
	color: #556;
	font-size: 1em;
	line-height: 1.8;
	font-family: "Meiryo", "MS PGothic", "Hiragino Kaku Gothic Pro", "MS UI Gothic", sans-serif;
/*
	font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
*/
}

a			{ text-decoration: none; }
a:link		{ color:#36c; }
a:visited	{ color:#03c; }
a:active	{}
a:hover		{ text-decoration: underline; }

a.pdf	{ padding-left:20px; padding-bottom:3px; background:url(pdf.gif) no-repeat 0 0; }

h1,
h2,
h3,
h4	{ margin: 0; padding: 0; }
/*
h1	{ margin: 0 0 .5em; }
h2	{ margin: 0 0 .5em; }
h3	{ margin: .5em 0 0; padding: .1em .5em; color: #fff; background-image: url(bg_footer.jpg); border-radius: 1em; }
h4	{ margin: 1em 0; }
h1	{ font-size: 5vw; }
h2	{ font-size: 4vw; }
h3	{ font-size: 1.25em; font-weight: normal; text-align: center; }
h4	{ font-size: 2.0vw; font-weight: normal; }
*/

img	{ max-width: 100%; }

/*-- Form --*/
label	{ cursor: pointer; }
input[type="text"],
input[type="email"],
textarea	{ padding: .2rem 0; font-size: 1em; min-width: 50%; max-width: 100%; }
input[type="text"].zip	{ min-width: auto; }
select	{ font-size: 1em; }

.previous,
.submit,
input[type="submit"] {
	display: inline-block;
	margin: 1rem auto;
	padding: .75rem 1.5rem;
	color: #fff;
	font-size: 1em;
	cursor: pointer;
	border: none;
	border-radius: .2rem;
	background-color: #06c;
	transition: .3s;
	-webkit-appearance: none;
}
.previous,
.submit		{ padding: 0; }
.previous a,
.submit a	{ display: inline-block; padding: .75rem 1.5rem; color: inherit; text-decoration: none; }
.previous a:before {
	margin-right: 1rem;
	content:"\f053";
	font-family: FontAwesome;
	color: rgba(255,255,255,.5);
}
.submit a:after,
input[type="submit"]:after {
	margin-left: 1rem;
	content:"\f054";
	font-family: FontAwesome;
	color: rgba(255,255,255,.5);
}

.submit:hover,
input[type="submit"]:hover { color: #fff; background-color: #39f; }





/*--------------
--- Original ---
--------------*/

/*-- Background --*/
.bg		{ background-color: rgba(255, 212, 0, .15); }
.bg:nth-child(odd)	{ background-color: rgba(0, 135, 127, .1); }
.bg		{ color: inherit; }

.bg h1,
.bg h2	{ color: #004f57; font-size: 1.75em; padding-left: .5em; border-left: .2em solid #fb3; }
.bg h2	{ margin-bottom: .5em; }
.bg h3	{ color: #004f57; }

.bgb	{ color: #eee; background-color: #007f87; }
.bgb	{ background-color: rgba(0, 145, 158, .3); }

.sep	{ height: 50vh; }
.fix	{ background-attachment: fixed; }


/*-----------------------------------------------------------------*/
table.solid		{ display: inline-table; margin: 1em 0; border-collapse: collapse; }
table.solid tr	{ line-height: 1.4; }
table.solid th	{ padding: .5em; background-color: rgba(64, 48, 32, .2); border: 1px solid #ba9; }
table.solid td	{ padding: .5em; background-color: rgba(255,255,255,.2); border: 1px solid #ba9; }
table.solid .e	{ white-space: nowrap; background-color: rgba(64, 48, 32, .4); }
table.solid .d	{ white-space: nowrap; background-color: rgba(64, 48, 32, .2); }
table.solid ol	{ margin:0 0 0 1.5em; padding:0; }
table.solid ul	{ margin:0 0 0 1.5em; padding:0; }

table.simple	{ display: inline-table; border-collapse: collapse; }
table.simple th	{ padding: .8em 1.2em; text-align: right; vertical-align: top; border-right: thin solid #ba9; }
table.simple td	{ padding: .8em 1.2em; text-align: left; }
table.simple .e	{ white-space:nowrap; background-color:#f0f0f0; }
table.simple .d	{ white-space:nowrap; background-color:#ddd; }

.vt	{ vertical-align: top; }
.l	{ text-align: left;  }
.r	{ text-align: right; }
.c	{ text-align: center; }

.bb		{ font-size: 1.2em; font-weight: bold; }
.b		{ font-size: 1.0em; font-weight: bold; }

.xxl	{ font-size: 1.6em; }
.xl		{ font-size: 1.4em; }
.lg		{ font-size: 1.2em; }
.s,
.small	{ font-size: .8em; }
.xs		{ font-size: .6em; }

.url	{ color: #393; }
.date	{ color: #090; }
.red	{ color: #c00; }

.caution	{ color: #c00; font-size: .9em; }

.arrow	{
	margin-left: 8px;
	padding-left: 24px;
	background:url(arrow15x15.gif) no-repeat left 2px;
}

.wht	{ background-color: rgba(255,255,255,1); box-shadow: 0px 0px 20px rgba(0,0,0,.2) }
.blk	{ background-color: rgba(0,0,0,1); }

.clr,
.clear	{ clear: both; }

.inner	{ max-width: 1000px; margin: auto; padding: 4% 4%; }



/*-- バナー（トップページ） --*/
.bnr	{
	margin-bottom: 2em;
	padding: .5em;
/*
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 20px rgba(0,0,0,.2)
*/
}
.bnr img	{ display: block;}
.bnr a	{ display: block; transition: .3s; }
.bnr a:hover	{ opacity: .7; }

.bnr.multi	{ margin: 0; padding: 1em; display: flex; justify-content: space-between; }
.bnr.multi li	{ width: 49.5%; list-style: none; }
.bnr.multi li:nth-child(1)	{ width: 62%; }
.bnr.multi li:nth-child(2)	{ width: 36%; }
/*
.bnr.multi li:nth-child(2)	{ width: 36%; display: flex; align-items: center; background-color: #c8f; }
*/

/*-- 画像ボックス --*/
.phbox	{ margin: 0; padding: .5em; text-align: center; font-size: .8em; line-height: 1.6; }
.phbox img	{ display: block; max-width: 100%; }

.ln	{ color: #666; background-color: #fff; border: 1px solid #ccc; }
.fl	{ float: left; margin-right: 1em; margin-bottom: 1em; }
.fr	{ float: right; margin-left: 1em; margin-bottom: 1em; }



/*-- 吹き出し dl,dt,dd --*/
.balloon	{ margin: 2em 0; padding: 0; text-align: left; }
.balloon a	{ color: #fff; }
.balloon dt,
.balloon dd {
	position: relative;
	padding: .5em 2em;
	color: #fff;
	border-radius: 1em;
}
.balloon dt	{ margin: 1em 3em 1em 5em; background-color: #e79; display: inline-block; }
.balloon dd { margin: 1em 5em 3em 8em; background-color: #69c; display: block; }

.balloon dt:before,
.balloon dd:before	{
	content: "";
	position: absolute;
	top: 20%;
	width: 4em;
	height: 4em;
 	background-image: url(men.png);
 	background-size: cover;
 	opacity: .2;
}
.balloon dt:before	{ left:  0%; margin-left:  -5em; background-image: url(wmn.png); }
.balloon dd:before	{ right: 0%; margin-right: -5em; }

.balloon dt:after,
.balloon dd:after {
	content: "";
	position: absolute;
	top: 30%;
	border: 10px solid transparent;
}
.balloon dt:after	{ left:  0%; margin-left: -17.5px; border-right: 10px solid #e79; }
.balloon dd:after	{ right: 0%; margin-right: -17.5px; border-left: 10px solid #69c; }



/*-- ヘッドライン --*/
.headline		{ margin: 0 1em; padding: 0; }
.headline ul	{ margin: 0; padding: 0; }
.headline li	{
	margin: .5em 0 0 !important;
	padding: .5em 0 0 !important;
	width: auto !important;
	border-top: thin solid #a3dbea;
	list-style-type: none;
}
.headline li:first-child { border: none; }
.headline span	{ display: inline-block; margin-right: 1em; }
.headline .date	{ color: #393; font-size: .9em; font-weight: normal; }
.headline .ttl	{ display: inline-block; margin: 0; padding: 0; color: #36c; }
.headline .cmt	{ display: inline-block; margin: 0; padding: 0; }
.headline .fa	{ font-size: 1em !important; }


/* インフォメーション */
.info		{ margin: 0; padding: 1em; }
.info h3	{ text-align: center; color: #fff; background-color: rgba(0, 127, 135, .8); }
.info .fa	{ margin-right: .3em; font-size: 1.75em; }


/*-- インフォメーション --*/
.info_box,
.info_box ul	{ margin: 0; padding: 0; }
.info_box li	{
	margin: 0 2em;
 	padding: 2em 0;
 	text-align: left;
 	border-top: thin solid #a3dbea;
	list-style-type: none;
}
.info_box li:first-child { border: none; }
.info_box p	{ margin-top: 0; }
.info_box img	{ display: inline-block; margin-top: 1em; max-width: 50%; }
.info_box span	{ display: inline-block; margin-right: 1em; }
.info_box .date	{ color: #393; font-size: .8em; font-weight: normal; }
.info_box .ttle	{ margin: 0; padding: 0; color: #36c; font-size: 1.4em; }
.info_box .cmt	{ margin: 0; padding: 0; }

.info_box+.info_box	{ border-top: thin solid #a3dbea; }

.ctg	{ padding: 0 1em; min-width: 5em; font-size: .7em; text-align: center; border-radius: .5em; }	/* カテゴリ */
.ctg.ctg1	{ color: #fff; background-color: #66cccc; }	/* カテゴリ: カテゴリ1 */
.ctg.ctg2	{ color: #fff; background-color: #ffaa25; }	/* カテゴリ: カテゴリ2 */
.ctg.ctg3	{ color: #fff; background-color: #58ae81; }	/* カテゴリ: カテゴリ3 */
.ctg.ctg4	{ color: #fff; background-color: #e85c6d; }	/* カテゴリ: カテゴリ4 */
.ctg.zemg	{ color: #fff; background-color: #e85c6d; }	/* カテゴリ: 重要・緊急 */
.ctg.zetc	{ color: #fff; background-color: #ae8356; }	/* カテゴリ: その他 */
.ctg.none1	{ color: #fff; background-color: #57c; }	/* カテゴリ: 未使用 */
.ctg.none2	{ color: #fff; background-color: #e89; }	/* カテゴリ: 未使用 */
.ctg.none3	{ color: #fff; background-color: #e93; }	/* カテゴリ: 未使用 */
.ctg.none4	{ color: #fff; background-color: #4ca; }	/* カテゴリ: 未使用 */
.ctg.none5	{ color: #fff; background-color: #89a; }	/* カテゴリ: 未使用 */
.ctg.none6	{ color: #fff; background-color: #c55; }	/* カテゴリ: 未使用 */

/*-- ページリンク --*/
div.pagelink {
	clear:both; padding: 36px 6px; font-size: 14px; line-height: 1.0; text-align: center;
}

div.pagelink .blank,
div.pagelink .self,
div.pagelink a.plink {
	margin: 0 3px;
	padding: 6px;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
}
div.pagelink .blank	{ color: #999; }
div.pagelink .self	{ color: #369; font-weight: bold; border: 2px solid #69c; }
div.pagelink a.plink:hover		{ color: #fff; background-color: #36c; }
div.pagelink a.plink:visited	{ color: #00f; text-decoration: none; }






/*-- Flex box <ul> or <ol> --*/
.clmn		{ margin: 0; padding: 0; display: flex; justify-content: space-between; }
.clmn li	{ margin: 1em 0; list-style: none; flex: 1; }
.clmn img	{ max-width: 100%; }
.clmn a	{ display: block; transition: .3s; }
.clmn a:hover	{ opacity: .7; }

.clmn.x2,
.clmn.x3,
.clmn.x4	{ flex-wrap: wrap; }
.clmn.x2 li	{ width: 47.5%; flex: 0 0 auto; }
.clmn.x3 li	{ width: 30.0%; flex: 0 0 auto; }
.clmn.x4 li	{ width: 24.0%; flex: 0 0 auto; }

.clmn.x2 li:nth-child(1)	{ width: 56%; padding: 2%; }
.clmn.x2 li:nth-child(2)	{ width: 36%; padding: 2%; }

.clmn.x2 .ph2		{ margin-top: 1em; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
.clmn.x2 .ph2 li	{ margin: 0; padding: 0; }
.clmn.x2 .ph2 li:nth-child(1)	{ width: 100%; }
.clmn.x2 .ph2 li:nth-child(2)	{ width:  48%; }
.clmn.x2 .ph2 li:nth-child(3)	{ width:  48%; }
.clmn.x2 .ph2 img	{ display: block; margin-bottom: 1em; }

.clmn.ph	{ margin: 1em 0; padding: 0; }
.clmn.ph li	{ margin-bottom: 1em; flex: 0 0 auto; }
.clmn.ph li:nth-child(1)	{ width: 66%; }
.clmn.ph li:nth-child(2)	{ width: 32%; }
.clmn.ph img	{ display: block; margin-bottom: 1em; }

/* インフォメーション */
.clmn.x2.info		{ margin: 0; padding: 0 0 1em; }
.clmn.x2.info li	{ flex: 0 0 auto; }
.clmn.x2.info li:nth-child(1)	{ width: 34%; padding: 0 2%; }
.clmn.x2.info li:nth-child(2)	{ width: 58%; padding: 0 2%; }
.clmn.x2.info h3	{ text-align: center; color: #fff; background-color: rgba(0, 127, 135, .8); }
.clmn.x2.info .fa	{ margin-right: .3em; font-size: 1.75em; }

.clmn.bnr		{ flex-wrap: wrap; justify-content: center; }
.clmn.bnr li	{ flex: 0 0 auto; text-align: center; }
.clmn.bnr li+li	{ margin: 1em 1em; }
.clmn.bnr img	{ margin: auto; }

.clmn.top-foot li	{ margin: 1em 2em; }
.clmn.top-foot li+li{ margin: 1em 2em; }

.notice	{
	margin: 1em auto 0;
	padding: .75em 1em;
	color: #fff;
	font-size: .7em;
	background-color: rgba(0, 127, 135, .6);
	border-radius: .5em;
}
.notice p	{ margin: 0; padding: 0; }
.notice a	{ display: inline; color: #ffc; }
.notice span	{ margin-left: 1em; }

.docs	{ display: flex; flex-wrap: wrap; justify-content: center; }
.docs	{ margin: 2em 0 0; padding: 0; }
.docs li	{ margin: .5em 0; padding: 0 1rem; font-size: .8em; list-style-type: none; }
.docs li+li	{ border-left: thin solid #cc9; }


/*-----------------------------------------------------------------*/
#wrapper	{
/*
	max-width: 1000px;
	margin: auto;
	background-color: #fff;
*/
}

#header	{}
#header .logo { border-bottom: 6px solid rgba(0, 127, 135, .8); }
#header .logo a {
	display: block;
	margin: 1em;
	width: 320px;
	height: 50px;
	text-indent: -9999px;
	background-image: url(logo.gif);
	background-size: cover;
}
#header .ctrl {
	position: absolute;
	top: .75em;
	right: 0;
	display: block;
	margin: 1em;
	text-align: right;
	font-size: .8em;
}


#hnav {
	position: absolute;
	top: 5em;
	right: 1em;
	z-index: 1;
}
#hnav ul	{ margin: 0; padding: 0; display: flex; justify-content: flex-end; }
#hnav li	{ margin-left: .5em; list-style-type: none; }
/*
#hnav li	{ border-left: 1px solid rgba(255,255,255,.5); }
#hnav li:first-child	{ border: none; }
#hnav a	{ display: block; padding: 1em 1.5em; color: #fff; font-size: .9em; text-align: center; text-decoration: none; }
#hnav a:hover	{ color: #fff; background-color: rgba(128,16,0,.6); }
#hnav .fa	{ display: block; font-size: 2.4em; }
*/
/*-- メニュー画像オリジナル 1200x240 → 1/2 scale 600x120 --
#hnav a	{ display: block; transition: .3s; }
#hnav a	{ text-indent: -9999px; background-image: url(menus.png); background-size: 600px; }
#hnav a	{ opacity: 1; }
#hnav a:hover	{ opacity: .7; }
#hnav .home	a { width: 110px; height: 120px; background-position:  -17px 0px; }
#hnav .bath	a { width: 112px; height: 120px; background-position: -127px 0px; }
#hnav .menu	a { width: 115px; height: 120px; background-position: -239px 0px; }
#hnav .relx	a { width: 120px; height: 120px; background-position: -354px 0px; }
#hnav .guid	a { width: 115px; height: 120px; background-position: -474px 0px; }
*/
/*-- メニュー画像オリジナル 1440x240 → 1/3 scale 480x80 --*/
#hnav a	{ display: block; transition: .3s; }
#hnav a	{ text-indent: -9999px; background-image: url(menus.png); background-size: 480px; }
#hnav a	{ transform: scale(1.1); }
#hnav a:hover	{ transform: scale(1.3); }
#hnav .home	a { width: 80px; height: 80px; background-position:    0px 0px; }
#hnav .bath	a { width: 80px; height: 80px; background-position:  -80px 0px; }
#hnav .menu	a { width: 80px; height: 80px; background-position: -160px 0px; }
#hnav .relx	a { width: 80px; height: 80px; background-position: -240px 0px; }
#hnav .guid	a { width: 80px; height: 80px; background-position: -320px 0px; }
#hnav .faq	a { width: 80px; height: 80px; background-position: -400px 0px; }


/*----------------------
	NavigationDrawer
----------------------*/
#nav-drawer { display: none; }


#pankz	{ display: none; }

#container {}

#footer {
	margin: 0;
	padding: 1em;
	color: #eee; text-align: center;
	background-color: #006f77;
}
#footer a	{ color: #fff; }
#footer	ul	{ margin: 1em; padding: 0; display: flex; justify-content: center; }
#footer li	{ padding: 0 1em; list-style: none; }
#footer li+li	{ border-left: thin solid #edd; }
#footer .cprt	{ font-size: .7em; }




@media only screen and (max-width: 480px) {
/*
	.bnr.multi	{ display: block; padding-bottom: 0; }
	.bnr.multi a	{ width: auto; margin-bottom: 1em; }
*/
}




@media only screen and (max-width: 728px) {

	h1	{ font-size: 1.8em; }
	h2	{ font-size: 1.6em; }
	h3	{ font-size: 1.2em; }
	h4	{ font-size: 1.0em; }

	.bg h1,
	.bg h2	{ padding-left: 0; border: none; }

	.inner	{ padding: 1em; }

	.info_box .date	{ float: none; }
	.info_box .ttl	{ padding-left: 0; }
	.info_box .cmt	{ padding-left: 0; }

	.fl,
	.fr	{ float: none; margin: 0 auto 1em; text-align: center; }

	.clmn	{ display: block; }

	.clmn.x2 li:nth-child(1),
	.clmn.x2 li:nth-child(2),
	.clmn.ph li:nth-child(1),
	.clmn.ph li:nth-child(2),
	.clmn.x2 li,
	.clmn.x3 li,
	.clmn.x4 li { width: auto; }

	.clmn.bnr li+li		{ margin: 1em 0; }
	.clmn.top-foot li	{ margin: 1em 0; }

	/* -----------
		Toppage
	--------------*/

	/* トップページ バナースペース */
	.topbnr .inner	{ padding: 1em; }

	#header .logo a { margin: .5em auto; }
	#header .ctrl	{ display: none; }


	/*----------------------
		NavigationDrawer
	----------------------*/
	#hnav { display: none; }

	#nav-drawer { display: none; }
	#nav-drawer { position: relative; }

	#nav-open	{ position: absolute; top: 25px; left: 20px; z-index: 2;}
	/* ハンバーガーアイコン（CSSだけで表現）
	#nav-open	{ display: inline-block; width: 30px; height: 22px; vertical-align: middle; }
	#nav-open span,
	#nav-open span:before,
	#nav-open span:after {
		position: absolute;
		width: 25px;
		height: 3px;
		border-radius: 3px;
		background-color: #fff;
		display: block;
		content: '';
		cursor: pointer;
	}
	#nav-open span:before	{ bottom:  -8px; }
	#nav-open span:after	{ bottom: -16px; }
	*/
	#nav-open {
		display: block;
		width: auto;
		height: 65px;
		color: #fff;
		font-size: .6em;
		text-align: center;
		text-decoration: none;
	}
	#nav-open:hover	{ color: #fff; background-color: #47b8d6; }
	#nav-open .fa	{ display: block; font-size: 3em; }

	/* 閉じる用の薄黒カバー（全体）※初期は非表示 */
	#nav-close {
		display: none;
		position: fixed;
		top: 0; left: 0;
		width: 100%; height: 100%;
		background-color: black;
		transition: .3s ease-in-out;
		opacity: 0;
		z-index: 99;
	}
	/* メニューコンテンツ（最前面） */
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0; left: 0;
		width: 90%; height: 100%;
		max-width: 320px;
		background-image: url(bg_footer.jpg);
		transition: .3s ease-in-out;
		z-index: 9999;
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);
	/*	右に隠しておく
		top: 0; right: 0;
		-webkit-transform: translateX(105%);
		transform: translateX(105%);
	*/
	}
	#nav-content ul	{ margin: 0; padding: 0; display: block; }
	#nav-content li	{ border: none; border-bottom: thin solid rgba(255,255,255,.3); list-style-type: none; }
	#nav-content a	{ display: block; padding: 1em; color: #fff; font-size: 1em; }

	/* チェックが入ったら→カバーを表示 */
	#nav-input:checked ~ #nav-close {
		display: block;
		opacity: .7;
	}
	/* チェックが入ったら→メニュー表示（左スライド） */
	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		box-shadow: -6px 0 25px rgba(0,0,0,.5);
	}

	/* チェックボックス等は非表示に */
	.nav-unshown { display: none; }
	/*+++++*/

	#footer	ul	{ flex-wrap: wrap; }
	#footer li	{ padding: 1em; }
	#footer li+li	{ border-left: none; }

}