1  .warichu {
 2    color: #1e3a8a;
 3  }
 4  
 5  .warichu-wrapper {
 6    position: absolute;
 7    top: 0;
 8    bottom: 0;
 9    font-size: calc(2em / 3);
10    line-height: 1em;
11    transform: translateX(-0.5em);
12  }
13  
14  
15  .warichu-wrapper::before {
16    content: "";
17    width: max(var(--big-line-height), calc(100% - var(--big-line-height)));
18    height: var(--before-height);
19    float: left;
20    clip-path: var(--polygon);
21    shape-outside: var(--polygon);
22    background-color: #f003;
23  }
24  
25  .text-area {
26    flex: 1;
27    overflow-x: auto;
28    writing-mode: vertical-rl;
29    /* font-family: "SourceHanSerif"; */
30    font-size: 3em;
31    line-height: 2em;
32    color: #333;
33    margin: 1em 0;
34    padding: 0 1em;
35    text-align: justify;
36    position: relative;
37  }
38  .warichu-text::before {
39    content: "";
40    float: right;
41    width: var(--big-line-height);
42    height: var(--end-bottom);
43    background-color: #00f3;
44  }
45  
46  
47  i.warichu-ph-start {
48    margin-top: 0.5em;
49  }
50  
51  i.warichu-ph-end {
52    margin-bottom: 0.5em;
53  }
54  
55  .warichu-placeholder {
56    visibility: hidden;
57    font-size: 0.66em;
58    user-select: none;
59  }