@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');

/***********************************
 reset
***********************************/
@font-face {
	font-family: YuGothicM;
	src: local("Yu Gothic Medium");
}
*, html, body, div, dl, dt, dd, ul, ol, li, header, footer, nav,section,
h1, h2, h3, h4, h5, h6, form, input, textarea, p{
	margin: 0;
	padding: 0;
	font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	font-size: 1em;
}
dl, ul, ol{
	list-style-type: none;
}
html{
	overflow: unset;
	height: auto;
	min-height: 100%;
}
a{
	color: #377fea;
}
a:hover{
	color: #2c64b8;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}

/***********************************
 base
***********************************/
body{
	position: relative;
	margin: 0;
	padding: 0;
	min-width: 1000px;
	height: 100vh;
	min-height: 100%;
	line-height: 1.5em;
	letter-spacing: 0.03em;
	color: #282828;
	font-size: 14px;
	text-align: left;
}
article{
	position: relative;
	margin: -45px auto 50px;
	padding: 25px 17px;
	width: 866px;
	height: auto;
	background: #ffffff;
	border: solid 1px #eaeaea;
	overflow: hidden;
	box-shadow: 1px 1px 3px rgba(186,186,186,0.75);
}

section,
div.container{
	clear: both;
	position: relative;
	background: none;
	height: 100%;
}
section{
	margin: 0 auto 100px;
	padding: 20px;
}
div.container{
	margin: 0 auto;
	width: 900px;
}
@media screen and (max-width: 640px) {
	body{
		min-width: 100%;
		letter-spacing: 0;
	}
	article{
		margin: -20px auto 30px;
		padding: 15px 10px;
		width: calc(100% - 40px);
	}
	section{
		padding: 20px 10px;
		max-width: calc(100% - 20px);
	}
	div.container{
		width: 100%;
	}
}

main{
	width: 100%;
	overflow: hidden;
}

/***********************************
 others
***********************************/
.txtSS{
	font-size: 0.85em;
	letter-spacing: -0.1em;
}
.txtS{
	font-size: 0.9em;
	letter-spacing: -0.06em;
}
.txtM{
	font-size: 1.05em;
	letter-spacing: -0.06em;
}
.txtL{
	font-size: 1.2em;
	letter-spacing: 0;
}
.txtAC{
	text-align: center;
}
.txtAL{
	text-align: left;
}
.txtAR{
	text-align: right;
}
.fltL{
	float: left;
}
.fltR{
	float: right;
}

ul.disc{
	list-style-type: disc;
	margin-left: 20px;
	text-align: left;
}
ul.circle{
	list-style-type: circle;
	margin-left: 20px;
	text-align: left;
}

ul.caution{
	margin: 0 0 0 20px;
	text-align: left;
}
ul.caution li{
	position: relative;
	padding: 2px 0 0;
}
ul.caution li::before {
	position: absolute;
	left: -1.2em;
	display: block;
	content: "※";
}

ol{
	list-style-type: decimal;
	margin-left: 20px;
	text-align: left;
}

.marker{
	display: inline-block;
	margin: 5px 0;
	padding: 0 1px 0 1px;
	background: linear-gradient(transparent 85%, #e3ec9c 85%);
	font-size: 1.05em;
}

br.spBr{
	display: none;
}
@media screen and (max-width: 640px) {
	br.spBr{
		display: block;
	}
}

/***********************************
 header, footer
***********************************/
header, footer{
	clear: both;
	position: relative;
	width: 100%;
	display: block;
	letter-spacing: normal;
	font-size: 0.85em;
}

header{
	margin: 0;
	height: 50px;
}
header h1{
	margin: 10px;
	width: 300px;
	height: 40px;
}
header h1 a{
	display: block;
	background: url(/etc/fubokyo/images/logo.png) no-repeat left center;
	background-size: contain;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

@media screen and (max-width: 640px) {
	header h1{
		margin: 10px auto;
		width: calc(100% - 20px);
	}
}

footer{
	margin-top: 30px;
	background: #e7e2de;
	height: 60px;
	border-top: solid 1px #d6d2cf;
	text-align: center;
}

footer #copyright{
	padding: 20px 0 0;
}

@media screen and (max-width: 640px) {
	footer #copyright{
		font-size: 0.8em;
	}
}

/***********************************
 h2, h3, h4
***********************************/
h2, h3, h4{
	font-weight: normal;
}

h2{
	position: relative;
	left: 50%;
	margin: 0 0 0 -578px;
	width: 1076px;
	height: 254px;
	background: url(/etc/fubokyo/career2024/images/main.jpg) no-repeat center;
	text-indent: -9999px;
}
h2:before,
h2:after{
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
	content: "";
}
h2:before{
	left: 1056px;
	right: 0;
	background-image: linear-gradient(90deg, transparent 0 60%, #eeeeee 100%);
}
h2:after{
	left: 1076px;
	right: -3000px;
	background: #eeeeee;
}

@media screen and (max-width: 640px) {
	h2{
		left: unset;
		margin: 0;
		width: 100%;
		height: 154px;
		background-size: cover;
	}
	h2:before,
	h2:after{
		display: none;
	}
}
@media screen and (max-width: 540px) {
	h2{
		height: 120px;
	}
}
@media screen and (max-width: 420px) {
	h2{
		height: 100px;
	}
}

h3{
	margin: -40px 0 20px;
	padding: 0 0 5px;
	line-height: 1.2em;
	color: #b08e3e;
	text-align: center;
	font-size: 34px;
}
h3.line{
	text-align: left;
	font-size: 28px;
	text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}
h3.line span{
	font-size: 1.3em;
}

h4{
	position: relative;
	margin: 20px 0 10px;
	padding: 10px 0 8px 20px;
	height: auto;
	line-height: 1.1em;
	border-bottom: dotted 1px #000000;
	color: #474747;
	text-indent: 0;
	font-size: 1.5em;
}
h4:after{
	position: absolute;
	top: 9px;
	bottom: 9px;
	left: 0;
	display: block;
	content: "";
	border-left: solid 7px #e3ec9c;
}

@media screen and (max-width: 640px) {
	h3{
		margin: -34px 0 15px;
		padding: 0 0 5px;
		line-height: 1.2em;
		font-size: 24px;
	}
	h3.line{
		font-size: 20px;
	}
	h3.line span{
		font-size: 1.3em;
	}
}


/***********************************
 table
***********************************/
table{
	border-collapse: collapse;
	margin: 0.5em auto;
}
th{
	padding: 0 1em;
	font-weight: normal;
}

table.lattice{
	border-top: solid 1px #b1bbbd;
	border-left: solid 1px #b1bbbd;
}
table.lattice th,
table.lattice td{
	padding: 1em 2em;
	border-right: solid 1px #b1bbbd;
	border-bottom: solid 1px #b1bbbd;
	text-align: center;
}

/***********************************
 .row, .column
***********************************/
.row{
	position: relative;
	display: -webkit-flex;
	display: flex;
	width: calc(100% + 40px);
}
.row:after{
	clear: both;
	display: block;
	content: "";
}
.row + .row{
	margin-top: 30px;
}
.column1,
.row .column2,
.row .column3-1,
.row .column3-2,
.row .column4-1,
.row .column4-3,
.row .column5-1{
	display: block;
	float: left;
	overflow: hidden;
	margin: 0 40px 0 0;
}
.column1{ width: calc(100% - 40px); clear: both; }
.row .column2{ width: calc(50% - 40px); }
.row .column2.narrow{ width: calc(41% - 40px); }
.row .column2.wide{ width: calc(59% - 40px); }
.row .column3-1{ width: calc((100% /3) - 40px); }
.row .column3-2{ width: calc((100% /3) * 2 - 40px); }
.row .column4-1{ width: calc(25% - 40px); }
.row .column4-3{ width: calc(75% - 40px); }
.row .column5-1{ width: calc((100% /5) - 40px); }

@media screen and (max-width: 640px) {
	.row{
		display: block;
	}
	.row .column2,
	.row .column2.narrow,
	.row .column2.wide,
	.row .column3-1,
	.row .column3-2{
		clear: both;
		float: unset;
		width: calc(100% - 40px);
	}
	.row .column4-1,
	.row .column4-3,
	.row .column5-1{
		background: #ff0000;
		width: calc(50% - 40px);
	}
}

.column1 img,
.row .column2 img,
.row .column3-1 img,
.row .column3-2 img,
.row .column4-1 img,
.row .column4-3 img,
.row .column5-1 img{
	display: block;
	width: 100%;
}
column1,
.row img + img{
	margin-top: 40px;
}
@media screen and (max-width: 640px) {
	.row img + img{
		margin-top: 20px;
	}
}
.column1 img.fixity,
.row .column2 img.fixity,
.row .column3-1 img.fixity,
.row .column3-2 img.fixity,
.row .column4-1 img.fixity,
.row .column4-3 img.fixity,
.row .column5-1 img.fixity{
	display: block;
	margin: 0 auto;
	width: auto;
}

.row .boxShadow{
	border: solid 1px #c4c4c4;
	background: #ffffff;
	width: calc(100% - 4px);
	height: calc(100% - 5px);
	box-shadow: 0px 0px 3px 0px #c4c4c4;
}
.row.boxRowBorder{
	padding: 40px 0 40px 40px;
	background: #ffffff;
	width: calc(100% - 42px);
	border: solid 1px #cfceac;
}
.row.boxRowBorder + .row.boxRowBorder{
	border-top: none;
	margin-top: -50px;
	padding-top: 0;
}
.row.boxColor{
	padding: 40px 0 40px 40px;
	width:calc(100% - 42px);
	border: solid 1px #ffffff;
}
.row.boxColor.color01{ 	background: #ededed; }
.row.boxColor.color02{ 	background: #f2ecc7; }
.row.boxRowBorder .row:last-child,
.row.boxColor .row:last-child{
	margin: 0;
}

/***********************************
 .btn, .btnBox, .btnBoxRow
***********************************/
a.btn{
	display: block;
	width: 360px;
	height: 160px;
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
}
a.btn:hover{
	background-color: #ffffff;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
a.btn.treatment{ background-image: url(/images/btn_treatment.png); }
a.btn.staff{ background-image: url(/images/btn_staff.png); }
a.btn.recruit{ background-image: url(/images/btn_recruit.png); width: 360px; height: 151px; }
@media screen and (max-width: 640px) {
	a.btn{
		background-size: contain;
		width: 320px;
		height: 143px;
	}
	a.btn.recruit{
		width: 320px;
		height: 135px;
	}
}

a.btnTxt{
	display: inline-block;
	margin: 10px; 
	padding: 0 1em 0 1.05em;
	background: #423837;
	min-width: 180px;
	height: 33px;
	line-height: 33px;
	letter-spacing: 0.05em;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	border-radius: 3px;
}
a.btnTxt:hover,
a.btnTxt:active{
	background: #4f4342;
}

a.btnTxtGold{
	display: inline-block;
	margin: 30px 30px 20px; 
	padding: 0 100px;
	background: #b08e3e;
	min-width: 180px;
	height: 46px;
	line-height: 46px;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-size: 1.2em;
}
a.btnTxtGold:hover,
a.btnTxtGold:active{
	background: #c9a247;
}
@media screen and (max-width: 640px) {
	a.btnTxtGold{
		display: block;
		margin: 30px auto 20px; 
		padding: 0 20px;
		width: calc(100% - 100px);
		max-width: 350px;
	}
}

a.btnTxtBlue{
	position: relative;
	display: inline-block;
	margin: 10px; 
	padding: 0 1em 0 1.05em;
	background: #27a0e0;
	min-width: 170px;
	height: 33px;
	overflow: hidden;
	z-index: 1;
	line-height: 33px;
	letter-spacing: 0.05em;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	border-radius: 3px;
}
a.btnTxtBlue:before{
	position: absolute;
	content: '';
	right: 0px;
	bottom: 0px;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 80px transparent;
	border-bottom: solid 33px #2094db;
	z-index: -1;
}
a.btnTxtBlue:hover{
	background: #228dc7;
}
a.btnTxtBlue:hover:before{
	border-bottom: solid 30px #1d83c2;
}

.btnBoxLine{
	clear: both;
	margin: 10px auto;
	text-align: center;
}
.btnBoxLine a.btn{
	display: inline-block;
	margin: 0 30px;
}
@media screen and (max-width: 640px) {
	.btnBoxLine a.btn{
		margin: 0 auto 20px;
	}
}

/**********************************************************************
 
 page
 
**********************************************************************/

/***********************************
 #mainimage
***********************************/
#mainimage{
	position: relative;
	padding: 0;
	height: 254px;
	overflow: hidden;
	background: #ea5e76;
}
@media screen and (max-width: 640px) {
	#mainimage{
		height: 154px;
	}
}
@media screen and (max-width: 540px) {
	#mainimage{
		height: 120px;
	}
}
@media screen and (max-width: 420px) {
	#mainimage{
		height: 100px;
	}
}

/***********************************
 others
***********************************/
section#info{
	position: relative;
	background: url(/etc/fubokyo/career2024/images/photo1.png) no-repeat center;
	height: 420px;
}
section#info h3{
	margin: 0;
	padding: 26px 0 10px;
}
section#info p{
	position: absolute;
	bottom: 0;
	right: 50px;
	display: block;
	background: url(/etc/fubokyo/career2024/images/info.png) rgba(234, 94, 118, .9) no-repeat center;
	width: 536px;
	height: 189px;
	text-indent: -9999px;
}

