/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

/* ---------------------------------------- common */

#wrapper { }

.pagelink { 
	text-align: center;
	margin: 1.5em 0 0; 
}
.pagelink a {
	display: inline-block;
	color: #fff;
	background: #000;
	border: 2px #000 solid;
	font-weight: 600;
	border-radius: 100px;
	padding: .5em 2em;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.pagelink a:hover {
	color: #000;
	background: #fff;
	opacity: 1;
}

main h3 {
	color: #fff;
	background: #000;
	line-height: 1.4;
	font-weight: 600;
	padding: .5em .5em;
	margin: 0 0 1em;
}
main h4 {
	background: #dcdcdc;
	border-left: 4px #000 solid;
	line-height: 1.4;
	font-weight: 600;
	padding: .5em .5em;
	margin: 0 0 1em;
}
main h5 {
	line-height: 1.8;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .5em;
	margin: 0 0 1em;
}
/* テキスト前に中黒 */
main h6 {
	line-height: 1.4;
	font-weight: 600;
	margin: 0 0 1em;
	position: relative;
}
main h6::before {
	display: inline-block;
	font-family: 'FontAwesome';
	content: "\f111";
	margin: 0 .5em 0 0;
}

@media (max-width: 767px) {

	main article { margin: 0 0 3em; } 
	main section { margin: 0 0 2em; }

	main h3 {
		font-size: clamp(1.125rem, 0.678rem + 2.24vw, 1.75rem);
	}
	main h4 {
		font-size: clamp(1rem, 0.642rem + 1.79vw, 1.5rem);
	}
	main h5 {
		font-size: clamp(0.875rem, 0.607rem + 1.34vw, 1.25rem);
	}
	/* テキスト前に中黒 */
	main h6,
	.pagelink a {
		font-size: clamp(0.813rem, 0.589rem + 1.12vw, 1.125rem);
	}

}

@media (min-width: 768px) {

	main article { margin: 0 0 4em; }  
	main section { margin: 0 0 3em; }

	main h3 {
		font-size: clamp(1.25rem, -0.657rem + 3.97vw, 2rem);
	}
	main h4,
	.pagelink a {
		font-size: clamp(1.125rem, -0.464rem + 3.31vw, 1.75rem);
	}
	main h5 {
		font-size: clamp(1rem, -0.272rem + 2.65vw, 1.5rem);
	}
	/* テキスト前に中黒 */
	main h6 {
		font-size: clamp(1rem, 0.239rem + 1.32vw, 1.125rem);
	}

}

/* ---------------------------------------- flexs */

@media (max-width: 767px) {
}

@media (min-width: 768px) {

	.flexs {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	}

	.flexs.wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	.flexs.nowrap {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	
	.flexs.justify {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	
	.flexs.justify-center {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	
	.flexs.align-center {
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
	}
	
	.flexs.row {
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction:row;
	}
	
	.flexs.row-reverse {
		-webkit-flex-direction: row-reverse;
		-ms-flex-direction: row-reverse;
		flex-direction:row-reverse;
	}
	
	.flexs.column {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
	.flexs.column-reverse {
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

} 

/* ---------------------------------------- flexs + detail */

.flexs > figure { text-align: center; }
.flexs > .detail p { line-height: 2; }

@media (max-width: 767px) {

	.flexs:not(.row-reverse) > figure,
	.flexs.row-reverse { margin: 0 0 1em; }

}

@media (min-width: 768px) {

	.flexs > figure { width: 31%; }
	.flexs > .detail { width: 64%; }

}

/* ---------------------------------------- table */
/* if any row, wrap class "multiplex" and "multiplex-wrap" */

table { width: 100%; }
th { 
	background: #f5f5f5; 
	text-align: left; 
}
td { text-align: left; }
th, td {
	border: 1px #ccc solid;
	line-height: 1.6;
	padding: 1em;
}

@media (max-width: 767px) {

	table { border-top: 1px #ccc solid; }
	th, td {
		display: block;
		border-top: none;
		border-left: 1px #ccc solid;
		border-right: 1px #ccc solid;
		border-bottom: 1px #ccc solid;
		padding: 1em;
	}
	th { text-align: center; }

	.multiplex {
		width: 100%;
		padding: 32px 0;
		position: relative;
	}
	.multiplex .multiplex-wrap {
		overflow-x: scroll;
		position: relative;
	}
	.multiplex::before,
	.multiplex::after {
		display: block;
		width: 32px;
		height: 24px;
		color: #000;
		font-size: 24px;
		font-family: 'FontAwesome';
		content: "\f07e";
		position: absolute;
		z-index: 2;
	}
	.multiplex::before {
		top: -.25em;
		left: 50%;
	}
	.multiplex::after {
		bottom: .5em;
		left: 50%;
	}
	.multiplex .multiplex-wrap table { width: 767px; }
	.multiplex .multiplex-wrap table th, 
	.multiplex .multiplex-wrap table td {
		display: table-cell;
		border: 1px #ccc solid;
	}
	.multiplex .multiplex-wrap table th { text-align: left; }

}

@media (min-width: 768px) {
	table { table-layout: fixed; }
	th { width: 25%; }
	table .thin { 
		width: 10%; 
		text-align: center;
	}
}

table.no-border,
table.no-border th,
table.no-border td { border: none; }
table.no-border th { background: none; }

/* ---------------------------------------- addrecruit */

div.addrecruit { margin: 0 0 3em; }
.addrecruit .inside:not(.connect) { margin: 0 0 3em; }
.addrecruit p { line-height: 2; }
.addrecruit .connect h4 { 
	background: none;
	border: none;
	text-align: center; 
	padding: 0;
}

@media (max-width: 767px) {

	.addrecruit .inside ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 0 2em;
	}
	.addrecruit .inside ul li {
		width: 48%;
		margin: 0 0 4%;
	}
	.addrecruit .connect h4 {
		font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
	}
}

@media (min-width: 768px) {

	.addrecruit .inside ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 0 3em;
	}
	.addrecruit .inside ul li {
		width: 23%;
	}

}

/* ---------------------------------------- lotsp */

#lotsp { line-height: 2; }

@media (max-width: 767px) {

	#lotsp { margin: 0 0 5em; }

}

@media (min-width: 768px) {

	#lotsp { margin: 0 0 11em; }

}