:root {
  --color1:#0E4AB4;
  --color2:#5892EB;
  --color3:#416896;
}



/*インデント*/
p.indent {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 4px;
}
/*マーカー*/
.mk {
    background: linear-gradient(transparent 60%, #FFFF00 0%);
}

/**/
/*----------------------------------*/
/*タイトル系共通*/
/*----------------------------------*/
h2.title{
	font-size: 40px;
	text-align:center;
	color: var(--color1);
	/* font-family: 'Sawarabi Mincho', sans-serif; */
	font-weight: normal;
	color: #0945B3;
	border-bottom: 3px double #0945B3;
	padding-bottom: 0px;
	margin-bottom: 20px;
}

h3.title{
	font-size: 30px;
	text-align:center;
	color: var(--color1);
	/* font-family: 'Sawarabi Mincho', sans-serif; */
	font-weight: normal;
	color: #0945B3;
	border-bottom: 2px solid #0945B3;
	padding-bottom: 0px;
	margin-bottom: 20px;
}

h4.title{
	font-size: 25px;
	text-align:center;
	color: var(--color1);
	/* font-family: 'Sawarabi Mincho', sans-serif; */
	font-weight: normal;
	color: #0945B3;
	border-bottom: 2px solid #0945B3;
	padding-bottom: 0px;
	margin-bottom: 20px;
}

h5.title{
	font-size: 25px;
	color: var(--color1);
	/* font-family: 'Sawarabi Mincho', sans-serif; */
	font-weight: normal;
	color: #0945B3;
	border-left: 5px solid #0945B3;
	padding-bottom: 0px;
	margin-left: 20px;
	margin-top: 20px;
	padding-left:20px;
}


/*----------------------------------*/
/*グリッドレイアウト系共通*/
/*----------------------------------*/



/* グリッドコンテナ */
.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 3列のグリッド */
	gap: 10px; /* カード間の間隔 */
	max-width: 1200px;
	margin: 0 auto;
}

/* グリッドコンテナ 3列並べ*/
.grid-container3 {
	grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
}

/* グリッドコンテナ 2列並べ*/
.grid-container4 {
	grid-template-columns: repeat(4, 1fr); /* 3列のグリッド */
}


/* カードのスタイル */
.card {
	background-color: var(--card-bg-color);
	border-radius: 8px;
	overflow: hidden;
	/*
	text-align: center;
	 */
padding: var(--card-padding);
}

/* カード内の画像 */
.card img {
	//	width: 100%;
	//	height: 200px;
	object-fit: cover; /* 画像が枠に収まるように */
}

/* カードのタイトル */
.card h2 {
	color: var(--title-color);
	font-size: 1.5rem;
	margin: 10px 0;
}

/* スマートフォン向けのメディアクエリ */
@media (max-width: 768px) {
	.grid-container {
		grid-template-columns: 1fr; /* 1列に変更 */
	}

	.card img {
		height: 150px; /* スマホでは画像の高さを小さく */
	}
}

/*-------------------------------*/
/*トップ　インデックス　グリッド*/
/*-------------------------------*/

/* グリッドコンテナ */
.grid-top {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 3列のグリッド */
	gap: 10px; /* カード間の間隔 */
	max-width: 1200px;
	margin: 0 auto;
}

@media screen and (max-width: 568px) { 
	.grid-top {
		display: grid;
		grid-template-columns: repeat(1, 1fr); /* 3列のグリッド */
		gap: 10px; /* カード間の間隔 */
		max-width: 1200px;
		margin: 0 auto;
	}
}


/* カードのスタイル */
.grid-top div{
	background-color: var(--card-bg-color);
	border-radius: 8px;
	overflow: hidden;

	grid-row: span 2;
	/*
	text-align: center;
	 */
padding: var(--card-padding);
}

