/*_______________________________________________________________________________________________________________
 * |                                                                                                             |
 * |  ████████╗  ██████╗   ██████╗  ██╗      ███╗   ██╗ ███████╗ ███████╗ ████████╗        ███╗   ███╗ ██████╗   |
 * |  ╚══██╔══╝ ██╔═══██╗ ██╔═══██╗ ██║      ████╗  ██║ ██╔════╝ ██╔════╝ ╚══██╔══╝        ████╗ ████║ ██╔══██╗  |
 * |     ██║    ██║   ██║ ██║   ██║ ██║      ██╔██╗ ██║ █████╗   ███████╗    ██║    █████╗ ██╔████╔██║ ██████╔╝  |
 * |     ██║    ██║   ██║ ██║   ██║ ██║      ██║╚██╗██║ ██╔══╝   ╚════██║    ██║    ╚════╝ ██║╚██╔╝██║ ██╔═══╝   |
 * |     ██║    ╚██████╔╝ ╚██████╔╝ ███████╗ ██║ ╚████║ ███████╗ ███████║    ██║           ██║ ╚═╝ ██║ ██║       |
 * |     ╚═╝     ╚═════╝   ╚═════╝  ╚══════╝ ╚═╝  ╚═══╝ ╚══════╝ ╚══════╝    ╚═╝           ╚═╝     ╚═╝ ╚═╝       |
 * |                                                                                                             |
 * |    ███╗   ███╗  █████╗  ███╗   ███╗ ███████╗ ██████╗  ██╗ ███╗   ██╗      ██████╗  ██████╗  ███╗   ███╗     |
 * |    ████╗ ████║ ██╔══██╗ ████╗ ████║ ██╔════╝ ██╔══██╗ ██║ ████╗  ██║     ██╔════╝ ██╔═══██╗ ████╗ ████║     |
 * |    ██╔████╔██║ ███████║ ██╔████╔██║ █████╗   ██████╔╝ ██║ ██╔██╗ ██║     ██║      ██║   ██║ ██╔████╔██║     |
 * |    ██║╚██╔╝██║ ██╔══██║ ██║╚██╔╝██║ ██╔══╝   ██╔═══╝  ██║ ██║╚██╗██║     ██║      ██║   ██║ ██║╚██╔╝██║     |
 * |    ██║ ╚═╝ ██║ ██║  ██║ ██║ ╚═╝ ██║ ███████╗ ██║      ██║ ██║ ╚████║ ██╗ ╚██████╗ ╚██████╔╝ ██║ ╚═╝ ██║     |
 * |    ╚═╝     ╚═╝ ╚═╝  ╚═╝ ╚═╝     ╚═╝ ╚══════╝ ╚═╝      ╚═╝ ╚═╝  ╚═══╝ ╚═╝  ╚═════╝  ╚═════╝  ╚═╝     ╚═╝     |
 * |                                                                                                             |
 * |                                                                                                             |
 * |                                 (C) 2021- mamepin.com - ALL RIGHTS RESERVED                                 |
 * |                                         Unauthorized use prohibited                                         |
 * |_____________________________________________________________________________________________________________|
 */

* ===============================
   ページの全体的なデザイン部分
   =============================== */

h2 {
  margin-top: 0;
  font-size: 18px;
  color: #333;
}

main {
  width: 100vw !important; /* 制限を解除 */
  max-width: none !important; /* 制限を解除 */
  font-family: Arial, sans-serif;
  background: #f9f9f9;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
}

/* ===============================
   検索フォーム前に記載の説明文
   =============================== */
.page-description {
  max-width: 1024px;
  margin: 0 auto;
  
  background: linear-gradient(135deg, #fdfdfd, #f5f9ff);
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  font-size: 15px;
  line-height: 1.7;
  color: #333;


}
.page-description p {
  margin: 0;
}

.page-description p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
}
.page-description p::before {
  color: #0078d4; /* アイコン色を統一 */
}

