/*--------------------------
	阿寒バス株式会社
	akanbus.co.jp
	2022-05-12	rewrite
	2018-08-08	Mobile first
----------------------------*/

/*-- 2021-01-22 Update 仮予約フォーム --*/
input,
button,
textarea,
select {
	font: inherit;
}

/* section */
/*.maps	{ background: linear-gradient(90deg,#dbedd3 50%, #b4daff 50%); }*/
/* section */
.maps	{ background: linear-gradient(90deg,#ebebce 50%, #99deff 50%); }
.maps .inner	{ max-width: none; padding: 0; text-align: center; }
.maps .inner	{ background: url(./maps/map_base16x9.svg) no-repeat 50% 50% / contain; }
.maps img	{ display: block; }

.maps.winter	{ background: linear-gradient(90deg,#fff 50%, #a7c2d7 50%); }
.maps.winter .inner	{ background-image: url(./maps/map_base16x9-winter.svg); }

/*-- 定期観光バス --*/
.map	{ margin: auto; max-height: 640px; aspect-ratio: 16/9; }
.all	{ background: url(./maps/map_all.svg) no-repeat 50% 50% / cover; }
.s01	{ background: url(./maps/map_pirika.svg) no-repeat 50% 50% / cover; }
.w01	{ background: url(./maps/map_whitepirika.svg) no-repeat 50% 50% / cover; }
.kushiro-shiretoko	{ background: url(./maps/map_kushiro-shiretoko.svg) no-repeat 50% 50% / cover; }
.shiretoko-kushiro	{ background: url(./maps/map_shiretoko-kushiro.svg) no-repeat 50% 50% / cover; }
.kushiro-utoro		{ background: url(./maps/map_kushiro-shiretoko-winter.svg) no-repeat 50% 50% / cover; }
.utoro-kushiro		{ background: url(./maps/map_shiretoko-kushiro-winter.svg) no-repeat 50% 50% / cover; }


/*-- タイトル「定期観光バスWEB予約」 --*/
.sbtitle	{
	margin: 1em auto;
	padding: 8px;
	font-size: 24px;
	/*line-height: 1.2;*/
	text-align: center;
	color: #fff;
	background-color: #f90;
	border: 3px solid #fc6;
}
.sbtitle span	{ display: block; font-size: 14px; }


/*-- 仮予約フォーム 表示切替 --*/
.switchbox		{ margin: 10px; padding: 0; }
.switchbox label{ display: inline-block; font-weight: normal; cursor :pointer; }
.switchbox label{ padding: .25em 1em; color: #fff; background-color: #36c; border-radius: 1em; }
/*チェックボックスを非表示にする*/
.switchbox input[type=checkbox]	{ display: none; }
/*中身を非表示にしておく*/
.switchbox div	{ height: 0; overflow-y: hidden; opacity: 0; transition: .8s; }
/*クリックで中身を表示*/
.switchbox input:checked + label + div { height: auto; opacity: 1; }
/*アイコン*/
.switchbox label::after { content: '\f107'; font-family: 'forkawesome'; padding-left: 8px; opacity: .5; }
/*クリックでアイコン入替*/
.switchbox input:checked + label::after { content: '\f106'; }


/*-- ウェブ予約サイト〜リンクボタン一覧 --*/
.wrap_booking	{ padding: 1.5em; border: 5px solid #f005; }
.wrap_booking .sbtitle	{ margin-top: 0; }
.resvlink	{ display: flex; flex-wrap: wrap; justify-content: space-between; grid-gap: 1em 2em; }
.resvlink	{ margin: 0; padding: 0; align-items: center; text-align: left; list-style-type: none; }
.resvlink > *	{ flex: 1 0 40%;}
.resvlink a	{ display: block; padding: .75em; background-color: #fff; border-radius: .5em; box-shadow: 0 0 12px rgba(0,0,0,.1); transition: .2s; }
.resvlink a	{ font-size: 1.2em; }
.resvlink a:hover	{ color: #fff; background-color: #36c; text-decoration: none; }
.resvlink a:before	{ content: '\f276'; font-family: forkawesome; margin-left: 2em; margin-right: .5em; }


/* for SmartPhone Landscape (横) */
@media screen and (min-width:480px) { 
}



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