@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;
}



/*テーブル2*/
    table.keireki {
	border-spacing: 0;
	width: 790px;
	float: left;
	}
	.resp_keireki th {
	border: 1px solid #787878;
	color : #000;
	padding: 10px;
	width: 45%;
	font-size: 18px;
	line-height: 50px;
	text-align: left;
	}
	
	.resp_keireki td {
	border: 1px solid #787878;
	padding: 30px;
	width: 45%;
	text-align: left;
	font-size: 18px;
	line-height: 50px;
	color: #000;
	}
	
	.resp_keireki th,
	.resp_keireki td {
    /* 左右の線を消して、下側だけ線を表示する */
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ccc; /* 任意の色・太さ */
    padding: 10px;
  }
/*テーブル2*/


#middle01 {
	background-image: url(img/jigyou-img02.png);
	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 {
	float: left;
	height: 266px;
	width: 1000px;
	margin-top: 50px;
}
#middle02-1 {
	float: left;
	height: 266px;
	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: 300px;
	width: 1000px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#middle03-1 {
	float: left;
	height: 55px;
	width: 790px;
	margin-left: 105px;
	margin-top: 50px;
}
#middle03-2 {
	height: 250px;
	width: 790px;
	margin-left: 105px;
	float: left;
	text-align: center;
}
#middle03-3 {
	float: left;
	height: 200px;
	width: 280px;
	font-size: 20px;
	line-height: 50px;
	color: #000;
	text-align: left;
	margin-left: 125px;
}
#middle03-4 {
	float: left;
	height: 200px;
	width: 460px;
	font-size: 20px;
	line-height: 50px;
	color: #000;
	text-align: left;
	margin-left: 20px;
}
#middle03-5 {
	float: left;
	height: 370px;
	width: 340px;
	margin-top: 70px;
	margin-left: 180px;
}
#middle03-6 {
	float: left;
	height: 150px;
	width: 380px;
	font-size: 16px;
	line-height: 40px;
	color: #000;
	text-align: left;
	margin-left: 20px;
	margin-top: 140px;
}
#middle04 {
	background-image: url(img/jigyou-img02.png);
	background-repeat: no-repeat;
	float: left;
	height: 90px;
	width: 1000px;
	margin-left: 0px;
	background-position: center center;
	margin-top: 50px;
}

#middle04-1 {
	font-size: 40px;
	line-height: 90px;
	color: #000;
	text-align: center;
	height: 90px;
	width: 500px;
	margin-left: 250px;
}

#middle04-2 {
	font-size: 20px;
	line-height: 40px;
	color: #000;
	text-align: center;
	float: left;
	height: 80px;
	width: 1000px;
	margin-top: 50px;
}
#middle04-3 {
	float: left;
	height: 55px;
	width: 790px;
	margin-left: 105px;
	margin-top: 30px;
}
#middle04-4 {
	float: left;
	height: 266px;
	width: 394px;
	margin-top: 30px;
	margin-left: 105px;
}
#middle04-5 {
	font-size: 16px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 200px;
	width: 360px;
	margin-top: 30px;
	margin-left: 30px;
}
#middle05 {
	background-image: url(img/jigyou-img08.png);
	background-repeat: no-repeat;
	float: left;
	height: 90px;
	width: 1000px;
	margin-left: 0px;
	background-position: center bottom;
	margin-top: 50px;
}

#middle05-1 {
	font-size: 40px;
	line-height: 90px;
	color: #000;
	text-align: center;
	height: 90px;
	width: 500px;
	margin-left: 250px;
	float: left;
}
#middle05-2 {
	font-size: 20px;
	line-height: 40px;
	color: #000;
	text-align: center;
	float: left;
	height: 40px;
	width: 1000px;
	margin-top: 50px;
}
#middle05-3 {
	float: left;
	height: 266px;
	width: 394px;
	margin-top: 30px;
	margin-left: 105px;
}
#middle05-4 {
	font-size: 16px;
	line-height: 40px;
	color: #000;
	text-align: left;
	float: left;
	height: 200px;
	width: 360px;
	margin-top: 30px;
	margin-left: 30px;
}

#line790w {
	text-align: center;
	float: left;
	height: 20px;
	width: 790px;
	margin-top: 10px;
	margin-left: 105px;
}



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

hr {
	border: none;
	border: solid 0.5px #969696;
	float: left;
	width: 790px;
	margin-top: 50px;
	margin-left: 105px;
}


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

    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%);
  }
}
 




