@charset "utf-8";
@import url("https://www.hakobura.jp/css/share.css");

/* CSS Document */



/*GoogleMapプリント時非表示*/

@media print {
#Gmap {
	display: none;
}
}
dt, dd {
	text-align: left;
}
ul#topnav {
	clear: both;
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
ul#topnav li {
	float: left;
	margin: 0;
	padding: 0;
	position: relative; /*--ここ大事--*/
	z-index: 200;
}
ul#topnav li a {
	float: left;
	text-indent: -9999px;
	height: 46px;
}
ul#topnav li:hover a, ul#topnav li a:hover {
	background-position: left -94px !important;
}
ul#topnav a.Home {
	background: url(../images/nav_home.png) no-repeat;
	width: 139px;
}
ul#topnav a.Attraction {
	background: url(../images/nav_02.png) no-repeat;
	width: 129px;
	cursor: default;
}
ul#topnav a.SpotGuide {
	background: url(../images/nav_03.png) no-repeat;
	width: 143px;
	cursor: default;
}
ul#topnav a.EventInformation {
	background: url(../images/nav_04.png) no-repeat;
	width: 145px;
	cursor: default;
}
ul#topnav a.Library {
	background: url(../images/nav_05.png) no-repeat;
	width: 143px;
	cursor: default;
}
ul#topnav a.TransportationLodging {
	background: url(../images/nav_06.png) no-repeat;
	width: 132px;
	cursor: default;
}
ul#topnav a.UsefulInformation {
	background: url(../images/nav_07.png) no-repeat;
	width: 128px;
	cursor: default;
}

ul#topnav a.is-external_link{
	position: relative;
}

ul#topnav a.is-external_link:after{
	padding-left: 7px;
  content: url(../images/blank.png);
	bottom: 0.3rem;
	position: absolute;
}

.Menu_Now {
	background-position: left -47px !important;
}
/*サブメニューの位置と枠サイズ*/



.glcss01 { /*函館の魅力*/
	top: 45px;
	left: 0;
}
.glcss02 { /*スポットを探す*/
	top: 45px;
	left: 0;
}
.glcss03 { /*イベント情報*/
	top: 45px;
	left: 0;
	height: 220px;
}
.glcss04 { /*ライブラリー*/
	top: 45px;
	left: 0;
	height: 220px;
}
.glcss05 { /*交通・宿泊*/
	top: 45px;
	right: 1px;
	height: 220px;
}
.glcss06 { /*便利情報*/
	top: 45px;
	right: 1px;
}
.glcss05 dl dt {
	float: right !important;
} /*交通・宿泊　リスト右寄せ*/
.glcss06 dl dt {
	float: right !important;
} /*便利情報　リスト右寄せ*/
.glcss05 .glo_content05 {
	left: 1px;
!important;
} /*交通・宿泊　リスト右寄せ*/
.glcss06 .glo_content06 {
	left: 1px;
!important;
} /*便利情報　リスト右寄せ*/
ul#topnav li div.glosub {
	position: absolute; /*--ここ大事--*/
	float: left;
	background: #FFFFFF;
	padding: 15px 10px 15px;
	/*--Bottom right rounded corner--*/

	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/

	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	box-shadow: -1px -1px 0px 1px rgba(9,9,9,0.1) inset, 1px -1px 0px 1px rgba(9,9,9,0.1) inset;
	display: none; /*--JSオフ時に表示されないようにします--*/
}
ul#topnav li .glosub dl {
	margin: 0;
	padding: 0;
	width: 400px;
	float: left;
	text-align: left;
}
ul#topnav li .glosub dl dt {
	width: 240px;
	border-top: #CCC 1px dotted;
	padding-top: 3px;
	padding-left: 3px;
	text-align: left;
}
/*サブメニュー共通部分*/



ul#topnav li .row {
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
ul#topnav .glosub dl dt:first-child {
	width: 240px;
	border: none;
	text-align: left;
}
ul#topnav .glosub dl dt h2 {
	margin: 0;
	background: url(../images/navlist_arrow.png) no-repeat 0px 10px;
	padding: 0px 0 0px 10px;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
}
ul#topnav .glosub dl dt h2 a {
	padding: 3px 0;
	background-image: none;
	color: #006;
	text-align: left;
}
ul#topnav .glosub dl dt h2 a span.moresmall {
	font-size: 10px;
}
ul#topnav .glosub dl dt a {
	float: none;
	text-indent: 0; /*--text-indent戻します--*/
	height: auto;
	display: block;
	text-decoration: none;
	color: #fff;
	text-align: left;
}
ul#topnav .glosub dl dt a:hover {
	color: #930;
	background-position: 5px 12px;
	text-align: left;
}
/* サブメニューの説明出現部分(右側画像＋リード文) */

