@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background: #fff;
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}

/*==================================================
ヘッダー
===================================*/
#header {
	width: 750px;
	margin: 0 auto;
	text-align: center;
	height: 80px;
}

/* ヘッダーロゴ
------------------------------------------------------------*/
#header .logo {
	margin-top: 20px;
	width: auto;
	height: 50px;
}

/* ナビメニュー
------------------------------------------------------------*/
#header #navi {
	margin-top: 10px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	list-style: none;
	justify-content: center
}

#header #navi li {
	margin: 0 15px;
	line-height: 100%;
}

#header #navi li a {
	font-weight: normal;
	color: #2e3192;
	text-decoration: none;
}


/*==================================================
データベース
===================================*/
/* データベースアウトライン
------------------------------------------------------------*/
#db_room {
	width: 750px;
	margin: 30px auto 80px;
}

/* データベース共通
------------------------------------------------------------*/
.text-right {
	text-align: right;
}
	
.text-center {
	text-align: center;
}
	
.text-left {
	text-align: left;
}

#db_room {
	width: 750px;
	margin: 30px auto 80px;
}

/* データベース名称
------------------------------------------------------------*/
#db_room h1 {
	padding: 3px 0 1px 6px;
	line-height: 1.5em;
	color: #fff;
	background: #2e3192;
}

/* ページタイトル
------------------------------------------------------------*/
#db_room h2 {
	padding: 5px 0 3px 5px;
	font-size: 15px;
	line-height: 1em;
}


/* データベースフォーム
------------------------------------------------------------*/
#db-form {
	width: 450px;
	margin: 50px 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;
}


/* データインプット
------------------------------------------------------------*/
.form-input {
	margin: 10px auto 10px;
}

.form-input .required {
	color:red;
	font-size: 12px;
}

.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: 100px;
}

.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: 12px 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: 12px 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%;
}


.parent {
	display:flex;
	justify-content:space-between;
}

.last-name {
	width: 49%;
	text-align: left;
}

.first-name {
	width: 49%;
	text-align: left;
}

.birthyy {
	width: 46%;
}

.birthmm {
	width: 25%;
}

.birthdd {
	width: 25%;
}

.license {
	width: 28%;
}

.license-name {
	width: 70%;
}

.field-half {
	width: 50%;
}

.field-49 {
	width: 49%;
}

.field-46 {
	width: 46%;
}

.field-40 {
	width: 40%;
}

.field-28 {
	width: 28%;
}

.field-23 {
	width: 23%;
}

.field-25 {
	width: 25%;
}

.field-15 {
	width: 10%;
}




/* 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;
}

/* 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.06rem;
	left: 0.078rem;
	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;
}


/* SubmitButton（登録・プレービュー・リセット）
------------------------------------------------------------*/
.btn-submit .registration {
	margin: 0 auto;
	text-align: center;
}

.btn-submit .registration .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 10px 20px 10px;
	cursor: pointer;
	overflow: hidden;
 	border-radius: 3px;
}

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

.btn-submit .registration .btn span {
	font-size: 0.9em;
	color: #ffffff;
	position: relative;
	z-index: 1;
}
.btn-submit .registration .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;
}
.btn-submit .registration .btn:hover {
	color: #fd0107;
}
.btn-submit .registration .btn:focus {
	outline: none;
}

/* SUBMITボタン１（チョイスボタン）
------------------------------------------------------------*/
.btn-submit .choice {
	margin: 0 auto;
	width: 100%;
	position: relative;
	background: currentColor;
	border: 1px solid currentColor;
	font-size: 14px;
	font-weight: normal;
	padding: 12px 8px;
	color: #00cae2;
	margin: 0 0 20px 0;
	border-radius: 3px;
}

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

.btn-submit .choice span {
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	position: relative;
}

.btn-submit .choice:hover {
	color: #9676fe;
}

.btn-submit .choice:focus {
	outline: none;
}

/* 入力データ確認
------------------------------------------------------------*/
.preview {
	width: 450px;
	margin: 10px auto 0;
}