/* カード内の画像 */
.grid-top div img{
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* カードのタイトル */
.grid-top div h3{
	font-size:20px;
	text-align:center;

}


/* スマートフォン向けのメディアクエリ */
@media (max-width: 768px) {
	.grid-container {
		grid-template-columns: 1fr; /* 1列に変更 */
	}

	.card img {
		height: 150px; /* スマホでは画像の高さを小さく */
	}
}

h3.index{
	background-color:var(--color1);	
	border-radius:20px;
	color:white;
	margin-bottom:10px;
}


/*トップ　ごあいさつ*/
.index-container {
  text-align: center;
  margin-bottom:30px;
}

h2.greeting {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-weight:normal;
}

h2.greeting:before, h2.greeting:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

h2.greeting:before {
  left:0;
}
h2.greeting:after {
  right: 0;
}
/*----------------------------------*/
/*トップ　カード　タイトル*/
/*----------------------------------*/
h3.card {
	color: var(--color1);
	font-weight:normal;
	text-align: center;
	position: relative; /* ::afterを配置するための基準 */
	padding-bottom: 5px; /* 下線とテキストの間隔 */
	border-bottom: 2px solid #999; /* グレー(#999)の下線 */
	display: inline-block; /* テキスト幅に合わせて下線を調整 */
	border-radius: 0px;
}

h3.card::after {
	content: '';
	position: absolute;
	bottom: -2px; /* border-bottomと同じ位置 */
	left: 0;
	width: 33.33%; /* 全体の1/3の長さ */
	height: 2px; /* 下線と同じ太さ */
	background-color: var(--color1); /* 重ねる色（例: 青） */
	border-radius: 0px;
}



/*----------------------------------*/
/*文字系共通*/
/*----------------------------------*/

/*リンク意図的にアンダーライン*/
a.line{
	text-decoration:underline;
}




/*文字右寄せ*/
p.textright {
	text-align: right;
}

/*明朝*/
span.min {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝ProNW4", "HiraginoMinchoProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", serif;
}




/*index*/
span.f20 {
	font-size: 25px;
}


/*-------------------------------*/
/*左右二段 gridかつスマホreverseで入れ替え可能*/
/* ボディのデフォルトマージンをリセットし、オーバーフローを防ぐ */
/*-------------------------------*/

.container {
	display: flex;
	width: 100%;
}

.left, .right {
	width: 50%;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center; /* 垂直方向の中央揃え */
	align-items: center; /* 水平方向の中央揃え */
	min-height: 300px; /* コンテンツが見えるように最低高さを設定 */
}

.left {
	background-color: #f0f0f0;
}

.right {
	background-color: #e0e0e0;
}

/* 画像のスタイル（左右共通化） */
.left img, .right img {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px; /* 画像と文章の間隔 */
	display: block; /* 画像の余白を防ぐ */
}

/* スマホ表示（例: 768px以下） */
@media (max-width: 768px) {
	.container {
		flex-direction: column;
		//		width: 100vw; /* ビューポート幅に合わせる */
	}

	.left, .right {
		width: initial;
		padding: 0px;
		box-sizing: border-box;
	}

	/* reverseクラスがある場合、スマホ表示で順序を入れ替え */
	.container.reverse {
		flex-direction: column-reverse;
	}
}


/*----------------------------------*/
/*会社案内*/
/*----------------------------------*/
/*テーブル*/

table.if{
	width:100%;
}
.if1 {
	font-weight: bold;
	color: var(--color1);
	padding: 5px;
	width:20%;
	border-bottom: 1px solid  var(--color2);
	vertical-align:top;
}
.if2 {
	border-bottom: 1px solid  var(--color2);
	padding: 5px;
	width: 70%;
	border-bottom: 1px solid  var(--color2);
}

@media screen and (max-width: 568px) {
	.if1 {
		display: block;
		padding: 8px 2px 2px 2px;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0);
	}
	.if2 {
		display: block;
		padding: 2px;
		width: 99%;
	}
}


/**/
.grid-container3 p{
	width:100%;
	background-color:var(--color1);
	border-radius:5px;
	padding:10px;
	color:white;
}

/*top 隙間調整*/
.mg-top-100{
	margin-top:50px;
}
span.top-tel{
	background-color:var(--color1);
	padding:5px;
	color:white;
	border-radius:5px;
	font-size:10px;
}

span.top-tel a{
	color:white;
}



h3.title italic{
	font-family:italic;
}

/*--------------------------*/
/* 会社案内　アクセス */
/*--------------------------*/

h3.access {
  text-align: center;
  font-size:30px;
  color:var(--color1);
  font-weight:normal;
}

