@charset "utf-8";

#header #hbox2,
.more{
	display:none;
}

#mainvis{
	position:relative;
}
#mainvis .mf-top{
	width:auto;
}
#mainvis .cimg img{
	width:100%;
}
#mainvis .ctext {
	width: 420px;
	height: auto;
	position:absolute;
	left:calc(50% - 490px);
	bottom:230px;
	background-color: rgba(255, 255, 255, 0.8);
	padding:30px 50px;
}
#mainvis .ctext .cat {
	border: 1px solid #343434;
	margin-bottom: 5px;
	text-align: center;
	color: #343434;
}
#mainvis .ctext h1 {
	margin:10px 0;
	color: #133084;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
#mainvis .ctext h1 span {
	background: #133084;
	display: inline-block;
	color: #fff;
	line-height: 1em;
	font-size: 1.8em;
	padding:10px;
}
#mainvis .ctext h1 small {
	display: inline-block;
	font-size: 1.4em;
}
#mainvis .ctext .salary {
	font-size: 1.38em;
}
#mainvis .ctext .salary strong {
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
	color: #133084;
	font-size: 2.3em;
	line-height:1em;
}
#mainvis .ctext .salary strong:last-child {
	font-size: 3.2em;
}

#mainvis ul{
	position:absolute;
	right:0;
	left:calc(50% + 140px);
	top:30%;
	z-index:9;
}
#mainvis ul li{
	position:relative;
	padding:15px 10px;
	padding-right:8vw;
	line-height:1em;
	margin-bottom:10px;
	background:#0068b6;
    font-size: 24px;
    color: #fff;
}
#mainvis ul li:before{
	content:"";
	width:23px;
	position:absolute;
	top:0;
	bottom:0;
	right:100%;
	background:url(../img/gyousyu/mic1.png) center center no-repeat;
	background-size:100% 100%;
}

#mainvis ul li:nth-of-type(2){
	background:#1b82de;
	margin-left:40px;
}
#mainvis ul li:nth-of-type(3){
	background:#014190;
	margin-left:80px;
}
#mainvis ul li:nth-of-type(4){
	background:#2280bb;
	margin-left:120px;
}
#mainvis ul li:nth-of-type(2):before{
	background-image:url(../img/gyousyu/mic2.png);
}
#mainvis ul li:nth-of-type(3):before{
	background-image:url(../img/gyousyu/mic3.png);
}
#mainvis ul li:nth-of-type(4):before{
	background-image:url(../img/gyousyu/mic4.png);
}


#mainvis #mf1{
	position: relative;
	margin:-20px 0 20px 0;
}
#mainvis #mf1 .mf-inner{
}
#mainvis #mf1 ul {
	width: 980px;
	display: flex;
	justify-content: space-between;
	margin:0 auto;
	position:static;
}
#mainvis #mf1 ul li {
	width: 230px;
	height: 200px;
	background-color: #133084;
	background-image: url(../img/gyousyu/bg1.png);
	background-repeat: no-repeat;
	background-position: top left;
	padding: 30px 0;
	margin: 0;
	text-align: center;
	color: #fff;
	font-size: 1.25em;
	line-height: 1.5em;
	position: relative;
}
#mainvis #mf1 ul:after{
	display:none;
}
#mainvis #mf1 ul li strong {
	display: block;
	color: #fee263;
	font-size: 1.24em;
}
#mainvis #mf1 ul li img {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -40px;
}


/*------------------------------------*/

.mf .ttl {
	margin-top: -140px;
	margin-bottom: 30px;
	text-align: center;
}
.mf .ttl span {
	display: inline-block;
	padding: 35px;
	background: #fbfbfb;
	color: #133084;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	z-index:  1;
	white-space: nowrap;
	font-size:1.38em;
}

/*------------------------------------*/


