/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl, dd { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。*/
	padding: 0;
	margin: 0;
	list-style: none
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
}
p {
	margin: 0;
	padding: 0;
	text-align: justify;
}
table{
	border-collapse: collapse;
  	border-spacing: 0;
}
img {
	margin: 0;
	padding: 0;
	vertical-align: text-bottom;
	width: 100%;
	height: auto;
}
a img {
	border: none;
}
a:link {
	color: #222222;
	text-decoration: none !important;
}
a:visited {
	color: #222222;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}
hr {
	clear: both;
	display: none;
}
.cf:before, .cf:after {
	content: " ";
	display: table
}
.cf:after {
	clear: both
}
.cf {
*zoom:1
}

/*HTML 5 サポート - 新しい HTML 5 タグを display:block に設定します。これにより、ブラウザーでタグが適切にレンダリングされます。 */
header, section, footer, aside, article, figure {
	display: block;
}



/*********   layout  ************/

body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
	padding: 0;
	margin: 0;
	line-height: 1.8;
	color: #333333;
	background:#fff;
	position: relative;
}





/*========================================================================
//
// 共通（フォントサイズなど）
//
//========================================================================*/

/*********  PC（画面の横幅が762px以上） ************/

	html {
		height: 100%;
		position: relative;
		font-size: 10px;
	}
    
    body{
        width: 100%;
        overflow-x: hidden;
    }
	
	.wrapper {
		width: 1000px;
		margin: 0 auto;
		position: relative;
	}
	



/*========================================================================
//
// main
//
//========================================================================*/

	
	main{
		display: block;
		width:100%;
		padding: 42px 0 0;
		margin: 0;
		position: relative;
	}
    

	main h1{
		width:100%;
		position: fixed;
		left:0;
		top:0;
		z-index: 10;
	}
	
	main h1 > a{
		display: block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.4rem;
		color: #fff !important;
		text-align:center;
		background:#5AC8FA;
		padding: 7px 0 10px;
	}

	.info_wrap{
		position:absolute;
		left: 4px;
		top: 4px;
	}

	.info_wrap a{
		display:block;
		width: 36px;
		line-height: 0;
		padding: 0;
		position:relative;
	}
	.info_wrap a img{
		filter: brightness(0) invert(1);
	}

	.info_wrap a .badge{
		display:none;
		width: 9px;
		height: 9px;
		background:#ff0000;
		border: 2px solid #5AC8FA;
		border-radius:50%;
		position:absolute;
		top: 6px;
		right: 2px;
	}

	.info_wrap a .badge_on{
		display:block;
	}

	.info_wrap a:hover{
		background:#5AC8FA;
		opacity:0.5;
	}