/*------------------------
阿寒バス株式会社
akanbus.co.jp
--
2025-07-07	Switch Language
2022-02-22	rewrite
2018-08-08	Mobile first
------------------------*/
@charset "UTF-8";

/*------------------------
A Modern CSS Reset
------------------------*/
/* Box sizingの定義 */
*, *::before, *::after	{ box-sizing: border-box; }
/* デフォルトのpaddingを削除 */
ul[class], ol[class]	{ padding: 0; }
/* デフォルトのmarginを削除 */
body, 
h1, h2, h3, h4, h5, h6,
ul[class], ol[class], li,
figure, figcaption, blockquote, dl	{ margin: 0; }
/* bodyのデフォルトを定義 */
body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class], ol[class]	{ list-style: none; }
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class])	{ text-decoration-skip-ink: auto; }
/* img要素の扱いを簡単にする - display: block; */
img	{ max-width: 100%; margin: auto; }
/* iframe */
iframe	{ max-width: 100%; margin: auto; }
iframe	{ display: block; }
/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 
article > * + * { margin-top: 1em; }
*/
/* inputやbuttonなどのフォントは継承を定義 */
input, button, textarea, select	{ font: inherit; }
 
/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/*----------------------
Inview
----------------------*/
/*
.effect		{ overflow: hidden; }
*/
.ef-fade,
.ef-fade01,
.ef-zoom,
.ef-rotate	{ transition: .6s; }
.ef-fade:nth-child(even)	{ transition: .9s; }
.ef-fade:nth-child(3)	{ transition: 1.2s; }
.ef-fade	{ opacity: 0; transform: translate(0, 60px); -webkit-transform: translate(0, 60px); }
.fade		{ opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); }
.ef-fade01	{ opacity: 0; }
.fade01		{ opacity: 1; }
.ef-zoom	{ transform: scale(0, 0); -webkit-transform: scale(0, 0); }
.zoom		{ transform: scale(1, 1); -webkit-transform: scale(1, 1); }
.ef-rotate	{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
.rotate		{ transform: rotateY(360deg); -webkit-transform: rotateY(360deg); }


/*----------------------
Customize
--------------------- */
html { scroll-behavior: smooth; }

body {
	color: #334;
	font-size: 1rem;
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;	/* mobile safariの自動文字サイズ調整をoffにする */
	-webkit-tap-highlight-color: transparent;	/* モバイルでタッチ時のハイライトカラーを消す */
	-webkit-font-smoothing: antialiased;	/* 文字のアンチエイリアスをきれいに表示 */
	-moz-osx-font-smoothing: grayscale;
}

/* default - 摩周湖　夏 */
/*body	{ background-color: #89d0fa; }*/
body	{ background: url(./ph/_base.jpg) no-repeat 50% 0% / contain; }
body	{ background: url(./ph/summer/mashu.jpg) no-repeat 50% 0% / contain; }

section:not([class])	{ background-color: rgba(255,255,255,1); }
section:not([class]):nth-child(even)	{ background-color: rgba(255,248,230,1); }
/*
h1,
h2	{ color: #06c; border-bottom: 4px solid #399; }
h3	{
	padding: 8px;
	color: #fff; font-size: 14px; line-height: 1.2;
	background-color: #99b; border: 1px solid #669; border-left: 8px solid #669;
}
h4	{ padding: .5em; color: #333; background-color: #fff; border-left: 3px solid #9c6; }
h4 span { color: #36c; font-size: .9em; }
*/
a	{ text-decoration: none; }
a:hover	{ text-decoration: underline; }
/*a:hover:before	{ text-decoration: none !important; }*/
/*
a:link		{ color: #03c; }
a:visited	{ color: #03c; }
a:active	{ color: #6f6; }
a:hover		{ color: #f60; text-decoration: underline; }
*/

table	{ border-collapse: collapse; }

/*----------------------
※印つき<ul>、<ol>リスト
----------------------*/
.asterisk	{ display: inline-block; padding-left: 1em; text-indent: -1em; }
.asterisk:before { content: '※'; display: inline; }

ul.asterisk		{ padding-left: 0; text-indent: 0; }
ul.asterisk:before { content: ''; }
ul.asterisk li	{ padding-left: 1em; text-indent: -1em; }
ul.asterisk li:before { content: '※'; display: inline; }
ol.asterisk		{ counter-reset: number; padding-left: 0; text-indent: 0; }
ol.asterisk li:before { content: "※"counter(number)" "; counter-increment: number; }

/*----------------------
矢印つき<ul>リスト
----------------------*/
ul.arrow	{ margin-top: 1em; }
ul.arrow li	{ padding-left: 1em; text-indent: -1em; }
ul.arrow li:before { content: '\f138'; font-family: forkawesome; padding-right: .5em; color: lightgray; }
ul.arrow.orange li:before,
ul.arrow.v2 li:before { color: orange; }

/*----------------------
丸数字<ol>リスト
----------------------*/
ol.malnum	{ counter-reset:num; }
ol.malnum li{ padding-bottom: .5em; padding-left: 1.6em; text-indent: -1.6em; }
ol.malnum li:before	{
	counter-increment: num;
	content: counter(num);
	display: inline-block;
	margin-right: .3em;
	width: 1.3em;
	height: 1.3em;
	line-height: 1.3;
	text-indent: 0;
	color: #FFF;
	text-align: center;
	background: orange;
	border-radius: 50%;
}
/*----------------------
★つき<ul>リスト
----------------------*/
ul.star	{}
ul.star li	{ padding-left: 1.5em; text-indent: -1.5em; }
ul.star li:before { content: '★'; padding-right: .5em; opacity: .8; }

/*----------------------
多言語<ul>リスト
----------------------*/
ul.lang	{ margin: auto; padding: 1em 0; }
ul.lang	{ display: flex; gap: 1em; justify-content: center; }
ul.lang .this,
ul.lang a	{ display: inline-block; padding: .5rem 2rem; border-radius: .5em; }
ul.lang a		{ color: #569; background-color: #36d2; transition: .2s; }
ul.lang a:hover	{ color: #fff; background-color: #039; text-decoration: none; }
ul.lang .this	{ color: #fff; background-color: #36d; font-weight: bold; }



/*----------------------
共通要素
--------------------- */
.inner {
	max-width: 1000px;
	margin: auto;
	padding: 1em;
}
.inner h3 {
	padding-bottom: .25em;
	border-bottom: 3px solid #6faedd;
	/*color: #fff; background-color: #009ce0;*/
}
.inner h3 span,
.inner h4 span	{ font-size: initial; font-weight: normal; letter-spacing: 0; }

.inner > * + h2	{ margin-top: 4rem; }
.inner > h2 + *	{ margin-top: 2rem; }
.inner > * + h3	{ margin-top: 3rem; }
.inner > h3 + *	{ margin-top: 1rem; }
.inner > * + h4	{ margin-top: 3rem; }
.inner > h4 + *	{ margin-top: 1rem; }
.inner > * + h5	{ margin-top: 2rem; }
.inner > h5 + *	{ margin-top: 1rem; }

.sectitle	{ margin-bottom: 1em; color: #074388; font-size: 1.2em; text-align: center; }
/*
.sectitle:before	{
	content: '';
	display: block;
	margin: 0 auto .5em;
	height: 2em;
	background: url(yugakukan.png) no-repeat 50% 50% / contain;
}
*/
.more	{ max-width: 280px; margin: 0 auto; padding: 2rem 0; text-align: center; }
.more a { display: inline-block; padding: .5rem 2rem; }
.more a { color: #fff; background-color: #36d; border-radius: 3em; transition: .2s; }
.more a:hover	{ background-color: #039; text-decoration: none; }

.morebtn	{ display: inline-block; padding: .05rem 1rem; }
.morebtn	{ color: #fff; background-color: #36d; border-radius: 3em; transition: .2s; }
.morebtn:hover	{ background-color: #039; text-decoration: none; }

.morebbtn	{ display: inline-block; padding: 1em 2em; font-size: 120%; font-weight: bold; }
.morebbtn	{ color: #fff; background-color: #36d; border-radius: .5em; transition: .2s; }
.morebbtn:hover	{ background-color: #039; text-decoration: none; }


/* Grid */
/*
.grid	{ margin: 1em auto;; padding: 0; list-style-type: none; }
.grid	{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid.x2	{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.x3	{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.shadow{ box-shadow: none; }
.grid.shadow > *	{ padding: .5rem; box-shadow: 0 0 10px rgba(0,0,0,.1); }
.grid img	{ margin: auto; display: block; max-width: 100%; }
.grid img + span	{ display: block; margin-top: .5rem; font-size: .9em; text-align: center; }
*/
.grid	{
	margin: 0;
	padding: 0;
	display: grid;
	grid-gap: 1.5rem;
	align-items: stretch;
}
.grid		{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.rvs	{ direction: rtl; }
.grid.rvs > *	{ direction: ltr; text-align: start; }
.grid.x2	{ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.grid.x4	{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid .img	{ text-align: center; }
.grid h3:after	{
	content: '';
	display: block;
	margin: .5em auto 0;
	height: 3px;
	border-radius: 1em;
	background-color: #61AFA0;
}
.grid h4	{ margin-bottom: 8px; padding-bottom: 4px; font-size: 1em; border-bottom: 3px solid #61AFA0; }
.grid > *	{
	list-style-type: none;
	position: relative;
	padding: 1rem;
	background-color: rgba(255,255,255,1);
	border-radius: .3em;
	box-shadow: 0 0 12px rgba(0,0,0,.1);
}
.grid .none	{
	padding: 0;
	background: none;
	box-shadow: none;
}
.grid.plain > *	{ padding: 0; background: none; box-shadow: none; }

/* Flexbox */
.flex	{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	grid-gap: 2rem;
}
.flex.vc	{ align-items: center; }
.flex.rvs	{ flex-direction: row-reverse; }
.flex.nowrap{ flex-wrap: nowrap; }
.flex .img	{ flex: 1 0 auto; max-width: 50%; }

.flex+.flex,
.flex+.grid,
.grid+.flex,
.grid+.grid	{ margin-top: 1.5rem; }


/*-- Flex list with box-shadow --*/
.flexs	{ margin: 1em auto; padding: 0; list-style-type: none; }
.flexs	{ display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; }
.flexs li	{ padding: 1em; box-shadow: 0 0 16px 0px rgba(0,0,0,.2); }
.flexs li	{ flex: 1 0 auto; }
.flexs li.plain	{ padding: 0; background: none; box-shadow: none; }
.flexs .phbox	{ color: #666; font-size: .8em; text-align: center; }
.flexs.nowrap	{ flex-wrap: nowrap; }
.flexs.x2 li	{ flex: 1 0 50%; }
.flexs.x3 li	{ flex: 1 0 40%; }
/* plus arrow */
.flexs ul.arrow	{ margin: 0; }
.flexs ul.arrow li	{ padding: 0; padding-left: 1em; text-indent: -1em; box-shadow: none; }
.flexs ul.arrow li:before { content: '\f138'; font-family: forkawesome; padding-right: .5em; color: lightgray; }
.flexs ul.arrow.v2 li:before { color: orange; }
/* plus thumb */
.flexs.thumb li	{ text-align: center; background-color: #fff; }
.flexs.thumb li p	{ margin: 0; }
.flexs.thumb .nopic	{ margin-bottom: .4em; width: 100%; aspect-ratio: 16/9; background: #666 url(base16x9.png) no-repeat 50% 50% / contain; }

/* Note */
.note	{ padding: .75em; border: 3px solid #666; }
.note.red	{ border: 3px solid #e33; }
.note ul	{ margin: 0; padding-left: 1.5em; }
.note li+li	{ margin-top: .5em; }
.note strong{ color: #e00; }

/* YouTube */
.youtube	{ width: 100%; aspect-ratio: 16 / 9; }
.youtube iframe	{ width: 100%; height: 100%; }

/* Covid-19 */
/*.covid-19	{ margin: 1em auto 2em; padding: 1em; max-width: 700px; border: 3px solid #e77; }*/
.covid-19	{ margin: 1em auto 2em; padding: 1em; border: 3px solid #e77; }
/*.covid-19	{ line-height: 1.8; font-family: sans-serif; }*/
.covid-19 p	{ margin: 0; color: #d33; font-size: 1.2em; }
.covid-19 ul{ margin: 0; padding-left: 1.5em; }

.mbo	{ display: initial; }
.pco	{ display: none; }

.b	{ font-weight: bold; }
.bb	{ font-weight: bold; color: #000; font-size:1.2em; }

.xs	{ font-size: .6rem; }
.s	{ font-size: .8rem; }
.m	{ font-size: 1rem; }
.lg	{ font-size: 1.2rem; }
.xl	{ font-size: 1.5rem; }

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

.caution	{ color: #c00; }
.red	{ color: #e00; }
.grn	{ color: #393; }
.date	{ color: #393; }
.url	{ color: #393; word-break: break-all; }


.marker,
.marker.yellow	{ background: linear-gradient(transparent 60%, #ffff66 60%); }	/* 黄色 */
.marker.lime	{ background: linear-gradient(transparent 60%, #66FFCC 60%); }	/* 黄緑色 */
.marker.water	{ background: linear-gradient(transparent 60%, #66ccff 60%); }	/* 水色 */
.marker_pink	{ background: linear-gradient(transparent 60%, #ff66ff 60%); }	/* 桃色 */


/*----------------------
アイコン付加
----------------------*/
a[href$=".pdf"]:after	{ content: '\f1c1'; font-family: forkawesome; margin-left: .5em; opacity: .7; }
a[href$=".docx"]:after,
a[href$=".doc"]:after	{ content: '\f1c2'; font-family: forkawesome; margin-left: .5em; opacity: .7; }
a[href$=".xlsx"]:after,
a[href$=".xls"]:after	{ content: '\f1c3'; font-family: forkawesome; margin-left: .5em; opacity: .7; }
a[href$=".zip"]:after	{ content: '\f1c6'; font-family: forkawesome; margin-left: .5em; opacity: .7; }
a[href^="mailto:"]:after{ content: '\f0e0'; font-family: forkawesome; margin-left: .5em; opacity: .7; }
a[href^="http"]:after	{ content: '\f08e'; font-family: forkawesome; margin-left: .5em; opacity: .7; }
/* No Icon */
.no_icon:after,
.no_icon a:after {
	content: '' !important;
	margin-left: 0 !important;
}


/*----------------------
レスポンシブ対応（横スクロール）
<div class="scroll-table">
	<table>〜</table>
</div>
----------------------*/
.scroll-table {
	overflow: auto;
	white-space: nowrap;
}

/*----------------------
コンテンツ幅に応じて中央に
----------------------*/
.fit-center	{ margin-left: auto; margin-right: auto; width: fit-content; max-width: 960px; }

/*----------------------
テーブル要素
----------------------*/
table.solid		{ margin: 1em 0; }
table.solid th,
table.solid td	{ padding: .5em .5em; border: 1px solid #abc; background-color:rgba(255, 255, 255, .9); }
table.solid th,
table.solid .d	{ white-space: nowrap; text-align: center; background-color:rgba(128, 128, 128, .1); }
table.solid .ng	{ color:#666; text-decoration:line-through; background-color:#f8f8f8; }
table.solid .bus1	{ color: #039; background-color: #def; }
table.solid .bus1 a	{ font-size:1.2em; }
table.solid .bus1 span	{ color: #f00; font-weight: normal; }
table.solid .bus2	{ color:#060; background-color:#efd; }
table.solid .bus3	{ color:#c60; background-color:#ffe; }
table.solid .bus3 span	{ color:#d00; }
table.solid .bus4	{ color:#f00; background-color:#fdd; }
table.solid .head,
table.solid .head td:not([class])	{ text-align: center; background-color:#edf8ed; }
table.solid .hea2,
table.solid .hea2 td	{ text-align: center; background-color:#f1ffff; }
table.solid .bnam	{ color: #000080; font-weight: bold; text-align: left; background-color:#DFFFFF; }
table.solid .holiday	{ color: #d00; }
table.solid .head .holiday	{ background-color: #ffd7d7; }

table.noline	{ margin: 1em 0; }
table.noline th,
table.noline td	{ padding: .5em .8em; vertical-align: top; }
table.noline .d	{ white-space: nowrap; text-align: center; background-color: #f0f0f0; }
table.noline .e	{ white-space: nowrap; text-align: center; background-color: #f0f0f0; border-bottom: 2px solid #fff; }

table.tmtble	{ margin: 1em 0; }
table.tmtble th	{ padding: .3em .5em; letter-spacing: .1em; }
table.tmtble td	{ padding: .3em .5em; color: #900; background-color: #ffd; }
table.tmtble .c	{ color: #fff; font-weight: bold; background-color: #ac7; }
table.tmtble .d	{ color: #090; white-space: nowrap; text-align: center; vertical-align: top; background-color: #efd; }
table.tmtble span	{ color: #f00; }

table.elist		{ margin: 1em 0; }
table.elist th,
table.elist td		{ padding: .3em 1em; text-align: center; border: 1px solid #ccc; }
table.elist tr.d	{ color: #fff; font-size: .8em; text-align: center; background-color: #999; }
table.elist td.d	{ white-space: nowrap; background-color: #f0f0f0; }
table.elist td.r	{ color: #c66; font-weight: bold; text-decoration: none; }
table.elist td.g	{ color: #68c; font-weight: bold; text-decoration: none; }
table.elist .ok	{ background-color: #e0f0ff; }
table.elist .ng	{ background-color: #f8f8f8; color: #888; text-decoration: line-through; }

/*----------------------
phbox
----------------------*/
div.mask_s	{ aspect-ratio: 1/1; width:  50px; background-color: #f8f8f8; overflow: hidden; }
div.mask_m	{ aspect-ratio: 1/1; width: 100px; background-color: #f8f8f8; overflow: hidden; }
div.mask_l	{ aspect-ratio: 1/1; width: 150px; background-color: #f8f8f8; overflow: hidden; }

.phbox	{ margin: 2em auto; }
.phbox	{ display: flex; justify-content: center; text-align: center; color: #666; }
.phbox img	{ display: block; border: 1em solid #fff; box-shadow: 0 0 16px 0px rgba(0,0,0,.2); }

.phbox_c,
.phbox_r,
.phbox_l,
.phbox_nc,
.phbox_nr,
.phbox_nl	{ display: flex; flex-direction: column; justify-content: center; text-align: center; color: #666; }
.phbox_c img,
.phbox_r img,
.phbox_l img,
.phbox_nc img,
.phbox_nr img,
.phbox_nl img	{ display: block; }

.phbox_c,
.phbox_r,
.phbox_l	{ border: 1em solid #fff; box-shadow: 0 0 16px 0px rgba(0,0,0,.2); }

.phbox_c p,
.phbox_r p,
.phbox_l p	{ margin: 0; padding: 0; }

/*----------------------
SNS Icon
----------------------*/
.sns { display: flex; justify-content: center; grid-gap: 1rem; }
.sns a	{
	display: flex;
	justify-content: center;
	width: 55px; height: 55px;
	line-height: 1.65;
	font-size: 36px;
	color: #fff;
	background-color: rgba(0,0,0,.2);
	border-radius: 50px;
	transition: .2s;
}
.sns a:hover	{ transform: scale(1.2); text-decoration: none; }
.sns i	{ display: none; }
.sns .instagram	{ background-image: url(gradient-768x768.jpg); background-size: cover; }
.sns .facebook	{ background-color: #1977f1; }
.sns .youtube	{ background-color: #f00; }
.sns .twitter	{ background-color: #1DA1F2; }
.sns .envelope	{ background-color: #6c9; }
.sns .website	{ background-color: #f90; }
.sns .website2 	{ background-color: #f60; }

.sns .instagram:before	{ content: '\f16d'; font-family: forkawesome; }
.sns .facebook:before	{ content: '\f09a'; font-family: forkawesome; }
.sns .youtube:before	{ content: '\f16a'; font-family: forkawesome; }
.sns .twitter:before	{ content: '\f099'; font-family: forkawesome; }

/* Twitter → X 変換 2023-11-09 */
.sns .twitter	{ background-image: url(ico_x_twitter.svg); background-size: cover; }
.sns .twitter:before	{ content: ''; }

/* Xiaohongshu 2025-08-01 */
.sns .xiaohongshu	{ background: #fff url(ico_xiaohongshu.svg) no-repeat 50% 50% / cover; border-radius: 10px; }

/*----------------------
Information CGI
----------------------*/
/*
.headline		{ margin:0; padding:10px; }
.headline h3,
.headline h4	{ margin:0; }
.headline ul	{ margin:0; padding:0; }
.headline li	{ list-style-type:none; }
.headline li	{ margin:0; text-align:left; height: 4em; line-height: 4; overflow:hidden; }
.headline li:nth-child(odd)	{ background-color: rgba(128, 128, 128, .1); }
.headline .date	{ display: inline-block; width: 8em; text-align: center; color: #393; }
.headline .ctg	{ float: right; padding:0.3em 0; color:#ccc; font-size:13px; font-weight:normal; text-align:right; }
.headline .ttl	{ padding-right: 1em; color: #036; font-weight: bold; }
.headline .cmt	{ display: inline; font-size: .9em; opacity: .7; }
*/
.info hr	{ height: 2px; background-color: #eee; border: none; }
.info .oview	{ margin: 1rem; max-height: 12em; overflow: hidden; }
.info .lead	{ display: block; font-weight: bold; }
.info .text	{ display: block; max-height: 4.5em; overflow: hidden; font-size: .9em; }
.info .ctg	{ display: inline-block; color: #678; margin-left: 1em; }
.info .ctg:before	{ margin-right: .5em; font-family: forkawesome; content: '\f114'; }
.info .date	{ display: inline-block; color: #678; }
.info .date:before	{ margin-right: .5em; font-family: forkawesome; content: '\f073'; }
.info .thumb	{ position: relative; height: 200px; background: #444 url(base16x9.png) no-repeat 50% 50% / cover; }
.info .thumb	{ 
	width: 100%; height: auto;
	aspect-ratio: 16/9;
}
.info .thumb	{ border-radius: .3em .3em 0 0; }
.info .thumb:after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	height: 2rem;
	background: linear-gradient(0deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 100%);
	pointer-events: none;
	z-index: 1;
}
/*----------------------
Search Form
----------------------*/
.info.search	{ background-color: #fff; }
.hsearch {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: .5rem;
	max-width: 728px;
	margin: auto;
	padding: .75rem;
	background-color: rgba(255,255,255,1);
	border-radius: .5rem;
	box-shadow: 0 0 12px rgba(0,0,0,.1);
}
.hsearch input[type="text"],
.hsearch select	{ padding: 5px; border-color: rgba(0,0,0,.1); outline: none; }
.hkwd	{
	width: 428px;
	max-width: 80%;
	margin: 0;
	padding: 5px;
	line-height: 1.15;
	overflow: visible;
	border-color: rgba(0,0,0,.1);
	border-width: 1px;
	outline: none;
	transition: all .1s ease-in-out;
}
.hsubmit {
	display: block;
	margin: 0;
	padding: 0;
	background: rgba(0,0,0,0);
	border: none;
	cursor: pointer;
	overflow: visible;
	transition: .2s;
	opacity: .3;
	-webkit-appearance: button;
}
.hsubmit:hover { opacity: .6; }
/*----------------------
Information CGI List
----------------------*/
.info.list	{ background-color: #fff; }
.info.list a	{ display: block; color: inherit; text-decoration: none; }
.info.list hr	{ height: 3px; background-color: #5697d8; border: none; }
.info.list ul	{ margin: 0; padding: 0; }
.info.list ul	{ display: flex; justify-content: space-around; flex-wrap: wrap; grid-gap: 2em; }
.info.list li	{
	flex: 1 1 30%;
	min-width: 300px;
	background-color: rgba(255,255,255,1);
	border-radius: .3em;
	box-shadow: 0 0 12px rgba(0,0,0,.1);
	list-style-type: none;
	transition: .2s;
}
.info.list li:hover	{ box-shadow: 0 0 18px rgba(0,0,0,.3); }
.info.list li:hover	{ box-shadow: 0 0 0 6px #6cf; }
.info.list li.empty	{ padding: 0; background: none; box-shadow: none; }
/*.info.list li.empty	{ display: none; }*/
.info.list h3	{ margin: 0; padding: 0; font-size: 1em; text-align: left; border: none; }
.info.list h3+*	{ margin-top: .5rem; }
.info.list .ctg,
.info.list .date	{ font-size: .9em; }
/*----------------------
Information CGI Data
----------------------*/
.info.data	{ background-color: #fff; }
/*.info.data	{ max-width: 1000px; margin: auto; padding: 3em 1em; }*/
.info.data .phbox	{ margin-top: 2em; }

/*--------*/
.pagelink	{ margin: 3em auto; padding:24px 6px; font-size:14px; line-height:1.0; text-align:center; }
.pagelink .blank,
.pagelink .self,
.pagelink a.plink	{ display: inline-block; margin: 0 3px; padding: 3px 6px; text-decoration: none; border: 1px solid #ccc; background-color: #fff; }
.pagelink .blank	{ color:#999; }
.pagelink .self		{ color:#c00; font-weight:bold; padding:4px 6px; }
.pagelink a.plink:visited	{ color:#00f; text-decoration:none; }
.pagelink a.plink:hover		{ color:#fff; background-color:#36c; }


/*----------------------
Departure
----------------------*/
section.depa-nav	{ color: #1968a6; background-color: #fff; }
section.depa-nav a	{ display: block; padding: 1em; color: inherit; transition: .2s; }
section.depa-nav a:hover	{ color: #fff; background-color: #1968a6; text-decoration: none; }
section.depa-nav ul	{ margin: 0; padding: 0; list-style: none; }
section.depa-nav ul	{ background-color: #a3cdef; }
section.depa-nav ul	{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 2px; }
section.depa-nav li	{ flex: 1 0 30%; text-align: center; background-color: #fff; }
section.depa-nav i	{ display: block; margin: auto; padding: .5rem; font-size: xx-large; }
section.depa-nav span	{ display: block; font-size: xx-small; }

.inner > .malnum + .thumb	{ margin-top: 3rem; }

.bcmpy	{ margin: 0 .3em; padding: 0 1em; display: inline-block; text-indent: 0; transition: .2s; }
.bcmpy	{ background-color: #ccc; border-radius: 1em; }
.bcmpy.akan		{ color: #fff; background-color: #01996b; }
.bcmpy.abashiri	{ color: #fff; background-color: #52c7c7; }
.bcmpy.abashikk	{ color: #fff; background-color: #e67d9c; }
.bcmpy.kushiro	{ color: #fff; background-color: #d8a94d; }
.bcmpy.nemuro	{ color: #fff; background-color: #9560cd; }
.bcmpy.shari	{ color: #fff; background-color: #4392d1; }
.bcmpy.jr		{ color: #fff; background-color: #59bb32; }
.bcmpy.ether	{ color: #fff; background-color: #d56490; }
.bcmpy.none	{ margin: 0 .3em !important; }
.bcmpy.none:before	{ content: '●●●●●'; color: rgba(0, 0, 0, .3); }
a.bcmpy:after	{ content: '' !important; margin-left: 0 !important; }
a:hover .bcmpy,
a.bcmpy:hover	{ background-color: #06c; text-decoration: none; }

/*----------------------
Destinations
----------------------*/
section.page-nav	{ color: #1968a6; background-color: #fff; }
section.page-nav a	{ display: block; color: inherit; transition: .2s; }
section.page-nav a:hover	{ text-decoration: none; }
section.page-nav ul	{ margin: 0; padding: 0; list-style: none; }
section.page-nav ul	{ background-color: #a3cdef; }
section.page-nav ul	{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 2px; }
section.page-nav li	{ flex: 1 0 30%; text-align: center; background-color: #fff; }
section.page-nav i	{ display: block; font-size: xx-large; }
section.page-nav span	{ display: block; font-size: xx-small; }

section.page-nav a	{ padding: 1em; }
section.page-nav a:hover	{ color: #fff; background-color: #1968a6;}
section.page-nav i	{ margin: auto; padding: .5rem; }

/*----------------------
Express
2021-04-19
----------------------*/
.topics	{ display: inline-block; margin: 1em 0;  padding: 0 1em; color: #fff; background-color: #e00; }

.starlight td:first-child	{ background-color: #ccffff; }
.starlight td:last-child	{ background-color: #bfdfff; }
.starlight td.head	{ background-color: #ccffcc; font-weight: bold; }
.bustop .head,
.bustop .head td	{ background-color: #edf8ed; font-weight: bold; }
.bustop .place	{ background-color: #f1ffff; }
.fee .head,
.fee .head td	{ background-color: #edf8ed; font-weight: bold; }
.fee .place	{ background-color: #f1ffff; }


/*----------------------
観光バスWEB予約バナー
ピリカ・ホワイトピリカ号
2024-09-17
----------------------*/
.webooking	{}
.webooking a	{ display: block; margin: auto; max-width: 500px; aspect-ratio: 3/1; text-indent: -9999px; transition: .3s; }
.webooking a	{ background: #f90 url(../common/btn_booking.png) no-repeat 50% 50% / contain; border-radius: 10px; }
.webooking a:hover	{ background-color: #f70; }

/*----------------------
釧路空港連絡バス
Airport Shuttle Bus
2024-10-15
----------------------*/
.apwebook	{ display: flex; flex-wrap: wrap; gap: 1em; margin-top: 1.6em; margin-bottom: 1.6em; }
.apwebook>*	{ flex: 1 0 auto; text-align: center; }
.apwebook a	{ padding: 1em; font-size: clamp(9px, 4vw, 16px); ; font-weight: bold; }
.apwebook a	{ color: #fff; background-color: #36d; border-radius: .5em; transition: .2s; }
.apwebook a:hover	{ background-color: #039; text-decoration: none; }

/*----------------------
⭐⭐⭐旧要素
----------------------*/
.clr,
.clear	{ clear: both; }

.f00	{ color: #f00; }
.c00	{ color: #c00; }
.orange	{ color: #f60; }
.magent	{ color: #f39; }
.green	{ color: #393; }
.egreen	{ color: #396; }
.blue	{ color: #33f; }
.dblue	{ color: #008; }
.blk	{ color: #000; }

.kome	{ color: #00c; }
.hoshi	{ color: #c00; }
.shikaku{ color: #c00; }
.sankaku{ color: #800080; }

.p10	{ font-size: 10px; }
.p12	{ font-size: 12px; }
.p13	{ font-size: 13px; }
.p14	{ font-size: 14px; }
.p16	{ font-size: 16px; }
.p18	{ font-size: 18px; }
.p24	{ font-size: 24px; }
.p48	{ font-size: 48px; }

.off	{ background-color: #ffc; }

.ttle	{ color: #039; font-size: 1.1em; font-weight: bold; }
/*.ttle a	{ padding: 2px; padding-left: 18px; font-weight: bold; background: url(arrow14x14.gif) no-repeat 0% 50%; }*/
.ttle a:before	{ display: inline-block; content: '\f138'; font-family: forkawesome; color: orange; margin-right: .3em; }

.dotline	{ padding: 4px; font-size: .9em; border-top: 1px dotted #ccc; }
.dotline2	{ padding: 4px; border-top: 1px dotted #ccc; }

.ybox	{ margin: 0; padding: 1em; color:#543; text-align: center; background-color: #ffd; border: 1px solid #c30; }

.rbox	{ display: inline-block; margin: 0; padding: .2em .5em; color: #fff; background-color: #c66; font-size: .8em; }
.gbox	{ display: inline-block; margin: 0; padding: .2em .5em; color: #fff; background-color: #9c6; font-size: .8em; }
.bbox	{ display: inline-block; margin: 0; padding: .2em .5em; color: #fff; background-color: #68c; font-size: .8em; }
.rbox2	{ margin: 0; padding: .3em .5em; color: #fff; background-color: #c00; }
.gbox2	{ margin: 0; padding: .3em .5em; color: #fff; background-color: #9c6; }
.bbox2	{ margin: 0; padding: .3em .5em; color: #fff; background-color: #68c; }

.link a:before	{ content: '\f138'; font-family: forkawesome; color: orange; margin-right: .3em; }
/*
.link	{ padding-bottom: 1em; vertical-align: top; }
.link .ttl,
.link a	{ font-weight: bold; }
.link2	{ padding-bottom: 1em; vertical-align: top; }
.link2 a	{ padding-left: 21px; font-size: 1.0em; }
.arrow	{ margin: 0; padding: 0; }
.arrow li		{ padding-bottom: 1em; list-style-type: none; }
.arrow li		{ padding-left: 18px; background: url(arrow14x14.gif) no-repeat 0px .3em; }
.arrow li.sub	{ padding-left: 21px; background-image: none; }
.arrow.border	{ padding: 1em .5em; border: 1px solid #abc; }

.pdf	{ padding: 3px; padding-left:  20px; background: transparent url(pdf.gif) no-repeat left center;  }
.pdfb	{ padding: 3px; padding-right: 20px; background: transparent url(pdf.gif) no-repeat right center; }
.pdf_big{ padding: 8px; padding-left:  50px; background: transparent url(pdf50.jpg) no-repeat left center;
	font-size: 24px; line-height:1.8; font-weight: bold; }

.uline	{ padding: 8px; border-bottom: 1px dotted #ccc; }
.nwin	{ padding-right: 20px; background: transparent url(arrow_new.gif) no-repeat right center; }
*/


/*-----------------------------
	2018-04-03
	バスロケ関連 app
-----------------------------*/
.apps	{ display: none; }
.apps	{
	position: relative;
	margin: auto;
	width: 560px;
	height: 240px;
	background-image: url(bnr_app2x.jpg);
	background-size: cover;
}
.apps a	{
	position: absolute;
	top: 191px;
	width: 132px;
	height: 42px;
	border-radius: .3em;
	transition: .3s;
}
.apps a.ln01	{ left:   6px; }
.apps a.ln02	{ left: 144px; }
.apps a.ln03	{ left: 285px; }
.apps a.ln04	{ left: 424px; }
.apps a:hover	{ background-color: rgba(255,255,255,.3); }
.apps a:after {
	content: '' !important;
	margin-left: 0 !important;
}

.apps_sp	{ position: relative; }
.apps_sp a	{ position: absolute; width: 25%; height: 25%; }
.apps_sp a:after { content: ''; margin: 0; }
.apps_sp a.ln01	{ left:   0; bottom: 0; }
.apps_sp a.ln02	{ left: 25%; bottom: 0; }
.apps_sp a.ln03	{ left: 50%; bottom: 0; }
.apps_sp a.ln04	{ left: 75%; bottom: 0; }
.apps_sp img	{ display: block; }






/*----------------------
Header
----------------------*/
#header { background: linear-gradient(0deg,rgb(56,128,225,0) 0%,rgba(56,128,225,.75) 100%); }
#header .inner {
	position: relative;
	max-width: 1200px;
	margin: auto;
	padding: 1rem 1rem 2rem;
	display: flex;
	justify-content: space-between;
}
/*#header .inner	{ background: #36c url(header.jpg) no-repeat center top; }*/
#header .inner:after	{
	position: absolute; bottom: 0; left: 0; right: 0;
	content: '';
	display: block;
	margin: 1rem;
	border-top: 1px solid #fff;
}
#header .logo	{}
#header .logo a {
	display: block;
	height: 11vw; max-height: 60px;
	aspect-ratio: 4/1;
	text-indent: -9999px;
	background-image: url(logo4x1.png);
	background-size: cover;
}

/*----------------------
Mobile Navigation
and
Navigation Drawer
----------------------*/
.nav-sp	{ display: flex; gap: .5em; align-items: center; }
.nav-btn	{	/* ボタン共通 */
	display: block;
	height: 10vw; max-height: 50px;
	aspect-ratio: 1/1;
	text-indent: -9999px;
	cursor :pointer;
	background: url(base.svg) no-repeat 50% 50% / contain;
	z-index: 2;
	transition: .2s;
}
.nav-btn:hover	{ transform: scale(1.1); text-decoration: none; }

.nav-info	{ background: url(info.svg) no-repeat 50% 50% / contain; }	/* お知らせボタン */
.dr-open	{ background: url(menu.svg) no-repeat 50% 50% / contain; }	/* ドロワーボタン */
.dr-close,
.dr-content	{ position: fixed; top: 0; width: 100%; height: 100%; transition: .3s; }
.dr-close	{ left: 0; background-color: #000; z-index: 99; opacity: 0; }	/* 閉じる用の薄黒カバー（全体） */
.dr-close	{ display: none; }	/* 初期は非表示 */
.dr-content	{ background-color: #36b; z-index: 9999; overflow: auto; }	/* ドロワーコンテンツ（最前面） */
.dr-content	{ right: 0; transform: translateX(105%); }	/* 右に隠しておく */
/*
.dr-content	{ left: 0; transform: translateX(-105%); }	/* 左に隠しておく */
.dr-unshown	{ display: none; }	/* チェックボックス等は非表示に */

#nav-drawer	{}
#nav-drawer .dr-content { width: 80%; max-width: 400px; }
#nav-drawer .dr-content label {
	display: block;
	padding: 1em;
	color: #fff;
	cursor :pointer;
}
/* 下階層 */
#nav-drawer .dr-content ul	{ margin: 0; padding: 0; display: block; }
#nav-drawer .dr-content ul	{ background-color: rgba(0, 0, 0, .1); border-bottom: thin solid rgba(255,255,255,.3); }
#nav-drawer .dr-content li	{ padding-left: 2em; line-height: 1.0; list-style-type: none; }
#nav-drawer .dr-content li	{ height: 0; overflow: hidden; transition: .4s; }
#nav-drawer .dr-content .accordion	{ display: none; }
#nav-drawer .dr-content a	{ display: block; padding: 1em; color: #fff; }
#acc-box:checked ~ #sub_box li	{ height: 3em; opacity: 1; }
.acc-none	{ border-bottom: thin solid rgba(255,255,255,.3); }
/**/
#nav-input:checked ~ .dr-close	{ display: block; opacity: .7; }	/* ✓→漆黒カバー */
#nav-input:checked ~ .dr-content{ transform: translateX(0%); box-shadow: -6px 0 25px rgba(0,0,0,.5); }	/* ✓→スライドメニュー */

#nav-drawer .dr-content .sns	{ position: initial; display: flex; background-color: transparent; }
#nav-drawer .dr-content .sns li	{ padding: 1rem 0; line-height: initial; }
#nav-drawer .dr-content .sns li	{ height: auto; }
#nav-drawer .dr-content .sns a	{ display: flex; padding: 0; }

/*----------------------
PC Navigation	未使用
----------------------*/
.nav-pc	{ display: none; }
.nav-pc	{ position: absolute; top: 90px; right: 1em; }

.nav-pc ul	{ margin: 0; padding: 0; }
.nav-pc li	{
	list-style-type:none;
	float:left;
	width: 90px;
	height: 30px;
	margin-right: 8px;
	font-size: 12px;
	line-height: 30px;
	text-align: center;
	font-weight: bold;
	background-color: #963;
	background-color: #0b7d0b;
	border-radius: .5em .5em 0 0;
}
.nav-pc a	{ display: block; color: #fff; transition: .3s }
.nav-pc a:hover	{ color: #fc0; text-decoration: none; }


/*--------------------
2025-07-07
Switch Language
nav-spに同じ
--------------------*/
.nav-lang	{ display: flex; gap: 1em; align-items: center; }
.nav-lang .nav-btn	{
	display: flex; justify-content: center; align-items: center; gap: 10px;
	height: 10vw; max-height: 30px;
	aspect-ratio: auto;
	text-indent: 0;
	font-weight: bold;
	color: #fff;
	background: none;
}
.nav-lang .nav-btn:before	{ content: ''; display: flex; height: 100%; aspect-ratio: 1/1; background: url(icon-language.svg) no-repeat 50% 50% / contain; }
.nav-lang .nav-btn.vtcl	{
	display: block;
	height: 10vw; max-height: 50px;
	aspect-ratio: 3/2;
	background: url(lang.svg) no-repeat 50% 50% / contain;
}
.nav-lang .nav-btn.vtcl:before	{ display: none; }
.nav-lang .dr-close-2	{ display: block; font-size: clamp(10px,10vw,32px); text-align: right; color: #fff; }
.nav-lang .dr-close-2:before	{ content: '✕'; cursor: pointer; }
.nav-lang .dr-content { width: 80%; max-width: 400px; padding: 20px; background-color: #00868e; }
.nav-lang .dr-content a	{ display: block; padding: 1em; color: #fff; border-bottom: thin solid rgba(255,255,255,.3); transition: .2s; }
.nav-lang .dr-content >:nth-child(2)	{ margin-top: 20px; border-top: thin solid rgba(255,255,255,.3); }
.nav-lang .dr-content a:hover	{ text-decoration: none; background-color: #3333; }
#nav-lang-input:checked ~ .dr-close	{ display: block; opacity: .7; }	/* ✓→漆黒カバー */
#nav-lang-input:checked ~ .dr-content{ transform: translateX(0%); box-shadow: -6px 0 25px rgba(0,0,0,.5); }	/* ✓→スライドメニュー */


/*----------------------
Language	未使用
----------------------*/
/*	2017-03-10 
	Language Switcher - ヘッダー部分に追加＆調整 */
#lang-switcher	{ border-bottom: 2px solid #019cdf; }
#lang-switcher ul	{ margin: 0 0 .5rem; padding: 0; text-align: right; }
#lang-switcher li	{ margin: 0; padding: 0; display: inline-block; list-style: none; }
#lang-switcher a	{
	margin-right: .25em; padding: .1em .75em;
	display: inline-block;
	font-size: .7rem;
	font-weight: lighter;
	color: rgba(255,255,255,.8);
	background-color: rgba(1,156,223,.5);
	border-radius: .25em;
}
#lang-switcher a:hover	{
	color: rgba(255,255,255,1);
	background-color: rgba(1,156,223,1);
	text-decoration: none;
}


/*----------------------
	Section Page Title
----------------------*/
/*.pagetitle	{ height: 33vh; min-height: 300px; }*/
.pagetitle	{ height: 30vw; max-height: 300px; }
.pagetitle	{ display: flex; justify-content: center; flex-direction: column; align-items: center; }
.pagetitle	{ color: #fff; }
.pagetitle h1	{
	font-size: 6vw;
	color: #fff;
	text-shadow: 0px 1px 6px rgba(0, 0, 0, .3);
}
.pagetitle h2	{ font-size: 4vw; }
/*
.pagetitle:before	{ content: ''; position: absolute; top: 0; left: 0; width: 100vw; height: 30vw; z-index: -1; }
.pagetitle:before				{ background: url(bg_top_day.jpg) no-repeat 50% 0%; }
#hogehoge .pagetitle:before	{ background: url(bg_top_night.jpg) no-repeat 50% 0%; }
*/
/*
.pagetitle h1:before	{
	content: '';
	display: block;
	margin: 0 auto .5em;
	height: 2em;
	background: url(yugakukan.png) no-repeat 50% 50% / contain;
}
.pagetitle h1:after	{
	content: '';
	display: block;
	margin: .5em auto 0;
	height: 8px;
	max-width: 1000px;
	border-radius: 1em;
	background-color: #81c7ef;
}
*/


/*----------------------
	Pankz
----------------------*/
#pankz	{ display: none; }
.pankz	{
	font-size: 12px;
	color: rgba(255, 255, 255, .8);
	background-color: #3d9482;
	border-top: 1px solid rgba(255, 255, 255, .6);
}
.pankz .inner	{ padding: 1em; }
.pankz a		{ display: inline-block; color: #fff; }
#pankz	{
	margin: .5em .5em 2em;
	padding: 0 .5em;
	height: 27px;
	line-height: 27px;
	font-size: 12px;
	text-align: left;
	border-top: 1px solid rgba(1,156,223,.5);
	border-bottom: 1px solid rgba(1,156,223,.5);
}


/*----------------------
	Footer
----------------------*/
#footer {
	font-size: 12px;
	color: #fff;
	background-color: #3d9482;
}
#footer .inner	{}
#footer .address{ padding: 1rem; border: 1px solid rgba(255,255,255,.3) }
#footer .logo	{
	display: block;
	margin-bottom: .5em;
	max-width: 200px;
	aspect-ratio: 4/1;
	text-indent: -9999px;
	background-image: url(logo4x1.png);
	background-size: cover;
}
#footer .cprt	{ padding: 1rem; text-align: center; color: #fff; background-color: #1c715d; }

#footer .nav-foot	{}
#footer .nav-foot ul	{ margin: 0; padding: 0; list-style-type: none; }
#footer .nav-foot ul	{ display: flex; flex-wrap: wrap; gap: 2em; }
#footer .nav-foot li	{ flex: 1 0 auto; }
#footer .nav-foot li	{ display: flex; flex-direction: column; justify-content: center; }
#footer .nav-foot a		{ padding: .25rem 0; color: inherit; }
#footer .nav-foot a+a	{ border-top: thin solid rgba(255,255,255,.3); }
#footer .nav-foot .address	{ display: block; }
/*
#footer .nav-foot li:nth-child(1)	{ flex: 1 0 30%; }
#footer .nav-foot a:after	{ display: none; }
#footer .nav-foot img { display: block; margin: auto; }
*/

/*	2017-02-17
	Accordion - フッター部分に追加＆調整 */
/* アコーディオン効果 */
#footer .accordion { display: inline-block; padding-right: 1em; }
#footer .accordion label	{ position: relative; color: #fff; cursor: pointer; }
#footer .accordion input	{ display: none; }
#footer .accordion .cont	{ position: absolute; padding-left: 1em; background-color: #36c; overflow: hidden; }
#footer .accordion .cont	{ height: 0; }
#footer .accordion input:checked + .cont { height: auto; }
#footer .accordion ul		{ margin: 0; padding: 0; list-style: none; }


/*----------------------
	Back to Page Top
----------------------*/
#pagetop { position: fixed; bottom: 2rem; right: 2rem; }
#pagetop a {
	display: flex; flex-flow: column; align-items: center; justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 3rem;
	z-index: 999;
	transition: .3s;
}
#pagetop a	{ opacity: .6; font-size: .6rem; color: white; background-color: orange; }
#pagetop a:hover	{ opacity: 1; text-decoration: none; }
#pagetop i	{ font-size: 1.2rem; }








/*----------------------
	for SmartPhone 
	Landscape （横）
----------------------*/
@media screen and (min-width:480px) {
	.flexs.x2 li	{ flex: 1 0 40%; }
	.flexs.x3 li	{ flex: 1 0 30%; }
	.flexs.thumb li h4	{ font-size: 1.6em; }
}


/*----------------------
	for Tablet
----------------------*/
@media screen and (min-width:768px) { /* and ( max-width:1024px) { */

	h3	{ font-size: 2.0rem; }
	h4	{ font-size: 1.6rem; }
	h5	{ font-size: 1.2rem; }
/*
	h3 { letter-spacing: .1em; }
	h4 { letter-spacing: .1em; }
*/
	section:not([class])	{ min-height: 320px; }

	.fl	{ float: left; }
	.fr	{ float: right; }
	.clr{ clear: both; }

	.inner { padding: 3em 1em; }

	.sectitle	{ font-size: 1.8em; }

	/*.covid-19	{ margin: 2em auto 4em; }*/

	.mbo	{ display: none; }
	.pco	{ display: initial; }

	/* Responsive Table Adjust 横スクロール解除 */
	table	{ display: table; white-space: normal; }

	.link .ttl,
	.link a	{ font-size: 1.2em; }
	.arrow li a		{ font-weight: normal; font-size: 1.1em; }
	.arrow li.sub a	{ font-weight: normal; font-size: 1.0em; }

	.phbox_r,
	.phbox_nr	{ float: right; margin: 0 0 2em 1em; }

	.phbox_l,
	.phbox_nl	{ float: left; margin: 0 1em 2em 0; }

	.pagetitle h1	{ font-size: 3em; }
	.pagetitle h2	{ font-size: 2em; }

	/* バスロケ関連 app */
	.apps	{ display: block; }
	.apps_sp{ display: none; }

	/* 釧路空港連絡バス */
	.apwebook.x2>*	{ flex: 1 0 45%; }
	.apwebook.x3>*	{ flex: 1 0 35%; }

	.nav-sp	{ gap: 1em; }
	/*#nav-drawer	{ display: none; }*/
	#nav-pc		{ display: block; }

	#pankz {
		margin: 0 0 2em;
		color: #f3f3f3;
		background-image: url(pankz.jpg);
		background-size: cover;
		border: none;
	}
	#pankz a	{ color: #fff; }

	/*	2017-03-10 Language Switcher - ヘッダー部分に追加＆調整 
	#lang-switcher	{ position: absolute; top: .5em; right: 1em; border: none; }
	#lang-switcher ul	{ margin: 0; padding: 0; }
	#lang-switcher li	{ margin: 0; padding: 0; display: inline-block; list-style: none; }
	#lang-switcher a	{
		margin-right: .25em; padding: .1em .75em;
		display: inline-block;
		font-size: .8rem;
		font-weight: lighter;
		color: rgba(255,255,255,.8);
		background-color: rgba(0,0,0,.3);
		border-radius: .25em;
	}
	#lang-switcher a:hover	{
		color: rgba(255,255,255,1);
		background-color: rgba(0,0,0,.4);
		text-decoration: none;
	}
	#lang-switcher a	{ font-size: .9em; color: #fff; background-color: #960; }
	#lang-switcher a:hover	{ background-color: #c00; }
*/
}


/*----------------------
	for PC
----------------------*/
@media screen and (min-width:1024px) {
}