@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.1
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

.hoge { text-align: center; }

table th ,td {
    border:1px solid;
    }
     
/*　スクロールバーの実装 */
.table_sticky {
    display: block;
    overflow-y: scroll;
    height: calc(100vh/2);
    border:1px solid;
    border-collapse: collapse;
}
.table_sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: gold;
    border-top:#FFFFFF;
}

table.nomad_table {
  max-width: 900px !important;
  width: 100%;
  margin: 15px auto !important;
  background: #FFF;
  text-align: center !important;
  font-size: 14px !important;
  display: block !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  color: #333 !important;
  border: none !important;
  border-collapse: collapse !important;
}

table.nomad_table a {
  color: #333 !important;
  text-decoration: none !important;
  transition: .2s;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.25em !important;
  font-size: 13px !important;
  display: block !important;
  position: relative !important;
  text-align: center !important;
}

table.nomad_table a:hover {
  opacity: .8;
}

table.nomad_table tr td,
table.nomad_table tr th {
  padding: 1.5em 2.2em !important;
  line-height: 1.25em !important;
  font-size: 14px !important;
  border: none !important;
  position: relative !important;
  text-align: center !important;
  vertical-align: middle !important;
}

table.nomad_table tr td {
  font-size: 13px !important;
}

table.nomad_table tr td:first-child {
  position: sticky !important;
  left: 0 !important;
  background: #FFF !important;
  z-index: 2;
}

table.nomad_table tr th:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 2;
}

table.nomad_table tr td:nth-child(even) {
  background: #FAFAFA !important;
}

table.nomad_table tr th {
  padding: .8em 2em !important;
  background: #505050 !important;
  color: #fff !important;
  width: 100% !important;
  position: relative !important;
}

table.nomad_table tr th:nth-child(even):after {
  content: "";
  display: block !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .05);
  position: absolute;
}

table.nomad_table tr:nth-child(even) td:nth-child(even):after {
  content: "";
  display: block !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .03);
  position: absolute;
}

table.nomad_table::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

table.nomad_table::-webkit-scrollbar-track {
  background: #FAFAFA !important;
}

table.nomad_table::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  background: #505050 !important;
}

@media(max-width:480px) {

  table.nomad_table tr td,
  table.nomad_table tr th {
    padding: 2em !important;
    font-size: 12px !important;
  }

table.nomad_table tr th {
    padding: .8em 2em !important;
    font-size: 13px !important;
  }

table.nomad_table a {
    font-size: 10px !important;
  }

}

.article-share,
.share-button,
.share-buttons,
#share,
#snsShare {
  display: none !important;
}

.article-footer .article-share {
  display: none !important;
}

/* SANGO記事下のシェアボタン関連を完全非表示 */
.article-footer .snsBtns,
.article-footer .sns-btns,
.article-footer .article-share,
.article-footer .article-share-buttons,
.article-footer .sns-share,
.article-footer .share,
.article-footer .share-buttons,
.article-footer .sns-buttons,
.article-footer .sns-follow,
.article-footer #snsBtns,
.article-footer #snsShare {
  display: none !important;
}
.article-footer .sns-btn {
  display: none !important;
}
footer.article-footer aside .footer-contents .sns-btn {
  display: none !important;
}


a.catid29 {
  background-color: #AAB2BD; /* 背景色 */
  color: #fff; /* 文字色 */
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;       /* ← ここがポイント */
  align-items: center;        /* 垂直方向中央揃え */
  justify-content: center;    /* 水平方向中央揃え */
  font-size: 11px;
  line-height: 1;             /* デフォルトのline-heightを抑える */
  height: 28px;               /* 必要なら高さを指定して統一感 */
}

a.catid23 {
  background-color: #C72C41; /* 赤系カラー例 */
  color: #fff;
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  height: 28px;
}
a.catid24 {
  background-color: #FFD700; /* 黄色系（例） */
  color: #fff;
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  height: 28px;
}

/* 固定ページID1642：ヘッダーとフッター完全非表示 */
.page-id-1642 .l-header,
.page-id-1642 #header,
.page-id-1642 header,
.page-id-1642 .site-header,
.page-id-1642 .c-header,
.page-id-1642 .p-header,
.page-id-1642 .l-footer,
.page-id-1642 #footer,
.page-id-1642 footer,
.page-id-1642 .site-footer,
.page-id-1642 .c-footer,
.page-id-1642 .p-footer,
.page-id-1642 .copyright,
.page-id-1642 .footer-nav,
.page-id-1642 .footer-widget,
.page-id-1642 .pagetop,
.page-id-1642 .global-nav,
.page-id-1642 .global-menu,
.page-id-1642 .footer-menu,
.page-id-1642 .footer-links,
.page-id-1642 .footer-inner,
.page-id-1642 .footer-area {
  display: none !important;
}







/* =========================================================
   BeeMedia トップページ・CTA用スタイル（Cocoon子テーマから移植）
   ========================================================= */

