@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.fmload-loader-wrap {
	position:relative; display: block;
}

.fmload-loader-load {
	width:100%; height:100%; background: rgba(0,0,0, 0.35); position:absolute; top:0; left:0;
}

.fmload-loader-load div {
	width: 44px; height: 44px; padding: 2px; border-radius: 50%; background-color: #000; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
}

.fmload-loader-load svg path,
.fmload-loader-load svg rect{
	fill: #ff9900;
}

/*~~*/

.form-wrap {
	margin-top: 10px;
}

.form-wrap p.ng {
	margin: 10px 0; border-radius: 5px; background: #cc0000; font-size: 14px; line-height: 30px; color: #FFF; text-align: center;
}

.form-wrap p.ok {
	margin: 10px 0; border-radius: 5px; background: #3366cc; font-size: 14px; line-height: 30px; color: #FFF; text-align: center;
}

.form-wrap p.ng a,
.form-wrap p.ok a {
	width: 100%;  font-size: 14px; line-height: 30px; color: #FFF; text-align: center; display:block;
}

.form-wrap p.ng a:hover,
.form-wrap p.ok a:hover {
	border-radius: 5px; background: rgba(0,0,0,0.5);
}

.form-wrap .regist + .update {
	margin-top: 15px; padding-top: 15px; border-top: 1px dotted #CCC;
}

.form-wrap .regist form,
.form-wrap .update form {
	margin-top: 15px; padding: 10px; border: 1px solid #CCC; border-radius: 5px; background: rgba(252,252,252,0.75);
}

.form-wrap .regist form:nth-of-type(1),
.form-wrap .update form:nth-of-type(1) {
	margin-top: 0;
}

/*~~*/

.form-load {
	margin-bottom: 10px; text-align: right;
}

.form-load a {
	height: 28px; padding: 0 10px; background: #333; font-size: 12px; line-height: 24px; text-align: center; color: #FFF; border: 2px solid #FFF; border-radius: 28px; cursor:pointer; display: inline-block;
}

.form-name {
	margin-bottom: 5px; padding: 5px 10px; border: 1px solid #CCC; border-radius: 5px; background: rgba(0,0,0, 0.85);
}

.form-name > * {
	font-size: 14px; font-weight: bold; line-height: 16px; text-align: center; color: #FFF;
}

.form-cmnt {
	margin-bottom: 5px; padding: 10px; border: 1px solid #CCC; border-radius: 5px; background: rgba(252,252,252,0.75);
}

.form-cmnt > *{
	padding: 5px; border-radius: 5px; background: rgba(0,0,0, 0.8); font-size: 12px; line-height: 16px; color: #FFF;
}

/*~~*/

.form-body form .title {
	margin-bottom: 10px; padding: 5px; border-radius: 5px; background: rgba(0,0,0, 0.8); font-size: 14px; color: #FFF; text-align: center;
}

.form-body form dl.line {
	width: 100%; margin-bottom: 10px; display: flex;
}

.form-body form dl.split {
	padding-bottom: 10px; border-bottom: 1px solid #333;
}

.form-body form dl.line dt {
	width: 30%; padding: 5px; border-radius: 5px; background: rgba(0,0,0, 0.6); font-size: 12px; line-height: 16px; color: #FFF; display: flex; align-items: center;
}

.form-body form dl.line dt.error {
	background: rgba(204,0,0,1);
}

.form-body form dl.line dt.hissu:after {
	content: "必";
	margin-left: 3px;
	padding: 3px 5px;
	font-size: 10px;
	line-height: 100%;
	color: #333;
	background-color: #CCCCCC;
	border-radius: 3px;
}

.form-body form dl.line dt img {
	width: 100%; margin-top: 5px; border: 1px solid #FFF; border-radius: 5px;
}

.form-body form dl.line dt span {
	width: 100%; margin-top: 5px; padding: 5px; border: 1px solid #FFF; border-radius: 5px; text-align: center; display: block;
}

.form-body form dl.line dt a {
	font-size: 12px; line-height: 16px; color: #FFF;
}

.form-body form dl.line dd {
	width: 70%; padding-left: 1%; display: flex; flex-wrap: wrap; align-items: center;
}

.form-body form .comment {
	margin-top: 5px;
	font-size: 12px; line-height: 16px;
}

/*~~*/

.form-body form input[type="text"],
.form-body form input[type="password"] {
	width: 100%; height:  30px; padding: 0 5px; border: 1px solid rgba(0,0,0, 0.6); border-radius: 5px; font-size: 14px; line-height: 20px;
}

.form-body form input[type="radio"],
.form-body form input[type="checkbox"] {
	vertical-align: middle; padding: 0 5px;
}

.form-body form input[type="radio"] + span,
.form-body form input[type="checkbox"] + span {
	margin-left: 5px;
}

