@charset "utf-8";
/* CSS Document */

/* =========================
   Web Fonts
========================= */

/* ZEN：本文・全体用 */
@font-face {
  font-family: "ZenKaku";
  src:
    url("fonts/ZenKakuGothicNew-Regular.woff2") format("woff2"),
    url("fonts/ZenKakuGothicNew-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZenKaku";
  src:
    url("fonts/ZenKakuGothicNew-Bold.woff2") format("woff2"),
    url("fonts/ZenKakuGothicNew-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ZenKakuM';
  src: url('fonts/ZenKakuGothicNew-Medium.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DIN Condensed Bold';
  src: url('fonts/din-condensed-bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Cocogoose'; 
    src: url('fonts/Cocogoose-Classic-Medium-trial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


html, body {
  margin: 0;
  padding: 0;
  font-family:
    "ZenKaku",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;
}

  
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


#all {
	height: auto;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
}
body {
   margin: 0;
   padding: 0;
}  
#header {
	height: 240px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding: 1px;
	margin-top: 0px;
}
#header-logo {
	height: 145px;
	width: 470px;
	float: left;
	margin-left: 80px;
}
.header-logotext{
	font-size: 16px;
	color: #000;
	text-align: center;
	margin-top: -30px;
	}
#header-contact {
	height: 145px;
	width: 190px;
	margin-left: 40px;
	float: left;
}
#header-recruit {
	height: 145px;
	width: 190px;
	margin-left: 10px;
	float: left;
}

#header-navi {
	height: 40px;
	width: auto;
	margin-top: 60px;
	text-align: center;
	list-style-type: disc;
}


/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-top: 40px;
	margin-bottom: 10px;
}

.gnavi li a{
	display: block;
	text-decoration: none;
	color: #333;
	text-align: center;
	padding-top: 10px;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom: 10px;
}


.gnavi li{
	margin-bottom:10px;
	margin-top: 40px;
}


/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.gnavi li a{
	/*線の基点とするためrelativeを指定*/
	position: relative;
	text-align: center;
}

.gnavi li.current a,
.gnavi li a:hover{
	color:#008C4B;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#008C4B;
    /*アニメーションの指定*/
    transition: all .5s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


.nav_list{
    text-align: right;
  }
.nav_list li{
    display: inline-block;
    text-align: right;
    padding-left: 20px;
  }
.nav_list li a{
    color: #fff;
    font-weight: 600;
  }


/*パンくずリスト*/
#top-pankuzu {
	height: 65px;
	width: 1000px;
	margin-left: 75px;
	margin-top: 40px;
	font-size: 14px;
	line-height: 30px;
	text-align: left;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.breadcrumb li:not(:last-of-type)::after {
  content: ">";
  margin: 0 .6em; /* 記号の左右の余白 */
  color: #777; /* 記号の色 */
}

.breadcrumb a {
  color: #5ABE00;
  text-decoration: none;
}
/*パンくずリスト*/


/*メインイメージ*/
#main-img {
	height: 440px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
.image-container {
    /* コンテナを基準点とする */
    position: relative;
    /* 画像のサイズに合わせてコンテナのサイズを調整 */
    width: 1000px; /* 例として幅を設定 */
    height: auto; /* 高さは自動調整 */
}

.background-image {
    /* 背景画像は通常の配置 */
    display: block;
    width: 100%;
    height: auto;
	animation: fade-in 10s;
 　 animation-fill-mode: forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.overlay-image {
    /* 上に重ねる画像 */
    position: absolute;
    /* 背景画像と同じ位置に配置 */
    top: 0;
    left: 0;
    width: 100%; /* 親要素 (コンテナ) の幅に合わせる */
    height: auto;
}


#middle01 {
	background-image: url(img/recruit-img02.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 90px;
	width: 1000px;
	margin-left: 0px;
	background-position: center center;
	margin-top: 50px;
}
#middle01-1 {
	font-size: 40px;
	line-height: 90px;
	color: #000;
	text-align: center;
	height: 90px;
	width: 500px;
	margin-left: 250px;
	float: left;
}
#middle02 {
	float: left;
	height: 266px;
	width: 1000px;
	margin-top: 50px;
}
#middle02-1 {
	float: left;
	height: 265px;
	width: 394px;
	margin-left: 105px;
}
#middle02-2 {
	font-size: 16px;
	line-height: 40px;
	color: #000;
	float: left;
	height: 240px;
	width: 360px;
	margin-left: 30px;
}
#middle03 {
	float: left;
	height: auto;
	width: 1000px;
	margin-top: 50px;
}
#middle03-1 {
	float: left;
	height: 55px;
	width: 790px;
	margin-left: 105px;
	margin-top: 80px;
}
#middle03-2 {
	float: left;
	height: 60px;
	width: 400px;
	margin-top: 20px;
	font-size: 28px;
	line-height: 60px;
	color: #000;
	text-align: center;
	margin-left: 300px;
}
#middle03-3 {
	float: left;
	height: 60px;
	width: 160px;
	margin-top: 20px;
	font-size: 16px;
	line-height: 60px;
	color: #000;
	text-align: right;
	margin-left: 35px;
	float: left;
}
#middle03-4 {
	float: left;
	height: auto;
	width: 790px;
	margin-left: 105px;
	margin-top: 20px;
}

