@charset "UTF-8";

/* --- 全体の背景・テキスト --- */



#body {
#    margin: 0;
#    padding: 0;
#}
.css-fukidashi {
    padding: 0;
    margin: 0;
}
.text {
#    width: 80px;
#    position: relative;
#    margin:80px 50px 50px;
#    padding: 20px;
#    border: 1px solid #ccc;
}
.fukidashi {
    display: none;
#   width: 200px;
    position: absolute;
    top: 0;
    left: 250px;
    padding: 6px;
    border-radius: 3px;
    background: #33cc99;
    color: #fff;
    font-weight: bold;
    font-size: .5em;    
}
.fukidashi:after {
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    bottom: -19px;
#    margin-left: 10px;
    border: solid transparent;
    border-color: rgba(51, 204, 153, 0);
    border-top-color: #33cc99;
    border-width: 10px;
    pointer-events: none;
    content: " ";
    font-size: .5em;    
}
.text:hover + .fukidashi {
    display: block;
}

.sample1 {
	width:			100px;
	height:			100px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:		.5em;
#	text-align: 		center;
#	padding-top:		80px;
	color:			#fff;
}
.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
#	position:		relative;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}


.image_specific_tmp {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
  border: 1px solid red;
}


p.next_message {
    font-size: .5em;
    margin-right: 0em;
    border: solid 0px #CCC;
}
p.user_name {
    font-size: .5em;
    margin-right: 0em;
    border: solid 0px #CCC;
}
p.intro { line-height: .5em }
p.instruction { line-height: .5em }

.grand_message {
    position: relative;
    overflow: hidden;
    display: table;
    color: gold;
    background: navy;
    border: 2px solid white;
    padding: .3em;
    font-size: 1.1em;
    font-weight: bold;
    vertical-align:middle;
}

.gm_item {
    display: table-cell;
    text-align: center;
    image: center;
    vertical-align: middle;
    border: solid 2px navy;
}

.grand_message img {
#    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 10px;
    overflow: hidden;
    width: 30px;
#    height: 30px;
    border: solid 2px white;
#    margin: auto;
#    height: auto;    
    margin-left: 0px;
    margin-right: 5px;
    vertical-align: middle;
}


div.this_title {
    display: block;
    color: black;
    border: solid 0px #CCC;
    padding: .3em;
    font-size: 1em;
    font-weight: bold;
}

div.DEBUG {
    display: block;
    color: black;
    background: white;
    border: solid 10px #CCC;
    padding: .3em;
    font-size: 1em;
#    font-weight: bold;
}

div.update {
    #position: relative;
    display: table;
    color: black;
    background: white;
    border: solid 2px navy;
    padding: .3em;
    font-size: 1em;
}

div.footers {
    display: block;
    color: black;
    border: solid 0px #CCC;
    font-size: .5em;
}

div.OK_Button {
    display: block;
    color: black;
#    background: white;
    margin-right: 0.1em;
    border: solid 0px #CCC;
    padding: .3em;
    font-size: 1em;
#    font-weight: bold;
}

.login-box {
    background: #ffffff;
    border: 1px solid #000080;
    padding: 5px;
}

.btnOk {
    color: #ffffff;
    background: #000080;
    margin-right: 1em;
    border: 2px solid #000080;
    padding: .2em;
    border-radius: 20%;
    font-size: 1em;
    font-weight: bold;
}

.btnOk:hover {
    color: #000080;
    background: #ffffff;
    border: 2px solid #000080;
}


div.instruction {
#    position: relative;
#    overflow: hidden;
    display: table;
#    display: block;
    color: black;
    background: white;
    margin-right: 0.1em;
    border: solid 1px #CCC;
    padding: .3em;
    font-size: 1em;
#    font-weight: bold;
}

div.pid {
    display: block;
    color: black;
#    background: white;
#    margin-right: 0.1em;
    border: solid 0px #CCC;
    padding: .3em;
    font-size: .8em;
    font-weight: bold;
}

body.placementtest {
background-color: #ffffe0;
}

body.placementtestmanager {
background-color: #deeeee;
}


div.sakura {
    display: block;
    color: black;
    background: white;
    margin-right: 0.1em;
    border: solid 0px #CCC;
    padding: 0.0em;
    font-size: 1em;
    font-weight: bold;
}

div.inline190 p:first-letter {
  display: block;
  margin-right: 0.1em;
  border: solid 0px #CCC;
  padding: 0.0em;
  font-size: 2em;
  font-weight: bold;
  color: #999;
}

pre.program {
  white-space: pre-wrap;
  width: 100%;
  font-size: 14px;
  background: lightgrey;
}

.userName {
    color: blue;
}

.tableRight {
    text-align: right;
}