@media (max-width: 600px) {
  .page-description p {
    padding-left: 1em;   /* 二行目以降のための余白 */
    text-indent: -1.5em;   /* 一行目だけ左に戻す → 見た目はそのまま */
    line-height: 1.6;
    margin: 0 0 8px;
  }
}

/* ===============================
   検索フォームのリセットボタン
   =============================== */
.reset-btn {
  float: right;             /* 見出しの右側に寄せる */
  font-size: 12px;
  padding: 4px 8px;
  margin-left: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #eee;
  cursor: pointer;
  transition: background 0.2s ease;
}
.reset-btn:hover {
  background: #ddd;
}

/* ===============================
   検索フォーム
   =============================== */
/* 検索フォーム、絵文字一覧 */
.search-container,
.tnm-emoji-wrapper {
  max-width: 1024px;
  margin: 0 auto;

  background: #fff;
  padding: 25px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.search-container {
	margin-top: 1em;
}

/* 検索フォーム全体 */
.search-container {
  background: #fff;
  padding: 25px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* キーワード入力 */
.keyword-row {
  margin-bottom: 15px;
}
.keyword-row label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
  color: #555;
}
.keyword-row input[type="text"] {
  width: 300px;
  max-width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* PC用（幅600px以上） */
@media (min-width: 600px) {
  .keyword-row {
    display: flex;          /* 横並びにする */
    align-items: center;    /* 縦位置を揃える */
    margin-bottom: 12px;
  }

  .keyword-row label {
    display: inline-block;  /* blockを解除 */
    margin-right: 8px;      /* ラベルと入力の間に余白 */
    margin-bottom: 0;       /* 下余白を消す */
    font-weight: bold;
    color: #555;
  }

  .keyword-row input[type="text"] {
    flex: 1;                /* 残り幅いっぱいに広げる */
    max-width: 400px;       /* PCでは適度な幅に制限 */
  }
}


/* フィルター群（絵文字グループ・肌の色・性別） */
.filter-container {
  display: flex;          /* PCでは横並び */
  gap: 12px;              /* 項目間の余白 */
  flex-wrap: wrap;        /* 幅が足りない時は折り返す */
}

.select-row {
  display: flex;
  align-items: center;
}
.select-row label {
  margin-right: 6px;
  font-weight: bold;
  font-size:14px;
  color: #555;
}
.select-row select {
  min-width: 120px;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  background-color: #f5f5f5;
}

/* スマホ用（幅600px以下） */
@media (max-width: 600px) {
  .keyword-row input[type="text"] {
    width: 100%;
  }

  .filter-container {
    display: block; /* 縦並び */
  }

  .select-row {
    display: grid;
    grid-template-columns: 110px 1ch 1fr; /* 左:ラベル固定 / 中:コロン1文字 / 右:セレクト残り幅 */
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
  }

  .select-row .label {
    font-weight: bold;
    font-size: 14px;
    color: #555;
    text-align: left;
    white-space: nowrap; /* ラベルの折返し防止（必要なら外してOK） */
  }

  .select-row .colon {
    text-align: center; /* コロンを中央に */
  }

  .select-row select {
    width: 100%;
    min-width: 0;        /* grid内での縮小を許可 */
    box-sizing: border-box;
    padding: 6px;
    font-size: 14px;
    background-color: #f5f5f5;
  }
}

#code-format-select {
  max-width: 100%;       /* セル幅を超えないようにする */
  width: auto;           /* 内容に合わせる */
  box-sizing: border-box;
  font-size: 13px;
  padding: 4px 6px;
}



/* ===============================
   基本テキスト・フォント設定
   =============================== */
.emoji-text {
  font-family: "Noto Color Emoji", sans-serif; /* 絵文字専用フォントを優先 */
  font-size: 2rem; /* 絵文字のサイズ */
  line-height: 1.2; /* 行間を少し詰める */
}

.big-text {
  font-weight: bold; /* 太字 */
  font-size: 3rem;   /* 絵文字を大きく表示 */
}

.center-vertical {
  /*margin-top: -10px !important;*/
  position: relative;
  top: -10px; /* こちらなら確実にずれる */
}

/* ===============================
   コピー通知ポップアップ
   =============================== */
.copy-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #333;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  font-size: 1.1rem;
  font-weight: bold;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
}
.copy-notice.show { opacity: 1; }
.copy-notice-title { margin-bottom: 8px; }
.copy-notice-content.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ===============================
   テーブル全体のスタイル
   =============================== */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
