/*
Theme Name: JST
Theme URI: http://example.com
Author: Your Name
Author URI: http://example.com
Description: Custom theme for JST Group
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jst
*/

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
}
h3{
	color:#004CB3;
}

/* ===== Header レイアウト修正 ===== */

/* ヘッダーをメニューより前面に */
.site-header {
  position: fixed;   /* すでに position:relative なら OK */
	width:100%;
  z-index: 1002;        /* slide-nav (1001) より上に */
	top:0;
}

.site-logo{
	max-width:320px;
	width:100%;
}

.site-logo img{
	width:100%;
}

/* トグルボタンをさらに前面に */
.menu-toggle {
  position: relative;
  z-index: 1003;
}

/* header-inner の justify-content を解除し、entry-btn で右寄せ */
.header-inner {
  display: flex;
  align-items: center;
  height: 90px;    /* PC：ヘッダー高 */
/*   padding: 0 20px; */
}

/* ENTRY＋ハンバーガーを右端に寄せる */
.entry-btn {
  margin-left: auto;          /* ここで右寄せ */
  background: #000;           /* 黒背景 */
  height: 100%;               /* ヘッダー全高をカバー */
  display: flex;
  align-items: center;
}
.entry-btn a {
  font-size: 20px;            /* PC：20px */
  color: #fff;
  text-decoration: none;
  padding: 0 25px;
  display: flex;
  align-items: center;
}

/* ハンバーガーは ENTRY の隣に */
.menu-toggle {
/*   margin-left: 10px; */
  width: 90px;
  height: 90px;
 -webkit-appearance: none;
  appearance: none;	
  background: #0d47a1;        /* メニュー背景色と合わせる */
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px;
  cursor: pointer;
}
.menu-toggle span {
	display: block;
/*   flex: 1; */
  width: 100%;
	height: 4px;
  background: #fff;
  border-radius: 2px;
}

.slide-nav {
  position: fixed;      /* 画面固定 */
  top: 0;
	right: calc(-50% - 40px);
  width: 30%;
  height: 100%;
  background: rgb(13 71 161 / 80%);  /* メニュー背景色 */
  transition: right .3s ease;
  z-index: 1001;
  padding: 100px 20px 20px;
  box-shadow: -4px 0 8px rgba(0,0,0,0.1);
}
.slide-nav.active {
  right: 0;             /* active でスライドイン */
}

/* メニューリンクは白文字で */
.slide-nav .primary-menu a {
  color: #fff;
}

/* ===== SP 時の調整 ===== */
@media (max-width: 768px) {
	body {
    overflow-x: hidden;
  }
  .header-inner {
    height: 60px;
  }
  .entry-btn a {
    font-size: 12px;          /* SP：12px */
    padding: 0 20px;
  }
  .menu-toggle {
    width: 80px;
    height: 60px;
    padding: 12px;
  }
	.slide-nav{
		width:60%;
		right: calc(-60% - 40px);
	}
	.site-logo img{
		max-width:200px;
	}
}


.hero {
    position: relative;
    overflow: hidden;
}

.hero .hero-inner {
    display: flex;
    flex-wrap: wrap;
}

.hero-text {
    flex: 1 1 400px;
    padding: 40px;
}

.hero-image {
    flex: 1 1 400px;
    background-size: cover;
    background-position: center;
    min-height: 300px;
}

@media (max-width: 768px) {
    .hero-inner {
        flex-direction: column;
    }
}

/* ================ front-page.css ================

/* Wrapper 共通 */
.wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: flex;
  position: relative;
}
.hero-text {
  flex: 1;
  padding: 100px 40px;
  color: #fff;
  background: rgba(0,0,0,0.3);
}
.hero-text h1 {
  font-size: 3rem;
  line-height: 1.2;
}
.hero-image {
  flex: 1;
  background-size: cover;
  background-position: center;
  min-height: 500px;
}
.hero-image.sp { display: none; }

/* スマホ時 */
@media (max-width: 768px) {
  .hero-inner { flex-direction: column; }
  .hero-image.pc { display: none; }
  .hero-image.sp { display: block; height: 300px; }
  .hero-text { padding: 60px 20px; font-size: 1.5rem; }
	.wrapper{
		padding: 20px 0;
	}
}

/* Company Stats */
.company-stats {
  background: #f5fafd;
}
.company-stats .wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.company-strengths .wrapper, .company-facts .wrapper, .company-photos .wrapper{
	padding-top:0;
	padding-bottom:30px;
}
.stat-item {
  flex: 1 1 22%;
  text-align: center;
  margin-bottom: 40px;
}
.stat-item-long{
	width:100%;
}
.stat-item-long img{
	width:100%;
}
.stat-item h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.stat-item p {
  font-size: 2rem;
  font-weight: bold;
}
.stat-item small {
  color: #666;
}

/* JST Overview */
.jst-overview {
  background: #fff;
  text-align: center;
}
.jst-overview h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
.jst-overview p {
  font-size: 1rem;
  margin-bottom: 30px;
}
.btn-outline {
  display: inline-block;
  padding: 10px 30px;
  border: 2px solid #0d47a1;
  color: #0d47a1;
  text-decoration: none;
  border-radius: 4px;
}

/* MEMBER */
.member h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.card {
  width: calc(25% - 20px);
  text-align: center;
}
.card img {
  width: 100%;
/*   border-radius: 50%; */
  margin-bottom: 10px;
}
.card .name {
  font-weight: bold;
}
.card .position {
  color: #666;
}
@media (max-width: 768px) {
  .card { width: calc(50% - 20px); }
}