/*テーブル*/	
table {
	border-spacing: 0;
	width: 790px;
	float: left;
	}
	
.resp_420 th {
	background-color: #e6ff64;
	border: 1px solid #787878;
	color : #000;
	padding: 20px;
	width: 20%;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	}
	
.resp_420 td {
	border: 1px solid #787878;
	padding: 40px;
	width: 95%;
	text-align: left;
	font-size: 16px;
	line-height: 40px;
	color: #000;
	}
	
.resp_420 th,
.resp_420 td {
    /* 左右の線を消して、下側だけ線を表示する */
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ccc;
    padding: 10px;
  }

#middle03-7 {
	height: 60px;
	width: 790px;
	margin-left: 105px;
	font-size: 24px;
	line-height: 60px;
	color: #000;
	text-align: center;
	float: left;
	margin-top: 20px;
}
#middle03-8 {
	height: 60px;
	width: 790px;
	margin-left: 105px;
	font-size: 28px;
	line-height: 60px;
	color: #8CEB50;
	text-align: center;
	float: left;
}
#middle04 {
	background-image: url(img/recruit-img12.jpg);
	background-repeat: no-repeat;
	height: auto;
	width: 1000px;
	margin-top: 50px;
	float: left;
}

#middle05 {
	float: left;
	height: 275px;
	width: 790px;
	margin-top: 110px;
	margin-left: 105px;
}
#middle05-1 {
	float: left;
	height: 215px;
	width: 110px;
}
#middle05-2 {
	font-size: 18px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 40px;
	width: 440px;
	margin-left: 30px;
	margin-top: 5px;
}
#middle05-3 {
	font-size: 16px;
	line-height: 26px;
	color: #000;
	text-align: justify;
	float: left;
	height: 165px;
	width: 440px;
	margin-left: 30px;
}
#middle05-4 {
	float: left;
	height: 170px;
	width: 190px;
	margin-left: 20px;
	margin-top: 0px;
	padding-top: 0px;
}
#middle06 {
	float: left;
	height: 275px;
	width: 790px;
	margin-left: 105px;
}
#middle06-1 {
	float: left;
	height: 215px;
	width: 110px;
}
#middle06-2 {
	font-size: 18px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 40px;
	width: 440px;
	margin-left: 30px;
	margin-top: 5px;
}
#middle06-3 {
	font-size: 16px;
	line-height: 26px;
	color: #000;
	text-align: justify;
	float: left;
	height: 165px;
	width: 440px;
	margin-left: 30px;
}
#middle06-4 {
	float: left;
	height: 170px;
	width: 190px;
	margin-left: 20px;
	margin-top: 0px;
	padding-top: 0px;
}
#middle07 {
	float: left;
	height: 275px;
	width: 790px;
	margin-left: 105px;
}
#middle07-1 {
	float: left;
	height: 215px;
	width: 110px;
}
#middle07-2 {
	font-size: 18px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 40px;
	width: 440px;
	margin-left: 30px;
	margin-top: 5px;
}
#middle07-3 {
	font-size: 16px;
	line-height: 26px;
	color: #000;
	text-align: justify;
	float: left;
	height: 165px;
	width: 440px;
	margin-left: 30px;
}
#middle07-4 {
	float: left;
	height: 170px;
	width: 190px;
	margin-left: 20px;
	margin-top: 0px;
	padding-top: 0px;
}
#middle08 {
	float: left;
	height: 275px;
	width: 790px;
	margin-left: 105px;
}
#middle08-1 {
	float: left;
	height: 215px;
	width: 110px;
}
#middle08-2 {
	font-size: 18px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 40px;
	width: 440px;
	margin-left: 30px;
	margin-top: 5px;
}
#middle08-3 {
	font-size: 16px;
	line-height: 26px;
	color: #000;
	text-align: justify;
	float: left;
	height: 165px;
	width: 440px;
	margin-left: 30px;
}
#middle08-4 {
	float: left;
	height: 170px;
	width: 190px;
	margin-left: 20px;
	margin-top: 0px;
	padding-top: 0px;
}
#middle09 {
	float: left;
	height: 730px;
	width: 1000px;
	margin-top: 10px;
}
#middle09-1 {
	float: left;
	height: 55px;
	width: 790px;
	margin-left: 105px;
	margin-top: 100px;
}
#middle09-2 {
	float: left;
	height: 550px;
	width: 790px;
	margin-left: 105px;
	background-image: url(img/recruit-img11.jpg);
	background-repeat: no-repeat;
	margin-top: 50px;
}
#middle9-3 {
	font-size: 24px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 40px;
	width: 550px;
	margin-top: 50px;
	margin-left: 200px;
}
#middle9-4 {
	font-size: 24px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 40px;
	width: 550px;
	margin-top: 100px;
	margin-left: 200px;
}
#middle9-5 {
	font-size: 24px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 40px;
	width: 550px;
	margin-top: 130px;
	margin-left: 200px;
}
#middle9-6 {
	font-size: 24px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 40px;
	width: 550px;
	margin-top: 100px;
	margin-left: 200px;
}



