@charset "UTF-8";

*{
	padding: 0;
	margin: 0;
	/*border : 0;*/		/* ONにするとフォームの枠も消えてしまう */
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-align:left;
	line-height: 1.0 ;					/* フォントサイズの倍数になるように単位は付けない */
	-moz-box-sizing: border-box;		/* 要素の幅に余白と枠線も含める */
	-webkit-box-sizing: border-box;		/* 要素の幅に余白と枠線も含める */
	box-sizing: border-box;				/* 要素の幅に余白と枠線も含める */
}



/*--------------------------------------- レイアウトの設定 ---------------------------------------*/


html{
	height: 100%;				/* フッターをページ最下部まで下ろす用（htmlの高さを親要素である開いているWindowの高さと同じにする） */
	scroll-padding-top: 300px;	/* ページ内リンクした際、固定ヘッダー部の高さ分ずれるので修正する。 */
	font-size:87%;
}

body{
	max-width: 900px;
	display: flex;				/* フッターをページ最下部まで下ろす用。親にはdisplay: flexを指定 */
	flex-direction: column;		/* フッターをページ最下部まで下ろす用。flexbox を並べる方向を縦にする */
	min-height: 100vh;			/* フッターをページ最下部まで下ろす用。Viewport Height 画面高さにの高さに対する1/100の単位 */
	height: 100vh;				/* フッターをページ最下部まで下ろす用（IEでだけ必要。（bodyの高さを親要素であるhtmlの高さと同じにする）*/
	/*font-family: 'メイリオ',"meiryo",'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;*/
	text-align: center;
	margin:0 auto 0 auto;
}

#top {
	width: 900px;
	text-align:left;
	position: relative;		/* 子要素であるフッターをこの#topを基準に配置するための設定 */
	min-height: calc(100% - 30px);	/* フッターをページ最下部まで下ろす用（#topの高さを親要素であるbodyの高さと同じにする。padding-bottomの分を引く。）*/
	padding-bottom: 30px;		/* フッターがmainに食い込んでくるのでその分mainをfooterと離しておく*/
}

footer {
	max-width:1500px;
	width:100%;
	padding:0.3em 0;
	background-color:#F6F6F6;
	color: #666666;
	border-top: 1px solid #CCCCCC ;
	border-bottom: 1px solid #CCCCCC ;
	margin:0 auto ;
	font-size:0.8em;				/* サイズによってはフッターの下に1pxの隙間ができたことがある。*/
	margin-top: auto;				/* フッターをページ最下部まで下ろす用 */
}

footer p {
	padding: 0;
	margin: 0;
	text-align:center;
}

.content-box {
	text-align:left;
	margin-bottom:2em;
	padding-left: 0.5em;
}

.section {
	display:block;
	margin-bottom:3rem;
}


.flex{ display:flex; align-items:center;}	/* 縦方向は中心に */
.grow{ flex-grow:1; }						/* デフォルトは伸びないので、伸ばしたいアイテムのみにこれを適用 */


.mt0{ margin-top:0em !important;}
.mt05{ margin-top:0.5em !important;}
.mt1{ margin-top:1em !important;}
.mt2{ margin-top:2em !important;}
.mt3{ margin-top:3em !important;}
.mt4{ margin-top:4em !important;}
.mt5{ margin-top:5em !important;}

.mb0{ margin-bottom:0em !important;}
.mb05{ margin-bottom:0.5em !important;}
.mb1{ margin-bottom:1em !important;}
.mb2{ margin-bottom:2em !important;}
.mb3{ margin-bottom:3em !important;}
.mb4{ margin-bottom:4em !important;}
.mb5{ margin-bottom:5em !important;}

.ml0{ margin-left:0em !important;}
.ml05{ margin-left:0.5em !important;}
.ml1{ margin-left:1em !important;}
.ml15{ margin-left:1.5em !important;}
.ml2{ margin-left:2em !important;}
.ml3{ margin-left:3em !important;}

.mr0{ margin-right:0em !important;}
.mr05{ margin-right:0.5em !important;}
.mr1{ margin-right:1em !important;}
.mr15{ margin-right:1.5em !important;}
.mr2{ margin-right:2em !important;}
.mr3{ margin-right:3em !important;}


/*-------------------------------------------- h 設定 --------------------------------------------*/