.preview table {
	width: 100%;
	margin-top: 15px;
	padding-left: 15px;
	border-collapse: collapse;
}

.preview th,.preview td {
	font-size: 13px;
	font-weight: normal;
	line-height: 1.5em;
	border: solid 1px #ccc;
}

.preview th {
	width: 30%;
	padding: 10px 15px;
	text-align-last: justify;
	background-color: #eee;
	border-right: none;
}

.preview td {
	padding: 10px 10px;
}

.preview p {
	margin: 20px 0;
}

/* ユーザールーム
------------------------------------------------------------*/
#user-room {
	width: 600px;
	margin: 50px auto;
	font-size: 12px;
}

.user-room-menu {
	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;
	padding: 3px 0;
	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;
}

/* データリスト　データヒット件数
------------------------------------------------------------*/
#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;
}

/* データリスト　一覧
------------------------------------------------------------*/
#db_room .data-list table {
	width: 100%;
}

#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 3px;
	font-size: 0.9em;
	line-height: 1.0em;
}

.list-title {
	max-width: 300px; /* 最大幅を設定 */
	white-space: nowrap; /* テキストを折り返さない */
	overflow: hidden; /* はみ出たテキストを隠す */
	text-overflow: ellipsis; /* はみ出た部分に省略記号を表示 */
}



/* ページコントロール
------------------------------------------------------------*/
.page-control {
	margin-right: 10px;
	text-align: right;
}

/* ユーザー詳細
------------------------------------------------------------*/
#user {
	width: 740px;
	max-width: 750px;
	margin: 30px auto 0;
 }

#user .flexbox {
	display: flex;
 }

#user .box1 {
	width: 300px;
	margin: 0 auto;
}

#user .box1 img {
	width: 100%;
	height: 360px;
 	object-fit: cover; /* この一行を追加するだけ！ */
}

#user .box2 {
	width: 420px;
	margin-left: 20px;
}

#user .box2 h3 {
	margin: 0;
	font-weight: normal;
	font-size: 23px;
	line-height: 1.5em;
}

#user .box2 h4 {
	margin: 0;
	font-weight: normal;
	line-height: 1.0em;
}

#user .box2 table {
	width: 100%;
	margin-top: 15px;
	padding-left: 15px;
	border-collapse: collapse;
}

#user .box2 th,#user .box2 td {
	font-size: 13px;
	font-weight: normal;
	line-height: 2.0em;
	border: solid 1px #ccc;
}

#user .box2 th {
	width: 120px;
	text-align: center;
	background-color: #eee;
	border-right: none;
}

#user .box2 td {
	padding-left: 10px;
}

#user section h5{
	width: 60%;
	margin: 40px auto 20px;
	font-size: 22px;
	font-weight:normal;
	text-align: center;
	background: url(../images/borderBlack.png) repeat-x 0 50%;
	background-size: 1px 1px;
}

#user section h5 span {
	background: #fff;
	padding: 0 80px;
}

#user .user-license {
	margin-top: 10px;
	margin-bottom: 10px;
}

#user .user-license h3 {
	margin: 0;
	font-weight: normal;
	line-height: 1.0em;
}

#user .user-license table {
	width: 100%;
	padding: 0;
	border-collapse: separate;
 	empty-cells: hide;
}

#user .user-license th,#user .user-license td {
	font-size: 13px;
	font-weight: normal;
	border: solid 1px #ccc;
	padding: 0px 5px;
	line-height: 2.0em;
}

#user .user-license th {
	text-align: center;
	background-color: #eee;
}

#user .user-license td {
	border-top: none;
}

#user .license-day {
	width: 110px;
}

#user th.license-day, #user td.license-day {
	border-right: none;
}





