/*ご利用の流れ
---------------------------------------------------------------------------*/
.flow-box * {margin: 0;padding: 0;}

/*背景画像*/
#flow {
	background: url("../images/bg-flow.png") no-repeat right top / 50vw;	/*right(右)、top(上)に配置し、幅は画面幅の50%に。*/
}

/*ステップボックス１個あたりの設定*/
.flow-box {
	position: relative;
	margin-bottom: 4rem;	/*下に空けるスペース、2文字分。ステップボックス同士のスペースです。*/
}

/*ボックス内のh3見出し（大きな端末で左側に配置される背景色つきの見出し）*/
.flow-box .title h3 {
	background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	margin-left: calc(-1 * var(--content-space));
	margin-right: calc(-1 * var(--content-space));
	text-align: center;	/*テキストをセンタリング*/
	padding: 2rem;		/*見出し内の余白。２文字分。*/
	margin-bottom: 2rem;	/*見出しの下に空けるスペース。２文字分。*/
}

/*h3内のspan（小さな装飾文字）*/
.flow-box .title h3 span {
	display: block;
	font-size: 0.7em;	/*文字サイズ。親要素の70%。*/
}

/*ボックス内のh3見出し（空欄用）*/
.flow-box .title2 h3 {
	background: #fff;		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	margin-left: calc(-1 * var(--content-space));
	margin-right: calc(-1 * var(--content-space));
	text-align: center;	/*テキストをセンタリング*/
	padding: 2rem;		/*見出し内の余白。２文字分。*/
	margin-bottom: 2rem;	/*見出しの下に空けるスペース。２文字分。*/
}