header h1{
	position:relative;
	display:block;
	height: 80px;			/* header要素はFirefoxではブロック要素として認識していない。*/
	background:url(images/head.jpg) no-repeat top left;
}

h1 span {
	position:absolute;
	left:-9999px;
}

h2{
	width:100%;
	/* */ padding :0.6em;
	/* */ margin: 0px 0 0.5em 0px;
	/* background-color:#3366cc; */
	/* */ border-top: 1px solid #CCCCCC;
	border-bottom: 1px dashed #CCCCCC;
	font-size:1.1em;
	font-weight:bold;
	color: #009900 ;
}


h3{
	margin:0 0 1em 0;
	font-size:1em;
	font-weight:bold;
	padding:0 0.5em;
	border-bottom: 1px solid #3366cc ;
	color:#3366cc;
}




/*------------------------------------------ 共通設定 --------------------------------------------*/


p{
	line-height:1.5;			/* フォントサイズの倍数になるように単位は付けない */
	margin-bottom:1.5em;
}

.strong { font-weight: bold;}
.underline { text-decoration:underline; }
.red { color:#FF0000;}
.blue { color:#0000FF;}
.white { color:#FFFFFF;}
.green { color:#009933;}

img, a img {
	vertical-align:-1px ;	/*初期値はbaseline*/
	border:none;
}


.indent{ text-indent: 1em; }
.jisage { padding-left: 1em; text-indent: -1em; }

.tcenter { text-align:center; }
.tright { text-align:right; }

.fleft { float:left; }
.fright { float:right; clear:both; }

.fcenter{			/* ブロック要素をセンターリングする。*/
	margin:0 auto 0 auto;	/* このスタイルが適用されるブロック要素自体にはwidth:を指定すること！ */
}

.clr { clear: both; visibility: hidden; font-size: 0; }


.hissu::before{								/* 必須マーク */
    content: "※";
    font-size: 90%;
    margin-right:0.1em;
    color: #FF0000;
    vertical-align:baseline;
}



/* リンク設定 */

a:link {
	text-decoration: underline;
	color:	#0000FF;
}

a:visited {
	text-decoration: underline;
	color: #0000FF;
}

a:hover {
	text-decoration: underline;
	color: #FF6419;
}

a:active {
	text-decoration: underline;
}

a {
	overflow:hidden;
}


/* フォントサイズ設定 */

.fs1px{ font-size:1px;}
.fs2px{ font-size:2px;}
.fs3px{ font-size:3px;}
.fs4px{ font-size:4px;}
.fs5px{ font-size:5px;}
.fs6px{ font-size:6px;}
.fs7px{ font-size:7px;}
.fs8px{ font-size:8px;}
.fs9px{ font-size:9px;}
.fs10px{ font-size:10px;}
.fs11px{ font-size:11px;}
.fs12px{ font-size:12px;}
.fs13px{ font-size:13px;}
.fs14px{ font-size:14px;}





/*----------------------------------------- テーブル設定 -----------------------------------------*/

.w1200px{ width:1200px;}
.w650px{ width:650px;}
.w550px{ width:550px;}
.w400px{ width:400px;}
.w350px{ width:350px;}
.w300px{ width:300px;}
.w250px{ width:250px;}
.w200px{ width:200px;}
.w180px{ width:180px;}
.w150px{ width:150px;}
.w130px{ width:130px;}
.w120px{ width:120px;}
.w100px{ width:100px;}
.w95px{ width:95px;}
.w90px{ width:90px;}
.w80px{ width:80px;}
.w75px{ width:75px;}
.w70px{ width:70px;}
.w60px{ width:60px;}
.w50px{ width:50px;}
.w45px{ width:45px;}
.w40px{ width:40px;}
.w30px{ width:30px;}
.w25px{ width:25px;}
.w20px{ width:20px;}
.w15px{ width:15px;}

.break{overflow-wrap:break-word; }	/* word-break:break-all は単語の途中でも折り返す */



table {
	border-collapse:collapse;	/* 隣接するセルのボーダーを重ねて表示する */
	border-spacing: 0;		/* border-collapse:separate;のときのみ有効 */
	table-layout: fixed;		/* セルの幅指定が効くようにする。 */
	clear:both;			/* floatを解除してからtableを作成する。 */
	/* font-size:100%; */				/* body のfont-size がtable には効かないので改めて指定。body に合わせる */
}

table th {
	empty-cells:show;		/* 空白セルもボーダーを表示する。 */
}

table td {
	empty-cells:show;		/* 空白セルもボーダーを表示する。 */
}

table caption{
	font-weight:bold;
	text-align:left;
	padding:0 0 0.5em 1em;
	color:#484848;
}


/* 基本テーブル設定 */

main table.stdtable {
	border:#CCCCCC 1px solid;
}

main table.stdtable th{
	border:#CCCCCC 1px solid;
	background:#44aa44;
	color:#FFFFFF;
	text-align:center;
	font-weight: bold;
	vertical-align: middle ;
	padding:5px 10px ;
	white-space: nowrap;
}


main table.stdtable td{
	border: 1px #CCCCCC solid;
	vertical-align: middle ;
	padding:5px 10px;
}




/*------------------------------------------ リスト設定 ------------------------------------------*/

main ul {
	list-style-position: outside;		/* insideにするとマーカーの下にコンテンツがも回り込む */
	padding:0 0 0 1.5em;	/* 文章の左端がulの左端になる。するとリストマークはそれより左に出てしまうので。*/
	list-style-type: none;
}

main ul li {
	line-height: 1.5 ;					/* フォントサイズの倍数になるように単位は付けない */
}


main ol {
	list-style-position: outside;		/* insideにするとマーカーの下にコンテンツがも回り込む */
	padding:0 0 0 2em;	/*liの左端がolの左端にくる。するとリストマークはそれより左に出てしまうので。*/
}

main ol li {
	line-height: 1.5 ;					/* フォントサイズの倍数になるように単位は付けない */
	margin-bottom: 1.5em;
}


main ul.atto li {
	background: url(images/atto.jpg) no-repeat 0 3px ;
	padding:0 0 0 20px;
}


main ul.disc li {
	list-style-type: disc ;
}

main ul.square li {
	list-style-type: square ;
}




/*---------------------------------------- 定義リスト設定 ----------------------------------------*/

dl{
	margin:0 ;	/* overflow:auto;にしてスクロール状態になった時、FFでは上下ボタンの部分がmarginとして空いてしまう。*/
}


dl#xxxxxxx dt{
	padding:0 0 0 20px;
	margin:15px 0 0 10px ;
	font-size:84%;
	font-weight:bold;
	line-height: 1.3em;
	background:url(img/right.gif) no-repeat;
	/*background-color:#EEFFEE;*/
}

dl#xxxxxxx dd {
	display: list-item;
	padding:0;
	font-size:84%;
	line-height:1.3em;
	list-style-type:disc;
	margin:0 0 0 50px;
	/*background: url("img/a.gif") top left no-repeat;*/
}




/* 横並び dt dd */

 dl#xxxxxxxxxxx dt{
	/*background:url(../images/common/list-circle.jpg) no-repeat 7px 0.2em;*/
	float:left;
}

 dl#xxxxxxxxxxx dd {
	margin:0 0 0 80px;
}