/* DIVISION */
.division {
  background: #f5fafd;
}
.division h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
.division-rectangle1{
	position:absolute;
	left:50px;
	top:10px;
}
.division-rectangle2{
	position:absolute;
	right:50px;
	top:10px;
	z-index:0;
}
.div-items {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.div-item {
  flex: 1 1 30%;
  background: #fff;
  overflow: hidden;
  border-radius: 4px;
}
.div-item img {
  width: 100%;
  display: block;
}
.div-item .text {
  padding: 20px;
}
.div-item h3 {
  margin-bottom: 10px;
}

/* EDUCATION */
.education h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 10px;
}
.education p {
  text-align: center;
  margin-bottom: 30px;
}
.edu-items {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.edu-item {
  flex: 1 1 30%;
  text-align: center;
}
.edu-item img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* BENEFITS */
.benefits {
  background: #fff;
}
.benefits h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
.benefits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.benefits-list li {
  flex: 1 1 30%;
  background: #f5fafd;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
}

/* INFORMATION */
.information {
  background: #f5fafd;
}
.information h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
.info-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.info-grid a {
  flex: 1 1 45%;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.info-grid img {
  width: 100%;
  border-radius: 4px;
/*   margin-bottom: 10px; */
}

/* EVENT */
.event h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
.event-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.event-item {
  flex: 1 1 30%;
  text-align: center;
}
.event-item img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 0px;
}

/* ENTRY */
.entry {
  background: #ff9800;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}
.entry h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.btn-entry {
  display: inline-block;
  padding: 15px 40px;
  background: #fff;
  color: #ff9800;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}

/* --- レスポンシブ共通調整 --- */
@media (max-width: 768px) {
  .wrapper { padding: 40px 0; }
	.division-rectangle2{
		width:100%;
		right:0;
	}
	.division-rectangle2 img{
		width:100%;
	}
	.division-rectangle1{
		width:50px;
		left:5px;
	}
	.division-rectangle1 img{
		width:100%;
	}
}

/* ===== フッター共通 ===== */
.site-footer {
  background: #003a7c;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}

/* --- お問い合わせ窓口部分 --- */
.footer-contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  padding: 60px 20px;
	justify-content:space-between;
}

/* ロゴ */
.footer-contact-logo img {
/*   max-height: 60px; */
  margin-right: 40px;
	width:100%;
	max-width:300px;
	margin-bottom:30px;
}

/* 窓口タイトル */
.contact-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* 電話情報リスト */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.contact-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* 支店ラベル */
.contact-label {
  font-size: 14px;
  font-weight: 700;
}

/* 電話番号 */
.contact-phone {
  font-size: 28px;
  font-weight: 700;
}

/* 担当部署 */
.contact-dept {
  font-size: 14px;
  font-weight: 700;
}

/* お問い合わせボタン */
.contact-button {
  display: inline-block;
  padding: 12px 24px;
  background: #00b8f4;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
}

/* 外部リンクロゴ */
.footer-external-logos {
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.footer-external-logos a{
	width:170px;
}
.footer-external-logos img {
  max-height: 40px;
	width:100%;
}

/* --- 関連会社リンク --- */
.footer-nav-links {
  border-top: 1px solid rgba(255,255,255,0.3);
  padding: 20px;
}
.footer-nav-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.footer-nav-links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.footer-nav-links .arrow {
  margin-left: 4px;
}

/* --- コピーライト --- */
.footer-copy {
  text-align: center;
  font-size: 14px;
  padding: 20px 0;
  opacity: 0.7;
}

/* ===== スマホ時 ===== */
@media (max-width: 768px) {
  .footer-contact-wrapper {
    flex-direction: column;
    text-align: center;
	  padding:0;
  }
	.footer-contact-info{
		width:100%;
	}
  .footer-contact-logo {
    margin-bottom: 20px;
    margin-right: 0;
	  text-align:left;
  }
  .footer-external-logos {
    margin: 5px 0 0;
    justify-content: center;
	  gap:10px;
  }
.footer-external-logos a{
	width:50%;
}
  .contact-button {
    margin-bottom: 20px;
  }
	.footer-contact-logo img{
		max-width:250px;
		margin:0;
	}
	.contact-title{
		text-align:left;
	}
	.footer-nav-links{
		margin-top:20px;
	}
	.footer-nav-links ul{
		display:block;
	}
}

/* ===== 画像ギャラリー ===== */
.image-gallery {
  padding: 40px 0 0;
  background: #fff;
}
.image-gallery .wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
/*   gap: 8px; */
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}

/* SP：2列に切り替え */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===============================
   会社を知るページ
   =============================== */

/* セクション共通 */
.company-strengths,
.company-gallery {
  background: #fff;
}
.company-facts {
  background: #f5fafd;
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}
.company-strengths .wrapper .section-title, .company-facts .wrapper .section-title{
	margin-bottom:30px !important;
}
/* セクションタイトル */
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 700;
}

/* Strengths Grid */
.strength-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.strength-item img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 16px;
}
.strength-item h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  font-weight: 700;
}
.strength-item p {
  line-height: 1.6;
  color: #555;
	margin:0;
	margin-top:5px;
}

/* ファクトデータテーブル */
.fact-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}
.fact-table th,
.fact-table td {
  border: 1px solid #ddd;
  padding: 12px;
  vertical-align: top;
}
.fact-table th {
  background: #e0f0fa;
  width: 30%;
  font-weight: 700;
}

/* ギャラリー */
/* .gallery-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 40px 0 20px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item img {
  width: 100%;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}
 */
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .strength-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .wrapper {
    padding: 40px 10px;
  }

  .fact-table th,
  .fact-table td {
    display: block;
    width: calc(100% - 24px);
  }
  .fact-table tr {
/*     margin-bottom: 16px; */
    display: block;
  }
	.company-strengths .wrapper .section-title, .company-facts .wrapper .section-title{
		font-size:1.4rem;
	}
	.strength-item img{
		margin-bottom:0;
	}
	.strength-item h3{
		margin-top:5px;
	}
}

/* ===============================
   「部署を知る」ページ用CSS
   =============================== */

/* ナビ */
.division-intro {
  background: #f5fafd;
  padding: 40px 0;
}
.division-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.division-nav a {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  color: #0d47a1;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
}

/* 各セクション */
.division-section {
  background: #fff;
  padding: 60px 0;
	position:relative;
}
.division-section + .division-section {
  border-top: 1px solid #e0e0e0;
}
.division-section:nth-of-type(even) {
  background-color: #e4e8ec;
}
.division-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.section-subtitle {
    color: #004CB3;
	font-weight:bold;
  margin-bottom: 24px;
}

/* 文章＋画像レイアウト */
.division-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.division-text {
  flex: 1 1 50%;
  line-height: 1.8;
  color: #333;
}
.division-image {
  flex: 1 1 40%;
}
.division-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

/* 外部リンク */
.division-links {
  background: #fff;
  padding: 40px 0;
  border-top: 1px solid #e0e0e0;
}
.external-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.external-links img {
  max-height: 40px;
}

/* SP対応 */
@media (max-width: 768px) {
  .division-content {
    flex-direction: column;
  }
  .division-nav a {
    font-size: 0.9rem;
  }
	.division-section{
		padding: 20px 0;
	}
	.page-content .division-section .wrapper{
		padding:10px;
		width:auto;
	}
	.page-content .division-section .wrapper .division-content{
		text-align:justify;
	}
}


