@charset "utf-8";

/*==============================
 Body
==============================*/
body {
	overflow: hidden;
	font-size: 100%;
	word-wrap: break-word;
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: none;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #666;
	text-decoration: none;
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
}
.sp, .nobr {
	display: none;
}

/*==============================
 Header
==============================*/
header {
	position: fixed;
	width: 100%;
	clear: both;
	z-index: 10000;
	color: #FFF;
	background: #00354c;
	box-sizing: border-box;
}
header .inner {
	position: relative;
	width: 100%;
	height: 100px;
	clear: both;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		-webkit-align-content: stretch;
		align-content: stretch;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	margin: 0 auto;
	padding: 0 1%;
	box-sizing: border-box;
}
header img.logo {
	height: 34px;
	display: block;
	margin: 5px 0;
}
header .member {
	width: 100%;
	display: inline-block;
	font-size: 1em;
	line-height: 1.6em;
}
header .member br {
	display: none;
}
header .member h1 {
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	text-indent: 5px;
}
header ul.headerMenu {
	position: absolute;
	width: auto;
	height: 70px;
	top: 10px;
	right: 0;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		-webkit-align-content: stretch;
		align-content: stretch;
		-webkit-align-items: center;
		align-items: center;
}
header ul.headerMenu li {
	width: 60px;
	height: 70px;
	display: block;
	text-align: center;
}
header ul.headerMenu li a {
	width: 100%;
	height: 100%;
	display: block;
	color: #FFF;
	opacity: 1;
	transition: all 200ms;
}
header ul.headerMenu li a:hover {
	opacity: 0.5;
	transition: all 200ms;
}
header ul.headerMenu li a img {
	width: 20px;
	height: 20px;
	display: block;
	margin: 0 auto;
}
header ul.headerMenu li a span {
	width: 100%;
	height: 30px;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-content: stretch;
		align-content: stretch;
		-webkit-align-items: center;
		align-items: center;
	font-size: 0.8em;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
	line-height: 15px;
	text-align: center;
}

/*==============================
 Common
==============================*/
main {
	clear: both;
	display: block;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-content: flex-start;
		align-content: flex-start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
}
.reverse {
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

/*----- Title ------*/
.pageTitle {
	position: relative;
	width: 100%;
	height: 40px;
	clear: both;
	margin: 0 auto;
	padding: 0 1%;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	color: #FFF;
	background: #0c81c4;
	box-sizing: border-box;
}

/*==============================
 Topページ
==============================*/
#home {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: url("../images/main_bg.jpg") no-repeat left 35% center;
	background-size: cover;
}
#home .logo {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	text-align: center;
	background: #FFF;
}
#home .logo img {
	width: 60%;
	display: block;
	margin: 10px auto;
}
#home .logo h1 {
	width: 100%;
	display: block;
	padding: 10px 0;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1em;
	color: #FFF;
	background: #00354c;
}
#home .logo img.welcome {
	position: absolute;
	width: 40%;
	top: 70px;
	right: 0;
	transform: rotate( -20deg );
}

