/* カード1枚。★売り物そのものの見た目。
 *
 * ★中身は4つ：外枠・根拠の表・結果の行・結果に捺す判子。
 *   どれもカードの中にしか出ないので、1つにまとめてある。
 * ★★判子（--font-brush）はヘッダーのロゴと同じ筆。
 *   画面全体が1つの銘でつながるように、書体を分けない。
 */

/* ---------------------------------------------------------------- カード */
.card {
  background: var(--ink2);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 14px;
  position: relative;   /* 判子を右上に置くため */
  /* ★★重なりの箱をここで閉じる。判子は z-index:-1 で本文の**下**に敷くが、
   *   閉じていないとカードの背景よりさらに下に潜って見えなくなる。 */
  isolation: isolate;
  overflow: hidden;     /* ★判子がカードの角から食み出さないように切る */
}
/* ★未購入のカードはまるごと押せる。中身が**そもそも届いていない**
 *   （サーバが落として返す）ので、ぼかしや目隠しは使わない。
 *   使うと「隠してあるだけ」に見えるし、実際にぼかしで隠す作りは
 *   開発者ツールで剥がせる＝支払いが形だけになる。 */
/* ★無料お試しで開けた1件。★札（「無料お試しで表示中」）とは別に、
 *   縁でも分かるようにしておく——一覧をスクロールしたときに探しやすい。 */
.card.peeked { border-color: var(--accent); }
/* ★開いた直後だけ光らせる（js/feed.js）。★消えても札は残るので、
 *   見逃しても「どれを開いたか」は分からなくならない。 */
.card.just { animation: card-just 2s ease-out; }
@keyframes card-just {
  0%   { box-shadow: 0 0 0 3px rgba(92,138,217,.55); }
  100% { box-shadow: 0 0 0 3px rgba(92,138,217,0); }
}
@media (prefers-reduced-motion: reduce) {
  .card.just { animation: none; }
}
.card.locked { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.card.locked:hover { border-color: var(--line2); }
.card.locked:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ★開いている理由の札。カードの**外に張り出して**右上に置く。
 *   中に入れると見出しの行を押し下げて、カードごとに高さが変わる。
 * ★「買ったから開いている」と「終わったから開いている」を区別する。
 *   区別が無いと、買った本人が**買ったことを確かめられない**。
 * ★色は使うが、塗りの青（決めの色）は使わない。
 *   これは状態の表示であって、次にやることではない。 */
/* ★★絶対配置をやめ、タイトルの横に並べた（2026-08-24）。
 *   右上は判子（.hanko）の場所になったので、張り出すと重なる。
 *   並べても行が伸びないよう、札の文字は小さいまま。 */
.card-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;       /* ★ここだけ錠剤型。札は札に見せる */
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  line-height: 1.6;
  white-space: nowrap;
  flex: none;                 /* ★縮ませない。縮むと札の中で文字が折れる */
}
/* ★★色は --badge-ok（--ok より暗い緑）。理由と数値は css/tokens.css。
 *   ★--ok を使わないこと。あれは通知のアイコンと共用で、
 *     暗くするとあちらが見えなくなる。 */