.green {
	color: #8CEB50;
}
.green02 {
	color: #5ABE00;
	
}
a {
color:#5ABE00;
}

hr {
	border: none;
	border: solid 0.5px #969696;
}

/*フッター↓*/
#footer-contact {
	height: 240px;
    margin-top: 3700px;

    background-image: url(img/footer-contact.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    position: relative;
    inset-inline: 50%;
    width: 100vw;
    margin-inline: -50vw;
    padding-inline: calc((100vw - 100%) / 2);
}
#footer-c-01 {
	font-size: 48px;
	line-height: 55px;
	color: #505050;
	float: left;
	height: 55px;
	width: 1000px;
	text-align: center;
	margin-top: 10px;
	font-family: 'Cocogoose', sans-serif; /* 2番目はフォールバック */
	font-weight: normal;
	letter-spacing: 2px;  /* 文字間を2px広げる */
	padding-top: 30px;
}
#footer-c-02 {
	font-size: 22px;
	line-height: 55px;
	color: #505050;
	float: left;
	height: 55px;
	width: 1000px;
	text-align: center;
}
#footer-c-0304 {
	float: left;
	height: 55px;
	width: 1000px;
	margin-top: 10px;
}
#footer-c-03 {
	float: left;
	height: 55px;
	width: 340px;
	margin-left: 112px;
}
#footer-c-04 {
	float: left;
	height: 55px;
	width: 385px;
	margin-left: 50px;
}
#footer {
	height: 120px;
	margin-top: 0;
	background-color: #F0F0F0;
	position: relative;
	inset-inline: 50%;
	width: 100vw;
	margin-inline: -50vw;
	padding-inline: calc((100vw - 100%) / 2);
}
#footer-logo {
	float: left;
	height: 35px;
	width: 300px;
	margin-top: 45px;
	margin-left: 45px;
}
#footer-add {
	float: left;
	height: 35px;
	width: 260px;
	margin-top: 45px;
	font-size: 18px;
	line-height: 35px;
	color: #505050;
}
#footer-copylight {
	float: left;
	height: 35px;
	width: 350px;
	margin-top: 45px;
	font-size: 10px;
	line-height: 35px;
	color: #505050;
	text-align: right;
}

@keyframes 
img-wrap {
  100% {
    transform: translateX(100%);
  }
}
 
.green{
	color: #8CEB50;
}



/* =======================================
   スマホ用（ハンバーガーメニュー含む）
======================================= */
@media screen and (max-width: 768px) {
	
	
  /* ========= 共通 ========= */
  * {
    box-sizing: border-box;
  }

 /* 全体の余白をリセット */
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロールバーを非表示に */
  }

  #all {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
  }

  body {
      margin: 0;
      padding: 0;
  }
  

  /* ========= HEADER ========= */

  /* ヘッダー全体を横並び */
