/* common */
*{
	margin:0;
	padding: 0;
}
body{
	margin:0;
	padding: 0;
}
* html body {
	overflow: hidden;
	color: #333333;
}
/* common */

/*** Header Area ***/
#headerAreaTop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0px auto 5px auto;
	z-index:99;
	border-bottom: 3px solid #66ccff;

	background: #ffffff;
}
#headerAreaTop #headerPart {
	background: #ffffff;
	padding: 5px 5px;
	min-width: 980px;
	overflow:hidden;

	width: 1080px;
	margin: 0px auto 0px auto;
}
#headerAreaTop #menuPart {
	background: #ffffff;
	padding: 2px 5px;
	min-width: 1080px;
	overflow:hidden;
}
#headerAreaTop #messagePart {
	background: #e1f4f8;
	padding: 2px 5px;
	min-width: 980px;
	overflow:hidden;
}
#headerAreaTop #fixedPart {
	background: #e1f4f8;
	padding: 2px 5px;
	xheight: 40px;
	xmin-width: 980px;
	overflow:hidden;
}
#headerAreaTop h1 {
	height: 2em;
	float: left;
}


/*** Header Area ***/
#headerArea {
	position: fixed !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0px auto 5px auto;
	z-index:99;
	border-bottom: 3px solid #66ccff;
}
#headerArea #headerPart {
	background: #ffffff;
	padding: 5px 5px;
	min-width: 980px;
	overflow:hidden;
}
#headerArea #menuPart {
	background: #ffffff;
	padding: 2px 5px;
	min-width: 1080px;
	overflow:hidden;
}
#headerArea #messagePart {
	background: #e1f4f8;
	padding: 2px 5px;
	min-width: 980px;
	overflow:hidden;
}
#headerArea #fixedPart {
	background: #e1f4f8;
	padding: 2px 5px;
	xheight: 40px;
	xmin-width: 980px;
	overflow:hidden;
}
#headerArea h1 {
	height: 2em;
}

/*** Header Area ***/

/*** Logo ***/
.logo {
	float: left;
	padding: 0;
}
.logo img{
}
/*** Logo ***/

.logout {
	position: absolute;
	top: 0;
	right: 0;
	height: 36px;
	background: #024190;
	white-space: nowrap;
	width: 120px;
}
.logout ul {
	padding: 10px 0;
}
.logout li {
	float: left;
	margin-left: 30px;
	padding-right: 20px;
	list-style-image: url(../img/list.png);
	font-size: 10pt;
	color: #ffffff;
}
.logout li a {
	color: #ffffff;
}
.logout li a:hover {
	color: #ffdab9;
}
/*** Functiont ***/

/*** Menu ***/
.menu {
	float: left;
	padding: 0 0 5px 0 ;
}
.menu ul {
	padding: 5px 0;
}
.menu li {
	float: left;
	margin: 0 10px;
	padding: 0px;
	list-style-type: none;
	font-size: 12pt;
	text-align: center;
}
.menu li a {
	padding: 3px 0px 2px 0px;
	display: block;
	width: 100%;
}
.menu90 {
	background: url(../img/menu90.png) no-repeat;
	width: 90px;
}
.menu120 {
	background: url(../img/menu120.png) no-repeat;
	width: 120px;
}
.menu150 {
	background: url(../img/menu150.png) no-repeat;
	width: 150px;
}
/*** Function Part ***/


/*** Actiont ***/
#headerPart .action {
	position: absolute;
	top: 2em;
	right: 0;
}
#menuPart .action {
	padding: 5px 0;
}
.action {
	float: right;
	padding: 0;
}
.action ul {
	padding: 0;
	float: left;
}
.action li {
	float: left;
	text-align: center;
	margin: 0 10px;
	padding: 0px;
	list-style-type: none;
	font-size: 12pt;
}
.action li.exit {
	margin-left: 30px;
	background: #275495;
}
.action li a {
	color: #000000;
	padding: 3px 0px 2px 0px;
	display: block;
	width: 100%;
}
.action li a:hover {
	color: #ffdab9;
}
.action li.close {
	margin: 0 20px 0 30px;
}
.action li a.delete {
	font-weight: bold;
	color: #ff0000 !important;
}
.action50 {
	background: url(../img/action50.png) no-repeat;
	width: 50px;
}
.action70 {
	background: url(../img/action70.png) no-repeat;
	width: 70px;
}
.action70 .disabled {
	color: #cccccc;
}
.action90 {
	background: url(../img/action90.png) no-repeat;
	width: 90px;
}
.action120 {
	background: url(../img/action120.png) no-repeat;
	width: 120px;
}
/*** Actiont ***/

