/* 共通
------------------------------------------------------------*/
#db_room {
	position: relative;
	width: 750px;
	margin: 0px auto;
	font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#db_room h1 {
	padding: 3px 0 1px 6px;
	line-height: 1.5em;
	color: #fff;
	background: #6c3000;         /* ページタイトル */
}

#db_room h2 {
	padding: 5px 0 3px 5px;
	font-size: 15px;
	line-height: 1em;         /* データベース名称 */
}

#db-form {
    width: 450px;
    margin: 20px auto 0;
}

	

/* データ入力
------------------------------------------------------------*/
#db-form h3 {
	width: 100%;
	margin: 0 auto;
	font-size: 15px;
	font-weight:normal;
	text-align: center;
	background: url(../images/borderBlack.png) repeat-x 0 50%;
	background-size: 1px 1px;         /* configタイトル */
}

#db-form h3 span {
	background: #fff;
	padding: 0 20px;
}

#db-form h5 {
	border:1px solid #BEBEBE;
	padding: 6px 8px;
	margin:0px;
	outline: none;	
	border-radius: 3px;
	font-weight: normal;
	background-color: #e5f9fe;
}


.form-input {
	margin: 10px auto 10px;
	max-width: 500px;
	padding: 20px 12px 10px 20px;
}

.form-input li {
	padding: 0;
	display: block;
	list-style: none;
	margin: 10px 0 0 0;
}
.form-input label{
	margin:0 0 3px 0;
	padding:0px;
	display:block;
	font-weight: nomal;
}

.form-input textarea {
	height: 80px;
}

.form-input select {
	font-size: 1em;
}

.form-input input, 
.form-input textarea {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border:1px solid #BEBEBE;
	padding: 8px;
	margin:0px;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;	
	border-radius: 3px;
}

.form-input select {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border:1px solid #BEBEBE;
	padding: 8px 8px 9px 8px;
	margin: 0;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;	
	border-radius: 3px;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	color: #666;
}



.form-input input:focus, 
.form-input textarea:focus, 
.form-input select:focus {
	-moz-box-shadow: 0 0 8px #fd0107;
	-webkit-box-shadow: 0 0 1px #fd0107;
	box-shadow: 0 0 1px #fd0107;
	border: 1px solid #fd0107;
}

.form-input .field-long {
	width: 100%;
}

.form-input .field-71 {
	width: 71%;
}

.form-input .field-49 {
	width: 49%;         /* 姓名　セイメイ */
}

.form-input .field-46 {
	width: 46%;
}

.form-input .field-42 {
	width: 42%;
}

.form-input .field-year {
	width: 36%;
}

.form-input .field-zairyou {
	width: 60%;
}

.form-input .field-bunryou {
	width: 38%;
}

.form-input .field-35 {
	width: 35%;
}


.form-input .field-month,
.form-input .field-day {
	width: 31%;
}

.form-input .field-28 {
	width: 28%;
}

.form-input .field-23 {
	width: 23%;
}

.form-input .field-20 {
	width: 20%;
	text-align: right;
}

.form-input .field-15 {
	width: 15%;
	text-align: right;
}

.form-input .required {
	color:red;
}





/* CHECKBOX
------------------------------------------------------------*/
.form-input input[type=checkbox] {
	display: none;
}
.form-input .checkbox01 {
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	padding: 5px 10px 5px 30px;
	position: relative;
	width: auto;
}
.form-input .checkbox01::before {
	background: #fff;
	border: 1px solid #231815;
	content: '';
	display: block;
	height: 16px;
	left: 5px;
	margin-top: -9px;
	position: absolute;
	top: 50%;
	width: 16px;
}
.form-input .checkbox01::after {
	border-right: 3px solid #ed7a9c;
	border-bottom: 3px solid #ed7a9c;
	content: '';
	display: block;
	height: 9px;
	left: 10px;
	margin-top: -7px;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
	width: 5px;
}

.form-input input[type=checkbox]:checked + .checkbox01::after {
	opacity: 1;
}

/* エンタメジャンルCHECKBOX
------------------------------------------------------------*/
.form-input .checkbox02 {
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	padding: 5px 10px 5px 30px;
	position: relative;
	width: auto;
	font-size: 12px;
}
.form-input .checkbox02::before {
	background: #fff;
	border: 1px solid #231815;
	content: '';
	display: block;
	height: 16px;
	left: 5px;
	margin-top: -9px;
	position: absolute;
	top: 50%;
	width: 16px;
}
.form-input .checkbox02::after {
	border-right: 3px solid #ed7a9c;
	border-bottom: 3px solid #ed7a9c;
	content: '';
	display: block;
	height: 9px;
	left: 10px;
	margin-top: -7px;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
	width: 5px;
}

.form-input input[type=checkbox]:checked + .checkbox02::after {
	opacity: 1;
}





