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

/* =====================================
	# COMMON.CSS
	- NORMALIZE
	- OPTIMIZE
	- MULTIPLE CLASS
	- BASE DESIGN
	- MODULE

	# media queries
	@media screen and (max-width: 1200px)
	@media screen and (max-width: 768px)
	@media screen and (max-width: 480px)

	# media queries sub
	@media screen and (max-width: 992px)
	@media screen and (max-width: 640px)
======================================== */

/* normalize.css v3.0.3
---------------------------------------- */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;scroll-behavior: smooth;}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:400}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:400}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


/* OPTIMIZE
---------------------------------------- */
*,*:before,*:after {box-sizing: border-box;}
h1,h2,h3,h4,h5,h6 {font-size: 100%; margin: 0; padding: 0;}
p,dl,dt,dd {margin: 0; padding: 0;}
ol,ul {list-style-type: none; margin: 0; padding: 0;}
img {height: auto; vertical-align: top; max-width: 100%; }
figure {margin: 0;}
input[type=date],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea,select {border: 1px solid #a9a9a9; padding: .2em;}
label > input[type=radio],label > input[type=checkbox] {margin-right: .5em;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #A9A9A9;}


/* MULTIPLE CLASS
---------------------------------------- */
.bdN {border: none;} .dB {display: block;} .dI {display: inline;} .dIB {display: inline-block;} .dN {display: none;} .fL {float: left;} .fR {float: right;} .fN {float: none;} .fs10 {font-size: 65%;} .fs11 {font-size: 71%;} .fs12 {font-size: 78%;} .fs13 {font-size: 84%;} .fs14 {font-size: 90%;} .fs15 {font-size: 96%;} .fs16 {font-size: 100%;} .fs18 {font-size: 115%;} .fs20 {font-size: 128%;} .fs22 {font-size: 140%;} .fs24 {font-size: 153%;} .fs28 {font-size: 178%;} .fwB {font-weight: 400;} .fwN {font-weight: normal;} .lh10 {line-height: 1;} .lh11 {line-height: 1.1;} .lh12 {line-height: 1.2;} .lh13 {line-height: 1.3;} .lh14 {line-height: 1.4;} .lh15 {line-height: 1.5;} .lh16 {line-height: 1.6;} .lh17 {line-height: 1.7;} .lh18 {line-height: 1.8;} .lh19 {line-height: 1.9;} .lh20 {line-height: 2.0;} .taL {text-align: left;} .taR {text-align: right;} .taC {text-align: center;} .m00 {margin: 0;} .m10 {margin: 10px;} .m20 {margin: 20px;} .m30 {margin: 30px;} .m40 {margin: 40px;} .m50 {margin: 50px;} .m60 {margin: 60px;} .mT10 {margin-top: 10px;} .mT20 {margin-top: 20px;} .mT30 {margin-top: 30px;} .mT40 {margin-top: 40px;} .mT50 {margin-top: 50px;} .mT60 {margin-top: 60px;} .mR10 {margin-right: 10px;} .mR20 {margin-right: 20px;} .mR30 {margin-right: 30px;} .mR40 {margin-right: 40px;} .mR50 {margin-right: 50px;} .mR60 {margin-right: 60px;} .mB10 {margin-bottom: 10px;} .mB20 {margin-bottom: 20px;} .mB30 {margin-bottom: 30px;} .mB40 {margin-bottom: 40px;} .mB50 {margin-bottom: 50px;} .mB60 {margin-bottom: 60px;} .mL10 {margin-left: 10px;} .mL20 {margin-left: 20px;} .mL30 {margin-left: 30px;} .mR40 {margin-right: 40px;} .mR50 {margin-right: 50px;} .mR60 {margin-right: 60px;} .op0 {opacity: 0;} .p00 {padding: 0;} .p10 {padding: 10px;} .p20 {padding: 20px;} .p30 {padding: 30px;} .p40 {padding: 40px;} .p50 {padding: 50px;} .p60 {padding: 60px;} .pT10 {padding-top: 10px;} .pT20 {padding-top: 20px;} .pT30 {padding-top: 30px;} .pT40 {padding-top: 40px;} .pT50 {padding-top: 50px;} .pT60 {padding-top: 60px;} .pR10 {padding-right: 10px;} .pR20 {padding-right: 20px;} .pR30 {padding-right: 30px;} .pR40 {padding-right: 40px;} .pR50 {padding-right: 50px;} .pR60 {padding-right: 60px;} .pB10 {padding-bottom: 10px;} .pB20 {padding-bottom: 20px;} .pB30 {padding-bottom: 30px;} .pB40 {padding-bottom: 40px;} .pB50 {padding-bottom: 50px;} .pB60 {padding-bottom: 60px;} .pL10 {padding-left: 10px;} .pL20 {padding-left: 20px;} .pL30 {padding-left: 30px;} .pL40 {padding-left: 40px;} .pL50 {padding-left: 50px;} .pL60 {padding-left: 60px;} .posR {position: relative;} .posA {position: absolute;} .posF {position: fixed;} .posS {position: static;} .vaT {vertical-align: top;} .vaB {vertical-align: bottom;} .vaM {vertical-align: middle;} .vaBL {vertical-align: baseline;} .w10p {width: 10%;} .w20p {width: 20%;} .w30p {width: 30%;} .w40p {width: 40%;} .w50p {width: 50%;} .w60p {width: 60%;} .w70p {width: 70%;} .w80p {width: 80%;} .w90p {width: 90%;} .w100p {width: 100%;}

.clearfix:before, .clearfix:after {content: ""; display: block;} .clearfix:after {clear: both;} .clearfix {zoom: 1;}
.rollalpha:hover {opacity: .7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; zoom: 1;}
.caption {color: #e70e1e;}


/* BASE DESIGN
---------------------------------------- */
html,body {height: 100%;}
body {color: #333; font-size: 100%; font-family: 'Lucida Grande','segoe UI','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo',sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%;}

/* link color */
a {color:#3652bb;}
a:link {color: #3652bb;}
a:visited {color: #3652bb;}
a:active {color: #3652bb;}
a:hover {color:#3652bb; text-decoration: underline;}


/* MODULE
---------------------------------------- */
/* responsive <br> example
<span class="brPC"></span>
<span class="brTAB"></span>
<span class="brMB"></span>
*/
.container {margin-left: auto; margin-right: auto; max-width: 1000px;}
span.brPC {display: block;}
	@media screen and (min-width: 769px) {
		.hidePC {display: none;}
	}
	@media screen and (min-width: 480px) and (max-width: 768px) {
		.container {margin-left: 20px; margin-right: 20px;}
		.hideTAB {display: none;}
		span.brPC {display: inline;}
		span.brTAB {display: block;}
	}
	@media screen and (max-width: 480px) {
		.container {margin-left: 10px; margin-right: 10px;}
		.hideMB {display: none;}
		span.brPC {display: inline;}
		span.brTAB {display: inline;}
		span.brMB {display: block;}
		img.floatImg {width: 50%;}
	}
    @media screen and (min-width: 769px) {
		.onlysp {display: none!important;}
	}
.pageTitle {font-size: 30px; text-align: center; background: #f1f1eb; color: #f08630; padding: 20px 0; margin-bottom: 30px;}
	@media screen and (max-width: 480px) {
		.pageTitle {font-size: 22px;}
	}
h2 {font-size: 20px; color: #f08630; line-height: 1; border-left: #f00 5px solid; padding-left: 15px; position: relative; margin: 40px auto 20px;}
h2:after {content: ""; position: absolute; top: 50%; left: -5px; width: 5px; height: 50%; background: #f08630;}
h3 {font-size: 20px; color: #e70e1e; margin: 25px auto 10px;}


/* HEADER
---------------------------------------- */
#header {border-bottom:#ddd 2px solid; padding-top: 15px;}
#header a ,#header a:link ,#header a:visited ,#header a:active ,#header a:hover {color:#333; text-decoration: none;}
#header .logo {display: inline-block; margin-top: 15px;}
#header .btnHeader {border: 1px solid #FAC524; border-radius: 5px; display: block; font-weight: bold; line-height: 1; margin-left: 10px; margin-top: 15px; padding: .5em 0.5em; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.004);
	background-image: -moz-linear-gradient( 90deg, rgb(250,197,36) 0%, rgb(253,234,176) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(250,197,36) 0%, rgb(253,234,176) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(250,197,36) 0%, rgb(253,234,176) 100%);
}
#gnav {margin-top: 20px; padding: 10px 0;
  background-image: -webkit-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 64%);
  background-image: -o-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 64%);
  background-image: linear-gradient(to top, rgb(236,236,236) 0%, rgb(255,255,255) 64%);
}
/*#gnav li {display: inline-block; font-size: 14px; line-height: 1.2; position: relative; text-align: center; vertical-align: middle; width: 12.7%; }*/
#gnav li {display: inline-block; font-size: 14px; line-height: 1.2; position: relative; text-align: center; vertical-align: middle; width: 9%; }
#gnav li:first-child { width: 8%; }
#gnav li:after,
#gnav li:first-child:before {background: #ddd; content:''; display: block; height: 30px; margin-top: -15px; position: absolute; right: 0; top: 50%; width: 1px;}
#gnav li:first-child:before {left: 0;}
#gnav li span.new { 
 font-size: 11px;
 color: #fff;
 background-color: #e70e1e;
 padding: 3px 4px;
 border-radius: 10px;
 margin: 0 2px 0px 0;
 display: inline-block;
}
#gnav a {display: block; width: 100%;padding-right: 4px;}
#gnav a.active {color: #f08630;}

/*twitter*/
#top-sns::after{
content:"";
display:block;
clear:both;
}
#top-sns li {
float: left;
display: table;
}
#top-sns li.twbtn {
	margin-top: 20px;
	margin-left: 10px;
}
#top-sns li.twbtn a{
	color:#fff;
	background-color:#000;
	padding: 6px 4px;
	border-radius: 5px;
	text-align: center;
	font-weight: 600;
	cursor: pointer;
	font-size: 16px;
}
#top-sns li.twbtn a:hover {
background-color: #333;
}

.fa-twitter:before{
	content: '';/*何も入れない*/
    display: inline-block;
    width: 15px;/*画像の幅*/
    height: 15px;/*画像の高さ*/
	background-image: url(/common/img/x_logo-white.png);
  background-size: contain;
  vertical-align: bottom;
}



/*事業内容拡大アイコン*/
#top-sns li.expansion_ico {
float: left;
display: table;
margin-top: 20px;
margin-right: 20px;
}
/*動画ボタン*/
#header .btnHeader.btn_mov {
	background-image: none;
	border: none;
	background-color: #ff0000;
	color: #fff;
	}

#top-sns li.mvbtn a:hover{
    background-color: #fa6f6f;
	}
	
