/* TN9SL.css 解説付きバージョン（完全コメント付き） */

/* 本文の標準文字サイズとスマホでの自動拡大抑制 */
body {
  font-size: 16px; /* 基本文字サイズ */
  -webkit-text-size-adjust: 100%; /* モバイルSafariで文字が自動的に拡大されるのを防ぐ */
}

/* ボタン全体の配置と幅設定（スマホとPCで分岐） */
.button-container {
  width: 90%;            /* 画面幅の90%（スマホ向け） */
  max-width: 800px;      /* 最大幅700（それ以上は広がらない） */
  margin: 0 auto;        /* 上下0、左右は自動中央揃え */
  padding-left: 12px;    /* 左余白 */
  padding-right: 12px;   /* 右余白 */
}

/* PC表示時に幅を固定（スマホは上記が適用される） */
@media (min-width: 768px) {
  .button-container {
    width: 666px;        /* 幅固定（PC時） */
    max-width: 666px;
  }
}

/* 手動ボタン・秒数ボタン共通の基本スタイル */
.mode-button,
.time-button {
  font-size: 14px;           /* ボタン内の文字サイズ */
  padding: 6px 10px;         /* 上下6px、左右10pxの内側余白（文字の周囲） */
  width: 100%;               /* ボタンが親要素内でいっぱいに広がる */
  box-sizing: border-box;    /* paddingやborderを含めて幅100%とする */
  background-color: #f0f0f0; /* 初期の背景色（薄いグレー） */
  border: 1px solid #ccc;    /* 薄い灰色の境界線 */
  cursor: pointer;           /* マウスオーバー時にポインタが変化 */
}

/* 選択中のボタンのスタイル */
.mode-button.active,
.time-button.active {
  background-color: #ffa07a; /* オレンジ系の背景 */
  color: #fff;               /* 白文字 */
  font-weight: bold;         /* 太字 */
  border-color: #0066cc;     /* 濃い青の境界線 */
}

/* 秒数ボタンの配置と間隔設定 */
.button-container.seconds {
  display: flex;             /* 横並び配置 */
  flex-wrap: wrap;           /* 幅が足りない場合は改行 */
  justify-content: center;   /* 中央揃え */
  gap: 16px;                 /* ボタン間の余白（縦横両方） */
  margin: 10px auto;         /* 上下10px、左右自動中央 */
  padding: 0 12px;           /* 左右に12pxの余白 */
  width: inherit;            /* 親要素の幅を継承 */
}

/* 秒数ボタン個別のサイズ調整 */
.time-button {
  width: 60px;               /* 固定幅 */
  font-size: 13px;           /* 若干小さめの文字 */
  padding: 5px 6px;          /* 上下5px、左右6pxの内側余白 */
  box-sizing: border-box;
}

/* スマホ画面の調整（秒数ボタンの幅・間隔） */
@media (max-width: 767px) {
  .time-button {
    width: 64px;             /* わずかに広げる */
  }
  .button-container.seconds {
    gap: 12px;               /* ボタン間を少し詰める */
  }
}

/* サムネイル画像の最大サイズ調整 */
.thumbnail {
  object-fit: contain;       /* アスペクト比を保ったまま収まるように */
  max-width: 100%;           /* 親要素の幅に収める */
}

/* サムネイル下のID番号表示設定 */
.image-id {
  font-size: 12px;           /* 小さな文字サイズ */
  text-align: center;        /* 中央揃え */
  width: 100%;               /* 親要素幅いっぱいに使う（中央寄せを有効に） */
}

/* 区切り線 */
.divider {
  font-size: 16px;
}

/* ===============================
   帯テキスト (text-block)
=============================== */

/* 帯テキストの基本スタイル */
.text-block {
  line-height: 1.2;  /* 行間を制御（文字サイズの1.2倍） */
  flex-basis: 100%;          /* 幅100%を確保 */
  margin: 3px 0;             /* 上下に3pxの外側余白（行間） */
  font-weight: bold;         /* 太字 */
  border: none;              /* 枠線なし */
  padding: 2px 5px;          /* 上下2px、左右5pxの内側余白 */
  display: block;            /* ブロック要素（縦方向に並ぶ） */
  clear: both;               /* フロート解除（干渉を防ぐ） */
}

/* サイズ別帯テキスト（text-scXX） */
.text-block.text-sc100 { font-size: 100px !important; }
.text-block.text-sc95 { font-size: 95px !important; }
.text-block.text-sc90 { font-size: 90px !important; }
.text-block.text-sc85 { font-size: 85px !important; }
.text-block.text-sc80 { font-size: 80px !important; }
.text-block.text-sc77 { font-size: 77px !important; }
.text-block.text-sc75 { font-size: 75px !important; }
.text-block.text-sc70 { font-size: 70px !important; }
.text-block.text-sc66 { font-size: 66px !important; }
.text-block.text-sc65 { font-size: 65px !important; }
.text-block.text-sc60 { font-size: 60px !important; }
.text-block.text-sc55 { font-size: 55px !important; }
.text-block.text-sc50 { font-size: 50px !important; }
.text-block.text-sc48 { font-size: 48px !important; }
.text-block.text-sc45 { font-size: 45px !important; }
.text-block.text-sc44 { font-size: 44px !important; }
.text-block.text-sc40 { font-size: 40px !important; }
.text-block.text-sc39 { font-size: 39px !important; }
.text-block.text-sc36 { font-size: 36px !important; }
.text-block.text-sc35 { font-size: 35px !important; }
.text-block.text-sc33 { font-size: 33px !important; }
.text-block.text-sc30 { font-size: 30px !important; }
.text-block.text-sc29 { font-size: 29px !important; }
.text-block.text-sc28 { font-size: 28px !important; }
.text-block.text-sc27 { font-size: 27px !important; }
.text-block.text-sc26 { font-size: 26px !important; }
.text-block.text-sc25 { font-size: 25px !important; }
.text-block.text-sc24 { font-size: 24px !important; }
.text-block.text-sc23 { font-size: 23px !important; }
.text-block.text-sc22 { font-size: 22px !important; }
.text-block.text-sc21 { font-size: 21px !important; }
.text-block.text-sc20 { font-size: 20px !important; }
.text-block.text-sc19 { font-size: 19px !important; }
.text-block.text-sc18 { font-size: 18px !important; }
.text-block.text-sc17 { font-size: 17px !important; }
.text-block.text-sc16 { font-size: 16px !important; }
.text-block.text-sc15 { font-size: 15px !important; }
.text-block.text-sc14 { font-size: 14px !important; }
.text-block.text-sc13 { font-size: 13px !important; }
.text-block.text-sc12 { font-size: 12px !important; }
.text-block.text-sc11 { font-size: 11px !important; }
.text-block.text-sc10 { font-size: 10px !important; }
.text-block.text-sc9 { font-size: 9px !important; }
.text-block.text-sc8 { font-size: 8px !important; }
.text-block.text-sc7 { font-size: 7px !important; }
.text-block.text-sc6 { font-size: 6px !important; }
.text-block.text-sc5 { font-size: 5px !important; }