.form-body form textarea {
	width: 100%; height: 100px; padding: 0 5px; border: 1px solid rgba(0,0,0, 0.6); border-radius: 5px; font-size: 14px; line-height: 20px;
}

.form-body form select {
	width: 100%; height:  30px; border: 1px solid rgba(0,0,0, 0.6); border-radius: 5px; font-size: 14px; text-indent: 3px; color: #000;
	padding: 5px 25px 5px 5px; vertical-align: middle;
	appearance: button; -webkit-appearance: button; -moz-appearance: button;
	background: #FFF url(img/fm_icon_select_black.png) no-repeat; background-size: 20px 20px; background-position: right center; cursor:pointer;
}
@-moz-document url-prefix() { /* for firefox */
	.form-body form select { background: none;
	}
}
.form-body form select::-ms-expand {
	display: none;
}

/*~~*/

.form-body form input[type="file"] {
	width: 100%; height: auto; margin-bottom: 5px; padding-bottom: 5px; border: none; border-bottom: 1px dotted #CCC; border-radius: 0; font-size: 12px; line-height: 20px;
}

/*~~*/

.form-body form .btn {
	margin-top: 10px; padding-top: 10px; border-top: 1px solid #7d7d7d; text-align: center;
}

.form-body form .btn select {
	width: 100%; height:  30px; border: 1px solid rgba(0,0,0, 0.6); border-radius: 5px; font-size: 14px; text-indent: 3px; color: #FFF;
	margin-bottom: 10px; padding: 5px 25px 5px 5px; vertical-align: middle;
	appearance: button; -webkit-appearance: button; -moz-appearance: button;
	background: #000 url(img/fm_icon_select_white.png) no-repeat; background-size: 20px 20px; background-position: right center; cursor:pointer;
}
@-moz-document url-prefix() { /* for firefox */
	.form-body form .btn select { background: none;
	}
}
.form-body form .btn select::-ms-expand {
	display: none;
}