/* ===== 採用FAQページ ===== */
.faq-page .faq-nav {
  background: #f5fafd;
  padding: 40px 0;
}
.faq-nav .wrapper ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-nav a {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  color: #0d47a1;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}

/* 各セクション */
.faq-section {
  padding: 60px 0;
}
.faq-section:nth-of-type(even) {
  background: #fafafa;
}
.faq-section h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}
.faq-item {
  margin-bottom: 32px;
}
.faq-question {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.faq-answer p {
  line-height: 1.8;
  color: #333;
}
.faq-answer ul {
  margin: 8px 0 0 20px;
  list-style: disc;
}

/* お問い合わせ窓口 */
.faq-contact {
  background: #fff;
  padding: 60px 0;
  text-align: center;
}
.faq-contact h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.contact-method {
  font-size: 1rem;
  margin-bottom: 12px;
}
.contact-method span {
  font-weight: 700;
  margin-right: 4px;
}
.external-links {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.external-links img {
  max-height: 40px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .faq-nav .wrapper ul {
    flex-direction: column;
    gap: 8px;
  }
  .faq-section {
    padding: 20px 10px;
  }
	.faq-page .faq-nav li{
		text-align:center;
	}
	.faq-answer ul{
		margin:0;
		padding-left:20px;
	}
	.faq-section h2{
		font-size:1.4rem;
	}
	.faq-question{
		font-size:1.2rem;
	}
	.faq-contact h2{
		font-size:1.4rem;
	}
	.contact-method{
		text-align:left;
	}
}

/* -----------------------
   採用関連ページ共通
   ----------------------- */
.recruit-page .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}
.recruit-intro {
  text-align: justify;
  background: #f5fafd;
}
.company-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.company-list li {
  margin-bottom: 8px;
}
.entry-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.btn-entry {
  display: inline-block;
  padding: 12px 24px;
  background: #0d47a1;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
}

/* 共通セクション */
.recruit-section,
.internship-section {
  background: #fff;
  border-top: 1px solid #e0e0e0;
}
.recruit-section:nth-of-type(even),
.internship-section:nth-of-type(even) {
  background: #f9fcff;
}
.recruit-section h2,
.internship-section h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
}
.sub-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 12px;
}
.bullet-list {
  margin: 16px 0;
  padding-left: 20px;
}
.bullet-list li {
  margin-bottom: 8px;
}
.note {
  font-size: 0.875rem;
  color: #666;
  margin-top: 12px;
}

/* テーブル */
.recruit-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}
.recruit-table th,
.recruit-table td {
  border: 1px solid #ddd;
  padding: 12px;
  vertical-align: top;
}
.recruit-table th {
  background: #e0f0fa;
  width: 25%;
  font-weight: 700;
}

/* 教育制度 */
.edu-list {
  list-style: decimal;
  margin-left: 20px;
}
.edu-list li {
  margin-bottom: 12px;
}

/* プロセスフロー */
.process-flow {
  list-style: none;
  padding: 0;
  margin: 40px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0px;
}
.process-flow li {
  flex: 1 1 200px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 4px;
  text-align: justify;
}
.process-flow h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 8px;
}

/* お問い合わせ */
.contact {
  margin-top: 16px;
  font-weight: 700;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .process-flow {
    flex-direction: column;
/*     gap: 16px; */
  }
  .entry-buttons {
    flex-direction: column;
  }
	.edu-list{
		margin-left:0;
		padding-left:20px;
	}
	.process-flow li{
		    flex: 1 1 100px;
	}
	.recruit-section h2, .internship-section h2{
		font-size:1.4rem;
	}
	.recruit-page .wrapper{
		padding:40px 0;
	}
}

/* ===== dot-heading (子見出し) 汎用クラス ===== */
.dot-heading {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
  font-weight: 700;
  color: #333; /* お好みの見出し色に */
}
.dot-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #f68b1e; /* オレンジ色 */
  border-radius: 50%;
}

/* ===== 数字で見るJSTグループ ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  /* ５アイテムを２行に分ける */
}
.stat-item {
/*   background: #fff; */
/*   padding: 20px; */
  border-radius: 4px;
  text-align: left; /* 左揃え */
	margin-bottom:0;
}
.stat-item img{
	width:100%;
}
.stat-label {
  /* dot-heading 側で色・マーカー指定済み */
}
.title-dsn1{
	color:#004CB3;	
}

/* SP：２列×３行（最後は中央に寄せたい場合は justify-items:center） */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    justify-items: center;
  }
}


/* ===== JSTグループ組織図 ===== */
.org-chart {
  background: #DCE6F3;
  padding: 60px 0;
}
.org-chart .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative; /* ここを追加 */
}
.org-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

/* 各社ボックス */
.org-item {
  text-align: center;
	width:100%;
}

/* 中央ロゴは絶対配置でグリッド中央に */
.org-chart .org-logo {
  position: absolute;
  width: 50%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -25%);
  z-index: 1;
}
.page-content .org-chart .org-logo{
  transform: translate(-50%, -50%);	
}

.org-chart .org-item img, .org-chart .org-logo img{
	width:100%;
}

/* SP 時は縦1列に、かつロゴを非表示 */
@media (max-width: 768px) {
  .org-chart .wrapper {
    position: static;
  }
	.org-chart{
		padding: 20px 0;
	}
  .org-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .org-logo {
    display: none;
  }
}

/* フォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=KiteOne&display=swap');

/* ===== EDUCATION ===== */
.education {
  background: #fff;
  padding: 60px 0;
	position:relative;
}
.education .wrapper {
  max-width: 1200px;
  margin: 0 auto;
	position: relative;
    z-index: 1;
}

/* タイトル */
.education-title {
  font-family: 'KiteOne', cursive;
  font-size: 60px;
  color: #0d47a1;
  text-align: center;
  margin-bottom: 8px;
}
/* サブタイトル */
.education-subtitle {
  text-align: center;
  font-size: 1rem;
    color: #004CB3;
	font-weight:bold;
  margin-bottom: 32px;
}

/* 導入テキスト */
.education-intro p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 16px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
	text-align:left;
}
.education-rectangle1{
	position:absolute;
	top:0;
	right:0;
	z-index:0;
	width:50%;
}
.education-rectangle1 img{
	width:100%;
}
.education-rectangle2{
	position:absolute;
	bottom:0;
	left:0;
	z-index:0;
	width:50%;
}


/* 研修カード群 */
.training-cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 40px 0;
}
.training-cards .card {
  position: relative;
  width: 240px;
/*   transform: skew(-12deg); */
  overflow: hidden;
  border-radius: 4px;
}
.training-cards .card img {
  width: 100%;
  display: block;
/*   transform: skew(12deg); */
}
.training-cards .card-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
/*   transform: skew(-12deg); */
  background: #0d47a1;
  color: #fff;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 1rem;
}

/* dot-heading（制度詳細用小見出し） */
.dot-heading {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
  font-weight: 700;
  color: #333;
}
.dot-heading::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 8px;
  background: #f68b1e;
/*   border-radius: 50%; */
/*   transform: translateY(-50%); */
}

/* 制度詳細２カラム */
.program-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.program-item p {
  line-height: 1.6;
  color: #333;
}

