@charset "UTF-8";
@import "base.css";
@import "fonts.css";


/* 基本タグのフォントサイズを指定（12px -> 120% or 1.2em ） */
h1,h2,h3,h4,h5,h6,input,button,textarea,select,p,blockquote,table,pre,address,ul,ol,dl {
	font-size: 140%;
}

dt img,dd img,li img { vertical-align: bottom; }

a   {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;}

/* IE7で本文の中にテキストリンクを貼ると、ズーム時にテキストが重なるというバグがあるので、それを回避する為のハック */
*:first-child+html p {letter-spacing:0;}

/*----------------------------------------
■基本リンク
----------------------------------------*/
a:link    {color:#004990; text-decoration:none;}
a:visited {color:#004990; text-decoration:none;}
a:hover   {color:#3070af; text-decoration:none;}
a:active  {outline:none;}


/*----------------------------------------
■サブページテキスト幅
----------------------------------------*/
p.text{width:px; margin:0 auto; padding:0 0 20px 0;}

/*==========================================================================*/
/*                            Container                                     */
/*==========================================================================*/

html {background: none;}
body {
    color: #333333; 
    background:#FFF; 
    position:relative;
}


/* マージン設定 */
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}

.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:calc(20 / 750 * 100%) !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb35 {margin-bottom:35px !important;}
.mb40 {margin-bottom:40px !important;}
.mb45 {margin-bottom:45px !important;}
.mb50 {margin-bottom:calc(50 / 750 * 100%) !important;}

.mr10 {margin-right:10px !important;}

#outer_header {
	width:100%;

}

#header {
	width:100%;
	margin:0 auto;
	position:relative;
    padding: calc(40 / 750 * 100%) calc(20 / 750 * 100%);
    box-sizing:border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
}


#header h1{
	width:100%;
	height:14px;
	margin:7px 0 0 0;
	padding:0;
	font-size:13px;
	position:absolute;
	top:13px;
	left:0px;
}


#logo {
	width:51%;
	font-size:calc(32 / 750 * 100vw);
	font-weight:bold;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    
}

#logout{
    width: 24%;
    
}

#preview{
	width: 24%;
    margin-right: 1%;
}

#navi_cover {
	width:100%;
	margin:0 auto;
	background:#99d7ff;
	border-bottom:#dbdbdb 1px solid;
}


#navi{
	width:100%;
	margin:0 auto;
	padding:calc(10 / 750 * 100%) calc(20 / 750 * 100%);
    box-sizing:border-box;
}

#navi p{
    font-size: calc(28 / 750 * 100vw);
}
#login_block {
	width:90%;
	height:auto;
	margin:0 auto 100px;
	padding:calc(80 / 750 * 100%) 0;
	background:#efeded;
	border:1px solid #dbdbdb;
}

#login_block p{
    font-size: calc(24 / 750 * 100vw);
}
#login_block p:first-of-type{
    font-size: calc(40 / 750 * 100vw);
}
.red{color:#e4000f;}
.font16{font-size:16px;}



input {margin:0; padding:2px; !important}

table.login{
	width:100%;
	height:auto;
	margin:0 auto 20px;}

table.login th{width:100%; padding:10px 10px 5px 10px; display: block; text-align: center; box-sizing:border-box; font-size:calc(28 / 750 * 100vw);}
table.login td{width: 100%;padding:10px 10px 5px 10px; display: block; box-sizing:border-box; text-align: center; font-size:calc(28 / 750 * 100vw);}

input.text01{width:80%; margin:0; padding:1%;}
input.text02{width:50px; height:25px; margin:0; padding:0;}

.btn1 {
    width: 100%;
    font-size:calc(20 / 750 * 100vw);
	background: #74c4f7;
	border: 1px solid #74c4f7;
	color: #FFF;
	padding: 7% 0 5% ;
	text-align:center;
	/*display:block;*/
}

.btn1:hover{
	background: #a8def7;
	border: 1px solid #a8def7;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	color: #FFF;
	padding: 7% 0 5% ;
}


.btn1::before,
.btn1::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.btn1,
.btn1::before,
.btn1::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.block_btns {
	width:135px;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
}

input[type="text"]::placeholder {
  color: #dbdbdb;
}


/*==========================================================================*/
/*                              Footer                                      */
/*==========================================================================*/

#outer_footer {
	width:100%;
	height:122px;
	text-align:center;
	border-top:1px solid #dbdbdb;
}

#footer {
	width:960px;
	height:122px;
	margin:0 auto;
	text-align:left;
}

.f_logo{
	text-align:center;
	padding:20px 0 10px 0;}

.copy {
	font-size:11px;
	text-align:center;}



/*==========================================================================*/
/*                             Contents                                     */
/*==========================================================================*/

#main{
	width:100%;
	height:auto;
	margin:0 auto 200px;
	padding:0;
	overflow:hidden;}


