/*======= 入社の流れページ ======*/
/*======= ページ全体・共通 =======*/
.flow {	/* コンテンツ全体 */
	margin-right: auto;
	margin-left: auto;
	margin-top: 40px;
}
.flow hr {	/* 境界線 */
	color: #333333;
	margin-top: 40px;
	margin-left: 0;
	max-width: 890px;
}
.content-main { /* Google Fonts */
	font-family: 'Noto Sans JP', sans-serif;
}
@media only screen and (min-width: 769px) { /*ページ全体・共通レスポンシブ(pc・タブレット版) */
	.flow {	/* コンテンツ全体 */
		max-width: 920px;
	}
}
@media only screen and (max-width: 768px) { /*ページ全体・共通レスポンシブ(スマホ版) */
	.flow {	/* コンテンツ全体 */
		margin-top:20px;
	}
}

/*======= 入社前 =======*/
.flow-before-left { /* 入社前部分左側 */
	background-color: #FFDFDF;
}
.flow-before-left span { /* 入社前部分左側上部 */
	height: 10px;
	background-color: #DD399C;
	display: block;
	width: 46px;
}
.flow-before-left p { /* 入社前部分左側文言 */
	font-weight: bold;
	font-size: 20px;
	margin: 0 8px;
}
.flow-before-right { /* 入社前部分右側 */
	width: 95%;
	height: 1040px;
	position: relative;
}
@media only screen and (min-width: 961px) { /* 入社前部分レスポンシブ(pc) */
	.flow-before { /* 入社前部分全体 */
	display: flex;
	height: 1040px;
	}
	.flow-before-left { /* 入社前部分右側 */
		height: 1040px;
	}
	.flow-before-left p { /* 入社前部分左側文言 */
		writing-mode: vertical-rl;
	}
}
@media screen and (min-width: 769px) and (max-width: 960px) { /* タブレット用レスポンシブ */
	.flow-before-left {
		display: flex;
  		margin-bottom: 40px;
	}
	.flow-before-left span { /* 入社前部分左側 */
		height: 40px;
		width:10px;
	}
	.flow-before-left p {
		margin: 5px 8px;
	}
	.flow-before-right {
		width:100%;
		height: 830px;
	}
}
@media only screen and (max-width: 768px) { /* 入社前部分レスポンシブ(スマホ版) */
	.flow-before { /* 入社前部分全体 */
		height: 1670px;
	}
	.flow-before-left {
		display: flex;
  		margin-bottom: 40px;
	}
	.flow-before-left span { /* 入社前部分左側 */
		height: 40px;
		width:10px;
	}
	.flow-before-left p {
		margin: 5px 8px;
	}
	.flow-before-right { /* 入社前右側 */
		text-align:center;
		height:1590px;
	}
	#flowCanvas1 { /* 波非表示 */
		display:none;
	}
}

/*======= 入社後 =======*/
.flow-after-left { /* 入社後左側 */
	background-color: #E2DFFF;
}
.flow-after-left span { /* 入社後左側上部 */
	height: 10px;
	background-color: #111A5F;
	display: block;
	width: 46px;
}
.flow-after-left p { /* 入社後左側文言 */
	font-weight: bold;
	font-size: 20px;
	margin: 0 8px;
}
.flow-after-right { /* 入社後右側 */
	width: 95%;
	height: 1170px;
	position: relative;
}
@media only screen and (min-width: 961px) { /* 入社後部分レスポンシブ(pc) */
	.flow-after { /* 入社後全体 */
		display: flex;
		height: 1170px;
		margin-top: 20px;
	}
	.flow-after-left { /* 入社後部分右側 */
		height: 1170px;;
	}
	.flow-after-left p { /* 入社前部分左側文言 */
		writing-mode: vertical-rl;
	}
}
@media screen and (min-width: 769px) and (max-width: 960px) { /* タブレット用レスポンシブ */
	.flow-after-left { /* 入社後左側 */
		display: flex;
  		margin-bottom: 40px;
	}
	.flow-after-left span { /* 入社後左側上部 */
		height: 40px;
		width: 10px;
	}
	.flow-after-left p { /* 入社後左側文言 */
		margin: 5px 8px;
	}
	.flow-after-right {
		height:1040px;
		width:100%;
	}
}
@media only screen and (max-width: 768px) { /* 入社後部分レスポンシブ(スマホ版) */
	.flow-after { /* 入社後全体 */
		height: 2000px;
	}
	.flow-after-left { /* 入社後左側 */
		display: flex;
  		margin-bottom: 40px;
	}
	.flow-after-left span { /* 入社後左側上部 */
		height: 40px;
		width: 10px;
	}
	.flow-after-left p { /* 入社後左側文言 */
		margin: 5px 8px;
	}
	
	.flow-after-right { /* 入社後右側 */
		text-align:center;
		height:1920px;
		
	}
	#flowCanvas2 { /* 波非表示 */
		display:none;
	}
}

