@charset "utf-8";
/* CSS Document */





/*****************************************************************************
 header
 *****************************************************************************/

header {
	height:85px;
	background:#54397e;
	color:#ffffff;
}
header .inner {
	width:900px;
	margin:0 auto;
	position: relative;
}
header h1 {
	position: absolute;
	top:17px;
	left:0;
	line-height: 1.2;
}
header h1 span {
	display: block;
}
header h1 .title01 {
}
header h1 .title02 {
	font-size: 1.8rem;
}
header .login_box {
	position: absolute;
	top:30px;
	right:0;

}
header .login_box ul {
	display: flex;
	align-items: center;
}
header .login_box li {
	padding-left:15px;
	line-height: 18px;
}
header .login_box li:nth-child(2) {
	border-left:1px solid rgba(255,255,255,0.3);
	margin-left:15px;
}
header .login_box a {
	display: block;
	color:#ffffff;
}
header .login_box input {
	-webkit-appearance: none;
	display:inline-block;
	vertical-align: middle;
	padding:0 15px;
	position:relative;
	text-decoration:none;
	border:none;
	transition:background 0.2s ease;
	cursor:pointer;
	font-weight: bold;
	border-radius: 6px;
	color:#54397e;
}

@media screen and (max-width: 1100px) {
	header {
		height:auto;
	}
	header .inner {
		width:auto;
		position: relative;
		padding:20px;
	}
	header h1 {
		position: relative;
		top: auto;
		left: auto;
	}
	header .login_box {
		position: relative;
		top: auto;
		right: auto;
		padding:15px 0 0;
	}
	header .login_box ul {
		justify-content: flex-end;
	}
	header .login_box ul {
		font-size: 0.85rem;
	}
}




/*****************************************************************************
footer
 *****************************************************************************/

footer {
	padding:20px;
	background:#54397e;
	color:#ffffff;
}
footer .inner {
	width:900px;
	margin:0 auto;
	position: relative;
	text-align: right;
}

@media screen and (max-width: 1100px) {
	footer .inner {
		width:auto;
		text-align: center;
	}
}


/*****************************************************************************
 login_panel
 *****************************************************************************/
.login_panel_wrapper {
	max-width: 70%;
	margin:0 auto;
}
.login_panel {
	border: 1px solid #dddddd;
	border-radius: 4px;
	padding: 20px 40px;
	align-items: center;

}

.login_panel li {
	padding: 10px 0;
}

@media screen and (max-width: 700px) {
	.login_panel_wrapper {
		max-width: 100%;
	}
	.login_panel {
		max-width: 100%;
	}
}









/*****************************************************************************
 startTable
 *****************************************************************************/

