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

/*-----------------------------------------
	スクロールバー調整
------------------------------------------*/

*html body {
	/*IE6だけに適用*/
	overflow-y: auto;
}

*+html body {
	/*IE7だけに適用*/
	overflow-y: auto;
}

html {
	overflow-y: scroll;
}

/*----------------------------------------------------------
	reset
--------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
h4,
form,
p,
th,
td,
input,
textarea,
select {
	margin: 0px;
	padding: 0px;
}

img {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
}

ul,
dl {
	list-style-type: none;
}

button, input, textarea {
	font-family : inherit;
}

/* iOSでのデフォルトスタイルをリセット */
input {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	border: 1px solid #b1b1b1;
	padding: 8px;
}

input::-webkit-search-decoration {
	display: none;
}

input:focus {
	outline-offset: -2px;
}

textarea {
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	box-sizing: border-box;
	font-size: smaller;
}

select {
	color: var(--text-color);
}

button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	font-size: 1rem;
	transition: 0.3s;
}

button:hover {
	opacity: .7;
}


/*-----------------------------------------
	共通
------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	background-color: #e4f0ff;
	color: #333333;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: break-word;
}

@media screen and (max-width: 850px) {
	* {
		-webkit-text-size-adjust: 100%;
		word-break: normal;
	}
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-break: normal;
}

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

p {
	line-height: 1.5;
}

a {
	-webkit-tap-highlight-color: transparent;
	transition: 0.3s;
	color: #1573B8;
	text-decoration: underline;
}

a:hover {
	opacity: 0.7;
	cursor: pointer;
	text-decoration: none;
}

a:visited {
	text-decoration: underline;
	color: #0b426a;
}

.align-c {
	text-align: center;
}

/* -----------------------------------------------------------------------
	全体
------------------------------------------------------------------------ */
#wrapper {
	display: flex;
	align-items: center;
	align-content: center;
	min-height: calc(100vh - 54px);
	padding: 0 2%;
}


/* ------------------------------------------------------------------------
        ログインエリア
------------------------------------------------------------------------ */

#loginArea {
	margin: 25px auto;
	padding: 2%;
	width: 100%;
	max-width: 800px;
	background-color: #fff;
	box-shadow: 2px 2px 10px 0px rgba(187, 187, 187, 0.4);
	text-align: center;
}

.loginbox {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.loginbox label {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	width: 100%;
}

.loginbox input[type="text"],
.loginbox input[type="password"] {
	width: 100%;
	max-width: 220px;
}

.pwbox {
	padding-left: 170px;
	padding-bottom: 20px;
}

.ckbox {
	padding-bottom: 10px;
}

.ckbox input[type="checkbox"] {
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
}

.ckbox input[type="checkbox"]+span::before {
	display: inline-block;
	content: '';
	width: 1.2rem;
	height: 1.2rem;
	border: 2px solid #ccc;
	border-radius: 5px;
	margin-right: .5rem;
	vertical-align: text-top;
}

/* Checked Style */
input[type="checkbox"]:checked+span::before {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20256px%3B%20height%3A%20256px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%234B4B4B%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%22440.469%2C73.413%20218.357%2C295.525%2071.531%2C148.709%200%2C220.229%20146.826%2C367.055%20218.357%2C438.587%20289.878%2C367.055%20512%2C144.945%20%22%20style%3D%22fill%3A%20rgb(21%2C%20115%2C%20184)%3B%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: 0 1px;
}

/* Focused Style */
input[type="checkbox"]:focus+span::before {
	border-color: #0bd;
}

.btbox {
	margin: 0 auto;
}

.btn {
	display: inline-block;
	padding: 12px 60px 10px;
	background-color: #ea8706;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	position: relative;
	min-width: 200px;
	text-align: center;
}

.btn::after {
	content: "";
	border-right: 2px solid #FFF;
	border-top: 2px solid #FFF;
	position: absolute;
	bottom: 0;
	right: 20px;
	top: 0;
	height: 10px;
	width: 10px;
	margin: auto;
	transform: rotate(45deg);
	transition: right .3s;
}
.btn:hover {
	opacity: .7;
	color: #FFF;
}
.btn:hover::after {
	right: 15px;
}
.btn:visited {
	color: #FFF;
}

.info {
	font-size: 0.75em;
	color: #3366CC;
	padding-top: 10px;
	text-align: center;
}

.error {
	padding: 16px 0;
	color: #CC0000;
	font-weight: bold;
}

/* ------------------------------------------------------------------------
        インフォメーションエリア
------------------------------------------------------------------------ */

#infoArea {
	margin: 25px auto;
	padding: 2%;
	width: 100%;
	max-width: 800px;
	background-color: #fff;
	box-shadow: 2px 2px 10px 0px rgba(187, 187, 187, 0.4);
	text-align: center;
}

#infotext {
	margin: 0 auto;
	padding-top: 40px;
	color: #666666;
	font-size: 1.25em;
}

.infoimg {
	padding-top: 25px;
	font-weight: bold;
	font-size: 1.2rem;
	color: #ea8706;
}

.mailadress {
	display: flex;
	flex-direction: column;
	padding: 0 0 20px 0;
}

.title {
	display: inline-block;
	color: #999999;
	font-size: 0.85em;
}


.back {
	padding-top: 20px;
	text-align: center;
}

.btn-back {
	display: inline-block;
	padding: 12px 60px 10px;
	background-color: #022a70;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	position: relative;
	min-width: 200px;
	text-align: center;
	font-size: 1rem;
}

.btn-back::after {
	content: "";
	border-left: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	position: absolute;
	bottom: 0;
	left: 20px;
	top: 0;
	height: 10px;
	width: 10px;
	margin: auto;
	transform: rotate(45deg);
	transition: left .3s;
}
.btn-back:hover {
	color: #FFF;
}
.btn-back:hover::after {
	left: 15px;
}
.btn-back:visited {
	color: #FFF;
}

.btn-area {
	padding-top: 20px;
	text-align: center;
}

.btn-sub {
	display: inline-block;
	padding: 12px 60px 10px;
	background-color: #ea8706;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	min-width: 200px;
	text-align: center;
}

/* ------------------------------------------------------------------------
        フッターエリア
------------------------------------------------------------------------ */
#footerArea {
	width: 100%;
	margin: 0 auto;
	font-size: 0.75em;
	color: #999999;
	text-align: center;
}

/* ------------------------------------------------------------------------
        2013.11.29 設置  [お知らせ]
------------------------------------------------------------------------ */

.notice {
	margin: 0 auto;
	margin-bottom: 20px;
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	background-color: #D8E7F8;
	border: 2px solid #4664AA;
	text-align: left;
	background-image: url(../images/icon_login_notice.gif);
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

.notice p {
	padding-top: 18px;
}