#header {
    display: flex;
    flex-wrap: nowrap;
    position: relative; /* 基準にする */
    align-items: flex-start;
    width: 100%;
    margin: 0;
  }

  /* ロゴ */
  #header-logo {
	width: 330%;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 15px;
	margin-top: -15px;
  }

  #header-logo img {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
  }

  .header-logotext {
	font-size: 6px;
	line-height: 2em;
	text-align: left;
	padding-top: 10px;
  }

  /* お問い合わせ・採用 */
  #header-contact,
  #header-recruit {
	width: 100%;
	text-align: center;
	margin-bottom: 0;
	margin-left: 5px;
	margin-top: 0px;
  }

  #header-contact img,
  #header-recruit img {
    max-width: 100%;
    height: auto;
  }

#header-navi {
  margin-left: auto;
  width: 100%;
  display: flex;
  align-items: center;
}


  /* ========= ハンバーガー ========= */
  #hamburger {
    position: fixed;
    top: 10px;
    right: 15px;
    width: 28px;
    height: 24px;
    z-index: 1000;
  }
  #hamburger span {
	display: block;
	width: 100%;
	height: 3px;
	background: #000;
	transition: 0.3s;
    margin: 5px 0;
  }

  /* × に変形 */
  #hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  #hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  #hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

/* ハンバーガー開いたときのメニュー */
  .gnavi {
  display: none;            /* 初期は非表示 */
  position: fixed;
  top: 70px;
  left: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
  background: #fff;
  z-index: 999;
  flex-direction: column;   /* 縦並び */
  flex-wrap: nowrap;        /* 横並び禁止 */
}
  .gnavi.show {
    display: flex;          /* ハンバーガー開いたら表示 */
  }

  .gnavi li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gnavi li a {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    text-align: center;
	position: relative;
    z-index: 1;
  }

    /* パンくずリスト */
  #top-pankuzu {
    position: absolute;
    top: 70px;
    left: 7%;
    width: auto;
    max-width: 100%;
    margin: 0;
    text-align: left;
    font-size: 12px;
  }

  .breadcrumb {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-left: 0;
    margin: 0;
  }

  .breadcrumb li {
    list-style: none;
  }

    /* メインイメージ */
  #main-img {
	width: 100%;       /* 画面幅いっぱい */
	max-width: 100%;   /* 最大幅も画面幅に */
	height: auto;      /* 高さは自動調整 */
	margin-top: -125px;
   }
   
  #main-img img {
    width: 100%;
	height: auto;
	display: block; /* ブラウザによっては画像下に隙間ができるのを防ぐ */
	margin: 0;
    padding: 0;
    }
	
	.image-container {
    /* コンテナを基準点とする */
    position: relative;
    /* 画像のサイズに合わせてコンテナのサイズを調整 */
    width: 100%; /* 例として幅を設定 */
    height: auto; /* 高さは自動調整 */
}

.background-image {
    /* 背景画像は通常の配置 */
    display: block;
    width: 100%;
    height: auto;
	animation: fade-in 10s;
 　 animation-fill-mode: forwards;
}

.overlay-image {
    /* 上に重ねる画像 */
    position: absolute;
    /* 背景画像と同じ位置に配置 */
    top: 0;
    left: 0;
    width: 100%; /* 親要素 (コンテナ) の幅に合わせる */
    height: auto;
}

  /* ===== middle ===== */
  
  /* 位置ズレの原因だけ止める */
  .scroll-up {
    transform: none !important;
  }

  /* フェードのみ残す */
  .scroll-up {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .scroll-up.is-show {
    opacity: 1;
  }
  /* ===== middle ===== */
  
  #middle01 {
	display: flex;              /* Flexboxを適用 */
	justify-content: center;    /* 横方向に中央揃え */
	align-items: center;        /* 縦方向に中央揃え */
	width: 70%;                /* 幅を100%に設定 */
	height: 45px;               /* 縦幅を固定 */
	background-image: url(img/recruit-img02.jpg);
	background-repeat: no-repeat; /* 繰り返さない */
	background-position: center center; /* 中央に配置 */
	background-size: contain; /* 画像を縦幅に合わせる */
	padding: 0;         /* 上部のマージンのみ */
	float: none;
	margin-top: 15px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
  }

  /* #middle01-1 のテキスト設定 */
  #middle01-1 {
	font-size: 22px;
	line-height: 4;            /* 行間の調整 */
	text-align: center;         /* テキストを中央に配置 */
	font-family: 'ZenKakuM', sans-serif;
	color: #000;                /* 文字色（必要に応じて） */
	margin: 0;                  /* 余計なパディングを削除 */
	padding: 0;
  }

  /* 高さ固定を解除 */
  #middle02-2,
  #middle03-1 {
    height: auto !important;
  }

  /* 縦方向の余白を明示的に作る */
  #middle02-2 {
	margin-bottom: 40px;
	font-size: 15px;
	line-height: 1.6em;
	padding-top: 25px;
  }
  
