/* General Style */

html, body {
	box-sizing:border-box;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 400;
	cursor:auto;
	padding:0;
	margin:0;
	height: 100%;
	height: 100%;
	font-size: 14px;
}
a {
	text-decoration: none;
}
div img {
	width: 100%;
	height: auto;
	display: block;
}
.cent {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	top: 50%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
	text-align: center;
}
.cent img{
	width: 80%;
	max-width: 680px;
	margin: 0 auto;
}


/* トップ画像内：採用情報INDEXボタン */
.topIndexBanner {
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 40px;
	width: 80%;
	max-width: 680px;
	z-index: 3;
}
.topIndexBanner a {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: #f39a2c;
	color: #FFF;
	text-align: center;
	font-weight: 700;
	font-size: 2.2em;
	padding: 20px 10px;
	border-radius: 10px;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.25);
	transition: 0.3s;
}
.topIndexBanner a:hover {
	opacity: 0.85;
}
@media screen and (max-width: 780px) {
	.topIndexBanner {
		bottom: 28px;
	}
	.topIndexBanner a {
		font-size: 1.8em;
		padding: 18px 10px;
	}
}
@media screen and (max-width: 499px) {
	.topIndexBanner {
		bottom: 20px;
	}
	.topIndexBanner a {
		font-size: 1.5em;
		padding: 16px 10px;
		border-radius: 8px;
	}
}

/* ===== レスポンシブ時：トップロゴとINDEXボタンが重ならないよう調整 =====
   画像(picture)を背景として扱い、ロゴ→ボタンを縦積み配置にします */
@media screen and (max-width: 1024px) {
	.content1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 背景画像を absolute にするため、余白で高さを確保 */
		padding: 56px 0 46px;
	}

	.content1 picture {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.content1 picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.content1 .cent {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		z-index: 2;
	}

	.content1 .topIndexBanner {
		position: relative;
		left: auto;
		bottom: auto;
		transform: none;
		margin: 18px auto 0;
		z-index: 2;
	}
}

@media screen and (max-width: 499px) {
	.content1 {
		padding: 44px 0 38px;
	}
	.content1 .topIndexBanner {
		margin-top: 14px;
	}
}



.content1 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	max-height: 100%;
	float: left;
	position: relative;
	overflow: hidden;
}


.content2 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	float: left;
	position: relative;
	background-image: url(../img/bg2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 50px 80px;
	padding-bottom: 0;
}
@media screen and (max-width: 780px) { 
	.content2 {
		padding: 30px 50px;
		padding-bottom: 0;
	}
}
@media screen and (max-width: 499px) { 
	.content2 {
		padding: 30px 30px;
		padding-bottom: 0;
	}
}

