@charset "UTF-8";

/* ===============================
					   Recruit Section
					================================= */
									
					img[src$=".svg"] {
						width: 50%;
					}

					.recruit-section {
					  font-family: "Noto Sans JP", sans-serif;
					  color: #111;
					  line-height: 1.8;
					  max-width: 960px;
					  margin: 0 auto;
					  padding: 60px 20px;
					}

					/* セクションタイトル */
					.section-title {
					  font-size: 1.6em;
					  font-weight: 700;
					  letter-spacing: 0.05em;
					  border-bottom: 2px solid #222;
					  padding-bottom: 6px;
					  margin-bottom: 30px;
					}

					.section-title span {
					  display: block;
					  font-size: 0.6em;
					  color: #666;
					  font-weight: 400;
					  margin-top: 2px;
					}

					/* ===== FLOW（右へ流れる矢印 + スマホ縦矢印） ===== */
					.flow-block {
					  margin-bottom: 80px;
					  /*text-align: center;*/
					}

					.flow-steps {
					  display: flex;
					  justify-content: center;
					  flex-wrap: nowrap;
					  gap: 0;
					  margin-bottom: 15px;
					}

					/* --- PC用（横方向に右矢印） --- */
					.flow-steps .step {
					  position: relative;
					  flex: 1 1 auto;
					  color: #fff;
					  padding: 15px 20px;
					  font-size: 1em;
					  font-weight: 500;
					  text-align: center;
					  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
					  margin-right: -12px; /* ← 間を詰めて一体感 */
					  z-index: 1;
					  transition: background 0.3s ease;
					}
						
					/* 矢印が重なる順序を制御するために position を付与 */
					.flow-steps .step{
					  position: relative;   /* ← これがないと z-index が効きません */
					  z-index: 1;
					}

					/* 右に行く（下に行く）ほど “手前” に重なるよう z-index を段階UP */
					.flow-steps .step:nth-child(1){ z-index: 6; }
					.flow-steps .step:nth-child(2){ z-index: 5; }
					.flow-steps .step:nth-child(3){ z-index: 4; }
					.flow-steps .step:nth-child(4){ z-index: 3; }
					.flow-steps .step:nth-child(5){ z-index: 2; }
					.flow-steps .step:nth-child(6){ z-index: 1; }

					/* （任意）重なりを強調したい場合の影 */
					.flow-steps .step{
					  box-shadow: 0 2px 6px rgba(0,0,0,.08);
					}

					/* グラデーション（右に行くほどグレーに） */
					.flow-steps .step:nth-child(1) { background: #222; }
					.flow-steps .step:nth-child(2) { background: #333; }
					.flow-steps .step:nth-child(3) { background: #444; }
					.flow-steps .step:nth-child(4) { background: #555; }
					.flow-steps .step:nth-child(5) { background: #666; }
					.flow-steps .step:nth-child(6) { background: #777; }

					/* 最後だけ矢印をカット */
					.flow-steps .step:last-child {
					  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
					  margin-right: 0;
					}

					.flow-steps .step:hover {
					  filter: brightness(1.15);
					}

					.flow-steps .step strong {
					  display: block;
					  font-size: 1em;
					  margin-top: 4px;
					  font-weight: 700;
					}

					.flow-note {
					  font-size: 1em;
					  color: #666;
					  margin-top: 10px;
					}

					/* --- スマホ用（縦方向に下矢印） --- */
					@media (max-width: 768px) {
					  .flow-steps {
						flex-direction: column;
						align-items: center;
					  }

					  .flow-steps .step {
						width: 90%;
						clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
						margin: 0 0 -10px 0; /* ← 上下のつながりを近づける */
					  }

					  .flow-steps .step:last-child {
						clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
						margin-bottom: 0;
					  }
					}



					/* ===== JOB DESCRIPTION ===== */
					.job-block {
					  margin-bottom: 80px;
					  /*text-align: center;*/
					}

					.job-list {
					  display: flex;
					  gap: 30px;
					  justify-content: center;
					  flex-wrap: wrap;
					}

					.job-item {
					  border: 1px solid #ddd;
					  border-radius: 4px;
					  overflow: hidden;
					  max-width: 420px;
					  position: relative;
					  transition: all 0.3s ease;
					  background: #fff;
					}

					.job-item img {
					  width: 100%;
					  height: auto;
					  display: block;
					}

					.job-text {
					  padding: 20px;
					}

					.job-text h3 {
					  font-size: 1.2rem;
					  margin: 0;
					}

					.job-text p {
					  font-size: 0.9rem;
					  color: #777;
					  margin: 3px 0 0;
					}

					.job-link {
					  position: absolute;
					  right: 20px;
					  bottom: 20px;
					  font-size: 1.6rem;
					  color: #000;
					  text-decoration: none;
					}
									
					.p-recruit__job-item-image img {
					  width: 100%;
					  height: 100%;
					  -o-object-fit: cover;
					  object-fit: cover;
					  -webkit-transition: -webkit-transform 0.3s;
					  transition: -webkit-transform 0.3s;
					  transition: transform 0.3s;
					  transition: transform 0.3s, -webkit-transform 0.3s;
					}

					/* ===== FAQ ===== */
					.faq-block {
					  margin-bottom: 60px;
					}

					.faq-item {
					  border-top: 1px solid #ddd;
					  padding: 20px 0;
					}

					.faq-item:last-child {
					  border-bottom: 1px solid #ddd;
					}

					.faq-item h4 {
					  font-size: 1em;
					  margin-bottom: 6px;
					  font-weight: 700;
					}

					.faq-item p {
					  font-size: 1em;
					  color: #444;
					}
									
									
					.p-recruit__job-list {
					  display: -ms-grid;
					  display: grid;
					  -ms-grid-columns: 1fr 4rem 1fr;
					  grid-template-columns: repeat(2, 1fr);
					  gap: 4rem;
					}
					@media screen and (max-width: 768px) {
					  .p-recruit__job-list {
						-ms-grid-columns: 1fr;
						grid-template-columns: 1fr;
						gap: 2rem;
					  }
					}
					.p-recruit__job-item {
					  padding: 0.8rem;
					  display: block;
					  border: solid 1px var(--black);
					  position: relative;
					}
					@media (hover: hover) {
					  .p-recruit__job-item:hover .p-recruit__job-item-image img {
						-webkit-transform: scale(1.05);
						transform: scale(1.05);
					  }
					}
					.p-recruit__job-item-image {
					  display: block;
					  width: 100%;
					  aspect-ratio: 44/21;
					  overflow: hidden;
					}
					.p-recruit__job-item-image img {
					  width: 100%;
					  height: 100%;
					  -o-object-fit: cover;
					  object-fit: cover;
					  -webkit-transition: -webkit-transform 0.3s;
					  transition: -webkit-transform 0.3s;
					  transition: transform 0.3s;
					  transition: transform 0.3s, -webkit-transform 0.3s;
					}
					.p-recruit__job-item-desc {
					  padding-block: 2rem;
					  display: -webkit-box;
					  display: -ms-flexbox;
					  display: flex;
					  -webkit-box-orient: vertical;
					  -webkit-box-direction: normal;
					  -ms-flex-direction: column;
					  flex-direction: column;
					  -webkit-box-align: center;
					  -ms-flex-align: center;
					  align-items: center;
					  gap: 0.5rem;
					}
					@media screen and (max-width: 768px) {
					  .p-recruit__job-item-desc {
						-webkit-box-align: start;
						-ms-flex-align: start;
						align-items: flex-start;
						padding-inline: 1.2rem;
						padding-block: 2rem 1.3rem;
						gap: 0;
					  }
					}
					.p-recruit__job-item-desc > .in-japanease {
					  font-size: 2.4rem;
					  font-weight: bold;
					}
					.p-recruit__job-item-desc > .in-english {
					  font-size: 1.6rem;
					}
					.p-recruit__job-item-arrow {
					  position: absolute;
					  display: -webkit-box;
					  display: -ms-flexbox;
					  display: flex;
					  -webkit-box-align: center;
					  -ms-flex-align: center;
					  align-items: center;
					  -webkit-box-pack: center;
					  -ms-flex-pack: center;
					  justify-content: center;
					  width: 3.6rem;
					  aspect-ratio: 1/1;
					  border: solid 1px var(--black);
					  border-radius: 100%;
					  bottom: 4rem;
					  right: 2.6rem;
					}
					@media screen and (max-width: 768px) {
					  .p-recruit__job-item-arrow {
						bottom: 3.2rem;
						right: 2rem;
					  }
					}
									
					:root {
						--futura: "futura-pt";
						--futura-r: "FuturaLTPro-Medium";
						--futura-m: "FuturaLTPro-Heavy";
						--futura-b: "FuturaLTPro-Bold";
						--tsuku-gothic: "FOT-筑紫ゴシック Pr5 M";
						--tsuku-gothic-b: "FOT-筑紫ゴシック Pro B";
						--noto-sans: "Noto Sans JP", serif;
						--prompt: "Prompt", serif;
						--black: #111111;
					}

					/* ===== Responsive ===== */
					@media (max-width: 768px) {
					  .flow-steps .step {
						flex: 1 1 48%;
					  }
					  .job-list {
						flex-direction: column;
						align-items: center;
					  }
					}


/*===============


 見出しタイトル


===============*/



/**印刷

SyntaxHighlighterについて*/
    /* デフォルト：479px以下用（スマートフォン用）の記述 */

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



}


@media screen and (min-width:481px){




}



@media screen and (min-width:767px){




    /* 768px以上用（タブレット用）の記述 */
}



@media screen and (min-width:980px){



    /* 980px以上用（PC用）の記述 */
}

@media screen and (min-width:1023px){




}