@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/torikumi03-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;
}
#middle02 {
	height: 345px;
	width: 1000px;
	margin-top: 55px;
	float: left;
}
#middle02-1 {
	float: left;
	height: 90px;
	width: 110px;
	margin-left: 115px;
}
#middle02-2 {
	font-size: 24px;
	line-height: 45px;
	color: #000;
	text-align: left;
	float: left;
	height: 90px;
	width: 650px;
}
#middle02-3 {
	float: left;
	height: 225px;
	width: 790px;
	margin-top: 30px;
	margin-left: 105px;
}
#middle03 {
	height: 380px;
	width: 1000px;
	margin-top: 50px;
	float: left;
}
#middle03-1 {
	float: left;
	height: 90px;
	width: 110px;
	margin-left: 115px;
}
#middle03-2 {
	font-size: 24px;
	line-height: 90px;
	color: #000;
	text-align: left;
	float: left;
	height: 90px;
	width: 650px;
}
#middle03-3 {
	float: left;
	height: 255px;
	width: 680px;
	margin-top: 30px;
	margin-left: 160px;
}
#middle04 {
	height: 380px;
	width: 1000px;
	margin-top: 50px;
	float: left;
}
#middle04-1 {
	float: left;
	height: 90px;
	width: 110px;
	margin-left: 115px;
}
#middle04-2 {
	font-size: 24px;
	line-height: 90px;
	color: #000;
	text-align: left;
	float: left;
	height: 90px;
	width: 650px;
}
#middle04-3 {
	float: left;
	height: 255px;
	width: 680px;
	margin-top: 30px;
	margin-left: 160px;
}
#middle05 {
	height: 410px;
	width: 1000px;
	margin-top: 55px;
	float: left;
}
#middle05-1 {
	float: left;
	height: 90px;
	width: 110px;
	margin-left: 115px;
}
#middle05-2 {
	font-size: 24px;
	line-height: 45px;
	color: #000;
	text-align: left;
	float: left;
	height: 45px;
	width: 650px;
}
#middle05-3 {
	float: left;
	height: 225px;
	width: 790px;
	margin-top: 30px;
	margin-left: 105px;
}
#middle05-4 {
	float: left;
	height: 40px;
	width: 260px;
	margin-top: 10px;
	margin-left: 105px;
	font-size: 15px;
	line-height: 40px;
	color: #000;
	text-align: center;
}
#middle05-5 {
	float: left;
	height: 40px;
	width: 520px;
	margin-top: 10px;
	margin-left: 10px;
	font-size: 15px;
	line-height: 40px;
	color: #000;
	text-align: center;
}
#middle05-6 {
	font-size: 20px;
	line-height: 45px;
	color: #000;
	text-align: left;
	float: left;
	height: 45px;
	width: 650px;
}
#middle06 {
	background-image: url(img/torikumi03-img17.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 925px;
	width: 1000px;
	margin-top: 70px;
}
#middle06-1 {
	height: 380px;
	width: 1000px;
	margin-top: 80px;
	float: left;
}
#middle06-2 {
	font-size: 28px;
	line-height: 60px;
	color: #000;
	text-align: center;
	height: 60px;
	width: 790px;
	margin-left: 105px;
	float: left;
}
#middle06-3 {
	font-size: 18px;
	line-height: 60px;
	color: #000;
	text-align: center;
	height: 60px;
	width: 790px;
	margin-left: 105px;
	float: left;
}
#middle06-4 {
	height: 220px;
	width: 680px;
	margin-top: 20px;
	margin-left: 160px;
	float: left;
}
#middle06-5 {
	height: 380px;
	width: 1000px;
	margin-top: 40px;
	float: left;
}
#middle06-6 {
	font-size: 28px;
	line-height: 60px;
	color: #000;
	text-align: center;
	height: 60px;
	width: 790px;
	margin-left: 105px;
	float: left;
}
#middle06-7 {
	font-size: 18px;
	line-height: 60px;
	color: #000;
	text-align: center;
	height: 60px;
	width: 790px;
	margin-left: 105px;
	float: left;
}
#middle06-8 {
	height: 220px;
	width: 680px;
	margin-top: 20px;
	margin-left: 160px;
	float: left;
}
#middle07 {
	float: left;
	height: 420px;
	width: 370px;
	margin-left: 100px;
	margin-top: 60px;
}

#middle07-1 {
	height: 65px;
	width: 370px;
	float: left;
}
#middle07-2 {
	float: left;
	height: 230px;
	width: 370px;
	margin-top: 20px;
}
#middle07-3 {
	font-size: 16px;
	line-height: 30px;
	color: #000;
	text-align: justify;
	float: left;
	width: 350px;
	margin-top: 30px;
	margin-left: 10px;
}
#middle08 {
	float: left;
	height: 420px;
	width: 370px;
	margin-left: 50px;
	margin-top: 60px;
}

