@charset "utf-8";
/*--------
jcom 各種TOP コンテンツ追加等用CSS
26/2～利用開始（作成：関東制作）
*/

/* font-family 再指定 */
html {
  font-size: 14px;
}
body {
  font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* ==========================================================================
   Pickup Contents / uipartsより
   ========================================================================== */


.pickup-contents-button {
  width: 100%;
  margin-top: 16px;
}


.ui-static-grid-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ui-static-grid-space-narrow {
  gap: 12px;
}

@media screen and (min-width: 768px) {
  .ui-static-grid-space-narrow {
    gap: 16px;
  }
}

.ui-static-grid-item {
  width: 100%;
  box-sizing: border-box;
}


@media screen and (min-width: 768px) {
  .ui-static-grid-col-3 .ui-static-grid-item {
    width: calc((100% - 32px) / 3);
  }
}


.ui-static-link-list {
  display: block;
  text-decoration: none;
}

.ui-static-link-list-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 16px 16px;
  background-color: var(--ui-static-white, #ffffff);
  border: 1px solid var(--ui-static-navy-40, #c0c5cc);
  border-radius: 8px;
  color: var(--ui-static-black, #2c2a29);
  font-size: 14px; /* ★ 0.875rem から 14px に修正（12.25px防止） */
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.2s ease-out;
}

.ui-static-link-list-button:hover,
.ui-static-link-list-button:focus {
  background-color: var(--ui-static-navy-20, #f5f7fa);
  border-color: var(--ui-static-unleash-blue-70, #3064d5);
  color: var(--ui-static-unleash-blue-70, #3064d5);
}

.ui-static-link-list-button-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ★ PC/SP共通でテキスト・アイコンを左寄せに設定 */
  width: 100%;
}


/* PC版調整 */
@media screen and (min-width: 768px) {
  .pickup-contents-button .ui-static-grid-col-3 .ui-static-grid-item {
    width: calc((100% - 48px) / 3);
  }

  .pickup-contents-button .ui-static-link-list-button {
    width: 100%;
  }
}

/* ピックアップコンテンツボタン */
.pickup-contents-button {
  background: #f2f2f2;
  padding: min((16vw / 3.75), 16px);
}
.pickup-contents-button .ui-static-grid-list {
  justify-content: center;
}
.pickup-contents-button .ui-static-grid-space-narrow {
  gap: min((16vw / 3.75), 24px);
}
.pickup-contents-button .ui-static-link-list-button {
  max-width: none;
  width: min((304vw / 3.75), 304px);
  color: #2c2a29;
  background-color: #fff;
  border-color: #888;
}
.pickup-contents-button .ui-static-link-list-button .ui-static-link-list-button-inner {
  font-weight: bold;
  gap: min((8vw / 3.75), 8px);
}
.pickup-contents-button .ui-static-link-list-button .ui-static-link-list-button-inner::before {
  content: '';
  height: min((24vw / 3.75), 32px);
  aspect-ratio: 32 / 32;
  background: no-repeat center center / contain;
}

/* アイコン画像指定 */
.pickup-contents-button .is-media .ui-static-link-list-button-inner::before {
  background-image: url(/cmn/chugoku/images/icon_news.svg);
}
.pickup-contents-button .is-setsumeikai .ui-static-link-list-button-inner::before {
  background-image: url(/cmn/chugoku/images/icon_setsumeikai.svg);
}
.pickup-contents-button .is-event .ui-static-link-list-button-inner::before {
  background-image: url(/cmn/chugoku/images/icon_event.svg);
}
.pickup-contents-button .is-star .ui-static-link-list-button-inner::before {
  background-image: url(/cmn/chugoku/images/icon_star.svg);
}

/* SP版（767px以下）ボタンの中央配置調整 */
@media screen and (max-width: 767px) {
  .pickup-contents-button .ui-static-grid-item {
    display: flex;
    justify-content: center;
  }
}

/* ★ ＝＝ hover ＝＝ ★ */
@media (hover: hover) and (pointer: fine) {
  .pickup-contents-button .ui-static-link-list-button:hover {
    color: #2c2a29;
    background-color: #e2e2e2;
    border-color: #888;
  }
}