.hr-element{
    border: 1px solid #F2F2F2;
    margin: 1rem 0;
}
.word-dictionary .pr {
    display: inline-block;
}
.word-dictionary .word-meaning {
    color: var(--v4-grey-60);
    margin-top: 0.5rem;
}

.word-dictionary .sentence-translation {
    color: var(--v4-grey-60);
    margin-top: 1rem;
}

.word-dictionary .pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: normal;
    border-radius: 100rem;
    background-color: #fff;
    padding: 0.4rem 1rem;
    box-shadow: 0 0.3rem 2rem rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s linear;
    text-decoration: none;
}

.word-dictionary .pr-btn:hover {
    background-color: #f2fbff;
}
.word-dictionary .pr-btn.no-shadow{
    box-shadow: none;
}

.word-dictionary .pr-btn > .pr-symbol {
    display: block;
    font-size: 1.4rem;
    color: #008ac1;
    padding: 0 0.8rem 0 0.4rem;
    white-space: normal;
}

.word-dictionary .pr-btn.flag-us:before,
.word-dictionary .pr-btn.flag-uk:before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 2.4rem;
    height: 1.6rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.word-dictionary .pr-btn.flag-us:before {
    background-image: url(https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/resources/common/images/icon/flag-us.svg);
}

.word-dictionary .pr-btn.flag-uk:before {
    background-image: url(https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/resources/common/images/icon/flag-uk.svg);
}

.word-dictionary .pr-btn:after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(https://nativecamp-textbook-file-uploader-prod.s3.amazonaws.com/resources/common/images/icon/icon-volume.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.word-dictionary .word-pos .t-pos-en {
    display: inline-block;
    margin-right: 1rem;
}