#middle08-1 {
	height: 65px;
	width: 370px;
	float: left;
}
#middle08-2 {
	float: left;
	height: 230px;
	width: 370px;
	margin-top: 20px;
}
#middle08-3 {
	font-size: 16px;
	line-height: 30px;
	color: #000;
	text-align: justify;
	float: left;
	width: 350px;
	margin-top: 30px;
	margin-left: 10px;
}
#middle09-10 {
	float: left;
	height: auto;
	width: 730px;
	margin-top: 50px;
	margin-left: 135px;
}
#middle09 {
	float: left;
	height: 65px;
	width: 345px;
}
#middle10 {
	float: left;
	height: 65px;
	width: 345px;
	margin-left: 40px;
}

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

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

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

    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;
	line-height: 1.5em;
  }

  .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;
  }
  
  
  [id^="middle"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  #middle01,
  #middle02,
  #middle03,
  #middle04,
  #middle05,
  #middle06,
  #middle07,
  #middle08,
  #middle09,
  #middle10 {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
	}

  
  #middle02,
  #middle03,
  #middle04,
  #middle05,
  #middle06,
  #middle07,
  #middle08 {
    height: auto !important;
  }
  
  #middle02,
  #middle03,
  #middle04,
  #middle05 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

  #middle02-2,
  #middle03-2,
  #middle04-2,
  #middle05-2 {
    width: 100%;
    font-size: 18px;
    line-height: 1.6;
  }

#middle01 {
	display: flex;              /* Flexboxを適用 */
	justify-content: center;    /* 横方向に中央揃え */
	align-items: center;        /* 縦方向に中央揃え */
	width: 100%;                /* 幅を100%に設定 */
	height: 45px;               /* 縦幅を固定 */
	background-image: url(img/syaryou-img02.png);
	background-repeat: no-repeat; /* 繰り返さない */
	background-position: center center; /* 中央に配置 */
	background-size: contain; /* 画像を縦幅に合わせる */
	padding: 0;         /* 上部のマージンのみ */
	float: none;
	margin-top: 30px;
	margin-right: 0;
	margin-bottom: 0;
	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,#middle03,#middle04,#middle05 {
  width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  
  #middle02 {
	float: none;
	padding-top: 30px;
  }
  
  #middle03 {
	margin-top: -80px;
  }
  
  #middle04 {
	margin-top: -80px;
  }
  
  #middle05 {
	margin-top: -80px;
  }
  
  #middle02-1,#middle03-1,
  #middle04-1,#middle05-1 {
	display: block;
    width: 100%;
}

  #middle02-1 img,#middle03-1 img,
  #middle04-1 img,#middle05-1 img {
    display: block;
    margin: 0 auto;
  }

  #middle02-2, #middle03-2,
  #middle04-2, #middle05-2 {
	text-align: center !important;
	width: 100%;
	font-size: 18px;
	line-height: 1.8em;
	float: none;
	margin-bottom: -15px;
	}
	
  #middle02-3,#middle03-3,
  #middle04-3,#middle05-3 {
	width: 100%;
	text-align: center;
	float: none;
	margin-top: -20px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
  }
  
  #middle03-3{
	float: none;
	margin-top: -50px;
  }
  
  #middle04-3{
	float: none;
	margin-top: -50px;
  }
  
   #middle05-3{
	float: none;
	margin-top: 15px;
  }
  
  #middle02-3 img,#middle03-3 img,
  #middle04-3 img,#middle05-3 img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
	
  #middle05-6 {
	text-align: center !important;
	width: 67%;
	font-size: 14px;
	line-height: 1.8em;
	float: none;
	margin-bottom: -15px;
  }
  
  #middle05-4 {
	text-align: center;
	margin-top: -100px;  /* 上との間隔を調整 */
	width: 90%;  /* 親要素の幅を100%に */
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	font-size: 13px;
	line-height: 1em;
  }
  
    #middle05-5 {
	text-align: center;
	margin-top: -80px;  /* 上との間隔を調整 */
	width: 90%;  /* 親要素の幅を100%に */
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	font-size: 13px;
	line-height: 1em;
  }
  
    
#middle06 {
	display: flex;  /* 親要素にflexを使う */
	flex-direction: column;  /* 子要素を縦並びに */
	justify-content: center; /* 子要素を縦方向に中央寄せ */
	align-items: center; /* 子要素を横方向に中央寄せ */
	width: 100%;
	background-image: url(img/torikumi03-img17.jpg);
    background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 35px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	min-height: 100px;  /* 必要な高さを設定 */
    height: auto;
    background-size: 125% auto;
}

#middle06-1 {
	width: 90% !important;      /* 左右中央 */
	text-align: center !important;  /* 内部テキストも中央 */
	display: block !important;      /* flexの影響を消す */
	float: none !important;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}

/* middle06-2 の設定 */
#middle06-2 {
  font-size: 18px;
  line-height: 28px;
  text-align: center;   /* テキストを均等に */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  float: none !important;
  margin-top: -20px;
}

