body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 1.25em; /* 20px / 16 */
        }
        
        h2 {
          font-size: 1em;
        }
        p , li{
          font-size: 0.825em;
        }

        /* ホバーされる元の文字のスタイル */
        .hover-text {
            position: relative;
            text-decoration: underline;
            text-decoration-color: #ccc;
            cursor: pointer;
        }

        /* ホバーした時に表示される英訳のスタイル */
        .hover-text::after {
            content: attr(data-english);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            
            padding: 0.5em 0.75em; /* 8px 12px / 16 */
            border-radius: 0.25em; /* 4px / 16 */
            font-size: 0.75em; /* 14px / 16 */
            max-width: 18.75em; /* 300px / 16 */
            
            white-space: normal;
            width: max-content;
            line-height: 1.2;
            z-index: 10;
            
            opacity: 0;
            visibility: hidden;
            transition: 0.3s;
            pointer-events: none;
        }

        .hover-text:hover::after {
            opacity: 1;
            visibility: visible;
            bottom: 120%;
        }