/*======= すごろく部分 =======*/
/* マス */
#flowCanvas1 { /* pc画面入社前の波 */
	position: absolute; /* 背景レイヤー扱い */
	top: 0;
	left: 0;
	z-index: 0; /* 後ろに置く */
}
#flowCanvas2 { /* pc画面入社後の波 */
	position: absolute; /* 背景レイヤー扱い */
	top: 0;
	left: 0;
	z-index: 0; /* 後ろに置く */
}
#flowCanvas3 { /* pc画面入社前の波 */
	display:none;
	position: absolute; /* 背景レイヤー扱い */
	top: 0;
	left: 50%;
	z-index: 0; /* 後ろに置く */
}
#flowCanvas4 { /* pc画面入社後の波 */
	display:none;
	position: absolute; /* 背景レイヤー扱い */
	top: 0;
	left: 50%;
	z-index: -1; /* 後ろに置く */
}
#flowCanvas5 { /* pc画面入社前の波 */
	display:none;
	position: relative; /* 背景レイヤー扱い */
	z-index: -1; /* 後ろに置く */
	margin: 0 auto;
}
#flowCanvas6 { /* pc画面入社後の波 */
	display:none;
	position: relative; /* 背景レイヤー扱い */
	z-index: -1; /* 後ろに置く */
	margin: 0 auto;
}
.flow-box { /* マス */
	z-index: 1; /* 前に置く */
}
.flow .js-modal-button:hover { /* マウスオーバーの速度 */
	transition: 0.4s ease;
}
.js-modal-button:hover { /* マウスオーバーのサイズ */
	transform: scale(0.9);
}
.flow-box button { /* マスをボタン化 */
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	outline: none;
	cursor: pointer;
}
@media only screen and (min-width: 961px) { /* pc用レスポンシブ */
	.scroll_up1 { /* マスが段々と表示 */
		transition: 0.5s ease-in-out;
		opacity: 0;
	}
	.scroll_up1.on { /* ↑onクラス付与で表示 */
		opacity: 1.0;
	}
	.scroll_up2 { /* マスが段々と表示 */
		transition: 0.5s ease-in-out;
		opacity: 0;
	}
	.scroll_up2.on { /* ↑onクラス付与で表示 */
		opacity: 1.0;
	}
	/* マスの座標指定 */
	.before-box1 { /* 入社前部分のマス */
		position: absolute;
		top: 10px;
		left: 80px;
	}
	.before-box2 {
		position: absolute;
		top: 120px;
		left: 480px;
		transition-delay: .2s;
	}
	.before-box3 {
		position: absolute;
		top: 390px;
		left: 405px;
		transition-delay: .2s;
	}
	.before-box4 {
		position: absolute;
		top: 470px;
		left: 50px;
		transition-delay: .2s;
	}
	.before-box5 {
		position: absolute;
		top: 700px;
		left: 150px;
	}
	.before-box6 {
		position: absolute;
		top: 815px;
		left: 520px;
		transition-delay: .2s;
	}
	.before-illustbox1 { /* 入社前部分のイラスト */
		position: absolute;
		top: 270px;
		left: 100px;
	}
	.before-illustbox2 {
		position: absolute;
		top: 650px;
		left: 470px;
	}
	.after-box1 { /* 入社後部分のマス */
		position: absolute;
		top: 10px;
		left: 80px;
	}
	.after-box2 {
		position: absolute;
		top: 110px;
		left: 480px;
	}
	.after-box3 {
		position: absolute;
		top: 310px;
		left: 300px;
	}
	.after-box4 {
		position: absolute;
		top: 510px;
		left: 80px;
	}
	.after-box5 {
		position: absolute;
		top: 600px;
		left: 440px;
	}
	.after-box6 {
		position: absolute;
		top: 830px;
		left: 500px;
	}
	.after-box7 {
		position: absolute;
		top: 930px;
		left: 165px;
		transition-delay: .2s;
	}
	.after-illustbox1 { /* 入社後部分のイラスト */
		position: absolute;
		top: 280px;
		left: 60px;
	}

	.after-illustbox2 {
		position: absolute;
		top: 480px;
		left: 610px;
	}

	.after-illustbox3 {
		position: absolute;
		top: 790px;
		left: 145px;
	}
}
@media screen and (min-width: 769px) and (max-width: 960px) { /* タブレット用レスポンシブ */
  #flowCanvas1 {
	  display:none;
  }
  #flowCanvas2 {
	  display:none;
  }
  #flowCanvas5 {
	  display:block;
  }
  #flowCanvas6 {
	  display:block;
  }
  
  /* イラスト非表示 */
  .before-illustbox1,
  .before-illustbox2,
  .after-illustbox1,
  .after-illustbox2,
  .after-illustbox3 {
    display: none;
  }
	.before-box1 { /* 入社前部分のマス */
		position: absolute;
		top: 20px;
		left: 40px;
	}
	.before-box2 {
		position: absolute;
		top: 20px;
		right: 40px;
		transition-delay: .2s;
	}
	.before-box3 {
		position: absolute;
		top: 270px;
		left: 40px;
		transition-delay: .2s;
	}
	.before-box4 {
		position: absolute;
		top: 270px;
		right: 40px;
		transition-delay: .2s;
	}
	.before-box5 {
		position: absolute;
		top: 520px;
		left: 40px;
	}
	.before-box6 {
		position: absolute;
		top: 520px;
		right: 40px;
		transition-delay: .2s;
	}
	.after-box1 { /* 入社後部分のマス */
		position: absolute;
		top: 20px;
		left: 40px;
	}
	.after-box2 {
		position: absolute;
		top: 20px;
		right: 40px;
	}
	.after-box3 {
		position: absolute;
		top: 270px;
		left: 40px;
	}
	.after-box4 {
		position: absolute;
		top: 270px;
		right: 40px;
	}
	.after-box5 {
		position: absolute;
		top: 520px;
		left: 40px;
	}
	.after-box6 {
		position: absolute;
		top: 520px;
		right: 40px;
	}
	.after-box7 {
		position: absolute;
		top: 790px;
		left: 40px;
		transition-delay: .2s;
	}
	.scroll_up5,
	.scroll_up6 {
	  opacity: 0;
	  transition: opacity 0.5s ease-in-out;
	}

	.scroll_up5.oN,
	.scroll_up6.oN {
	  opacity: 1;
	}
}
@media only screen and (max-width: 768px) { /* スマホ用レスポンシブ */
  .flow-box {
    margin-bottom: 40px;
  }

  /* モバイル用スクロール表示 */
  .scroll_up3 { 
    transition: 0.5s ease-in-out;
    opacity: 0;
  }
  .scroll_up3.On { 
    opacity: 1.0;
  }
  .scroll_up4 { 
    transition: 0.5s ease-in-out;
    opacity: 0;
  }
  .scroll_up4.On { 
    opacity: 1.0;
  }

  /* マスを縦並び・中央寄せ */
  .before-box1,
  .before-box2,
  .before-box3,
  .before-box4,
  .before-box5,
  .before-box6 {
    position: relative;  /* absoluteを解除して縦方向 */
    margin: 20px auto;   /* 左右中央寄せ */
  }

  /* PC版キャンバス非表示、モバイル版表示 */
  #flowCanvas1 {
    display: none;
  }
  #flowCanvas3 {
    display: block;
    margin-left:-25px;
  }
  #flowCanvas4 {
    display: block;
    margin-left:-25px;
  }

  /* イラスト非表示 */
  .before-illustbox1,
  .before-illustbox2,
  .after-illustbox1,
  .after-illustbox2,
  .after-illustbox3 {
    display: none;
  }
}
@media only screen and (max-width: 338px) { /* canvas制御 */
	#flowCanvas3 {
     max-height:1470px;
   }
}
@media only screen and (max-width: 338px) { /* canvas制御 */
   #flowCanvas4 {
     max-height:1775px;
   }
}

