/*
 * NEWS iframe temporary adjustment CSS
 *
 * 目的
 * - 既存 top.css / base.css を大きく壊さず、iframe 表示だけを後付け調整する
 * - 1行のときは縦中央
 * - 複数行のときも崩れにくくする
 * - スマホ幅でも読めるようにする
 * - 右端の矢印は非表示
 *
 * 使い方
 * - 既存の base.css / top.css のあとに読み込む
 * - もしくは top.jsp 内で最後に読み込む
 */

/* iframe内の横幅制約を弱める */
html,
body {
  margin: 0;
  padding: 0;
  min-width: auto;
}

#wrapper {
  min-width: auto;
}

/* NEWSエリアの余白調整 */
#newsArea {
  padding: 0;
}

#newsArea .ctsArea {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* 一覧全体 */
#newsArea .ctsArea .newsList {
  margin: 0;
  padding: 0;
}

#newsArea .ctsArea .newsList li {
  list-style: none;
}

/*
 * 各行のリンク
 * - 1行時は縦中央
 * - 複数行時も最小高さを超えて自然に伸びる
 */
#newsArea .ctsArea .newsList li a.btnB {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  height: auto;
  max-height: none;
  line-height: 1.6;
  padding: 14px 16px;
  box-sizing: border-box;
  text-decoration: none;
}

/* 日付 */
#newsArea .ctsArea .newsList li a.btnB .data {
  flex: 0 0 92px;
  margin: 0;
  line-height: 1.6;
  white-space: nowrap;

  /* ここ追加 */
  align-self: flex-start;
  padding-top: 2px;
}

/* タイトル */
#newsArea .ctsArea .newsList li a.btnB .tit {
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 矢印は一旦消す */
#newsArea .ctsArea .newsList li a.btnB .arrowArea {
  display: none !important;
}

/* hover時の色変化は既存踏襲 */
#newsArea .ctsArea .newsList li a.btnB:hover .data,
#newsArea .ctsArea .newsList li a.btnB:hover .tit {
  color: rgba(0, 0, 0, 0.3);
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  #newsArea .ctsArea .newsList li a.btnB {
    gap: 10px;
    min-height: 56px;
    padding: 12px 10px;
    font-size: 1.4rem;
  }

  #newsArea .ctsArea .newsList li a.btnB .data {
    flex: 0 0 84px;
    font-size: 1.2rem;
  }

  #newsArea .ctsArea .newsList li a.btnB .tit {
    font-size: 1.4rem;
  }
}

/* かなり狭い幅では縦積み */
@media screen and (max-width: 480px) {
  #newsArea .ctsArea .newsList li a.btnB {
    display: block;
    min-height: auto;
    padding: 12px 8px;
  }

  #newsArea .ctsArea .newsList li a.btnB .data {
    display: block;
    margin-bottom: 4px;
  }

  #newsArea .ctsArea .newsList li a.btnB .tit {
    display: block;
  }
}