[id^="middle"] {
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#middle02 {
	display: flex;
	flex-direction: column;  /* 縦並びに設定 */
	align-items: center;     /* 中央揃え */
	width: 100%;             /* 幅を100%に */
	float: none;
	gap: 10px;
  }

#middle02-1 {
	width: 70%;              /* 幅を70%に設定 */
	text-align: center;      /* 文字の中央寄せ */
	margin: 0;               /* 上下左右のマージンをリセット */
	float: none;
}

#middle02-1 img {
  width: 100%;             /* 画像の幅を100%に設定 */
  margin: 10px auto;       /* 上下マージンと中央寄せ */
}

#middle02-2 {
	width: 70%;              /* 幅を70%に設定 */
	text-align: justify;      /* 文字の中央寄せ */
	font-size: 15px;
	margin: 0;               /* 上下左右のマージンをリセット */
	float: none;
}
  /* ========= middle03（募集要項） ========= */
  #middle03-2,
  #middle03-3,
  #middle03-7,
  #middle03-8 {
    width: 100%;
    margin: 10px 0;
    text-align: center;
  }
  
#middle03-1 {
	width: 90%;                  /* 幅を90%に設定 */
	display: block;              /* 自動マージンで中央寄せ */
	float: none;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	margin-top: 70px;
  }

  #middle03-1 img {
	width: 100%;  /* 画像の幅を親要素の幅に合わせる */
	height: auto;  /* 高さは自動調整 */
	float: none;
  }
  
  #middle03-2 {
	font-size: 22px;
	float: none;
	margin-top: 25px;
	line-height: 1em;
  }

  #middle03-3 {
	font-size: 14px;
	text-align: center;
	line-height: 1em;
	float: none;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
  }

  /* 募集要項ボックス */
#middle03-4 {
	display: flex !important;
	justify-content: center !important;  /* 横方向の中央寄せ */
	align-items: center !important;      /* 縦方向の中央寄せ */
	width: 100%;                         /* 親要素の幅を100% */
	height: 100%;                        /* 親要素の高さも100%に */
	box-sizing: border-box;
	text-align: center;                      /* 左右中央寄せ */
	padding: 0;                          /* パディングをリセット */
	float: none;                         /* float解除 */
	position: relative;                  /* 相対位置で表示 */
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#middle03-4 table {
    width: 80%;                /* テーブルの幅を80%に設定 */
    margin: 0 auto;            /* テーブルを中央寄せ */
    box-sizing: border-box;
    text-align: center;
}

/*テーブル*/
.resp_420 {
    width: 90%;           /* 画面幅の80%に設定 */
    margin: 0 auto;       /* 左右の中央寄せ */
}

.resp_420 th,
.resp_420 td {
    display: block;       /* <th><td>をブロック要素に */
    width: 100%;          /* 幅を100%に */
    text-align: center;
    margin: 0;            /* 左右のマージンをリセット */
    font-size: 15px;      /* フォントサイズ調整 */
}

  #middle03-7 {
	font-size: 15px;
	text-align: center;
	line-height: 1.6em;
	float: none;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	width: 76%;
  }
  
    #middle03-8 {
	font-size: 20px;
	text-align: center;
	line-height: 1em;
	float: none;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
  }

  /* ========= middle04（社員の声 全体） ========= */
