/* テーブル横スクロール */
.table-container {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  border: 1px solid #ccc;
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
}

/* 20241010css */
.footer-contents {
  display: none;
}

.footer-button {
  position: fixed;
  bottom: 60px;
  margin: 20px auto;
}

#body_wrap a:link {
  color: #1176d4;
}

#body_wrap {
  margin-top: 110px;
}

@media screen and (max-width: 768px) {
  #body_wrap {
    margin-top: 57px;
  }
}

/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sango-related-posts .eye-catch {
  display: none;
}

.archive .cardtype__img,
.home .cardtype__img,
.archive .sidelong__img,
.home .sidelong__img {
  display: none;
}

.home .cardtype__link {
  padding-top: 25px;
}

table {
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  font-size: 16px;
  line-height: 1.2em;
  padding: 20px;
  text-align: center;
}

.micro {
  font-weight: bold;
  color: red;
  text-align: center;
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
  padding-top: 40px;
}

.top-table {
  table-layout: fixed;
  overflow: auto;
}

.scrollable-table {
  width: 100%; /* 任意の固定幅に設定することもできます */
  overflow-x: auto;
  border: 1px solid #ccc; /* これはオプションで、テーブルの境界を見やすくするためのものです */
  white-space: nowrap; /* 修正：全角スペースを削除 */
}

.scrollable-table table {
  width: 100%;
}

.menu {
  color: red;
}

/* スマホの画面サイズでのスタイル */
@media (max-width: 768px) {
  .container {
    white-space: normal;
  }
  
  th, td {
    font-size: 14px;
    white-space: nowrap; /* セル内のテキストの折り返しを制御 */
  }
  
  /* ① テーブル全体を横スクロール可にする */
  .table-container {
    overflow-x: auto; /* ← ここにだけ付ける */
    -webkit-overflow-scrolling: touch;
  }

  /* ② 各セルのスクロールを解除 */
  .table-container td,
  .table-container th {
    overflow: visible !important; /* ← 既存の overflow-x:auto を殺す */
    white-space: normal; /* 折り返してOKなら */
  }

  /* ③ 最低横幅を持たせてタップで横にスライド */
  .table-container table {
    min-width: 800px; /* 列数ぶん調整。長ければ1000〜1200pxくらい */
    border-collapse: collapse;
  }
}

.wp-block-sgb-btn {
  text-align: center;
}

.myClass {
  font-size: 16px;
  line-height: 1.2em;
  overflow-x: auto; /* 横方向のオーバーフローをスクロール可能にする */
  display: block; /* ブロック要素として表示 */
  width: 100%; /* 幅を100%に設定 */
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.filter li {
  cursor: pointer;
}

.filter li.is-active {
  color: red;
}

.category li {
  display: none;
}

.category li.is-show {
  display: block;
}

/* フッターカテゴリ消し */
.footer-meta {
  display: none;
}

.prnx {
  display: none;
}

.bottom-link {
  position: fixed;
  bottom: 20px;
  right: 0;
  text-align: center;
  background-color: white;
}

.article-footer .footer-contents .sns-btn {
  display: none;
}

.floating_bn {
  position: fixed; /* 固定表示 */
  bottom: 0; /* 画面の下部に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 横幅を全体に */
  background-color: #f8f9fa; /* 背景色 */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 上方向の影 */
  padding: 10px; /* 内側の余白 */
  z-index: 1000; /* 他の要素の上に表示 */
  display: flex; /* フレックスボックス */
  justify-content: space-between; /* 要素間のスペースを均等に */
  align-items: center; /* 垂直方向の中央揃え */
}

.floating_bn .close {
  cursor: pointer; /* クリックできるカーソル */
}

.floating_bn .close img {
  width: 24px; /* 画像の幅 */
  height: 24px; /* 画像の高さ */
}

.floating_bn .flexBox {
  flex-grow: 1; /* 残りのスペースを占める */
  text-align: center; /* 中央揃え */
}

.floating_bn .flexBox a {
  text-decoration: none; /* 下線を消す */
  color: #007bff; /* リンクの色 */
  font-weight: bold; /* 太字 */
  font-size: 16px; /* 文字サイズ */
}

.pink {
  background: linear-gradient(transparent 60%, #ffb6c1 60%);
}

.blue-1 {
  background: linear-gradient(transparent 80%, #87cefa 80%);
}

.container, .entry-content p {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 全てのリンクを青に設定 */
a {
  color: blue;
}

/* ヘッダーとフッター内のリンクは初期値（または任意の色）に戻す */
header a,
footer a {
  color: inherit; /* 親要素の色を継承（デフォルトに戻す） */
  text-decoration: none; /* 下線を消す場合 */
}

.box1-pink {
  margin: 2em auto; /* ボックスの余白 */
  background: #fdf1f4; /* ボックス背景色 */
  border-radius: 4px; /* ボックス角丸 */
  max-width: 600px; /* ボックス横幅 */
  padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
  position: relative; /* 配置に関するもの(ここを基準に) */
}

.box1-pink .box-title {
  background: #f27398; /* タイトル背景色 */
  color: #fff; /* タイトル文字色 */
  font-weight: bold; /* タイトル文字の太さ */
  font-size: 20px; /* タイトル文字の大きさ */
  padding: 5px; /* タイトル周りの余白 */
  text-align: center; /* タイトル中央寄せ */
  border-radius: 4px 4px 0px 0px; /* タイトル角丸 */
  position: absolute; /* 配置に関するもの(ここを動かす) */
  top: 0; /*上から(0px)に配置 */
  left: 0; /*左から(0px)に配置 */
  width: 100%; /*横幅最大幅 */
}

.box1-pink p {
  margin: 0; /* 文字の余白リセット */
  padding: 0; /* 文字の内側余白リセット*/
}

.c-button._shiny {
  display: block;
  position: relative;
  padding: 1em 1.5em;
  background-color: #28a745; /* 緑ベースに変更 */
  box-shadow: 0 3px 0 0 #1e7e34; /* 影も濃い緑に */
  border-radius: 4px;
  margin: 30px auto;
  font-weight: bold;
  font-size: 16px;
  max-width: 500px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: 300ms;
}

.c-button._shiny::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #b2f2bb; /* 光沢の緑系ハイライト */
  transition: 300ms;
  animation: shinyshiny 2.5s ease-in-out infinite;
}

.c-button._shiny:hover {
  text-decoration: none;
  color: #fff;
  box-shadow: none;
  -webkit-transform: translateY(3px);
}

@-webkit-keyframes shinyshiny {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}