h3.access::after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  border-top: 2px solid var(--color1);
  border-bottom: 2px solid var(--color1);
  margin: 10px auto;
}
.grid-access {
	display: grid;
	grid-template-columns: repeat(4, 1fr); 
	gap: 10px; /* カード間の間隔 */
	max-width: 1200px;
	margin: 0 auto;
}

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

	.grid-access {
		display:block;
	}

}
h4.info{
    font-size: 20px;
    text-align: center;
    color: var(--color1);
    font-weight: normal;
    border-bottom: 2px solid #0945B3;
    padding-bottom: 0px;
    margin-bottom: 10px;
}

.grid-access div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%; /* 親要素に合わせる */
  max-width: 100%; /* 任意の固定幅 */
  overflow: hidden; /* はみ出した画像を隠す */
}

/* 画像が枠に収まるように */
.grid-access div img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を枠に合わせてトリミング */
}

/* iPad（縦・横モード）向けメディアクエリ */
@media screen and (min-width: 768px) and (max-width: 1024px) {

	.grid-access div {
		height:310px !important;
	}
}

/* iPad横モード（ランドスケープ）専用 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

	.grid-access div {
		height:330px !important;
	}
}
/*--------------------------*/
/* ご連絡 */
/*--------------------------*/

.grid-inq {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列のグリッド、1:1 */
  gap: 20px; /* 列間の間隔 */
  margin: 0 auto;
  max-width: 1200px; /* 任意の最大幅 */
  box-sizing: border-box;
}

/* テキストエリア */
.grid-inq .text-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上部から開始 */
  align-items: flex-start; /* 左揃え */
  padding: 10px;
  box-sizing: border-box;
}

/* 見出し */
.grid-inq h3 {
  color: #003087; /* 画像の青色に合わせる */
  font-size: 1.5rem;
  margin: 10px 0;
}

/* 説明文 */
.grid-inq p {
  font-size: 1rem;
  color: #222;
  margin: 10px 0;
}

/* 水平線 */
.grid-inq hr {
  width: 100%;
  border: none;
  border-top: 1px solid #ccc;
  margin: 10px 0;
}

/* ボタンエリア */
.grid-inq p.inq {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  justify-content: flex-start; /* 左揃え */
  gap: 10px; /* ボタン間の間隔 */
  width: 100%;
  margin: 10px 0;
}

/* ボタン */
.grid-inq p.inq span {
	display:inline-block;
  padding: 8px 16px;
  border: 1px solid #aaa;
  background-color: white;
  font-size: clamp(13px, 1.2vw, 13px);
  color: #222;
  box-sizing: border-box;
  cursor: pointer; /* クリック可能に見せる */

  margin-bottom:20px !important;
}

/* 画像エリア */
.grid-inq .image-area {
  max-width: 100%; /* グリッド列の幅に合わせる */
  height: 0; /* 高さをアスペクト比で制御 */
  padding-bottom: 100%; /* 1:1のアスペクト比を維持（任意で調整可能） */
  position: relative; /* 画像を絶対配置するためのコンテナ */
  overflow: hidden; /* はみ出しを防止 */
}

/* 画像 */
.grid-inq .image-area img {
  position: absolute; /* 親コンテナに合わせて配置 */
  top: 0;
  left: 0;
  width: 100%; /* 親コンテナの幅に合わせる */
  height: 100%; /* 親コンテナの高さに合わせる */
  object-fit: cover; /* 画像が枠に収まる */
}

/* スマホ表示 */
@media screen and (max-width: 568px) {
  .grid-inq {
    display: block; /* ブロック表示で上下に */
    width: 100%;
  }

  .grid-inq .text-area,
  .grid-inq .image-area {
    width: 100%;
    margin-bottom: 20px; /* 上下の間隔 */
  }

  /* reverseクラスの場合、順番を入れ替える */
  .grid-inq.reverse .text-area {
    order: 1; /* テキストを上に */
  }

  .grid-inq.reverse .image-area {
    order: 2; /* 画像を下に */
  }

  /* スマホでの画像エリア */
  .grid-inq .image-area {
    height: auto; /* スマホでは高さを自動に */
    padding-bottom: 0; /* アスペクト比制御を解除 */
  }

  .grid-inq .image-area img {
    position: static; /* スマホでは通常のフロー */
    height: auto; /* 画像の高さを自動に */
  }

  /* ボタンは折り返しを維持 */
  .grid-inq p.inq {
    flex-wrap: wrap;
    gap: 8px; /* スマホでは間隔を少し狭める */
  }
}

