/*  ▼トップメニュー  */
.g_menu { width:100%; display:block; margin:10px auto 0; }
.g_menu > ul { margin:0; padding:0; list-style:none; display:flex; justify-content:space-between; flex-wrap:wrap; background-color:transparent; }
.g_menu > ul > li { padding:0; margin:1px 0 0; width:24.9%; }
.g_menu > ul > li > a { width:100%; height:50px; text-align:center; background-color:#E9FBF6; margin:0; padding:0; color:#42281a; display:block; text-decoration:none; line-height:50px; font-size:1.1em; border: none; }
.g_menu > ul > li > a:hover { background-color:#99EBD6; }
.g_menu > ul > li.no_br br { display:none; }

@media (max-width: 768px) {
  .g_menu > ul > li { width:100%; } 
  .g_menu > ul > li > a {
    height: auto;             
    line-height: 1.4;         
    padding: 10px 12px;      
    text-align: left;         
    white-space: normal;      
    overflow-wrap: anywhere;  
    word-break: break-word;   
  }
}
 
/* ▼新着情報一覧 */
.news-list{
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #CCC;
  height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 各アイテム */
.news-list .item > a{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 16px 8px;
  border-bottom: 1px solid #EEE;
  background: #fff;
  color: #333;
  text-decoration: none;
}

.news-list .date{
  margin: 0;
  flex: 0 0 170px;
  font-size: 15px;
  color: #4A4A4A;
  padding-right: 20px;
  white-space: nowrap;
}

/* カテゴリ */
.news-list .category{
  margin: 0;
  flex: 0 0 170px;
  padding-right: 20px;
}

/* ラベル共通 */
.news-list .category .label{
  display: inline-block;
  width: 90px
  text-align: center;
  padding: 6px 10px; 
  font-size: 12px;
  line-height: 1;
  border-radius: 0;
  white-space: nowrap;
  color: #fff;
  background: #999;
}

/* ラベル色 */
.news-list .label.yuuki   { background:#E7F4EC; color:#0F3D26; }
.news-list .label.kanchoku{ background:#F4F3CD; color:#4A4A0F;  }
.news-list .label.ondanka { background:#FFF4F2; color:#7A2C2C;  }
.news-list .label.tsuchi  { background:#FBF3EA; color:#4A2E1A; }
.news-list .label.gap     { background:#F7F4FB; color:#46306E; }
.news-list .label.plastic { background:#F0F8FF; color:#0E3A62; }
.news-list .label.sonota  { background: #F2F2F2; color:#333333; }

.news-list .title{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}

.news-list .item > a:hover .title{ color: #0057ff; }

.news-list .item > a:focus-visible{
  outline: 3px solid #8cc5ff;
  outline-offset: 2px;
}

/* スクロールバー（WebKit） */
.news-list::-webkit-scrollbar{ width: 10px; }
.news-list::-webkit-scrollbar-track{ background: #f1f1f1; }
.news-list::-webkit-scrollbar-thumb{ background: #c9c9c9; }
.news-list::-webkit-scrollbar-thumb:hover{ background: #b3b3b3; }

/* スクロールバー（Firefox） */
.news-list{ scrollbar-width: thin; scrollbar-color: #c9c9c9 #f1f1f1; }

@media (max-width: 480px){
   .news-list {max-height: 450px; height: auto; }
  .news-list .item > a{ flex-wrap: wrap; }
  .news-list .date,
  .news-list .category{ flex: 0 0 auto; }
  .news-list .title{ margin-top: 8px; }
}

/*  ▼カテゴリ別に探す*/
:root{
  --rel-title-color: #502C2C;
  --rel-text-color:  #3b2a1f;
  --rel-border:      #E7D7C7;
  --rel-bg:          #fff;
  --rel-accent:      #C8A07A;
}

/* コンテナ*/
.related-media-list{
  max-width: 1120px;
  margin: 20px auto 40px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* 各カード */
.related-media{
  display: grid;
  grid-template-columns: 64px 1px 1fr; 
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  background: var(--rel-bg);
  border: 2.5px solid var(--rel-border);
  border-radius: 12px;
  transition: 0.2s ease;
  text-decoration: none; 
  color: inherit;       
}

.related-media:hover{
  box-shadow: 0 6px 18px color-mix(in srgb, var(--rel-accent) 18%, transparent);
  transform: translateY(-1px);
}

/* アイコン */
.related-media__icon{
  width: 56px;
  height: 56px;
  object-fit: contain;
  justify-self: center;
}

.related-media__divider{
  width: 1px;
  height: 80%;
  background: var(--rel-border);
}

.related-media__body{
  min-width: 0;
}

.related-media__title{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--rel-title-color);
  line-height: 1.35;
}

.related-media__desc{
  margin: 0;
  color: var(--rel-text-color);
  font-size: 15px;
  line-height: 1.5;
}

.related-media:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--rel-accent) 60%, transparent);
  outline-offset: 3px;
  border-radius: 12px;
}

/* モバイル対応 */
@media (max-width: 600px){
  .related-media{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px;
    gap: 6px;
   min-height: auto;
  }

  .related-media-list{
    grid-template-columns: 1fr 1fr;
    gap: 12px;      
    padding: 0 8px;
  }

  .related-media__icon{
    width: 44px;
    height: 44px;
  }

  .related-media__title{
    font-size: 15px;
    margin: 0;
  }

  .related-media__desc{
    display: none;
  }　

  .related-media__divider{
    width: 100%;
    height: 1px;
    grid-column: 1 / -1; 
    grid-row: 2;        
  }

  .related-media__body{
    grid-column: 2;
    grid-row: 1 / 3;    
  }

  .related-media__title{ font-size: 17px; }
  .related-media__desc{ font-size: 16px; }
}

@media (max-width: 360px){
  .related-media__divider{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .related-media{
    transition: none;
    transform: none;
  }
}

/* カードごとのカラーテーマ*/
/* 有機農業 */
.related-media.theme-organic{
  --rel-bg:#E7F4EC;      
  --rel-border:#BBDDC8; 
  --rel-title-color:#0F3D26; 
  --rel-text-color:#2A3B32;  
  --rel-accent:#2F8A57;
}

/* 環境保全型農業 */
.related-media.theme-conservation{
  --rel-bg:#FBFBEF;      
  --rel-border:#E9E3B5; 
  --rel-title-color:#4A4A0F;
  --rel-text-color:#3A3A22;  
  --rel-accent:#C9BE4E;  
}

/* 地球温暖化 */
.related-media.theme-climate{
  --rel-bg:#FFF4F2;      
  --rel-border:#FFD7CF; 
  --rel-title-color:#7A2C2C;
  --rel-text-color:#5A3734; 
  --rel-accent:#FF8E7A; 
}

/* 土づくり*/
.related-media.theme-soil{
  --rel-bg:#FBF3EA;     
  --rel-border:#E5D0B8; 
  --rel-title-color:#4A2E1A; 
  --rel-text-color:#3E2E24;  
  --rel-accent:#B68459; 
}

/* GAP */
.related-media.theme-gap{
  --rel-bg:#F7F4FB;      
  --rel-border:#E0D6F2;  
  --rel-title-color:#46306E;
  --rel-text-color:#3A3550;  
  --rel-accent:#9A86E8; 
}

/* プラスチック */
.related-media.theme-plastic{
  --rel-bg:#F0F8FF;     
  --rel-border:#CFE6FF;  
  --rel-title-color:#0E3A62; 
  --rel-text-color:#2A3F54;
  --rel-accent:#6EC1FF; 
}

/*▼イベント画像枠 */
.two-col {
  --gap: 24px;
  --frame-color: #CBF5EB;

  max-width: 1024px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr; 
  align-items: start;
  gap: var(--gap);
  line-height: 1.6;
  color: #222;
}

.two-col__media {
  margin: 0;
  position: relative; 
}

.two-col__media::before {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px; 
  border: 4px solid var(--frame-color);
  border-radius: 10px;
  z-index: 0;
}

.two-col__media img {
  display: block;
  width: 100%;
  height: auto;            
  border-radius: 10px;
  position: relative;
  z-index: 1;              
  object-fit: cover;        
}

.two-col__content {
  font-size: 14px;
}

.two-col__title {
  margin: 0 0 0.5em;
  font-size: clamp(18px, 1.4vw + 14px, 26px);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
  }
  .two-col__media {
    order: 0;
  }
  .two-col__content {
    order: 1;
  }
  .two-col__media::before {
    inset: 8px 8px 8px 8px;  
  }
}

/*▼リンク集*/
.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px; 
  margin: 20px 0;
}

.link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 10px;
  height: auto;
  background: white;
  transition: 0.2s ease;
  height: 90px; 
}

.link-item:hover {
  border-color: var(--hover-color, #d00);
  transform: translateY(-2px);
}

.link-item img {
  max-height: 70px;
  width: auto;
  object-fit: contain;
  background: #fff;
}

.caption {
  margin-top: 6px;
  font-size: 12px;
  color: #555;
}

@media (max-width: 768px) {
  .link-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}