/*** Message ***/
.message {
	padding: 5px;
}
.messagefixed {
	padding: 5px;
}
/*** Message ***/

/*** Content Area ***/
#contentArea {
	padding: 5px 20px 16px 20px;
	overflow: auto;
	min-width: 980px;
	z-index:9;
}

#contentArea h1 {
	background: #44bdd2;
	color: #ffffff;
	font-size: 11pt;
	font-weight: normal;
	padding: 3px 10px;
}

#contentArea .content {
	margin-bottom: 10px;
	clear: both;
}
#contentArea .contentL {
	margin-bottom: 10px;
	float: left;
	width: 49%;
	clear: both;
}
#contentArea .contentR {
	margin-bottom: 10px;
	float: right;
	width: 49%;
}

/*** Login Form ***/
#loginform {
	position: relative;
	top: 30px;
	float: right;
	xposition: relative;
	xtop: 5px;
	xright: 0;
	text-align: center;
}
#loginform table {
	padding: 0px;
	float: left;
}
#loginform th {
	font-weight: normal;
	width: 6em;
}
#loginform td {
	width: 10em;
	padding: 0px 2px;
}
#loginform td input {
	width: 10em;
}
#loginform #btnlogin {
	bottom: 0;
	width: 6em;
	height: 2em;
	margin: 2em 1em 0 0;
}
#loginform #message {
	float: left;
	font-size: 80%;
	color: #ff0000;
	height: 2em;
	margin: 2.2em 0 0 0;
}
/*** Login Form ***/

/*** Footer Area ***/
#footerArea {
	clear: both;
	background: #004290;
	padding: 8px 12px;
	min-width: 1080px;
}
#footerArea p {
	font-size: 10pt;
	color: #ffffff;
	text-align: right;
	margin-top: 5px;
}
/*** Footer ***/

/*** top page ***/
.toppage {
	margin: 20px auto;
	width: 100%;
}
.toppage .topimage{
	width: 100%;
}
.toppage .supply{
	width: 100%;
	color: #7C7C7C;
	text-align: right;
	display: block;
}
.toppage .location{
	margin-left: 20px;
}

.information {
	margin: 20px auto;
	width: 600px;
}
.information h2 {
	text-align: center;
	position: absolute;
}
.information .profile {
	margin-top: 2em;
}
.information .profile p {
	float:left;
	margin: 50px 20px 0 0
}
.information .profile p .president {
	font-size: 14pt;
}
.information .profile p .name {
	font-size: 18pt;
}
.information .profile p .post {
	font-size: 12pt;
}
.information .profile img {
	position: relative;
	height: 200px;
	padding-left: 2em;
}
.information .message {
	margin-top: 2em;
	clear: both;
}
.information .message li {
	list-style: none;
	text-indent: -1.4em;
	padding-left: 3em;
}
.information .location {
	margin: 2em 0;
}
.information .location div {
	display: block;
	float:left;
	margin: 20px 20px 0 0;
}
.information .location p {
	font-size: 14pt;
}
.information .location dt {
	float:left;
}
.information .location dd {
	margin-left: 4em;
}
.information .location img {
	position: relative;
	width: 300px;
}
.information .contact {
	position: relative;
	padding-top: 20px;
}
.information p.date {
	text-align: right;
	padding-right: 2em;
}


/*** navigation ***/
nav {
	margin: 10px 0
}
nav ul
{
	display: -webkit-flex;
	display: flex;
	margin: 0 0 0 30px;
}
nav li {
	padding: 0 5px;
	list-style: none;
}