/* ブランド変数（ここの色を変えれば全体のトーンが変わります） */
:root {
  --brand: #1a73e8;          /* メインのブルー（LISKUL風の青） */
  --brand-dark: #1558b0;     /* ホバー・濃いめ */
  --brand-light: #e8f0fe;    /* 薄い背景・タグ */
  --accent: #ff5a3c;         /* CTA・強調用のオレンジ */
  --ink: #1f2733;            /* 本文の濃いグレー */
  --ink-sub: #5b6573;        /* 補助テキスト */
  --line: #e6e9ef;           /* 罫線 */
  --card: #ffffff;           /* カード背景 */
  --radius: 10px;
}

/* ---------------------------------------------------------
   CTA ボックス（[beemedia_cta]）
   --------------------------------------------------------- */
.beemedia-cta {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 1.8em 1.6em;
  margin: 2.2em 0;
  text-align: center;
  box-shadow: 0 10px 30px rgba(26,115,232,.25);
}
.beemedia-cta__lead { font-size: .95rem; opacity: .95; margin-bottom: .3em; }
.beemedia-cta__title { font-size: 1.35rem; font-weight: 800; line-height: 1.5; margin: 0 0 1em; }
.beemedia-cta__btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
  padding: .9em 2.4em;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255,90,60,.35);
  transition: transform .12s ease, filter .12s ease;
}
.beemedia-cta__btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ---------------------------------------------------------
   カテゴリ別カードグリッド（[beemedia_cards]）
   --------------------------------------------------------- */
.bm-sec { margin: 0 0 2.8em; }

.bm-sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--brand);
  padding-bottom: .5em;
  margin-bottom: 1.2em;
}
.bm-sec__title {
  position: relative;
  margin: 0;
  padding-left: .65em;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}
.bm-sec__title::before {
  content: "";
  position: absolute;
  left: 0; top: .15em; bottom: .15em;
  width: 6px; border-radius: 3px;
  background: var(--brand);
}
.bm-sec__more {
  flex: none;
  font-size: .85rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.bm-sec__more::after { content: " ›"; }
.bm-sec__more:hover { color: var(--brand-dark); }

.bm-cards {
  display: grid;
  grid-template-columns: repeat(var(--bm-cols, 3), 1fr);
  gap: 1.2em;
}
.bm-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none !important;
  color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16,24,40,.10);
}
.bm-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #eef1f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bm-card__img { width: 100%; height: 100%; object-fit: cover; }
.bm-card__noimg { color: #aab2c0; font-size: .85rem; letter-spacing: .05em; }
.bm-card__body {
  display: flex;
  flex-direction: column;
  gap: .45em;
  padding: .9em 1em 1.1em;
}
.bm-card__cat {
  align-self: flex-start;
  background: var(--brand);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.bm-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.bm-card:hover .bm-card__title { color: var(--brand-dark); }
.bm-card__excerpt {
  margin: 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ink-sub);
}

/* ---------------------------------------------------------
   注目記事ヒーロー（[beemedia_hero]）
   --------------------------------------------------------- */
.bm-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.4em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--ink);
  margin: 0 0 2.6em;
  transition: box-shadow .15s ease;
}
.bm-hero:hover { box-shadow: 0 10px 30px rgba(16,24,40,.12); }
.bm-hero__thumb {
  aspect-ratio: 16 / 9;
  background: #eef1f6;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bm-hero__img { width: 100%; height: 100%; object-fit: cover; }
.bm-hero__body {
  display: flex; flex-direction: column; justify-content: center;
  gap: .5em;
  padding: 1.4em 1.6em 1.4em 0;
}
.bm-hero__label {
  align-self: flex-start;
  background: var(--accent); color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 4px;
}
.bm-hero__title { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.45; color: var(--ink); }
.bm-hero:hover .bm-hero__title { color: var(--brand-dark); }
.bm-hero__excerpt { margin: 0; font-size: .88rem; color: var(--ink-sub); line-height: 1.8; }

/* ---------------------------------------------------------
   資料DL / 誘導バナー（[beemedia_banner]）
   --------------------------------------------------------- */
.bm-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2em;
  background: var(--brand-light);
  border: 1px dashed var(--brand);
  border-radius: 12px;
  padding: 1.1em 1.5em;
  margin: 0 0 2.6em;
  text-decoration: none !important;
  color: var(--ink);
  transition: background .15s ease;
}
.bm-banner:hover { background: #dde8fd; }
.bm-banner__title { margin: 0 0 .2em; font-size: 1.05rem; font-weight: 800; color: var(--brand-dark); }
.bm-banner__desc { margin: 0; font-size: .85rem; color: var(--ink-sub); }
.bm-banner__btn {
  flex: none;
  background: var(--accent); color: #fff;
  font-weight: 800; font-size: .9rem;
  padding: .7em 1.6em; border-radius: 999px; white-space: nowrap;
}

/* ---------------------------------------------------------
   レスポンシブ微調整
   --------------------------------------------------------- */
@media screen and (max-width: 834px) {
  .bm-cards { grid-template-columns: repeat(2, 1fr); }
  .bm-sec__title { font-size: 1.2rem; }
  .bm-hero { grid-template-columns: 1fr; }
  .bm-hero__body { padding: 0 1.2em 1.3em; }
  .bm-hero__title { font-size: 1.25rem; }
  .bm-banner { flex-direction: column; align-items: flex-start; }
}
@media screen and (max-width: 480px) {
  .bm-cards { grid-template-columns: 1fr; }
}