/* 全角スペース使用NG */
/* border: 1px solid #333; */					/* 動作確認用ボーダー */

/* 全体の余白をなくす */
*{
	margin: 0;						
	padding: 0;
}

/* 全体指定 */
body {
	width: 100%;						/* 画面横幅 */
	background-image: url(../image/backimage.jpg);		/* 背景画像指定 */
	background-attachment: fixed;				/* 背景画像位置固定 */
	background-repeat: no-repeat;				/* 背景画像表示方法 繰り返さない */
	background-position: center center;			/* 背景画像位置指定 */
	background-size: cover;					/* 背景画像表示方法 ウインドウサイズに合わせる */
	font-family:'游明朝'; 					/* 全体フォント指定 */
}
main {
  flex: 1;
}
/* 【フレックスボックス０】内容の表示欄調整 */
.box {
	width: 100%;						/* 画面横幅 */
	display: flex;						/* フレックスボックス有効 */
	min-height: 100vh;
	flex-direction: column;					/*フレックスボックスの並べる方向を指定 縦一列＝column */
	position:relative;					/* 要素配置指定 */
	background-image: repeating-linear-gradient(		/* 斜線フィルター */
		315deg, 					/* 角度 */
		#ffffff8a, 					/* 色 */
		#ffffff8a 0.5px,				
		transparent 0.5px,
		transparent 15px); 				/* 間隔 */
}
/* 【フレックスボックス１】TOP一番上 */
.box_1_top {
	width: 100%;						/* 画面横幅 */
	height: 770px;						/* 表示部分の縦幅 */
	position: relative;					/* 要素配置指定 */
	top: 70px;						/* 上部からの位置 */
	background-color: rgba(0,0,0,0.4);			/* 背景色と透過度 */
	text-align:center;					/* 文字配置 */
}
/* 環境に優しい検査技術で～ */
.box_font1{
	font-size:30pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	text-overflow: ellipsis;				/* 画面に入りきらない部分を隠す */
	overflow: hidden;					/* 画面に入りきらない部分を隠す */
	white-space: nowrap;					/* 改行させない */
}
/* 検査対象物を壊すことなく～ */
.box_font2{
	font-size:16pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	text-overflow: ellipsis;				/* 画面に入りきらない部分を隠す */
	overflow: hidden;					/* 画面に入りきらない部分を隠す */
	white-space: nowrap;					/* 改行させない */
	font-weight: bold;
}
/* 優検だけ大きい文字にする */
.big_font{
	font-size:60pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	white-space: nowrap;					/* 改行させない */
}


/* 【フレックスボックス２】内容表示部 共通設定 */
.box_2 {
	width: 80%;						/* 画面横幅 */
	background-color: rgb(96 139 168 / 0.95);		/* 背景色と透過度 */
	padding: 20px;						/* 余白(内側) */
	margin:	10px;						/* 余白(周り) */
	position: relative;					/* 要素配置指定 */
	top: 100px;						/* 画面上部からの位置 */
	left:100px;						/* 画面左からの位置 */
	display: flex;						/*フレックスボックス設置 孫 */
	flex-direction: column;					/*フレックスボックス並び方 孫 */
}

/* 【フレックスボックス３】内容表示部 共通設定 */
.box_3{	
	flex-direction: row;					/*フレックスボックス並び方 */
	display: flex;						/*フレックスボックス設置 */
	width:100%;						/* 横幅 */
	align-self: center;					/* 要素を中央に寄せる */
}

/* タイトル部分 共通設定 */
.cont_title{		
	text-align: center;					/* 文字配置 */
	font-size:14pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
}

/* 【フレックスボックス４】新着情報 日付列 */
.box_4_new_info_date{						/* 新着情報 日付列 */
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(18,61,125,0.5);			/* 背景色 */
	text-align: center;					/* 文字配置 */
	width: 150px;						/* 横幅 */
	padding:20px;						/* 余白（内側） */
	margin:5px;						/* 余白（外側） */
}

/* 【フレックスボックス５】新着情報 内容列 */
.box_5_new_info_cont{						/* 新着情報 内容列 */
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(55,99,164,0.5);			/* 背景色 */
	text-align: left;					/* 文字配置 */
	width:100%;						/* 横幅 */
	padding:20px;						/* 余白（内側） */
	margin:5px;						/* 余白（外側） */
	text-overflow: ellipsis;				/* 画面に入りきらない部分を隠す */
	overflow: hidden;					/* 画面に入りきらない部分を隠す */
	white-space: nowrap;					/* 改行させない */
}

/* 【フレックスボックス４】事業紹介 写真 */
.box_4_buspic{
	width:33%;						/* 横幅 */
	padding:5px;						/* 余白（内側） */
	color:white;						/* 文字色 */
}

/* 事業紹介 写真 */
.buspic{
	width:100%;						/* 横幅 はみ出さないようにする */
	height:170px;						/* 画像高さ */
	object-fit: scale-down;					/* 画像自動縮尺 */
}

/* 【フレックスボックス４】事業紹介 内容 */
.box_4_busfon{
	width:33%;						/* 横幅 */
	font-size:10pt;						/* 文字サイズ */
	padding:10px;						/* 余白（内側） */
	margin:10px;						/* 余白（外側） */
	color:white;						/* 文字色 */
}

/* 【フレックスボックス４】代表挨拶 内容 */
.box_4_greet{
	width:50%;						/* 横幅 */
	font-size:11pt;						/* 文字サイズ */
	padding:10px;						/* 余白（内側） */
	margin:10px;						/* 余白（外側） */
	color:white;						/* 文字色 */
}

/* 代表挨拶 写真 */
.greetpic{
	width:100%;						/* 横幅 はみ出さないようにする */
	object-fit: scale-down;					/* 画像自動縮尺 */
}