.form-body form button {
	width: 100%; height: 30px; border:solid 2px #666; border-radius: 5px; font-size: 14px; line-height: 16px; cursor:pointer;
	/**/
	background: linear-gradient(to bottom, #FFF, #CCC);
	/* Android */
	background: -moz-linear-gradient(top, #FFF, #CCC);
}

/*~~*/

.form-body form dl.mnge dt {
	width: 100%; height: 30px; position:relative;
}

.form-body form dl.mnge dt a {
	width: 100%; height: 100%; padding: 0 5px; border-radius: 5px; background: #CCC; font-size: 12px; line-height: 30px; color: #000; position:absolute;
}

.form-body form dl.mnge dt a:hover {
	background: #999;
}

.form-body form dl.mnge select {
	appearance: button; -webkit-appearance: button; -moz-appearance: button;
	width: 100%; height: 30px; margin-top: 10px; padding: 5px 25px 5px 5px; vertical-align: middle; font-size: 14px; text-indent: 3px; color: #FFF;
	border: 1px solid #000; background: #000 url(img/fm_icon_select.png) no-repeat; background-size: 20px 20px; background-position: right center; cursor:pointer;
}
@-moz-document url-prefix() { /* for firefox */
	.form-body form dl.mnge select { background: none;
	}
}
.form-body form dl.mnge select::-ms-expand {
	display: none;
}

.form-body form dl.mnge button {
	width: 100%; height: 30px; margin-top: 10px; border:solid 2px #666; border-radius: 5px; font-size: 14px; line-height: 28px; cursor:pointer;
	/**/
	background: linear-gradient(to bottom, #FFF, #CCC);
	/* Android */
	background: -moz-linear-gradient(top, #FFF, #CCC);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*ＴＹＰＥ　ＢＯＡＲＤ*/

.type-board .form-sort {
	margin-bottom: 15px;
}

.type-board .form-sort form {
	margin-top: 15px; padding: 10px; border: 1px solid #CCC; border-radius: 5px; background: rgba(252,252,252,0.75);
}

/*ＴＹＰＥ　ＣＡＬＥＮＤＡＲ*/

.type-calendar .form-sort {
	margin: 15px 0; padding: 10px 7.5px; border: 1px solid #CCC; border-radius: 5px; background: rgba(252,252,252,0.75); text-align: center;
}

.type-calendar .form-sort .head a {
	font-size: 18px; letter-spacing: 10px;
}

.type-calendar .form-sort .weeks {
	margin-top: 7.5px; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;
}

.type-calendar .form-sort .weeks li {
	width: -webkit-calc((100% - 35px) / 7); width: calc((100% - 35px) / 7); margin: 2.5px; padding: 3px 0; border: 1px solid #CCC; border-radius: 5px; background: #666; color: #FFF;
}

.type-calendar .form-sort .weeks li.sat {
	background: #3366cc;
}

.type-calendar .form-sort .weeks li.sun {
	background: #cc3333;
}

.type-calendar .form-sort .dates {
	display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;
}

.type-calendar .form-sort .dates li {
	width: -webkit-calc((100% - 35px) / 7); width: calc((100% - 35px) / 7); margin: 2.5px; padding: 10px 0; border: 1px solid #CCC; border-radius: 5px; position: relative;
}

.type-calendar .form-sort .dates li.today {
	background: #ffcc66;
}

.type-calendar .form-sort .dates li.select {
	background: #999;
}

.type-calendar .form-sort .dates li p.week {
	display: none;
}

.type-calendar .form-sort .dates li a {
	width: 100%; height: 100%; border-radius: 5px; top: 0; left: 0; position: absolute;
}

.type-calendar .form-sort .dates li a:hover {
	background: rgba(0,0,0,0.5);
}

.type-calendar .form-sort .dates li.back-month *,
.type-calendar .form-sort .dates li.next-month * {
	color: #CCC;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*編集・投稿ボタン*/

.edt-fmload-wrap,
.wrt-fmload-wrap {
	margin-top: 15px; text-align: center;
}

.edt-fmload {
	width: 100%; padding: 3px; background: rgba(255,255,255,0.3); border-radius: 30px;
}

.wrt-fmload {
	width: 100%; padding: 3px; background: rgba(255,255,255,0.3); border-radius: 30px;
}

.edt-fmload a,
.wrt-fmload a {
	width: 100%; height: 30px; background: #333; font-size: 12px; line-height: 30px; text-align: center; color: #FFF; border-radius: 30px; cursor:pointer; display: block;
}

.edt-fmload .btn-select,
.wrt-fmload .btn-select {
	width: 100%; height: 30px; background: #333; border-radius: 30px; cursor: pointer; position: relative;
}

.edt-fmload .btn-select .label,
.wrt-fmload .btn-select .label {
	width: 100%; font-size: 12px; line-height: 30px; color: #fff; position: absolute; z-index: 1;
}

.edt-fmload .btn-select select,
.wrt-fmload .btn-select select {
	width: 100%; padding: 20px; border: none; display: block; cursor: pointer; opacity: 0; position: relative; z-index: 2;
	/*-webkit-appearance: none;*/ -moz-appearance: none; appearance: none;
}
.edt-fmload .btn-select select::-ms-expand,
.wrt-fmload .btn-select select::-ms-expand {
	display: none;
}
.edt-fmload .btn-select select:focus,
.wrt-fmload .btn-select select:focus {
	z-index: -1; opacity: 1;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 769px) {
/****************************************************************************************************************************************************************/

.form-load a {
	padding: 0 20px;
}

/*~~*/

.form-body form dl.line dt {
	width: 17%; padding: 5px 10px;
}

.form-body form dl.line dt img {
	margin-bottom: 5px;
}

.form-body form dl.line dt span {
	margin-bottom: 5px;
}

.form-body form dl.line dd {
	width: 83%; padding-left: 10px;
}

.form-body form .btn select {
	width: 180px; margin: 0 10px 0 0; display: inline-block;
}

.form-body form .btn button {
	width: 260px; display: inline-block;
}

/*~~*/

.form-body form dl.mnge dt {
	width: calc(100% - 310px); width: -webkit-calc(100% - 310px); margin-right: 10px; display: inline-block;
}

.form-body form dl.mnge dd {
	width: 300px; display: inline-block;
}

.form-body form dl.mnge select {
	width: 150px; margin-top: 0; display: inline-block;
}

.form-body form dl.mnge button {
	width: 145px; margin-top: 0; margin-left: 5px; display: inline-block;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*ＴＹＰＥ　ＢＯＡＲＤ*/

.type-board .form-sort form {
	text-align: center;
}

.type-board .form-sort select {
	width: 50%;
}

/*~~*/

/*ＴＹＰＥ　ＣＡＬＥＮＤＡＲ*/

.type-calendar .form-sort .weeks {
	display: none;
}

.type-calendar .form-sort .dates {
	margin-top: 7.5px; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
}

.type-calendar .form-sort .dates li p.week {
	display: block;
}

.type-calendar .form-sort .dates li p.sat {
	color: #3366cc;
}

.type-calendar .form-sort .dates li p.sun {
	color: #cc3333;
}

.type-calendar .form-sort .dates li p + p {
	margin-top: 5px; 
}

.type-calendar .form-sort .dates li.back-month,
.type-calendar .form-sort .dates li.next-month {
	display: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*編集・投稿ボタン*/

.edt-fmload,
.wrt-fmload {
	width: 300px; display: inline-block;
}

.edt-fmload .btn-select,
.wrt-fmload .btn-select {
	width: 300px; margin: 0 auto;
}

/****************************************************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/