body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: lightblue; /* 背景色をlightblueに変更 */
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:18px;
	overflow-wrap: anywhere;
}

/* エリア別 */
div#main {
	background-color: #fff;
	padding: 30px 50px 80px 50px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	max-width: 1000px;
	width: 80%;
	margin: 10px 0px;
}


/** メインコンテンツエリア **/
/* table */
.content {
	width:90%;
	margin:10px 5%;"
	background:#ffffdb;
}

/* table */
.rescome {
	width:80%;
	margin:-30px 10%; 0px 10%"
	background:#ffffdb;
}
/* テーブル左部 */
.res_left{
	width:20%;
	text-align:center;
}


/* コメント欄用 */
.comm {
	padding-left:5%;
	padding-right:5%;
}

/* table見出し部 */
.main_date_col{
	width:30%;
}

/* テーブル左部 */
.date_col{
	width:30%;
	text-align:center;
}

/* 管理部用 */
.mng {
	width:50px;
	text-align:center;
}
/* 管理部用 */
.manage_col{
	width:50px;
	text-align:center;
}

.datetime{
	font-size:14px;
	color:#aaa;
}

/*** レス欄用 ***/
/*親要素*/
.row-wrap {
	width: 80%;
	margin: -15px auto;
}
/*子要素*/
.row {
	display: flex;
	align-items: center; /* 高さ揃え */
	margin-bottom:5px;
}
/*左側*/
.sub_col {
	padding: 4px 8px;
	white-space: nowrap;   /* 文字折り返し防止 */
}
/*右側*/
.main_col {
	flex: 1;               /* 残りの最大幅 */
	padding-left: 8px;
	
}

/* フレックスボックス */
.container{
	width: 90%;
	margin:0 5%;
	display: flex;
	flex-direction: row;
}
.box{
	padding:10px;
}


.t_r{
	text-align:right;
}
.t_c{
	text-align:center;
}
.t_l{
	text-align:left;
}

.bgc1{ background:#aaa; }
.bgc2{ background:#ccc; }




/* メニュー関連 */

div#menu {
	width:100%;
	text-align:center;
	margin:15px 0px 15px 0px;
}

div#btm_menu {
	width:100%;
	text-align:center;
	margin:20px 0px;
}


.top-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	width:50%;
	margin:0 -2% 0 0;
	background: #ccc;
}

.top-menu li {
	width: 20%; /* 5件で1行（100 ÷ 5） */
	box-sizing: border-box;
	text-align: center;
	background: #f5f5f5;
	margin: 18px;
		padding:5px;
}

.list-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	width:90%;
	margin:0 -2% 0 0;
}

.list-menu li {
	width: 17%; /* 5件で1行（100 ÷ 5） */
	box-sizing: border-box;
	text-align: center;
	background: #f5f5f5;
	margin: 8px;
	padding:5px;
}



/* サブタイトル */
.sub-titleouter{ 
	display: flex;
	width:100%;
	margin:60px 0 -25px 0;
	justify-content: center;
}
.sub-title{
	color:#fff;
	padding:5px 15px 5px 15px;
	display: inline-block;
	min-width: 100px;
	text-align:center;
}
.rad{ border-radius: 10px; }




/*** アラート ***/

.flash {
	text-align:center;
	vertical-align:bottom;
	height:50px;
	color:#ff6666;
	font-size:24px;
	animation: flash 2s linear infinite;
	/*background: #0091EA;*/
}

@keyframes flash {
	0%,
	100% { opacity: 1; }
	60% { opacity: 1; }
	20% {	opacity: 0;	}
}






/* フォーム関連 */
.form-outer {
	display: flex;
	width: 100%;
	margin:0 0 3px 0;
	justify-content: center;
}
.form-inner {
	width:520px;
	margin:0;
	text-align: center;
}


/* フォーム */
form{
	width: 100%;
	margin: 0px;
	text-align: left;
}

