/* 顔文字検索ページ(ランダム検索)のスタイル */


/* ナビリンクの「顔文字検索」を太字にする (PC版のみ) */
@media (min-width: 769px) {
   .nav_item.kaomoji_search {
      font-weight: bold;
   }
}


/* 検索結果 (親要素) */
div.results {
    width: 100%;
    margin-top: 1.5rem;
    height: auto;
}

div.results p.notice {
   color: #666;
   text-align: center;
   font-weight: bold;
}


/* 検索結果の表示リスト */
div.results ul.kaomoji_lists {
}


/* 検索結果の表示リスト */
div.results ul.kaomoji_lists li.kaomoji_list {
   color: #666;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center; /* 垂直に中央揃え */
   padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 10px;
   padding-right: 10px;
   border-left: 3px dashed #ddd;
   border-bottom: 1px solid #aaa;
   margin-top: 1.0rem;
}

/* 検索結果の表示リスト(マウスホバー) */
div.results ul.kaomoji_lists li.kaomoji_list:hover {
   color: #555;
   border-left: 3px solid #555;
   border-bottom: 1px solid white;
   background-color: #ddfcdc;
   background: -webkit-repeating-linear-gradient(-45deg, #eee, #eee 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
   background: repeating-linear-gradient(-45deg, #eee, #eee 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
   font-weight: bold;
}


/* 顔文字テキスト */
div.results ul.kaomoji_lists li.kaomoji_list .kaomoji_text {
   width: 78%;
}


/* JSアニメーション用クラス (顔文字コピー) */
.copy_text_copying {
   font-size: 15px;
   font-weight: bold;
   padding-left: 0.8rem;
   padding-right: 0.8rem;
   background-color: #555;
   border-radius: 3px;
   align-self: flex-end; /* copy_textだけ下端に揃える */
}


/* 「コピー！」テキスト */
div.results ul.kaomoji_lists li.kaomoji_list .copy_text {
   font-size: 15px;
   align-self: flex-end; /* copy_textだけ下端に揃える */
   background-color: #777;
   border-radius: 3px;
}

/* 「コピー！」テキスト (ホバー時) */
div.results ul.kaomoji_lists li.kaomoji_list .copy_text:hover {
   font-weight: bold;
   background-color: #555;
}

/* 画面サイズに応じてフォントの大きさを変える */
@media (max-width: 1440px) {
   /* JSアニメーション用クラス (顔文字コピー) */
   .copy_text_copying {
      font-size: 14px;
   }

   div.results ul.kaomoji_lists li.kaomoji_list .copy_text {
      font-size: 14px;
   }
}


@media (max-width: 1024px) {
   .copy_text_copying {
      font-size: 13px;
   }

   div.results ul.kaomoji_lists li.kaomoji_list .copy_text {
      font-size: 13px;
   }
}

@media (max-width: 768px) {
   .copy_text_copying {
      font-size: 12px;
   }

   div.results ul.kaomoji_lists li.kaomoji_list .copy_text {
      font-size: 12px;
      padding: 3px;
   }
}



/* 検索結果の表示リスト (タグリスト) */
div.results ul.kaomoji_lists p.tag_lists {
   margin-top: 0.3rem;
}


/* 検索結果の表示リスト (タグ) */
div.results ul.kaomoji_lists p.tag_lists span.tag_list {
   display: inline-flex;
   /*border: 1px dotted #333;*/ /* 太さ、スタイル、色を指定 */
   border-radius: 0.3rem; /* 角を丸くする半径 */
}

/* 検索結果の表示リスト (親タグ) */
div.results ul.kaomoji_lists p.tag_lists span.tag_list.parent_tag {
   /*background-color: #555;*/
   border: 1px solid #777;
}

/* 検索結果の表示リスト (親タグのホバー時) */
div.results ul.kaomoji_lists p.tag_lists span.tag_list.parent_tag:hover {
   color: #fff;
   border: 1px solid #555;
   background-color: #555;
}

/* 検索結果の表示リスト (親タグ / スマホ版) */
@media (max-width: 768px) {
   div.results ul.kaomoji_lists p.tag_lists span.tag_list.parent_tag {
      padding: 3px;
   }

   div.results ul.kaomoji_lists p.tag_lists span.tag_list.parent_tag a {
      font-size: 1.0rem;
   }
}


/* 検索結果の表示リスト (子タグ) */
div.results ul.kaomoji_lists p.tag_lists span.tag_list.child_tag {
   /*background-color: #8a9ddb;*/
   border: 1px solid #777;
}

/* 検索結果の表示リスト (子タグのホバー時) */
div.results ul.kaomoji_lists p.tag_lists span.tag_list.child_tag:hover {
   /*background-color: #8a9ddb;*/
   color: #fff;
   border: 1px solid #555;
   background-color: #555;
}


/* 検索結果の表示リスト (子タグ / スマホ版) */
@media (max-width: 768px) {
   div.results ul.kaomoji_lists p.tag_lists span.tag_list.child_tag {
      padding: 3px;
   }

   div.results ul.kaomoji_lists p.tag_lists span.tag_list.child_tag a {
      font-size: 1.0rem;
   }
}



/* 検索結果の表示リスト (タグのアンカー) */
div.results ul.kaomoji_lists p.tag_lists span.tag_list a {
   font-size: 0.9rem;
   padding: 0 0.3rem;
   padding-top: 1px;
   text-decoration: none;
}


div.results ul.kaomoji_lists p.tag_lists span.tag_list.parent_tag a {
   color: #777;
}

div.results ul.kaomoji_lists p.tag_lists span.tag_list.parent_tag a:hover {
   color: #fff;
}

div.results ul.kaomoji_lists p.tag_lists span.tag_list.child_tag a {
   color: #777;
}

div.results ul.kaomoji_lists p.tag_lists span.tag_list.child_tag a:hover {
   color: #fff;
}