@media screen and (max-width: 640px) {
	section#info{
		margin-bottom: 60px;
		padding: 20px 0 0;
		background-size: contain;
		background-position: center top 6vw;
		height: auto;
	}
	section#info h3{
		padding: 5vw 10px 5px;
		text-shadow: 1px 1px 2px rgba(255,255,255,.9), 1px -1px 2px rgba(255,255,255,.9), -1px 1px 2px rgba(255,255,255,.9), -1px -1px 2px rgba(255,255,255,.9), 0 0 3px rgba(255,255,255,1), 0 0 3px rgba(255,255,255,1), 0 0 3px rgba(255,255,255,1);
		font-size: 18px;
	}
	section#info p{
		position: relative;
		right: unset;
		margin: 15vw auto 0;
		background-size: contain;
		width: calc(100% - 60px);
		max-width: 536px;
		min-width: 310px;
		height: auto;
		aspect-ratio: 20 / 7;
	}
}

section#entry{
	background: #eefbfe;
	text-align: center;
}
section#entry ul{
	display: inline-block;
}

section#entry ul.box{
	margin: 10px;
	padding: 20px 25px 20px 45px;
	width: 580px;
	border: solid 1px #b1bbbd;
}

section#detail p{
	margin: 20px 0 0;
}
section#detail ol{
	margin-top: 10px;
}
@media screen and (max-width: 640px) {
	section#detail p{
		margin: 10px 0 0;
	}
	section#detail ol{
		margin-bottom: 10px;
	}
}
section#onDemand{
	background: #eefbfe;
	text-align: center;
}
section#entry .term,
section#onDemand .term{
	display: inline-block;
	margin: 10px auto;
	color: #3b3b3b;
	font-size: 1.1em;
}
section#onDemand .term{
	margin: 0 auto;
}
section#onDemand .term h4{
	margin: 20px 0 15px;
	padding: 10px 0 8px;
	font-size: 1.1em;
}
section#onDemand .term h4::after{
	display: none;
}
section#entry .term table th,
section#onDemand .term table th{
	padding: 0 0.5em 0 0;
	text-align: right;
}
section#entry .term table td,
section#onDemand .term table td{
	text-align: left;
}
section#onDemand .row{
	gap: 40px;
	justify-content: center;
	margin: 20px auto;
	width: auto;
}
section#onDemand .row::after{
	display: none;
}
section#onDemand .row .column2{
	float: none;
	margin: 0;
	padding: 15px 30px;
	background: #ffffff;
	width: auto;
	border-radius: 20px;
}
section#onDemand .row h4{
	margin: 0 0 15px;
	padding: 10px 0 8px;
	font-size: 1.1em;
}
section#onDemand .row h4::after{
	display: none;
}
section#onDemand .row a.btnTxtGold{
	margin: 15px 0 5px;
	padding: 0 30px;
}
section#onDemand ul.box{
	display: inline-block;
	margin: 10px;
	padding: 20px 25px 20px 45px;
	width: 600px;
	border: solid 1px #b1bbbd;
}

@media screen and (max-width: 640px) {
	section#entry .term,
	section#onDemand .term{
		margin: 10px auto;
	}
	section#onDemand .term{
		margin: 0 auto;
	}
	section#onDemand .term h4{
		margin: 20px 0 15px;
	}

	section#entry .term table,
	section#onDemand .term table{
		display: block;
	}
	section#entry .term table th,
	section#onDemand .term table th{
		display: block;
		text-align: left;
	}
	section#entry .term table tr + tr th,
	section#onDemand .term table tr + tr th{
		padding-top: 0.5em;
	}
	section#entry .term table td,
	section#onDemand .term table td{
		display: block;
		padding: 0 0 0 2em;
	}

	section#onDemand .row .column2 + .column2{
		margin-top: 20px;
	}
	
	section#entry ul.box,
	section#onDemand ul.box{
		margin: 10px 0;
		padding: 10px 10px 10px 30px;
		width: calc(100% - 60px);
	}
}