/*====== 働き方・スキルアップサポート ======*/
.skil {
	/*  */
	margin-top: 30px;
	margin-bottom: 120px;
}


.skil p{
	margin-bottom: 30px;
}

.skil-imgs {
  display: flex;
  gap: 0px;     
  justify-content: center;
  align-items: center;
}

.skil-box {
	margin: auto;
}
@media screen and (max-width: 768px) {
  .skil-imgs {
    flex-direction: column;
  }
  .skil-img{
	margin-bottom: 30px;
  }
}

/*======= モーダルCSS =======*/

/* オーバーレイ */
.overlay-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 239, 246, 0.5);
	z-index: 1000;
}

/* モーダル本体 */
.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border: 3px solid #333333;
	padding: 25px;
	width: 900px;
	height: auto;
	border-radius: 15px;
	z-index: 1100;


}

/* モーダル文字 */
.modal h4 {
	font-size: 20px;
	margin: 5px 0px 25px 0px;
}
/* イメージのボタンタグのリセットCSS */
.js-modal-button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

/*モーダル画像*/
.modal-image-container,
.modal-image-container-two {
	display: flex;
	justify-content: space-around;
	margin: 20px 0px;
	
}
/*3枚の場合*/
.modal-image-container img {
	width: 30%;
	height: auto;
	border: 0.5px solid black;
	object-fit: cover;
}
/*2枚の場合*/
.modal-image-container-two img {
	width: 45%;
	height: auto;
	border: 0.5px solid black;
	object-fit: cover;
}
.modal-image-container-two a {
  width: 45%;
  display: auto;
}
.modal-image-container-two a img{
  height: 100%;
  width: 100%;
}