/* 【フレックスボックス４】会社概要 内容 */
.box_4_outline{
	width:50%;						/* 横幅 */
	font-size:11pt;						/* 文字サイズ */
	padding:10px;						/* 余白（内側） */
	margin:10px;						/* 余白（外側） */
	color:white;						/* 文字色 */
	flex-direction: column;					/*フレックスボックス並び方 */
	display: flex;						/*フレックスボックス設置 */

}
/* 【フレックスボックス６】会社概要 項目名 */
.box_6_outline{
	width:100%;						/* 横幅 */
	font-size:11pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	font-weight: bold;					/* 文字を太字にする */
	border-bottom-style:solid;				/* 下線を引く */
	border-width:1px;					/* 下線の太さ */
}
/* 【フレックスボックス７】会社概要 詳細 */
.box_7_outline{
	width:100%;						/* 横幅 */
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	padding:5px;						/* 余白（内側） */
	margin:5px;						/* 余白（外側） */
}
/* 【フレックスボックス６】会社概要 写真 */
.box_6_outlinepic{
	width:100%;						/* 横幅 */
	text-align: center;					/* 横配置 */
	align-self:center;					/* 垂直配置 */
}
/* 会社概要 写真 */
.outlinepic{
	width:200px;						/* 画像横幅 */
	max-width:100%;						/* 横幅 はみ出さないようにする */
	height:150px;						/* 画像高さ */
	object-fit: scale-down;					/* 画像自動縮尺 */
}

/* 【フレックスボックス４】沿革 日付列 */
.box_4_enkaku{				
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(18,61,125,0.5);			/* 背景色 */
	text-align: center;					/* 文字配置 */
	width: 250px;						/* 横幅 */
	padding:20px;						/* 余白（内側） */
	margin:2px;						/* 余白（外側） */
}

/* 【フレックスボックス５】沿革 内容列 */
.box_5_enkaku{				
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(55,99,164,0.5);			/* 背景色 */
	text-align: center;					/* 文字配置 */
	width:100%;						/* 横幅 */
	padding:20px;						/* 余白（内側） */
	margin:2px;						/* 余白（外側） */
}
/* 【フレックスボックス４】資格免許保有者数 機械メーカー　名称 */
.box_4_menkyo{				
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(18,61,125,0.5);			/* 背景色 */
	text-align: center;					/* 文字配置 */
	width: 100%;						/* 横幅 */
	padding:20px;						/* 余白（内側） */
	margin:1px;						/* 余白（外側） */
}

/* 【フレックスボックス５】資格免許保有者数 人数 */
.box_5_menkyo{				
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(55,99,164,0.5);			/* 背景色 */
	text-align: center;					/* 文字配置 */
	width:200px;						/* 横幅 */
	padding:20px;						/* 余白（内側） */
	margin:1px;						/* 余白（外側） */
}
/* 協会名 */
.cont_kyokai{		
	text-align: left;					/* 文字配置 */
	font-size:12pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
}
/* 更新日付 */
.cont_update{		
	text-align: right;					/* 文字配置 */
	font-size:9pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
}
/* 【フレックスボックス５】機械 台数 */
.box_5_kikai{
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(55,99,164,0.5);			/* 背景色 */
	text-align: center;					/* 文字配置 */
	width:400px;						/* 横幅 */
	padding:20px;						/* 余白（内側） */
	margin:1px;						/* 余白（外側） */
}
/* 【フレックスボックス４】採用 */
.box_4_saiyo{	
	font-size:10pt;						/* 文字サイズ */
	width: 100%;						/* 横幅 */
	padding:20px;						/* 余白（内側） */
	margin:1px;						/* 余白（外側） */
	color:white;						/* 文字色 */
}

/* 【フレックスボックス４】アクセス 写真 */
.box_4_access{
	width:100%;						/* 横幅 */
	text-align: center;					/* 横配置 */
	align-self:center;					/* 垂直配置 */
}
/* アクセス 写真 */
.accesspic{
	width:200px;						/* 画像横幅 */
	max-width:100%;						/* 横幅 はみ出さないようにする */
	height:150px;						/* 画像高さ */
	object-fit: scale-down;					/* 画像自動縮尺 */
}
/* 【フレックスボックス５】アクセス 右側 */
.box_5_access{				
	flex-direction: row;					/*フレックスボックス並び方 */
	display: flex;						/*フレックスボックス設置 */
	width:100%;						/* 横幅 */
}
/* 【フレックスボックス６】アクセス 内容列 */
.box_6_access{				
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(18,61,125,0.5);			/* 背景色 */
	text-align: center;					/* 文字配置 */
	width: 150px;						/* 横幅 */
	padding:5px;						/* 余白（内側） */
	margin:1px;						/* 余白（外側） */
}
/* 【フレックスボックス７】アクセス 内容列 */
.box_7_access{				
	font-size:10pt;						/* 文字サイズ */
	color:white;						/* 文字色 */
	background-color: rgba(55,99,164,0.5);			/* 背景色 */
	text-align: center;					/* 文字配置 */
	width:300px;						/* 横幅 */
	padding:5px;						/* 余白（内側） */
	margin:1px;						/* 余白（外側） */
}
/* 【フレックスボックス8】マップ */
.box_8_access{	
	width:100%;						/* 横幅 */
	text-align: center;					/* 文字配置 */
	text-overflow: ellipsis;				/* 画面に入りきらない部分を隠す */
	overflow: hidden;					/* 画面に入りきらない部分を隠す */
}
/* 【フレックスボックス10】空白用 */
.box_10 {
	width: 100%;						/* 画面横幅 */
	height: 50px;						/* 表示部分の縦幅 */
	position: relative;					/* 要素配置指定 */
}