/* SP対応 */
@media (max-width: 768px) {
	.education{
		padding: 20px 0;
	}
  .education-title {
    font-size: 40px;
  }
  .education-subtitle {
    margin-bottom: 24px;
  }
  .training-cards {
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
  }
	.training-cards img{
		width:100%;
	}
  .program-details {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 制度詳細：カードレイアウト */
.program-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  margin-top: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.program-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.program-card img {
  width: 100%;
  height: auto;
  display: block;
}

.program-card .dot-heading {
  padding: 16px;
  font-size: 1.125rem;
}

.program-card p {
/*   padding: 0 16px 16px; */
  line-height: 1.6;
  color: #333;
	text-align:left;
}
.program-card-box{
	padding:15px;
}

/* SP：縦１列 */
@media (max-width: 768px) {
  .program-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ===== EMPLOYEE BENEFITS ===== */
.benefits {
  background: #fff;
  padding: 60px 0;
	position:relative;
}
.benefits .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position:relative;
	z-index:1;
}

/* 見出し */
.benefits-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  color: #0d47a1;
}
.benefits-subtitle {
  font-size: 1rem;
    color: #004CB3;
	font-weight:bold;
  text-align: center;
  margin-bottom: 32px;
}

/* グリッドレイアウト */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.benefits-rectangle1{
	position:absolute;
	top:-100px;
	right:0;
	z-index:0;
}
.benefits-rectangle1 img{
	width:100%;
}

/* 各カード */
.benefit-item {
  background: #fff;
/*   border: 1px solid #eee; */
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.benefit-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.benefit-header img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.benefit-header h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #004CB3;
  text-align: left;
}
.benefit-item p, .benefit-item li {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
}
.benefit-item ul{
	    padding-left: 25px;
}

/* SP：1列表示 */
@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
	.benefits{
		padding: 20px 0;
	}
	.benefit-header h3{
		font-size:20px;
	}
	.benefit-item{
		 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}
	.benefits-rectangle1{
		top:-5px;
		width:50px;
	}
	.benefits-rectangle1 img{
	
	}
}

/* ----- イベント全体はそのまま ----- */
.event {
  /* 既存スタイル */
}
.event .wrapper {
  /* 既存スタイル */
}

/* 上段グリッド (3列) はそのまま */
.event-grid-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

/* 下段はフレックスに */
.event-grid-bottom {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

/* 上下共通 event-item */
.event-item {
  text-align: center;
}

/* 上段の item img は幅100% */
.event-grid-top .event-item img {
  width: 100%;
  height: auto;
}

/* 下段アイテムも同じ幅を確保する */
.event-grid-bottom .event-item {
  flex: 0 0 calc((100% - 2 * 24px) / 3);
}
.event-grid-bottom .event-item img {
  width: 100%;
  height: auto;
}

/* ラベル */
.event-label {
  margin-top: 0px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
	text-align:left;
}
.event-subtitle{
	  color: #004CB3;
	font-weight:bold;
	text-align:center;
}

/* SP時：1列表示 */
@media (max-width: 768px) {
  .event-grid-top,
  .event-grid-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .event-grid-bottom .event-item {
    flex: none;
  }
}

/* ===== Message セクション ===== */
.message {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}

/* 左右の斜めオーバーレイ */
/* .message::before,
.message::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 35%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}
.message::before {
  left: -10%;
  transform: skewX(-20deg);
}
.message::after {
  right: -10%;
  transform: skewX(20deg);
} */

/* 中身 wrapper を前面に */
.message .wrapper {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  padding: 80px 20px;
}

/* 小見出し “Message” */
.message-label {
  display: inline-block;
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 16px;
	position:absolute;
	left:-100px;
	top:100px;
}

/* タイトル */
.message-title {
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 24px;
}

/* 本文 */
.message-body p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 16px;
  opacity: 0.9;
}

/* SP対応 */
@media (max-width: 768px) {
  .message .wrapper {
    padding: 40px 16px;
  }
  .message-title {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }
  .message-body p {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  /* オーバーレイを少し狭く */
  .message::before,
  .message::after {
    width: 50%;
  }
}

/* ===== MEMBER セクション ===== */
.member-section {
  background: #fff;
  padding: 60px 0;
}
.member-section .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
	padding-top:0;
}

/* 「MEMBER」ロゴ */
.member-logo {
  text-align: center;
  margin-bottom: 24px;
}

/* パネル全体をリンク化 */
.member-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.member-link .member-panel {
  cursor: pointer;
}

/* Swiper コンテナ */
.member-slider {
  position: relative;
  padding-bottom: 48px; /* ページネーション用スペース */
}
.member-slider .swiper-wrapper {
  display: flex;
}
.member-slide {
  width: auto;
  flex-shrink: 0;
}

/* メンバーパネル */
.member-panel {
  background: #f5fafd;
  border-radius: 4px;
  overflow: hidden;
  transition: transform .3s;
}
.member-panel:hover {
  transform: scale(1.02);
}

/* 画像部分 */
.member-image {
  position: relative;
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  transition: transform .3s;
}
.member-panel:hover .member-image {
  transform: scale(1.1);
}
/* 左上三角形 */
.member-image::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-top: 40px solid #004CB3;
  border-right: 40px solid transparent;
}
/* 右下三角形 */
.member-image::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-bottom: 40px solid #004CB3;
  border-left: 40px solid transparent;
}

/* パネル内容 */
.panel-content {
  padding: 16px;
}
.dept-label {
  display: inline-block;
  background: #004CB3;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 4px 8px;
  margin-bottom: 8px;
  transition: background .3s;
}
.member-panel:hover .dept-label {
  background: #000;
}
.join-year {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 12px;
}
.quote {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 16px;
}

/* and more ボタン */
.more {
  font-size: 0.9rem;
  color: #004CB3;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* and more のドット */
.more-dot {
  width: 8px; height: 8px;
  background: #004CB3;
  border-radius: 50%;
  transition: width .3s, height .3s;
}
.member-panel:hover .more-dot {
  width: 20px; height: 20px;
}

/* ページネーション（ドット） */
.member-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;  /* 中央揃え */
  transform: none;      /* transform をリセット */
}

.member-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 6px;
  background: #ccc;
  border-radius: 3px;
  margin: 0 4px !important;
  opacity: 1;
  transition: background .3s;
}
.member-pagination .swiper-pagination-bullet-active {
  background: #004CB3;
}

/* スライド幅（PC:4枚表示） */
.swiper .swiper-slide {
  width: calc((100% - 3 * 24px) / 4);
  margin-right: 24px;
}
.swiper .swiper-slide:last-child {
  margin-right: 0;
}

/* メンバースライダーのナビボタン */
.member-section .swiper-button-prev,
.member-section .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  z-index: 10;
  cursor: pointer;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 左ボタン */
.member-section .swiper-button-prev {
/*   left: -50px; */
  background-image: url('../images/arrow-left.svg');
}
/* 右ボタン */
.member-section .swiper-button-next {
/*   right: -50px; */
  background-image: url('../images/arrow-right.svg');
}

/* SP時は内側に移動 */
@media (max-width: 768px) {
  .member-section .swiper-button-prev { left: 10px; }
  .member-section .swiper-button-next { right: 10px; }
}


/* SP対応：1列表示 */
@media (max-width: 768px) {
  .member-slider {
    padding-bottom: 32px;
  }
  .member-pagination {
    bottom: 0;
  }
  .swiper .swiper-slide {
    width: 100%;
    margin-right: 0;
  }
	.member-section{
		padding: 20px 0;
	}
}

/* ===== DIVISION セクション ===== */
.division-section {
  background: #fff;
  padding-top: 60px;
	padding-bottom:0;
  overflow: hidden; 
	position:relative;
	z-index:1;
}
.division-section .wrapper {
  max-width: 1200px;
  margin: 0 auto;
	padding-bottom:0;
	position:relative;
	z-index:1;
	overflow: visible;
}

