.emot-banner-pc,
.emot-banner-pc-bar {
    /*height: 235px;*/
    height: 169px;
}

.emot-banner-pc {
    text-align: center;
    position: fixed;
    /*top: 231px;*/
    top: 166px;
    right: 0px;
    display: block;
    z-index: 999999;
    color: #000000;
}

.emot-banner-pc-toggle-button,
.emot-banner-pc-footer,
.emot-banner-pc-header,
.emot-banner-pc-bar {
    background-color: #dcae32;
}

.emot-banner-pc-title,
.emot-banner-pc-text,
.emot-banner-pc-button,
.emot-banner-sp-bar-button-text {
    letter-spacing: 0.05em;
    font-family: 'Oswald', sans-serif !important;
}

.emot-banner-pc.hidden .emot-banner-pc-toggle-button-left {
    display: block;
}

.emot-banner-pc.visible .emot-banner-pc-toggle-button-right {
    display: block;
}

.emot-banner-pc-inner {
    width: 340px; /*474px; /* 0.7172995780590717 % */
    z-index: 999999;
    background-color: #fefcee;
    position: absolute;
    display: block;
    right: 0px;
    transition: right 0.5s;
}

.emot-banner-pc.hidden .emot-banner-pc-inner {
    right: -340px; /*-474px;*/
}

.emot-banner-pc-toggle-button,
.emot-banner-pc-header {
    /*height: 48px;*/
    height: 34px;
}

.emot-banner-pc-toggle-button {
    /*width: 41px;*/
    width: 29px;
    display: block;
    position: absolute;
    right: 0px;
    z-index: 1000000;
}

button.emot-banner-pc-toggle-button:focus-visible {
    outline: none;
    border: none;
}

.emot-banner-pc-toggle-button-left,
.emot-banner-pc-toggle-button-right {
    display: none;
    margin: 0 auto;
    width: 10px;
}

.emot-banner-pc-title {
    display: block;
    /*line-height: 48px;
    font-size: 26px;*/
    line-height: 34px;
    font-size: 18px;
    font-weight: 400;
}

.emot-banner-pc-body {
    /*height: 182px;*/
    height: 131px;
    display: block;
    overflow: hidden;
}

.emot-banner-pc-body-left,
.emot-banner-pc-body-right {
    position: absolute;
    /* top: 48px; */
    /* top: 34px; */
    bottom: 0px;
    display: inline-block;
    /* height: 182px; */
    /* width: 235px; */
    height: 131px;
    margin-bottom: 4px;
}

.emot-banner-pc-body-left {
    /*padding: 35px 25px; */
    padding: 21px 2px 21px 14px;
    left: 0px;
    width: 197px;
}

.emot-banner-pc-body-right {
    right: 0px;
    /* padding-top: 23px; */
    /* padding-top: 23px; */
    width: 137px;
}

.emot-banner-pc-img-container {
    /*width: 67%; */
    right: 19px;
    position: absolute;
    bottom: 0px;
    height: 82%;
}

.emot-banner-pc-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.emot-banner-pc-text {
    /*font-size: 22px;*/
    font-size: 15px;
    text-align: left;
    /*line-height: 1.4;*/
    line-height: 1.2;
}

.emot-banner-pc-button-container {
    display: block;
    /*margin-top: 10px;*/
    margin-top: 7px;
}

.emot-banner-pc-button {
    text-decoration: none;
    background-color: #d53f0b;
    color: #ffffff;
    /*width: 167px;*/
    /*height: 38px;*/
    width: 120px;
    height: 27px;
    display: block;
    /*font-size: 21px;*/
    /*line-height: 38px;*/
    font-size: 14px;
    line-height: 27px;
}

.emot-banner-pc-button:hover,
.emot-banner-pc-button:active,
.emot-banner-pc-button:focus {
    text-decoration: none;
}

.emot-banner-pc-button:hover {
    color: #ffffff;
    opacity: 0.7;
}

.emot-banner-pc-button img {
    display: none;
}

.emot-banner-pc-footer {
    /*height: 5px;*/
    height: 4px;
    display: block;
}

.emot-banner-pc-bar {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    /*width: 5px;*/
    width: 4px;
    z-index: 999998;
}

/*
 * Smartphone version
 */

