/* 顔文字検索ページのベースレイアウトのスタイル */



/* 顔文字検索タググラウンドのコンテナ */
nav.tags {
   height: auto;
   width: auto;
}


/********** 親タグ検索 **********/
/* 親タグのコンテナのスタイル */
nav.tags div.parent_tags {
   /*border: solid 1px gray;*/
   min-width: 300px; /* コンテナの最小幅を100に設定してリサイズを許可 */
}


/* 親タグのコンテナのスタイル */
nav.tags div.parent_tags {
   min-width: 300px; /* コンテナの最小幅を300に設定してリサイズを許可 */
   min-height: 0.5rem;
}

/* 親タグのリストスタイル */
nav.tags div.parent_tags ul {

}


/* 親タグのリストスタイル */
nav.tags div.parent_tags ul li {
   display: inline-flex; /* インラインフレックス化してテキストの幅で固定 & 横並び */
   justify-content: center; /* フレックス化したアイテムのテキストを水平方向の中央揃え */
   align-items: center; /* フレックス化したアイテムのテキストを垂直方向の中央揃え */
   list-style: none; /* デフォルトのリストスタイルを削除 */
   margin-top: 0.5rem;
   margin-right: 0.5rem;
   font-size: 1.0rem;
   border-left: 3px dashed #bbb;
   /*border-radius: 10px;*/
}


/* 親タグのリストスタイル (タグ選択時) */
nav.tags div.parent_tags ul li.select_parent_tag {
   color: #555;
   font-weight: bold;
   border-left: 3px solid #555;
   /*background-color: #8a9ddb;*/
   padding: 0.3rem 1.0rem 0.3rem 0.5rem;
}


/* 親タグのリストスタイル (スマホ版) */
@media (max-width: 768px) {
   nav.tags div.parent_tags ul li {
      font-size: 1.2rem;
   }
}



/* 親タグのリストスタイル (親タグ非選択時のアンカー) */
nav.tags div.parent_tags ul li a {
   width: 100%; /* a要素を親要素の幅に広げる */
   height: 100%; /* a要素を親要素の高さに広げる */
   padding: 0.3rem 1.0rem 0.3rem 0.5rem;
   text-decoration: none;
   /*border-radius: 10px;*/
}


nav.tags div.parent_tags ul li a:hover {
   color: #555;
   font-weight: bold;
}


/* 親タグのリストスタイル (ホバー時) */
nav.tags div.parent_tags ul li:hover:not(.select_parent_tag) {
   border-left: 3px solid #555;
   /*border-radius: 10px;*/
   /*background-color: #aaa;*/
}


/* 親タグのリストスタイル (クリック時) */
nav.tags div.parent_tags ul li:active {
   overflow: hidden;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* タップハイライトを無効化 */
}






/********** 子タグ検索 **********/
/* 子タグのコンテナのスタイル */
nav.tags div.child_tags {
   min-width: 300px; /* コンテナの最小幅を300に設定してリサイズを許可 */
   min-height: 0.5rem;
}

/* 子タグのリストスタイル */
nav.tags div.child_tags ul {

}


/* 子タグのリストスタイル */
nav.tags div.child_tags ul li {
   display: inline-flex; /* インラインフレックス化してテキストの幅で固定 & 横並び */
   justify-content: center; /* フレックス化したアイテムのテキストを水平方向の中央揃え */
   align-items: center; /* フレックス化したアイテムのテキストを垂直方向の中央揃え */
   list-style: none; /* デフォルトのリストスタイルを削除 */
   margin-top: 0.5rem;
   font-size: 1.0rem;
   border: 1px dotted transparent; /* ボーダーを透明に設定 */
   border-radius: 3px;
}


/* 子タグのリストスタイル (タグ選択時) */
nav.tags div.child_tags ul li.select_child_tag {
   color: white;
   font-weight: bold;
   /*border-bottom: 1px dotted #8a9ddb;*/
   background-color: #555;
   padding: 0.3rem 0.8rem;
}


/* 子タグのリストスタイル (スマホ版) */
@media (max-width: 768px) {
   nav.tags div.child_tags ul li {
      font-size: 1.2rem;
   }
}


/* 子タグのリストスタイル (子タグ非選択時のアンカー) */
nav.tags div.child_tags ul li a {
   width: 100%; /* a要素を親要素の幅に広げる */
   height: 100%; /* a要素を親要素の高さに広げる */
   padding: 0.3rem 0.8rem;
   text-decoration: none;
   border-radius: 3px;
}


/* 子タグのリストスタイル (ホバー時) */
nav.tags div.child_tags ul li:hover:not(.select_child_tag) {
   border: 1px solid #555;
   background-color: #555;
   border-radius: 3px;
   font-weight: bold;
}


/* 子タグのリストスタイル (クリック時) */
nav.tags div.child_tags ul li:active {
   overflow: hidden;
   border-radius: 3px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* タップハイライトを無効化 */
}

