/*--------------------------
阿寒バス株式会社
akanbus.co.jp
2024-12-16	ひがし北海道観光ナビ「テキスト」リンク
2024-09-02	日帰り路線バスパック
2024-01-22	ひがし北海道ネットワークバス乗り放題パス
2022-02-22	rewrite
2018-08-08	Mobile first
----------------------------*/
@charset "UTF-8";

body	{ background-image: none; }
body	{ background-color: #89d0fa; }
body	{ background-color: #d8e6ee; }
body	{ background-color: #7eb5d5; }

.sectitle:before	{ display: block; margin: auto; height: auto; background: none; font-family: forkawesome; font-size: 1.5em; }

/*----------------------
Fotorama
----------------------*/
.fotorama-container	{ position: absolute; width: 100%; z-index: -1; }
/*.fotorama-container	{ max-width: 1280px; margin: auto; }*/
.fotorama-container img	{ margin: 0 auto; }
.fotorama-container img	{ max-width: 1280px !important; max-height: 720px !important; }
/* スマホ補正 */
.fotorama__stage,
.fotorama-container img	{ min-height: 300px !important; }
/*
.fotorama__caption__wrap	{ background-color: rgba(255,255,255,.75); }
.fotorama__caption	{ font-size: .7em; text-align: right; }
.fotorama__html div,
.fotorama__html a { display: block; height: 100%;}
@media screen and (min-width:768px) {
	.inner	{ padding: 2% 6%; }
}
*/
/*----------------------
Header
----------------------*/
#header	{ background: none; }

/*-----------------------------
Main Image
-----------------------------*/
section.top-main .inner	{ padding: 0 1em; border-bottom: 1em solid #fff; }
section.top-main	{ background-color: transparent; }
section.top-main img	{
	display: block;
	width: 50vw;
	max-width: 600px;
	aspect-ratio: 4/3;
	margin-right: 0;
}
section.top-main a:after {
	content: '' !important;
	margin-left: 0 !important;
}
/*
section.top-main	{ position: absolute; top: 0; }
section.top-main	{ width: 100%; height: 60vh; overflow: hidden; z-index: -1; }
section.top-main	{ background: url(./ph/mashu.jpg) no-repeat 50% 0% / cover; }	/* 摩周湖　夏 */

/*-----------------------------
	Navigation
section.top-nav	{ margin-top: calc(60vh - 15vh); }
section.top-nav	{ background-color: transparent; }
section.top-nav .inner	{ color: #1968a6; background-color: #fff; }
section.top-nav .inner	{ margin-top: -1em; padding-top: 1em; }
-----------------------------*/
section.top-nav	{ background: #fff url(top-nav-shadow.png) no-repeat 50% 0%; }
section.top-nav .inner	{ padding-top: 0; color: #1968a6; background-color: #fff; }
section.top-nav a	{ display: block; color: inherit; transition: .2s; }
section.top-nav a:hover	{ text-decoration: none; }
section.top-nav ul	{ display: flex; flex-wrap: wrap; align-items: center; }
section.top-nav i	{ display: block; font-size: xx-large; }
section.top-nav span	{ display: block; font-size: xx-small; }

section.top-nav .first	{ justify-content: space-around; gap: 2px; background-color: #a3cdef; }
section.top-nav .first li	{ flex: 1 0 auto; text-align: center; background-color: #fff; }
section.top-nav .first li	{ flex: 1; min-width: 170px; }
/*section.top-nav .first li+li{ border-left: 2px solid #a3cdef; }*/
section.top-nav .first a	{ padding: 1em 0; }
section.top-nav .first a:hover	{ color: #fff; background-color: #1968a6;}
section.top-nav .first i	{ margin: auto; padding: .5rem; }

section.top-nav .second	{ margin: 2em 0; justify-content: space-around; gap: 1em; }
section.top-nav .second li	{ flex: 1 0 auto; text-align: center; border: 2px solid #a3cdef; }
section.top-nav .second a	{ display: flex; justify-content: center; padding: 1em 0; }
section.top-nav .second a:hover	{ color: #fff; background-color: #1968a6;}
section.top-nav .second i	{ margin: auto 1rem; }

section.top-nav .third	{ margin-top: 2em; display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }
section.top-nav .third > *	{ flex: 1 0 50%; }
section.top-nav .third img	{ display: block; }
section.top-nav .third a:hover	{ opacity: .8; }
/* No Icon */
section.top-nav .third a:after {
	content: '' !important;
	margin-left: 0 !important;
}

section.top-nav .third.x3	{ align-items: stretch; }
section.top-nav .third.x3 > *	{ display: flex; justify-content: center; align-items: center; }

/*-----------------------------
2024-12-16
ひがし北海道観光ナビ
テキストリンク
-----------------------------*/
section.top-nav .ehn-link	{ margin: 2rem 0; color: #345; font-size: clamp(.9em, 2.4vw, 1.5em); border: 2px solid #a3cdef; transition: .2s; }
section.top-nav .ehn-link a	{ width: fit-content; margin: auto; padding: 1rem 1em; color: inherit; transition: none; }
section.top-nav .ehn-link span	{ color: #25c; font-size: clamp(.8em, 2.4vw, 1rem); }
section.top-nav .ehn-link br	{ display: none; }
section.top-nav .ehn-link:hover	{ color: #fff; background-color: #1968a6; }
section.top-nav .ehn-link:hover span	{ color: #fff9; }

/*-----------------------------
2024-09-02
日帰り路線バスパック
リンクバナー
-----------------------------*/
.rid2500jp-buspack {
	aspect-ratio: 6/5;
	width: 100%;
	overflow: hidden;
	text-indent: -9999px;
	background: #98d9ed url(../images/rid2500jp/300_250.png) no-repeat 50% 50% / contain;
}

/*-----------------------------
2024-01-22
ひがし北海道ネットワークバス乗り放題パス
リンクバナー
-----------------------------*/
.exbus-freepass_winter {
	aspect-ratio: 6/5;
	width: 100%;
	overflow: hidden;
	text-indent: -9999px;
	background: #98d9ed url(../images/exbus-freepass/exbus-freepass_winter_300_250_2024.jpg) no-repeat 50% 50% / contain;
}

/*-----------------------------
	2021-12-13
	ウェブ予約サイト一覧
	リンクボタン
-----------------------------*/
section.top-nav ul.resvlink	{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1px; }
section.top-nav ul.resvlink	{ margin-top: 1px; padding: 0; align-items: center; text-align: left; list-style-type: none; }
section.top-nav ul.resvlink li	{ flex: 1 0 auto; color: #fff; background-color: #f66; font-size: .9rem; }
/*section.top-nav ul.resvlink li	{ flex: 1 0 100%; }	/* 夏バージョン（リンク数少ない） */
section.top-nav ul.resvlink a	{ position: relative; padding: 15px 10px; color: inherit; }
section.top-nav ul.resvlink a:hover	{ background-color: #f00; text-decoration: none; }
/*
section.top-nav .resvlink a:before	{ margin-right: .5em; font-family: forkawesome; }
section.top-nav .resvlink a:before	{ content: '\f207'; }
*/
section.top-nav .resvlink a:after	{ position: absolute; top: 15px; right: 15px; }
section.top-nav .resvlink a:after	{ content: '\f138'; font-family: forkawesome; opacity: .7; }


/*-----------------------------
	Information
-----------------------------*/
section.top-info	{ background-color: #7ec2b7; }
section.top-info .sectitle	{ color: #fff; border-bottom: 3px solid rgba(255, 255, 255, .5); }
section.top-info .sectitle:before	{ content: '\f0ea'; }

section.top-info .info.list	{ background-color: #7ec2b7; }

/*-----------------------------
	SNS
-----------------------------*/
section.top-sns	{ background-color: #fff; }
section.top-sns .sectitle:before	{ content: '\f207'; }
section.top-sns .tweet-box	{ margin: 2em auto 0; padding: 1em; max-width: 640px; }
section.top-sns .tweet-box	{ background-color: #f0f7fe; text-align: center; border-radius: .5em; }
/*
section.top-sns .tweet-box:before	{ content: '\f099'; color: rgb(29, 155, 240); font-size: 2.5em; font-family: forkawesome; line-height: 30vh; }
*/
section.top-sns .youtube-box	{ margin: 2em auto 0; max-width: 640px; }
section.top-sns .youtube-box	{ width: 100%; aspect-ratio: 16 / 9; }
section.top-sns .youtube-box iframe	{ width: 100%; height: 100%; }


/*-----------------------------
	Banner
-----------------------------*/
section.top-bnr	{ background-color: #7dc2b7; }
section.top-bnr	{ background-color: #7ec2b7; }
section.top-bnr .inner > *+*	{ margin-top: 1em; }
section.top-bnr ul	{ margin: 0; padding: 0; list-style-type: none; }
section.top-bnr ul	{ display: flex; flex-wrap: wrap; gap: 1em; }
section.top-bnr li	{ flex: 1 0 auto; max-width: 100%; }
section.top-bnr li	{ background-color: #fff; box-shadow: 0 0 15px 3px rgb(0 32 64 / 20%); }
section.top-bnr li	{ display: flex; flex-direction: column; justify-content: center; text-align: center; }
section.top-bnr a	{ display: block; padding: 1em; transition: .2s; }
section.top-bnr a:hover	{ opacity: .8; }
section.top-bnr a:after	{ display: none; }
section.top-bnr img { display: block; margin: auto; }







/* ⭐ */

/*-----------------------------
	 xfade2.js
-----------------------------*/
#xfade_imageContainer		{ position: relative; max-width: 560px; height: 150px; overflow: hidden; }
#xfade_imageContainer img	{ position: absolute; top: 0; left: 0; }
#xfade_imageContainer img	{ display: none; }

/*-----------------------------
	2021-07-06
	Web予約QRコード
-----------------------------*/
.qrcodes	{ display: flex; justify-content: space-around; }
.qrcodes	{ border: 3px solid #ff5653; border-top: none; }
.qrcodes	{ margin: 0 auto 2em; padding: 1em; text-align: center; list-style-type: none; }
.qrcodes a	{ color: inherit; font-size: 11px; }
.qrcodes img{ display: block; margin: auto; padding: 1em; max-width: 96px; }

/*-----------------------------
	2020-09-24
	キャンペーンバナー
-----------------------------*/
.cpbnr	{ margin-top: 1.5em; text-align: center; background-color: #eee; }
.cpbnr img	{ display: block; }
.cpbnr.shadow	{ box-shadow: 0 0 6px 0 rgba(0,0,0,.2); }


/*-----------------------------
	発車オーライネット & Japan Bus Online
-----------------------------*/
.flex2x		{ margin: 1em 0; padding: 0; }
.flex2x		{ display: flex; justify-content: space-between; }
.flex2x li		{ list-style: none; }
.flex2x li+li	{ margin-left: 1em; }
.flex2x img		{ display: block; }
.flex2x.around	{ justify-content: left; align-items: center; }

/*-----------------------------
	uu-hokkaido.com
-----------------------------*/
.m-lang		{ width: 100%; max-width: 560px; font-size:11px; border: 1px solid #ccc; }
.m-lang tr	{ text-align: center; }
.m-lang .head	{ color: #fff; background-color: #c00; }







/* for SmartPhone Landscape (横) */
@media screen and (min-width:480px) {
	section.top-nav .second li	{ flex: 1; }
}



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

	section.top-main img	{ margin-top: 4vw; width: 50vw; max-width: 600px; }

	section.top-nav .first li	{ flex: 1; }
	section.top-nav .first li	{ min-width: 150px; }

	section.top-nav .third > *	{ flex: 1 0 40%; }

	section.top-nav .third.x3 > *	{ flex: 1 0 35%; }
	section.top-nav .third.x3 > *:nth-child(1)	{ flex: 1 0 26%; }
/*	.exbus-freepass_winter	{ aspect-ratio: 21/13; }*/

	section.top-nav .ehn-link br	{ display: inline; }

	section.top-bnr li	{ flex: 1 0 40%; }
	section.top-bnr .x3 li	{ flex: 1 0 25%; }

}


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

	section.top-main img	{ margin-top: 6vw; }

	section.top-nav .third.x3 > *:nth-child(4)	{ flex: 1 0 30%; }
	section.top-nav .third.x3 > *:nth-child(5)	{ flex: 1 0 30%; background: #bbd1cb url(base1x1.png) no-repeat 0% 50% / 200%; }
	section.top-nav .third.x3 > *:nth-child(6)	{ flex: 1 0 30%; background: #bbd1cb url(base1x1.png) no-repeat 100% 50% / 200%; }
}