@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-repeat: no-repeat;
	float: left;
	height: 90px;
	width: 1000px;
	margin-left: 0px;
	background-position: center center;
	margin-top: 50px;
	background-image: url(img/topics03-img02.jpg);
}
#middle01-1 {
	font-size: 40px;
	line-height: 90px;
	color: #000;
	text-align: center;
	height: 90px;
	width: 500px;
	margin-left: 250px;
}
#middle02 {
	height: auto;
	width: 1000px;
	float: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
#middle02-1 {
	float: left;
	height: 55px;
	width: 170px;
	margin-left: 105px;
	font-size: 40px;
	line-height: 60px;
	text-align: left;
	margin-top: 5px;
}
#middle02-2 {
	font-size: 22px;
	line-height: 60px;
	color: #000;
	text-align: left;
	float: left;
	height: 60px;
	width: 620px;
}
#middle02-3 {
	float: left;
	height: auto;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
#middle02-4 {
	float: left;
	height: 65px;
	width: 670px;
	margin-top: 20px;
	margin-left: 165px;
	background-color: #E6FF64;
	font-size: 24px;
	line-height: 65px;
	color: #000;
	text-align: center;
}
#middle02-5 {
	float: left;
	height: 255px;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	margin-bottom: 40px;
}
#middle03 {
	height: auto;
	width: 1000px;
	float: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
#middle03-1 {
	float: left;
	height: 55px;
	width: 170px;
	margin-left: 105px;
	font-size: 40px;
	line-height: 60px;
	text-align: left;
	margin-top: 5px;
}
#middle03-2 {
	font-size: 22px;
	line-height: 60px;
	color: #000;
	text-align: left;
	float: left;
	height: 60px;
	width: 620px;
}
#middle03-3 {
	float: left;
	height: auto;
	width: 440px;
	margin-top: 20px;
	margin-left: 105px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
#middle03-4 {
	float: left;
	height: 255px;
	width: 326px;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 40px;
}
#middle04 {
	height: auto;
	width: 1000px;
	float: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
#middle04-1 {
	float: left;
	height: 55px;
	width: 170px;
	margin-left: 105px;
	font-size: 40px;
	line-height: 60px;
	text-align: left;
	margin-top: 5px;
}
#middle04-2 {
	font-size: 22px;
	line-height: 60px;
	color: #000;
	text-align: left;
	float: left;
	height: 60px;
	width: 620px;
}
#middle04-3 {
	float: left;
	height: 255px;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
}
#middle04-4 {
	float: left;
	height: 40px;
	width: 790px;
	margin-top: 10px;
	margin-left: 105px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
#middle04-5 {
	float: left;
	height: 255px;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	margin-bottom: 40px;
}
#middle05 {
	height: auto;
	width: 1000px;
	float: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
#middle05-1 {
	float: left;
	height: 55px;
	width: 170px;
	margin-left: 105px;
	font-size: 40px;
	line-height: 60px;
	text-align: left;
	margin-top: 5px;
}
#middle05-2 {
	font-size: 22px;
	line-height: 60px;
	color: #000;
	text-align: left;
	float: left;
	height: 60px;
	width: 620px;
}
#middle05-3 {
	float: left;
	height: auto;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
#middle05-4 {
	float: left;
	height: 65px;
	width: 670px;
	margin-top: 20px;
	margin-left: 165px;
	background-color: #E6FF64;
	font-size: 24px;
	line-height: 65px;
	color: #000;
	text-align: center;
}
#middle05-5 {
	float: left;
	height: auto;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
#middle05-6 {
	float: left;
	height: 255px;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	margin-bottom: 40px;
}
#middle06 {
	height: 380px;
	width: 1000px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: auto;
	margin-bottom: 55px;
	margin-left: auto;
	float: left;
}
#middle07 {
	height: auto;
	width: 1000px;
	float: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
#middle07-1 {
	float: left;
	height: 55px;
	width: 170px;
	margin-left: 105px;
	font-size: 40px;
	line-height: 60px;
	text-align: left;
	margin-top: 5px;
}
#middle07-2 {
	font-size: 22px;
	line-height: 60px;
	color: #000;
	text-align: left;
	float: left;
	height: 60px;
	width: 620px;
}
#middle07-3 {
	float: left;
	height: auto;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
