/*********************************************************************************************************************************

	投稿記事（Position／募集職種 エントリー）

*********************************************************************************************************************************/


/*body･･････････････････････････････････････････････････････････････*/
body{
	background:var(--BK_Pattern_Tree);
}


/*メインイメージ････････････････････････････････････････････････････*/
#contents>#section01{
}
	#section01>div{/*baseArea*/
		position:relative;
		min-height:380px;
		width:1000px;
		margin-top:100px;
	}
		#section01>div>div{/*職種、キャッチコピー、メインテキスト*/
		}
			#section01>div>div>h2{/*職種*/
			}
				#section01>div>div>h2 *{
					line-height:1.5em;
				}
				#section01>div>div>h2>p{/*職種（英語）*/
					margin-top:10px;
					font-size:56px;
					letter-spacing:0.01em;
				}
				#section01>div>div>h2>span{/*職種（日本語）*/
					padding-left:15px;
					font-size:15px;
					background:url(../images/ico_dot2.png) left center no-repeat;
				}
			#section01>div>div>strong{/*キャッチコピー*/
				display:inline-block;
				margin-top:13px;
			}
				#section01>div>div>strong>span{
					font-size:18px;
					background-color:white;
				}
			#section01>div>div>p{/*メインテキスト*/
				max-width:240px;
				margin-top:40px;
				font-size:13px;
			}
		#section01>div>img{/*メインイメージ画像*/
			position:absolute;
			top:0;
			left:auto;
			right:0;
			bottom:auto;
			height:380px;
			width:696px;
			border-radius:30px;
		}


/*CoreValues、この仕事で得られること････････････････････････････････*/
#contents>section#section02{
	padding-top:0;
}
	#section02>div{/*baseArea*/
		width:860px;
	}
		#section02>div>h3{/*CoreValues、この仕事で得られること*/
			width:29%;
			float:left;
		}
			#section02>div>h3>p{/*CoreValues*/
				margin-top:18px;
				font-size:32px;
				line-height:1.0em;
				letter-spacing:0.02em;
			}
			#section02>div>h3>span{/*この仕事で得られること*/
				display:inline-block;
				margin-top:18px;
				padding-left:16px;
				font-size:14px;
				line-height:1.0em;
				background:url(../images/ico_dot2.png) left center no-repeat;
			}
		#section02>div>ul{/*リスト*/
			width:71%;
			float:right;
		}
			#section02>div>ul>li{
				display:inline-block;
				width:100%;
			}
			#section02>div>ul>li:nth-of-type(n+2){/*2番目以降*/
				margin-top:50px;
			}
				#section02>div>ul>li>img{/*01～03*/
					display:inline-block;
					height:27px;
					width:44px;
					margin-top:30px;
					float:left;
				}
				#section02>div>ul>li>div{/*タイトル、テキスト*/
					width:calc(100% - 85px);
					float:right;
				}
					#section02>div>ul>li>div>em{/*タイトル*/
						font-size:19px;
						font-weight:bold;
					}
					#section02>div>ul>li>div>p{/*テキスト*/
						margin-top:5px;
						font-size:13px;
						line-height:1.8em;
					}


