@charset "utf-8";
/* CSS Document */

body	{ margin: 0px; font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; font-size:16px;
		  background-color: #f6efdb;
		  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25,#fff),color-stop(.25,transparent),to(transparent)),
							-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25,#fff),color-stop(.25,transparent),to(transparent)),
							-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75,transparent),color-stop(.75,#fff)),
							-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75,transparent),color-stop(.75,#fff));
							-webkit-background-size: 10px 10px;		
 }
/* グリッド */
.wrap		{ display:grid; grid-template-columns:600px; grid-template-rows:160px auto 80px; grid-row-gap:5px;  width:800px; justify-content:center; align-content:center;  }
/* header */
.header		{ grid-column:1; grid-row:1;
			/* Headerのグリッド */
			display:grid; grid-template-columns:repeat(5,auto); grid-column-gap:1px; grid-template-rows:80px 30px 30px; grid-row-gap:1px; margin:0px; }
			.titleBox		{ grid-column:1; grid-row:1; align-self:end; }
			.title			{ margin:0px 0px -2px 0px; background-color:#000; color:#fff; font-family:Varela,sans-self; font-size:0.75em; font-weight:500; line-height:1; text-shadow:10px 50px 100px rgba(0,0,0,0.5); }
			.title1			{ padding:5px 0px 1px 15px;}
			.title2			{ padding:5px 15px 1px 15px; text-align:right;}	
			.bread			{ grid-column:1/-1; grid-row:2; padding-right:50px; justify-self:end; align-self:center; font-size:0.8em; line-height:2; padding:25px 0px 5px 0px; }
			.bread li:not(:last-child)::after	{ margin:0px:5px; content:'>>'; color:#f00; }
			.dateMessage	{ grid-column:1/-1; grid-row:3; align-self:center; }
			.dateMSG		{ background-color:#000; color:#fff; font-size:0.875em; font-family:'Source Sans Pro',sans-serif; font-weight:700; padding:0px 0px 0px 5px; }
			
			.header ul		{ margin:0px; padding:0px; list-style:none; display:grid; grid-auto-flow:column; justify-content:start; }
			.header a		{ color:#000; text-decoration:none; }
			.header::before	{ grid-column:1/-1; grid-row:2; content:" "; border-top:solid 2px #000; height:1px; border-bottom:solid 1px #000; margin:0px 0px 8px 0px; }
/* input Area */
.inputArea	{ grid-column:1; grid-row:2;
			/* input Areaのグリッド */
				 }
.loginMessage { list-style:none; }
.fontSize4timeout	{ font-size:0.9em; }
/* footer */
.footer			{ grid-column:1/-1; grid-row:3; justify-self:center; align-self:center; }

/* #### 画面の横幅1260px以下 #### */
@media (min-width:1260px) {
.wrap		{ width:800px; box-sizing:border-box; margin:auto; }	
}
/* #### 画面の横幅769px以下 #### */
@media (max-width:760px) {
/* グリッド */
.wrap		{display:grid; grid-template-columns:1fr; grid-template-rows:1fr auto auto auto auto; grid-row-gap:1px; width:600px; justify-content:center; align-content:center;  }


.wrap { grid-template-columns:none; grid-template-rows:none; grid-row-gap:1px; padding:00px; font-size:0.875em; }
.wrap > *,
.wrap::after{ grid-column:auto; grid-row:auto;  }
/* header */
.title		{ grid-column:1/-1; grid-row:1; font-family:'Mplus lp',sans-self; font-size:1em; font-weight:900; line-height:1.2; }
.bread		{ grid-column:1/-1; grid-row:2; padding-right:50px; font-size:1.125em; line-height:2; }


}
/*  */