/*「STEP01」〜「STEP04」のテキスト*/
.flow-box .step-num {
	display: inline-block;
	position: absolute;
	left: 0px;
	top: -50px;	/*本来の場所から上に50pxずらす*/
	width: 100%;
	font-size: 3rem;	/*文字サイズ300%*/
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.flow-box {
		display: flex;
		align-items: flex-start;
		gap: 5rem;	/*左右のブロック同士の間に空けるスペース。５文字分。*/
	}
	
	/*「STEP01」〜「STEP04」のテキスト*/
	.flow-box .step-num {
		top: -100px;		/*本来の場所から上に100pxずらす*/
		font-size: 5rem;	/*文字サイズ500%*/
		opacity: 0.15;		/*透明度。色が15%出た状態。*/
	}

	/*h3見出しが入ったブロック（大きな端末で左側に配置される背景色つきの見出しを囲むブロック）*/
	.flow-box .title {
		width: 30%;	/*幅*/
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
		
	/*h3見出しが入ったブロック（空欄用）*/
	.flow-box .title2 {
		width: 30%;	/*幅*/
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}

	/*ボックス内のh3見出し（大きな端末で左側に配置される背景色つきの見出し）*/
	.flow-box .title h3 {
		margin-right: auto;
		border-radius: 0 100px 100px 0;	/*角を丸くする指定。左上、右上、右下、左下の順番。*/
	}

	/*大きな端末で右側に配置されるテキストブロックを囲むボックス*/
	.flow-box .text {
		flex: 1;
		margin-right: 3vw;
	}

	}/*追加指定ここまで*/


/*ステップボックス
---------------------------------------------------------------------------*/
ul.step {
	margin: 0 !important;padding: 0 !important;
	list-style: none;
}

/*ステップ１個あたり*/
ul.step li {
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、varは色の指定で、css冒頭のprimary-colorを読み込みます。*/
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
	position: relative;
}

/*「▼」のマーク*/
ul.step li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。本来の場所より上に２文字分の場所。*/
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
	opacity: 0.3;	/*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.step li:last-child::after {
	content: "";
}

/* DIV内に画像とテキストを横並びにするための */
ul.step .container2 {
  /* これが横並びの魔法です */
  display: flex;  
  /* (オプション) 横幅を設定 */
  width: 100%; /* 全幅に修正しました */
  /* (オプション) 均等なスペースを確保 */
  justify-content: space-between; /* space-aroundから変更 */
}

/* ★追加★ 画像を右側（テキストを左側）にするためのクラス */
ul.step .container2.reverse {
  /* 要素の並び順を反転させます */
  flex-direction: row-reverse; 
}

.box5 {
  /* 要素の幅や背景など */
  height: auto; /* 高さはコンテンツに合わせて自動に */
  padding: 15px; /* パディングを調整 */
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.box5_1 { 
  background-color: #fff;
  /* 画像やアイコンのブロック。幅を固定気味に */
  width: 30%; /* 幅を30%に設定 */
  display: flex; /* 中央寄せのためにFlexboxを使うことが多い */
  /*align-items: center;*/
  align-items: flex-start;/* 上端を揃える */
  justify-content: center;
}

.box5_2 { 
  background-color: #fff;
  /* テキストのブロック。幅を広めに */
  width: 68%; /* 残りのスペースに設定 */
  text-align: left;
  padding-left: 1rem;
}

/*list-yoko-scroll（お客様の声ブロック）
---------------------------------------------------------------------------*/
.list-yoko-scroll * {margin: 0; padding: 0;}


/*横スクロールブロック全体*/
.list-yoko-scroll {
	display: flex;
	align-items: flex-start;
	/*overflow-x: auto;
	scrollbar-width: none;	/* Firefox用 */
	/*scroll-snap-type: x mandatory; /* スナップスクロールを有効にする */
	padding-top: 30px;
	padding-bottom: 30px;
	margin-right: calc(-1 * var(--content-space));
  overflow: hidden; /* ← スクロールを禁止にしてアニメーションに任せる */
  animation-name: slideYokoScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.list-yoko-scroll {
  overflow-x: visible;
  overflow-y: visible;
}
/* スライドアニメーション */
@keyframes slideYokoScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.list-yoko-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
.list-yoko-scroll .list {
	width: 60%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	margin-right: 2rem;	/*ふきだしごとの間に空けるスペース。２文字分。*/
	position: relative;
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	border-radius: 1rem;	/*角を丸くする指定*/
	padding: 2rem;			/*ボックス内の余白。２文字分。*/
	position: relative;    /* これが必須です */
}

/* 修正箇所：このブロック内の a タグにスタイルを適用します */
.list-yoko-scroll .list a {
  /* リンクの色を白 (#fff) に設定します */
  color: #fff; 
  /* リンクの下線を非表示にします */
  text-decoration: none;
}

.staff-link {
  /* リンク要素をボックス全体に広げるためのトリック */
  position: static; /* h4のaタグがz-indexを持つようにする */
}

/* ::after擬似要素を使って、リンク領域を広げます */
.staff-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1; /* 他のコンテンツの上に表示 */
}

/* h4以外の要素が、リンクに埋もれないようにする */
.list p.text {
  position: relative;
  z-index: 2; /* リンクのz-indexより大きく設定 */
}

/* リンクの上にマウスが来たときの見た目の変更を .list に適用する */
.list:hover {
  background-color: #f0f0f0; /* ホバー時の色変更の例 */
  cursor: pointer;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック内の１個あたり*/
	.list-yoko-scroll .list {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	}

	}/*追加指定ここまで*/


/*偶数版目のふきだしだけ、下に30pxずらす*/
.list-yoko-scroll .list:nth-of-type(even) {
	transform: translateY(30px);
}

/*ふきだしぐち（▲の形）*/
.list-yoko-scroll .list::before {
	content: "▲";	/*このテキストを出す*/
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
	font-size: 30px;	/*サイズ*/
	position: absolute;
	left: 30%;	/*ふきだしの左からの配置場所。お好みで。*/
	top: -40px;	/*ふきだしの上からの配置場所*/
}

/*ふきだし内の.text（テキスト）ブロック*/
.list-yoko-scroll .list .text {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.5;	/*行間*/
}


/*よく頂く質問ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.faq {
	font-size: 1.1rem;	/*文字サイズ130%*/
	border-bottom: 1px solid rgba(255,255,255,0.3);	/*下線の幅、線種、最後は色の指定で255,255,255は白の事で0.3は色を30%出す指定。*/
}

/*質問*/
.faq dt {
	display: flex;
	align-items: flex-start;
	border-top: 1px solid rgba(255,255,255,0.3);	/*上の幅、線種、最後は色の指定で255,255,255は白の事で0.3は色を30%出す指定。*/
	padding: 1rem;		/*ブロック内の余白。１文字分。*/
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*「＋」アイコン（閉じている場合）*/
.faq dt::before {
	content: "＋";	/*アイコン画像の指定*/
	margin-right: 1rem;	/*右側に空けるスペース*/
	flex-shrink: 0;
	background: var(--primary-inverse-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	width: 2rem;		/*幅*/
	line-height: 2rem;	/*高さ*/
	text-align: center;
	border-radius: 50%;	/*円形にする*/
	transform: translateY(5px);	/*アイコンの上下バランスの微調整*/
}

/*「ー」アイコン（開いている場合）*/
.faq dt.active::before {
	content: "ー";	/*アイコン画像の指定*/
}

/*回答*/
.faq dd {
	display: none;      /* 回答を初期状態で非表示にする */
	margin: 0 1rem 1rem 4rem;	/*ボックスの外側にとる余白。上、右、下、左への順番。*/
	padding: 1rem 2rem;	/*ボックスの内側の余白。上下に1文字、左右に２文字分。*/
	background: #fff;	/*背景色*/
	color: #555;		/*文字色*/
	border-radius: 5px;	/*角を丸くする指示*/
}

/*bg5
---------------------------------------------------------------------------*/
.bg5 {
	background: var(--primary-color);		/*背景色。css冒頭のsecondary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
	padding: 1rem 8rem 4rem 8rem;
}

.bg5 h2 {
	color: var(--primary-inverse-color);	/*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
	font-size: 3.0rem;
}

.bg5 h3 {
	color: var(--primary-inverse-color);	/*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
	font-size: 2.0rem;
}

.bg5 h4 {
	color: var(--primary-color);	/*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
	font-size: 1.8rem;
	font-weight: 400;
}

/*h2内のspan（小さな装飾文字）*/
.bg5 h2 span {
	display: block;
	font-size: 0.4em;	/*文字サイズ。親要素の70%。*/
	font-weight: 200;
	margin-top: -1rem;
	margin-left: 1rem;
}

/*別途タイトル用CSS----------------------------------------------*/
.heading-27 {
    display: flex;
    align-items: center;
    column-gap: 8px;
    color: #333333;
	justify-content: center;
	font-weight: 500;
}

.heading-27::before {
    width: 0.8em;
    height: 0.4em;
    border-bottom: 4px solid #2589d0;
    border-left: 4px solid #2589d0;
    transform: rotate(-45deg) translate(2px, -2px);
    content: '';
}

.heading-9 {
    position: relative;
    padding: .2em 1.5em;
	width: fit-content;
	margin: 0 auto;
    border-radius: 10px;
    background-color: #fff;
    color: var(--primary-color);
}

.heading-9::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 30px;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top: 11px var(--primary-inverse-color);
}

/*　産休取得数の　テーブル　*/
/* table5：上下の線と縦区切り線だけ残す */
.table5 {
  border-collapse: collapse;
  width: 100%;
  border-top: 1px solid #333;   /* 上線 */
  border-bottom: 1px solid #333; /* 下線 */
  color: rgb(90, 94, 55);
}

/* セル全体の基本線（縦線・横線） */
.table5 td {
  border: 1px solid #333;  /* まず全てに線をつける */
  padding: 8px;
  text-align: center;
}

/* 左右の外枠縦線だけ消す */
.table5 td:first-child {
  border-left: none;
}
.table5 td:last-child {
  border-right: none;
}

/* 行の高さを揃える（追加） */
.table5 tr {
  height: 1.5rem;   /* ここで調整 */
}