#header .btnHeader.btn_mov:after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: -3px 0 0 5px;
	background: url(../img/btn_mov.png) no-repeat;
	background-size: contain;
	vertical-align: middle;}

@media screen and (max-width: 768px) {
#top-sns li.expansion_ico{display: none;}
}

@media screen and (min-width: 769px) {
#gnav li:nth-child(12n),#gnav li:last-child {display: none;}
}
@media screen and (max-width: 768px) {
	#header .logo {margin-top: 0; width: 200px;}
	#gnav {display: none; height: 100%; margin-top: 0; padding-top: 0;}
	#gnav li {border-bottom: 1px solid #ccc; text-align: left; width: 100%;}
#gnav li:first-child { width:100%; }
	#gnav li:after, #gnav li:first-child:before {display: none;}
	#gnav li a {display: block; padding: 15px 10px;}
	#gnav li i {float: right;}
	#header .logoTokyo img {width: 50px;}
	#header .btnHeader {display: none;}
	#openTriggerGnav {background: #ccc; border-radius: 5px; display: block; font-size: 12px; line-height: 1; margin-top: 10px; margin-bottom: 10px; padding: .8em 1em; text-align: center;
	background-image: -moz-linear-gradient( 90deg, rgb(250,197,36) 0%, rgb(253,234,176) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(250,197,36) 0%, rgb(253,234,176) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(250,197,36) 0%, rgb(253,234,176) 100%);
	}
	#top-sns li.twbtn {
		display: none;
	}
}