/*ログイン*/
#home .loginBox {
	position: absolute;
	width: 80%;
	min-height: 60vh;
	top: 25%;
	left: calc(50% - 40%);
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-content: space-between;
		align-content: space-between;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	padding: 20px 0;
	border-radius: 10px;
	filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.25));
	background: #FFF;
	box-sizing: border-box;
}
#home .loginBox h2 {
	width: 100%;
	display: block;
	padding: 10px 0;
	font-size: 1.8em;
	line-height: 1em;
	text-align: center;
}
#home .loginBox h2.en {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 2.4em;
}
#home .loginBox dl {
	width: 100%;
	min-height: 240px;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		-webkit-align-content: space-between;
		align-content: space-between;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	padding: 20px;
	background: #F5F5F5;
	box-sizing: border-box;
}
#home .loginBox dl input {
	width: 100%;
	display: block;
	padding: 10px 5px;
	font-size: 1.2em;
	line-height: 1em;
	border: solid 1px #DDD;
	box-sizing: border-box;
}
#home .loginBox dl dt {
	width: 100%;
	display: block;
	font-size: 1.2em;
	line-height: 1.6em;
}
#home .loginBox dl dd {
	width: 100%;
	display: block;
	margin-bottom: 5px;
}
#home .loginBox dl a.link {
	width: auto;
	float: right;
	display: inline-block;
	padding: 10px 15px 10px 0;
	font-size: 1.2em;
	line-height: 1em;
	background: url("../images/arrow_right.svg") no-repeat right center;
	background-size: 8px;
}
#home .loginBox dl p {
	width: 100%;
	display: block;
	font-size: 1.2em;
	line-height: 1.6em;
	text-align: center;
}
#home .loginBox dl span {
	width: auto;
	float: left;
	display: block;
	padding: 5px 0;
	font-size: 0.8em;
	line-height: 1em;
}
#home .loginBox button {
	width: 60%;
	height: 40px;
	clear: both;
	display: block;
	margin: 10px auto;
	font-size: 1.4em;
	line-height: 40px;
	color: #FFF;
	border: none;
	cursor: pointer;
	background: #0c81c4;
}

/*==============================
 メニュー
==============================*/
nav {
	position: fixed;
	width: 100%;
	top: 100px;
	z-index: 1000;
	color: #FFF;
	background: #000;
}
nav ul {
	width: 100%;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		-webkit-align-content: stretch;
		align-content: stretch;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
}
nav ul li {
	width: 16.4%;
	height: 50px;
}
nav ul li+li {
	border-left: solid 1px #666;
}
nav ul li a,
nav ul li p {
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-content: stretch;
		align-content: stretch;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	color: #FFF;
	box-sizing: border-box;
}
nav ul li p {
	background: #0c81c4;
}
nav ul li a span,
nav ul li p span {
	width: 100%;
	height: 2.4em;
	display: block;
	font-size: 0.8em;
	line-height: 1.2em;
	text-align: center;
	transform: scale(0.8);
}
nav ul li a img,
nav ul li p img {
	width: 20px;
	height: 20px;
	display: block;
	margin: 0 auto;
}

/*==============================
 マイページ
==============================*/
#myPage {
	position: absolute;
	width: 100%;
	top: 150px;
	right: 0;
	padding: 20px 5%;
	box-sizing: border-box;
}
#myPage dl.status {
	width: 100%;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		-webkit-align-content: stretch;
		align-content: stretch;
		-webkit-align-items: center;
		align-items: center;
	margin: 0 auto 20px;
	box-sizing: border-box;
}
#myPage dl.status dt {
	width: auto;
	display: block;
	padding-right: 10px;
	font-size: 1em;
	line-height: 1.6em;
	text-align: right;
	box-sizing: border-box;
}
#myPage dl.status dd {
	width: 50%;
	height: 30px;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	box-sizing: border-box;
}
#myPage dl.status dd.open {
	color: #0c81c4;
	border-color: #0c81c4;
}
#myPage dl.status dd.wait {
	color: #e80000;
	border-color: #e80000;
}
#myPage dl.status dd.close {
	color: #999;
	border-color: #999;
}

/*==============================
 ニュース
==============================*/
#news {
	position: relative;
	width: 100%;
	clear: both;
	margin: 0 auto;
}
#news dl.newsList {
	position: relative;
	width: 100%;
	clear: both;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		-webkit-align-content: flex-start;
		align-content: flex-start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	margin: 0 auto;
	padding: 15px 0;
	border-bottom: solid 1px #CCC;
	box-sizing: border-box;
}
#news dl.newsList dt {
	width: auto;
	display: block;
	font-size: 1.2em;
	line-height: 1.6em;
	color: #999;
	box-sizing: border-box;
}
#news dl.newsList span {
	width: 60px;
	top: 20px;
	display: block;
	margin-right: 10px;
	font-size: 1em;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	color: #FFF;
	box-sizing: border-box;
}
#news dl.newsList span.new {
	left: 0;
	color: #e80000;
	border: solid 1px #e80000;
	background: #FFF;
}
#news dl.newsList span.important {
	left: 100px;
	border: solid 1px #e80000;
	background: #e80000;
}
#news dl.newsList dd {
	width: 100%;
	margin-top: 5px;
	font-size: 1.2em;
	line-height: 1.6em;
}