.emot-banner-sp {
    color: #000000;
    z-index: 999998;
    font-family: 'Oswald', sans-serif !important;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.emot-banner-sp-bar {
    color: #000000;
    background-color: #ffffff;
    box-sizing: border-box !important;
    width: 100%;
    z-index: 999998;
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: stretch;
    padding: 0px 5px;
    box-shadow: 0px -5px 10px 0px #31415d73;
}

.emot-banner-sp-bar.hidden {
    display: none;
}

.emot-banner-sp-bar.visible {
    display: flex;
}

.emot-banner-sp-bar-logo-container {
    margin: 5px 15px;
}

.emot-banner-sp-bar-logo-image {
    width: 100%;
    object-fit: contain;
}

.emot-banner-sp-bar-button {
    text-decoration: none;
    margin: 15px 5px;
    padding: 2px 5px;
    background-color: #317abc;
    border-radius: 8px;
    display: flex;
    flex: 1 1 50%;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    --w: 100vw;
    max-width: calc(var(--w) * 0.5);
}

.emot-banner-sp-bar-button .emot-banner-sp-bar-button-icon-container {
    --w: 100vw;
    height: calc(var(--w) / 8);
    display: flex;
    flex: 1 1 25%;
}

.emot-banner-sp-bar-button .emot-banner-sp-bar-button-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.emot-banner-sp-bar-button .emot-banner-sp-bar-button-text {
    color: #ffffff;
    font-weight: 400;
    margin: auto 0px;
    --w: 100vw;
    line-height: calc(var(--w) / 20);
    font-size: calc(var(--w) / 27);
    display: flex;
    flex: 1 1 75%;
    justify-content: center;
}

.emot-banner-sp-bar-button-special {
    text-decoration: none;
    margin: 15px 5px;
    background-color: #317abc;
    border-radius: 8px;
    display: flex;
    flex: 1 1 100%;
    justify-content: center;
    --w: 100vw;
    padding: 2px 0;
}

.emot-banner-sp-bar-button-special .emot-banner-sp-bar-button-icon-container {
    --w: 100vw;
    height: calc(var(--w) / 9);
    width: calc(var(--w) / 9);
    margin: 4px 0 !important;
    padding: 0 !important;
}

.emot-banner-sp-bar-button-special .emot-banner-sp-bar-button-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
}

.emot-banner-sp-bar-button-special .emot-banner-sp-bar-button-text {
    color: #ffffff;
    font-weight: 400;
    margin: auto 0px !important;
    padding-bottom: 2px;
    --w: 100vw;
    line-height: calc(var(--w) / 20);
    font-size: calc(var(--w) / 22);
}

.emot-banner-sp-bar-button-special .emot-banner-sp-bar-button-text::before {
    content: " ";
    width: 10px;
    display: inline-block;
    margin: 0;
    color: #317abc;
}

/*
 * The PopUP
 */

.emot-banner-sp-popup {
    margin: 20px 10px;
    bottom: 100px;
    background-color: #ffffff;
    z-index: 9999999;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-around;
    align-items: flex-end;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.5s, margin-bottom 0.5s, visibility 0.5s;
    transition: opacity 0.5s, margin-bottom 0.5s, visibility 0.5s;
    box-shadow: 0px -5px 12px 4px #31415d73;
}

.emot-banner-sp-popup-close {
    --w: 100vw;
    position: absolute;
    top: 20px;
    right: 10px;
    width: calc(var(--w) / 13);
    height: calc(var(--w) / 13);
    background-color: #dddddd;
    font-size: calc(var(--w) / 20);
}

.emot-banner-sp.visible .emot-banner-sp-popup {
    display: flex;
    visibility: visible;
    opacity: 1;
    margin-bottom: 20px;
    animation: fadein 0.5s;
}

.emot-banner-sp.hidden .emot-banner-sp-popup {
    visibility: hidden;
    opacity: 0;
    margin-bottom: -20px;
    animation: fadeout 0.5s;
}

@keyframes fadein {
    0% {
        opacity: 0;
        margin-bottom: -20px;
    }

    100% {
        display: flex;
        opacity: 1;
        margin-bottom: 20px;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
        margin-bottom: 20px;
    }

    100% {
        opacity: 0;
        margin-bottom: -20px;
    }
}

.emot-banner-sp-popup:after {
    content: "";
    width: 0;
    height: 0;
    position: relative;
    bottom: -10px;
    left: -65vw;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #ffffff;
}

.emot-banner-sp-popup-title {
    margin: 14px auto 5px auto;
    --w: 100vw;
    line-height: calc(var(--w) / 15);
    font-size: calc(var(--w) / 16);
    padding: 0 34px;
}

.emot-banner-sp-popup-line {
    margin: 10px 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    align-content: space-around;
}

.emot-banner-sp-popup-line-text {
    text-align: left;
    --w: 100vw;
    font-size: calc(var(--w) / 25);
    flex: 1 0 65%;
}

.emot-banner-sp-popup-line-image-container {
    margin: 15px 20px;
}

.emot-banner-sp-popup-line-image {
    width: 100%;
    object-fit: contain;
}

.emot-banner-sp-popup-footer {
    margin: 20px;
    text-align: right;
}

a.emot-banner-sp-popup-footer-link {
    --w: 100vw;
    line-height: calc(var(--w) / 30);
    font-size: calc(var(--w) / 25);
    text-decoration: underline;
    text-decoration-color: #dcae32;
    text-decoration-thickness: 3px;
}