#mf2 {
	background: #f4f4f4;
}
#mf2 .mf-inner {
	padding: 60px 0 60px;
}
#mf2 .cbox {
	margin-bottom: 60px;
	position: relative;
}
#mf2 .cbox:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 16px 0 16px;
	border-color: #1c4596 transparent transparent transparent;
	position: absolute;	
	bottom: -40px;
	left: 50%;
	margin-left: -16px;
}
#mf2 .cbox:last-child:after {
	display: none;
}
#mf2 .cbox .cbox-inner {
	display: flex;
	justify-content: space-between;
	background: #fff;
	max-height: 240px;
	overflow: hidden;
}
#mf2 .cbox .cimg {
	width: 444px;
	border-right: 14px solid #3150a9;
}
#mf2 .cbox .ctext {
	width: 480px;
	padding: 50px 0;
}
#mf2 .cbox .ctext h3 {
	margin-bottom: 15px;
	line-height: 1em;
	font-size: 1.3em;
	color: #133084;
}
#mf2 .cbox .ctext h3 em {
	font-size: 1.3em;
	font-style: normal;
	padding-right: 5px;
}
#mf2 .cbox .ctext p {
	padding-left: 27px;
}

#mf3 .mf-top{
	width: auto;
	background-repeat: no-repeat;
	background-position: bottom right;
}
#mf3 .mf-inner {
	position: relative;
}
#mf3 .ttl {
	margin-top: 0;
	position: absolute;
	left: 85%;
}
#mf3 .ttl span {
	background-color: transparent;
}
#mf3 #int1 {
	margin-bottom: 100px;
}
#mf3 #int1 .cimg {
	position: relative;
}
#mf3 #int1 .cimg img {
	width: 75%;
}
#mf3 .app {
	width: 430px;
	position: absolute;
	bottom: -80px;
	right: calc((100% - 1000px) / 2);
}
#mf3 .app .name {
	margin-bottom: 20px;
	display: inline-block;
	background: #f4f4f4;
	padding: 15px 70px;
	color: #133084;
	font-size: 1.8em;
}
#mf3 .app .name small {
	display: block;
	font-size: 0.5em;
}
#mf3 .app p:not(.name) {
	display: inline-block;
	background-color: #133084;
	background-image: url(../img/gyousyu/bg1.png);
	background-repeat: no-repeat;
	background-position: top left;
	padding: 50px 70px;
	font-size: 1.3em;
	color: #fff;;
	line-height: 2em;
}
#mf3 #int2 {
	position: relative;
}
#mf3 #int2 .ctext {
	z-index: 2;
}
#mf3 #int2 .cbox-inner {
	width: 1000px;
	min-height: 1136px;
	margin: auto;
	padding-left: 40px;
}
#mf3 #int2 h3 {
	margin: 20px 0 10px;
	font-size: 1.44em;
	color: #133084;
	position: relative;
}
#mf3 #int2 h3:before {
	content: "Q.";
	display: block;
	position: absolute;
	top: 0;
	left: -40px;
}
#mf3 #int2 .ans {
	margin-bottom: 10px;
	font-size: 1.44em;
	color: #767676;
	position: relative;
}
#mf3 #int2 .ans:before {
	content: "A.";
	display: block;
	position: absolute;
	top: 0;
	left: -40px;
}
#mf3 #int2 p:not(.ans) {
	margin-bottom: 25px;
	font-size: 0.75em;
}
#mf3 #int2 .cimg {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
#mf3 #int2 .cimg p {
	margin-bottom: 0;
}

#mf4 {
	background: #f4f4f4;
}
#mf4 .mf-inner {
	padding: 180px 0 80px;
}
#mf4 .clist {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#mf4 .clist .cbox {
	width: 33.333333%;
	background-color: #133084;
	background-image: url(../img/gyousyu/bg1.png);
	background-repeat: no-repeat;
	background-position: top left;
	padding: 50px;
	color: #fff;
	position: relative;
}
#mf4 .clist .cbox:nth-of-type(2n) {
	background-color: #fff;
	background-image: url(../img/gyousyu/bg2.png);
	color: #133084;
}
#mf4 .clist .cbox .abs {
	position: absolute;
	top: 30px;
	left: 30px;
}
#mf4 .clist .cbox h3 {
	margin: 0 0 30px 70px;
	font-size: 1.444em;
}

