header {
        margin-bottom: 0px;
    }
    .index_kv .img {
        width: 100%;
        margin: 0 0 0;
		z-index: inherit;
    }
	
	.top .index_section05 {
        max-width: 940px;
        margin: 60px auto 200px;
    }
	 .top .index_section05 .flcell {
        display: flex;
        align-items: stretch;
        margin: 0 auto 50px;
        background: #7e8f7d;
		
    }

	.top .index_section05 .flcell .ttlCell {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 170px;
        font-size: 24px;
       background: #7e8f7d;
        color: #fff;
    border: none;
    }

    .ttlCell::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;         /* ← 上に10%余白を空ける */
  bottom: 10%;      /* ← 下に10%余白を空ける */
  width: 1px;
  background: #fff; /* 線の色 */
}
	.top .index_section05 .flcell h2 {
        font-size: 24px;
        text-align: center;
        color: #fff;
        line-height: 1;
        margin: 0 auto;
        font-weight: 400;
    }

	.top .index_section05 .flcell .txtCell {
        width: calc(100% - 160px);
		color: #fff;
		background: #7e8f7d;
    }


.title01{
	max-width: 844px;
	 width: 100%;
    margin: 0% auto 2% 2%;
}	

.title02{
	max-width: 958px;
    width: 100%;
    margin: 0% 2% 2% auto;
}	

.title03{
	max-width: 759px;
    width: 100%;
     margin: 0% auto 2% 2%;
}	

.title04{
	max-width: 1274px;
    width: 100%;
     margin: 0% 2% 2% auto;
}	

.container {
  position: relative;
  width: calc(100vw - 100px); /* 右に100pxの余白を残して拡大 */
  margin: 0 50px 100px 0;                 /* 左側の空白なし */
  min-height: 600px;         /* デモ用の高さ。必要に応じて変更可 */
  overflow: visible;
}

.block_a {
    position: absolute;
    right: -2%;
    top: 27%;
    bottom: 0;
    max-width: 850px;
    width: 55%;
    overflow: visible;
    z-index: 1;
}

/* キャプションは普通のブロック要素として下に並べる */
.block_a_caption {
  margin-top: 6px;                 /* 画像との余白 */
  font-size: 14px;
  font-family: var(--device-font);
  color: #000000;
  text-align: left;
  white-space: nowrap;
  z-index: 2;
}

/* 画像は「縦自動」に変える */
.block_a img {
  display: block;
  width: 100%;
  height: auto; /* ← ここを auto に */
  object-fit: cover;
}