.card-badge.bought { background: var(--badge-ok); color: #fff; }
/* ★公開中は目立たせない。買った人の札より強いと、買う理由が薄れて見える。 */
.card-badge.free {
  background: var(--ink4); color: var(--t2);
  border: 1px solid var(--line);
}
/* 見本。★作り物だと一目で分かる必要があるので、ここだけは強く出す。
 *   実データに紛れて売り物に見えるのが、この画面でいちばんまずい。 */
.card-badge.demo { background: var(--ng); color: #fff; }
/* 締切間近・レース中。★「もう買えない」は**赤にしない**。
 *   失敗でも危険でもなく、ただ時間が過ぎただけ。赤で埋めると一覧が事故に見える。 */
.card-badge.closing,
.card-badge.racing {
  background: var(--ink4); color: var(--t2);
  border: 1px solid var(--line2);
}

/* 見出し：印＋名前＋札 …… 時刻 */
.c-hd { display: flex; align-items: center; gap: 0; }
.c-title { font-size: 14px; font-weight: 700; color: var(--t1); }
/* ★タグは囲まない。丸い箱を並べるとカードが賑やかになる。
 *   色と大きさを落とすだけで「分類」だと伝わる。 */
.c-tags { font-size: 11px; color: var(--t3); margin-left: 8px; }
.c-time { margin-left: auto; font-size: 11px; color: var(--t3); }
/* ★家族で色分け（2026-09-13）。荒れ＝ブランド青（--accent）／イン逃げ＝青緑（--nige）。
 *   ★トンマナ：緑（的中）・暖色（オッズ）は避け、寒色2色で「荒れ」と「逃げ」を分ける。
 *   ★カード内だけ効かせる（チップ・help は currentColor のまま。うるさくしない）。
 *   ★イン逃げを荒れと見間違える対策。 */
.c-hd .ic-arare { color: var(--accent); }
.c-hd .ic-nige  { color: var(--nige); }

/* ★★試験中の断り（inc/card.php）。**黄色**。
 *
 * ★赤にしない。赤は「間違い・失敗」の色で、ここはそうではない——
 *   落ち着いて読んでほしい断りなので黄色（注意）。
 * ★★自慢の「お読みください」（css/brag.css の .brag-warn）と**同じ作り・同じ色**。
 *   断りの見た目が画面ごとに違うと、どれが断りなのか覚えられない。
 *   ★帯の上に白で置く理由（黄色い字を暗い地に直接置かない）は
 *     css/tokens.css の --warn-line に実測付きで書いてある。
 * ★地を塗ること。判子（.hanko）は z-index:-1 で本文の下に敷かれているので、
 *   塗らないと筆の線が文字に重なる。 */
.c-trial {
  margin-top: 10px;
  overflow: hidden;             /* ★帯が角からはみ出さないように外側で切る */
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  /* ★★地は**透かす**（2026-08-28）。判子（.hanko）は z-index:-1 で
   *   本文の下に敷いてあるので、ここを塗り潰すと**判子が隠れる**。
   *   ★判子は一覧をめくったときに形と色だけで結果を拾うためのもの。
   *     この断りのために消えるのは、順序が逆。
   * ★★下の1行は**古いブラウザ向けの控え**。color-mix を知らない環境では
   *   こちらが残って、透けないかわりに**必ず読める**（読めないより良い）。
   *   ★順序を入れ替えないこと。後ろに書いたほうが勝つ決まりなので、
   *     控えを後ろに置くと新しいブラウザでも透けなくなる。 */
  background: var(--warn-bg);
  background: color-mix(in srgb, var(--warn-bg) 32%, transparent);
  /* ★カードの中の断りなので、自慢のもの（13px）より1段小さくする。
   *   ★これ以上小さくしない。読み飛ばせる見た目にした時点で断りとして働かない。 */
  font-size: 12px;
}
/* ★見出しの帯。**塗り潰したときの姿**をここに書く（＝古いブラウザ向けの控え）。
 *   透かした姿は下の @supports に置いてある。 */
.c-trial b {
  display: block;
  padding: 5px 10px;
  background: var(--warn-line);
  color: var(--warn-on);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
/* ★★帯も透かす（2026-08-28）。★地と字を**必ず一緒に**切り替える。
 *
 * ■ ★なぜ @supports で囲むか
 *   透かした帯の上では字の色を変える（明るいテーマで白が沈むため）。
 *   ★もし色だけ先に変わって地が塗り潰しのままだと、
 *     **濃い金の上に濃い字**になって明暗差が2.1倍まで落ちる（読めない）。
 *   ★∴ 2行を別々に書いて片方だけ効く状態を作らない。
 *     color-mix を使えるときだけ、地と字を**同時に**切り替える。 */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .c-trial b {
    background: color-mix(in srgb, var(--warn-line) 45%, transparent);
    color: var(--warn-on-thin);
  }
}
.c-trial span {
  display: block;
  padding: 8px 10px 9px;
  line-height: 1.7;
  /* ★副文の色にしない。読ませる文なので主文と同じ。
   * ★★地を透かしたので、この字は**判子の上に直接載る**ことがある。
   *   ★それは表や配当と同じ条件で、判子の濃さは
   *     「上に載る本文の明暗差 4.67 倍」を保つように決めてある
   *     （下の .hanko.t1 の説明）。∴ ここも同じ条件で読める。 */
  color: var(--t1);
}

/* ★見出しと場名の間は広めに取る。詰まっているとプラン名とレース名が
 *   ひと固まりに見えて、どこからが本文か分からない。 */
.c-place { display: flex; align-items: baseline; margin-top: 11px; }
.c-venue { font-size: 17px; font-weight: 600; color: var(--t1); }
.c-dl { font-size: 12px; color: var(--t2); margin-left: 10px; }

/* ★買い目は表に入れない。買うものと、そう判断した理由は別のもの。
 *   同じ枠に混ぜると「280.6倍」が摘要に見える。
 *   等幅で並べれば組とオッズは勝手に揃うので、これ以上の飾りは要らない。 */
.c-combos { margin-top: 8px; }
.c-combo {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--t1);
  padding: 1px 0;
  font-variant-numeric: tabular-nums;
}
.c-note { margin-top: 8px; font-size: 12px; color: var(--t2); line-height: 1.45; }

/* 錠。★何が入っているかだけは見せる。中身が分からないと買う判断ができないし、
 *   中身を送ると売り物にならない。その境目。 */
.lock {
  margin-top: 10px;
  border: 1px dashed var(--line2);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.lock-what { font-size: 12px; color: var(--t2); }
/* もう売っていない回。★枠を実線に落として、押せる見た目をやめる。
 *   破線＋アクセント色のままだと「押せば買える」と読める。 */
.lock.shut { border-style: solid; border-color: var(--edge); }
.lock-shut {
  margin-top: 6px;
  font-size: 12px; color: var(--t3);
}
/* 無料お試しのボタン。★塗り（決めの色）は使わない。
 *   画面の「次にやること」はワンデーパスの側で、こちらは**お試し**。
 *   同じ強さで並べると、どちらが本筋なのか分からなくなる。 */
.lock-form { margin-top: 10px; }
/* ★何を使うのかを押す前に言う。押してから知ると不満になる。 */
.lock-note { margin-top: 8px; font-size: 11px; color: var(--t3); }

/* ---------------------------------------------------------------- 表 */
/* ★値の列を左で揃えるのが目的。文章に混ぜると桁が揃わず、並べても比較できない。
 *   摘要は「その値をどう読むか」を置く場所で、無い行は空でよい。 */
.tbl { margin-top: 10px; width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 10px; font-weight: 400; color: var(--t3);
  text-align: left; padding: 4px 0; border-bottom: 1px solid var(--edge);
}
.tbl td { padding: 6px 0; vertical-align: top; border-top: 1px solid rgba(46,49,54,.5); }
.tbl tr:first-child td { border-top: none; }
/* ★★項目は96px要る。折れると、表なのに行の高さが揃わない。
 *   ★72px … 「物理の荒れ度」が折れる
 *   ★86px … 「1号艇より上の艇」が折れる（2026-08-30に見つけた）。
 *     12pxで「1」が約6.7px＋全角7字で 90.7px。**86pxでは4pxだけ足りない**。
 *     「荒れ度（地力）」は全角7字ぶんの84pxで、86pxにぎりぎり収まっていた
 *     ——ので、長らく気づけなかった。
 *   ★96px … 折れなくなるが、**いちばん長い項目と値がくっついて見える**。
 *     90.7pxの項目に対して隙間が5pxしか残らず、2列あることが目で分からない。
 *   ★★104px。隙間が13px残る。★増やしたぶんは値（.v）から取る。
 *     摘要から取ると、あちらは1字だけ次の行に落ちて見た目が悪い。 */
.tbl .k { width: 104px; font-size: 12px; color: var(--t2); }
.tbl .v {
  /* ★★88px。ここは**いちばん余っている列**なので、項目（.k）を広げるぶんは
   *   ここから返す（2026-08-30に104px→96px→88pxと2度削った）。
   *   ★実測の最大は
   *       「2・3着33%」        76px  ← 下の keep-all で1段ずつに折ったあと
   *       「6>1>5>3>4>2」      約80px（">"は .sep で10pxに落としてある）
   *     なので88pxで**8pxの余り**がある。これ以上は削らないこと。
   *   ★摘要（.m）からは取らない。あちらは
   *     「総合。高いほど荒れやすい」が約134pxで、139pxの今がぎりぎり1行。
   *     2px削るだけで最後の1字が次の行に落ちる。 */
  width: 88px; font-size: 14px; font-weight: 600; color: var(--t1);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  /* ★★区切りでだけ折る（2026-08-27に足した）。
   *
   * ■ なぜ要るか
   *   荒れ予報に「1号艇の行方」が入った:
   *       1着35% / 2・3着33% / 着外32%
   *   ★等幅14pxで **235px**。列は88pxなので必ず折り返す。
   *   ★★日本語は既定で**どこでも折れる**ので、放っておくと
   *     「2・」「3着」のように**数字の途中で割れる**。
   *     35% と 33% が別々の行に散って、どの着の値か読めなくなる。
   * ■ ★keep-all にすると、折れるのは**空白のところだけ**。
   *   実測で1段の最大は「2・3着33%」の76px（区切りを足しても93px）なので、
   *   88pxの列に**1段ずつきれいに収まる**:
   *       1着35% /
   *       2・3着33% /
   *       着外32%
   * ★★値そのものは触らない。エンジンが送った文字列のまま出す
   *   （分けて出すことも許されているが、こちらで組み直すと
   *     向こうが形を変えた日に食い違う。折り方だけをこちらで決める）。 */
  word-break: keep-all;
  /* ★それでも入らない値は最後に折る。溢れて隣の列に被るよりはよい。 */
  overflow-wrap: break-word;
}
/* ★★「 / 」で区切られていた値は**1つずつ行にする**（inc/card.php の render_value）。
 *   ★区切り記号は出さない。行が分かれていれば、区切りは要らない。
 *   ★行間は詰める。3つで1つの値なので、離すと別々の項目に見える。 */
.tbl .v .v-line { display: block; line-height: 1.5; }
.tbl .v .v-line + .v-line { margin-top: 1px; }
.tbl .m { font-size: 11px; color: var(--t3); line-height: 1.35; }
/* ★「6>1>5>3>4>2」の区切りだけ小さく淡く。読みたいのは艇番の並びで、">" は
 *   順序を示す記号にすぎない。同じ太さ・同じ色だと数字が飛び飛びに見える。 */
.sep { font-size: 10px; font-weight: 400; color: var(--t3); }

/* ---------------------------------------------------------------- 結果 */
/* ★当たり・外れ・待ちの3つとも同じ枠を持たせ、**判定語の色だけ**を変える。
 *   外れを赤で塗ると一覧が失敗の羅列に見えるので、外れは無彩色のまま。
 * ★枠は待っている間も出しておく。後から要素が生えるとカードの丈が変わって一覧が跳ねる。 */
.res {
  margin-top: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  padding: 8px 10px;
  display: flex; align-items: center; gap: 10px;
}
.res.done { background: rgba(43,45,50,.55); border-color: var(--ink4); }
.res.wait { justify-content: center; }
.res-wait { font-size: 12px; color: var(--t3); }

/* ★★組と配当。**中央に寄せて、あいだを大きく空ける**。
 *   以前は「3-2-6 23,540円」を1つの文字列で左に置いていたので、
 *   組と金額が地続きの1語に見えて、いちばん知りたい配当が拾えなかった。 */
.res-line {
  flex: 1;
  display: flex; align-items: baseline; justify-content: center;
  gap: 22px;                 /* ★詰めない。ここが空いているから2つの値だと分かる */
}
.res-combo {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 15px; color: var(--t2);
  font-variant-numeric: tabular-nums;
}
/* ★★返還された艇（フライング等）。★小さく淡く——着順の数字と競わせない。
 *   ★組の直後に置く。配当の前に「なぜ配当が下がったか」の手がかりになる。 */
.res-refund {
  margin-left: 6px;
  font-size: 11px;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ★配当がこの枠の主役。組より一段大きく、明るく。 */
.res-yen {
  font-size: 19px; font-weight: 700; color: var(--t1);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
/* ★★配当の大きさで色を変える。**桁を読ませない**ための印。
 *   「9,800」と「23,540」は等幅で揃えても一瞬では見分けられず、
 *   一覧をめくったときに大きい配当を取りこぼす。
 * ★★境目は**判定語の段とそろえてある**（2026-08-25）。
 *   小荒れ＝黄橙／中荒れ＝赤橙／大荒れ＝赤。同じカードの中で
 *   言葉と色が1対1で並ぶので、どちらを見ても同じことが分かる。
 *   境目の数字は inc/card.php の YEN_T1 / YEN_T2 / YEN_T3。
 * ★荒れず（25倍未満）には色を付けない。**色が付いている＝何か起きた**、
 *   と読ませる（段の緑と同じ考え方）。
 * ★★名前は y1/y2/y3。t1/t2/t3 にしないこと——あちらは判定語の段（緑）で、
 *   同じ名前で違う色になる。名前がぶつかると片方を直した日にもう片方が動く。
 * ★★上ほど太くする。色だけで順序を作らない——
 *   同じ太さで色だけ違うと、2つが同じ重みに見えて順序が読めない。 */
.res-yen.y1 { color: var(--yen1); font-weight: 600; }
.res-yen.y2 { color: var(--yen2); font-weight: 600; }
.res-yen.y3 { color: var(--yen3); }
/* ★★10万円（1000倍）以上は虹。**滅多に出ない**から成立する見せ方で、
 *   よく出る額に使うと、ただの読みにくい文字になる。
 * ★色を落としたときの受け皿を先に置く。background-clip が効かない環境では
 *   透明な文字＝**配当が消える**ので、赤のまま出す（下の @supports で上書き）。 */
.res-yen.huge { color: var(--yen3); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .res-yen.huge {
    /* ★この虹はここ1か所だけの飾り。6色を tokens.css に置くと、
     *   値の置き場が**この1行のための6色**で膨らむ。 */
    background: linear-gradient(95deg, /* raw-ok */
      #FF5F6D 0%, #FFC371 22%, #4BE07A 44%, #37C6E0 64%, #9B7BFF 84%, #FF5F9E 100%); /* raw-ok */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.res-rest { font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 判子 */
/* ★★判定語はカードの右上に**捺す**。文字を読む前に、形と色で分かるようにする。
 *   結果の枠の中で小さく置いていたときは、一覧をめくっても
 *   「この回はどうだったのか」が拾えなかった。
 * ★本文の**下**に敷く（z-index:-1）。上に載せると表と配当が読めなくなる。
 *   .card 側で isolation:isolate を掛けてあるので、カードの背景より下には潜らない。
 * ★押せない・選べない。飾りではなく値だが、触る対象ではない。 */
/* ★★判子のぶんの丈をカードに確保する。確保しないと、行数の少ないカード
 *   （表が1行だけの回）で判子の下辺が切れて、枠が欠けた不具合に見える。
 *   :has が効かない古い環境では、切れるだけで中身は読める（壊れない）。 */
.card:has(.hanko) { min-height: 202px; }
.hanko {
  position: absolute;
  top: 4px; right: 4px;
  width: 190px; height: 190px;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  display: flex; align-items: center; justify-content: center;
  border: 6px solid currentColor;
  border-radius: 18px;        /* ★角印。丸だと会社の実印に見えて、判定語が入らない */
  transform: rotate(-11deg);  /* ★手で捺したぶんの傾き。真っ直ぐだと印刷に見える */
  opacity: .24;               /* ★薄く。本文の下にあっても字が透けると読めなくなる */
  color: var(--t2);           /* 既定（t0＝何も起きなかった回） */
}
.hanko-w {
  /* ★縦書き。判子は縦に彫るもので、横書きだとラベルに見える。 */
  writing-mode: vertical-rl;
  /* ★ヘッダーのロゴと**同じ書体**（css/tokens.css の --font-brush）。
   *   書体名をここに書き写すと、片方だけ直した日に別の筆になる。 */
  font-family: var(--font-brush);
  /* ★42px。いちばん長い「イン逃げ」（4字）が枠の内寸178pxに収まる上限。
   *   大きくすると4字の判子だけ下が欠ける。 */
  font-size: 42px;
  line-height: 1.02;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* ★段階は色の濃さで示す。t0（荒れず）は色を付けない
 *   ——色が付いている＝何か起きた、と読ませる。
 * ★判子と、説明に出る色見本（.res-head）で**同じ1本の決まり**を使う。
 *   別々に書くと、色を変えた日に説明だけ古い色のまま残る。 */
.res-head { font-size: 14px; font-weight: 400; color: var(--t2); }
.res-head.t1, .hanko.t1 { color: var(--rough1); }
.res-head.t2, .hanko.t2 { color: var(--rough2); }
.res-head.t3, .hanko.t3 { color: var(--rough3); }
.res-head.t4, .hanko.t4 { color: var(--rough4); }
.res-head.t5, .hanko.t5 { color: var(--rough5); }
/* ★当たり（大荒れ）だけ太字／濃く。同系色の濃淡だけだと、一覧を俯瞰したときに
 *   **どれが当たりか拾えない**。色に頼らず、太さでもう1本の軸を足す。 */
.res-head.hit { font-weight: 700; }
/* ★★色の付いた段（小・中・大）は濃く捺す（2026-08-25）。
 *   判子は本文の下（z-index:-1）にあるので薄くしてあるが、.24 では
 *   成績の棒と**同じ色を使っているのに別の色に見えて**いた。
 *   薄めるほど地（--ink2）に寄るので、彩度が抜けて灰色に近づくため。
 * ★★荒れず・飛び（t0）は**そのまま .24**。あちらは「何も起きなかった」印で、
 *   濃くすると起きた回と同じ強さで目に入る。色が付いている＝何か起きた、を守る。
 * ★上げすぎない。判子の上には表と配当が載る。読めなくなったら本末転倒で、
 *   その1点だけは opacity で決まる。 */
/* ★★段ごとに濃さを上げる（2026-08-27）。
 *   ★色は「荒れ度が上がるほど濃い緑」にしたので、**そのままだと上の段ほど
 *     地に沈む**（暗い地の上では濃い色ほど地に近い）。判子は1件ずつ見るもので
 *     位置の手がかりが無いから、沈むと段が読めない。
 *   ★∴ 色で濃くしたぶんを**濃さで押し返す**。実測（カード #1D1F23 の上）:
 *       小 2.32 → 中 2.53 → 大 2.91 → 激 3.19 倍。ちゃんと上がる。
 *   ★★濃さを上げても字は読める。**濃い緑は重ねても暗いまま**なので、
 *     判子の上に載る本文の明暗差は 4.67 倍を保っている（4.5 が下限）。
 *     ★明るい色で同じことをすると字が読めなくなる。濃い色だから許される。 */
.hanko.t1 { opacity: .30; }
.hanko.t2 { opacity: .40; }
/* ★当たった回（大荒れ・イン逃げ）はいちばん濃く。一覧を俯瞰したときに、
 *   まず目に入るのが当たりであってほしい。 */
.hanko.hit { opacity: .62; }
/* ★激荒れ・極荒れ。★色がいちばん濃い段なので、濃さもいちばん上げる
 *   （理由と実測は上の .hanko.t1 に書いてある）。 */
.hanko.t4 { opacity: .88; }
.hanko.t5 { opacity: .94; }