@charset "UTF-8";

/* ============================================================================
	フォント
============================================================================ */
@font-face {
  font-family: 'UDEV_Gothic_JPDOC_Subset';
  src: url('../font/UDEVGothicJPDOC-Regular-Subset.woff2') format('woff2');
}

/* ============================================================================
	基本設定
============================================================================ */
body {
	font-family:		'UDEV_Gothic_JPDOC_Subset',
						"Helvetica Neue",
						"Helvetica",
						"Hiragino Sans",
						"Hiragino Kaku Gothic ProN",
						"Arial",
						"Yu Gothic",
						"Meiryo",
						"sans-serif";

	font-size:			16px;
	line-height:		20px;
	margin:				0 auto;
	width:				800px;
	color:				#ffd;
	background-color:	#433;
}

/* ============================================================================
	スペーサー
============================================================================ */
.blank {
	width:					auto;
	height:					16px;
}

/* ============================================================================
	背景
============================================================================ */
/* div.bg {
	background-color:		#fff;
} */

/* ============================================================================
	コンテンツ全体
============================================================================ */
#contents {
	text-align: center;
}

/* ============================================================================
	タイトル
============================================================================ */
#title {
	font-size:		40px;
	font-weight:	bold;
	margin:			40px auto 32px auto;
}

/* ============================================================================
	日付＋時刻
============================================================================ */
#datetime {
	font-size:		20px;
	font-weight:	bold;
	margin:			0px auto 16px auto;
}

/* ============================================================================
	FlexBox
============================================================================ */
/* 見出し＋ボタン */
.with-button {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;	/* 下揃え */
}

.with-button div {
	width:			50%;
}

.cap-left {
	text-align:		left;
	font-weight:	bold;
}

.btn-right {
	text-align:		right;
}

/* 分割なし */
.fb-1 {
	display: flex;
	flex-wrap: wrap;
	overflow-wrap: break-word;
	margin:			0px auto 16px auto;
}

.fb-1 div {
	padding:10px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #433;
	color: #433;
	background: #ffd;
}

/* 4分割 */
.fb-4 {
	display: flex;
	flex-wrap: wrap;
	margin:			0px auto 16px auto;
}

.fb-4 div {
	padding:10px;
	width: 25%;
	box-sizing: border-box;
	border: 1px solid #433;
	color: #433;
	background: #ffd;
}

/* ============================================================================
	文字入力（ハッシュ変換）
============================================================================ */
#InputHashText {
	width:			800px;
	margin:			0px auto 16px auto;
}

/* ============================================================================
	見出し
============================================================================ */
.cap {
	font-size:			20px;
	line-height:		24px;
	text-align:			left;
	font-weight:		bold;
	color:				#ffd;
	border-left:		8px solid #ffd ;
	border-bottom:		2px solid #ffd ;
	margin:				0px auto 16px auto;
	padding:			4px 8px;
}