/* セクションのタイトル */
.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #0d47a1;
  text-align: center;
  margin-bottom: 8px;
}
.section-subtitle {
  font-size: 1rem;
    color: #004CB3;
	font-weight:bold;
  text-align: center;
  margin-bottom: 40px;
}

/* 各アイテム 共通設定 */
.division-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  margin-bottom: 0px;
	z-index:1;

  /* 背景画像を全幅に表示 */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;  /* オーバーレイはみ出し隠し */
}
.division-item:last-child {
  margin-bottom: 0;
}

/* 奇数はテキスト左／偶数はテキスト右 */
.division-item.odd {
  flex-direction: row;
}
.division-item.even {
  flex-direction: row-reverse;
}

/* 半透明オーバーレイ（平行四辺形） */
.parallelogram {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 78vw;  /* 横幅 = 画面幅の60% */
  background: rgba(247, 246, 246, 0.92);

  /* 左下→右上の斜め線で両端をカット */
  clip-path: polygon(
    15% 0,    /* top-left corner moved right 20% */
    100% 0,   /* top-right */
    85% 100%, /* bottom-right moved left 20% */
    0% 100%   /* bottom-left */
  );
}
/* 奇数：左端に寄せる */
.division-item.odd .parallelogram {
  left: 0;
  right: auto;
}
/* 偶数：右端に寄せる */
.division-item.even .parallelogram {
  right: 0;
  left: auto;
}

/* テキスト部分 */
.text-inner {
  position: relative;
  z-index: 1;          /* オーバーレイより前面 */
  width: 65%;          /* 画面幅の50%（=50vw） */
  padding: 40px;
  box-sizing: border-box;
}

/* テキストスタイル */
.item-number {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #0d47a1;
  margin-bottom: 8px;
}
.item-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0d47a1;
  margin-bottom: 16px;
}
.item-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}
.division-item.odd .text-inner{
	padding-left:15%;
}
.division-item.even .text-inner{
	padding-right:15%;
}
.text-inner .item-title{
	margin-top:5px;
}
.text-inner .item-text{
	margin-bottom:0;
}
.division-img-sp img{
	width:100%;
}
/* SP対応 */
@media (max-width: 768px) {
  .division-item {
    flex-direction: column !important;
    width: 100%;
    left: 0;
    transform: none;
    margin-bottom: 20px;
  }
  .parallelogram {
    display: none;
  }
  .text-inner {
    width: 100%;
    padding: 20px;
  }
	.division-section .wrapper{
		padding-right:0;
		padding-left:0;
		margin-right:0;
		margin-left:0;
		width:100%;
	}
	.division-item.odd .text-inner{
		padding:15px;
	}
	.division-item.even .text-inner{
		padding:15px;
	}
	.division-item{
		background:none !important;
	}
	.text-inner .item-text{
		text-align:justify;
	}
}

/* ===== INFORMATION セクション 基本 ===== */
.info-section {
  padding: 60px 0;
  background: #fff;
	position:relative;
}
.info-section .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
	position:relative;
	z-index:1;
}
.info-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #0d47a1;
  margin-bottom: 8px;
}
.info-section-subtitle {
  font-size: 1rem;
  color: #004CB3;
	font-weight:bold;
  margin-bottom: 32px;
}
.information-rectangle1{
	position:absolute;
	left:0;
	bottom:50px;
}

/* グリッド */
.info-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.info-grid-top {
  grid-template-columns: 1fr;
}
.info-grid-bottom {
  grid-template-columns: repeat(3, 1fr);
}

/* 各パネル共通 */
.info-item {
  position: relative;
  overflow: hidden;
  padding-top: 40%; /* アスペクト比調整 */
  display: block;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	transition: background-size 1.0s ease;
}
.info-item:hover {
  background-size: 110% auto;
}
.info-qa{
	padding-top:15%;
}

/* 70% 青オーバーレイ */
.info-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(51, 127, 215, 0.7);
}

/* パネル内テキスト */
.info-content {
  position: absolute;
/*   top: 16px;  */
	left: 16px; right: 16px; bottom: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.info-item-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
	color:white;

}
.info-item-title img{
		width:auto;
	height:50px;	
}
.info-item-desc {
  font-size: 0.875rem;
  margin: 0;
}

/* and more — ● */
.info-more {
  font-size: 0.9rem;
  font-style: italic;
  display: inline-flex;
  align-items: center;
	justify-content:right;
}
.info-girlstalk .info-more, .info-members .info-more{
	margin-top:10px;
}
.more-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  margin-left: 4px;
  transition: width .3s, height .3s;
}
.info-item:hover .more-dot {
  width: 20px;
  height: 20px;
}

/* 背景画像はクラスで指定 */
.info-qa {
  background-image: url('/recruit/wp-content/themes/jst/images/info-qa.png');
}
.info-fresh {
  background-image: url('/recruit/wp-content/themes/jst/images/info-fresh.png');
}
.info-career {
  background-image: url('/recruit/wp-content/themes/jst/images/info-career.png');
}
.info-internship {
  background-image: url('/recruit/wp-content/themes/jst/images/info-internship.png');
}
.info-members{
  background-image: url('/recruit/wp-content/themes/jst/images/member6.png');
}
.info-girlstalk {
  background-image: url('/recruit/wp-content/themes/jst/images/girlstalk10.jpg');
}

/* SP時：1列に */
@media (max-width: 768px) {
  .info-grid-bottom {
    grid-template-columns: 1fr;
  }
.info-section {
  padding: 20px 0;
  background: #fff;
}
	.info-qa{
		padding-top:40%;
	}
}

/* ===== ENTRY セクション ===== */
.entry-section {
  padding: 60px 0;
  background: #fff;
}
.entry-section .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
	position:relative;
	overflow:visible;
}

