.news-section h2{
  font-size: 18px;
}

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

.news-item{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
  font-size: 15px;
}

.news-item .category{
  display: inline-block;
  min-width: 100px;
  font-size: 13px;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
}

.news-item.golden .category{ background-color: #B8860B; }

.news-item .date{ font-size: 13px; color: #666; }

.news-item a{
  color: #333;
  text-decoration: none;
  font-weight: bold;
  flex-grow: 1;
}

.news-item a:hover{
  text-decoration: underline;
}

.show-all-btn{
  margin-top: 15px;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  background-color: #666;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

.show-all-btn:hover{
  background-color: var(--hover-bg-color);
}

@media (max-width: 1023px) {

  .news-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .news-item .category {
    min-width: auto;
  }
}

/* サブタイトル用 */
.heading-31{
    position: relative;
    padding: .3em 0 .2em 1em;
    border-bottom: 3px solid #186B42;
    color: #186B42;       /* サブタイトル・カラー */
}

.heading-31::before{
    position: absolute;
    top: 0;
    left: .3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    border-bottom: 8px solid #186B42;   /* サブタイトル・カラー */
    content: '';
}

.heading-31::after{
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: 0;
    height: 8px;
    width: 8px;
    border-bottom: 8px solid #186B42;   /* サブタイトル・カラー */
    content: '';
}

img{
    width: 100%;
    height: 100%;
    vertical-align: bottom;
}

.card_r-container{
    background: #ffffff;
    color: #333;
    display: flex;
    align-items: stretch;          /* 高さ合わせ */
    margin: 10px auto;
    width: 100%;
    /*box-shadow: 0 12px 10px -6px rgba(0,0,0,.25);*/
}

.card_r-container a{
    text-decoration: none;
    color: #cddc39;
}

.card_r-text{
    width: 95%;                    /* 画像とバランスをとる */
    padding: 10px 20px;            /* 余白はpaddingの方が内側で扱いやすい */
    box-sizing: border-box;
}

.card_r-text h3{
    padding-top: 10px;
    font-size: 1.28em;
}

.card_r-text p{
    font-size: 1.0em;
}

.card_r-text img{
    width: 480px;
    height: auto;
    margin: 10px 0;
}

.card_r-img{
    width:70%;
    /* 必要なら背景色や余白をここで調整 */
}

.card_r-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;             /* はみ出しを抑えて見栄え良く */
    vertical-align: bottom;
}

.card_r-container.img-right{
    flex-direction: row-reverse;   /* 子要素の並びを反転＝画像が右、テキストが左 */
}

.figure{
    margin: 16px 0;
    text-align: center;
}

.figure img{
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.figure .figcaption{
    font-size: 0.85em;
    color: #666;
    margin-top: 6px;
}

.note{
    background: #f7f7f7;
    border-left: 4px solid #cddc39;
    padding: 12px 14px;
    margin: 14px 0;
    font-size: 0.9em;
}

@media (max-width: 768px) {

    .card_r-container,
    .card_r-container.img-right {
        flex-direction: column;    /* 画像→テキストの順で縦並び */
    }

    .card_r-img,
    .card_r-text {
        width: 100%;
    }

    .card_r-img img {
        height: auto;              /* 縦積み時は高さ可変に */
    }
}

/* テーブル */
.table_design02{
  width: 100%;
  margin: 20px 10px 10px 0px;
  border-collapse: collapse;
}

.table_design02 tr{
  border-bottom: solid 1px #c0c0c0;
}

.table_design02 tr:last-child{
  border-bottom: none;
}

.table_design02 th{
  position: relative;
  /*text-align: left;*/
  width: 25%;
  background-color: #f5f5f5;
  /*background-color: #2589d0;*/
  /* background-color:rgba(255,0,0,1);*/
  color: dimgray;
  text-align: center;
  padding: 10px 0;
}

.table_design02 td{
  text-align: left;
  width: 75%;
  /*text-align: center;*/
  background-color: #ffffff;
  padding: 10px 0px 10px 15px;
  color:gray;
}

.table_design02m{
  width: 300px;
  margin: 10px 10px 10px 0px;
  border-collapse: collapse;
}

.table_design02m tr{
  border-bottom: solid 1px #c0c0c0;;
}

.table_design02m tr:last-child{
  border-bottom: none;
}

.table_design02m th{
  position: relative;
  /*text-align: left;*/
  width: 25%;
  background-color: #f5f5f5;
  /*background-color: #2589d0;*/
   /*background-color:rgba(255,0,0,1);*/
  color: dimgray;
  text-align: center;
  padding: 10px 0;
}

.table_design02m td{
  text-align: left;
  width: 75%;
  /*text-align: center;*/
  /*background-color: #f2f3f4;*/
  background-color: #ffffff;
  padding: 10px 0px 10px 15px;
  color:gray;
}

/* MAPエリア */
.map_area{
  width: 100%;
  max-width: 950px;
  margin: 0 auto; /* 中央寄せ */
}

.map_area ul{
  list-style: none;
  margin: 25px 0 0;
  padding: 0;

  display: flex;
  flex-direction: column; /* SP/Tabletは縦並び */
  gap: 25px;
  align-items: stretch;
}

.map_area ul > li{
  width: 100%;
  flex: 0 0 auto;
  min-width: 0; /* はみ出し防止（重要） */
}

.map_area iframe{
  display: block;
  width: 100% !important;
  height: 300px; /* SPの標準 */
  border: 0;
}

.map_area table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.map_area th,
.map_area td{
  padding: 8px;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.map_area th{
  text-align: left;
  white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1023px) {

  .map_area iframe {
    height: 360px; /* Tabletは少し高め（好みで調整） */
  }
}

@media (min-width: 1024px) {

  .map_area ul {
    flex-direction: row;     /* PCだけ横並び */
    align-items: flex-start;
  }


  .map_area ul > li {
    flex: 1 1 0;
    min-width: 380px;        /* 元要件を踏襲 */
  }


  .map_area iframe {
    height: 45svh;           /* PCは画面高さに追従 */
    min-height: 360px;       /* 小さくなり過ぎ防止 */
    max-height: 520px;       /* 大きくなり過ぎ防止（不要なら削除OK） */
  }
}

/* フロートテキスト */
.image-container{
  position: relative; /* 子要素の絶対配置の基準にする */
  display: inline-block; /* 画像のサイズに合わせる */
}

.image-container img{
  display: block;
  width: 100%; /* 画像が親要素の幅に収まるように */
  height: auto;
}

.overlay-text{
  position: absolute; /* 親要素（.image-container）を基準に配置 */
  top: 10%; /* 上から50% */
  left: 11%; /* 左から50% */
  transform: translate(-50%, -50%); /* 要素の中心をずらす（中央配置） */
  color: white; /* テキストの色 */
  /*text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.4);*/
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
  /*background-color: rgba(0, 0, 0, 0.3); /* 半透明の背景色（任意） */
  padding: 10px 20px;
  font-family: sans-serif;
  font-size: 36px;
}

@media (max-width: 768px) {

 .overlay-text {
   /*top: 18%; /* 上から50% */
   left:18%; /* 左から50% */
   text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
   /*background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景色（任意） */
   padding: 10px 20px;
   font-size: 24px;
 }
}