/* RESPONSIVE 設定
------------------------------------------------------------*/
@media only screen and (max-width: 850px) {
	/*==================================================
	共通
	===================================*/
	/* ヘッダー
	------------------------------------------------------------*/
	#header {
		width: 100%;
	}

	/* ヘッダーロゴ
	------------------------------------------------------------*/
	#header .logo {
		margin-top: 12px;
	}

	/*ハンバーガーメニュー
	------------------------------------------------------------*/
	#header #navi {
		transition: all 0.6s;
		overflow-y: auto;
		padding-top: 40px;
		width: 300px;
		height: 100vh;
		z-index: 200;
		top: 40px;
		right: -340px;
		background-color: #fff;
		position: fixed;
		flex-direction: column;
		align-items: baseline;
		justify-content: start;
	}

	#header #navi li {
		padding: 15px;
	}

	#header .nav_btn {
		width: 44px;
		height: 44px;
		z-index: 300;
		top: 15px;
		right: 10px;
		cursor: pointer;
		position: absolute;
	}

	.hamburger_line {
		transition: all 0.6s;
		width: 34px;
		height: 3px;
		left: 5px;
		background-color: #2e3192;
 		position: absolute;
	}

	.hamburger_line1 {
		top: 10px;
	}

	.hamburger_line2 {
		top: 21px;
	}

	.hamburger_line3 {
		top: 32px;
	}

	.nav_bg {
		opacity: 0;
		transition: all 0.6s;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		top: 0;
		left: 0;
		visibility: hidden;
		background-color: #000;
		cursor: pointer;
		position: fixed;
	}

	/* ハンバーガーメニュー展開時
	------------------------------------------------------------*/
	#header #navi li a {
		color: #fff;
	}

	.nav_open #header #navi {
		right: 0;
		top: 50px;
		background-color: #2e3192;
	}

	.nav_open .nav_bg {
		opacity: 0.8;
		visibility: visible;
	}

	.nav_open .hamburger_line1 {
		transform: rotate(45deg);
		top: 20px;
	}

	.nav_open .hamburger_line2 {
		width: 0;
		left: 50%;
	}

	.nav_open .hamburger_line3 {
		transform: rotate(-45deg);
		top: 20px;


	/* データリスト アウトライン
	------------------------------------------------------------*/
	}
	#db_room {
		width: 100%;
		margin-top: 0;
	}

	#db-form {
    		width: 90%;
	}

}

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

@media only screen and (max-width: 799px){
	/* データリスト 一覧
	------------------------------------------------------------*/
	#db_room .data-list {
  		overflow-x: scroll;
	}

	#db_room .data-list table {
		width: 98%;
		min-width: 640px;
	}

	.list-title {
		max-width: 200px; /* 最大幅を設定 */
	}

	#db_room .data-list {
		width: 98%;
		margin: 0 auto;
	}

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

	/* ユーザー詳細
	------------------------------------------------------------*/
	#user {
		width: 98%;
		margin: 0 auto;
		padding-top: 50px;
	}

	#user section h5{
		margin: 50px auto 20px;
	}

	#user section h5 span {
		padding: 0 30px;
	}



}

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

@media only screen and (max-width: 600px) {

	/* ユーザールーム
	------------------------------------------------------------*/
	#user-room {
		width: 90%;
	}

	.user-room-menu {
		margin: 0 auto;
		padding: 0;
		width: 90%;
		justify-content: center;
	}

	.user-room-menu .item {
		margin: 0 0 30px;
		width: 420px;
	}

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

	.user-room-menu .butt-user-menu a {
		padding: 10px 8px;
	}

	/* ユーザー詳細
	------------------------------------------------------------*/
	#user {
		width: 100%;
	}

	#user .flexbox {
		display: block;
	}

	#user .flexbox .box1 {
		width: 100%;
		background-color: #fff;
	}

	#user .box1 img {
		display: block;
		margin: auto;
		width: 95%;
		height: auto;
	}

	#user .flexbox .box2 {
		width: 95%;
		margin: 15px auto 0;
	}

	#user h3,h4 {
		text-align: center;
	}

	#user section {
		width: 95%;
		margin: 0 auto;
	}



}