.glohover01,  .glohover02,  .glohover03,  .glohover04,  .glohover05,  .glohover06 {
	background: #E8F2F4;
	padding-left: 3px;
	display: block !important;
}
.glo_content01,  .glo_content02,  .glo_content03,  .glo_content04,  .glo_content05,  .glo_content06 {
	width: 150px;
	top: 5px;
	left: 248px;
	padding: 10px !important;
	position: absolute;
}
.glo_sub_text {
	font-size: 12px;
	padding: 5px 0 0 0;
	margin: 0;
}
.spoot_search {
	float: left;
	margin-right: 34px;
}
.fw_search {
	margin-top: 19px;
}
div#header_block {
	overflow: hidden;
	margin-bottom: 15px;
	margin-top: 5px;
}
.fw_search p {
	color: black;
	padding: 0;
	margin-bottom: 6px;
}
.widget-search form {
}
input#search {
	border-radius: 6px;
	width: 225px;
	height: 28px;
	border: 1px solid #999999;
}
input.submit_button {
	font-size: 16px;
	color: #FFF;
	background-color: #333333;
	border: 1px solid #E4E4E3;
	width: 48px;
	height: 31px;
	border-radius: 6px;
	font-family: "ＤＦ太丸ゴシック体";
	padding: 5px 8px 7px 7px;
}
p#searchby_title {
	color: #000000;
}


/* ==========================================================================
// 行間対応　18.01.17 追加
// ========================================================================== */

/*Mt記事、DB記事*/
.asset-content,
.firststory__alpha-inner {
	line-height: 1.5;
	/*font-size: 14px;*/
}

.asset-content__border{
	border-color:#CCCCCC;
	margin-top: 15px;
	margin-bottom: 15px;
}

/*新着スポット一覧*/
#Db_contentinner #Db_newentrylist div.newblock {
	line-height: 1.5;
	height: auto; /*MTの独自cssを打消し*/
}

/* ==========================================================================
// PCとSPで改行を出し分ける対応　18.02.14 追加
// ========================================================================== */
.pc_br { display: block; }
.sp_br { display: none; }


/* ==========================================================================
// ラブライブの記事対応　18.04 追加
// ========================================================================== */
.lovelive{
	width: 500px;
}
.lovelive__map{
	width: 650px;
	height: 500px;
}
.lovelive__title{
	font-size: 120%;
}

/* ==========================================================================
// ニュースのサイドバーにイベントガイドのバナー設置対応　18.04.27 追加
// ========================================================================== */
#beta .event_guide {
	width: 100%;
	margin: 0;
	padding: 0 0 15px 0;
	background-color: #fff;
	text-align: center;
}
#beta .event_guide__link:link { color: #fff; }
#beta .event_guide__link:visited { color: #fff; }
#beta .event_guide__link:active { color: #fff; }
#beta .event_guide__link:hover { color: #fff; }

#beta .event_guide__bnr{
	width: 100%;
}
#beta .event_guide__capt{
	padding: 5px;
	background-image: linear-gradient(to right, #ffdf00 0%, #83b93c 27%, #d94954 62%, #50b8ea 100%);
	line-height: 1.2;
	font-family: "Noto Sans Japanese", Hiragino sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ ProN W3", Roboto, "Droid Sans", YuGothic, "游ゴシック", Meiryo, "メイリオ", Verdana, "MS Pゴシック", sans-serif;
	font-weight: bold;
}

/* 190409.[MT]毛ガニ、タラバ、ズワイ......函館でカニ満喫！ 画像を横並びにするための対応 */
.twoColumnImg{
	width: 500px;
}
/* 190409.[MT]夜景と街並みを満喫、函館ナイトドライブ 画像をリサイズさせずに並べるための対応 */
.mtImageColumn{
	width: 500px;
}
.mtImageColumn .num_seg img {
  display: inline-block;
  margin-right: 3px;
  width: 15px;
  height: 18px;
}

/* 191107.[MT]白い画像に枠線を付ける時のクラスを作成 */
.asset-content .mtImageBorder { /*<img>に付ける*/
	border: 1px solid #888;
}

/* 191205.[MT]年末年始テーブルの施設名固定対応（sticky） */
.PCdisplay{
  display: table-cell;
  border-left: 1px solid #000;
}
.SPdisplay{
  display: none !important;
}

/* 201120.[MT]年末年始 */
.eigyoLists .eigyoList {
  width: auto;
}
.eigyoLists .eigyoList:not(:first-child) .eigyoList__title{
  margin-left: 1em;
}

/* 200629.[MT]インフォでコンテンツを左右に並べる*/
.divWrapper {
  width: 500px;
  display: flex;
  justify-content: space-between;
}
.imgDiv {
  width: 250px;
}
.txtDiv {
  width: 230px;
}

/* 201208.[MT] ページ幅710pxの特殊なレイアウト記事対応*/
.divWrapper-wide {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.divContent {
  display: block;
}
.imgDiv-wide {
	width: 340px;
}
.txtDiv-wide {
  width: 340px;
  margin-top: 10px;
}
.imgDiv-wide.-imglarge {
	width: 500px;
}
.txtDiv-wide.-imglarge {
  width: 190px;
  margin-top: 0px;
}
.imgDiv-wide.-threeColumn {
	width: 220px;
}
.txtDiv-wide.-threeColumn {
	width: 220px;
	margin-top: 10px;
}
.imgDiv-wide.-imgXlarge {
	width: 640px;
}

/* 2020.12.18 追加*/
.glayMessage {
  width: 600px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 1em 0;
}

/* 21.03.12 コラム記事番号つき画像HTML化 */
.num-circle {
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}
.num-circle::before {
	content: attr(data-num);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: #3a4cb2;
	color: white;
	border-radius: 50%;
	font-size: 10px;
}

/* 21.04.01 コラム記事アルファベット画像HTML化 */
.alphabet-circle {
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}
.alphabet-circle::before {
	content: attr(data-num);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: #01a119;
	color: white;
	border-radius: 50%;
	font-size: 10px;
}