/* RADIOBUTTON
------------------------------------------------------------*/
.radio-button {
	width: 100%;
	margin: 10px auto 0;
	text-align: left;
}

.radio-button .option-input {
	position: relative;
	margin: 0 10px 0 0;
	cursor: pointer;
}

.radio-button .option-input:before {
	position: absolute;
	z-index: 1;
	top: -0.05rem;
	left: 0.0625rem;
	width: 0.75rem;
	height: 0.75rem;
	content: '';
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	        transition:         transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: scale(0, 0);
	        transform: scale(0, 0);
	border-radius: 50%;
	background: #f60415;
}

.radio-button .option-input:checked:before {
	-webkit-transform: scale(1, 1);
	        transform: scale(1, 1);
}

.radio-button .option-input:after {
	position: absolute;
	top: -0.23rem;
	left: -0.11rem;
	width: 1rem;
	height: 1rem;
	content: '';
	border: 1px solid #757575;
	border-radius: 50%;
	background: #ffffff;
}


/* File Input
------------------------------------------------------------*/
.file-uprood {
	position: relative;
}

.file-uprood .button {
	font-size: 1em;
	padding: 0.4rem 1.2em 0.2em 1.2em;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0px;
	cursor: pointer;
	-webkit-transition: background-color 0.25s;
	transition: background-color 0.25s;
	color: #ffffff;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	background-color: #999999;
}

.file-uprood .file_input {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-appearance: none;
	appearance: none;
}
.file-uprood .file_text {
	color: #bbbbbb;
	line-height: 1.5em;
	font-size: 15px;
	position: relative;
	box-sizing: border-box;
	padding: 10px 10px 1px 10px ;
	-webkit-transition: border-color 0.6s;
	transition: border-color 0.6s;
	border-bottom: 1px solid #757575;
	outline: none;
}
.file-uprood .file_text::before {
	content: '';
	height: 1px;
	width: 0;
	left: 50%;
	bottom: -1px;
	position: absolute;
	background: #fd0107;
	-webkit-transition: left 0.28s ease, width 0.28s ease;
	transition: left 0.28s ease, width 0.28s ease;
	z-index: 2;
}
.file-uprood .file_input:hover ~ .file_text::before {
	width: 100%;
	left: 0;
}
.file-uprood label:hover .button {
	background-color: #fd0107;
}
.file-uprood label:active .button {
	background-color: #b02f2f;
}




/* SUBMITボタン
------------------------------------------------------------*/
.submit-button .btn01 {
	margin: 0 auto;
	height: 35px;
	width: 100%;
	position: relative;
	background: currentColor;
	border: 1px solid currentColor;
	font-size: 14px;
	font-weight: normal;
	padding: 5px 0px 4px;
	color: #00cae2;
	margin: 0 0 20px 0;
	border-radius: 3px;
}

.submit-button .btn01 a {
	text-decoration: none;
}

.submit-button .btn01 span {
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	position: relative;
	z-index: 1;
}

.submit-button .btn01:hover {
	color: #9676fe;
}

.submit-button .btn01:focus {
	outline: none;
}

/* SubmitButton
------------------------------------------------------------*/
.submit-button .btn_cont {
	margin: 0 auto;
	text-align: center;
}

.submit-button .btn {
	height: 30px;
	width: 100px;
	position: relative;
	background: currentColor;
	border: 1px solid currentColor;
	font-size: 14px;
	font-weight: normal;
	padding: 5px 0px 4px;
	color: #999999;
	margin: 0 0 20px 0;
	cursor: pointer;
	overflow: hidden;
 	border-radius: 3px;
}

.submit-button .btn a {
	text-decoration: none;
}

.submit-button .btn span {
	font-size: 0.9em;
	color: #ffffff;
	position: relative;
	z-index: 1;
}
.submit-button .btn::before {
	content: '';
	position: absolute;
	background: #071017;
	border: 50vh solid #1d4567;
	width: 30vh;
	height: 30vh;
	border-radius: 50%;
	display: block;
	top: 50%;
	left: 50%;
	z-index: 0;
	opacity: 1;
}
.submit-button .btn:hover {
	color: #fd0107;
}
.submit-button .btn:focus {
	outline: none;
}


/* データリスト 設定
------------------------------------------------------------*/
#db_room .data-hit {
	width: 100%;
	margin: 5px auto 0;
	padding: 0 0 0 3px;
}

#db_room .data-hit ul {
	margin: 0;
}

#db_room .data-hit li {
	padding: 0 0 0 3px;
	line-height: 1.5em;
}

#db_room .data-hit .required {
	color:red;
	font-size: 1.2em;
	font-weight: bold;
}

#db_room .data-list-sort {
	margin: 0 0 3px 6px;
}

#db_room .data-list-sort em {
	font-weight: normal;
}

.data-list {
  	overflow-x: scroll;
}

.data-list::-webkit-scrollbar {
 	display:none;
}

