@charset "utf-8";

::selection { background-color: #777; }	/* テキスト選択時の色 */
::placeholder{	color: #fff; }					/* input または textarea 要素のプレイスホルダー文字列 */




header{
	clear: both; float: left;
	padding: 10px 5px; width: 100%;
	background-color: #222;/**/
	border-bottom: 1px #777 solid;
}

/* ロゴ画像BOX 	(※左側 ) */
#header_b{
	float: left;
	margin-bottom: 5px;
}
@media screen and (max-width: 900px){	/* 900px以下 */
	#header_b{
		width: 100%;
		/* 横のセンタリング(子要素) */
		display: flex;
		justify-content: center;		/* 水平方向		中央揃え */
	}
}
/* ロゴ画像 */
#header_b_l{
	float: left;
}
#header_b_l a{
	display: block;
}
#header_b_l a img{
	width: auto; height: 80px;/**/
	object-fit: contain;			/* 画像倍率 = 変化する	縦横比率 = 保持	トリミング = しない		画像の縦横比を維持して、ボックスの中に画像のすべてが収まるようにリサイズ */
}
@media screen and (max-width: 900px){	/* 900px以下 */
	#header_b_l a img{
		width: auto; height: 70px;/**/
	}
}
#header_b_l a img:hover{ opacity:0.7; cursor: pointer; }



/* メニューBOX 	(※上段右側 ) */
#header_m_b{
	float: right;
	width: auto; height: 80px;

	/* 子要素を下寄せ */
	display: flex;
	align-content: stretch;
	align-items: flex-end;
	justify-content: flex-end;	/* 子要素を右寄せ */
}
@media screen and (max-width: 900px){	/* 900px以下 */
	#header_m_b{
		float: right; clear: both;
		padding-top: 10px; margin-top: 10px; width: 100%; height: auto;
		border-top: 1px #777 dashed;
	}
}


/* 「登録」「ログイン」「設定」ボタン */
#header_m_b div{
	float: left;
	padding: 0; margin-right: 70px; width: 30px; height: 30px;
}
@media screen and (max-width: 900px){	/* 900px以下 */
	#header_m_b div{ margin: 0 0 0 35px; }
	#header_m_b div:last-child{ margin: 0 5px 0 35px; }	/* 最後の div のみ */
}
#header_m_b div a{
	display: block;
}
/* アイコン画像 */
#header_m_b div a img, #header_m_b div img{
	width: 100%; height: auto;		/* 親BOXに合わせる */
	object-fit: contain;				/* 画像倍率 = 変化する	縦横比率 = 保持	トリミング = しない		画像の縦横比を維持して、ボックスの中に画像のすべてが収まるようにリサイズ */
}
#header_m_b div a img:hover, #header_m_b div img:hover{ opacity:0.7; cursor: pointer; }

#header_m_b0, #header_m_b1{ position: relative; }	/* ログインマーク・暗号鍵マークを付ける都合 */
/* 設定アイコン回転 */
#header_m_b9{ animation: spin 60s linear infinite; 	overflow: hidden;	}
@keyframes spin{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* ログインマーク */
#header_login_mark{
	display: none;/**/
	position: absolute; bottom: -6px; left: 0px;
	padding: 0; margin: 0; width: 100%; height: 4px;
	background-color: #09f;
}
/* 暗号鍵マーク */
#header_angou_key_mark{
	display: none;/**/
	position: absolute; bottom: -6px; left: 0px;
	padding: 0; margin: 0; width: 100%; height: 4px;
	background-color: #09f;
}