/*コンテンツ（本文・画像）･･････････････････････････････････････････*/
#contents>section#section03{
	padding-top:20px;
	padding-bottom:0;
	border-bottom:solid 1px white;
	box-sizing:border-box;
}
#contents>section#guideline{/*section04「募集要項」セクション*/
	padding-top:0;
	background-color:var(--Gray_01);
}
	#section03>div{/*baseArea*/
		text-align:center;
		text-align-last:center;
		max-width:100%;
	}

		/*タブ切り替えBOX･･･････････････････････････････････････････*/
		.s3_tabSswitch{
			display:inline-block;
			height:auto;
			width:100%;
			overflow-x:hidden;
		}

			/*タブ（ラベル）････････････････････････････････････････*/
			.s3_tabSswitch>label{/*タブが 4 つの場合（基本）*/
				display:inline-block;
				height:70px;
				width:240px;
				margin-left:0 !important;
				border-radius:10px 10px 0 0;
				background:url(../images/tab_normal.png) center top /cover no-repeat;
			}
			.s3_tabSswitch>label:first-of-type{/*タブが 4 つの場合（基本）*/
				margin-left:calc((100% - 1000px)/2) !important;
			}
				.s3_tabSswitch>label>div{/*テキスト*/
					display:inline-block;
					height:70px;
					width:100%;
					text-align:center;
					text-align-last:center;
				}
					.s3_tabSswitch>label>div>p{/*テキスト*/
						display:inline-block;
					}
						.s3_tabSswitch>label>div>p>span{/*テキスト*/
							display:table-cell;
							height:70px;
							width:100%;
							font-size:17px;
							font-weight:bold;
							letter-spacing:0;
							line-height:1.3em;
							vertical-align:middle;
						}
			.s3_tabSswitch>input[name="tab_switch"]{/*チェック用丸ポチマークを非表示にする*/
				display:none;
			}
			.s3_tabSswitch>label:hover{
				cursor:pointer;
			}
			.s3_tabSswitch>#tab01,
			.s3_tabSswitch>#tab02,
			.s3_tabSswitch>#tab03,
			.s3_tabSswitch>#tab04{/*タブ1～4*/
				color:white;
			}
			.s3_tabSswitch>#tab01:checked + .tab_label,
			.s3_tabSswitch>#tab02:checked + .tab_label,
			.s3_tabSswitch>#tab03:checked + .tab_label,
			.s3_tabSswitch>#tab04:checked + .tab_label{/*タブ 01～04（アクティブ時）*/
				background:url(../images/tab_active.png) center top /cover no-repeat;
			}
				.s3_tabSswitch>#tab01:checked + .tab_label>div>p>span,
				.s3_tabSswitch>#tab02:checked + .tab_label>div>p>span,
				.s3_tabSswitch>#tab03:checked + .tab_label>div>p>span,
				.s3_tabSswitch>#tab04:checked + .tab_label>div>p>span{/*テキスト*/
					color:white;
				}
			section #tab01_content,
			section #tab02_content,
			section #tab03_content,
			section #tab04_content{/*タブ*/
				display:none;
			}
			section #tab01:checked ~ #tab01_content,
			section #tab02:checked ~ #tab02_content,
			section #tab03:checked ~ #tab03_content,
			section #tab04:checked ~ #tab04_content{/*チェックしたタブに連動して、後ろの要素を表示*/
				display:block;
			}

			/*「システムエンジニア」タブ内のコンテンツ（01～04）････････････････*/
			.s3_tabSswitch>ul{/*タブ切り替えで表示される要素*/
				display:inline-block;
				width:100%;
				margin-top:-1px;/*タブとの隙間埋め*/
				background-color:var(--Gray_01);
			}
			section#section03 .s3_tabSswitch>ul{/*タブ切り替えで表示される要素*/
				padding-bottom:100px;
			}
				.s3_tabSswitch>ul>li{/*タブ（01）*/
					display:inline-block;
					width:100%;
					text-align:center;
					text-align-last:center;
				}
					.s3_tabSswitch>ul>li>div{/*コンテンツの表示エリア（白背景）*/
						display:inline-block;
						width:860px;
						margin-top:120px;
					}
					section#guideline .s3_tabSswitch>ul>li>div{/*section04「募集要項」セクション*/
						margin-top:65px;
					}
						.s3_tabSswitch>ul>li>div>h3{/*セキュリティエンジニア*/
						}
							.s3_tabSswitch>ul>li>div>h3>span{/*セキュリティエンジニア*/
								display:inline;
								font-size:19px;
								padding:0 8px;
								background-color:white;
							}
						.s3_tabSswitch>ul>li>div>div{/*採用情報、仕事内容*/
							margin-top:38px;
						}
							.s3_tabSswitch>ul>li>div>div>h4{/*採用情報*/
								display:inline-block;
								width:160px;
								float:left;
							}
								.s3_tabSswitch>ul>li>div>div>h4>span{/*採用情報*/
									display:inline;
									color:white;
									font-size:16px;
									padding:0 12px;
									background-color:var(--DarkBlue_01);
								}
							.s3_tabSswitch>ul>li>div>div>ul{/*仕事内容、セキュリティエンジニアとして…*/
								display:inline-block;
								width:700px;
								font-size:13px;
								float:right;
							}
								.s3_tabSswitch>ul>li>div>div>ul>li{/*仕事内容、セキュリティエンジニアとして…*/
									display:inline-block;
									width:100%;
								}
								section#section03 .s3_tabSswitch>ul>li>div>div>ul>li:nth-of-type(n+2){/*2番目以降*/
									margin-top:70px;
									padding-top:70px;
									border-top:dotted 1px var(--DarkBlue_01);
									box-sizing:border-box;
								}
								section#guideline .s3_tabSswitch>ul>li>div>div>ul>li:nth-of-type(n+2){/*section04「募集要項」セクション*/
									margin-top:47px;
								}
									.s3_tabSswitch>ul>li>div>div>ul>li>em{/*仕事内容*/
										width:150px;
										margin-top:0.2em;
										font-weight:bold;
										line-height:1.75em;
										float:left;
										
										
										padding-left:20px;
										background:url(../images/ico_dot_w.png) left center no-repeat;

									}
									.s3_tabSswitch>ul>li>div>div>ul>li>p{/*セキュリティエンジニアとして…*/
										width:550px;
										line-height:1.75em;
										float:right;

									}