/* ページ送り */
#news ul.pager {
	width: 100%;
	clear: both;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: center;
		justify-content: center;
	padding: 40px 0;
}
#news ul.pager li {
	width: 30px;
	height: 30px;
	display: block;
	margin: 0 5px;
	font-size: 1.6em;
	line-height: 30px;
}
#news ul.pager li a {
	width: 30px;
	height: 30px;
	display: block;
	text-align: center;
	color: #0c81c4;
	border: solid 1px #0c81c4;
	box-sizing: border-box;
}
#news ul.pager li span {
	width: 30px;
	height: 30px;
	display: block;
	text-align: center;
	color: #FFF;
	background: #0c81c4;
}

/*-- News（詳細ページ） --*/
#news .date {
	width: 100%;
	clear: both;
	margin: 20px auto;
	font-size: 1.2em;
	line-height: 1em;
	color: #999;
}
#news h3.articleTitle {
	width: 100%;
	float: both;
	margin: 0 auto 20px;
	font-size: 1.4em;
	line-height: 1.4em;
}
#news .content {
	width: 100%;
	clear: both;
	margin: 0 auto;
	padding: 10px 0;
	border-top: solid 1px #CCC;
}
#news .content p {
	width: 100%;
	padding: 10px 0;
	font-size: 1.2em;
	line-height: 1.6em;
}
#news .content img {
	width: 80%;
	display: block;
	margin: 10px auto;
}
#news ul.download {
	position: relative;
	width: 100%;
	clear: both;
	padding: 20px 0;
	border-top: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}
#news ul.download h4 {
	width: 100%;
	clear: both;
	margin-bottom: 10px;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.6em;
}
#news ul.download li {
	position: relative;
	width: 100%;
	clear: both;
	padding: 5px 0 5px 25px;
	font-size: 1.2em;
	line-height: 1.6em;
	background: url("../images/icon_pdf.svg") no-repeat left center;
	background-size: 20px;
	box-sizing: border-box;
}
#news ul.download li a {
	text-decoration: underline;
	color: #0c81c4;
}
#news a.linkBack {
	width: auto;
	display: block;
	align-items: center;
	font-size: 1em;
	line-height: 1.6em;
	padding: 20px 0 20px 20px;
	text-decoration: none;
	background: url(../images/arrow_left.svg) no-repeat left center;
	background-size: 10px 10px;
	box-sizing: border-box;
}