/* =======================================
   スマホ用（ハンバーガーメニュー含む）
======================================= */
@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 ===== */
  #middle01 {
	display: flex;              /* Flexboxを適用 */
	justify-content: center;    /* 横方向に中央揃え */
	align-items: center;        /* 縦方向に中央揃え */
	width: 100%;                /* 幅を100%に設定 */
	height: 45px;               /* 縦幅を固定 */
	background-image: url(img/jigyou-img02.png);
	background-repeat: no-repeat; /* 繰り返さない */
	background-position: center center; /* 中央に配置 */
	background-size: contain; /* 画像を縦幅に合わせる */
	padding: 0;         /* 上部のマージンのみ */
	float: none;
	margin-top: 15px;
	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-2,
  #middle03-1 {
    height: auto !important;
  }

  /* 縦方向の余白を明示的に作る */
  #middle02-2 {
    margin-bottom: 40px;
  }
  
[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%に */
	margin-top: -20px;
	float: none;
	gap: -80px;
  }

#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: center;      /* 文字の中央寄せ */
	font-size: 15px;
	margin: 0;               /* 上下左右のマージンをリセット */
	float: none;
}
  
#middle03-1 {
	width: 90%;                  /* 幅を90%に設定 */
	display: block;              /* 自動マージンで中央寄せ */
	float: none;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	margin-top: 30px;
  }

  #middle03-1 img {
	width: 100%;  /* 画像の幅を親要素の幅に合わせる */
	height: auto;  /* 高さは自動調整 */
	float: none;
  }
  
#middle03-2 {
	width: 100%;
	max-width: 100%;
	float: none !important;    /* 念のため中央寄せ */
	margin-right: auto;
	margin-left: auto;
	height:auto;
	overflow:hidden;
}
#middle03-5 {
	float: none !important;
	width: 70%;
	max-width: 320px;    /* ← 中央寄せ */
	text-align: center;
	margin-top: 150px;
	margin-right: auto;
	margin-left: auto;
}

#middle03-5 img {
	width: 100%;
    display: block;      /* 画像下の余白防止 */
    margin: 0 auto;
  }
  
#middle03-6 {
	font-size: 15px;
	text-align: center;
	float: none;
	padding-bottom: 30px;
  }
  
  #middle04 {
	display: flex;              /* Flexboxを適用 */
	justify-content: center;    /* 横方向に中央揃え */
	align-items: center;        /* 縦方向に中央揃え */
	width: 100%;                /* 幅を100%に設定 */
	height: 45px;               /* 縦幅を固定 */
	background-image: url(img/jigyou-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 のテキスト設定 */
#middle04-1 {
    font-size: 22px;                /* フォントサイズそのまま */
    line-height: 4;                 /* 行間の調整 */
    text-align: center;             /* 水平方向に中央揃え */
    font-family: 'ZenKakuM', sans-serif; /* フォントファミリー */
    color: #000;                    /* 文字色 */
    margin: 0;                       /* マージンなし */
    padding: 0;                      /* パディングなし */
    display: flex;                   /* Flexboxを適用 */
    justify-content: center;         /* 水平方向に中央揃え */
    align-items: center;             /* 垂直方向に中央揃え */
    width: 100%;                     /* 幅を100%に */
    height: 100%;                    /* 親要素の高さに合わせる */
  }
  
#middle04-2 {
	width: 100% !important; /* 幅を80%に設定、重要指定 */
	max-width: 100% !important; /* 左右のマージンを自動にして中央寄せ */
	padding-bottom: 30px; /* 下のパディング調整 */
	font-size: 15px; /* フォントサイズ調整 */
	line-height: 40px; /* 行間調整 */
	box-sizing: border-box; /* パディングも幅に含める */
	float: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
  }
  