#mf5 .mf-top {
	width: auto;
}
#mf5 .mf-inner {
	padding-bottom: 100px;
	position: relative;
}
#mf5 .ttl {
	position: absolute;
	left: 8%;
	margin-top: 0;
}
#mf5 .ttl span {
	background: transparent;
}
#mf5 #mess1 {
	margin-bottom: 70px;
}
#mf5 #mess1 .cimg {
	position: relative;
	text-align: right;
}
#mf5 #mess1 .cimg img {
	width: 75%;
}
#mf5 .app {
	width: 430px;
	position: absolute;
	bottom: 50px;
	left: 0;
}
#mf5 .app .name {
	display: inline-block;
	background: #f4f4f4;
	padding: 15px 70px;
	color: #133084;
	font-size: 1.8em;
	text-align: center;
}
#mf5 .app .name small {
	display: block;
	font-size: 0.5em;
}
#mf5 #mess2 {
	width: 1000px;
	margin: auto;
}
#mf5 #mess2 .cbox-inner {
	width: 80%;
	margin: auto;
}
#mf5 #mess2 p {
	margin-bottom: 30px;
	line-height: 2em;
}

#mf6 {
	background: #f4f4f4;
}
#mf6 .mf-inner {
	padding: 60px 0px;
}
#mf6 .ttl span {
	background: #133084;
	color: #fbfbfb;
}
#mf6 .cbox {
	padding: 50px 0;
	background: #fff;
}
#mf6 table{
	width: 80%;
	margin:0 auto;
	border-top:#dcdcdc solid 1px;
}
#mf6 table tr{
	border-bottom:#dcdcdc solid 1px;
}
#mf6 table th {
	width: 25%;
}
#mf6 table th,
#mf6 table td{
	padding:20px 0;
	vertical-align:top;
}

#mf6 .kw {
    font-size: 0.8em;
}

#mf7 .mf-inner {
	padding: 180px 0 60px;
}
#mf7 .ttl span {
	background-color: #f4f4f4;
}
#form {
	width: 90%;
	margin: auto;
}
#form dl{
	margin:0 auto 20px auto;
}
#form dl:last-of-type dt{
	align-self:flex-start;
}
#form dt{
	position:relative;
	font-size:1.12em;
	font-weight:bold;
	padding:10px 0 5px;
	margin:0 15px 0 0;
}
#form dt span{
	display:inline-block;
	line-height:1em;
	color:#fff;
	background-color:#ff3847;
	font-size:0.81em;
	font-weight:bold;
	padding:5px;
	margin:0 0 0 10px;
}
#form dd{
	font-size:1em;
	position:relative;
}

#form dl.list{
	display:flex;
	align-items:center;
	margin:0 0 20px 0;
}
#form dl.list dt{
	margin:0 20px 0 0;
}
#form .list dd{
	font-size:1.75em;
	font-weight:bold;
}


#form input[type="text"],
#form textarea{
	background:#f1f7fb;
	border: 1px solid #b0cada;
	width:100%;
	padding:13px;
	line-height:2em;
}
#form select {
	background:#f1f7fb;
	border: 1px solid #b0cada;
	margin-bottom: 10px;
	padding:13px;
	font-size: 1em;
}
#form input.w30{
	width:30%;
	margin:0 10px 0 0;
}
#form input.w50{
	width:50%;
	margin:0 10px 0 0;
}

