@charset "UTF-8";
/* ======================================================
 * trendword.css
 * ------------------------------------------------------
 * 
====================================================== */

div.trendword {
    width:1200px;
    margin:0 auto;
    padding:0 20px;
}
.trendword_detail {
    display:flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 10px auto 0;
    padding: 5px 17px 5px 5px;
    border:1px solid #f2f2f2;
    border-radius:30px
}
.trendword_title {
    flex-shrink:0;
    width: 10em;
    margin-right:20px;
    padding: 2px;
    text-align: center;
    font-size:15px;
    background-color:#F2F2F2;
    border-radius:30px
}
ol.trendword {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-right:35px;
    flex-shrink: 0;
    width: calc(100% - 21em);
}
.trendword li {
    width: calc((100% - (10px * 4)) / 5);
}
.trendword li:not(:first-child) {
    margin-left:10px;
}
.trendword a {
    display: block;
    position: relative;
    padding-left:15px;
    color: #232b35;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
span[class^="trendrank"] {
    display:none;
}
.trendword a:before{
    content: "";
    position: absolute;
    display: block;
    top: 0.65em;
    left: -3px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #5f6b78;
    border-right: 2px solid #5f6b78;
    transform: rotate(45deg);
}
.trendword_date {
    flex-shrink:0;
    width: 11em;
    margin-left:auto;
    text-align: right;
    font-size: 11px;
}

.trendword a:hover {
    background-color: AliceBlue;
}

/* カーソルを重ねる要素 */
.tooltip {
  position: relative; /* ツールチップの位置の基準に */
  cursor: pointer; /* カーソルを当てたときにポインターに */
}

/* ツールチップのテキスト */
.tooltip-text {
  opacity: 0; /* はじめは隠しておく */
  visibility: hidden; /* はじめは隠しておく */
  position: absolute; /* 絶対配置 */
  left: 70%; /* 親に対して中央配置 */
  transform: translateX(-30%); /* 親に対して中央配置 */
  bottom: -30px; /* 親要素下からの位置 */
  display: inline-block;
  padding: 5px; /* 余白 */
  white-space: nowrap; /* テキストを折り返さない */
  /* font-size: 0.8rem; フォントサイズ */
  line-height: 1.3; /* 行間 */
  background: DimGray; /* 背景色 */
  color: WhiteSmoke; /* 文字色 */
  border-radius: 3px; /* 角丸 */
  transition: 0.3s ease-in; /* アニメーション */
}
/* ホバー時にツールチップの非表示を解除 */
.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 768px) {
    div.trendword {        
        width:100%;
        padding:0;
    }
    .trendword_detail {
        display:block;
        position:relative;
        padding: 5px 10px 5px 5px;
        border-radius:10px;
    }       
    .trendword_title {
        margin-right:0;
        padding: 2px;
        font-size:12px;
    }
    ol.trendword {
        display: flex;
        justify-content:center;
        flex-wrap: wrap;
        margin:3px auto;
        width: 100%;
    }
    .trendword li {
        width: calc((100% - 30px) / 3);
        margin:0 0 0 10px;
    }
    .trendword li:nth-child(n+4) {
        display:none;
    }
    .trendword a {
        padding:12px 0 12px 13px;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .trendword a:before{
        top: 1.4em;
        left: 0;
        width: 6px;
        height: 6px;
    }
    .trendword_date {
        position:absolute;
        top: 1em;
        right: 10px;
        width: auto;
        font-size: 11px;
    }
}