#middle04-3 {
	width: 90%;                  /* 幅を90%に設定 */
	display: block;              /* 自動マージンで中央寄せ */
	padding-top: 0px;
	float: none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
  }

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

 #middle04-4 {
	width: 80%;      /* 左右のマージンを自動にして中央寄せ */
	display: block;      /* 画像をブロック要素にして、中央に配置 */
	float: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
  }

  #middle04-4 img {
    width: 100%;         /* 画像の幅を親要素の幅に合わせる */
    height: auto;        /* 高さは自動調整 */
    display: block;      /* 画像をブロック要素として扱う */
    margin: 0 auto;      /* 左右のマージンを自動にして中央揃え */
  }
  
  #middle04-5 {
	font-size: 15px;
	line-height: 40px;
	color: #000;
	padding-bottom: 50px;
  }

  #middle05 {
	display: flex;              /* Flexboxを適用 */
	justify-content: center;    /* 横方向に中央揃え */
	align-items: center;        /* 縦方向に中央揃え */
	width: 100%;                /* 幅を100%に設定 */
	height: 45px;               /* 縦幅を固定 */
	background-image: url(img/jigyou-img08.png);
	background-repeat: no-repeat; /* 繰り返さない */
	background-position: center center; /* 中央に配置 */
	background-size: contain;         /* 上部のマージンのみ */
	float: none;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
  }

  /* #middle01-1 のテキスト設定 */
#middle05-1 {
    font-size: 22px;                /* フォントサイズそのまま */
    line-height: 4;                 /* 行間の調整 */
    text-align: center;             /* 水平方向に中央揃え */
    font-family: 'ZenKakuM', sans-serif; /* フォントファミリー */
    color: #000;                    /* 文字色 */
    margin: 0;                       /* マージンなし */
    padding: 0;                      /* パディングなし */
    display: flex;                   /* Flexboxを適用 */
    justify-content: center;         /* 水平方向に中央揃え */
    align-items: center;             /* 垂直方向に中央揃え */
    width: 100%;                     /* 幅を100%に */
    height: 100%;                    /* 親要素の高さに合わせる */
  }
  
#middle05-2,
#middle05-4 {
	width: 80% !important; /* 幅を80%に設定、重要指定 */
	max-width: 80% !important; /* 左右のマージンを自動にして中央寄せ */
	padding-bottom: 30px; /* 下のパディング調整 */
	font-size: 15px; /* フォントサイズ調整 */
	line-height: 40px; /* 行間調整 */
	box-sizing: border-box; /* パディングも幅に含める */
	float: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
  }
  
 #middle05-3 {
	width: 80%;      /* 左右のマージンを自動にして中央寄せ */
	display: block;      /* 画像をブロック要素にして、中央に配置 */
	float: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
  }

  #middle05-3 img {
    width: 100%;         /* 画像の幅を親要素の幅に合わせる */
    height: auto;        /* 高さは自動調整 */
    display: block;      /* 画像をブロック要素として扱う */
    margin: 0 auto;      /* 左右のマージンを自動にして中央揃え */
  }

  /* 各セクションを縦並び */
  #middle02,
  #middle04,
  #middle05 {
    display: flex;
    flex-direction: column;
    align-items: center; /* ← 中央寄せ */
    padding: 0 15px;
  }

  /* テキスト */
  #middle02-2,
  #middle03-6,
  #middle04-2,
  #middle04-5,
  #middle05-2,
  #middle05-4 {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.8;
  }

  /* 画像 */
  #middle02-1,
  #middle03-5,
  #middle04-4,
  #middle05-3 {
	width: 100%;
	max-width: 350px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
  }


/*テーブル2*/
.resp_keireki {
	width: 80%;
	max-width: 100%;
	border-collapse: collapse; /* 重要：ボーダーを一重にする */
	text-align: center;
	float: none;
}

/* 行に下線を引く */
.resp_keireki tr {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 1px solid #ccc; /* 下線は行にのみ */
	margin-right: auto;
	margin-left: auto;
}

/* セル自体には下線を付けない */
.resp_keireki th,
.resp_keireki td {
    width: auto;
    text-align: center;
    padding: 5px 10px;
    border-bottom: none; /* セルに下線がある場合は無効化 */
}
.resp_keireki th {
	border-bottom: 1px solid #fff; /* 任意の色・太さ */
}
.resp_keireki {
    margin: 0 auto;
}
/* 行間を詰める */
.resp_keireki tr {
    margin-bottom: 6px;   /* 行同士の間隔 */
}

/* セル内の余白を詰める */
  .resp_keireki th,
  .resp_keireki td {
    padding: 4px 8px;
    line-height: 2.4;     /* ← 超重要 */
    font-size: 16px;
  }
/*テーブル2*/


hr {
    display: none;
  }
  
  
  /* ========= footer-contact ========= */
  #footer-contact {
    height: auto;
    padding: 40px 0;
    margin-top: 40px;
    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;
  }
}