.startTable {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.startTable th,
.startTable td {
	border:1px solid #dcdddd;
	padding: 10px 10px;
	line-height: 1.3;
}
.startTable thead th,
.startTable tbody th {
	background:#efefef;
}
.startTable .col01 {
	width: 50px;
	text-align: center;
}
.startTable .col02 {
}
.startTable .col03 {
	width: 11rem;
}
.startTable .col04 {
	width: 11rem;
}

.startTable tbody tr:hover th,
.startTable tbody tr:hover td {
	background: #f5f5f5;
}


@media screen and (max-width: 700px) {
	.startTable .col02,
	.startTable .col03,
	.startTable .col04 {
		width: calc((100% - 50px)/3);
	}
}









/*****************************************************************************
 formTable
 *****************************************************************************/

.formTable {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.formTable th,
.formTable td {
	border:1px solid #dcdddd;
	padding: 10px 10px;
}
.formTable thead th,
.formTable tbody th {
	background:#efefef;
}
.formTable tbody td {
	width: 60%;
}



























.input_ss, .input_s, .input_m, .input_m2, .input_l, textarea, select {
	min-height: 2em;
	margin:0 5px 0 0;
}
.input_ss, .input_s, .input_m {
	-webkit-appearance: none;
	border-radius: 4px;
	border: 1px solid #dddddd;
}
.input_ss {
	width: 20%;
}
.input_s {
	width: 35%;
}
.input_m {
	width: 75%;
}
.input_l {
	width: 100%;
	border: 1px solid #dddddd;
}
input.input_l, textarea.input_l {
	-webkit-appearance: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
select {
	width:60%;
	-webkit-appearance: none;
	border-radius: 4px;
	border: 1px solid #dddddd;
	font-size:14px;
}

@media screen and (max-width: 850px) {
	.input_m {
		width: 100%;
	}
	select {
		width: 100%;
	}
}



.radioBtnBox {
	/*margin-left:-10px;*/
}
.radioBtnBox label {
	display: inline-block;
	padding:10px 30px 10px 34px;
	position: relative;
}
.radioBtnBox label:hover {
	background: #f5f5f5;
}
.radioBtnBox input {
	position: absolute;
	top:14px;
	left:10px;
}
.radioBtnBox label {
	display: block;
	border:1px solid #dcdddd;
	margin-top:-1px;
}
.radioBtnBox label.selected {
	background:#dddddd;
}


.required_mk {
	font-size: 1.4em;
	font-weight: 500;
	color:#ff7c19;
}








.error_msg {
	color: #e96656;
	border:1px solid #e96656;
	background:#fdf1f0;
	border-radius: 4px;
	padding:10px 10px 10px 25px;
	margin:10px 0 0 ;
	line-height:1.4;
	position: relative;
}
.error_msg .fa {
	position: absolute;
	top:12px;
	left: 10px;
}
.msg.top,
.error_msg.top {
	margin: 40px 0 0;
}



/*****************************************************************************
 btnBox
 *****************************************************************************/
.btn_box {
	padding:30px 0 0;
	text-align: center;
	width:70%;
	margin:0 auto;
}
.btn_box.flex {
	display: flex;
	justify-content: center;
}
.btn_box.flex > * {
	margin: 0 10px;
}



.btn_box a,
.btn_box input[type="submit"],
.btn_box input[type="button"]{
	-webkit-appearance: none;
	display:inline-block;
	line-height:45px;
	padding:0 15px;
	position:relative;
	text-decoration:none;
	border:none;
	transition:background 0.2s ease;
	cursor:pointer;
	font-size:1.1rem;
	font-weight: bold;
	border-radius: 6px;
}
.btn_box a.submit,
.btn_box input.submit {
	background:#14a168;
	color:#ffffff;
	width:100%;
}
.btn_box input.back {
	border:1px solid #dddddd;
	border-radius: 6px;
	background:#f1f1f1;

	line-height: 35px;
	font-weight: normal;
	text-align: center;
}

.btn_box.flex input.back { 
	width: 90px;
	max-width: 25%;
}



.btn_box a:hover,
.btn_box input[type="submit"]:hover {
	background:#222222;
	color:#ffffff;
}
.btn_box.back_box {
	text-align: right;
	width: 100%;
}
.btn_box.table_ft {
	padding:10px 0 0;
	text-align: left;
	width: 100%;
}
.btn_box input.clear {
	border:1px solid #dddddd;
	border-radius: 6px;
	background:#f1f1f1;
	text-align: center;
	cursor: pointer;
	max-width: 100px;
	line-height: 30px;
	font-weight: normal;
}






.btn_box.file {
	display:flex;
}
.btn_box.file a {
	width:calc(100% - 15px);
	margin-left: 15px;
	background: #14a168;
	color: #ffffff;
}
.btn_box.file a:nth-child(1) {
	margin-left: 0;
}
.btn_box.file a:hover {
	background: #151515;
	color: #ffffff;
}
.btn_box a .fa {
	margin-right: 5px;
}


.date_select select {
	margin-left: 10px;
}
.date_select select:nth-child(1) {
	margin-left: 0;
}


.btn_box_wrapper {
	border:1px solid #dddddd;
	padding:20px 0 50px;
	background:#ffffff;
	border-radius: 6px;
}


@media screen and (max-width: 700px) {
	.btn_box {
		width:100%;
	}
	.btn_box_wrapper {
		padding: 20px 20px 50px;
	}
}
@media screen and (max-width: 550px) {
	.btn_box.file {
		display: block;
	}
	.btn_box.file a,
	.btn_box.file a:nth-child(1){
		width :100%;
		margin-left: 0;
		margin-top: 10px;
	}
}
























/*****************************************************************************
procedure
 *****************************************************************************/

.procedure {
	padding: 20px 0;
	background: #f5f5f5;
	margin-bottom: -1px;
	position: relative;
	z-index: 2;
	line-height: 1.2;
	font-size:0.9em;
}
.procedure .hd {
	display: none;
}
.procedure ul {
	width: 900px;
	display: flex;
	margin: 0 auto;
	align-items: center;
}

.procedure li {
	width: 20%;
	text-align: center;
	padding: 5px 0;
	border-left:1px dotted #dddddd;
}
.procedure li:nth-child(1) {
	border-left: none;
}
.procedure li span {
	display: block;
	font-weight: bold;
}
.procedure li span i  {
	font-weight: bold;
}

.procedure li span.step {
	font-size:1.1rem;
	position: relative;
	padding:0 0 18px;
	color:#aaaaaa;
}
.procedure li span.step:after {
	content: "";
	display: block;
	width:14px;
	height: 14px;
	background:#cccccc;
	border-radius: 100%;
	position: absolute;
	bottom: 0;
	left:calc(50% - 7px);
}
.procedure li.sl span.step {
	color:#444444;
}
.procedure li.sl span.step:after {
	background: #e96656;
}
.procedure li span.text {
	margin-top:10px;
	line-height: 1.4;
}
@media screen and (max-width: 1100px) {
	.procedure ul {
		width: auto;
	}
	.procedure li span:nth-child(2) {
		display: none;
	}
}

@media screen and (max-width: 700px) {
	.procedure {
		padding: 10px 0;
	}
	.procedure .hd {
		display: block;
		text-align: center;
		font-weight: bold;
		padding: 0 0 10px;
		
	}
	.procedure li span.step i {
		display: none;
	}
}



/*****************************************************************************
 section
 *****************************************************************************/

.section {
	padding: 60px 0 0;
	position: relative;
	z-index: 1;
}
.section.last {
	padding: 60px 0 60px;
}
.section.gray {
	background:#f1f1f1;
}
.section > .inner {
	width: 1000px;
	margin: 0 auto;
}
.sub_section {
	padding: 40px 0 0;
}
.section_hd1 {
	font-weight: bold;
	padding: 0 0 20px;
	/*margin: 0 0 60px;*/
	font-size: 1.9rem;
	line-height: 1.2;
	text-align: center;
	position: relative;
}
.section_hd1:after {
	content: "";
	display: block;
	height:6px;
	width:150px;
	background:#e96656;
	position: absolute;
	left:calc(50% - 75px);
	bottom:0;
}
.section_hd2 {
	border-bottom: 4px solid #dddddd;
	font-weight: bold;
	padding: 0 0 10px;
	margin: 0 0 40px;
	font-size: 1.8rem;
	line-height: 1.2;
	/*text-align: center;*/
}
.section_hd3 {
	margin: 0 0 20px;
	font-weight: bold;
	font-size: 1.4rem;
	border-left:10px solid #cccccc;
	padding:5px 0 5px 10px;
	line-height: 1.2;
}
.section_hd4 {
	margin: 0 0 10px;
	font-weight: bold;
	font-size: 1.2rem;
}
.section_hd4:before {
	content: "●";
}

.lead {
	text-align: center;
}


@media screen and (max-width: 1100px) {
.section > .inner {
	width: auto;
	padding: 0 5vw;
}
}






/*****************************************************************************
dl_flex
 *****************************************************************************/

.dl_flex {
	display: flex;
}
.dl_wrapper {
	border: 1px solid #dcdddd;
}
.dl_wrapper .dl_flex {
	border-top: 1px solid #dcdddd;
}
.dl_wrapper .dl_flex:nth-child(1) {
	border-top: none;
}
.dl_flex dt {
	padding: 15px 15px;
	width: 15rem;
	border-right: 1px solid #dcdddd;
	background: #efefef;
}
.dl_flex dd {
	padding: 10px 15px;
	flex: 1;
}

@media screen and (max-width: 700px) {
	.dl_flex {
		display: block;
	}
	.dl_flex dt {
		width: auto;
		border-right: none;
		border-bottom: 1px solid #dcdddd;
	}
}







/*****************************************************************************
 class_listss
 *****************************************************************************/

.class_list table {
	border-collapse: collapse;
	border-spacing: 0;
	width:  100%;
}
.class_list th,
.class_list td {
	border: 1px solid #dcdddd;
	padding: 8px 5px;
	line-height: 1.3;
}

.class_list .col1 {
	width:10%;
}
.class_list .col2 {
	width:10%;
}
.class_list .col3 {
	width:35%;
}
.class_list .col4 {
	width:20%;
}
.class_list .col5 {
}

.class_list thead {
	background:#efefef;
}

.class_list tbody tr:hover {
	background:#f1f1f1;
}
.class_list.view tbody tr {
	pointer-events: none;
}


.class_list .col02 {
	text-align: center;
	font-weight: bold;
	width:4em;
}
.class_list .col03 {
	font-weight: bold;
}
.class_list .col04 {
	width:13em;
}
.class_list .col05 {
	width:7em;
}
.class_list .col10 {
	width: 3em;
	white-space: nowrap;
	padding: 8px 0;
}
.class_list .col11 {
	width: 6em;
}
.class_list .col12 {
	text-align: center;
}


.class_list.edit .col01 {
	text-align: center;
	width:3em;
}
.class_list.edit .col04 {
	width:11em;
}
.class_list.edit .col06 {
	text-align: center;
	width:5em;
}
.class_list.edit .col07 {
	text-align: center;
	width:7em;
}
.class_list.view .col00 {
	text-align: center;
	font-weight: bold;
	width:8em;
}


.class_list tr.disabled {
	background:#f5f5f5 !important;
	color:#999999;
	/*pointer-events: none;*/
}


.class_list .col06 span {
	display: inline-block;
	width:5em;
	text-align: center;
	border-radius: 3px;
	padding:3px 0;
}
.class_list .col06 .open {
	background:#e96656;
	color:#ffffff;
}
.class_list .col06 .close {
	background:#cccccc;
	color:#444444;
}
.class_list .col06 .cancel {
	background:#cccccc;
	color:#444444;
}



@media screen and (max-width: 1100px) {
	.class_list {
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		margin-left: -5vw;
		width: calc(100% + 10vw);
		padding: 0 0 15px;
	}
	.class_list_inner {
		width: 1000px;
		display: flex;
		padding: 0 0 0 5vw;
	}
	.class_list_inner::after {
		content: "";
		display: block;
		width: 5vw;
		height: 1px;
	}
	.class_list table {
		width: calc(100% - 5vw);
	}
}


/*@media screen and (max-width: 700px) {
	.class_list table,
	.class_list thead,
	.class_list tbody,
	.class_list tr,
	.class_list th,
	.class_list td {
		display: block;
		border:none;
	}
	.class_list tr {
		border:1px solid #dddddd;
		position: relative;
		margin: 10px 0 0;
		width: 100%;
	}
	.class_list.edit .col01 {
		width: 30px;
		position: absolute;
		top: 40px;
		left: 0;
		height: calc(100% - 40px);
		border-right: 1px dotted #cccccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.class_list.edit .col01 input {
		vertical-align: middle;
	}
	.class_list .col02 {
		width: 100% ;
		height: 40px;
		line-height: 20px;
		text-align: left;
	}
	.class_list.edit .col02 {
		border-bottom: 1px dotted #cccccc;
	}
	.class_list.edit .col03,
	.class_list.edit .col04,
	.class_list.edit .col05 {
		margin-left:30px;
		width:calc(100% - 30px);
	}
	
	.class_list.view .col03,
	.class_list.view .col04,
	.class_list.view .col05 {
		width: 100%;
	}
	
	.class_list .col03 {
		padding-bottom:0;
	}
	.class_list .col04 {
		padding-top:5px;
		padding-bottom:0;
	}
	.class_list .col05 {
		padding-top:5px;
	}
	.class_list.edit .col06 {
		position: absolute;
		top:0;
		right:0;
		height: 40px;
		line-height: 20px;
		text-align: right;
	}
	
	.class_list.view .col00,
	.class_list.view .col02 {
		display: inline-block;
		width:auto;
	}
	.class_list.view .col03 {
		border-top: 1px dotted #cccccc;
	}
	
	
	.class_list tbody .col02:before {
		content:"No.";
	}
	.class_list tbody .col04:before {
		content:"講師：";
	}
	.class_list tbody .col05:before {
		content:"講習の期間：";
	}
}*/






















.zip_box {
	display:flex;
}
.zip_box .zip_code {
	flex: 1;
}
.zip_box .zip_code input {
	width:100px;
}
.zip_box .zip_btn_box {
	width:240px;
}
.zip_box .zip_btn_box p {
	border:1px solid #dddddd;
	border-radius: 6px;
	background:#f1f1f1;
	padding:10px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}
.zip_box .zip_btn_box p:hover {
	background:#222222;
	color:#ffffff;
}


@media screen and (max-width: 850px) {
	.zip_box {
		display:block;
	}
	.zip_box .zip_btn_box {
		margin-top:15px;
	}
}


.addr label {
	display: flex;
}
.addr label .hd {
	/*display: inline-block;*/
	width: 12em;
}
.addr label .con {
	flex:1;
}

@media screen and (max-width: 700px) {
	.addr label {
		display: block;
	}
}



textarea.short {
	height:50px !important;
}


.note_box {
	margin:15px 0;
	padding:10px 15px;
	position: relative;
}
.note_box:before {
	content: "";
	display: block;
	width:15px;
	border:1px solid #dddddd;
	border-right:none;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}
.note_box:after {
	content: "";
	display: block;
	width:15px;
	border:1px solid #dddddd;
	border-left:none;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
}
.note_box li {
	position: relative;
	padding-left:1.2em;
}
.note_box li:before {
	content: "●";
	position: absolute;
	top:0;
	left:0;
}







.em {
	color:#ff0000;
}




















/*****************************************************************************
 startBoxWrapper
 *****************************************************************************/


.startBoxWrapper {
	display: flex;
}
.startBoxWrapper .box {
	width: calc((100% - 3%)/2);
	border: 1px solid #dddddd;
	border-radius: 6px;
	padding: 25px;
}
.startBoxWrapper .box:nth-child(2) {
	margin-left: 3%;
}

@media screen and (max-width: 700px) {
	.startBoxWrapper {
		display: block;
	}
	.startBoxWrapper .box {
		width: auto;
	}
	.startBoxWrapper .box:nth-child(2) {
		margin: 20px 0 0;
	}
}












/*****************************************************************************
 btn_box2
 *****************************************************************************/


.btn_box2 {
	margin-top: 15px;
	text-align: center;
	background: #f5f5f5;
	padding: 15px 0;
	position: relative;
}
.btn_box2 .hd {
	font-size: 1.14rem;
	font-weight: bold;
}
.btn_box2 .link a {
	color: #dc0002;
	font-size: 1.3rem;
	font-weight: bold;
}
/*.btn_box2 .fa {
	position: absolute;
	top: -10px;
	right: 10px;
	font-size: 2em;
	color: #dc0002;
	margin-right: 5px;
}*/










/*****************************************************************************
select_certificate
 *****************************************************************************/


.select_certificateTable {

} 
.select_certificateTable .select_certificate select {
	width: 90%;
}
.select_certificateTable .select_certificate select:not(:nth-child(1)) {
	margin-top: 10px;
}






.select_certificateTable .msg1 {
	padding: 15px 0 15px;
}
.select_certificateTable .msg3 {
	padding: 0 0 15px;
}

div[id^="crtf-option"] label {
	display: inline-block;
	min-width: 29%;
	padding: 2px 1.5em 2px 0;
	white-space: nowrap;
}
div[id^="crtf-option"] label input {
	margin-right: 4px;
}




.select_certificateTable .dates dl:not(:nth-child(1)) {
	margin-top: 15px;
}
.select_certificateTable .dates dt:before {
	content: "■";
	margin-right: 4px;
}
.select_certificateTable .dates dd {
	margin-top: 5px;
}














/*****************************************************************************
.cat2Table
 *****************************************************************************/

.cat2Table .col21 {
	width: 12em;
}
.cat2Table .col22 {
	width: auto;
	text-align: left;
}
.cat2Table .col23 {
	width: 8em;
	text-align: center;
}