#form input[type="radio"],
#form input[type="checkbox"]{
	display:none;
}
#form label{
	display:inline-block;
	position:relative;
	padding:0 0 0 35px;
	margin:13px 20px 13px 0;
}
#form label:before{
	content:"";
	display:inline-block;
	width:30px;
	height:30px;
	border-radius:100%;
	background:#b9cfde;
	border:#b9cfde solid 5px;
	margin:0 5px 0 0;
	position:absolute;
	left:0;
	box-sizing:border-box;
}
#form input[type="checkbox"] + label:before{
	border-radius: 3px;
}
#form input[type="radio"]:checked + label:before{
	background:#133084;
	border:#b9cfde solid 5px;
}
#form input[type="checkbox"]:checked + label:before{
	background:#133084;
	border:#b9cfde solid 5px;
}
#form .sbtn{
	width:auto;
	margin:0 auto;
	text-align:center;
}
#form .sbtn input{
	display: inline-block;
	margin: auto;
	padding:15px 30px 15px 50px;
	background:#133084 url(../img/top/ic1.png) 30px center no-repeat;
	color:#fff;
	position:relative;
	cursor:pointer;
	border: none;
	font-size: 1.125em;
}





@media screen and (max-width: 800px) {
	.more{
		display:block;
		position:absolute;
		left:20px;
		right:20px;
		bottom:60px;
		color:#014190;
		border:#014190 solid 3px;
		background:#fff;
		font-weight:bold;
		text-align:center;
		padding:10px;
		z-index:99;
	}

	.smpheader .gmenu li:nth-of-type(2){
		display:none;
	}

	#pankuzu{
		margin:0;
	}


	/*---------------------------*/
	#mainvis{
		height:100%;
	}
	#mainvis .ctext{
		width: 80vw;
		text-align:center;
		background-color: #fcfcfc;
		position:static;
		padding: 20px;
		margin:0 auto;
	}
	#mainvis .ctext h1 {
		display:block;
		margin-bottom: 10px;
	}
	#mainvis .ctext h1 small {
		padding: 0;
	}
	#mainvis .ctext h1 span {
		width: 100%;
		padding: 7px 0;
	}
	#mainvis .ctext .salary {
		font-size: 1em;
	}

	#mainvis #mf1{
		margin:0 0 20px 0;
	}
	#mainvis #mf1 .mf-inner{
		position: static;
		top: auto;
	}
	#mainvis #mf1 ul {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	#mainvis #mf1 ul li {
		width: 46%;
		margin: 0 1% 10px;
	}
	#mainvis #mf1 ul li img {
		width: 60px;
		margin-left: -30px;
	}


	/*------------------------------------*/

	.mf .ttl  {
		margin-top: -150px;
	}
	.mf .ttl span {
		font-size:1.18em;
	}

	/*------------------------------------*/


	#mf2 {
		margin-top: 50px;
	}
	#mf2 .mf-inner {
		padding: 80px 2vw 60px;
	}
	#mf2 .ttl {
		margin-bottom: 20px;
	}
	#mf2 .cbox .cbox-inner {
		display: block;
		max-height: 100%;
	}
	#mf2 .cbox .cimg {
		width: 100%;
		border-right: none;
		border-bottom: 10px solid #3150a9;
	}
	#mf2 .cbox .ctext {
		width: 100%;
		padding: 20px;
	}
	#mf2 .cbox .ctext h3 {
		line-height: 1.3;
	}
	#mf2 .cbox .ctext p {
		padding-left: 0;
	}

	#mf3 {
		height: 50rem;
		overflow: hidden;
		position: relative;
	}
	#mf3:after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		bottom: 0;
		background: -moz-linear-gradient(top, rgba(255,255,255,0.00) 40%, #fff 80%, #fff);
		background: -webkit-linear-gradient(top, rgba(255,255,255,0.00) 40%, #fff 80%, #fff);
		background: linear-gradient(to bottom, rgba(255,255,255,0.00) 40%, #fff 80%, #fff);
		z-index: 9;
	}
	#mf3.op {
		height: auto;
	}
	#mf3.op:after {
		display: none;
	}

	#mf3 .mf-top {
		background-image: none !important;
	}
	#mf3 .ttl {
		left: 89%;
	}
	#mf3 .ttl span {
		padding: 20px 0;
	}
	#mf3 #int1 {
		margin-bottom: 30px;
	}
	#mf3 #int1 .cimg img {
		width: 85%;
	}
	#mf3 .app {
		width: 90vw;
		position: static;
		margin: -50px auto 50px;
	}
	#mf3 .app .name {
		margin-bottom: 10px;
		padding: 12px 14vw;
		font-size: 1.4em;
		line-height: 1.2em;
	}
	#mf3 .app p:not(.name) {
		padding: 12px 14vw;
		font-size: 1.1em;
		line-height: 1.8em;
	}

	#mf3 #int2 {
		width: 100%;
	}
	#mf3 #int2 .cbox-inner {
		width: 100%;
		height: auto;
		padding-bottom: 0;
		padding-right: 6.6vw;
	}
	#mf3 #int2 h3,
	#mf3 #int2 .ans {
		font-size: 1.2em;
	}
	#mf3 #int2 h3:before,
	#mf3 #int2 .ans:before {
		left: -25px;
	}
	#mf3 #int2 p:not(.ans) {
		font-size: 0.85em;
	}
	#mf3 #int2 .cimg {
		width: 100vw;
		position: static;
		top: auto;
		right: auto;
		margin-left: -10.6vw;
	}


	#mf4 .mf-inner {
		padding-bottom: 40px;
	}
	#mf4 .ttl {
		top: 15px;
	}
	#mf4 .clist {
		display: block;
	}
	#mf4 .clist .cbox {
		width: 96vw;
		margin: 10px auto;
		padding: 30px;
	}
	#mf4 .clist .cbox .abs {
		top: 20px;
		left: 20px;
	}

	#mf5 {
		height: 40rem;
		overflow: hidden;
		position: relative;
	}
	#mf5:after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 40%;
		bottom: 0;
		background: -moz-linear-gradient(top, rgba(255,255,255,0.00) 40%, #fff 80%, #fff);
		background: -webkit-linear-gradient(top, rgba(255,255,255,0.00) 40%, #fff 80%, #fff);
		background: linear-gradient(to bottom, rgba(255,255,255,0.00) 40%, #fff 80%, #fff);
		z-index: 9;
	}
	#mf5.op {
		height: auto;
	}
	#mf5.op:after {
		display: none;
	}

	#mf5 .mf-top {
		background: transparent;
	}
	#mf5 .mf-inner {
		padding-bottom: 90px;
	}
	#mf5 .ttl {
		left: 0;
	}
	#mf5 .ttl span {
		padding-left: 15px;
		padding-right: 15px;
	}
	#mf5 #mess1 {
		margin-bottom: 20px;
	}
	#mf5 #mess1 .cimg img {
		width: 85%;
	}
	#mf5 .app {
		width: 90vw;
		position: static;
		margin: -40px auto 30px;
	}
	#mf5 .app .name {
		margin-bottom: 10px;
		padding: 12px 14vw;
		font-size: 1.4em;
		line-height: 1.2em;
	}
	#mf5 #mess2 {
		width: 100%;
	}
	#mf5 #mess2 .cbox-inner {
		width: 90vw;
	}

	#mf6 .mf-inner {
		padding-top: 80px;
	}
	#mf6 h2 {
		margin-bottom: 20px;
	}
	#mf6 .cbox {
		margin: 0 2vw;
	}
	#mf6 table {
		width: 90%;
	}
	#mf6 table th {
		display: block;
		padding: 15px 0 3px;
	}
	#mf6 table td {
		display: block;
		padding: 3px 0 15px 18px;
	}

	#mf7 .mf-inner{
		padding-left: 2vw;
		padding-right: 2vw;
	}
	#mf7 table{
		width:auto;
	}
	#mf7 table th,
	#mf7 table td{
		font-size:1em;
	}

	#form dl{
		margin:0 auto 20px auto;
	}
	#form dt{
		float:none;
		text-align:left;
		width:auto;
		padding:0;
		margin:0 0 10px 0;
	}
	#form dt span{
		position:static;
	}
	#form dd{
		float:none;
		width:auto;
	}


	#form dl.list{
		display:block;
	}
	#form dl.list dt{
		margin:0 0 10px 0;
	}


	#form input.w30{
		width:50%;
		margin:0;
	}
	#form input.w50{
		width:100%;
		margin:0;
	}




}










@media screen and (max-width: 500px) {

}