/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * icon.css
 */

/*//////////////////////////////////////////////////////////////////////////////////////////////////
//
//		Icon
//
//////////////////////////////////////////////////////////////////////////////////////////////////*/  

/* :::::: アイコンBOX :::::: */
.icon_box {
	position: fixed;
	z-index: 5012;  /*　深さの基本設定  */
	//top:   5px;   /*　位置の基本設定  */
	top:   25px;   /*　位置の基本設定  */
	right: 5%;    /*　位置の基本設定  */
	align: right;
}
@media screen and (max-width: 640px) {  /* 携帯電話 */ 
	.icon_box {
		width: 35px;
		top:   65px;   /*　位置の基本設定  */
		right: 2%;
	}
}

/* :::::: 32x32アイコン（サイズ固定、白枠をつけてhover対応） :::::: */
.px32_icon {
	opacity: 1.0;
	vertical-align: top;
	width: 32px;
	height: 32px;
	border: thin solid #333;
	padding: 0;
	margin: 0 0px; /* 上下 左右 */

	//border-radius: 6px; /* 角が美しくない */
	-webkit-transform: scale(1);
	transform: scale(1);
}
.px32_icon:hover {
	border: medium solid #FFF;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
@media screen and (max-width: 640px) {  /* 携帯電話 */ 
	.px32_icon {
		float: none;
		margin-top:16px;
		top:   65px;   /*　位置の基本設定  */
	}
}

/* :::::: クリック対象（hover対応） :::::: */
.nonclick_icon {
	opacity: 1.0;
	border: thin solid #333;
	vertical-align: top;
	border-radius: 10px;
}
.click_icon {
	opacity: 1.0;
	border: thin solid #333;
	vertical-align: top;
	border-radius: 10px;
}
.click_icon_noradius {
	opacity: 1.0;
	border: thin solid #333;
	vertical-align: top;
}
.click_icon:hover,
.click_icon_noradius:hover {
	opacity: 0.7;
}