#middle04 {
	display: flex;  /* 親要素にflexを使う */
	flex-direction: column;  /* 子要素を縦並びに */
	justify-content: center; /* 子要素を縦方向に中央寄せ */
	align-items: center; /* 子要素を横方向に中央寄せ */
	width: 100%;
	background-image: url(img/recruit-img12.jpg);
	background-size: contain;  /* 背景画像が拡大されず、要素内に収まる */
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 35px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	min-height: 1850px;  /* 必要な高さを設定 */
	height: 100vh;  /* ビューポートの高さに合わせる（縦幅を伸ばす） */
	background-color: #f0f0f0;
	background-size: 125% auto;
}

#middle05 {
	width: 100%;
	max-width: 110%;
	display: block;  /* スマホでは縦並びに */
	text-align: center; /* 余白を加えて、内容が画面幅に収まるように */
	font-size: 0; /* inline-block 要素間の隙間をなくすために追加 */
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

#middle05-1 {
  display: inline-block;
  width: 25%; /* 横幅をやや縮小 */
  text-align: center; /* 中央揃え */
  margin-right: 0; /* 隙間を詰めるために右マージンを0に */
}

#middle05-1 img {
  width: 100%; /* 画像の幅を100%に設定 */
  height: auto; /* 高さを自動調整 */
  max-width: 100px; /* 最大幅を指定 */
}

/* middle05-2 と middle05-3 を横並び */
#middle05-2,
#middle05-3 {
	display: inline-block; /* 横並び */
	width: 65%; /* 幅を45%に */
	text-align: left; /* 左揃え */
	vertical-align: top; /* 上揃え */
	margin-left: -70px;
	float: none;
}

#middle05-2 {
  font-size: 20px; /* フォントサイズの調整 */
  line-height: 1.5; /* 行間を広げて読みやすく */
}

#middle05-3 {
  font-size: 15px; /* フォントサイズを少し小さく */
  line-height: 1.6; /* 行間を広げて読みやすく */
  margin-top: 5px; /* 上に余白を追加 */
}

/* middle05-4 の画像 */
#middle05-4 {
  display: block; /* ブロック要素として表示 */
  width: 100%; /* 横幅を100%にする */
  max-width: 150px; /* 最大幅を150pxに設定 */
  height: auto; /* 高さは自動で調整 */
  float: none;
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

#middle05-4 img {
  width: 100%;  /* 画像の幅を親要素の幅に合わせる */
  height: auto;  /* 高さは自動調整 */
  float: none;
}

#middle06 {
	width: 100%;
	max-width: 110%;
	display: block;  /* スマホでは縦並びに */
	text-align: center; /* 余白を加えて、内容が画面幅に収まるように */
	font-size: 0; /* inline-block 要素間の隙間をなくすために追加 */
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}

#middle06-1 {
  display: inline-block;
  width: 25%; /* 横幅をやや縮小 */
  text-align: center; /* 中央揃え */
  margin-right: 0; /* 隙間を詰めるために右マージンを0に */
}

#middle06-1 img {
  width: 100%; /* 画像の幅を100%に設定 */
  height: auto; /* 高さを自動調整 */
  max-width: 100px; /* 最大幅を指定 */
}

/* middle05-2 と middle05-3 を横並び */
#middle06-2,
#middle06-3 {
	display: inline-block; /* 横並び */
	width: 65%; /* 幅を45%に */
	text-align: left; /* 左揃え */
	vertical-align: top; /* 上揃え */
	margin-left: -70px;
	float: none;
}

#middle06-2 {
  font-size: 20px; /* フォントサイズの調整 */
  line-height: 1.5; /* 行間を広げて読みやすく */
}

#middle06-3 {
  font-size: 15px; /* フォントサイズを少し小さく */
  line-height: 1.6; /* 行間を広げて読みやすく */
  margin-top: 5px; /* 上に余白を追加 */
}

/* middle05-4 の画像 */
#middle06-4 {
  display: block; /* ブロック要素として表示 */
  width: 100%; /* 横幅を100%にする */
  max-width: 150px; /* 最大幅を150pxに設定 */
  height: auto; /* 高さは自動で調整 */
  float: none;
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

#middle06-4 img {
  width: 100%;  /* 画像の幅を親要素の幅に合わせる */
  height: auto;  /* 高さは自動調整 */
  float: none;
}

#middle07 {
	width: 100%;
	max-width: 110%;
	display: block;  /* スマホでは縦並びに */
	text-align: center; /* 余白を加えて、内容が画面幅に収まるように */
	font-size: 0; /* inline-block 要素間の隙間をなくすために追加 */
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}

