/* 1. ブラウザのカラースキームをライトモードに固定する */
:root {
  color-scheme: light;
}

/* 2. 背景色と文字色を明示的に指定する */
/* これにより、ブラウザ側による勝手な色の反転を防ぎます */
html, body {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* 3. ダークモード用のメディアクエリを無効化（上書き）する */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  /* その他、ダークモードで消えてしまう要素があれば個別に白背景を指定 */
}


/* カードを並べるコンテナ */
.definition-flex-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

/* カード共通設定 */
.definition-card {
  flex: 1;
  max-width: 500px;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  color: #ffffff !important;
  box-sizing: border-box;
}

/* 背景色設定 */
.green-bg { background-color: #4BBC88 !important; }
.blue-bg { background-color: #4EA5D3 !important; }

/* アイコンサイズ */
.icon-area {
  font-size: 48px;
  margin-bottom: 10px;
}

/* 【余白調整】カテゴリ名 */
.category-name {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 10px;
}

/* 【余白調整】人数テキスト */
.count-text {
  font-weight: bold;
  margin: 0 0 15px 0 !important; /* 上をゼロ、下だけ少し空ける */
  padding: 0 !important;
  line-height: 1; /* 行の高さを詰める */
}

.count-text {
  font-size: 42px;
  vertical-align: baseline;
}

/* 下部の白帯注釈 */
.note-box {
  background-color: #ffffff !important;
  color: #333333 !important;
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  display: block;
  width: 90%;
  margin: 0 auto;
}

.note-box i { margin-right: 5px; }
.note-box i.fa-triangle-exclamation { color: #D4382A; }
.note-box i.fa-lightbulb { color: #F8E169; }

.note-box i.fa-triangle-exclamation,.note-box i.fa-lightbulb {
  font-size: 16px !important;
  vertical-align: middle;
  line-height: 1;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .definition-flex-row {
    flex-direction: column;
    align-items: center;
  }
  .definition-card {
    width: 100%;
  }
}

.action-img {
    width: 100%;
    aspect-ratio: 600 / 400;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.action-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s;
}

.action-img:hover img {
    transform: scale(1.05);
}

/* リスト内のリンクスタイル（商工会連合会カラー） */
.disc-list.is-small li a {
  color: var(--primary-blue);
  text-decoration: underline;
  transition: opacity 0.3s ease;
  font-weight: 500;
}

.disc-list.is-small li a:hover {
  text-decoration: none;
  opacity: 0.7;
}

.survey-link.is-large span {
    font-size: 20px;
}

.recruit-sub-copy {
  font-weight: bold;
}

/* 親の白い枠 */
.feed-content {
  background: #fff;
  border-radius: 20px;
  padding: 40px 20px 30px; /* 下側の余白を少し調整 */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 600px; /* 全体の高さを固定（お好みの高さに） */
}

/* スクロールエリア本体 */
.feed-scroll-container {
  flex-grow: 1;           /* 親要素の残りの高さを埋める */
  overflow-y: auto;       /* 縦方向にスクロールを出す */
  padding-right: 10px;    /* スクロールバーとの間に少し隙間を作る */
  margin-top: 15px;
}

/* スクロールバーのデザインを少し綺麗にする（任意） */
.feed-scroll-container::-webkit-scrollbar {
  width: 6px;
}
.feed-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.feed-scroll-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* ニュース全体のフォントと余白 */
.feed-scroll-container .rss-box {
  font-size: 14px; /* 少し読みやすく調整 */
  line-height: 1.6;
  padding: 10px;
}

/* ニュース1件ごとの枠（区切り線） */
.feed-scroll-container .rss-item {
  list-style: none;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee; /* 薄いグレーの線 */
}

/* ニュースのタイトル（リンク） */
.feed-scroll-container .rss-item-title a {
  color: var(--primary-blue); /* 商工会カラーの青 */
  font-weight: bold;
  text-decoration: none;
}
.feed-scroll-container .rss-item-title a:hover {
  text-decoration: underline;
}

/* 投稿日付 */
.feed-scroll-container .rss-time {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

/* 本文内の画像（右側に回り込ませる） */
.feed-scroll-container .rss-text img {
  width: 100px;
  height: auto;
  float: right;
  margin-left: 15px;
  border-radius: 4px;
}

.survey-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #59a9d4;          /* 文字色 */
    font-weight: bold;
    text-decoration: none;   /* 下線を消す */
    border: 2px solid #59a9d4; /* 周りの線 */
    padding: 20px 25px;      /* ボタン内の余白 */
    border-radius: 7px;     
    transition: all 0.3s ease; /* アニメーション用 */
    background-color: transparent;
}

/* マウスを乗せた時の動き（ホバーエフェクト） */
.survey-link:hover {
    background-color: #59a9d4; /* 背景を水色に */
    color: #fff;               /* 文字を白に */
    opacity: 1;                /* 透明度を維持 */
}

.recruit-sub-copy {
    /* 背景色を白の半透明（0.7が透明度）にする */
    background-color: rgba(255, 255, 255, 0.75); 
    
    /* 文字と背景の間の余白 */
    padding: 30px 20px;
    
    /* 角を少し丸くしておしゃれに */
    border-radius: 10px;
    
    /* 文字自体の色も少し濃くして引き締める */
    color: #333;
    line-height: 2;
    text-align: center;
    
    /* 中央に寄せるための指定 */
    max-width: 900px;
    margin: 0 auto;
}

@media screen and (min-width: 992px) {
  #js-hamburger.menu-trigger {
    display: none !important;
  }
}

/* 動画のアスペクト比を維持してレスポンシブにする */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 の比率 */
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.recruit-card {
  background-image: url("../images/top/recruit-bg.jpg") !important;
}