.word-dictionary .word-pos .t-pos-translation {
    display: inline-block;
    color: var(--v4-grey-60);
}
.word-dictionary {
    --__border-color: #404040;
    --__pos-x: 0%;
    --__pos-x-large: 0%;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.word-dictionary .expanded .expanded-word {
    font-weight: 700;
    font-size: 1.8rem;
    color: #f1890e;
    position: relative;
    width: 100%;

    display: flex;
    align-items: center;
    flex-flow: row wrap;
    gap: 0;
}

.word-dictionary .expanded .expanded-word .expanded-arrow {
    margin-left: auto;
    padding-inline-start: 1.4em;
    /* position: absolute;
	cursor: pointer;
	width: 100%;
	margin-left: 1rem;  */
}

.word-dictionary .expanded .expanded-word .expanded-arrow::after {
    content: url("https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/resources/common/images/icon/arrow-down-black.svg");
}

.word-dictionary .expanded .expanded-word span {
    color: #999999;
    font-size: 1.4rem;
    font-weight: 400;
    margin-left: 8px;
}

.word-dictionary .expanded .expanded-word-jp {
    color: #999999;
    font-size: 1.6rem;
    font-weight: normal;
}

.word-dictionary .expanded .expanded-code {
    font-size: 1.2rem;
    font-weight: 700;
    color: #999999;
}

.word-dictionary .word-def-container {
    position: relative;
    margin: 0 0 0.8rem;
    line-height: 2.8rem;
}

.word-dictionary .pronunciation-btn-list {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.word-dictionary .expanded-large,
.word-dictionary .expanded-small {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    isolation: isolate;
}

.word-dictionary .expanded-large::before,
.word-dictionary .expanded-small::before,
.word-dictionary .expanded-large::after,
.word-dictionary .expanded-small::after {
    --__weight: 8px;
    --__color: #ffffff;
    --__index: -1;
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    height: 0;
    width: 0;
    border: var(--__weight, 8px) solid transparent;
    border-top-color: var(--__color, #ffffff);
    z-index: var(--__index, 9);
}

.word-dictionary .expanded-large::before,
.word-dictionary .expanded-small::before {
    --__color: #ffffff;
    --__index: 9;
    --__weight: 8px;
    --__pos-y: var(--__before-pos-y, calc(100% + 43px));
}

.word-dictionary .expanded-large::after,
.word-dictionary .expanded-small::after {
    --__color: var(--__border-color);
    --__index: 8;
    --__weight: 9px;
    --__pos-y: var(--__after-pos-y, calc(100% + 40px));
}


.word-dictionary .expanded-large .voc-row,
.word-dictionary .expanded-small-container {
    min-width: 160px;
    max-width: 685px;
    width: max-content;
    padding: 3rem;
    background: #fff;
    border: 1px solid var(--__border-color);
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    line-height: 1.6;
}
.word-dictionary .expanded-large .voc-row hr{
    margin: 2rem 0;
}

.word-dictionary .expanded-small-container {
    padding: 1.6rem;
    max-height: 280px;
    overflow-y: auto;
    transform: translateX(var(--__pos-x));
}

.word-dictionary .expanded-small-container hr.hr-element:last-child {
    display: none;
}
.word-dictionary .expanded-large .voc-row {
    transform: translateX(var(--__pos-x-large, --__pos-x));
}

.word-dictionary .expanded-small-container::-webkit-scrollbar {
    width: 12px;
}

.word-dictionary .expanded-small-container::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #d9d9d9;
}

.word-dictionary .row-box {
    display: flex;
    gap: 3rem;
    align-items: stretch;
}
.word-dictionary .row-box > .cell-box:first-child {
    flex: 0 0 170px;
}
.word-dictionary .row-box > .cell-box:nth-child(2) {
    flex: 1;
}
.word-dictionary .row-box > .cell-box:nth-child(2) .word-pos{
    margin: 0 0 1rem;
}

.word-dictionary .expanded-large .word-def-translation p {
    color: #999999;
    font-size: 1.6rem;
    font-weight: normal;
}

.word-dictionary .expanded-large .word-code p {
    margin: 1rem 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #999999;
}

.word-dictionary .expanded-large .row-1 .cell-1-1 .word-main .text_to_speech_src {
    color: #f1890e;
    font-size: 2rem;
    font-weight: 700;
}

.word-dictionary .expanded-large .row-1 .cell-1-2 .sentence-main .sentence-eng-meaning {
    font-size: 1.8rem;
    color: #404040;
    font-weight: 700;
}

.word-dictionary .expanded-large .row-1 .cell-1-2 .sentence-main .sentence-eng-meaning b {
    color: #f1890e;
}

@media (max-width: 425px) {
    .word-dictionary .expanded-small-container {
        max-width: 240px;
        padding: 12px 16px;
    }

    .word-dictionary .expanded .expanded-word {
        font-size: 1.6rem;
        flex-direction: column;
        align-items: start;
        gap: 0.5rem;
        margin: 0 0 0.5rem;
    }

    .word-dictionary .expanded .expanded-word span{
        color: #008AC1;
        margin: 0;
    }

    .word-dictionary .expanded .expanded-word-jp,
    .word-dictionary .expanded .expanded-code {
        font-size: 1.2rem;
    }

    .word-dictionary .expanded .expanded-word-jp {
        font-size: 1.4rem;
        display: inline;
        margin: 0 1rem 0 0;
    }

    .word-dictionary .pr-btn[class*="flag-"]::before {
        width: 1.6rem !important;
    }

    .word-dictionary .pr-btn::after {
        width: 1.4rem !important;
    }

    .word-dictionary .expanded .expanded-word span{
        word-break: break-all;
    }
}

.word-dictionary.origin-top .expanded-small-container {
    transform: translateX(var(--__pos-x)) translateY(calc(var(--__pos-y, 100%) - -5px));
}

.word-dictionary.origin-top .expanded-large .voc-row {
    transform: translateX(var(--__pos-x-large)) translateY(calc((var(--__pos-y, 100%)) - -5px));
}

.word-dictionary.origin-top .expanded-small::before,
.word-dictionary.origin-top .expanded-small::after,
.word-dictionary.origin-top .expanded-large::before,
.word-dictionary.origin-top .expanded-large::after {
    transform-origin: top;
    transform: translateX(-50%) translateY(calc(var(--__pos-y, 100%) - 11px)) rotateZ(180deg);
}