/* ENTRY パネル */
.entry-panel {
  position: relative;
  display: block;
/*   overflow: hidden; */
  background: linear-gradient(90deg, #F17603 0%, #E4A307 100%);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-decoration: none;
  color: #fff;
	z-index:1;
	overflow:hidden;
	transition: background 0.5s ease;
}
.entry-panel:hover {
  background: linear-gradient(90deg, #FF5A5A 0%, #F17603 100%);
}

/* 左上の青い平行四辺形アクセント画像 */
.entry-accent {
  position: absolute;
  top: -40px;
  left: -40px;
  height: 100%;
  width: auto;
  z-index: 0;
}

/* パネル内コンテンツ */
.entry-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 60px;
/* 	height:150px; */
}
.entry-text {
  display: flex;
  flex-direction: column;
}
.entry-title {
  font-size: 2rem;
  font-style: italic;
  margin: 0;
  line-height: 1;
}
.entry-subtitle {
  font-size: 1rem;
  margin: 8px 0 0;
	  color: #fff;
	font-weight:bold;
}

/* and more — ● */
.entry-more {
  font-size: 0.9rem;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.more-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transition: width .3s ease, height .3s ease;
}
.entry-panel:hover .more-dot {
  width: 20px;
  height: 20px;
}

/* SP対応 */
@media (max-width: 768px) {
	.entry-panel{
/* 		height:150px; */
	}
  .entry-content {
/*     flex-direction: column; */
    align-items: flex-start;
    padding: 24px 20px;
	  align-items:center;
	  height:100px;
  }
  .entry-more {
    margin-top: 16px;
  }
	.entry-section{
		padding: 20px 0;
	}
	.entry-title img{
		height:40px;
	}
}

/* ===== HERO セクション ===== */
.hero-section {
  background: #fff;
  padding: 0;
	height:100vh;
}
.hero-wrapper {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 20px 0px;
	position:relative;
	height:100%;
	overflow:hidden;
}

/* キャッチコピー */
.hero-title {
  font-size: 49px;
  font-weight: 700;
  color: #0d47a1;
  line-height: 1.5;
/*   margin: 0 0 40px; */
	position:relative;
  z-index:5;
	margin-top:100px;
}

/* Swiper コンテナ */
.hero-swiper {
  position: relative;
  overflow: hidden;
}
.hero-swiper .swiper-wrapper {
  display: flex;
}
.hero-swiper .swiper-slide {
  width: 100%;
}

/* 各スライド内の画像ブロック */
.hero-slide {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

/* 画像要素 */
.hero-image {
  position: relative;
  flex: 1;
  height: 600px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* 左右とも同じスキュー（左下→右上） */
.hero-image::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: inherit;
  background-size: cover;
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
}
/* 内側の本体はクリップ外すため透明オーバーレイ */
.hero-image::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0);
}

/* Swiper ナビ */
.hero-swiper .swiper-pagination {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  color: #fff;
}

/* フッター案内文 */
.hero-note {
  font-size: 0.875rem;
  color: #0d47a1;
/*   text-align: center; */
  margin-top: 40px;
	position:absolute;
	bottom:50px;
	left:20px;
	background:white;
	border:1px solid #0d47a1;
	border-radius:5px;
	padding:10px;
}
.hero-img1{
	position:absolute;
	left:0px;
	top:0;
	height:100%;
}
.hero-img2{
	position:absolute;
	top:0px;
/* 	left:50%;
	transform:translate(-50%); */
	right:350px;
	height:75vh;
	max-height: 600px;
}
.hero-img3{
	position:absolute;
	right:0px;
	bottom:0;
	height:75vh;
	max-height: 600px;
}
.hero-img1 img, .hero-img2 img, .hero-img3 img{
	height:100%;
}

/* SP対応 */
@media (max-width: 768px) {
	.hero-wrapper{
		padding:0 20px;
	}
  .hero-title {
    font-size: 32px;
    margin-bottom: 24px;
	  margin-top:55vh;
  }
  .hero-slide {
    flex-direction: column;
    gap: 16px;
  }
  .hero-image {
    height: 300px;
  }
	.hero-img2{
		width:65%;
		left:-10px;		
	}
	.hero-img3{
		width:65%;
		right:-10px;
		top:50px;
	}
.hero-img1 img, .hero-img2 img, .hero-img3 img{
	height:auto;
	width:100%;
}
	.hero-note{
		position:relative;
		z-index:5;
		left:auto;
		bottom:10px;
	}
}

/* ===== 数字で見るJSTグループ ===== */
.stats {
  position: relative;
  padding: 60px 0;
  overflow: hidden;       /* はみ出し隠し */
  background: none;
}
.stats .wrapper {
  position: relative;     /* pseudo-element の背面に置くため */
  z-index: 1;
  padding-top:120px;
}

/* 右側グレー平行四辺形 */
.stats::before {
  content: '';
  position: absolute;
  top: 0;
  right: -10%;            /* 少しはみ出してスキュー感を出す */
  width: 60%;
  height: 100%;
  background: #f5f5f5;
  transform-origin: top right;
  transform: skewX(-15deg);
  z-index: 0;
}

/* 見出しまわり */
.stats-intro {
/*   text-align: center; */
  margin-bottom: 24px;
  color: #666;
}
.stats-title {
  text-align: left;
  font-size: 2rem;
  font-weight: 700;
  color: #0d47a1;
  margin-bottom: 32px;
}


/* ■ 子見出し用ドット付き */
.dot-heading {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
  font-weight: 700;
  color: #333;
}
.dot-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: #f68b1e;
  border-radius: 50%;
}
.stats-rectangle1{
	position:absolute;
	top:5px;
	left:50px;
}
.stats-rectangle2{
	position:absolute;
	top:180px;
	right:50px;
}

.wrapper .section-title{
	text-align:center;
	margin-bottom:0px !important;
}

.sp{
	display:none;
}

@media (max-width: 768px) {
	.sp{
		display:block !important;
	}
	.pc{
		display:none !important;
	}
	.section-title img{
		max-width:90%;
		max-height:40px;
	}
	.benefits .section-title img{
		max-height:80px;
	}
	.stats{
		padding: 20px 0;
	}
	.stats-rectangle1{
		top:2;
		left:5px;
		width:50px;
	}
	.stats-rectangle1 img{
		width:100%;
	}
	.stats::before{
		right:0;
	}
	.stats .wrapper{
		padding-top:60px;
	}
}

/* ===== えるぼし認定取得セクション ===== */
.certification-section {
	padding-top:60px;
/*   background: #f9f9f9; */
}
.certification-section .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.certification-card {
  display: flex;
	justify-content:center;
  align-items: center;
  background: #fff;
  border-radius: 4px;
/*   box-shadow: 0 2px 8px rgba(0,0,0,0.08); */
  overflow: hidden;
}

/* テキスト部分 */
.certification-content {
/*   flex: 1; */
  padding: 32px 24px;
}
.certification-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
  margin: 0 0 16px;
}
.certification-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* ロゴ部分 */
.certification-logo {
  flex: 0 0 auto;
  padding: 0 24px;
}
.certification-logo img {
  display: block;
  max-width: 120px;
  height: auto;
}

/* SP対応 */
@media (max-width: 768px) {
  .certification-card {
    flex-direction: column;
    text-align: center;
  }
  .certification-content {
    padding: 24px 16px;
  }
  .certification-logo {
    padding: 16px;
  }
  .certification-logo img {
    max-width: 100px;
  }
	.certification-title{
		font-size:1.2rem;
		text-align:left;
	}
	.certification-text{
		text-align:left;
	}
	.certification-card{
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	}
}

.menu-item::marker{
	color:white;
}
.menu-item a{
	text-decoration:none;
	line-height:1.5;
}

/* 支店ラベルをタグ風に */
.contact-label {
  background: #fff;
  color: #004CB3;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  width: 70px;           /* 幅を揃える */
  text-align: center;
}