#middle07-1 {
  display: inline-block;
  width: 25%; /* 横幅をやや縮小 */
  text-align: center; /* 中央揃え */
  margin-right: 0; /* 隙間を詰めるために右マージンを0に */
}

#middle07-1 img {
  width: 100%; /* 画像の幅を100%に設定 */
  height: auto; /* 高さを自動調整 */
  max-width: 100px; /* 最大幅を指定 */
}

/* middle05-2 と middle05-3 を横並び */
#middle07-2,
#middle07-3 {
	display: inline-block; /* 横並び */
	width: 65%; /* 幅を45%に */
	text-align: left; /* 左揃え */
	vertical-align: top; /* 上揃え */
	margin-left: -70px;
	float: none;
}

#middle07-2 {
  font-size: 20px; /* フォントサイズの調整 */
  line-height: 1.5; /* 行間を広げて読みやすく */
}

#middle07-3 {
  font-size: 15px; /* フォントサイズを少し小さく */
  line-height: 1.6; /* 行間を広げて読みやすく */
  margin-top: 5px; /* 上に余白を追加 */
}

/* middle05-4 の画像 */
#middle07-4 {
  display: block; /* ブロック要素として表示 */
  width: 100%; /* 横幅を100%にする */
  max-width: 150px; /* 最大幅を150pxに設定 */
  height: auto; /* 高さは自動で調整 */
  float: none;
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

#middle07-4 img {
  width: 100%;  /* 画像の幅を親要素の幅に合わせる */
  height: auto;  /* 高さは自動調整 */
  float: none;
}

#middle08 {
	width: 100%;
	max-width: 110%;
	display: block;  /* スマホでは縦並びに */
	text-align: center; /* 余白を加えて、内容が画面幅に収まるように */
	font-size: 0; /* inline-block 要素間の隙間をなくすために追加 */
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}

#middle08-1 {
  display: inline-block;
  width: 25%; /* 横幅をやや縮小 */
  text-align: center; /* 中央揃え */
  margin-right: 0; /* 隙間を詰めるために右マージンを0に */
}

#middle08-1 img {
  width: 100%; /* 画像の幅を100%に設定 */
  height: auto; /* 高さを自動調整 */
  max-width: 100px; /* 最大幅を指定 */
}

/* middle05-2 と middle05-3 を横並び */
#middle08-2,
#middle08-3 {
	display: inline-block; /* 横並び */
	width: 65%; /* 幅を45%に */
	text-align: left; /* 左揃え */
	vertical-align: top; /* 上揃え */
	margin-left: -70px;
	float: none;
}

#middle08-2 {
  font-size: 20px; /* フォントサイズの調整 */
  line-height: 1.5; /* 行間を広げて読みやすく */
}

#middle08-3 {
  font-size: 15px; /* フォントサイズを少し小さく */
  line-height: 1.6; /* 行間を広げて読みやすく */
  margin-top: 5px; /* 上に余白を追加 */
}

/* middle05-4 の画像 */
#middle08-4 {
  display: block; /* ブロック要素として表示 */
  width: 100%; /* 横幅を100%にする */
  max-width: 150px; /* 最大幅を150pxに設定 */
  height: auto; /* 高さは自動で調整 */
  float: none;
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

#middle08-4 img {
  width: 100%;  /* 画像の幅を親要素の幅に合わせる */
  height: auto;  /* 高さは自動調整 */
  float: none;
}


/* ========= middle09（Q&A） ========= */

middle09,
  .scroll-up {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;   /* ← はみ出し強制カット */
    transform: none;
  }
  
#middle09-1 {
	width: 90%;                  /* 幅を90%に設定 */
	display: block;              /* 自動マージンで中央寄せ */
	float: none;
	margin-right: auto;
	margin-bottom: -55px;
	margin-left: auto;
	margin-top: 0px;
	padding-top: 40px;
  }

  #middle09-1 img {
	width: 100%;  /* 画像の幅を親要素の幅に合わせる */
	height: auto;  /* 高さは自動調整 */
	float: none;
  }

#middle09-2 {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background-image: url(img/recruit-img11.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	float: none;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 65px;
  }

