.underline {
text-decoration: underline;
}
.H,
.h,
.Hw {
color: #D84A4A;
}
.I,
.i,
.Iw {
color: #3B78C2;
}
.Z,
.z,
.Zw {
color: #4FA84E;
}
.N,
.n,
.Nw {
color: #F5B800; }
.V,
.v {
color: #F28C28;
}
.L,
.l,
.Lw {
color: #8054A0;
}
.bracket {
color: whitesmoke;
-webkit-text-stroke: 0.5px #aaa ;
}
.Kcode {
font-size: 30px;
font-weight: 700;
font-feature-settings: "palt" 1;
background-color: #fff4db;
padding-left: 10px; margin-bottom: 20px;
} #KCode>div,
#KCode .kcode-pane>div {
margin: 0 0 22px 0;
}
#KCode>div:last-child,
#KCode .kcode-pane>div:last-child {
margin-bottom: 0;
}
.Kcode:has(> div),
.Kcode:has(.kcode-pane > div) {
padding: 8px 8px 24px 16px;
}
.katakana>span {
font-size: 30px;
color: #333333;
border: 1px solid #999999;
padding: 1px 4px;
margin: 1px 1px 0px 1px;
}
.img-stroke {
max-width: 200px;
height: auto;
margin-left: 50px;
display: block;
border-radius: 12px;
}
.sNotice_img {
font-size: medium;
font-weight: lighter;
display: inline-block;
-webkit-text-stroke: 1px #333333;
vertical-align: super;
}  @media (max-width: 991.98px) and (min-width: 768px) {
.Kcode {
font-size: 22px;
padding-left: 7px;
margin-bottom: 14px;
}
#KCode>div,
#KCode .kcode-pane>div {
margin: 0 0 15px 0;
}
#KCode>div:last-child,
#KCode .kcode-pane>div:last-child {
margin-bottom: 0;
}
.Kcode:has(> div),
.Kcode:has(.kcode-pane > div) {
padding: 4px 4px 15px 10px;
}
.katakana>span {
font-size: 22px;
}
.img-stroke {
max-width: 125px;
margin-left: 35px;
border-radius: 10px;
} }
@media (max-width: 767.98px) {
.Kcode {
font-size: 25px;
padding-left: 7px;
margin-bottom: 14px;
}
#KCode>div,
#KCode .kcode-pane>div {
margin: 0 0 20px 0;
}
#KCode>div:last-child,
#KCode .kcode-pane>div:last-child {
margin-bottom: 0;
}
.Kcode:has(> div),
.Kcode:has(.kcode-pane > div) {
padding: 6px 6px 20px 12px;
}
.katakana>span {
font-size: 25px;
}
.img-stroke {
max-width: 180px;
margin-left: 38px;
border-radius: 10px;
}
.pop-up-window {
max-width: 300px;
padding: 5px 15px;
max-height: 200px;
}
.close {
top: 3px;
right: 3px;
} 
}  .kcode-repeat {
display: flex;
flex-direction: column; gap: 10px;
} .kcode-pane {
min-width: 0;
} .kcode-sep {
width: 100%;
height: 0;
border-top: 2px dotted rgba(0, 0, 0, 0.3);
margin: 2px 0;
}
.kcode-item__gap {
display: inline-block;
flex: 0 0 0.6em;
} .kcode-handaku-gap {
display: inline-block;
width: 0.4em;
} @media (min-width: 768px) {
.kcode-repeat {
flex-direction: row; align-items: stretch;
}
.kcode-pane {
flex: 1 1 0;
}
.kcode-sep {
width: 0;
height: auto;
border-top: none;
border-left: 2px dotted rgba(0, 0, 0, 0.3); margin: 0 12px;
}
}
.kcode-item {
margin-bottom: .7em;
} .kcode-item__row {
display: flex;
align-items: center;
} .kcode-item__char {
flex: 0 0 1.1em; } .kcode-item__code {
flex: 1 1 auto;
font-size: 1.1em;
min-width: 0; white-space: normal; overflow-wrap: break-word;
}
.kcode-mode-tpr .kcode-item__code {
font-size: 0.8em;
line-height: 1.4;
}  .kcode-tpr-container {
word-break: keep-all; 
overflow-wrap: anywhere; line-break: strict; } .kc-sep {
display: inline-block;
width: 1em; 
}
.kcode-mode-tpr .kc-sep {
width: 0.8em;
} .kc-sep-s {
display: inline-block;
width: 0.25em; }  #convertResult {
display: inline-block;
line-height: 1.5;
} #convertResult span,
.katakana span {
display: inline-block !important; border: none !important;  background-color: #fff4db !important; color: #333 !important; border-radius: 8px !important; font-weight: 700 !important;
font-size: 1.3rem !important; line-height: 1 !important; margin: 0 6px 6px 0 !important;
padding: 6px 10px !important; box-shadow: 0 1.5px 2px rgba(255,132,0,0.4);
}