/*------------------------------------------- form 設定 ------------------------------------------*/

form input[type="submit"], form input[type="button"], form input[type="reset"], form input[type="file"] {
	padding: 0.2em 1em;
	text-align:center;
	vertical-align:middle;
	margin:0.3em 0.3em;
	font-size:1em;
	cursor:pointer;
}

form input[type="text"],input[type="number"],form input[type="email"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="password"], textarea, select, option{
	padding: 0.1em;
	line-height: 1.0 ;					/* フォントサイズの倍数になるように単位は付けない */
	font-size:1em;			/* FFでテキストが大きくなってしまうので */
	font-family: "meiryo", 'ヒラギノ角ゴ ProN W3',Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;		/* Edgeでテキストが小さくなってしまうので */
	resize: none;
	border: 1px solid #a9a9a9 ;
}

form input[type="file"]{
	padding:0;			/* IEでの両脇の影消し */
}

button{
	padding:0.2em 1em;
	line-height: 1.0 ;					/* フォントサイズの倍数になるように単位は付けない */
	/*height: 22px;*/					/* input[type="text"]の高さより少し低くなるので調整 */
	margin:0.3em 0.3em;
	text-align:center;
	vertical-align:middle;
	font-size:1em;
	cursor: pointer;
}

form input[type="radio"],
form input[type="checkbox"]{
	/*height: 12px;*/					/*ラジオボタンの余計な上下をカット*/
	/*vertical-align:middle;*/			/*ラジオボタンとその後ろのテキストの縦方向を揃える*/
	margin:2px 0.5em 2px 0;				/*ラジオボタンの周りを少し空ける*/
}