#middle9-3, #middle9-4, #middle9-5, #middle9-6 {
	width: 100%;  /* 幅100% */
	line-height: 1.4em;  /* 各要素の間隔 */
	text-align: left;  /* 右寄せ */
	font-size: 16px;  /* 初期フォントサイズ */
	float: none;
	padding-top: 25px;
	padding-left: 30px;
}

#middle9-3 {
	font-size: 14px !important;  /* 強制的に文字サイズを20pxに */
	margin-top: 80px !important; /* 余白調整 */
}

#middle9-4 {
  font-size: 14px !important;  /* 強制的に文字サイズを18pxに */
  margin-top: 25px !important; /* 余白調整 */
}

#middle9-5 {
  font-size: 14px !important;  /* 強制的に文字サイズを16pxに */
  margin-top: 40px !important; /* 余白調整 */
}

#middle9-6 {
  font-size: 14px !important;  /* 強制的に文字サイズを18pxに */
  margin-top: 25px !important; /* 余白調整 */
}

/* 文字位置の右寄せ調整 */
#middle09-3, #middle09-4, #middle09-5, #middle09-6 {
  text-align: right !important; /* 強制的に右寄せ */
}

.hr-container {
  display: flex;
  justify-content: center;  /* 中央揃え */
  align-items: center;      /* 垂直方向の中央揃え */
  width: 100%;              /* 親要素を100%の幅に設定 */
  margin: 0;                /* 上下マージンを0に */
  padding: 0;               /* 内部のパディングを0に */
}

.hr-container hr {
  width: 80%;               /* 線の幅を80%に設定 */
  max-width: 100%;          /* 最大幅を親要素に合わせる */
  border: none;             /* デフォルトのボーダーを無効化 */
  border-top: 2px solid #969696;  /* 線を上部に引く */
  margin: 0;                /* 上下の余白をリセット */
  padding: 0;               /* 内部の余白をリセット */
}
  
  
  /* ========= footer-contact ========= */
  #footer-contact {
    height: auto;
    padding: 40px 0;
    margin-top: 420px;
    background-size: cover;
    background-position: center;
	display: flex;
    flex-direction: column; /* 上下に並べる */
    align-items: center;    /* 中央寄せ */
    text-align: center;
    padding: 10px 10px;
    overflow-x: hidden;
  }

  #footer-c-01,
  #footer-c-02,
  #footer-c-03,
  #footer-c-04 {
    float: none;
    width: 100%;
    text-align: center;
  }
  
  #footer-c-01{
	font-size: 32px;
	font-family: 'Cocogoose', sans-serif; /* 2番目はフォールバック */
	font-weight: normal;
	letter-spacing: 2px;  /* 文字間を2px広げる */
	padding-top: 30px;
  }
  #footer-c-02{
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
  }

  #footer-c-03,
  #footer-c-04 {
	display: flex;
    width: auto;            /* 必要に応じて調整 */
    margin: 0;              /* 余白リセット */
  }

  #footer-c-03 img,
  #footer-c-04 img {
    max-width: 150px;       /* 横幅を揃える */
    height: auto;
  }
  
/* 上2つは縦並び */
  #footer-c-01,
  #footer-c-02 {
    width: 100%;
    margin: 0;
  }

  /* 下2つを横並びにするためのwrapper化（CSSだけで） */
  #footer-c-03,
  #footer-c-04 {
    display: inline-flex;        /* 横並びに */
    justify-content: center;
    gap: 20px;                   /* 子要素間の間隔 */
    margin: 0;
  }

  /* 下2つの画像 */
  #footer-c-03 img,
  #footer-c-04 img {
    max-width: 220px;  /* はみ出さないサイズ */
    width: 45vw;       /* ビューポート幅の45%で並べる */
    height: auto;
  }
  
  /* ========= footer ========= */
  #footer {
    height: auto;
    padding: 20px 0;
    text-align: center;
  }

  #footer-logo,
  #footer-add,
  #footer-copylight {
    float: none;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  
  #footer-add {
	font-size: 16px;
  }
  
  #middle02 {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  /* 左寄りの原因を完全に切る */
  #middle02-1,
  #middle02-2,
  #middle02-3 {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* 画像ブロックを中央に */
  #middle02-1 {
    display: block;
    width: 100%;
  }

  #middle02-1 img {
    display: block;
    margin: 0 auto;
  }

  /* テキストを中央寄せ */
  #middle02-2 {
    text-align: center !important;
    width: 100%;
  }
}