input {
	width: 500px;
	padding: 10px;
	margin-bottom: 15px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

select {
	width: 200px;
	padding: 10px;
	margin-bottom: 15px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

textarea {
	width: 500px;
	resize: vertical;
}

button {
	background-color: #4caf50;
	color: #fff;
	padding: 12px 20px;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	width: 150px;
	display: inline-block;
}

button:hover {
	background-color: #45a049;
}
/* 入力例用 */
input::placeholder {
	color: #bbb;
}

/** リンクボタン **/
a.btn1 {
	background-color: #7ac27d;
	padding: 0px 10px;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	margin:5px 0 2px 0;
	color: #fff;
}
a:hover.btn1 {
	background-color: #cceece;
	color: #2f8633;
}
a:visited.btn1 {
	background-color: #7ac27d;
	color: #fff;
}



/*** html標準 ***/
img {
	max-width: 50%;
	height: auto;
}

a { color: #444499; }
a:visited { color: #444499; }
a:hover { color: #fff; background-color:#005ab3; }

a.inner2 { color: #448dd2; }
a:visited.inner2 { color: #448dd2; }
a:hover.inner2 { color: #fff; background-color:#448dd2; }


.error1{
	background-color: #fff7ce;
	margin:5px 0px;
	padding:2px 10px;
	display: inline-block;
}


/** 報告分類背景 **/
.rtype1{
	margin:5px 0px;
	padding:2px 10px;
	display: inline-block;
}






h1 {
	text-align: center;
	color: #cc0000;
}

h2 {
	text-align: center;
	color: #555;
}

h3 {
	margin:-17px;
	text-align: center;
	color: #cc6666;
}

label {
	display: block;
	margin: 15px 0 5px;
	font-weight: bold;
	color: #555;
}



/* テーブル */
table{
	width:100%;
	border-collapse:collapse;
	margin:0 auto;
}
th{
	color:#005ab3;
}
td{
	border-bottom:1px dashed #999;
}
td#max{
	width:100%;
}
th,tr:last-child td{
	border-bottom:2px solid #bbb;
}
td,th{
	padding:10px;
}







/* ＤＩＶ関連 */
.outer {
	display: flex;
	width: 80%;
}
.sub {
	display: block;
	width: 50%;
}
.inner {
	display: block;
	width: 100%;
}


/* アイコン付きメニュースタイル */
.outer2 {
	display: flex;
	width: 100%;
	margin:0 0 3px 0;
	justify-content: center;
}
.inner2 {
	width: 120px;
	font-size:15px;
	/*border:2px solid #005ab3;*/
}
.spacer {
	display: block;
	height: 0px;
	margin:-8px; /* アイコン文字間ピッチ調整 */
}



/* 索引用 */
.phindex-menu {
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	gap: 8px;
	margin:20px 0 0px 0;
}

.phindex-item {
	display: block;
	text-align: center;
	padding: 3px 0;
	background: #f5f5f5;
	text-decoration: none;
	color: #333;
}





/* 日時アラート */
.alert0{
	color:#fff;
}

.alert1{
	color:#333;
}

.alert2{
	color:#ff5b00;
}

.alert3{
	color:red;
}


/* フラグ文字色 */
.flgColor{
	color:#333;
}

.flgColor0{
	color:#0000aa;
}

.flgColor1{
	color:#aa0000;
}

/* 背景色 */
.bgcolor1{ background:#20b2aa; } /* ターコイズ */
.bgcolor2{ background:#6495ed; } /* 低青 */
.bgcolor3{ background:#eee; } /* 灰色 */
.bgcolor4{ background:#ededed; } /* 薄灰色 */
.bgcolor5{ background:#fafcd6; } /* 薄黄色 */
.bgcolor6{ background:#ffdcdc; } /* 薄赤色 */



/******* スマホ用 *******/
@media screen and (max-width: 767px) {
		body { 
			width:100%;
			font-size: 16px;
		}

		h3 {
			margin-bottom:2px;
			font-size:18px;
		}
		

		 .btmlink{ font-size: 12px; }

		div#main {
			width: 94%;
			margin: 10px 3% 10px 3%;
			padding: 10px 5px 30px 5px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		
		#content {
			width:98%;
			margin:0 1%;
		}

		table.main {
		  width:94%;
		  margin: 0% 3%;
		  padding:0px;
		}

		table {
		  width:88%;
		  margin: 0% 6%;
		  padding:0px;
		}

		td,th{
		  margin: 0px;
		  padding:12px 0px;
		  font-size: 16px;
		}

		td.max{
		  width:100%;
		}

		.sp-hide {
		  display: none;
		}


		/* フォーム関連 */
		.form-outer {
		  display: flex;
		  width: 100%;
		  margin:0 0 3px 0;
		  justify-content: center;
		}
		.form-inner {
			width:90%;
			margin:0;
		  text-align: center;
		}


		/* フォーム */
		form{
			width: 100%;
			margin: 0px;
			text-align: left;
		}

		input, select {
			width: 100%;
			padding: 10px;
			margin-bottom: 15px;
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 16px;
		}

		textarea {
			width: 100%;
			resize: vertical;
			font-size: 16px;
		}

		button {
			background-color: #4caf50;
			color: #fff;
			margin-bottom:20px;
			padding: 3px 3px;
			border: none;
			border-radius: 15px;
			cursor: pointer;
			display: inline-block;
			font-size: 16px;
		}

		button:hover {
			background-color: #45a049;
		}

		div#menu {
		  font-size: 14px;
			margin:10px 0px;
		}

		div#btm_menu {
		  font-size: 12px;
		}

		.main_date_col{
		}
		.date_col{
			width:80%;
		}

		.outer {
		  display: block;
		  width: 100%;
		}
		.sub {
		  display: block;
		}
		.inner {
		  display: block;
		}

		.phindex-menu {
		    width:90%;
		    margin:5%;
		    display: grid;
		    grid-template-columns: repeat(8, 1fr);
		    gap: 4px;
		}

		.phindex-item {
		    display: block;
		    text-align: center;
		    padding: 3px 0;
		    background: #f5f5f5;
		    text-decoration: none;
		    color: #333;
		}



		.list-menu {
		    display: flex;
		    flex-wrap: wrap;
		    list-style: none;
		    width:90%;
		    margin-left:-3%;
		    font-size:14px;
		}

		.list-menu li {
		    width: 22%; /* 5件で1行（100 ÷ 5） */
		    box-sizing: border-box;
		    text-align: center;
		    background: #f5f5f5;
		    margin: 3px;
			padding:3px;
		}
		
		
		
		top_icon {
		  max-width: 50px;
		  height: auto;
		}

		/* アイコン付きメニュースタイル */
		.outer2 {
		  margin:0 0 3px 0;
		}
		.inner2 {
		  width: 100px;
		  height: 70px;
		  font-size:14px;
		  /*border:2px solid #005ab3;*/
		}
		.spacer {
		  display: block;
		  height: 0px;
		  margin:-8px; /* アイコン文字間ピッチ調整 */
		}

		a.btn1 {
			background-color: #7ac27d;
			color: #fff;
			padding: 0px 10px;
			border: none;
			border-radius: 12px;
			cursor: pointer;
			display: inline-block;
			text-decoration: none;
		}
		a:hover.btn1 {
			background-color: #cceece;
			color: #2f8633;
		}


		.flash {
			text-align:center;
			vertical-align:bottom;
			height:50px;
			color:#ff6666;
			font-size:16px;
			animation: flash 2s linear infinite;
			/*background: #0091EA;*/
		}


		/*** レス欄用 ***/
		/*親要素*/
		.row-wrap {
			width: 95%;
			margin: 0 auto;
		}
		/*子要素*/
		.row {
			display: flex;
			align-items: center; /* 高さ揃え */
			margin-bottom:5px;
		}
		/*左側*/
		.sub_col {
			padding: 4px 8px;
			white-space: nowrap;   /* 文字折り返し防止 */
		}
		/*右側*/
		.main_col {
			flex: 1;               /* 残りの最大幅 */
			padding-left: 8px;
			
		}


		/* フレックスボックス */
		.container{
			width: 94%;
			margin:-15 3% 0 3%;
			display: flex;
			flex-direction: column;
		}
		.box{
			text-align:center;
		}
}