#middle07-4 {
	float: left;
	height: 255px;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
}
#middle07-5 {
	float: left;
	height: 40px;
	width: 310px;
	margin-top: 10px;
	margin-left: 165px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
	text-align: center;
	margin-bottom: 40px;
}
#middle07-6 {
	float: left;
	height: 40px;
	width: 310px;
	margin-top: 10px;
	margin-left: 50px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
	text-align: center;
	margin-bottom: 40px;
}
#middle08 {
	height: auto;
	width: 1000px;
	float: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
#middle08-1 {
	float: left;
	height: 55px;
	width: 170px;
	margin-left: 105px;
	font-size: 40px;
	line-height: 60px;
	text-align: left;
	margin-top: 5px;
}
#middle08-2 {
	font-size: 22px;
	line-height: 60px;
	color: #000;
	text-align: left;
	float: left;
	height: 60px;
	width: 620px;
}
#middle08-3 {
	float: left;
	height: 255px;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	margin-bottom: 40px;
}
#middle09 {
	height: auto;
	width: 1000px;
	float: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
#middle09-1 {
	float: left;
	height: 55px;
	width: 170px;
	margin-left: 105px;
	font-size: 40px;
	line-height: 60px;
	text-align: left;
	margin-top: 5px;
}
#middle09-2 {
	font-size: 22px;
	line-height: 60px;
	color: #000;
	text-align: left;
	float: left;
	height: 60px;
	width: 620px;
}
#middle09-3 {
	float: left;
	height: auto;
	width: 440px;
	margin-top: 20px;
	margin-left: 105px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
#middle09-4 {
	float: left;
	height: 255px;
	width: 326px;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 40px;
}
#middle10 {
	height: auto;
	width: 1000px;
	float: left;
	padding-top: 30px;
	padding-bottom: 30px;
}
#middle10-1 {
	float: left;
	height: 55px;
	width: 170px;
	margin-left: 105px;
	font-size: 40px;
	line-height: 60px;
	text-align: left;
	margin-top: 5px;
}
#middle10-2 {
	font-size: 22px;
	line-height: 60px;
	color: #000;
	text-align: left;
	float: left;
	height: 60px;
	width: 620px;
}
#middle10-3 {
	float: left;
	height: auto;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}
#middle10-4 {
	float: left;
	height: 255px;
	width: 790px;
	margin-top: 20px;
	margin-left: 105px;
}

#b-kako {
	height: 65px;
	width: 1000px;
	margin-top: 550px;
	text-align: center;
}

.date {
	color: #78E632;
	font-family: 'DIN Condensed Bold', sans-serif;
	font-weight: 700; /* DIN Boldなら指定しておくと安心 */
	font-size: 40px;
	line-height: 60px;
}
.red {
	color: #ff0000;
	font-weight: bold;
}

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

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

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

    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/topics03-img02.jpg);
    background-repeat: no-repeat; /* 繰り返さない */
    background-position: center center; /* 中央に配置 */
    background-size: auto 100%; /* 画像を縦幅に合わせる */
    padding: 0;
    margin: 35px 0 0 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;
  }

/* 全体のfloat解除 & 幅100% */
#middle02,
#middle03,
#middle04,
#middle05,
#middle06,
#middle07,
#middle08,
#middle09,
#middle10 {
  float: none !important;
  width: 100%;              /* 幅を100%に設定 */
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;            /* Flexboxを使用 */
  flex-direction: column;   /* 中身を縦に並べる */
  align-items: center;      /* 中身を水平方向に中央揃え */
  gap:10px;                /* アイテム間に20pxの隙間を追加 */
  box-sizing: border-box;   /* ボックスサイズにパディングを含める */
}

/* 各セクションの間に余白を調整 */
#middle02 {
	margin-bottom: -60px;
}

#middle03 {
	margin-bottom: -20px;
}

#middle04 {
	margin-bottom: -60px;
}

#middle05 {
	margin-bottom: -60px;
}

#middle07 {
	margin-bottom: -20px;
}

#middle08 {
	margin-bottom: -60px;
}

#middle09 {
	margin-bottom: -30px;
}