/* middle06-3 の設定 */
#middle06-3 {
  font-size: 14px;
  line-height: 22px;
  text-align: justify;   /* テキストを均等に */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  float: none !important;
  margin-top: -35px;
}

  #middle06-4 {
	width: 100%;                   /* 親要素の幅を100%に設定 */
	display: flex;                 /* フレックスボックスで配置 */
	justify-content: center;       /* 横方向に中央揃え */
	align-items: center;                     /* マージンリセット */
	padding: 0;                    /* パディングリセット */
	margin-top: -70px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
  }
  
  #middle06-4 img {
    width: 100%;                   /* 画像の横幅を親要素に合わせる */
    height: auto;                  /* 高さは自動調整 */
    display: block;                /* 画像下の隙間を防ぐため */
  }
  
#middle06-5 {
	width: 90% !important;      /* 左右中央 */
	text-align: center !important;  /* 内部テキストも中央 */
	display: block !important;      /* flexの影響を消す */
	float: none !important;
	margin-top: -180px;
	margin-right: auto;
	margin-left: auto;
}

/* middle06-2 の設定 */
#middle06-6 {
  font-size: 18px;
  line-height: 28px;
  text-align: center;   /* テキストを均等に */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  float: none !important;
  margin-top: -20px;
}

/* middle06-3 の設定 */
#middle06-7 {
  font-size: 14px;
  line-height: 22px;
  text-align: justify;   /* テキストを均等に */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  float: none !important;
  margin-top: -35px;
}

  #middle06-8 {
	width: 100%;                   /* 親要素の幅を100%に設定 */
	display: flex;                 /* フレックスボックスで配置 */
	justify-content: center;       /* 横方向に中央揃え */
	align-items: center;                     /* マージンリセット */
	padding: 0;                    /* パディングリセット */
	margin-top: -70px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
  }
  
  #middle06-8 img {
    width: 100%;                   /* 画像の横幅を親要素に合わせる */
    height: auto;                  /* 高さは自動調整 */
    display: block;                /* 画像下の隙間を防ぐため */
  }

  #middle07,#middle08 {
	width: 80% !important;      /* 左右中央 */
	text-align: center !important;  /* 内部テキストも中央 */
	display: block !important;      /* flexの影響を消す */
	float: none !important;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
  }
  
  #middle07 {
	margin-top: -150px;
	background-color: #FFF;
  }
  
  #middle08 {
	margin-top: 40px;
  }
  
  #middle07-1,#middle08-1 {
	width: 100%;      /* 左右のマージンを自動にして中央寄せ */
	display: block;      /* 画像をブロック要素にして、中央に配置 */
	float: none;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

  #middle07-1 img,#middle08-1 img {
    width: 100%;         /* 画像の幅を親要素の幅に合わせる */
    height: auto;        /* 高さは自動調整 */
    display: block;      /* 画像をブロック要素として扱う */
    margin: 0 auto;      /* 左右のマージンを自動にして中央揃え */
  } 
  
  #middle07-2,#middle08-2 {
	width: 100%;      /* 左右のマージンを自動にして中央寄せ */
	display: block;      /* 画像をブロック要素にして、中央に配置 */
	float: none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

  #middle07-2 img,#middle08-2 img {
    width: 100%;         /* 画像の幅を親要素の幅に合わせる */
    height: auto;        /* 高さは自動調整 */
    display: block;      /* 画像をブロック要素として扱う */
    margin: 0 auto;      /* 左右のマージンを自動にして中央揃え */
  } 
  
  #middle07-3, #middle08-3 {
	font-size: 14px;
	line-height: 22px;
	text-align: justify;   /* テキストを均等に */
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	float: none !important;
	margin-top: -35px;
	}
  
    /* 研修会・社内イベント */
     #middle09-10 {
	display: flex;                /* フレックスボックスを使用 */
	flex-direction: column;       /* 縦並びに変更 */
	justify-content: center;      /* 縦方向の中央寄せ */
	align-items: center;          /* 横方向の中央揃え */
	gap: -50px;                    /* アイテム間の間隔 */
	width: 100%;               /* 左右中央寄せ */
	padding-top: 50px;            /* 上部に余白 */
	float: none;                  /* floatの解除 */
	text-align: center;           /* 内部テキストの中央揃え */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-bottom: 100px;
    }

    #middle09, #middle10 {
	width: 60%;                   /* 画像ボックスの幅を60%に設定 */
	max-width: 100%;               /* 最大幅も60%に設定 */
	box-sizing: border-box;               /* 中央寄せ */
	float: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
    }

    #middle09 img, #middle10 img {
        width: 100%;                  /* 画像の幅を親要素の幅に合わせる */
        height: auto;                 /* 高さは自動調整 */
        display: block;               /* 画像下の隙間を防ぐ */
    }
  	 
.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: -80px;
    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%;
  }
}