/* 各 .contact-item の間にドットを入れる */
/* .footer-contact-info .contact-item + .contact-item::before {
  content: "·";
  color: #fff;
  margin: 0 16px;
  font-size: 1rem;
  line-height: 1;
} */
.contact-item a{
	color:white;
	text-decoration:none;
}

/* ボタンをアイコン＋テキストのフレックスに */
.contact-button {
  display: inline-flex;
  align-items: center;
	justify-content:center;
  gap: 8px;
  padding: 12px 24px;
  background: #00b8f4;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;

  /* 幅を下の区切り線と揃える */
  width: calc(100% - 48px);
  max-width: 450px;
}

/* ボタン前にメールアイコンを出す */
.contact-button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('/recruit/wp-content/themes/jst/images/icon-mail-white.svg') no-repeat center center;
  background-size: contain;
}

@media (max-width: 768px) {
	.contact-label{
		font-size:0.6rem;
		width:50px;
	}
	.contact-item{
		gap:5px;
		align-items:center;
	}
	.contact-item a{
		font-size:20px;
	}
	.contact-dept{
		font-size:12px;
	}
	.contact-phone{
		line-height:28px;
		padding-bottom:3px;
	}
	.contact-list{
		gap:5px;
	}
}

.entry-title-area {
    position: relative;
    height: 200px;
    background: rgb(51 127 215 / 19%);
    background-repeat: no-repeat;
    background-position: left bottom, right bottom;
    background-size: calc(100% - 1600px) 100%, 1600px 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	margin-top:90px;
  }
.breadcrumb{
	max-width:1200px;
	padding:10px;
	margin:0 auto;
	position:relative;
	z-index:5;
} 

@media (max-width: 768px) {
    .entry-title-area {
/*       background: rgba(51, 127, 215, 0.7); */
      background-size: cover;
      background-position: right;
      height: 150px;
		margin-top:60px;
    }

    .site-main .breadcrumb {
        display: none;
      }
  }

/* ==========================
   人を育てる仕組みページCSS
   ========================== */

/* 共通ラッパー */
.develop-page .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* イントロ */
.develop-intro h1 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.develop-intro p {
  text-align: center;
  color: #555;
  line-height: 1.6;
}

/* セクション見出し */
.develop-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #0d47a1;
}
.develop-section p {
  line-height: 1.8;
  color: #333;
  margin-bottom: 16px;
}

/* 研修コンテンツ（画像＋テキスト） */
.training-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.training-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
}
.training-text {
  flex: 1;
}
@media (max-width: 768px) {
  .training-content {
    flex-direction: column;
  }
  .training-image img {
    max-width: 100%;
  }
}

/* 福利厚生 */
.welfare-section {
  background: #f5fafd;
}
.welfare-section h2 {
  text-align: center;
  margin-bottom: 40px;
}
.welfare-item {
  margin-bottom: 24px;
}
.welfare-item h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.welfare-item p {
  color: #555;
  line-height: 1.6;
}

/* 社内イベント */
.event-section {
  background: #fff;
}
.event-section h2 {
  text-align: center;
  margin-bottom: 40px;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.event-item img {
  width: 100%;
  border-radius: 4px;
}
.event-item h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 12px 0 8px;
}
.event-item p {
  color: #333;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
	.develop-section h2{
		font-size:1.4rem;
	}
	.develop-page .wrapper{
		padding:20px;
	}
}

/* 外部リンク */
.external-links {
  background: #f5fafd;
  padding: 40px 0;
  text-align: center;
}
.external-links img {
  max-height: 40px;
  margin: 0 12px;
}

/*=================================================================
  Girlstalk 固定ページ用スタイル
=================================================================*/

/* 共通ラッパー */
.wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
  box-sizing: border-box;
}

/* dot-heading（子見出し用マーカー） */
.dot-heading {
  position: relative;
  padding-left: 16px;
  margin-bottom: 16px;
  font-weight: 700;
  color: #0d47a1;
}
.dot-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #f68b1e;
  border-radius: 50%;
}

/* ───────────────────────────────────────
   イントロセクション
─────────────────────────────────────── */
.girlstalk-intro {
  background: #f9f9f9;
}
.girlstalk-intro .intro-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  text-align: justify;
  max-width: 800px;
  margin: 0 auto;
}

/* ───────────────────────────────────────
   プロファイルセクション
─────────────────────────────────────── */
.profile-section .profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.profile-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: justify;
  padding: 16px;
}
.profile-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0d47a1;
  margin: 12px 0 4px;
	text-align:center;
}
.profile-name h3{
	text-align:center;
}
.profile-meta {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 12px;
}
.profile-desc {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.6;
}

/* ───────────────────────────────────────
   Q&A セクション
─────────────────────────────────────── */
.qa-section {
  background: #fff;
  padding: 60px 0;
}
.qa-topic {
  margin-bottom: 48px;
  padding:50px;
}
.qa-title {
  font-size: 1.5rem;
  line-height: 1.4;
	max-width:1200px;
	margin:0 auto;
}
.qa-content p {
  margin-bottom: 16px;
  line-height: 1.8;
  color: #333;
}