/*==============================
 フォーム
==============================*/
#myPage form {
	width: 100%;
	max-width: 1200px;
	clear: both;
	display: -webkit-flex;
	display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-content: stretch;
		align-content: stretch;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	margin: 0 auto;
}
#myPage form h3 {
	width: 100%;
	height: 30px;
	clear: both;
	margin-top: 20px;
	padding: 0 2%;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 30px;
	color: #FFF;
	background: #666;
	box-sizing: border-box;
}
#myPage form h3 span {
	float: right;
	display: inline-block;
	font-size: 0.8em;
	font-weight: normal;
}
#myPage form dl {
	width: 100%;
	float: left;
	clear: both;
	padding: 15px 0;
}
#myPage form dl+dl {
	border-top: solid 1px #CCC;
}
#myPage form dl a {
	text-decoration: underline;
}
#myPage form dl dt {
	position: relative;
	width: 100%;
	float: left;
	margin-bottom: 5px;
	font-size: 1.2em;
	line-height: 1.6em;
	box-sizing: border-box;
}
#myPage form dl dt .must {
	position: absolute;
	width: 36px;
	height: 24px;
	top: 8px;
	right: 0px;
	font-size: 0.8em;
	line-height: 24px;
	text-align: center;
	color: red;
	border: solid 1px red;
}
#myPage form dl dt .note,
#myPage form dl dd .note {
	margin-top: 5px;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #666;
}
#myPage form dl dd {
	width: 100%;
	float: left;
	font-size: 1.2em;
	line-height: 1.6em;
}
#myPage form dl dd+dd {
	margin-top: 10px;
}
#myPage form dl dd .error {
	margin-left: 5px;
	font-size: 1em;
	line-height: 1.2em;
	color: red;
}
#myPage form dl dd img {
	width: 50%;
	display: block;
	margin: 5px 0;
}
#myPage form dl dd input.ip01,
#myPage form dl dd input.ip02,
#myPage form dl dd input.ip03,
#myPage form dl dd input.ip04,
#myPage form dl dd input.ip05 {
	margin: 0;
	padding: 5px 5px;
	box-sizing: border-box;
}
#myPage form dl dd input.ip01 {
	width: 100%;
}
#myPage form dl dd input.ip02 {
	width: 100%;
}
#myPage form dl dd input.ip03 {
	width: 20%;
}
#myPage form dl dd input.ip04 {
	width: 30%;
}
#myPage form dl dd input.ip05 {
	width: 7%;
}
#myPage form ::-webkit-input-placeholder,
#myPage form :-ms-input-placeholder,
#myPage form ::placeholder {
	color: #DDD;
}
#myPage form dl dd input[type=submit] {
	width: 32%;
	display: inline-block;
	margin: 2px 1% 2px 0;
	padding: 7px;
	font-size: 0.8em;
	box-sizing: border-box;
}
#myPage form dl dd textarea {
	width: 100%;
	margin: 5px 0 -5px;
	padding: 5px;
	box-sizing: border-box;
}
#myPage form dl dd select {
	margin: 5px 0;
	padding: 7px;
}
#myPage form dl dd.radioList {
	padding-top: 30px!important;
	line-height: 1.2em;
}
#myPage form dl dd label {
	display: inline-block;
	margin: 5px 20px 5px 0;
	padding: 5px 0;
}
#myPage form dl dd label input[type=radio],
#myPage form dl dd label input[type=checkbox] {
    display: inline-block;
	margin: 0 5px 0 0;
	vertical-align: baseline;
}
#myPage form dl dd label span {
    width: auto;
	display: inline-block;
}

/*事務局へのお問い合わせ*/
#myPage form .telBlock {
	width: 100%;
	clear: both;
	padding: 20px 0 0;
	font-size: 2em;
	line-height: 1em;
	text-align: center;
}
#myPage form .mailBlock {
	width: 100%;
	float: left;
	clear: both;
	padding: 20px 0;
}
#myPage form .mailBlock textarea {
	width: 100%;
	display: block;
	margin: 5px auto;
	padding: 5px;
	box-sizing: border-box;
}
#myPage form .mailBlock p {
	width: 100%;
	display: block;
	margin: 5px auto;
	padding: 5px;
	font-size: 1.2em;
	line-height: 1.6em;
	box-sizing: border-box;
}
#myPage form .mailBlock input[type=submit] {
	width: 50%;
	display: block;
	margin: 20px auto 0;
	padding: 7px;
	font-size: 1.2em;
	line-height: 1.6em;
	box-sizing: border-box;
}
#myPage form .mailBlock a.linkFile {
	width: auto;
	display: block;
	margin: 5px auto;
	padding: 5px;
	font-size: 1.2em;
	line-height: 1.6em;
	text-align: center;
	text-decoration: underline;
	color: #0c81c4;
	box-sizing: border-box;
}
#myPage form .btnBlock {
	width: 100%;
	clear: both;
	display: block;
	border-top: solid 1px #CCC;
}
#myPage form button {
	width: 70%;
	max-width: 300px;
	height: 50px;
	clear: both;
	display: block;
	margin: 20px auto;
	font-size: 1.4em;
	line-height: 50px;
	color: #FFF;
	border: none;
	cursor: pointer;
	background: #0c81c4;
	opacity: 1;
	transition: all 200ms;
}
#myPage form button:hover {
	opacity: 0.5;
	transition: all 200ms;
}