/*** list page ***/
#listpage {
	margin: 0 auto;
}
#listpage table {
	margin: 0;
	width: 100%;
	border-collapse: collapse ;
}
#listpage td {
	border-top: 1px solid #cccccc;
	padding: 5px 0;
}
#listpage .func {
	text-align: center;
	width: 4em
}
#listpage .date {
	text-align: center;
	width: 13em
}
#listpage .note {
}
#listpage td.note {
	padding-left: 1em;
}
#listpage .down {
	text-align: center;
	width: 7em
}
#listpage .cate {
	text-align: center;
	width: 7em
}

/*** pagination ***/
.paginator {
	display: -webkit-flex;
	display: flex;
	margin: 10px 0;
}
.paginator p {
	margin-left: auto;
}
ul.pagination {
	display: -webkit-flex;
	display: flex;
	margin-left: 3em;
}
ul.pagination li {
	padding: 0 5px;
	list-style: none;
}

/*** edit page ***/
#editpage {
	margin: 0 auto;
	width: 800px;
}
#editpage table {
	width: 100%;
	border: 1px solid #cccccc;
	border-collapse: collapse;
}
#editpage th {
	width: 10em;
	border: 1px solid #cccccc;
	border-collapse: collapse;
}
#editpage td {
	padding: 5px;
	border: 1px solid #cccccc;
	border-collapse: collapse;
}
#editpage table input[name="title"] {
	width: 97%;
	padding: 5px;
	display:block;
}
#editpage table input[name="category"] {
	margin: 0 5px 0 20px;
}
#editpage textarea {
	width: 98%;
	padding: 5px;
	display:block;
}
#editpage #submit {
	margin-top:10px;
	width: 10em;
	height: 2em;
}

#editpage div.contentsedit {
	border: 1px solid #cccccc;
}
#editpage .contentsedit th {
	width: 8em !important;
	height: 3em;
	padding-left: 10px;
	text-align: left;
}

#editpage .contentsedit td.upload {
	width: 7em;
	text-align: center;
}

#usereditpage {
	margin: 0 auto;
	width: 500px;
}
#usereditpage table {
	width: 100%;
	border: 1px solid #cccccc;
	border-collapse: collapse;
}
#usereditpage th {
	width: 10em;
	border: 1px solid #cccccc;
	border-collapse: collapse;
}
#usereditpage td {
	padding: 5px;
	border: 1px solid #cccccc;
	border-collapse: collapse;
}
#usereditpage table input {
	width: 95%;
	padding: 5px;
	display:block;
}
#usereditpage textarea {
	width: 98%;
	padding: 5px;
	display:block;
}
#usereditpage #submit {
	margin-top:10px;
	width: 10em;
	height: 2em;
}

div.search {
	margin-top: 5px;
}
div.search ul.inline {
	margin-left: 2em;
	float: left;
}
div.search ul.inline li {
	margin-right:2em;
	display: inline;
}
div.search .submit {
	display: float;
}
div.search .submit input {
	width: 6em;
}




#sidePart {
	xposition: relative;
	xright: 0;
	float: right;
	margin-top: 3em;
	background-color: #4472C4
}
#sidePart .bannar {
	text-align: left;
}
#sidePart .bannar ul {
	padding: 15px 10px 0 5px;
}
#sidePart .bannar li {
	list-style-type: none;
	font-size: 12pt;
	color: #FFFFFF;
	padding-bottom: 15px;
}
#sidePart .bannar li a {
	color: #FFFFFF;
}
.toppage1 .topimage {
	fxloat: left;
}
/*** top page ***/
.toppage1 {
	text-align: center;
	width: 1060px;
	background-color: #2F2FFF;
	margin: 20px auto;
}
.toppage1 .supply{
	width: 100%;
	color: #DFDFDF;
	text-align: right;
	display: block;
}

.topimagearea {
	width: 840px;
	padding-top: 8px;
	margin-right: 10px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0px;
}
.topimagearea .image1,
.topimagearea .image2,
.topimagearea .image3,
.topimagearea .image4,
.topimagearea .image5,
.topimagearea .image6,
.topimagearea .image7,
.topimagearea .image8,
.topimagearea .image9,
.topimagearea .image10,
.topimagearea .image11 {
	width: 200px;
	margin: 5px 5px;
}
.topimagearea .image0 {
	width: 410px;
	margin: 5px 5px;
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 4;
}
.topimagearea .introduction {
	color: #fff;
	text-align: left;
	width: 406px;
	margin: 5px 5px;
	padding-left: 4px;
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 4;
	grid-row-end: 5;
}