.block_b {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;                /* 好みで調整OK */
  padding: 2% 3% 5% 3%;
  margin: 0;                 /* 余白なしでピッタリ */
  background-color: rgba(90, 113, 89, 0.8); /* #5a7159, 80%透過 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


.block_b_textarea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* テキストブロック */
.block_b_text {
  margin-bottom: 12px;
  text-align: left;
   line-height: 2.3em;
  font-size: 26px;
  color: #ffffff;
}

/* ボタンブロック */
.block_b_btn a {
  display: inline-block;
  text-decoration: none;
  font-family: var(--device-font);
  color:#000;
  background-color: #ffffff;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 3px;
  text-align: left;
}



/* hover で少しだけボタン感 */
.block_b_btn a:hover {
  opacity: 0.8;
}

.block_c {
  position: absolute;
  left: 2%;   /* block_b_textarea のテキスト左位置と合わせる */
top: 60%;  /* block_b よりも下に配置（高さはデザインに応じて調整） */
  width: 22%;   /* 好みで調整OK */
  z-index: 3;   /* レイヤー順的には block_b の上 */
}

/* block_c の画像 */
.block_c_image img {
  display: block;
  width: 100%;
  height: auto;
}

/* キャプション */
.block_c_caption {
  margin-top: 6px;
  font-size: 14px;
  font-family: var(--device-font);
  text-align: left;
}




.container_revers {
  position: relative;
  width: calc(100vw - 50px);  /* ← ここがキモ */
  margin: 0 0 100px 50px;      /* 上 右 下 左（右は0のまま） */
  min-height: 600px;
  overflow: visible;
}

.container_revers .block_a {
  position: absolute;
  left: 10%;          /* もともとの right:10% の反転イメージ */
  bottom: 0;
  max-width: 850px;
  width: 55%;
  overflow: visible;
  z-index: 1;
}

.container_revers .block_b {
  position: absolute;
  top: 0;
  right: 0;
  left:auto;                      /* ← 右上にピッタリ */
  width: 43%;                    /* 既存と同じ幅でOK */
  padding: 2% 3% 5% 3%;         /* 既存と合わせる */
  margin: 0;
  background-color: rgba(90, 113, 89, 0.8);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.container_revers .block_c {
  position: absolute;
  left: calc(50% + 20%);   /* block_b_textarea の左位置と揃える */
  top: 65%;               /* 下方向の位置はお好みで調整OK */
  width: 20%;
  z-index: 3;
}

.note{
	width:100%;
	text-align: center;
	font-size:12px;
	margin: 100px auto 50px;
}




@media screen and (max-width: 1240px) {
	.block_b_text {
    margin-bottom: 12px;
    text-align: left;
    line-height: 2.3em;
    font-size: 20px;
    color: #ffffff;
}
	.block_c {
    position: absolute;
    left: 3%;
    top: 45%;
    width: 22%;
    z-index: 3;
}
	.block_a {
    position: absolute;
    right: 10%;
    top: 27%;
    bottom: 0;
    max-width: 850px;
    width: 55%;
    overflow: visible;
    z-index: 1;
}
	.container_revers .block_c {
    position: absolute;
    left: calc(60% + 10%);
    top: 50%;
    width: 20%;
    z-index: 3;
}	
}

@media screen and (max-width: 999px) {
	.top .index_section05 .flcell {
    padding-top: 20px;
}
	.top .index_section05 .flcell .txtCell {
    width: calc(100% - 0px);
}
}


@media screen and (max-width: 798px) {
	    .block_c {
        position: absolute;
        left: 2%;
        top: 51%;
        width: 22%;
        z-index: 3;
    }
}



@media screen and (max-width: 768px) {
	.top .index_section05 {
    max-width: auto;
    margin: 60px auto 100px;
}
 .top .index_section05 .flcell {
    display: block;              /* flexやめて縦並びに */
    margin: 0 auto 50px;
	padding-top: 0px; 
  }

	.top .index_section05 .flcell .ttlCell {
    width: 100%;
    margin: 3% auto 0;          /* 左右は auto で中央寄せに */
    border-right: 0;
    }

     .ttlCell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;     /* 下に少し余白を取る位置調整 */
    display: block;
    height: 1px;      /* 横線 */
    width: 90%; 
    background: #fff;
     margin: 0 auto;      /* 中央寄せ */
    margin-top: 8px;     /* ttlCellの下の線を間隔あけて */
    /* 縦線用のtop/bottomを無効化 */
    top: auto;
  }

	.top .index_section05 .flcell .txtCell {
   width: 100%;
    color: #fff;
}
    .index_section05 .flcell .txtCell p {
        padding: 5%;
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
    }
  
    .top .index_section05 .flcell h2 {
    padding: 3%;
}
  .container {
    position: relative;
    width: 95%;
    min-width: auto;
    margin: 0 auto;
    padding: 0;
    min-height: auto;
  }

  /* block_a を通常フローに戻す */
  .block_a {
    position: static; /* ← absolute を解除 */
    width: 100%;
    height: auto;
    padding-bottom: 0;
    margin-bottom: 20px; /* スペース付与 */
  }

  .block_a img {
    width: 100%;
    height: auto;
  }

  .block_a_caption {
    margin-top: 6px;
  }

  /* block_b を通常フローに戻す */
  .block_b {
    position: static; /* ← absolute を解除 */
    width: 100%;
    margin-bottom: 0px;
	padding:initial;
  }
  .block_b_textarea{
	padding:3%;
  }
  .block_b_text {
    font-size: 18px;
    line-height: 1.8em;
  }

  /* block_c を通常フローに戻す */
  .block_c {
    position: static; /* ← absolute を解除 */
    width: 100%;
    margin-bottom: 20px;
    padding: 0 0 10px 0;
  }

  .block_c_image img {
    width: 100%;
    height: auto;
  }

  .block_c_caption {
    font-size: 14px;
    margin-top: 6px;
  }


      .container_revers {
        position: relative;
        width: 95%;
        min-width: auto;
        margin: 0 auto;
        padding: 0;
        min-height: auto;
    }
    .container_revers .block_a {
        position: static;
        width: 100%;
        height: auto;
        padding-bottom: 0;
        margin-bottom: 20px;
    }
	    .container_revers .block_b {
        position: static;
        width: 95%;
        margin-bottom: 0px;
        padding: 10px;
    }

	    .container_revers .block_c {
        position: static;
		max-width:300px;
        width: 100%;
        margin: 0 auto 20px auto;
        padding: 0 0 10px 0;
    }
	.title{
		width:95%;
		margin: 10% auto 2% 2%;
	}
	.note{
	width:95%;
	text-align: left;
	font-size:12px;
	margin: 100px auto 50px;
}
.title01{
	max-width: 238px;
	 width: 100%;
}	

.title02{
	max-width: 279px;
    width: 100%;
}	

.title03{
	max-width: 217px;
    width: 100%;
}	

.title04{
	max-width: 352px;
    width: 100%;
     
}	
}