#db_room .data-list table {
	margin: 0px auto;
	width: 98%;
	min-width: 640px;
	border-collapse: collapse;     /* セルの線を重ねる */
	white-space: nowrap;
}

#db_room .data-list th, #db_room .data-list td {
	border: solid 1px #b7b7b7;              /* 枠線指定 */
	
}

#db_room .data-list th {
	padding: 2px 5px;
	text-align: center;
	font-weight: normal;
	font-size: 0.8em;
	line-height: 1.1em;

}

#db_room .data-list td {
	padding: 8px 5px;
	font-size: 0.9em;
	line-height: 1.0em;
}

.page-control {
	text-align: center;
}



.bott-edit {
	text-align: center;
}


.text-right {
	text-align: right;
}
	
.text-center {
	text-align: center;
}
	
.text-left {
	text-align: left;
}
	

/* プレビュー
------------------------------------------------------------*/
#data-preview_01 table {
	width: 100%;
	padding: 0;
	border-collapse: separate;
 	empty-cells: hide;
}

#data-preview_01 th,td {
	font-size: 14px;
	font-weight: normal;
	padding: 0px 5px;
	line-height: 1.8em;
}

#data-preview_01 th {
	width: 70px;
	text-align: left;
	font-weight: normal;
	text-align-last: justify;
	vertical-align: top;
}

#data-preview_01 td {
	padding-left: 20px;
	vertical-align: top;
}

#data-preview_01 .required {
	color: red;
}

#data-preview_03 .required {
	color: red;
}

#data-preview_02 table {
	width: 100%;
	padding: 0;
	border-collapse: separate;
 	empty-cells: hide;
}

#data-preview_02 th,td {
	font-size: 14px;
	font-weight: normal;
	padding: 0px 5px;
	line-height: 1.8em;
}

#data-preview_02 th {
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}

#data-preview_02 td {
	text-align: right;
	vertical-align:top;
}

#data-preview_03 table {
	width: 100%;
	padding: 0;
	border-collapse: separate;
 	empty-cells: hide;
}

#data-preview_03 th,td {
	font-size: 14px;
	font-weight: normal;
	padding: 0px 5px;
	line-height: 1.8em;
}

#data-preview_03 th {
	width: 15px;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}

#data-preview_03 td {
	text-align: left;
	vertical-align:top;
}





/* USER ROOM
------------------------------------------------------------*/
#user-room {
	width: 600px;
	margin: 50px auto;
}

.user-room-menu {
	width: 600px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.user-room-menu .item {
	margin: 0 0 30px;
	padding: 0px;
	width: 23%;
	background-color: #fff;
}

.user-room-menu .butt-user-menu a {
	border-radius: 3px;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
	max-width: 220px;
	padding: 0;
	font-size: 12px;
	color: #000;
	transition: 0.3s ease-in-out;
	font-weight: normal;
	background-color: #ffffff;
	border: 1px solid #BEBEBE;
	text-decoration: none;
}

.user-room-menu .butt-user-menu a:hover {
	background-color: #eeeeee;
}







/* RESPONSIVE 設定
------------------------------------------------------------*/
@media only screen and (min-width: 800px){
	#db-room h1 {
		width: 100%;
		margin: 0 auto;
		padding-top: 70px;
	}


}

@media only screen and (max-width: 799px){
	#db_room {
		width: 100%;
		margin: 0 auto;
		padding-top: 70px;
	}
	#db-form {
    		width: 90%;
    		margin: 30px auto 0;
	}

	/* データインプット
	------------------------------------------------------------*/
	.form-input select {
		padding: 7px 8px 7px 8px;
}

		.form-input .field-71 {
		width: 68%;
	}

	.form-input .field-46 {
		width: 45%;
	}

	.form-input .field-year {
		width: 37%;
	}

	.form-input .field-35 {
		width: 30%;
	}

	.form-input .field-month,
	.form-input .field-day {
		width: 30%;
	}

	.form-input .field-28 {
		width: 28%;
	}

	.form-input .field-20 {
		width: 17%;
	}

	.form-input .field-15 {
		width: 12%;
	}



	/* データリスト 設定
	------------------------------------------------------------*/
	#db_room .data-list {
		width: 98%;
		margin: 0 auto;
	}

	#db_room .data-list table {
		width: 100%;
	}


}

@media only screen and (min-width: 641px){
}



@media only screen and (max-width: 640px){
	/* ユーザールーム
	------------------------------------------------------------*/
	#user-room {
		width: 100%;
	}
	.user-room-menu {
		margin: 0 auto;
		padding: 0;
		width: 100%;
		justify-content: center;
	}
	.user-room-menu .item {
		margin: 0 0 30px;
		width: 90%;
	}

	.user-room-menu .item:not(:last-child) {
		margin-bottom: 30px;
	}

	.user-room-menu .butt-user-menu a {
		max-width: 90%;
		padding: 5px 0;

}