/* ==== smartphone hotfix for login/header ==== */
@media screen and (max-width: 640px) {
    #headerAreaTop,
    #headerArea {
        width: 100%;
        left: 0;
    }

    #headerAreaTop #headerPart,
    #headerArea #headerPart,
    #headerAreaTop #menuPart,
    #headerArea #menuPart,
    #headerAreaTop #messagePart,
    #headerArea #messagePart,
    #headerAreaTop #fixedPart,
    #headerArea #fixedPart,
    #contentArea,
    #footerArea {
        min-width: 0;
        width: auto;
        overflow: visible;
    }

    #headerAreaTop #headerPart,
    #headerArea #headerPart,
    #headerAreaTop #menuPart,
    #headerArea #menuPart,
    #headerAreaTop #messagePart,
    #headerArea #messagePart,
    #headerAreaTop #fixedPart,
    #headerArea #fixedPart,
    #contentArea,
    #footerArea {
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }

    #headerAreaTop h1,
    #headerArea h1,
    .logo,
    .menu,
    .action {
        float: none;
        position: static;
        width: auto;
        height: auto;
    }

    #headerPart .action {
        position: static;
        top: auto;
        right: auto;
    }

    .logout {
        position: static;
        width: auto;
        height: auto;
        white-space: normal;
        margin-top: 8px;
    }

    .logout ul,
    .menu ul,
    .action ul {
        padding: 0;
        float: none;
    }

    .logout li,
    .menu li,
    .action li {
        float: none;
        margin: 0 0 6px 0;
        list-style-type: none;
        list-style-image: none;
    }

    .menu90,
    .menu120,
    .menu150,
    .action50,
    .action70,
    .action90,
    .action120 {
        background: none;
        width: auto;
    }

    #loginform {
        float: none;
        position: static;
        top: 0;
        clear: both;
        width: 100%;
        text-align: left;
        margin-top: 8px;
    }

    #loginform table {
        float: none;
        width: 100%;
        table-layout: auto;
    }

    #loginform tr,
    #loginform th,
    #loginform td {
        display: block;
        width: auto;
    }

    #loginform th {
        margin-top: 8px;
    }

    #loginform td {
        padding: 0;
    }

    #loginform td input,
    #loginform #btnlogin {
        width: 100%;
        box-sizing: border-box;
    }

    #loginform #btnlogin {
        height: 2.4em;
        margin: 10px 0 0 0;
    }

    #loginform #message {
        float: none;
        height: auto;
        margin: 8px 0 0 0;
    }

    #contentArea {
        padding: 5px 10px 16px 10px;
    }

    /* 管理者メニューは中央寄せ＋必要時のみ横スクロール */
    #headerAreaTop #menuPart,
    #headerArea #menuPart {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        text-align: center;
    }

    #headerAreaTop #menuPart .action,
    #headerArea #menuPart .action {
        display: block;
        float: none;
        width: fit-content;
        min-width: max-content;
        margin: 0 auto;
        white-space: nowrap;
    }

    #headerAreaTop #menuPart .action ul,
    #headerArea #menuPart .action ul {
        display: inline-block;
        float: none;
        padding: 0;
        white-space: nowrap;
    }

    #headerAreaTop #menuPart .action li,
    #headerArea #menuPart .action li {
        display: inline-block;
        float: none;
        margin: 0 8px;
        vertical-align: top;
    }

    /* 一般会員メニューはログアウト以外を1行中央寄せ */
    #headerAreaTop #headerPart,
    #headerArea #headerPart {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #headerAreaTop .menu,
    #headerArea .menu {
        display: block;
        float: none;
        width: fit-content;
        min-width: max-content;
        margin: 8px auto 0 auto;
        padding: 0;
        white-space: nowrap;
        text-align: center;
    }

    #headerAreaTop .menu ul,
    #headerArea .menu ul {
        display: inline-block;
        float: none;
        padding: 5px 0;
        white-space: nowrap;
    }

    #headerAreaTop .menu li,
    #headerArea .menu li {
        display: inline-block;
        float: none;
        margin: 0 8px;
        vertical-align: top;
    }


}