th, td {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
}
.emoji-cell {
  text-align: center;
  vertical-align: middle;
}

/* ===============================
   絵文字表示エリア
   =============================== */
.emoji {
  /*display: inline-flex;*/       /* テーブル枠と相性良い */
  align-items: center;        /* 縦方向中央 */
  justify-content: center;    /* 横方向中央 */
  gap: 12px;                  /* 絵文字とボタンの間隔 */
  font-size: 250%;            /* 全体サイズ調整 */
}
.emoji .copy-btn {
  padding: 4px 8px;
}
img.icon {
  width: 48px;
  height: 48px;
  margin-left:10px; /* 通常の絵文字と位置を揃える */
  margin-right:10px; /* 通常の絵文字と位置を揃える */
}

/* ===============================
   ボタン関連
   =============================== */
.copy-btn {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #eee;
  cursor: pointer;
}
.copy-btn.small {
  margin-left: 6px;
  padding: 2px 4px;
  font-size: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.button-wrapper {
  text-align: center;
}

/* スマホ用（幅600px以下） */
@media (max-width: 600px) {
  .copy-btn {
    font-size: 10px;
  }
}

@media (max-width: 600px) {
  .emoji-copy {
    display: block;       /* ボタンをブロック要素にする */
    margin: 0 auto;
    margin-top: 12px;      /* 上に余白を追加 */
  }
}


/* ===============================
   絵文字テーブルラッパー
   =============================== */
.tnm-emoji-wrapper {
  max-width: 1024px;
  margin: 0 auto;
}
.emoji-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.emoji-table th, .emoji-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}
.emoji-table th {
  /*background-color: #f2f2f2;*/
  background-color: #e6f0fa;
  font-weight: bold;
}
.emoji-table td.emoji {
  font-size: 24px;
}

/* スマホ用調整 */
@media (max-width: 600px) {
  .tnm-emoji-wrapper {
    padding: 10px;
  }
  .emoji-table td.emoji {
    font-size: 11px;   /* 少し小さめに */
  }
  .emoji-table th, .emoji-table td {
    padding: 6px;      /* セルの余白も少し減らす */
    font-size: 11px;   /* テキスト部分も縮小 */
  }
}


/* ===============================
   ショートネーム表示
   =============================== */
.shortname {
  flex-direction: column;
  font-size: 14px;
}
.shortname span.en {
  color: #666;
  font-size: 12px;
}

/* ===============================
   コード表示
   =============================== */

.html-code {
  font-family: monospace;
  font-size: 13px;
  color: #444;
  line-height: 1.4; /* ←追加。1.4〜1.6くらいが見やすい */
  white-space: normal; /* 折り返しを許可 */
  word-break: break-word; /* 長いコードも折り返す */
}

/* ===============================
   検索結果が0件の時のメッセージ用
   =============================== */
.emoji-no-results th,
.emoji-no-results td {
  border: none;         /* 枠線なし */
  padding: 2px 6px;
  text-align: left;
  font-weight: normal;
  white-space: nowrap;  /* 改行せず揃える */
}


.emoji-no-results {
  margin-left: 1em;
  border-collapse: collapse;
  width: auto;          /* 横幅を必要最小限に */
}
/* ===============================
   ページ最後の補足
   =============================== */
.page-footer-note {
  margin-top: 25px;
  margin-right: 25px;
}