#left{
	width:100%;
	height:auto;
	margin:0 auto;
	padding:calc(20 / 750 * 100%);
	background:#74c4f7;
    box-sizing:border-box;
}



#contents{
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0;
	float:right;}


.menu{
	color:#FFF;
	font-size:calc(32 / 750 * 100vw);
}

ul.left_menu{
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: calc(10 / 750 * 100%);
}
ul.left_menu li{
	padding:calc(20 / 710 * 100%) calc(29 / 710 * 100%);
	font-size:calc(24 / 750 * 100vw);
    background-color: #fff;
    border:solid 1px #333;
    margin-top: 1%;
}


ul.left_menu li a{
	display:block;
	color:#333333;
	text-decoration:none;}


ul.left_menu li a:hover{
	display:block;
	color:#3070af;}


ul.left_menu li a:active{
	display:block;
	color:#333333;}


h2.tt01{
	width: 100%;
    padding: calc(30 / 750 * 100%) calc(40 / 750 * 100%);
    box-sizing: border-box;
	background:url(../images/icon.jpg) no-repeat 2% 50%;
	background-color:#99d7ff;
	font-size: calc(32 / 750 * 100vw);
    margin: calc(60 / 750 * 100%) 0 calc(40 / 750 * 100%);
}


h3.tt02{
	width:100%;
	height:auto;
	padding:0 0 10px 10px;
	margin:0 0 30px 0;
	border-bottom:#99d7ff solid 3px;
	font-size:18px;}




.form_table {
	width:95%;
	height:auto;
	margin:0 auto;
	padding:0;

	table-layout: fixed;
	word-break: break-all;
}

.form_table th{
	width:100%;
	height:auto;
    font-size: calc(28 / 750 * 100vw);
	margin:0 auto;
	padding:calc(20 / 710 * 100%);
	background:#E6F2FF;
	border:#c7c5c5 solid 1px;
display: block;
box-sizing:border-box;
}


.form_table td{
	width:100%;
	height:auto;
    font-size: calc(28 / 750 * 100vw);
	margin:0 auto;
	padding:calc(20 / 710 * 100%);
	/*background:#FFF;*/
	border:#c7c5c5 solid 1px;
display: block;
box-sizing:border-box;}


/*--------------------------------------------------*/
.list_table {
	width:99%;
	height:auto;
	margin:0 auto 10px;
	padding:0;

	min-width: 640px;
	margin: 0 10px 50px;
}

.list_table th{
	width:auto;
	height:auto;
	margin:0 auto;
	padding:13px 10px;
	background:#E6F2FF;
	border:#c7c5c5 solid 1px;}


.list_table td{
	width:auto;
	height:auto;
	margin:0 auto;
	padding:10px;
	/*background:#FFF;*/
	border:#c7c5c5 solid 1px;

	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;

}

.scroll {
	overflow-x: auto;
}

/*--------------------------------------------------*/


p.bt a {
	display:block;
	width:40%;
	text-align:center;
	font-size: 14px;
	color: #333333;
	padding: 7px 20px;
	margin:0 auto;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#eceaea);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffffff),
		to(#eceaea));
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #cbc9c9;

}


.bt_cover{
	width:400px;
	height:auto;
	margin:0 auto 15px;
	padding:0;
	overflow:hidden;}

p.bt a {
	display:block;
	width: 40%;
	text-align:center;
	font-size: 14px;
	color: #333333;
	padding: 7px 10px;
	/*margin:0 auto 15px;*/
	margin-right: 30px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f2eaeb+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #eceaea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eceaea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#eceaea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eceaea',GradientType=0 ); /* IE6-9 */

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #cbc9c9;
}



p.btleft a {
	display:block;
	width: 40%;
	/*width:180px;*/
	text-align:center;
	font-size: 14px;
	color: #333333;
	padding: 7px 10px;
	margin-left: 30px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f2eaeb+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #eceaea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eceaea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#eceaea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eceaea',GradientType=0 ); /* IE6-9 */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #cbc9c9;
	float:left;
}




p.btright a {
	display:block;
	/*width:180px;*/
	text-align:center;
	font-size: 14px;
	color: #333333;
	padding: 7px;
	margin:0 auto;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f2eaeb+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #eceaea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eceaea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#eceaea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eceaea',GradientType=0 ); /* IE6-9 */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #cbc9c9;
	float:right;
}


.bt_cover a:hover, p.bt a:hover{color:#3070af;}

.fl{float:left;}
.fr{float:right;}



.block_outer{
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0;
	overflow:hidden;
	background:url(../images/arrow.jpg) no-repeat center;}



.block_left{
	width:330px;
	height:auto;
	margin:0 auto;
	padding:0;
	float:left;}


.block_right{
	width:330px;
	height:auto;
	margin:0 auto;
	padding:0;
	float:right;}

.form_table label{
	font-weight: normal;
}

.err{
	color:red;
	margin-top: 10px;
}

.msg{
	color:blue;
	margin-top: 5px;
}