.mynaviimg{
	margin-bottom: 20px;
}

/*閉じるボタン*/
.close-modal {
	display: inline-block;
	padding: 12px 60px;
	margin-top: 20px auto;
	border-radius: 50px;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	background-color: #FFF;
	color: #000;
	border: 0.5px solid black;
}
html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
  position:relative;
  height: 100%;
}

.close-modal:hover {
	background-color: #DD399C;
	color: #FFF;
	border: 0.5px solid #000;
}
.work-ul li{
	list-style-type: square;
	margin-bottom: 10px;
}

.modal-container {
	display: flex;
	justify-content: center;
	align-items: center;
}


/*モバイルモーダルレスポンシブ*/
@media screen and (max-width: 960px) {
  .modal {
    width: 700px;  
    max-height: 80vh;       
    overflow-y: auto;       
  }
}
@media (max-width: 768px) {
	.modal {
		width: 90%;    
		border: 2px solid #333333;
		padding: 20px;   
		max-height: 70vh;       
		overflow-y: auto;     
	}
	.modal h4 {
		font-size: 18px;
		margin-bottom: 15px;
		}

	.modal-image-container,
	.modal-image-container-two {
		flex-direction: column;
		gap: 15px;
		margin-bottom: 20px;
	}
	.modal-image-container-two a {
		width: 100%;
	}

	.modal-image-container img,
	.modal-image-container-two img {
		width: 80%;
		max-width: 80%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	.close-modal {
		width: 100%;            
		padding: 14px 0;
		border-radius: 40px;
		background-color: #E6E6E6;
		
	}
	.modal-close-button-sp {
	    display: block; 

	}
}