.mypage-tooltip {
  position: relative;
  color: #2a8ed7;
  cursor: pointer; }
  .mypage-tooltip .mypage-tooltip-content {
    position: absolute;
    z-index: 1;
    font-size: 13px;
    line-height: 1.6;
    white-space: normal;
    text-align: left;
    padding: 0.5em;
    border-radius: 0.5em; }
    .mypage-tooltip .mypage-tooltip-content:after {
      content: "";
      position: absolute;
      border-width: 0.75em;
      border-style: solid;
      border-color: transparent; }
    .mypage-tooltip .mypage-tooltip-content.top {
      bottom: calc(100% + 1em);
      right: 50%;
      transform: translateX(50%); }
      .mypage-tooltip .mypage-tooltip-content.top:after {
        top: 100%;
        left: 50%;
        transform: translateX(-50%); }
    .mypage-tooltip .mypage-tooltip-content.middle { width: 20em; }
    .mypage-tooltip .mypage-tooltip-content.wide { width: 30em; }
    .mypage-tooltip .mypage-tooltip-content.dark { background-color: #000; color: #fff; }
    .mypage-tooltip .mypage-tooltip-content.top.dark:after { border-top-color: #000; }
    .mypage-tooltip .mypage-tooltip-content.gray { background-color: gray; color: #fff; }
    .mypage-tooltip .mypage-tooltip-content.top.gray:after { border-top-color: gray; }
  .mypage-tooltip:not(:hover) .mypage-tooltip-content { display: none; }