/* FOOTER
---------------------------------------- */
#application {padding: 25px; background: #f1f1eb; border-radius: 6px;}
#application p {line-height: 1.8;}
	@media screen and (max-width: 768px) {
		#application {text-align: center;}
		#application .fL, #application .fR {float: none;}
		#application p {margin-bottom: 10px;}
	}
	@media screen and (max-width: 480px) {
		#application {padding: 20px;}
		#application p {line-height: 1.3; text-align: left;}
	}

#secretariat {margin: 40px auto 0; border: #e81625 2px solid; border-radius: 10px; padding: 30px 40px;}
#secretariat h2 {color: #e70e1e; border: none; padding: 0; margin: 0; font-size: 22px;}
#secretariat h2:after {background: none;}
#secretariat .fwB {font-weight: bold;}
#secretariat .tel {font-size: 20px; font-weight: bold;}
	@media screen and (max-width: 480px) {
		#secretariat {padding: 20px;}
	}

#pagetop {margin-top: 40px;}

#footer {border-top: #eee 3px solid; color: #444; margin-top: 20px; padding: 20px 0 30px; font-size: 70%;}
#footer ul li {display: flex; vertical-align: bottom; padding-bottom: 1rem;}
#footer ul li:first-child {margin-right: 30px;}
#footer .copyright {margin-top: -15px; text-align: right;}
	@media screen and (max-width: 768px) {
		#footer ul {text-align: center;}
		#footer .copyright {margin-top: 20px; text-align: center;}
	}
	@media screen and (max-width: 480px) {
		#footer ul li:first-child {margin-right: 0; margin-bottom: 20px;}
	}