/* date */
#middle02-1,
#middle03-1,
#middle04-1,
#middle05-1,
#middle07-1,
#middle08-1,
#middle09-1,
#middle10-1 {
	width: 90%;
	max-width: 500px;
	font-size: 34px; /* 小さめに調整 */
	line-height: 1.2;
	text-align: center;
	float: none;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}

/* タイトル */
#middle02-2,
#middle03-2,
#middle04-2,
#middle05-2,
#middle07-2,
#middle08-2,
#middle09-2,
#middle10-2 {
	width: 90%;
	max-width: 600px;
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-top: -20px;
}

#middle02-4{
	flex-direction: column;  /* スマホで縦並びにする場合 */
	height: auto;
	font-size: 18px;
	width: 90%;
	float: none;
	text-align: center;
	margin-top: -10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#middle05-4 {
	flex-direction: column;  /* スマホで縦並びにする場合 */
	height: auto;
	font-size: 18px;
	width: 90%;
	float: none;
	text-align: center;
	margin-top: -10px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}

/* 説明文など */
#middle02-3,
#middle03-3,
#middle04-4,
#middle05-3,
#middle05-5,
#middle07-3,
#middle09-3,
#middle10-3 {
	width: 90%;
	max-width: 600px;
	font-size: 14px;
	line-height: 1.5;
	text-align: justify;
	float: none;
	margin-top: -30px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}

/* 画像やボックス */
  #middle02-5,
  #middle04-3,
  #middle04-5,
  #middle05-6,
  #middle07-4,
  #middle08-3,
  #middle10-4 {
	width: 100%;                   /* 親要素の幅を100%に設定 */
	display: flex;                 /* フレックスボックスで配置 */
	justify-content: center;       /* 横方向に中央揃え */
	align-items: center;                     /* マージンリセット */
	padding: 0;                    /* パディングリセット */
	margin-top: -60px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
  }
  
  /* #middleXX-4 の中に含まれる画像 */
  #middle02-5 img,
  #middle03-4 img,
  #middle04-3 img,
  #middle04-5 img,
  #middle05-6 img,
  #middle07-4 img,
  #middle08-3 img,
  #middle09-4 img,
  #middle10-4 img {
    width: 100%;                   /* 画像の横幅を親要素に合わせる */
    height: auto;                  /* 高さは自動調整 */
    display: block;                /* 画像下の隙間を防ぐため */
  }
  
  #middle03-4,
  #middle09-4 {
	width: 70%;                /* 幅を70%に設定 */
    max-width: 330px;          /* 最大幅を330pxに設定 */
    display: block;            /* ブロック要素として表示 */
    text-align: center;        /* 内部のコンテンツを中央揃え */
    margin: 0 auto;
  }
  
  #middle03-4 img,
  #middle09-4 img{
	width: 100%;               /* 画像の幅を親要素に合わせる */
    height: auto;              /* 画像の高さは自動調整 */
    display: block;            /* 画像をブロック要素として表示 */
    margin: 0 auto;
  }
  
  #middle06 {
	display: flex;                 /* フレックスボックスを適用 */
	justify-content: center;       /* 横方向に中央揃え */
	align-items: center;           /* 縦方向に中央揃え */
	width: 100%;                   /* 幅を100%に設定 */
	height: 400px;                 /* 高さは適切な値に設定（調整可） */
	float: none;
	margin-top: -150px;
	margin-bottom: -60px;
  }

  /* #middle07 内の動画を90%の横幅に設定 */
  #middle06 video {
    width: 90%;                    /* 動画の横幅を親要素の90%に設定 */
    height: auto;                  /* 高さは自動調整 */
    display: block;                /* 動画下の隙間を防ぐため */
  }
  
  #middle07-5,
  #middle07-6 {
	width: 90%;
	max-width: 600px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	float: none;
	margin-top: -60px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}  

#middle07-6 {
	margin-top: -40px;
}  
    
  #b-kako {
	width: 100%;                   /* 画像ボックスの幅を60%に設定 */
	max-width: 55%;               /* 最大幅も60%に設定 */
	box-sizing: border-box;               /* 中央寄せ */
	margin-top: -40px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
    }

#b-kako img{
    width: 100%;                  /* 画像の幅を親要素の幅に合わせる */
    height: auto;                 /* 高さは自動調整 */
    display: block;               /* 画像下の隙間を防ぐ */
    }

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