span.inq-sp-sm{
	display:inline-block;
	font-size:12px;
}
@media screen and (max-width: 568px) { 
	span.inq-sp-sm{
		text-align:left;
	}

}

/*--------------------------*/
/* 業務内容 */
/*--------------------------*/


.grid-law {
	display: grid;
	grid-template-columns: 7fr 3fr; /* 7:3の比率 */
	gap: 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
}

.grid-law div {
	/*
    background: #f0f0f0;
	*/
    padding: 10px;
    justify-content: center; /* 水平中央揃え */
    align-items: center; /* 垂直中央揃え */
    height: 100%; /* 親要素の高さを埋める */
}



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

	.grid-law div img{
		max-width: 300px;
	}
}

@media screen and (max-width: 568px) { 
	.grid-law div img{
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
    object-position: center;
}
}



/* 3の側（2番目のdiv）に画像を横並びで全体表示 */
.grid-law div:nth-child(2) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.grid-law div:nth-child(2) img {
	max-width: 100%;
	height: auto;
	object-fit: cover; /* 画像全体を表示 */
	flex: 1 1 auto; /* 画像を横に並べる */
}

/* スマホ表示（768px以下で縦並び） */
@media (max-width: 768px) {
	.grid-law {
		grid-template-columns: 1fr; /* 縦並び */
	}

	.grid-law div:nth-child(2) {
		flex-direction: row; /* 画像は横並びを維持 */
		justify-content: space-between;
	}
}




/*-------------------------------*/
/*---主要業務---------------------------*/
/*-------------------------------*/