/* 話者名タグ風 */
.qa-body p strong,.qa-content p strong, .profile-name strong  {
  display: inline-block;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  margin-right: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* 話者ごとの背景色 */
.speaker-yn { background: #E57373; }  /* Y.N */
.speaker-mo { background: #64B5F6; }  /* M.O */
.speaker-ef { background: #81C784; }  /* E.F */
.speaker-yf { background: #FFB74D; }  /* Y.F */

/* 画像を見出し下に全幅で、縦横比を保って切り出し */
.qa-image {
  width: 100%;
  /* お好みの比率に調整してください（例：横16 : 縦3 = 16/3） */
  aspect-ratio: 16 / 3;
  margin: 16px 0;
  overflow: hidden;
}

.qa-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ───────────────────────────────────────
   レスポンシブ
─────────────────────────────────────── */
@media (max-width: 768px) {
  .wrapper {
    padding: 40px 10px;
  }
  .profile-section .profile-grid {
    grid-template-columns: 1fr;
  }
  .qa-section {
/*     padding: 40px 20px; */
  }
.qa-topic {
	padding:20px;
}
	.qa-image {
		aspect-ratio: 8 / 3;
		}
}
/* ─── 固定ページ用：社員紹介グリッド ─── */
.member-section .member-grid {
  display: grid;
  gap: 24px;
  /* 最小幅240pxで自動調整 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 32px;
  padding-bottom: 60px;
}

/* リンク全体をフル幅に */
.member-section .member-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 既存の .member-panel / .member-image / .panel-content 以下はそのまま */

.sub-menu{
	padding-left:20px;
}

/*――――――――――――――――――――――
  社員紹介ページ専用（employee01.css）
  他ページのスタイルを一切引き継がないよう、
  すべて .employee01 でネストしています。
――――――――――――――――――――――*/

.employee01 {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  line-height: 1.8;
/* 	max-width:1000px; */
	margin:0 auto;
}

/* ヒーロー */
.employee01-hero {
  text-align: center;
  padding: 60px 20px;
  background: #f5f5f5;
	max-width:1000px;
	margin:0 auto;
}
.employee01-hero__name {
  font-size: 2.5rem;
  margin: 0;
  color: #004CB3;
}
.employee01-hero__dept {
  font-size: 1rem;
  margin: 8px 0;
}
.employee01-hero__meta {
  font-size: 0.875rem;
  color: #666;
}
.employee01-hero__image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 20px;
}

/* 各セクション共通 */
.employee01-section {
  padding: 60px 20px;
  border-bottom: 1px solid #e0e0e0;
}
.employee01-section > h2, .employee01-section > div, .employee01-schedule{
	max-width:1000px;
	margin:0 auto;
	width:100%;
}
.employee01-section > h2{
	margin-top:15px;
	margin-bottom:15px;
}
.employee01-section--daily, .employee01-section--career, .employee01-section--private{
	background: #DCE6F3;
}
.page-content .stats-rectangle1{
	top:300px;
}
.page-content .stats-rectangle2{
	top:600px;
}
.division-section .stats-rectangle1{
	top:00px;
}
.division-section .stats-rectangle2{
	top:300px;
}
.member-section .stats-rectangle1{
	top:600px;
}
.member-section .stats-rectangle2{
	top:900px;
}
/* レスポンシブ */
@media (max-width: 768px) {
	.member-section .stats-rectangle1{
	display:none;
}
.member-section .stats-rectangle2{
	display:none;
}
	.profile-section .stats-rectangle1{
	display:none;
}
.profile-section .stats-rectangle2{
	display:none;
}
	.develop-section .stats-rectangle1{
	display:none;
}
.develop-section .stats-rectangle2{
	display:none;
}
}


.employee01-section:last-child {
  border-bottom: none;
}
.employee01-section__title {
  font-size: 1.5rem;
  margin-bottom: 24px;
  color: #004CB3;
}

/* 画像＋テキストの横並び */
.employee01-section__body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.employee01-section__image{
	width:30%;
}
.employee01-section__image img {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}
.employee01-section__text {
  width: 70%;
}
.employee01-section--motivation .employee01-section__text, .employee01-section--fulfillment .employee01-section__text, .employee01-schedule .employee01-section__text{
	width:100%;
}

/* タイムスケジュール */
.employee01-schedule {
  list-style: none;
  padding: 0 20px;
  margin: 0 auto;
}
.employee01-schedule li {
  margin-bottom: 8px;
  font-size: 1rem;
}

/* メッセージのみテキスト全幅 */
.employee01-section--message .employee01-section__body {
  display: block;
}
.employee01-section--message .employee01-section__text {
  width: 100%;
}

/* レスポンシブ */
@media (max-width: 768px) {
	.employee01-section{
		padding:15px;
	}
  .employee01-section__body {
    flex-direction: column;
	  gap:0;
  }
  .employee01-section__image img,
  .employee01-section__text {
    width: 100%;
  }
  .employee01-hero__image {
    width: 150px;
    height: 150px;
  }
	.employee01-section__image, .employee01-section__text{
		width:100%;
	}
}

/* === 写真で見るJSTグループ === */
.company-photos {
  padding: 30px 0;
  background: #fff;
}
.company-photos .wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.company-photos .section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}

/* カテゴリごとのタイトル */
.photos-category + .photos-category {
  margin-top: 40px;
}
.photo-category-title {
  font-size: 1.5rem;
	margin-top:5px;
  margin-bottom: 16px;
  font-weight: 700;
  color: #004CB3;
}

/* ギャラリーグリッド */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.photo-gallery li img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .3s;
}
.photo-gallery li img:hover {
  transform: scale(1.05);
}

@media screen and (max-width: 767px) {
  .photo-gallery {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .photo-gallery li {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 70%; /* 必要に応じて調整 */
  }

  .photo-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* オプション */
  }

  /* スクロールバーを隠す（iOS対応のためには JS で対応することも） */
  .photo-gallery::-webkit-scrollbar {
    display: none;
  }
}

/* Lightbox モーダル */
.photo-lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.photo-lightbox.active {
  display: flex;
}
.photo-lightbox .lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.photo-lightbox .lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
}

/* ――― QA：本文＋サムネイルを横並び ――― */
.qa-body {
  max-width:1200px;
  margin:0 auto;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.qa-topic:nth-of-type(even) {
  background-color: #e4e8ec;
}
.qa-body-image {
  flex: 0 0 30%;
  max-width: 30%;
}
.qa-body-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.qa-body-text {
  flex: 1;
  min-width: 200px;
}

/* 奇数番目のテーマ（1,3,5…）は画像とテキストを逆順に */
.qa-section .qa-topic:nth-of-type(even) .qa-body {
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .qa-body {
    flex-direction: column !important;
    gap: 16px;
  }
  .qa-body-image,
  .qa-body-text {
    max-width: 100%;
  }
}

/* 採用選考プロセス フロー図 */
.process-flow.flow-diagram {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各ステップのラッパー (白枠) */
.process-flow.flow-diagram li {
  position: relative;
  flex: 1 1 calc(33.333% - 20px);
  margin: 10px;
  padding: 10px;          /* 白枠の内側に余白を確保 */
  box-sizing: border-box; /* パディング込みでサイズを計算 */
}

/* 青枠のステップボックス */
.process-flow.flow-diagram .step-box {
  width: 100%;            /* li 内いっぱいに広がる */
  box-sizing: border-box; /* 枠線・パディング込みで幅を計算 */
  background: #ffffff;
  border: 2px solid #004fa3;
  border-radius: 4px;
  padding: 20px;
height: 100%;
    display: flex;
    flex-direction: column;
	justify-content:center;
}

/* ステップ間の矢印線と矢印アイコン */
.process-flow.flow-diagram li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 2px;
  background: #ccc;
  transform: translateY(-50%);
}

.process-flow.flow-diagram li:not(:last-child)::before {
  content: "▶";
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #ccc;
}
/* SP対応：フロー図を縦並び＆矢印を下向きに */
@media (max-width: 768px) {
  .process-flow.flow-diagram {
    flex-direction: column;
  }
  .process-flow.flow-diagram li {
    flex: none;
    margin: 10px 0;
  }
  .process-flow.flow-diagram li:not(:last-child)::after {
    /* 横線→縦線 */
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 2px;
    height: 20px;
    transform: translateX(-50%);
  }
  .process-flow.flow-diagram li:not(:last-child)::before {
    content: "▼"; /* 下向き */
    top: auto;
    bottom: -12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    font-size: 14px;
    color: #ccc;
  }
  .recruit-table {
    width: 100%;
    border-collapse: collapse;
  }
  .recruit-table tr {
    display: block;
    margin-bottom: 0px;
/*     border-bottom: 1px solid #ddd; */
  }
  .recruit-table th,
  .recruit-table td {
    display: block;
    width: 100%;
    padding: 8px 0;
    box-sizing: border-box;
    border: none;
  }
  .recruit-table th {
    font-weight: 700;
    background: #e0f0fa;
  }
}