@charset "UTF-8";
/*--------------------------------
clearfix
---------------------------------*/

.cf:before,
.cf:after { content: ""; display: table;}


.cf:after { clear: both;}



.cf {zoom: 1;}





/*--------------------------------
header
---------------------------------*/
#header { padding:25px 10px; background:#3b3f4f; }
#header h1{ font-size:16px}
#header a{ font-weight:normal; text-decoration:none; }
.btn{ width:66px; height:66px; position: fixed; right:0; top:0}
#header nav ul{ padding:20px 0}
#header nav li{ display:inline-block;vertical-align: top;}
#header .left-content dl{ padding:20px;}
#header .left-content dt{ padding-bottom:10px; font-size:16px}
#header .left-content dd{line-height: 1.4; font-size:16px}
#header .left-content dd a{ display:block;padding:15px 10px;}
#header .left-content dd a:hover{ color:#fff}
#header a:hover{ text-decoration:none; opacity:.7 }

#header img { max-width: 100%;  height: auto;}



/*--------------------------------
#contents
---------------------------------*/
#contents{ padding:20px 10px}
#contents section{ padding:10px 0 100px}
#contents section h2{ color:#30b5e1; font-size:20px; line-height:1.6; padding-bottom:15px; }
#contents section h2 + p{ color:#999; font-size:16px}



/*--------------------------------
#main
---------------------------------*/

/* パンくず */
.crumb{ padding:0 0　7px; }
.crumb li{ display:inline; font-size:10px; font-size:12px;}
.crumb li a{ color:#999; }
.crumb li a:hover{ text-decoration:none; opacity:.8}
.crumb li:last-child{ font-weight:bold; color:#3b3f4f}
.loginArea dt{ padding-bottom:10px; font-size:18px; color:#fff}
.loginArea dd{ padding-bottom:30px}
.keep{ text-align:center; padding:0 0 20px;font-size:18px;}
.forget{ text-align:center; padding:0 0 30px; font-size:16px;}
.forget a{ color:#fff}
.forget a:hover{ opacity:.8; text-decoration:none}

.button01,.button02,.button04{ display:inline-block; padding:0 10px }
.button03{ display:inline-block; }

.button01 input{ background:#fff; color:#30b5e1; border:none;cursor:pointer; border:1px solid #3b3f4f}
.button02 input{ background:#30b5e1; color:#fff; border:none;cursor:pointer}
.button03 input{ background:#30b5e1; color:#fff; border:none;cursor:pointer; font-size:12px; padding:1 4px;}
.button04 input{ background:#ff0000; color:#fff; border:none;cursor:pointer}

.buttonAdd {
	width: auto;
	height: auto;
	padding: 5px;
	font-size: 13px;
}

.loginBody .select input[type="checkbox"] + label{ color:#fff}
.loginBody #contents section{ padding:20px 0 0}

/*--------------------------------
footer
---------------------------------*/

footer{ padding:20px 0; opacity:.3; text-align:center}

/*--------------------------------
汎用
---------------------------------*/
.center{ text-align:center; margin:0 auto}
.left{ text-align:left; }
.right{ text-align:right; }
.required{ color:#C00}
.select li{ display:inline-block; padding:0 40px 0 0}
.select li:last-child{ padding-bottom:0}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#page-top {position: fixed;bottom: 0px;right: 10px;}
#page-top img{ width:60px; height:auto}

.none{ display:none}

.ver01,.ver02{  width:100%; margin-bottom:5px; border-right:1px solid #3b3f4f;border-bottom:1px solid #3b3f4f}
.ver01 th,
.ver01 td,
.ver02 th,
.ver02 td{ padding:10px; border-left:1px solid #3b3f4f; border-top:1px solid #3b3f4f; font-weight:normal; font-size:16px; box-sizing:border-box}
.ver01 th,
.ver02 th{ background:#e5f9ff; color:#30b5e1; white-space: nowrap; }
.scroll-box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
   word-break:normal;
   margin-bottom:30px;
}

.bg_g{ background:#eee}
@media screen and (max-width: 480px) {

}
@media only screen and (min-width: 481px) {
.loginBody #contents{ width:480px; margin:0 auto}

}
@media only screen and (max-width: 767px) {
.table01 th,
.table01 td{
    width: 100%;
    display: block;
    }
  .scrollTableBody{
    display:block;
  }
  .scrollTableBody thead{
    display:block;
    float:left;
  }
  .scrollTableBody tbody{
    display: block; 
    width: auto; 
    overflow-x: auto; 
    white-space: nowrap;
  }
  .scrollTableBody tr{
    display:inline-block;
  }
  .scrollTableBody td,
  .scrollTableBody th{
    display:block;
  }
  
}
@media only screen and (min-width: 768px) {
#header .left-content dt,
#header .left-content dd { font-size:18px}
#contents{ padding: 40px; }
#contents section h2{  font-size:30px; padding-bottom:25px; text-align:center }
#contents section h2 + p{ font-size:20px; text-align:center}
#header nav ul {padding: 40px;}
.crumb li{ font-size:14px;}

}

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1200px) {

}

.selectArea {
	padding-left:0;
}
.selectArea li {
	padding:0;
	vertical-align:middle;
}
.selectArea input[type=submit] {
	padding:0.4em;
}
.selectArea input[type=text] {
	padding:0.5em;
}

/* datapicker */
input[type="text"].inputDate {
	max-width: 150px;
	min-width: 120px;
	text-align: center;
	min-width: 120px;
}

/* timepicker */
input[type="text"].inputTime {
	max-width: 150px;
	min-width: 120px;
}

/* datetimepicker */
input[type="text"].inputDatetime {
	max-width: 200px;
	text-align: center;
	min-width: 190px;
}