.grid-inq-top {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1の比率 */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.grid-inq-top div {
	/*
    background: #f0f0f0;
	*/
    padding: 0px;
    display: flex;
    flex-direction: column; /* テキストまたは画像を縦に配置 */
    justify-content: center; /* 上下中央揃え */
    align-items: center; /* 左右中央揃え */
}

.grid-inq-top div img {
    width: 100%; /* 親要素に合わせて幅を調整 */
    height: auto; /* 固定高さ */
    object-fit: cover; /* 画像全体を表示、枠に合わせてトリミング */
    object-position: center; /* 画像の中心を基準にトリミング */
}

/* スマホ表示（768px以下で縦並び） */
@media (max-width: 768px) {
    .grid-inq-top {
        display: flex; /* flexで縦並びを制御 */
        flex-direction: column; /* 縦並び */
        gap: 20px; /* グリッドのgapを継承 */
    }

    .grid-inq-top div {
        order: 0; /* デフォルトの順序をリセット */
    }

    .grid-inq-top.reverse div:nth-child(1) {
        order: +1; /* 画像のdivを上に */
    }
}


/*---------------ここからメール----------------*/
.grid-main-work {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1の比率 */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.grid-main-work div {
	/*
    background: #f0f0f0;
	*/
    padding: 10px;
    display: flex;
    flex-direction: column; /* テキストまたは画像を縦に配置 */
    justify-content: center; /* 上下中央揃え */
    align-items: center; /* 左右中央揃え */
}

.grid-main-work div img {
    width: 100%; /* 親要素に合わせて幅を調整 */
    max-width: 500px; /* 最大幅を制限 */
    height: auto; /* 固定高さ */
    object-fit: cover; /* 画像全体を表示、枠に合わせてトリミング */
    object-position: center; /* 画像の中心を基準にトリミング */
}

/* スマホ表示（768px以下で縦並び） */
@media (max-width: 768px) {
    .grid-main-work {
        display: flex; /* flexで縦並びを制御 */
        flex-direction: column; /* 縦並び */
        gap: 10px; /* グリッドのgapを継承 */
    }

    .grid-main-work div {
        order: 0; /* デフォルトの順序をリセット */
    }

    .grid-main-work.reverse div:nth-child(1) {
        order: +1; /* 画像のdivを上に */
    }
}
/*--------------------------*/
/* お仕事開始までの手順 */
/*--------------------------*/


.grid-flow {
	display: grid;
	grid-template-columns: 3fr 7fr; /* 3:7の比率 */
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
}

.grid-flow div {
	/*
	background: #f0f0f0;
	*/
	padding: 10px;
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: flex-start; /* 左寄せ */
}

/* 左側（1番目のdiv）に画像を横並びで全体表示 */
.grid-flow div:nth-child(1) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.grid-flow div:nth-child(1) img {
	max-width: 100%;
	height: auto;
	object-fit: cover; /* 画像全体を表示 */
	flex: 1 1 auto; /* 画像を横に並べる */
}

/* スマホ表示（768px以下で縦並び、画像を下に） */
@media (max-width: 768px) {
	.grid-flow {
		grid-template-columns: 1fr; /* 縦並び */
	}

	.grid-flow div:nth-child(1) {
		order: 2; /* 画像を含む1番目のdivを下に */
	}

	.grid-flow div:nth-child(2) {
		order: 1; /* 2番目のdivを上に */
	}

	.grid-flow div:nth-child(1) {
		flex-direction: row; /* 画像は横並びを維持 */
		justify-content: space-between;
	}
}



/*-------------------------------*/
/*--- 仕事をお探しの方 ---------------------------*/
/*-------------------------------*/

h5.jos{
	color:var(--color1);
	text-align:center;
	font-size:20px;
}

h5.jos::after {
    display: block;
    content: '';
    width: 60px;
    height: 0px;
    border-top: double 3px var(--color1);
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.3em;
    margin-bottom: 1.3em;
}


.cnt {
    text-align: center;
}

.wk8 {
    margin: 0 auto;
    width: 80% !important;
    margin-bottom: 10px;
}
.wk {
    border: 1px solid var(--color1);
    padding: 10px;
}


h3.jobs{
	background-color:var(--color3);
	color:white;
	border-radius:30px;
	text-align:center;
}




.grid-job-seek {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1の比率 */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.grid-job-seek div {
	/*
    background: #f0f0f0;
	*/
    padding: 10px;
    display: flex;
    flex-direction: column; /* テキストまたは画像を縦に配置 */
    justify-content: center; /* 上下中央揃え */
    align-items: center; /* 左右中央揃え */
}

.notflex{
    display: block !important;
}

.grid-job-seek div img {
    width: 100%; /* 親要素に合わせて幅を調整 */
    max-width: 500px; /* 最大幅を制限 */
    height: auto; /* 固定高さ */
    object-fit: cover; /* 画像全体を表示、枠に合わせてトリミング */
    object-position: center; /* 画像の中心を基準にトリミング */
}

/* スマホ表示（768px以下で縦並び） */
@media (max-width: 768px) {
    .grid-job-seek {
        display: flex; /* flexで縦並びを制御 */
        flex-direction: column; /* 縦並び */
        gap: 10px; /* グリッドのgapを継承 */
    }

    .grid-job-seek div {
        order: 0; /* デフォルトの順序をリセット */
    }

    .grid-job-seek.reverse div:nth-child(1) {
        order: +1; /* 画像のdivを上に */
    }
}

/*流れ 矢印*/
img.next {
    display: block;
    width: 80px;
    margin: 0 auto !important;
}

/*流れ h5*/
h5.flow{
	border-bottom:dashed 1px #8DB3D7;
}
/*トップのタイトルデザイン*/
h3.jos-head {
  position: relative;
  padding: 0.5em;
  background: var(--color3);
  color: white;
  font-size:26px;
  font-weight:normal;
}

h3.jos-head::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

/*---------------------------*/
/*登録時間､面接などの3カード*/
/*---------------------------*/

.grid-interview {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3つのカードを等分割で横並び */
	gap: 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
}

.grid-interview div {
	/*
	background: #f0f0f0;
	*/
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 画像のサイズを統一 */
.grid-interview div img {
	width: 100%; /* カード幅に合わせる */
	height: 200px; /* 固定高さ */
	object-fit: cover; /* 画像全体を表示し、はみ出た部分を切り取る */
}

/* スマホ表示（768px以下で縦並び） */
@media (max-width: 768px) {
	.grid-interview {
		grid-template-columns: 1fr; /* 縦並び */
	}

	.grid-interview div img {
		height: 150px; /* スマホでは画像の高さを少し小さく（任意） */
	}
}

/*--------------------------------*/
/*-----マージ率-------------------*/
/*--------------------------------*/
/*インデント*/

.if1a {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 4px;
}

h4.mg{
	text-align:center;
	font-size:18px;
}