form ::placeholder {					/* input, textarea のプレースホルダー */
  color: #999999;
}



/*------------------------------------------ パン屑設定 ------------------------------------------*/

#pankuzu {
	padding:2px 0 0 15px;
	/*border-top: 1px solid #CCCCCC;*/
	color:#0000A0;
	margin:0 0 20px 0;
}

#pankuzu a:link,
#pankuzu a:visited{
	color:#0000A0;
	text-decoration:none;
}

#pankuzu a:hover,
#pankuzu a:active{
	color:#FF6419;
	text-decoration:none;
}

#pankuzu .guide {
padding-left:5px;
padding-right:5px;
}





/*--------------------------------------- トップへ戻る 設定 ---------------------------------------*/

.totop {
	background: url("img/pagetop.gif") top right no-repeat;
	height:16px;
	margin: 0 0 10px 0;
	border-bottom: 1px dashed #DDDDDD ;
	text-align:right;
}

.totop a{
	display:block;
	width:70px;
	height:15px;
}

.totop span{
	position:absolute;
	text-indent:-9999px;
}









/**************************************************************************************************/
/****************************************** 個別部品設定 ******************************************/
/**************************************************************************************************/


/*---------------------------------------- ログインページ ----------------------------------------*/


/* login フォーム設定 */


main #loginform table {					/* 認証table */
	border:#339933 1px solid;
	margin: 3em auto;
}

main #loginform table caption{
	border:none;
	background:#339933;
	color:#FFFFFF;
	font-weight: bold;
	text-align:center;
	vertical-align: middle ;
	padding:0.8em 0;
}

main #loginform table tbody{
	display:block;
	padding:2em;
}

main #loginform table th{
	border:none;
	vertical-align: middle ;
	padding:1em 1em;
}

main #loginform table td{
	border:none;
	vertical-align: middle ;
	padding:1em 1em;
}




/*-------------------------------------- ログオフボタンの行 --------------------------------------*/

#mainhead{
	display:flex;						/* 説明文とログオフボタンをflexする */
	justify-content:space-between;		/* 左右方向は両端揃え */
	align-items:center;					/* 上下方向は中央揃え */
	margin-bottom:2em;
}
#mainhead p{
	margin:0;
}
#mainhead button{
	cursor: pointer
}

.user #mainhead{				/* ユーザー画面はフロー図がないので少し隙間を多めにとる */
	margin-bottom:2em;
}



/*---------------------------------------- メニューページ ----------------------------------------*/



main #menulist ul li {
	background: url(images/atto.jpg) no-repeat ;
	margin-bottom:20px ;
	padding:0 0 0 20px;
	vertical-align: middle;
	background-position : left center ;
}



/*--------------------------------------- 入力・編集ページ ---------------------------------------*/

main .inputtable {
	/*border:#CCCCCC 1px solid;*/
	margin:0 auto 0 auto;
	width:80%;
	/* white-space: pre-wrap; */		/* TABや改行がそのまま表示されてしまうのでpre-wrap にしてはいけない！ */
	word-wrap: break-word;				/* 単語の途中でも改行する */
}

main .inputtable tbody th{
	border:#CCCCCC 1px solid;
	background:#ecfcec;
	font-weight: bold;
	vertical-align: middle ;
	padding:0.6em 1em;
	/* white-space: nowrap; */			/* 改行させない */
}

main .inputtable tbody th:nth-child(1){
	width:32%;
}

main .inputtable tbody th .exp{
	font-size:0.8em;
	margin:0.3em 0 0 0;
}

main .inputtable tbody th.admin{
	background-color:#DDDDDD ;
}

main .stdtable tbody td,
main .inputtable tbody td{
	border: 1px #CCCCCC solid;
	vertical-align: middle ;
	padding:0.6em 1em;
}

main .inputtable tbody td p{					/* TDの中の<p> */
	margin-bottom: 0.5em;
}
main .inputtable tbody td p:last-child{			/* TDの中の最後の<p> */
	margin-bottom: 0;
}