.cont2_box {
	box-sizing: border-box;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 20px;
}
@media screen and (max-width: 780px) { 
	.cont2_box {
		margin-bottom: 10px;
	}
}
.cont2_boxImg {
	box-sizing: border-box;
	width: 100%;
	position: relative;
	z-index: 2;
	border-bottom: 2px solid #000;
}
.cont2_boxImg img {
	max-width: 980px;
	margin: 0 auto;
}
.noboard {
	border-bottom: none;
}
.cont2_boxB {
	box-sizing: border-box;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 50px;
}
.cont2_boxBlack {
	box-sizing: border-box;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 50px;
	background: rgba(0,0,0,0.4);
	border: 2px solid #FFF;
	padding: 20px;
	margin-top: 30px;
}
@media screen and (max-width: 780px) { 
	.cont2_boxB {
		margin-bottom: 30px;
	}
	.cont2_boxBlack {
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 499px) { 
	.cont2_boxB {
		margin-bottom: 20px;
	}
	.cont2_boxBlack {
		padding: 10px;
		margin-top: 20px;
		margin-bottom: 30px;
	}
}
.cont2_boxC {
	box-sizing: border-box;
	width: calc(100% + 100px);
	margin-left: -50px;
	z-index: 1;
	padding-bottom: 50px;
	position: relative;
}
.cont2_boxBG2 {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background: linear-gradient(#000, #FFF);
	mix-blend-mode: screen;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
@media screen and (max-width: 780px) { 
	.cont2_boxC {
		width: calc(100% + 60px);
		margin-left: -30px;
		padding-bottom: 30px;
	}
}
@media screen and (max-width: 499px) { 
	.cont2_boxC {
		width: calc(100% + 20px);
		margin-left: -10px;
		padding-bottom: 10px;
	}
}


.content3 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	float: left;
	padding: 50px;
	background: #FFF;
}
.content3 img {
	max-width: 680px;
	margin: 0 auto;
}
@media screen and (max-width: 780px) { 
	.content3 {
		padding: 30px;
	}
}
@media screen and (max-width: 499px) { 
	.content3 {
		padding: 30px 20px;
	}
}

.button_main {
	box-sizing: border-box;
	width: 100%;
	max-width: 980px;
	background: -moz-linear-gradient(to bottom,#5bbd52,#5bbd52 34%,#3eb134 35%,#3eb134); 
	background: -webkit-linear-gradient(to bottom,#5bbd52,#5bbd52 34%,#3eb134 35%,#3eb134); 
	background: linear-gradient(to bottom,#5bbd52,#5bbd52 34%,#3eb134 35%,#3eb134); 
	border:3px solid #ffffff;
	cursor:pointer;
	padding:15px 20px;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.4);
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 20px;
	position: relative;
	z-index: 99;
    transition: 0.3s;
}
.button_main:hover {
	background: -moz-linear-gradient(to bottom,#42913c,#42913c 34%,#2d8526 35%,#2d8526); 
	background: -webkit-linear-gradient(to bottom,#42913c,#42913c 34%,#2d8526 35%,#2d8526); 
	background: linear-gradient(to bottom,#42913c,#42913c 34%,#2d8526 35%,#2d8526); 
	box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
@media screen and (max-width: 499px) { 
	.button_main {
		padding:15px 10px;
	}
}


.content4 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	float: left;
	position: relative;
	background-image: url(../img/bg4.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 50px 50px 30px 50px;
}
@media screen and (max-width: 780px) { 
	.content4 {
		padding: 50px 30px 30px 30px;
	}
}
@media screen and (max-width: 499px) { 
	.content4 {
		padding: 30px 10px 10px 10px;
	}
}


.content5 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	float: left;
	position: relative;
	background-image: url(../img/bg5.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 50px 50px 30px 50px;
}
@media screen and (max-width: 780px) { 
	.content5 {
		padding: 50px 30px 30px 30px;
	}
}
@media screen and (max-width: 499px) { 
	.content5 {
		padding: 30px 10px 10px 10px;
	}
}


.content6 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	float: left;
	padding: 50px;
	background: #FFF;
	font-weight: 400;
	padding-top: 20px;
}
@media screen and (max-width: 780px) { 
	.content6 {
		padding: 50px 30px;
	}
}
@media screen and (max-width: 499px) { 
	.content6 {
		padding: 30px 10px;
	}
}

.maxwid {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

.title {
	box-sizing: border-box;
	background: #e4007f;
	color: #FFF;
	text-align: center;
	width: 100%;
	padding: 10px;
	font-size: 1.4em;
	font-weight: 700;
}
.message {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding-top: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e4007f;
	position: relative;
}
.message2 {
	box-sizing: border-box;
	border-bottom: 0px solid #e4007f;
}
.message_text {
	box-sizing: border-box;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 25px;
	font-weight: 700;
	font-size: 1.6em;
	padding-bottom: 5px;
}
.message_text2 {
	box-sizing: border-box;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 5px;
	font-weight: 600;
	font-size: 1.8em;
	padding-bottom: 5px;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
}

@media screen and (max-width: 780px) { 
	.message_text {
		font-size: 1.4em;
		padding-bottom: 0px;
		bottom: 25px;
	}
	.message_text2 {
		font-size: 1.6em;
		padding-bottom: 0px;
	}
}
@media screen and (max-width: 499px) { 
	.message_text {
		font-size: 1.2em;
		bottom: 5px;
	}
	.message_text2 {
		font-size: 1.4em;
		bottom: -5px;
	}
	.message {
		padding-top: 30px;
	}
}
@media screen and (max-width: 359px) { 
	.message_text {
		font-size: 1em;
	}
	.message_text2 {
		font-size: 1em;
	}
}
.textBox {
	box-sizing: border-box;
	text-align: left;
	width: 100%;
	padding: 20px 0 10px 0;
	font-size: 1em;
	font-weight: 400;
}
.daihyouA{
	box-sizing: border-box;
	width: 30%;
	float: left;
	padding-top: 10px;
}
.daihyouB{
	box-sizing: border-box;
	width: 70%;
	float: left;
	font-size: 1em;
	padding-left: 20px;
	padding-top: 10px;
}
@media screen and (max-width: 780px) { 
	.daihyouA{
		width: 33%;
	}
	.daihyouB{
		width: 67%;
	}
}

@media screen and (max-width: 499px) { 
	.daihyouA{
		width: 100%;
	}
	.daihyouB{
		width: 100%;
		padding-left: 0px;
		padding-top: 10px;
	}
}
.nameA {
	box-sizing: border-box;
	width: 100%;
	font-size: 1em;
	padding-top: 5px;
}
.nameB {
	box-sizing: border-box;
	width: 100%;
	font-size: 1.2em;
}
.youtube {
	box-sizing: border-box;
	width: 100%;
	padding: 20px 0 10px 0;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}
.youtube_text {
	box-sizing: border-box;
	width: 100%;
	font-weight: 400;
	font-size: 1.4em;
	padding-bottom: 5px;
}
@media screen and (max-width: 780px) { 
	.youtube_text {
		font-size: 1.2em;
	}
}
@media screen and (max-width: 499px) { 
	.youtube_text {
		font-size: 1.1em;
	}
}
.jobbox1 {
	box-sizing: border-box;
	width: 50%;
	float: left;
	padding-right: 10px;
	padding-top: 10px;
}
.jobbox2 {
	box-sizing: border-box;
	width: 50%;
	float: left;
	padding-left: 10px;
	padding-top: 10px;
}
@media screen and (max-width: 499px) { 
	.jobbox1 {
		width: 100%;
		padding-right: 0px;
		padding-top: 20px;
	}
	.jobbox2 {
		width: 100%;
		padding-left: 0px;
		padding-top: 20px;
	}
}
.job_text {
	box-sizing: border-box;
	text-align: left;
	width: 100%;
	font-size: 1em;
	font-weight: 400;
	padding-top: 5px;
}



.content7 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	float: left;
	position: relative;
	background-image: url(../img/bg7.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 50px ;
}
@media screen and (max-width: 780px) { 
	.content7 {
		padding: 50px 30px 50px 30px;
	}
}
@media screen and (max-width: 499px) { 
	.content7 {
		padding: 30px 10px 30px 10px;
	}
}
.course_text {
	box-sizing: border-box;
	background: #e4007f;
	color: #FFF;
	text-align: center;
	width: 100%;
	padding: 5px;
	margin-top: 10px;
	font-size: 1.2em;
}





.br700 {display: none;}
.br560 {display: none;}
@media screen and (max-width: 700px) { 
	.br700 {display: block;}
}

@media screen and (max-width: 560px) { 
	.br560 {display: block;}
}


.boshuBox {
	box-sizing: border-box;
	flex-basis: 100%;
	max-width: 100%;
    display: flex;
	border-bottom: 1px solid #e4007f;
    flex-wrap: wrap;
	position: relative;
	background: #efefef;
	flex-wrap: wrap;
    align-items: center;
}
.boshu1 {
    box-sizing: border-box;
	max-width: 150px;
	flex-basis: 150px;
	padding: 20px 10px;
	padding-left: 20px;
	font-size: 1em;
	background: #efefef;
	font-weight: 700;
	color: #4c4948;
}
.boshu2 {
    box-sizing: border-box;
	max-width: calc(100% - 150px);
	flex-basis: calc(100% - 150px);
	padding: 20px 10px;
	font-size: 1em;
	background: #FFF;
	color: #4c4948;
}
.boshu_inner {
	margin-left: -20px;
}
@media screen and (max-width: 750px) {
	.boshu1 {
		max-width: 100%;
		flex-basis: 100%;
		padding: 15px 10px;
	}
	.boshu2 {
		max-width: 100%;
		flex-basis: 100%;
		padding: 10px 0px;
	}
}

.company {
	box-sizing: border-box;
	width: 100%;
	padding: 20px 10px;
	float: left;
	display: flex;
	flex-wrap: wrap;
    align-items: center;
}
.companyA {
	box-sizing: border-box;
	width: 50%;
	float: left;
	padding-right: 10px;
	text-align: right;
}
.companyA img {
	max-width: 300px;
	float: right;
}
.companyB {
	box-sizing: border-box;
	width: 50%;
	float: left;
	border-left: 1px solid #262626;
	padding-left: 10px;
}
@media screen and (max-width: 650px) {
	.companyA {
		width: 100%;
		padding-right: 0px;
	}
	.companyA img {
		max-width: 300px;
		float: inherit;
		margin: 0 auto;
	}
	.companyB {
		width: 100%;
		padding-left: 0px;
		text-align: center;
		border-left: 0px solid #262626;
		border-top: 1px solid #262626;
		padding-top: 10px;
		padding-bottom: 20px;
		margin-top: 10px;
	}
}

.company1 {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	font-weight: 700;
	font-size: 1.2em;
	color: #262626;
}
.company1 span {
	box-sizing: border-box;
	font-weight: 400;
	font-size: 0.9em;
}
.company2 {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	padding: 10px;
	padding-bottom: 20px;
	font-weight: 700;
	font-size: 2em;
	color: #e4007f;
}
@media screen and (max-width: 499px) {
	.company1 span {
		font-size: 0.8em;
	}
}
@media screen and (max-width: 349px) {
	.company1 span {
		font-size: 0.7em;
	}
	.company2 {
		font-size: 1.8em;
	}
}


.content8 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	float: left;
	padding: 50px;
	color: #FFF;
	text-align: center;
	background: #e4007f;
	font-size: 0.9em;
}
@media screen and (max-width: 499px) {
	.content8 {
		padding: 30px;
	}
}

.nopadT {
	padding-top: 0;
}
/* 採用情報INDEXバナー */
.recruitIndexBanner {
	box-sizing: border-box;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	margin-top: 25px;
}
.recruitIndexBanner a {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: #f39a2c;
	color: #FFF;
	text-align: center;
	font-weight: 700;
	font-size: 2.6em;
	padding: 24px 10px;
	border-radius: 10px;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.25);
	transition: 0.3s;
}
.recruitIndexBanner a:hover {
	opacity: 0.85;
}
@media screen and (max-width: 780px) { 
	.recruitIndexBanner a {
		font-size: 2.0em;
		padding: 20px 10px;
	}
}
@media screen and (max-width: 499px) { 
	.recruitIndexBanner {
		margin-top: 20px;
	}
	.recruitIndexBanner a {
		font-size: 1.6em;
		padding: 18px 10px;
		border-radius: 8px;
	}
}