/*コンテンツ（本文・画像）･･････････････････････････････････････････*/
#contents>section#flow{
	padding-top:0;
	background-color:var(--Gray_01);
}
	#flow>div{/*baseArea*/
		width:100%;
		text-align:center;
		text-align-last:center;
	}
		#flow>div *{
			display:inline-block;
			width:100%;
		}
		#flow>div>div{
			width:1000px;
		}
			#flow>div>div>div{/*テキストエリア*/
			}
				#flow>div>div>div>h3{/*サブタイトル*/
					width:20%;
					float:left;
				}
					#flow>div>div>div>h3>p{/*Flow*/
						font-size:34px;
					}
					#flow>div>div>div>h3>span{/*選考フロー*/
						line-height:1.0em;
						font-size:12px;
					}
				#flow>div>div>div>ul{/*リスト*/
					width:80%;
					float:right;
				}
					#flow>div>div>div>ul>li:not(.notes){/**/
						padding:28px 44px;
						box-sizing:border-box;
						border-radius:15px;
						background-color:white;
					}
					#flow>div>div>div>ul>li.notes{/*※状況により…*/
						padding:0 44px;
						box-sizing:border-box;
					}
					#flow>div>div>div>ul>li:nth-of-type(n+2){/*2番目以降*/
						margin-top:32px;
					}
						#flow>div>div>div>ul>li>img{/*01*/
							height:27px;
							width:auto;
							margin-top:16px;
							float:left;
						}
						#flow>div>div>div>ul>li>div{/*エントリー、まずは「募集職種/エントリー」から…*/
							width:85%;
							float:right;
						}
							#flow>div>div>div>ul>li>div>em{/*エントリー*/
								font-weight:bold;
							}
							#flow>div>div>div>ul>li>div>p{/*まずは「募集職種/エントリー」から…*/
							}
						#flow>div>div>div>ul>li.notes>p{/*※状況により…*/
							font-size:12px;
						}
			#flow>div>div>a{/*エントリー/申し込みはこちら*/
				width:900px;
				margin:140px auto 0 calc((100% - 900px)/2);
			}




/*********************************************************************************************************************************

		メディアクエリ（ ～1200px以下 ）

*********************************************************************************************************************************/
@media(max-width:1200px){

	/*･･･････････････････････････････････････････････････････････*/
	/*･･･････････････････････････････････････････････････････････*/
	

}




