@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

#post_slider .p-postList__item{
	transform: perspective(0);
  backface-visibility: hidden;
}

/* 建設kids応援企業バナーのタイトルを中央揃えに - SWELLウィジェットタイトル用 (最終版) */
.c-secTitle.-widget {
  text-align: center !important; /* h2タグ自体を中央揃え */
}

.c-secTitle.-widget span {
  display: block !important; /* spanをブロック要素化して幅を確保し、text-alignが効くように */
  text-align: center !important; /* span内のテキストも中央揃え */
  width: 100% !important; /* spanの幅を親要素に合わせる */
}

@media (max-width: 768px) {
  .support-banners {
    display: flex !important;       /* 強制的にFlexboxを適用 */
    flex-wrap: wrap !important;     /* 強制的に折り返しを許可 */
    justify-content: center !important; /* 強制的に中央揃え */
    gap: 10px !important;           /* バナー間の隙間を10pxに */
    width: 100% !important;         /* 親要素の幅いっぱいに */
    max-width: 100% !important;     /* 最大幅も親要素の幅までにする */
    padding: 0 5px !important;      /* 左右にわずかな余白を追加し、端に寄りすぎないように */
    box-sizing: border-box !important; /* パディングを含めて幅を計算 */
  }

  .support-banners a {
    display: flex !important;       /* 強制的にFlexboxを適用 */
    justify-content: center !important; /* 強制的に水平中央揃え */
    align-items: center !important; /* 強制的に垂直中央揃え */
    
    /* 1行に2つ表示するための幅計算 */
    /* 全体の幅の50%から、バナー間のギャップの半分（10pxの半分で5px）を引く */
    flex-basis: calc(50% - 5px) !important; 
    max-width: calc(50% - 5px) !important;  /* 念のため最大幅も同じ値に */
    width: auto !important; /* PC版のwidth指定がある場合は上書き */
  }

  .support-banners img {
    max-width: 100% !important;     /* 親要素（aタグ）の幅からはみ出さないようにする */
    height: auto !important;        /* 幅に合わせて高さを自動調整し、比率を保つ */
    object-fit: contain !important; /* 画像が親要素に収まるように調整（トリミングしない） */
    display: block !important;      /* 画像をブロック要素として扱い、余計な余白をなくす */
    max-height: 80px !important;    /* スマホでの画像の最大高さを指定（必要に応じて調整） */
  }
}

/* Flexible Table Block のスマホ表示修正 (The Events Calendar ページ用) */
@media (max-width: 768px) {
  /* テーブル全体にスタイルを適用 */
  table.has-fixed-layout {
    width: 100% !important; /* スマホでは幅を100%にする */
    display: block; /* テーブル自体をブロック要素として扱い、横スクロールを可能にする準備 */
    overflow-x: auto; /* 横方向にはみ出したらスクロールバーを表示 */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズに */
  }

  /* テーブル内のセル（td, th）のテキストを折り返す */
  /* テーブルの各セル（td）に幅の指定がある場合、それを上書きする */
  table.has-fixed-layout td,
  table.has-fixed-layout th {
    white-space: normal !important; /* テキストを通常通り折り返す */
    word-break: break-word !important; /* 長い単語でも強制的に折り返す */
    width: auto !important; /* セルの固定幅指定を解除 */
    min-width: unset !important; /* 最小幅の指定も解除 */
  }

  /* colspan="2"やcolspan="10"の幅を調整（必要であれば） */
  /* 各セルの相対的な幅を調整したい場合に検討 */
  table.has-fixed-layout td[colspan="2"] {
    width: 30% !important; /* 例: 左側の「対象」「日程」などの列の幅 */
  }
  table.has-fixed-layout td[colspan="10"] {
    width: 70% !important; /* 例: 右側の詳細情報の列の幅 */
  }
}

/* The Events Calendar イベント詳細ページの日付見出しを非表示にする */
.tribe-events-schedule__datetime {
  display: none !important;
}

/* イベント詳細ページの「コメント」見出しを非表示にする */
/* 「コメント」のh2見出しを非表示 */
.l-articleBottom__section.-comment > .l-articleBottom__title.c-secTitle {
  display: none !important;
}

/* 「コメント一覧」のh3見出しを非表示（必要であれば） */
/* コメントが既にある場合に表示される「コメント一覧」も非表示にする場合 */
.p-commentArea__title.-for-list {
  display: none !important;
}

/* イベント詳細ページの「カレンダーに追加」上のグレーの枠線を完全に非表示にする */
.tribe-block.tribe-block__venue {
  border: none !important; /* すべてのボーダーを削除 */
  box-shadow: none !important; /* 念のため影も削除 */
  background-color: transparent !important; /* 念のため背景色も透明に */
}

/* The Events Calendar イベントページのタグ表示の調整 */

.tribe-event-tags-label {
  display: none !important;
}

.tribe-event-tags {
  display: flex !important; /* 横並びにする */
  flex-wrap: wrap !important; /* 折り返しを許可 */
  gap: 8px !important; /* タグ間の隙間 */
  margin-left: 0 !important; /* dt要素が消えるので、自動で付くマージンをリセット */
}

.tribe-event-tags a { /* ここからコメントアウトを解除 */
  display: inline-flex !important; /* アイコンを考慮してflex-boxに */
  align-items: center !important; /* 垂直方向中央揃え */
  padding: 3px 8px !important; /* 内側の余白 */
  border: 1px solid #ddd !important; /* 枠線 */
  border-radius: 4px !important; /* 角丸 */
  background-color: #f8f8f8 !important; /* 背景色 */
  font-size: 0.85em !important; /* 小さめのフォントサイズ */
  color: #666 !important; /* 文字色 */
  text-decoration: none !important; /* 下線を削除 */
  white-space: nowrap !important; /* テキストの折り返しを防ぐ */
  transition: all 0.2s ease-in-out; /* ホバー時のアニメーション */
}

.tribe-event-tags a:hover { /* ここもコメントアウトを解除 */
  background-color: #eee !important;
  border-color: #bbb !important;
  color: #333 !important;
  transform: translateY(-1px); /* 少し上に浮き上がる効果（オプション） */
}
/* 5. アイコンの追加 (この部分はコメントアウトされたままか削除されているはずです) */

/* The Events Calendar: タグ間のコンマを非表示にする */
.tribe-events-single-section .tribe-event-tags a:not(:last-child)::after {
  content: none !important;
}