/* 子タグのリストスタイル (ホバー時) */
nav.tags div.child_tags ul li a:hover {
   color: #fff;
}


/********** キーワード検索 **********/
search.search {
   margin-top: 0.8rem;
   min-width: 300px;
}


/* スマホ版用のスタイル (メディアクエリとブレークポイント)*/
@media (max-width: 768px) {
   search.search {
      margin-top: 0.6rem;
   }
}

/* 検索フォーム */
search form {
   display: flex; /* フォーム全体をフレックスボックスとして表示 */
}

/* 検索キーワード・ボタンのコンテナ */
search form .search_container {
   display: flex; /* 検索ボックスとボタンを横並びにする */
   width: 100%; /* 必要に応じて幅を調整 */
}

/* 検索ボックス */
search form .search_keyword {
    flex: 1; /* 検索ボックスを可能な限り広げる */
    height: 25px; /* 高さを指定 */
    padding: 0 10px; /* 内側のパディングを設定 */
    box-sizing: border-box; /* パディングとボーダーを含めた幅の計算 */
    border: 1px solid #ccc; /* ボーダーを設定 */
    border-radius: 4px 0 0 4px; /* 左上と左下の角を丸くする */
    width: 100%; /* 必要に応じて幅を調整 */
}


/* 検索ボックス (スマホ版) */
@media (max-width: 768px) {
   search form .search_keyword {
      height: 30px; /* 高さを指定 */
   }
}


/* 検索ボタン */
search form .search_button {
   height: 25px; /* 高さを検索ボックスと揃える */
   padding: 0 10px; /* 内側のパディングを設定 */
   border: 1px solid #ccc; /* ボーダーを設定 */
   border-left: none; /* 検索ボックスとの境界線を消す */
   border-radius: 0 4px 4px 0; /* 右上と右下の角を丸くする */
   background-color: #777; /* ボタンの背景色 */
   cursor: pointer; /* カーソルをポインタにする */
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem; /* アイコンサイズ */
}

/* 検索ボタン (マウスを乗せた時) */
search form .search_button:hover {
    background-color: #555; /* ボタンの背景色 */
    font-weight: bold;
}

/* 検索ボタン (検索タイプでボタンの色を変える) */
search form .select_search {
   background-color: #555;
   font-weight: bold;
}


/* 検索ボタン (スマホ版) */
@media (max-width: 768px) {
   search form .search_button {
      height: 30px; /* 高さを指定 */
      font-size: 1.1rem; /* アイコンサイズ */
   }
}




/********** ランダム検索 **********/

div.random_search {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 0.8rem;
}

/* 「ランダム」ボタン */
div.random_search .random_button {
   border: 1px solid #ccc; /* ボーダーを設定 */
   border-radius: 4px; /* 角を丸くする */
   width: 40%;
   background-color: #777; /* ボタンの背景色 */
   /*background-color: transparent; /* 背景色を透明に設定 */
   padding: 0; /* ボタンの余白をリセット */
   font-size: 1.0rem;
}


/* 「ランダム」ボタン (選択時) */
div.random_search .random_button.select_random_button {
   background-color: #555; /* ボタンの背景色 */
   color: #fff; /* ホバー時のテキスト色 */
   font-weight: bold;
}


/* 「ランダム」ボタン (選択時のホバー時) */
div.random_search .random_button.select_random_button {
   background-color: #555; /* ボタンの背景色 */
   color: #fff; /* ホバー時のテキスト色 */
}


/* 「ランダム」ボタン (選択時 / スマホ版) */
@media (max-width: 768px) {
   div.random_search .random_button.select_random_button {
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
   }
}


/* 「ランダム」ボタン (ホバー時) */
div.random_search .random_button:hover:not(.select_random_button) {
   cursor: default; /* ポインタの形を通常の矢印に設定 */
   background-color: #777; /* ボタンの背景色 */
   font-weight: bold;
}

/* 「ランダム」ボタン (クリック時) */
div.random_search .random_button:active {
   overflow: hidden;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* タップハイライトを無効化 */
}


/* 「ランダム」ボタン (スマホ版) */
@media (max-width: 768px) {
   div.random_search .random_button {
      width: 100%;
      font-size: 1.1rem;
   }
}

div.random_search .random_button a {
   color: #fff;
   width: 100%; /* a要素をボタン全体の幅に設定 */
   height: 100%; /* a要素をボタン全体の高さに設定 */
   display: block;
   box-sizing: border-box; /* パディングを含むように設定 */
   text-decoration: none; /* テキストの下線を削除 */
}

div.random_search .random_button a:hover {
    background-color: #555; /* ボタンの背景色 */
    color: #fff; /* ホバー時のテキスト色 */
}


/* 「ランダム」ボタン (スマホ版) */
@media (max-width: 768px) {
   div.random_search .random_button a {
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
   }
}