/*********************************************************************************************************************************

		メディアクエリ（ ～500px以下 ）

*********************************************************************************************************************************/
@media(max-width:500px){


	/*メインイメージ････････････････････････････････････････････････････*/
	#contents>#section01{
																						padding-top:0;
	}
		#section01>div{/*baseArea*/
			position:relative;
			min-height:380px;
			width:1000px;
			margin-top:100px;
																						width:500px;
																						margin-top:0;
		}
			#section01>div>div{/*職種、キャッチコピー、メインテキスト*/
																						width:450px;
																						margin:323px auto 0 25px;
			}
				#section01>div>div>h2{/*職種*/
				}
					#section01>div>div>h2 *{
						line-height:1.5em;
					}
					#section01>div>div>h2>p{/*職種（英語）*/
						margin-top:10px;
						font-size:56px;
																						font-size:56px;
						letter-spacing:0.01em;
					}
					#section01>div>div>h2>span{/*職種（日本語）*/
						padding-left:15px;
						font-size:15px;
																						margin-top:15px;
						background:url(../images/ico_dot2.png) left center no-repeat;
					}
				#section01>div>div>strong{/*キャッチコピー*/
					display:inline-block;
					margin-top:13px;
				}
					#section01>div>div>strong>span{
						font-size:18px;
						background-color:white;
																				font-size:25px;
																				letter-spacing:0.05em;
																				line-height:1.5em;
																				white-space:nowrap;/*改行禁止*/
																				font-feature-settings:"palt";
					}
				#section01>div>div>p{/*メインテキスト*/
					max-width:240px;
					margin-top:40px;
					font-size:13px;
																						max-width:450px;
																						margin-top:30px;
																						font-size:18px;
																						line-height:1.75em;
				}
			#section01>div>img{/*メインイメージ画像*/
				position:absolute;
				top:0;
				left:auto;
				right:0;
				bottom:auto;
				height:380px;
				width:696px;
				border-radius:30px;
																						height:273px;
																						width:500px;
																						border-radius:0;
			}


	/*CoreValues、この仕事で得られること････････････････････････････････*/
	#contents>section#section02{
		padding-top:0;
																						/*padding-top:60px;*/
	}
		#section02>div{/*baseArea*/
			width:860px;
																						width:450px;
		}
			#section02>div>h3{/*CoreValues、この仕事で得られること*/
				width:29%;
				float:left;
																						width:100%;
			}
				#section02>div>h3>p{/*CoreValues*/
																						width:100%;
					margin-top:18px;
					font-size:32px;
																						font-size:35px;
					line-height:1.0em;
					letter-spacing:0.02em;
				}
				#section02>div>h3>span{/*この仕事で得られること*/
					display:inline-block;
																						width:100%;
					margin-top:18px;
					padding-left:16px;
					font-size:14px;
																						padding-left:15px;
																						font-size:15px;
					line-height:1.0em;
					background:url(../images/ico_dot2.png) left center no-repeat;
				}
			#section02>div>ul{/*リスト*/
				width:71%;
				float:right;
																						width:100%;
																						margin-top:60px;
																						float:left;
			}
				#section02>div>ul>li{
					display:inline-block;
					width:100%;
				}
				#section02>div>ul>li:nth-of-type(n+2){/*2番目以降*/
					margin-top:50px;
				}
					#section02>div>ul>li>img{/*01～03*/
						display:inline-block;
						height:27px;
						width:44px;
						margin-top:30px;
																						margin-top:9px;
						float:left;
					}
					#section02>div>ul>li>div{/*タイトル、テキスト*/
						width:calc(100% - 85px);
						float:right;
					}
						#section02>div>ul>li>div>em{/*タイトル*/
							font-size:19px;
																						font-size:28px;
							font-weight:bold;
						}
						#section02>div>ul>li>div>p{/*テキスト*/
							margin-top:5px;
							font-size:13px;
							line-height:1.8em;
																						margin-top:15px;
																						font-size:18px;
																						line-height:1.75em;
						}


	/*コンテンツ（本文・画像）･･････････････････････････････････････････*/
	#contents>section#section03{
		padding-top:20px;
		padding-bottom:0;
		border-bottom:solid 1px white;
		box-sizing:border-box;
	}
	#contents>section#guideline{/*section04「募集要項」セクション*/
		padding-top:0;
		background-color:var(--Gray_01);
	}
		#section03>div{/*baseArea*/
			text-align:center;
			text-align-last:center;
			max-width:100%;
		}

			/*タブ切り替えBOX･･･････････････････････････････････････････*/
			.s3_tabSswitch{
				display:inline-block;
				height:auto;
				width:100%;
				overflow-x:hidden;
			}

				/*タブ（ラベル）････････････････････････････････････････*/
				.s3_tabSswitch>label{/*タブが 4 つの場合（基本）*/
					display:inline-block;
					height:70px;
					width:240px;
																						width:116px;
					margin-left:0 !important;
					border-radius:10px 10px 0 0;
					background:url(../images/tab_normal.png) center top /cover no-repeat;
				}
				.s3_tabSswitch>label:first-of-type{/*タブが 4 つの場合（基本）*/
					margin-left:calc((100% - 1000px)/2) !important;
																						margin-left:9px !important;
				}
					.s3_tabSswitch>label>div{/*テキスト*/
						display:inline-block;
						height:70px;
						width:100%;
						text-align:center;
						text-align-last:center;
					}
						.s3_tabSswitch>label>div>p{/*テキスト*/
							display:inline-block;
						}
							.s3_tabSswitch>label>div>p>span{/*テキスト*/
								display:table-cell;
								height:70px;
								width:100%;
								font-size:17px;
								font-weight:bold;
								letter-spacing:0;
								line-height:1.3em;
								vertical-align:middle;
							}
				.s3_tabSswitch>input[name="tab_switch"]{/*チェック用丸ポチマークを非表示にする*/
					display:none;
				}
				.s3_tabSswitch>label:hover{
					cursor:pointer;
				}
				.s3_tabSswitch>#tab01,
				.s3_tabSswitch>#tab02,
				.s3_tabSswitch>#tab03,
				.s3_tabSswitch>#tab04{/*タブ1～4*/
					color:white;
				}
				.s3_tabSswitch>#tab01:checked + .tab_label,
				.s3_tabSswitch>#tab02:checked + .tab_label,
				.s3_tabSswitch>#tab03:checked + .tab_label,
				.s3_tabSswitch>#tab04:checked + .tab_label{/*タブ 01～04（アクティブ時）*/
					background:url(../images/tab_active.png) center top /cover no-repeat;
				}
					.s3_tabSswitch>#tab01:checked + .tab_label>div>p>span,
					.s3_tabSswitch>#tab02:checked + .tab_label>div>p>span,
					.s3_tabSswitch>#tab03:checked + .tab_label>div>p>span,
					.s3_tabSswitch>#tab04:checked + .tab_label>div>p>span{/*テキスト*/
						color:white;
					}
				section #tab01_content,
				section #tab02_content,
				section #tab03_content,
				section #tab04_content{/*タブ*/
					display:none;
				}
				section #tab01:checked ~ #tab01_content,
				section #tab02:checked ~ #tab02_content,
				section #tab03:checked ~ #tab03_content,
				section #tab04:checked ~ #tab04_content{/*チェックしたタブに連動して、後ろの要素を表示*/
					display:block;
				}

				/*「システムエンジニア」タブ内のコンテンツ（01～04）････････････････*/
				.s3_tabSswitch>ul{/*タブ切り替えで表示される要素*/
					display:inline-block;
					width:100%;
					margin-top:-1px;/*タブとの隙間埋め*/
					background-color:var(--Gray_01);
				}
				section#section03 .s3_tabSswitch>ul{/*タブ切り替えで表示される要素*/
					padding-bottom:100px;
				}
					.s3_tabSswitch>ul>li{/*タブ（01）*/
						display:inline-block;
						width:100%;
						text-align:center;
						text-align-last:center;
					}
						.s3_tabSswitch>ul>li>div{/*コンテンツの表示エリア（白背景）*/
							display:inline-block;
							width:860px;
							margin-top:120px;
																						width:450px;
																						margin-top:60px;
						}
						section#guideline .s3_tabSswitch>ul>li>div{/*section04「募集要項」セクション*/
							margin-top:65px;
						}
							.s3_tabSswitch>ul>li>div>h3{/*セキュリティエンジニア*/
																						width:100%;
							}
								.s3_tabSswitch>ul>li>div>h3>span{/*セキュリティエンジニア*/
									display:inline;
									font-size:19px;
																						font-size:35px;
									padding:0 8px;
									background-color:white;
								}
							.s3_tabSswitch>ul>li>div>div{/*採用情報、仕事内容*/
								margin-top:38px;
																						width:100%;
																						margin-top:60px;
							}
								.s3_tabSswitch>ul>li>div>div>h4{/*採用情報*/
									display:inline-block;
									width:160px;
									float:left;
								}
									.s3_tabSswitch>ul>li>div>div>h4>span{/*採用情報*/
										display:inline;
										color:white;
										font-size:16px;
																						font-size:28px;
										padding:0 12px;
										background-color:var(--DarkBlue_01);
									}
								.s3_tabSswitch>ul>li>div>div>ul{/*仕事内容、セキュリティエンジニアとして…*/
									display:inline-block;
									width:700px;
									font-size:13px;
									float:right;
																						width:450px;
																						margin-top:30px;
																						font-size:18px;
																						line-height:1.75em;
																						float:left;
								}
									.s3_tabSswitch>ul>li>div>div>ul>li{/*仕事内容、セキュリティエンジニアとして…*/
										display:inline-block;
										width:100%;
									}
									section#section03 .s3_tabSswitch>ul>li>div>div>ul>li:nth-of-type(n+2){/*2番目以降*/
										margin-top:70px;
										padding-top:70px;
																						margin-top:30px;
																						padding-top:30px;
										border-top:dotted 1px var(--DarkBlue_01);
										box-sizing:border-box;
									}
									section#guideline .s3_tabSswitch>ul>li>div>div>ul>li:nth-of-type(n+2){/*section04「募集要項」セクション*/
										margin-top:47px;
									}
										.s3_tabSswitch>ul>li>div>div>ul>li>em{/*仕事内容*/
											width:150px;
																						width:100%;
											margin-top:0.2em;
																						margin-top:15px;
											font-weight:bold;
											line-height:1.75em;
											float:left;
																						font-size:25px;


											padding-left:20px;
											background:url(../images/ico_dot_w.png) left center no-repeat;

										}
										.s3_tabSswitch>ul>li>div>div>ul>li>p{/*セキュリティエンジニアとして…*/
											width:550px;
																						width:100%;
											line-height:1.75em;
											float:right;

										}


	/*コンテンツ（本文・画像）･･････････････････････････････････････････*/
	#contents>section#flow{
		padding-top:0;
		background-color:var(--Gray_01);
	}
		#flow>div{/*baseArea*/
			width:100%;
			text-align:center;
			text-align-last:center;
		}
			#flow>div *{
				display:inline-block;
				width:100%;
			}
			#flow>div>div{
				width:1000px;
																						width:450px;
			}
				#flow>div>div>div{/*テキストエリア*/
				}
					#flow>div>div>div>h3{/*サブタイトル*/
						width:20%;
																						width:100%;
						float:left;
					}
						#flow>div>div>div>h3>p{/*Flow*/
							font-size:34px;
						}
						#flow>div>div>div>h3>span{/*選考フロー*/
							line-height:1.0em;
							font-size:12px;
																						margin-top:15px;
																						padding-left:18px;
																						font-size:15px;
																						background:url(../images/ico_dot2.png) left center no-repeat;
						}
					#flow>div>div>div>ul{/*リスト*/
						width:80%;
																						width:100%;
																						margin-top:30px;
						float:right;
																						float:left;
					}
						#flow>div>div>div>ul>li:not(.notes){/**/
							padding:28px 44px;
																						padding:26px 34px;
							box-sizing:border-box;
							border-radius:15px;
							background-color:white;
						}
						#flow>div>div>div>ul>li.notes{/*※状況により…*/
							padding:0 44px;
																						padding:0;
							box-sizing:border-box;
						}
						#flow>div>div>div>ul>li:nth-of-type(n+2){/*2番目以降*/
							margin-top:32px;
																						margin-top:45px;
						}
							#flow>div>div>div>ul>li>img{/*01*/
								height:27px;
								width:auto;
								margin-top:16px;
																						margin-top:7px;
								float:left;
							}
							#flow>div>div>div>ul>li>div{/*エントリー、まずは「募集職種/エントリー」から…*/
								width:85%;
																						width:82%;
								float:right;
							}
								#flow>div>div>div>ul>li>div>em{/*エントリー*/
									font-weight:bold;
								}
								#flow>div>div>div>ul>li>div>p{/*まずは「募集職種/エントリー」から…*/
								}
							#flow>div>div>div>ul>li.notes>p{/*※状況により…*/
								font-size:12px;
																						width:450px;
																						font-size:18px;
																						line-height:1.75em;
							}
				#flow>div>div>a{/*エントリー/申し込みはこちら*/
					width:900px;
					margin:140px auto 0 calc((100% - 900px)/2);
																						width:450px;
																						margin:120px auto 0 0;
				}

}