/* TOP
---------------------------------------- */
#visual {background: url(../img/top_visual_back.png) repeat-x 0 0;}
#visual .pageTitle {text-align: center; background: #fff;padding: 0; margin: 0;}

.indexpage h3 {text-align: center;}
.indexpage h4 {color: #f08630; font-size: 20px; margin: 25px 0 10px;}
.indexpage h4:before { content: "●"; color: #f08630; font-size: 30px; margin-right: 10px;}
.indexpage a {color: #3652bb; text-decoration: underline;}

.indexpage .news {margin-top: 30px;}
.indexpage .news h2 {color: #fff; text-align: center; background: #f08630; border: none; padding: 10px; }
.indexpage .news h2:after {background: none;}
.indexpage .news div { padding-top: 5px; text-align:left; }
.indexpage .news div dl {display: table; font-size:14px; width: 100%; padding: 10px 0 15px; border-bottom: #dfdfdf 1px dashed;}
.indexpage .news div dl dt ,
.news div dl dd {display: table-cell; text-align: left; vertical-align: middle;}
/*.indexpage .news div dl dt { width:8em; }*/
.indexpage .news div dl dt { width:8.5em; }
.indexpage .news div dl dd.job {background: #f57d86; color: #fff; width:5em; text-align:center; }
.indexpage .news div dl dd.job-after {background: #7db1f5; color: #fff; width:5em; text-align:center; }
.indexpage .news div dl dd.fu {background: #77c8ed; color: #fff; width:6em; text-align:center; }
.indexpage .news div dl dd a { margin-left:10px; }
.btnOldNews { text-align:right; margin-top:10px; }
.btnOldNews span { cursor:pointer; background:#ECD2D2; padding:2px 10px; }
.btnOldNews span:hover { background:#FFEEEE; }
.oldNews { display:none; }
/*新着情報twitterアイコン*/
.twbtn2 {
	text-align: center;
	margin-left: 10px;
}
.twbtn2 a {
	color:#fff;
	background-color:#1DA1F3;
	width: 6em;
	display: inline-block;
	border-radius: 5px;
	padding: 2px 5px;
	text-decoration: none;
}

/*404*/
.head_503 h1{
	font-size: 1.5rem;
    line-height: 1.5rem;
	margin: 3rem 0 2.25rem;
	text-align: center;
}
.head_503 p {
	text-align: center;
}


/*新着情報　web版*/
.web-version {color: #fff;background-color: #C00000;display: inline-block;text-align: center;padding: 0 4px;vertical-align: 10%;font-size: 12px;}

/*新着情報雇用支援セミナーアイコン*/
.indexpage .news div dl dd.seminer {background: #17A34C; color: #fff; width:9em; text-align:center; }
.indexpage .news div dl dd.outreach {background: #FFC000; color: #fff; width:9em; text-align:center; }

@media screen and (max-width: 768px) {
	.indexpage .news {border: 1px solid #F9C9A3;}
	.indexpage .news h2 {background: #FEF1C9; border-bottom: 1px solid #F9C9A3; color: #f08630; float: none; font-size: 12px; margin: 0; padding: 1em 0; width: 100%;}
	.indexpage .news div {float: none; padding: 10px; width: auto;}
	.indexpage .news div dl {display: block; width: 100%; padding: 10px 0 15px; border-bottom: #dfdfdf 1px dashed;}
	.indexpage .news div dl dt {display: inline-block; font-size: 12px;}
	.indexpage .news div dl dd {text-align: left;}
	.indexpage .news div dl dd.job {display: inline-block; font-size: 10px; margin-top: -5px; padding: .2em .5em;}
	.indexpage .news div dl dd.seminer {display: inline-block; font-size: 10px; margin-top: -5px; padding: .2em .5em;}
	.indexpage .news div dl dd.job-after {display: inline-block;font-size: 10px; margin-top: -5px; padding: .2em .5em;}
	.twbtn2 { margin-left: 5px;}
	.twbtn2 a { font-size: 10px; padding: .2em .5em;}
}

.indexpage .merit {padding-bottom: 50px; background: url(../img/top_section_border.png) repeat-x left bottom;}
.indexpage .merit h2 {text-align: center; font-size: 33px; border: none; position: inherit;}
.indexpage .merit h2:after {background: none;}
.indexpage .merit p {text-align: center;}
.indexpage .merit ul {background: #ffdb3f; padding: 20px 0 20px 30px; width: 100%;}
.indexpage .merit ul li {background: #fff; border-radius: 8px; width: 280px; float: left; margin-right: 30px;}
.indexpage .merit ul li dl dt {padding: 15px 10px 10px 85px; background: url(../img/top_merit2.png) no-repeat 10px 10px; color: #e70e1e; font-size: 21px; font-weight: bold;}
.indexpage .merit ul li dl dd {padding: 0 10px 10px; font-size: 14px; font-weight: bold;}
.indexpage .merit ul li:first-child dl dt {background-image: url(../img/top_merit1.png);}
.indexpage .merit ul li:last-child dl dt {background-image: url(../img/top_merit3.png);}
@media screen and (max-width: 768px) {
	.indexpage .merit h2 {font-size: 20px; padding-left: 0;}
	.indexpage .merit ul {padding: 20px;}
	.indexpage .merit ul li {width: auto; float: none; margin-right: 0; margin-top: 20px; padding: 10px 20px;}
	.indexpage .merit ul li:first-child {margin-top: 0;}
	.indexpage .merit ul li dl dt {background-size: 26px auto; background-position: left center; line-height: 1.2; padding: 0 0 0 32px;}
	.indexpage .merit ul li dl dd {margin-top: 5px; padding: 0;}
}
@media screen and (max-width: 480px) {
	.indexpage .merit ul li dl dt {background-size: 50px auto; background-position: left center; line-height: 1.2; padding: 0 0 0 60px; min-height: 50px;}
}

.indexpage .about {padding-bottom: 50px; background: url(../img/top_section_border.png) repeat-x left bottom;}
.indexpage .about dl {display: table; width: 100%;}
.indexpage .about dt {display: table-cell; position: relative; width: 30%; padding: 20px 30px; border: #ccc 1px solid; background: #fa9539; color: #fff;}
.indexpage .about dd {display: table-cell; padding: 20px 30px; border: #ccc 1px solid;}
.indexpage .about dd ul {text-align: right; margin-top: 10px;}
.indexpage .about dl.gray {margin-top: 5px;}
.indexpage .about dl.gray dt {background: #f1f1eb; color: #444;}
.indexpage .about .about_btn {text-align: center; margin-top: 25px;}
.indexpage .about .about_btn a:hover {opacity: .7;}

.indexpage .flow sup {font-size: 65%;}
/*.indexpage .flow .flowchart {display: table; width: 100%;}
.indexpage .flow .flowchart li {display: table-cell; padding-right: 10px;}*/
@media screen and (max-width: 480px) {
	.indexpage .flow .flowchart {display: block;}
	.indexpage .flow .flowchart li {display: block; margin-bottom: 10px; padding: 0;}
}

/* class
---------------------------------------- */
.cole70e1e {color: #e70e1e;}
.cole60012 {color: #e60012;}




@media print{
.container { width:960px; }
.hidePC { display:none; }
#gnav li { width:12%;}
}

/*TOP　全体の流れ*/




/*TOP　全体の流れ*/
@media screen and (min-width: 768px) {

.indexpage .flow .flowchart {
	display: grid;
	gap: 10px;
}

.indexpage .flow li {
	display: grid;
	
}

.indexpage .flow #flow1 {
	grid-row: 1 / 3;
	grid-column: 1 / 2;
}
.indexpage .flow #flow2 {
	grid-row: 1 / 3;
	grid-column: 2 / 3;
}
.indexpage .flow #flow3 {
	grid-row: 1 / 2;
	grid-column: 3 / 4;
}
.indexpage .flow #flow4 {
	grid-row: 1 / 2;
	grid-column: 4 / 5;
}
.indexpage .flow #flow5 {
	grid-row: 1 / 2;
	grid-column: 5 / 6;
}
.indexpage .flow #flow6 {
	grid-row: 1 / 2;
	grid-column: 6 / 7;
}
.indexpage .flow #flow7 {
	grid-row: 2 / 3;
	grid-column: 3 / 7;
}

.indexpage .flow .flowchart img {
	max-width: none;
}
}