html {
    width: 100%; overflow-x: hidden;
}
.textcenter {
    text-align: center;
}

:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
}

.m-basicModalContent {
    position: relative;
    margin: 56px auto;
    background: #fff;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .m-basicModalContent {
        margin: 8px auto 80px
    }
}

.m-basicModalContent__header:not(:empty) {
    padding: 16px;
    color: #222;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .m-basicModalContent__body {
        width: 100%
    }
}

.m-basicModalContent__body--height {
    max-height: 440px
}

@media only screen and (max-width: 479px) {
    .m-basicModalContent__body--height {
        height: calc(100vh - 240px)
    }
}

.m-basicModalContent__body--scrollable {
    max-height: 440px;
    overflow-y: auto
}

@media only screen and (max-width: 479px) {
    .m-basicModalContent__body--scrollable {
        max-height: calc(100vh - 240px)
    }
}

.m-basicModalContent__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 16px;
    background-color: #f7f9f9;
    border-top: 1px solid #f2f2f2;
    border-radius: 0 0 4px 4px
}

.m-basicModalContent--size_small {
    width: 470px
}

@media only screen and (max-width: 479px) {
    .m-basicModalContent--size_small {
        width: calc(100% - 16px)
    }
}

.m-basicModalContent--size_medium {
    width: 580px
}

@media only screen and (max-width: 479px) {
    .m-basicModalContent--size_medium {
        width: calc(100% - 16px)
    }
}

.m-basicModalContent--size_large {
    width: 100%
}

@media only screen and (max-width: 479px) {
    .m-basicModalContent--size_large {
        width: calc(100% - 16px)
    }
}


.m-formErrorList {
    margin-top: 8px;
    font-size: 14px;
    color: #ed4956
}

.m-formErrorList > * {
    margin-top: 4px;
    margin-bottom: 4px
}

.m-formErrorList a {
    color: #ed4956
}

@media only screen and (min-width: 769px) {
    .m-formErrorList a {
        text-decoration: underline;
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-formErrorList a:hover {
        color: #e81b2b
    }
}


.m-formItem__header {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px
}

.m-formItem__title {
    font-size: 14px;
    font-weight: 700
}

.m-formItem__required {
    font-size: 12px;
    margin-left: 8px;
    color: #ed4956
}

.m-formItem__optional {
    font-size: 12px;
    margin-left: 8px;
    line-height: 2;
    color: #787c7b
}

.m-formItem__description {
    font-size: 14px;
    margin-bottom: 8px;
    color: #787c7b
}


.m-formInput__field.is-error {
    border: 1px solid #ed4956
}


.m-modalFooterButtonGroup {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: 100%
}

.m-modalFooterButtonGroup__button:not(:root) {
    margin-left: 16px
}

.m-modalFooterButtonGroup__button:not(:root):first-child {
    margin-left: 0
}


.o-amazonWidget__body {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-amazonWidget__body {
        padding: 24px
    }
}

.o-amazonWidget__premiumLink {
    color: #2cb696
}


.m-basicBalloonList {
    max-width: 400px
}

@media only screen and (max-width: 479px) {
    .m-basicBalloonList {
        max-width: 100vw
    }
}

.m-basicBalloonList__item {
    font-size: 14px;
    text-align: left;
    white-space: nowrap
}

.m-basicBalloonList__item + .m-basicBalloonList__item--delete, .m-basicBalloonList__item + .m-basicBalloonList__item--separate {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
}

.m-basicBalloonList__item--delete .m-basicBalloonList__link {
    color: #ed4956
}

@media only screen and (min-width: 769px) {
    .m-basicBalloonList__item--delete .m-basicBalloonList__link:hover {
        color: #ed4956
    }
}

.m-basicBalloonList__text {
    color: #a8abb1
}

.m-basicBalloonList__link, .m-basicBalloonList__text {
    display: block;
    padding: 8px 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.m-basicBalloonList__link {
    width: 100%;
    color: #787c7b;
    cursor: pointer
}

.m-basicBalloonList__link:focus:active, .m-basicBalloonList__link:focus:hover {
    outline: none
}

@media only screen and (min-width: 769px) {
    .m-basicBalloonList__link:hover {
        color: #222;
        background-color: #f7f9f9
    }
}


.a-balloon {
    position: relative
}

.a-balloon__mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.a-balloon__body {
    position: absolute;
    left: 50%;
    z-index: 2;
    min-width: 160px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(34, 34, 34, .25), 0 0 1px rgba(34, 34, 34, .35);
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.a-balloon__body:before {
    content: ""
}

.a-balloon__body--popover {
    z-index: 1000
}

.a-balloon--arrow_top .a-balloon__body {
    top: 8px
}

.a-balloon--arrow_top .a-balloon__body:before {
    position: absolute;
    top: -6px;
    right: 50%;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-right: -6px;
    background-color: #fff;
    border-right: 1px solid rgba(34, 34, 34, .1);
    border-bottom: 1px solid rgba(34, 34, 34, .1);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.a-balloon--arrow_topLeft .a-balloon__body {
    bottom: -16px;
    left: auto;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.a-balloon--arrow_topLeft .a-balloon__body:before {
    position: absolute;
    top: -5px;
    left: 16px;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-right: 1px solid rgba(34, 34, 34, .1);
    border-bottom: 1px solid rgba(34, 34, 34, .1);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.a-balloon--arrow_topRight .a-balloon__body {
    right: -8px;
    bottom: -16px;
    left: auto;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.a-balloon--arrow_topRight .a-balloon__body:before {
    position: absolute;
    top: -5px;
    right: 16px;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-right: 1px solid rgba(34, 34, 34, .1);
    border-bottom: 1px solid rgba(34, 34, 34, .1);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.a-balloon--arrow_bottom .a-balloon__body {
    top: -40px;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%)
}

.a-balloon--arrow_bottom .a-balloon__body:before {
    position: absolute;
    right: 50%;
    bottom: -2px;
    width: 8px;
    height: 8px;
    content: "";
    background-color: #fff;
    border-right: 1px solid rgba(34, 34, 34, .3);
    border-bottom: 1px solid rgba(34, 34, 34, .3);
    -webkit-transform: rotate(45deg) translate(50%);
    transform: rotate(45deg) translate(50%)
}

.a-balloon--arrow_bottomRight .a-balloon__body {
    top: -40px;
    right: -8px;
    left: auto;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.a-balloon--arrow_bottomRight .a-balloon__body:before {
    position: absolute;
    right: 16px;
    bottom: -5px;
    width: 8px;
    height: 8px;
    content: "";
    background-color: #fff;
    border-right: 1px solid rgba(34, 34, 34, .3);
    border-bottom: 1px solid rgba(34, 34, 34, .3);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.a-balloon--arrow_bottomLeft .a-balloon__body {
    top: -40px;
    right: auto;
    left: -8px;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.a-balloon--arrow_bottomLeft .a-balloon__body:before {
    position: absolute;
    bottom: -5px;
    left: 16px;
    width: 8px;
    height: 8px;
    content: "";
    background-color: #fff;
    border-right: 1px solid rgba(34, 34, 34, .3);
    border-bottom: 1px solid rgba(34, 34, 34, .3);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.a-balloon--arrow_rightBottom .a-balloon__body {
    top: auto;
    right: auto;
    bottom: -21px;
    left: -16px;
    -webkit-transform: translate(-100%);
    transform: translate(-100%)
}

.a-balloon--arrow_rightBottom .a-balloon__body:before {
    position: absolute;
    right: -5px;
    bottom: 28px;
    width: 8px;
    height: 8px;
    content: "";
    background-color: #fff;
    border-right: 1px solid rgba(34, 34, 34, .15);
    border-bottom: 1px solid rgba(34, 34, 34, .15);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}


.o-amazonWidget {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-amazonWidget {
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-amazonWidget:hover {
        border: 1px solid #ccc
    }
}

.o-amazonWidget__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2
}

.o-amazonWidget__thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-amazonWidget__thumb {
        padding-bottom: 70%
    }
}

.o-amazonWidget__thumbImg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.o-amazonWidget__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.o-amazonWidget__title {
    max-height: 72px;
    font-weight: 700;
    -webkit-line-clamp: 3
}

.o-amazonWidget__author, .o-amazonWidget__title {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    -webkit-box-orient: vertical
}

.o-amazonWidget__author {
    -webkit-box-flex: 1;
    flex: 1;
    max-height: 18px;
    color: #787c7b;
    font-size: 12px;
    -webkit-line-clamp: 1
}

.o-amazonWidget__aside {
    z-index: 2;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: auto
}

.o-amazonWidget__aside, .o-amazonWidget__sellerLink {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-amazonWidget__sellerLink {
    color: #787c7b
}

.o-amazonWidget__sellerIcon {
    margin-right: 4px
}

.o-amazonWidget__sellerUrl {
    font-size: 10px
}

.o-amazonWidget__edit {
    position: relative;
    color: #a8abb1
}

.o-amazonWidget[data-size=small] {
    z-index: 4;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    min-height: 128px
}

.o-amazonWidget[data-size=small] .o-amazonWidget__thumb {
    align-self: center;
    width: 72px;
    padding-bottom: 72px;
    margin-bottom: 0
}

.o-amazonWidget[data-size=small] .o-amazonWidget__detail {
    margin-left: 16px
}

.o-amazonWidget[data-size=small] .o-amazonWidget__title {
    max-height: 42px;
    margin-bottom: 0;
    font-size: 14px;
    -webkit-line-clamp: 2
}


.o-widgetCard {
    width: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-widgetCard__iframe {
    vertical-align: top;
    border: 0;
    border-radius: 4px 4px 0 0
}

.o-widgetCard__image {
    overflow: hidden;
    border-radius: 4px 4px 0 0
}

.o-widgetCard__image img {
    vertical-align: top
}

.o-widgetCard__title {
    font-size: 14px;
    font-weight: 700
}

.o-widgetCard__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 15px;
    color: #787c7b
}

.o-widgetCard__more {
    color: #a8abb1
}

.o-widgetCard__provider {
    font-size: 10px
}

.o-widgetCard--small {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 12px 16px 12px 12px
}

.o-widgetCard--small .o-widgetCard__iframe, .o-widgetCard--small .o-widgetCard__image {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    margin-right: 16px;
    border-radius: 4px
}

.o-widgetCard--small .o-widgetCard__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.o-widgetCard--small .o-widgetCard__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 4px 0
}

.o-widgetCard--small .o-widgetCard__footer {
    padding: 0
}

.o-widgetCard--normal .o-widgetCard__video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%
}

.o-widgetCard--normal .o-widgetCard__iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.o-widgetCard--normal .o-widgetCard__image img {
    width: 100%;
    height: auto;
    max-height: 300px;
    -o-object-fit: contain;
    object-fit: contain
}


.o-creatorWidget__body {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-creatorWidget__body {
        padding: 24px
    }
}

.o-creatorWidget__item {
    max-width: 300px;
    margin-right: auto;
    margin-left: auto
}


.o-anyMessageModal__body {
    font-size: 16px;
    padding: 40px;
    text-align: center;
    white-space: pre-wrap
}

@media only screen and (max-width: 479px) {
    .o-anyMessageModal__body {
        padding: 24px
    }
}


.o-badgeModal__badgeList {
    max-height: 440px;
    overflow-y: auto
}

@media only screen and (max-width: 479px) {
    .o-badgeModal__badgeList {
        max-height: 360px
    }
}

.o-badgeModal__badgeListItem {
    position: relative;
    padding: 16px;
    border-bottom: 1px solid #f2f2f2
}

.o-badgeModal__badgeListItem:last-child {
    border-bottom: none
}

@media only screen and (min-width: 769px) {
    .o-badgeModal__badgeListItem:hover {
        background-color: #f7f9f9
    }
}

.o-badgeModal__badgeListItem__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-badgeModal__badgeIcon {
    width: 32px;
    height: 32px;
    color: #eca726
}

.o-badgeModal__badge {
    font-size: 32px
}

.o-badgeModal__name {
    margin-left: 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5
}


.o-basicFlashMessageModal__title {
    font-weight: 700
}

.o-basicFlashMessageModal__body {
    font-size: 16px;
    padding: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-basicFlashMessageModal__body {
        padding: 24px
    }
}


.m-userListItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px
}

@media only screen and (min-width: 769px) {
    .m-userListItem:hover {
        background-color: #f7f9f9
    }
}

.m-userListItem__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.m-userListItem__profile {
    display: block;
    margin-right: auto;
    margin-left: 16px;
    word-break: break-all
}

.m-userListItem__name {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 700;
    line-height: 1.5;
    font-size: 14px
}

.m-userListItem__nameLabel, .m-userListItem__official {
    display: inline;
    vertical-align: middle
}

.m-userListItem__official {
    margin-left: 4px;
    color: #2cb696
}

.m-userListItem__description {
    display: block;
    line-height: 1.5;
    color: #787c7b;
    font-size: 12px
}

.m-userListItem__action {
    position: relative;
    margin-left: 15px
}


.m-userList__item + .m-userList__item {
    border-top: 1px solid #f2f2f2
}

.m-userList__more {
    padding: 16px
}


.o-contentReviewers__body {
    max-height: 440px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

@media only screen and (max-width: 479px) {
    .o-contentReviewers__body {
        max-height: 360px
    }
}


.a-select {
    position: relative;
    display: block;
    overflow: hidden;
    color: #222;
    background: #fff
}

.a-select, .a-select__field {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.a-select__field {
    font-size: 14px;
    min-height: 40px;
    padding: 4px 32px 4px 16px;
    line-height: 1.5;
    text-overflow: ellipsis;
    vertical-align: top;
    cursor: pointer;
    background: transparent;
    background-image: none;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    outline: none;
    box-shadow: none
}

.a-select__field:focus {
    border: 1px solid #a8abb1
}

.a-select__field::-ms-expand {
    display: none
}


.m-formSelect__field {
    position: relative
}

.m-formSelect__select, .m-formSelect__select.is-error {
    border: 1px solid #ed4956
}

.m-formSelect__icon {
    position: absolute;
    top: 8px;
    right: 8px;
    pointer-events: none
}


.a-textarea {
    display: inline-block;
    width: 100%;
    min-height: 40px;
    padding: 8px;
    font-family: inherit;
    line-height: 1.5;
    color: #222;
    vertical-align: top;
    resize: vertical;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .a-textarea {
        font-size: 16px
    }
}

.a-textarea::-webkit-input-placeholder {
    color: rgba(34, 34, 34, .3)
}

.a-textarea::-moz-placeholder {
    color: rgba(34, 34, 34, .3)
}

.a-textarea:-ms-input-placeholder {
    color: rgba(34, 34, 34, .3)
}

.a-textarea::-ms-input-placeholder {
    color: rgba(34, 34, 34, .3)
}

.a-textarea::placeholder {
    color: rgba(34, 34, 34, .3)
}

.a-textarea:focus {
    border: 1px solid #a8abb1;
    outline: none
}

.a-textarea:disabled {
    color: #fff;
    cursor: not-allowed;
    background-color: #e6e6e6
}


.m-formTextarea__field {
    min-height: 100px
}

.m-formTextarea__field.is-error {
    border: 1px solid #ed4956
}


.o-customMenuModal__body {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-customMenuModal__body {
        padding: 24px
    }
}

.o-customMenuModal__item + .o-customMenuModal__item {
    margin-top: 24px
}

.o-customMenuModal__description {
    font-size: 12px;
    color: #787c7b
}

.o-customMenuModal__layout {
    margin-top: 32px
}

.o-customMenuModal__layoutTitle {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
}

.o-customMenuModal__layoutList {
    display: -webkit-box;
    display: flex
}

.o-customMenuModal__layoutItem {
    margin-right: 24px
}

.o-customMenuModal__layoutImage {
    width: 100px;
    height: 100px;
    cursor: pointer;
    border: 4px solid transparent
}

@media only screen and (min-width: 769px) {
    .o-customMenuModal__layoutImage:hover {
        border: 4px solid #e6e6e6
    }
}

.o-customMenuModal__layoutImage[data-active=true] {
    border: 4px solid #2cb696
}


.o-customLinkModal__body {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-customLinkModal__body {
        padding: 24px
    }
}

.o-customLinkModal__item + .o-customLinkModal__item {
    margin-top: 24px
}

.o-customLinkModal__description {
    font-size: 12px;
    color: #787c7b
}




.o-dateSelectModal__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 24px
}

.o-dateSelectModal__item {
    -webkit-box-flex: 1;
    flex: 1
}

.o-dateSelectModal__item + .o-dateSelectModal__item {
    margin-left: 16px
}


.o-deleteConfirm__body {
    padding: 40px 16px;
    text-align: center
}


.o-draftNoteEditConfirmModal__body {
    margin: 24px
}

.o-draftNoteEditConfirmModal__text {
    margin: 32px 16px 24px;
    font-weight: 700
}

.o-draftNoteEditConfirmModal__editButton + .o-draftNoteEditConfirmModal__editButton {
    margin-top: 16px
}


.m-modalShareButtons__message {
    font-size: 12px;
    margin-bottom: 8px;
    text-align: center
}

.m-modalShareButtons__message a {
    margin-right: 4px;
    margin-left: 4px;
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .m-modalShareButtons__message a:hover {
        color: #222;
        text-decoration: none
    }
}

.m-modalShareButtons__share {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.m-modalShareButtons__button {
    padding: 12px;
    margin-right: 8px;
    margin-left: 8px;
    color: #fff;
    cursor: pointer;
    border-radius: 50%
}

.m-modalShareButtons__button--twitter {
    background-color: #55acee
}

@media only screen and (min-width: 769px) {
    .m-modalShareButtons__button--twitter:hover {
        background-color: #2795e9
    }
}

.m-modalShareButtons__button--facebook {
    background-color: #1877f2
}

@media only screen and (min-width: 769px) {
    .m-modalShareButtons__button--facebook:hover {
        background-color: #0b5fcc
    }
}


.o-finishPostModal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
}

@media only screen and (max-width: 479px) {
    .o-finishPostModal__close {
        top: 8px;
        right: 8px
    }
}

@media only screen and (min-width: 769px) {
    .o-finishPostModal__close:hover {
        background-color: rgba(34, 34, 34, .5);
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-finishPostModal__hero {
    overflow: hidden;
    border-radius: 4px 4px 0 0
}

.o-finishPostModal__heroCount {
    padding-top: 48px;
    padding-bottom: 48px;
    cursor: default;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/achievements_bgCount.ef5c16a.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 360px 180px
}

.o-finishPostModal__heroCount--pattern_1 {
    background-color: #ec407a
}

.o-finishPostModal__heroCount--pattern_2 {
    background-color: #ffa726
}

.o-finishPostModal__heroCount--pattern_3 {
    background-color: #ffeb3b
}

.o-finishPostModal__heroCount--pattern_4 {
    background-color: #26a69a
}

.o-finishPostModal__heroCount--pattern_5 {
    background-color: #42a5f5
}

.o-finishPostModal__heroCount--pattern_6 {
    background-color: #7e57c2
}

.o-finishPostModal__heroNum {
    font-family: "Avenir Next", "Arial", sans-serif;
    font-size: 130px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    opacity: 0;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation: countModalAnimation.4s;
    animation: countModalAnimation.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes countModalAnimation{
    30% {
        text-shadow: 0 0 0 rgba(34, 34, 34, 0);
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        text-shadow: 8px 8px rgba(34, 34, 34, .1);
        opacity: 1;
        -webkit-transform: translateY(-4px) translateX(-4px);
        transform: translateY(-4px) translateX(-4px)
    }
}

@keyframes countModalAnimation{
    30% {
        text-shadow: 0 0 0 rgba(34, 34, 34, 0);
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        text-shadow: 8px 8px rgba(34, 34, 34, .1);
        opacity: 1;
        -webkit-transform: translateY(-4px) translateX(-4px);
        transform: translateY(-4px) translateX(-4px)
    }
}

.o-finishPostModal__heroImage {
    width: 100%;
    height: auto
}

.o-finishPostModal__body {
    padding: 24px 24px 32px
}

.o-finishPostModal__title {
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-finishPostModal__title {
        font-size: 16px
    }
}

.o-finishPostModal__description {
    font-size: 14px;
    text-align: center
}

.o-finishPostModal__description a {
    margin: 0 4px;
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-finishPostModal__description a:hover {
        color: #222;
        text-decoration: none
    }
}

.o-finishPostModal__share {
    padding-top: 16px;
    margin-top: 24px;
    border-top: 1px solid #f2f2f2
}


.m-formFile {
    font-size: 14px
}

.m-formFile__item {
    cursor: pointer
}

.m-formFile__item[data-disabled] {
    cursor: not-allowed
}

@media only screen and (min-width: 769px) {
    .m-formFile__item--hover:hover {
        border-color: #ccc
    }
}

.m-formFile__item--padded {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px dashed #e6e6e6
}

.m-formFile__item--padded .m-formFile__wrapper {
    width: 100%;
    height: 100%;
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .m-formFile__item--padded .m-formFile__wrapper {
        padding: 32px
    }
}

.m-formFile__item--align_center {
    text-align: center
}

.m-formFile__item--align_left {
    text-align: left
}

.m-formFile__item--align_right {
    text-align: right
}

.m-formFile__field {
    display: none
}

.m-formFile__description {
    margin-top: 8px;
    color: #787c7b;
    font-size: 12px
}

.m-formFile__description:empty {
    display: none
}


.m-formFileLabel {
    font-size: 14px
}


.m-uploadedImage {
    cursor: -webkit-grab;
    cursor: grab;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-uploadedImage {
        -webkit-transition: border-color .2s cubic-bezier(1, 0, 0, 1);
        transition: border-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-uploadedImage:hover {
        border-color: #e6e6e6
    }
}

.m-uploadedImage__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    justify-items: center;
    padding: 6px;
    border-bottom: 1px solid #e6e6e6
}

.m-uploadedImage__nav {
    display: -webkit-inline-box;
    display: inline-flex;
    justify-items: center
}

.m-uploadedImage__navButton {
    min-height: auto;
    padding: 0;
    margin-left: 16px;
    background: transparent
}

.m-uploadedImage__navButton .m-uploadedImage__icon {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .m-uploadedImage__navButton:hover .m-uploadedImage__icon {
        color: #787c7b
    }
}

@media only screen and (max-width: 359px) {
    .m-uploadedImage__navButton {
        margin-left: 8px
    }
}

.m-uploadedImage__navButton[disabled] {
    pointer-events: none;
    background: transparent
}

.m-uploadedImage__navButton[disabled] .m-uploadedImage__icon {
    color: #e6e6e6
}

.m-uploadedImage__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 700;
    font-size: 14px
}

@media only screen and (max-width: 359px) {
    .m-uploadedImage__title {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: start;
        align-items: flex-start
    }
}

.m-uploadedImage__label {
    margin-left: 8px
}

@media only screen and (max-width: 359px) {
    .m-uploadedImage__label {
        margin-top: 4px;
        margin-left: 0
    }
}

.m-uploadedImage__item {
    padding: 16px
}

.m-uploadedImage__image {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px
}

.m-uploadedImage__image img {
    width: auto;
    max-width: 400px;
    height: auto;
    max-height: 170px
}

.m-uploadedImage__description {
    font-size: 14px;
    margin-bottom: 8px;
    color: #787c7b
}


.o-editNoteForm__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: 100%
}

.o-editNoteForm__footerButton {
    margin-left: 16px
}


.a-checkbox {
    position: relative;
    z-index: 1;
    display: inline-block;
    min-height: 20px;
    padding-left: 20px;
    line-height: 2;
    cursor: pointer;
    font-size: 14px
}

.a-checkbox__field {
    position: absolute;
    width: 0;
    opacity: 0
}

.a-checkbox__field.is-error ~ .a-checkbox__check {
    color: #ed4956
}

.a-checkbox__field.is-error ~ .a-checkbox__check:before {
    border: 1px solid #ed4956
}

.a-checkbox__field:checked ~ .a-checkbox__check:after {
    display: block
}

.a-checkbox__field:checked ~ .a-checkbox__check:before {
    background-color: #2cb696;
    background-color: var(--customPrimaryColor);
    border: 1px solid #2cb696;
    border: 1px solid var(--customPrimaryColor)
}

.a-checkbox__field:disabled ~ .a-checkbox__check {
    color: #ed4956;
    cursor: not-allowed
}

.a-checkbox__field:disabled ~ .a-checkbox__check:before {
    background-color: #ccc;
    border: 1px solid #ccc
}

.a-checkbox__field:focus ~ .a-checkbox__check:before {
    border-color: #787c7b
}

.a-checkbox__field:checked:focus ~ .a-checkbox__check:before {
    background-color: #228d74;
    background-color: var(--customPrimaryDarkenColor);
    border-color: #228d74;
    border-color: var(--customPrimaryDarkenColor)
}

.a-checkbox__check {
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .a-checkbox__check:hover:before {
        border: 1px solid #787c7b
    }
}

.a-checkbox__check:after {
    position: absolute;
    top: 6px;
    left: 5px;
    display: block;
    display: none;
    width: 10px;
    height: 6px;
    content: "";
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.a-checkbox__check:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: "";
    background-color: #fff;
    border: 1px solid #a8abb1;
    border-radius: 4px
}

.a-checkbox__label {
    margin-left: 8px;
    line-height: 1.5
}



.m-accordion__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px 16px;
    font-weight: 700;
    color: #787c7b;
    cursor: pointer;
    font-size: 14px
}

.m-accordion__header.is-active {
    color: #222
}

.m-accordion__header.is-active .m-accordion__icon {
    color: #222;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.m-accordion__icon {
    color: #787c7b;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.m-accordion__body {
    padding: 16px
}

.m-accordion__size_small {
    padding: 2px 8px
}


.m-magazineCover {
    display: -webkit-box;
    display: flex
}

.m-magazineCover__eyecatch {
    position: relative;
    width: 80px;
    height: 40px;
    background-color: #f2f2f2;
    background-position: 50%;
    background-size: cover;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .m-magazineCover__eyecatch {
        width: 70px
    }
}

.m-magazineCover__status {
    position: absolute;
    width: 20px;
    height: 20px;
    padding: 2px;
    border-radius: 50%
}

.m-magazineCover__status--lock {
    top: -5px;
    left: -5px;
    background-color: #fff
}

.m-magazineCover__status--pay {
    top: -5px;
    right: -5px;
    color: #fff;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
}

.m-magazineCover__body {
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 16px;
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .m-magazineCover__body {
        margin-right: 8px;
        margin-left: 8px
    }
}

.m-magazineCover__title {
    font-weight: 700;
    color: #222;
    word-break: break-all;
    font-size: 14px
}

.m-magazineCover__name {
    color: #787c7b;
    word-break: break-all;
    font-size: 12px
}


.o-magazineListItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    padding: 16px
}

.o-magazineListItem + .o-magazineListItem {
    border-top: 1px solid #f2f2f2
}

.o-magazineListItem__user {
    -webkit-box-flex: 1;
    flex: 1
}


.o-magazineListForm__empty {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px
}

.o-magazineListForm__emptyDescription {
    font-size: 14px;
    -webkit-box-flex: 1;
    flex: 1
}

.o-magazineListForm__emptyImage {
    display: block;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 150px;
    height: 88px;
    margin-left: 8px;
    -o-object-fit: cover;
    object-fit: cover
}

@media only screen and (max-width: 479px) {
    .o-magazineListForm__emptyImage {
        width: 150px;
        height: 82px
    }
}

.o-magazineListForm__create {
    padding: 16px;
    border-top: 1px solid #f2f2f2
}

.o-magazineListForm__createIcon {
    margin-right: 8px
}

.o-magazineListForm__full {
    padding: 8px
}

.o-magazineListForm__edit {
    padding: 16px;
    border-top: 1px solid #f2f2f2
}

.o-magazineListForm__editForm {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: between;
    justify-content: between
}

.o-magazineListForm__editFormInput {
    -webkit-box-flex: 2;
    flex-grow: 2
}

.o-magazineListForm__editFormButton {
    padding: 0 8px
}

.o-magazineListForm__editFormCancel {
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-magazineListForm__editFormCancel {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-magazineListForm__editFormCancel:hover {
        color: #787c7b
    }
}

.o-magazineListForm__error {
    margin-top: 8px;
    color: #ed4956;
    font-size: 14px
}


.o-magazineList {
    background-color: #fff
}

.o-magazineList__header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: #f7f9f9
}

.o-magazineList__icon {
    margin-right: 4px;
    color: #787c7b
}

.o-magazineList__title {
    font-size: 12px;
    margin-right: auto;
    color: #787c7b
}

.o-magazineList__help {
    line-height: 1;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-magazineList__help:hover {
        color: #787c7b
    }
}


.o-advancedSetting {
    background-color: #f7f9f9;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-advancedSetting__item + .o-advancedSetting__item {
    margin-top: 24px
}

.o-advancedSetting__item--disabled {
    color: #a8abb1
}

.o-advancedSetting__time {
    display: -webkit-inline-box;
    display: inline-flex;
    margin-top: 16px
}

.o-advancedSetting__timeItem {
    min-width: 100px;
    cursor: pointer
}

.o-advancedSetting__timeItem + .o-advancedSetting__timeItem {
    margin-left: 8px
}

.o-advancedSetting__magazineList {
    max-height: 400px;
    overflow: hidden;
    overflow: auto;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

.o-advancedSetting__premiumLink {
    padding-bottom: 2px;
    margin-right: 2px;
    border-bottom: 1px solid #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-advancedSetting__premiumLink:hover {
        color: #787c7b;
        border-bottom: 1px solid #787c7b
    }
}


.a-tag {
    position: relative;
    display: inline-block;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    max-width: 100%;
    padding: 8px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.a-tag.is-winner {
    border: 1px solid #eca726
}

@media only screen and (min-width: 769px) {
    .a-tag.is-winner:hover {
        border: 1px solid #cd8c12
    }
}

.a-tag.is-winner .a-tag__label {
    color: #eca726
}

@media only screen and (min-width: 769px) {
    .a-tag:hover {
        border: 1px solid #a8abb1;
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-tag:hover .a-tag__close {
        color: #787c7b;
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }
}

.a-tag__badgeIcon {
    margin-right: 4px;
    color: #eca726
}

.a-tag__label {
    font-size: 14px;
    overflow: hidden;
    line-height: 1.5;
    color: #222;
    text-overflow: ellipsis;
    white-space: nowrap
}

.a-tag__close {
    margin-left: 8px;
    color: #a8abb1
}

.a-tag__link {
    display: block
}

.a-tag__size_mini {
    padding: 2px 8px
}

.a-tag__size_mini .a-tag__label {
    font-size: 12px
}

.a-tag__size_small {
    padding: 4px 10px
}

.a-tag__size_small .a-tag__label {
    font-size: 14px
}


.m-tagInput__title {
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 700
}

.m-tagInput__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    min-height: 40px;
    padding: 8px 0 0 8px;
    margin-bottom: 8px;
    color: #222;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 14px
}

.m-tagInput__body.is--error {
    border-color: #ed4956
}

.m-tagInput__item {
    max-width: calc(100% - 8px);
    margin: 0 8px 8px 0
}

.m-tagInput__alert {
    font-weight: 700;
    color: #f95;
    font-size: 12px
}

.m-tagInput__field {
    min-width: 180px;
    margin: 0 8px 8px 0
}

@media only screen and (max-width: 479px) {
    .m-tagInput__field {
        width: 100%
    }
}

.m-tagInput__fieldInput, .m-tagInput__fieldInput:focus, .m-tagInput__fieldInput:hover, .m-tagInput__fieldInput:not(:disabled):hover {
    border: 1px solid transparent
}

.m-tagInput__fieldInput.is--error {
    color: #ed4956
}

.m-tagInput__autocomplete {
    position: relative
}

.m-tagInput__autocompleteMenu {
    position: absolute;
    z-index: 2;
    width: 100%;
    max-height: 280px;
    margin-top: -4px;
    overflow: auto;
    border: 1px solid #e6e6e6;
    border-radius: 0 0 4px 4px
}

.m-tagInput__autocompleteItem {
    padding: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    background-color: #fff;
    font-size: 14px
}

@media only screen and (min-width: 769px) {
    .m-tagInput__autocompleteItem:hover {
        background-color: #f7f9f9
    }
}

.m-tagInput__autocompleteItem--active {
    background-color: #f7f9f9
}

.suggestion-item__hashtag {
    display: -webkit-box;
    display: flex;
    word-break: break-all;
    white-space: normal
}

.suggestion-item__hashtagText {
    -webkit-box-flex: 1;
    flex-grow: 1;
    padding-right: 8px
}

.suggestion-item__hashtagCount {
    color: #787c7b;
    text-align: right;
    white-space: nowrap
}


.m-tagList__title {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 700
}

.hashtag-recommend-group__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
}

.hashtag-recommend-group__item {
    display: inline-block;
    max-width: 100%;
    margin-right: 4px;
    margin-bottom: 4px
}


.o-hashtagInput-CategoriesSelector {
    margin-bottom: 24px
}

.o-hashtagInput-CategoriesSelector__label {
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
    font-weight: 700
}

.o-hashtagInput-CategoriesSelector__selectorsContainer {
    display: -webkit-box;
    display: flex
}

.o-hashtagInput-CategoriesSelector__selectorsContainer .m-formItem {
    -webkit-box-flex: 1;
    flex: 1 1 0px
}

.o-hashtagInput-CategoriesSelector__selectorsContainer .m-formItem:first-child {
    margin-right: 8px
}

.o-hashtagInput-CategoriesSelector__selectorsContainer .m-formItem:last-child {
    margin-left: 8px
}


.o-hashtagInput__title {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 700
}

.o-hashtagInput__item + .o-hashtagInput__item {
    margin-top: 16px
}

.o-hashtagInput__contestInfo {
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-hashtagInput__contestInfo {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-hashtagInput__contestInfo:hover {
        color: #787c7b
    }
}

.o-hashtagInput__contest {
    max-height: 300px;
    padding: 16px;
    overflow-y: auto;
    background: #f7f9f9;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (max-width: 768px) {
    .o-hashtagInput__contest {
        -webkit-overflow-scrolling: touch
    }
}

.o-hashtagInput__contestItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.o-hashtagInput__contestItem + .o-hashtagInput__contestItem {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
}

.o-hashtagInput__itemTitle {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 700
}


.o-onboardingNotice {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 24px;
    color: #222;
    background-color: #fff;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-onboardingNotice {
        padding: 16px
    }
}

.o-onboardingNotice[data-type=basic] {
    color: #222;
    background-color: #fff;
    border: 1px solid #e6e6e6
}

.o-onboardingNotice[data-type=basic] .o-onboardingNotice__description a, .o-onboardingNotice[data-type=basic] .o-onboardingNotice__title a {
    color: #2cb696
}

@media only screen and (min-width: 769px) {
    .o-onboardingNotice[data-type=basic] .o-onboardingNotice__description a:hover {
        color: #228d74
    }
}

.o-onboardingNotice[data-type=primary] {
    color: #fff;
    background-color: #2cb696
}

.o-onboardingNotice[data-type=primary] .o-onboardingNotice__close, .o-onboardingNotice[data-type=primary] .o-onboardingNotice__description {
    color: #fff
}

@media only screen and (min-width: 769px) {
    .o-onboardingNotice[data-type=primary] .o-onboardingNotice__close:hover {
        color: #e8f9f5
    }
}

.o-onboardingNotice[data-type=secondary] {
    color: #222;
    background-color: #f7f9f9;
    border: none
}

.o-onboardingNotice[data-size=small] {
    padding: 16px
}

.o-onboardingNotice[data-size=small] .o-onboardingNotice__thumb {
    width: 56px;
    height: 56px;
    margin-right: 16px;
    margin-left: 24px
}

.o-onboardingNotice[data-size=small] .o-onboardingNotice__title {
    font-size: 14px
}

.o-onboardingNotice[data-size=small] .o-onboardingNotice__description {
    margin-top: 4px;
    font-size: 12px
}

.o-onboardingNotice[data-size=small] .o-onboardingNotice__description:empty {
    margin-top: 0
}

.o-onboardingNotice[data-size=small] .o-onboardingNotice__actionList {
    margin-top: 8px
}

.o-onboardingNotice[data-clickable] {
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-onboardingNotice[data-clickable] {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-onboardingNotice[data-clickable]:hover {
        border-color: #ccc
    }
}

.o-onboardingNotice__thumb {
    width: auto;
    max-width: 96px;
    height: auto;
    max-height: 96px;
    margin-left: 16px
}

.o-onboardingNotice__thumbImg {
    width: 100%;
    height: auto;
    background-color: transparent
}

.o-onboardingNotice__detail {
    -webkit-box-flex: 1;
    flex: 1
}

@media only screen and (max-width: 479px) {
    .o-onboardingNotice__detail {
        display: block;
        margin-left: 0
    }
}

.o-onboardingNotice__title {
    font-weight: 700;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .o-onboardingNotice__title {
        font-size: 14px
    }
}

.o-onboardingNotice__description {
    margin-top: 8px;
    color: #787c7b;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .o-onboardingNotice__description {
        font-size: 12px
    }
}

.o-onboardingNotice__description:empty {
    margin-top: 0
}

@media only screen and (min-width: 769px) {
    .o-onboardingNotice__description a {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-onboardingNotice__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-onboardingNotice__close {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-onboardingNotice__close:hover {
        color: #787c7b
    }
}

.o-onboardingNotice__actionList {
    margin-top: 16px
}

.o-onboardingNotice__actionItem + .o-onboardingNotice__actionItem {
    margin-top: 8px
}

.o-onboardingNotice__onlyVisibleToYou {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px;
    color: #787c7b
}

.o-onboardingNotice__onlyVisibleToYouIcon {
    margin-right: 4px;
    color: #a8abb1
}

.o-onboardingNotice__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.o-onboardingNotice__bodyDetail {
    -webkit-box-flex: 1;
    flex: 1
}

.o-onboardingNotice__bodyAction {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-left: 16px
}



.m-formRadio__description {
    font-size: 14px;
    margin-bottom: 8px;
    color: #787c7b
}

.m-formRadio__item {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 32px;
    cursor: pointer
}

.m-formRadio__label {
    font-size: 16px;
    font-weight: 700
}

.m-formRadio__field {
    position: absolute;
    width: 0;
    opacity: 0
}

.m-formRadio__field:hover ~ .m-formRadio__check:after {
    display: block;
    background-color: #a8abb1
}

.m-formRadio__field:checked ~ .m-formRadio__check:before {
    border: 1px solid #2cb696;
    border: 1px solid var(--customPrimaryColor)
}

.m-formRadio__field:checked ~ .m-formRadio__check:after {
    display: block;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
}

.m-formRadio__field:checked:focus ~ .m-formRadio__check:before {
    border-color: #228d74;
    border-color: var(--customPrimaryDarkenColor)
}

.m-formRadio__field:checked:focus ~ .m-formRadio__check:after {
    background-color: #228d74;
    background-color: var(--customPrimaryDarkenColor)
}

.m-formRadio__check:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 24px;
    height: 24px;
    content: "";
    background-color: #fff;
    border: 1px solid #a8abb1;
    border-radius: 24px
}

.m-formRadio__check:after {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    display: none;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #2cb696;
    background-color: var(--customPrimaryColor);
    border-radius: 12px
}

.m-formRadio__check.is-error:before {
    border: 1px solid #ed4956
}


.o-priceSetting__selectBody {
    display: -webkit-box;
    display: flex
}

.o-priceSetting__selectItem + .o-priceSetting__selectItem {
    margin-left: 16px
}

.o-priceSetting__inputPrise {
    margin-top: 16px;
    margin-bottom: 8px
}


.space-b-1h {
    margin-bottom: 15px
}

.limited-settings__value:last-child {
    margin-bottom: 10px
}

.limited-settings .limited-settings__value {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 10px 0;
    font-weight: 700;
    line-height: 27px;
    text-align: right;
    border-bottom: 1px solid #e1e5e7
}

.limited-settings__value > span {
    display: block;
    margin-left: auto;
    font-weight: 400
}

.limited-settings__input {
    width: 100px !important
}

.txt-green {
    color: #41c9b4;
    cursor: pointer
}

.txt-grey {
    color: #898d8c
}


.o-refundSetting__help {
    margin-left: 4px;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-refundSetting__help:hover {
        color: #787c7b
    }
}

.o-refundSetting__description {
    margin: 8px 0 16px;
    font-size: 12px;
    color: #787c7b
}

.o-refundSetting__link {
    color: #2cb696
}

@media only screen and (min-width: 769px) {
    .o-refundSetting__link:hover {
        color: #228d74
    }
}


.o-editImageNoteForm__item {
    padding-right: 24px;
    padding-left: 24px;
    margin-top: 24px;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-editImageNoteForm__item {
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 16px;
        margin-bottom: 16px
    }
}

.o-editImageNoteForm__item:empty {
    padding: 0;
    margin: 0
}

.o-editImageNoteForm__item--separate {
    padding-top: 24px;
    border-top: 1px solid #e6e6e6
}

.o-editImageNoteForm__itemCard {
    margin-bottom: 16px
}


.m-fileContainer {
    cursor: -webkit-grab;
    cursor: grab;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-fileContainer {
        -webkit-transition: border-color .2s cubic-bezier(1, 0, 0, 1);
        transition: border-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-fileContainer:hover {
        border-color: #e6e6e6
    }
}

.m-fileContainer__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    justify-items: center;
    padding: 6px;
    border-bottom: 1px solid #e6e6e6
}

.m-fileContainer__nav {
    display: -webkit-inline-box;
    display: inline-flex;
    justify-items: center
}

.m-fileContainer__navIcon {
    margin-left: 16px;
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .m-fileContainer__navIcon {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-fileContainer__navIcon:hover {
        color: #787c7b
    }
}

.m-fileContainer__item {
    padding: 16px
}

.m-fileContainer__slot {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.m-fileContainer__slot img {
    width: auto;
    max-width: 400px;
    max-height: 170px
}

.m-fileContainer__slot iframe {
    width: 100%;
    height: 260px
}


.o-editMovieNoteForm__count {
    font-size: 14px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin-top: 8px;
    color: #787c7b
}

.o-editMovieNoteForm__item {
    padding-right: 24px;
    padding-left: 24px;
    margin-top: 24px;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-editMovieNoteForm__item {
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 16px;
        margin-bottom: 16px
    }
}

.o-editMovieNoteForm__item:empty {
    padding: 0;
    margin: 0
}

.o-editMovieNoteForm__iframe {
    width: 100%;
    height: 260px
}


.inner-4 {
    padding: 40px
}

.txt-center {
    text-align: center !important
}

.space-bottom-3h {
    margin-bottom: 35px
}

.space-top-1h {
    margin-top: 15px
}

.btn-medium {
    width: 110px;
    height: 31px;
    line-height: 31px
}

.btn {
    position: relative;
    display: block;
    /* width: 90px;    deleted by xman 2020.12.18 for dashboard .btn */
    height: 25px;
    font-size: 12px;
    line-height: 25px;
    color: #222;
    text-align: center;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px !important
}

.fl-left {
    float: left
}

.btn-high {
    color: #fff;
    background-color: #2cb696;
    border: 1px solid #2cb696
}

.fl-right {
    float: right
}


.o-editSoundNoteForm__item {
    padding-right: 24px;
    padding-left: 24px;
    margin-top: 24px;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-editSoundNoteForm__item {
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 16px;
        margin-bottom: 16px
    }
}

.o-editSoundNoteForm__item:empty {
    padding: 0;
    margin: 0
}


.m-inputCount__wrap {
    font-size: 14px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin-top: 8px;
    color: #787c7b
}


.o-editTalkNoteForm__item {
    padding-right: 24px;
    padding-left: 24px;
    margin-top: 24px;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-editTalkNoteForm__item {
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 16px;
        margin-bottom: 16px
    }
}

.o-editTalkNoteForm__item:empty {
    padding: 0;
    margin: 0
}

.o-editTalkNoteForm__file {
    text-align: left
}


.o-embedModal__body {
    font-size: 14px;
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-embedModal__body {
        padding: 24px
    }
}

.o-embedModal__message {
    margin-bottom: 16px
}

.o-embedModal__field {
    min-height: 100px
}


.o-homescreenTutorial {
    padding: 24px
}

.o-homescreenTutorial__step {
    margin-bottom: 16px;
    counter-reset: item
}

.o-homescreenTutorial__stepItem {
    padding-left: 1.3em;
    margin-bottom: 4px;
    text-indent: -1.3em
}

.o-homescreenTutorial__stepItem:before {
    font-weight: 700;
    content: counter(item) ".";
    counter-increment: item
}

.o-homescreenTutorial__img {
    width: 200px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 359px) {
    .o-homescreenTutorial__img {
        width: 170px
    }
}

.o-homescreenTutorial__img > img {
    width: 100%;
    height: auto
}


.o-imageCropModal {
    position: relative;
    overflow: hidden
}

.o-imageCropModal__body {
    text-align: center
}

.o-imageCropModal .cropperRound .cropper-face, .o-imageCropModal .cropperRound .cropper-view-box {
    border-radius: 50%
}

.o-imageCropModal .cropper-line, .o-imageCropModal .cropper-point {
    background-color: transparent !important
}

.o-imageCropModal .cropper-view-box {
    outline: 0
}

.o-imageCropModal__croppingGuideForCoverImage {
    position: absolute;
    top: 0;
    right: 0;
    left: 0
}

.o-imageCropModal__croppingGuideForCoverImage .outlined {
    outline-width: 4px;
    outline-style: solid;
    outline-color: #fff;
    outline-offset: -4px
}

.o-imageCropModal__setting {
    padding: 24px
}

.o-imageCropModal__slider {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #787c7b
}

.o-imageCropModal__sliderIcon {
    margin: 0 8px
}

.o-imageCropModal__attention {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #787c7b;
    font-size: 12px
}

.o-imageCropModal__attentionIcon {
    margin-right: 4px
}


.o-galleryModal__image {
    width: 100%;
    height: auto;
    vertical-align: top;
    border-bottom: 1px solid #f2f2f2
}

.o-galleryModal__body {
    padding: 24px
}

.o-galleryModal__item {
    display: -webkit-box;
    display: flex
}

.o-galleryModal__item + .o-galleryModal__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
}

.o-galleryModal__title {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 110px;
    font-weight: 700;
    white-space: nowrap;
    font-size: 14px
}

.o-galleryModal__description {
    -webkit-box-flex: 1;
    flex: 1;
    font-size: 14px
}

.o-galleryModal__author {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: #787c7b;
    font-size: 14px
}

.o-galleryModal__authorImage {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px
}

.o-galleryModal__keyword {
    display: -webkit-inline-box;
    display: inline-flex;
    flex-wrap: wrap
}

.o-galleryModal__keywordItem {
    margin-top: 4px;
    margin-right: 4px;
    margin-bottom: 4px
}


.o-likerModal__userList {
    max-height: 440px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

@media only screen and (max-width: 479px) {
    .o-likerModal__userList {
        max-height: 360px
    }
}

.o-likerModal__other {
    padding: 8px 16px;
    color: #787c7b;
    font-size: 14px;
    border-bottom: 1px solid #f2f2f2
}


.o-loginSignupModal__body {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-loginSignupModal__body {
        padding: 32px
    }
}

.o-loginSignupModal__message {
    margin-bottom: 40px;
    text-align: center;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .o-loginSignupModal__message {
        margin-bottom: 16px
    }
}

.o-loginSignupModal__button {
    margin-top: 16px
}


.m-richModalContent {
    max-width: 100%;
    padding: 16px;
    margin: auto
}

@media only screen and (max-width: 479px) {
    .m-richModalContent {
        padding: 16px 0
    }
}

.m-richModalContent__panel {
    position: relative;
    width: auto;
    max-width: 480px;
    background-color: #fff;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .m-richModalContent__panel {
        max-width: calc(100% - 64px);
        margin: 0 auto
    }
}

@media only screen and (max-width: 359px) {
    .m-richModalContent__panel {
        max-width: calc(100% - 32px);
        margin: 0 auto
    }
}

.m-richModalContent__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: block;
    width: 32px;
    height: 32px;
    padding: 4px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .m-richModalContent__close {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-richModalContent__close:hover {
        background-color: rgba(34, 34, 34, .5)
    }
}


.m-richModalContentStandardLayout__image {
    overflow: hidden;
    border-radius: 4px 4px 0 0
}

.m-richModalContentStandardLayout__image img {
    display: block;
    width: 100%;
    height: auto
}

.m-richModalContentStandardLayout__main {
    padding: 24px
}

.m-richModalContentStandardLayout__title {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 18px
}

@media only screen and (max-width: 479px) {
    .m-richModalContentStandardLayout__title {
        font-size: 16px
    }
}


.o-signupModal__text {
    margin: 16px 0;
    font-size: 14px
}

.o-signupModal__text:last-child {
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .o-signupModal__text {
        font-size: 12px
    }
}

.o-signupModal__action {
    margin: 16px 0
}

.o-signupModal__action:last-child {
    margin-bottom: 0
}

.o-signupModal__actionItem + .o-signupModal__actionItem {
    margin-top: 8px
}

.o-signupModal__boundary {
    position: relative;
    height: 12px;
    margin: 24px 0 16px
}

@media only screen and (max-width: 479px) {
    .o-signupModal__boundary {
        height: 10px
    }
}

.o-signupModal__boundary:after {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 0;
    content: "";
    border-top: 1px solid #f2f2f2
}

.o-signupModal__boundaryLabel {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    padding: 0 8px;
    line-height: 1;
    color: #787c7b;
    background-color: #fff;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    font-size: 12px
}

@media only screen and (max-width: 479px) {
    .o-signupModal__boundaryLabel {
        font-size: 10px
    }
}

.o-signupModal__subAction {
    margin: 16px 0
}

.o-signupModal__subAction:last-child {
    margin-bottom: 0
}

.o-signupModal__subActionItem + .o-signupModal__subActionItem {
    margin-top: 8px
}


.o-magazineArrangeNotesItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    min-height: 90px;
    margin-top: 8px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-magazineArrangeNotesItem.o-magazineArrangeNotesItem--sortable {
    cursor: -webkit-grab;
    cursor: grab
}

@media only screen and (min-width: 769px) {
    .o-magazineArrangeNotesItem.o-magazineArrangeNotesItem--sortable:hover {
        border: 1px solid #ccc
    }
}

.o-magazineArrangeNotesItem__sortNav {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    border-right: 1px solid #e6e6e6
}

.o-magazineArrangeNotesItem__sortNavIcon {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 4px;
    color: #a8abb1
}

.o-magazineArrangeNotesItem__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 12px
}

.o-magazineArrangeNotesItem__detailMeta {
    display: -webkit-box;
    display: flex
}

@media only screen and (max-width: 479px) {
    .o-magazineArrangeNotesItem__detailMeta {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }
}

.o-magazineArrangeNotesItem__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
}

.o-magazineArrangeNotesItem__bodyName {
    font-size: 12px;
    color: #787c7b;
    word-break: break-all
}

.o-magazineArrangeNotesItem__bodyDate {
    font-size: 12px;
    padding-right: 8px;
    color: #787c7b;
    white-space: nowrap
}

.o-magazineArrangeNotesItem__bodyDate:before {
    margin: 0 4px;
    color: #787c7b;
    content: "・"
}

.o-magazineArrangeNotesItem__bodyBack {
    margin-left: auto;
    font-size: 12px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .o-magazineArrangeNotesItem__bodyBack:hover {
        color: #222
    }
}

.o-magazineArrangeNotesItem__bodyDelete {
    margin-left: auto;
    color: #a8abb1
}

.o-magazineArrangeNotesItem__thumb {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-magazineArrangeNotesItem__thumbImage {
    width: 40px;
    height: 40px;
    margin-left: 16px;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover
}

.o-magazineArrangeNotesItem__pinnedTag {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 4px;
    line-height: 1;
    color: #787c7b;
    font-size: 12px
}

.o-magazineArrangeNotesItem__pinnedTagIcon {
    margin-right: 4px
}

.o-magazineArrangeNotesItem__bodyTitle {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px
}

.o-magazineArrangeNotesItem__delete {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 12px 16px 12px 0;
    cursor: pointer
}


.o-magazineArrangeNotes__header {
    position: relative
}

.o-magazineArrangeNotes__bodyLoading {
    margin: 20px 0
}

.o-magazineArrangeNotes__sort {
    position: absolute;
    top: -4px;
    right: 0
}

.o-magazineArrangeNotes__wrap {
    height: 100%;
    padding: 8px;
    background-color: #f7f9f9
}

.o-magazineArrangeNotes__pinNote {
    padding: 8px 0
}

.o-magazineArrangeNotes__pinnedNote {
    margin-top: 8px
}

.o-magazineArrangeNotes__pinnedNote:empty {
    margin: 0
}

.o-magazineArrangeNotes__deletedNotes {
    margin-top: 8px
}


.o-magazineDescription {
    padding: 24px
}

.o-magazineDescription__title {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 700
}

.o-magazineDescription__description {
    font-size: 14px;
    margin-bottom: 16px
}

.o-magazineDescription__name {
    color: #787c7b
}

.o-magazineDescription__count, .o-magazineDescription__name {
    font-size: 12px;
    margin-bottom: 16px
}

.o-magazineDescription__price {
    display: -webkit-box;
    display: flex;
    align-self: center
}

.o-magazineDescription__priceLabel {
    margin-left: 8px
}

.o-magazineDescription__sns {
    display: -webkit-inline-box;
    display: inline-flex
}

.o-magazineDescription__snsLink {
    margin-right: 8px;
    color: #a8abb1
}


.o-magazineLeave__body {
    padding: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-magazineLeave__body {
        padding: 24px
    }
}

.o-magazineLeave__name {
    font-weight: 700
}

.o-magazineLeave__alert {
    margin-top: 16px;
    font-weight: 700;
    color: #f95;
    font-size: 14px
}


.o-magazineDeactivate__body {
    padding: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-magazineDeactivate__body {
        padding: 24px
    }
}

.o-magazineDeactivate__name {
    font-weight: 700
}

.o-magazineDeactivate__alert {
    margin-top: 16px;
    font-weight: 700;
    color: #f95;
    font-size: 14px
}


.o-magazineAuthority__body {
    padding: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-magazineAuthority__body {
        padding: 24px
    }
}

.o-magazineAuthority__name {
    font-weight: 700
}


.o-magazineResendInvitation__body {
    padding: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-magazineResendInvitation__body {
        padding: 24px
    }
}

.o-magazineResendInvitation__name {
    font-weight: 700
}


.m-magazineDistributeItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.m-magazineDistributeItem__avatar {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px
}

.m-magazineDistributeItem__body {
    margin-right: 16px
}

.m-magazineDistributeItem__name {
    font-weight: 700;
    word-break: break-all;
    font-size: 14px
}

.m-magazineDistributeItem__role {
    font-size: 12px;
    line-height: 1;
    color: #787c7b
}

.m-magazineDistributeItem__number {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: auto
}

.m-magazineDistributeItem__numberField {
    margin-right: 8px
}

.m-magazineDistributeItem__numberFixed {
    font-size: 16px;
    margin-right: 8px;
    margin-left: 8ex;
    font-weight: 700
}

.m-magazineDistributeItem__numberRatio {
    font-size: 14px
}


.o-magazineDistribute__body {
    padding: 24px
}

@media only screen and (max-width: 479px) {
    .o-magazineDistribute__body {
        padding: 16px
    }
}

.o-magazineDistribute__item + .o-magazineDistribute__item {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
}

.o-magazineDistribute__error {
    margin-top: 16px;
    font-weight: 700;
    color: #ed4956;
    font-size: 14px
}


.o-magazineDistributeConfirm__body {
    padding: 24px
}

@media only screen and (max-width: 479px) {
    .o-magazineDistributeConfirm__body {
        padding: 16px
    }
}

.o-magazineDistributeConfirm__item + .o-magazineDistributeConfirm__item {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
}


.m-pickUserItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.m-pickUserItem__avatar {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px
}

.m-pickUserItem__name {
    margin-right: 16px;
    font-weight: 700;
    font-size: 14px;
    word-break: break-all
}

.m-pickUserItem__delete {
    margin-left: auto;
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .m-pickUserItem__delete {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-pickUserItem__delete:hover {
        color: #787c7b
    }
}


.o-userPick {
    position: relative
}

.o-userPick__dropdown {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 300px;
    margin-top: -4px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #a8abb1;
    border-top: none;
    border-radius: 0 0 4px 4px
}

.o-userPick__item + .o-userPick__item {
    border-top: 1px solid #f2f2f2
}

.o-userPick__itemLink {
    display: -webkit-box;
    display: flex;
    padding: 16px
}

.o-userPick__itemAvatar {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px
}

.o-userPick__itemName {
    font-weight: 700;
    font-size: 14px
}

.o-userPick__itemUrl {
    font-size: 12px;
    line-height: 1;
    color: #787c7b
}

.o-userPick__selected {
    padding: 16px;
    margin-top: 8px;
    background-color: #f7f9f9;
    border-radius: 4px
}

.o-userPick__selectedItem + .o-userPick__selectedItem {
    margin-top: 16px
}


.o-magazineUserpick__body {
    padding: 24px
}

@media only screen and (max-width: 479px) {
    .o-magazineUserpick__body {
        padding: 16px
    }
}

.o-magazineUserpick__premium {
    padding: 24px;
    margin-top: 16px;
    text-align: center;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-magazineUserpick__premium {
        text-align: left
    }
}

.o-magazineUserpick__premiumTitle {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
}

.o-magazineUserpick__premiumDescription {
    font-size: 12px
}

.o-magazineUserpick__premiumButton {
    margin-top: 16px
}

.o-magazineUserpick__limit {
    margin-top: 16px;
    font-weight: 700;
    color: #ed4956;
    text-align: center;
    font-size: 14px
}


.o-magazineEditorModal__other {
    padding: 16px 24px;
    color: #787c7b;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .o-magazineEditorModal__other {
        padding: 8px 16px
    }
}


.o-magazineHaving__body {
    max-height: 440px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

@media only screen and (max-width: 479px) {
    .o-magazineHaving__body {
        max-height: 360px
    }
}

.o-magazineHaving__item + .o-magazineHaving__item {
    border-top: 1px solid #f2f2f2
}

@media only screen and (max-width: 768px) {
    .o-magazineHaving__item {
        margin-bottom: 1px
    }
}

.o-magazineHaving__link {
    display: block;
    padding: 16px
}

@media only screen and (min-width: 769px) {
    .o-magazineHaving__link:hover {
        background-color: #f7f9f9
    }
}

.o-magazineHaving__more {
    padding: 16px
}

.o-magazineHaving__loading {
    padding: 32px
}


.o-topicListItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f2f2f2
}

.o-topicListItem__content {
    -webkit-box-flex: 1;
    flex: 1
}

.o-topicListItem__name {
    font-size: 14px;
    font-weight: 700
}

.o-topicListItem__subname {
    font-size: 12px;
    color: #787c7b
}


.o-topicList {
    background-color: #fff
}

.o-topicList__icon {
    margin-right: 8px
}

.o-topicList__title {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 16px;
    color: #787c7b;
    background-color: #f7f9f9;
    font-size: 12px
}


.o-modalMagazineList__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: center;
    justify-content: center
}

.o-modalMagazineList__body {
    max-height: 400px;
    overflow: auto
}


.o-magazineSuspendModal__body {
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .o-magazineSuspendModal__body {
        padding: 24px
    }
}

.o-magazineSuspendModal__read {
    margin-bottom: 16px;
    text-align: center;
    font-size: 14px
}

.o-magazineSuspendModal__attention {
    padding: 16px;
    background-color: #f7f9f9;
    border: 1px solid #e6e6e6;
    font-size: 16px
}


.o-magazineSuspendCompletedModal__body {
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .o-magazineSuspendCompletedModal__body {
        padding: 24px
    }
}

.o-magazineSuspendCompletedModal__read {
    margin-bottom: 24px
}

.o-magazineSuspendCompletedModal__suspendedAt {
    font-weight: 700
}

.o-magazineSuspendCompletedModal__question {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
}

.o-magazineSuspendCompletedModal__option {
    color: #787c7b
}

.o-magazineSuspendCompletedModal__checkbox {
    margin-bottom: 16px
}

.o-magazineSuspendCompletedModal__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
}

.o-magazineSuspendCompletedModal__footer button:first-child {
    margin-left: 0
}


.m-paywallRemainingContentLabel__count {
    font-size: 12px;
    color: #787c7b
}

.m-paywallRemainingContentLabel__countWarning {
    display: inline;
    margin-right: 4px;
    color: #f95
}

.m-paywallRemainingContentLabel__countText {
    font-size: 12px;
    display: inline;
    color: #787c7b
}

.m-paywallRemainingContentLabel__countDivider {
    display: inline;
    margin-right: 4px;
    margin-left: 4px
}


.m-purchaseCover {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.m-purchaseCover__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-align: start;
    align-items: flex-start
}

@media only screen and (max-width: 479px) {
    .m-purchaseCover__body {
        display: block
    }
}

.m-purchaseCover__cover {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 16px
}

.m-purchaseCover__coverImage {
    border: 1px solid #f2f2f2
}

.m-purchaseCover__coverImage--note {
    width: 40px;
    height: 40px;
    border-radius: 4px
}

.m-purchaseCover__coverImage--magazine {
    width: 80px;
    height: 40px;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover
}

@media only screen and (max-width: 479px) {
    .m-purchaseCover__coverImage--magazine {
        width: 72px
    }
}

.m-purchaseCover__title {
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.m-purchaseCover__author {
    font-size: 14px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all
}

.m-purchaseCover__action {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .m-purchaseCover__action {
        -webkit-box-pack: start;
        justify-content: flex-start;
        margin-top: 16px;
        margin-left: 0
    }
}

.m-purchaseCover__price {
    font-weight: 700;
    color: #2cb696;
    color: var(--customPrimaryColor);
    text-align: right;
    white-space: nowrap
}

.m-purchaseCover__warning {
    display: inline-block;
    margin-top: 4px
}

.m-purchaseCover__caution {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 8px;
    margin-left: 8px
}

@media only screen and (max-width: 479px) {
    .m-purchaseCover__caution {
        margin-top: 0
    }
}

.m-purchaseCover__cautionLabel {
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 22px;
    padding: 5px 8px;
    margin-right: 4px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    background-color: #f95;
    border-radius: 11px;
    font-size: 12px
}

.m-purchaseCover__cautionIcon {
    margin-right: 4px
}

.m-purchaseCover__help {
    height: 16px;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .m-purchaseCover__help {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-purchaseCover__help:hover {
        color: #787c7b
    }
}


.o-magazineSuspendConfirmModal__alert {
    padding: 8px;
    margin-bottom: 32px;
    color: #fff;
    text-align: center;
    background-color: #f95;
    font-size: 14px
}

.o-magazineSuspendConfirmModal__message {
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
}

.o-magazineSuspendConfirmModal__magazine {
    padding: 16px;
    margin: 0 24px 24px;
    background-color: #f7f9f9;
    border-radius: 4px
}


.m-confirmListItem__title {
    font-size: 14px;
    margin-bottom: 8px;
    color: #787c7b
}

.m-confirmListItem__body {
    font-weight: 700
}


.o-unsubscribeModal__item {
    margin: 24px
}

.o-unsubscribeModal__item + .o-unsubscribeModal__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
}

.o-unsubscribeModal__item--target {
    padding: 24px;
    margin: 0;
    background-color: #f7f9f9
}


.o-unsubscribeConfirmModal__body {
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .o-unsubscribeConfirmModal__body {
        padding: 24px
    }
}

.o-unsubscribeConfirmModal__read {
    margin-bottom: 24px
}

.o-unsubscribeConfirmModal__header {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px
}

.o-unsubscribeConfirmModal__option {
    color: #787c7b
}

.o-unsubscribeConfirmModal__attention {
    margin-bottom: 16px;
    color: #787c7b;
    font-size: 12px
}

.o-unsubscribeConfirmModal__checkbox {
    margin-bottom: 16px
}


.o-creatorQrCodeModal__header {
    font-weight: 700
}

.o-creatorQrCodeModal__body {
    padding: 24px
}

.o-creatorQrCodeModal__qrCode {
    text-align: center
}

.o-creatorQrCodeModal__description {
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center;
    font-size: 14px
}

.o-creatorQrCodeModal__exampleNotes {
    font-weight: 400;
    color: #787c7b;
    text-align: center;
    font-size: 14px
}


.o-pickUrlname__body {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-pickUrlname__body {
        padding: 24px
    }
}

.o-pickUrlname__title {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center
}

.o-pickUrlname__field {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-pickUrlname__fieldDomain {
    -webkit-box-flex: 1;
    flex: 1;
    width: 60px;
    font-size: 12px
}

.o-pickUrlname__fieldInput {
    -webkit-box-flex: 2;
    flex: 2;
    margin-left: 16px;
    border: none
}

.o-pickUrlname__error {
    font-size: 14px;
    color: #ed4956
}

.o-pickUrlname__description {
    margin-top: 16px;
    font-size: 12px;
    color: #787c7b
}

.o-pickUrlname__descriptionItem + .o-pickUrlname__descriptionItem {
    margin-top: 8px
}

.o-pickUrlname__action {
    margin-top: 16px
}

.o-pickUrlname__about {
    display: block;
    margin-top: 16px;
    color: #2cb696;
    text-align: center;
    font-size: 14px
}


.o-premiumSuspendAgreementModal__body {
    padding: 24px
}

.o-premiumSuspendAgreementModal__caption {
    margin-bottom: 16px;
    text-align: center
}

.o-premiumSuspendAgreementModal__notes {
    padding: 24px 24px 24px 40px;
    list-style-type: disc;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

.o-premiumSuspendAgreementModal__notesItem {
    font-weight: 700;
    font-size: 14px
}

.o-premiumSuspendAgreementModal__notesItem + .o-premiumSuspendAgreementModal__notesItem {
    margin-top: 8px
}

.o-premiumSuspendAgreementModal__subNotes {
    padding: 0 0 0 16px;
    font-weight: 400
}

.o-premiumSuspendAgreementModal__subNotesItem {
    padding: 0;
    margin-top: 4px;
    list-style-type: disc
}


.o-premiumSuspendConfirmModal__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    padding: 24px
}

.o-premiumSuspendConfirmModal__planImg {
    width: 128px;
    height: auto;
    margin-bottom: 24px;
    vertical-align: top;
    border-radius: 50%
}

.o-premiumSuspendConfirmModal__planInfo {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px;
    line-height: 1
}

.o-premiumSuspendConfirmModal__planName {
    font-size: 14px
}

.o-premiumSuspendConfirmModal__planPrice {
    margin-left: 8px;
    font-weight: 700
}

.o-premiumSuspendConfirmModal__limit {
    color: #787c7b;
    text-align: center;
    font-size: 14px
}


.o-previewLinkModal__body {
    font-size: 14px;
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-previewLinkModal__body {
        padding: 24px
    }
}

.o-previewLinkModal__message {
    margin-bottom: 16px
}

.o-previewLinkModal__field {
    min-height: 100px
}


.m-supportSelectPrice {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.m-supportSelectPrice__item {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 8px 4px;
    border: 2px solid transparent;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-supportSelectPrice__item:hover {
        background-color: #f7f9f9
    }
}

.m-supportSelectPrice__item.is-active {
    color: #2cb696;
    color: var(--customPrimaryColor);
    background-color: #fff;
    border: 2px solid #2cb696;
    border: 2px solid var(--customPrimaryColor)
}

.m-supportSelectPrice__icon {
    width: 64px
}

@media only screen and (max-width: 479px) {
    .m-supportSelectPrice__icon {
        width: 48px
    }
}

.m-supportSelectPrice__link {
    display: block;
    text-align: center
}

.m-supportSelectPrice__customField {
    width: 70px
}

@media only screen and (max-width: 479px) {
    .m-supportSelectPrice__customField {
        width: 60px
    }
}

.m-supportSelectPrice__price {
    font-weight: 700;
    font-size: 18px;
    line-height: 1
}

@media only screen and (max-width: 479px) {
    .m-supportSelectPrice__price {
        font-size: 16px
    }
}

.m-supportSelectPrice__unit {
    font-size: 12px;
    margin-left: 2px;
    line-height: 1
}

.m-supportSelectPrice__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 30px
}


.o-purchaseSupport__title {
    font-size: 18px;
    margin: 24px 24px 8px;
    font-weight: 700;
    text-align: center
}

.o-purchaseSupport__link {
    font-size: 14px;
    display: block;
    color: #787c7b;
    text-align: center;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-purchaseSupport__link:hover {
        color: #222
    }
}

.o-purchaseSupport__avatar {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px
}

.o-purchaseSupport__body {
    margin: 24px
}

.o-purchaseSupport__item + .o-purchaseSupport__item {
    margin-top: 24px
}


.o-purchaseOneshotContent__body {
    padding-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-purchaseOneshotContent__body {
        padding-bottom: 16px
    }
}

.o-purchaseOneshotContent__item {
    margin-right: 24px;
    margin-left: 24px
}

@media only screen and (max-width: 479px) {
    .o-purchaseOneshotContent__item {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-purchaseOneshotContent__item + .o-purchaseOneshotContent__item {
    margin-top: 16px
}

.o-purchaseOneshotContent__item--target {
    padding: 16px 24px;
    margin-right: 0;
    margin-left: 0;
    background-color: #f7f9f9
}

@media only screen and (max-width: 479px) {
    .o-purchaseOneshotContent__item--target {
        padding: 16px
    }
}

.o-purchaseOneshotContent__item--border {
    padding-top: 16px;
    border-top: 1px solid #f2f2f2
}

.o-purchaseOneshotContent__itemInline {
    display: inline-block
}

.o-purchaseOneshotContent__help {
    margin-left: 8px
}

.o-purchaseOneshotContent__helpLink {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-purchaseOneshotContent__helpLink {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-purchaseOneshotContent__helpLink:hover {
        color: #787c7b
    }
}

.o-purchaseOneshotContent__helpSupport {
    font-size: 14px;
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-purchaseOneshotContent__helpSupport:hover {
        color: #222
    }
}

.o-purchaseOneshotContent__helpPay {
    font-size: 14px;
    display: block;
    color: #787c7b;
    text-align: center;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-purchaseOneshotContent__helpPay:hover {
        color: #222
    }
}

.o-purchaseOneshotContent__payment {
    display: -webkit-inline-box;
    display: inline-flex
}

.o-purchaseOneshotContent__paymentLabel {
    font-size: 14px
}

.o-purchaseOneshotContent__paymentChange {
    font-size: 14px;
    margin-left: 8px;
    color: #2cb696;
    color: var(--customPrimaryColor)
}

.o-purchaseOneshotContent__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: 100%
}

.o-purchaseOneshotContent__footerButton {
    margin-left: 16px
}


.o-purchaseSupportPaymentMethod__carrier {
    margin: 24px 0 24px 32px
}

.o-purchaseSupportPaymentMethod__about {
    margin-top: 24px
}

.o-purchaseSupportPaymentMethod__helpCarrier {
    font-size: 14px;
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-purchaseSupportPaymentMethod__helpCarrier:hover {
        color: #222
    }
}

.o-purchaseSupportPaymentMethod__item + .o-purchaseSupportPaymentMethod__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
}

.o-purchaseSupportPaymentMethod__body {
    margin: 24px
}


.m-creditCardForm__item + .m-creditCardForm__item {
    margin-top: 24px
}

.m-creditCardForm__item--security {
    display: -webkit-box;
    display: flex
}

.m-creditCardForm__cardimage {
    display: block;
    width: 260px;
    max-width: 100%;
    max-height: 34px;
    margin: 24px auto
}

.m-creditCardForm__limit, .m-creditCardForm__limitSeparate {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.m-creditCardForm__limitSeparate {
    margin-right: 16px;
    margin-left: 16px
}

.m-creditCardForm__securityImage {
    height: 40px;
    margin-left: 8px
}

.m-creditCardForm__note {
    font-size: 14px;
    margin-top: 24px;
    color: #787c7b
}

.m-creditCardForm__noteLink {
    color: #2cb696;
    color: var(--customPrimaryColor)
}


.o-purchaseCreditCardInput__body {
    margin: 24px
}

.o-purchaseCreditCardInput__item + .o-purchaseCreditCardInput__item {
    margin-top: 24px
}

.o-purchaseCreditCardInput__item--segment {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #f2f2f2
}

.o-purchaseCreditCardInput__note {
    font-size: 14px;
    margin-top: 24px;
    color: #787c7b
}

.o-purchaseCreditCardInput__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: 100%
}

.o-purchaseCreditCardInput__footerButton {
    margin-left: 16px
}


.o-purchaseSupportConfirm__title {
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
}

.o-purchaseSupportConfirm__avatar {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px
}

.o-purchaseSupportConfirm__item {
    margin: 24px
}

.o-purchaseSupportConfirm__item + .o-purchaseSupportConfirm__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
}

.o-purchaseSupportConfirm__item--target {
    padding: 16px 24px;
    margin: 0;
    background-color: #f7f9f9
}

.o-purchaseSupportConfirm__item--target + .o-purchaseSupportConfirm__item {
    padding-top: 0;
    border-top: 0
}

.o-purchaseSupportConfirm__credit {
    margin-bottom: 8px
}

.o-purchaseSupportConfirm__count {
    font-size: 14px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    color: #787c7b
}


.o-purchaseNoteFlowChoiceModal {
    padding: 40px
}

.o-purchaseNoteFlowChoiceModal__item + .o-purchaseNoteFlowChoiceModal__item {
    padding-top: 32px;
    margin-top: 32px;
    border-top: 1px solid #f2f2f2
}

.o-purchaseNoteFlowChoiceModal__button + .o-purchaseNoteFlowChoiceModal__button {
    margin-top: 8px
}

.o-purchaseNoteFlowChoiceModal__title {
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
}


.o-purchaseNoteGuestConfirm__item {
    margin: 24px
}

.o-purchaseNoteGuestConfirm__item + .o-purchaseNoteGuestConfirm__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
}

.o-purchaseNoteGuestConfirm__item--target {
    padding: 16px 24px;
    margin: 0;
    background-color: #f7f9f9
}

.o-purchaseNoteGuestConfirm__item--target + .o-purchaseNoteGuestConfirm__item {
    padding-top: 0;
    border-top: 0
}

.o-purchaseNoteGuestConfirm__link {
    color: #2cb696;
    color: var(--customPrimaryColor)
}


.o-purchaseNoteGuestComplete__thanks {
    padding: 32px 40px
}

.o-purchaseNoteGuestComplete__thanksNum {
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
}

.o-purchaseNoteGuestComplete__thanksMessage {
    margin-bottom: 8px;
    font-weight: 700;
    color: #ed4956;
    text-align: center;
    font-size: 14px
}

.o-purchaseNoteGuestComplete__signup {
    padding: 32px 24px 24px;
    margin: 0 16px 16px;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

.o-purchaseNoteGuestComplete__signupTitle {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
}

.o-purchaseNoteGuestComplete__signupDescription {
    margin-bottom: 24px;
    font-size: 14px
}

.o-purchaseNoteGuestComplete__signupItem + .o-purchaseNoteGuestComplete__signupItem {
    margin-top: 24px
}

.o-purchaseNoteGuestComplete__signupItem__description {
    font-size: 12px
}

.o-purchaseNoteGuestComplete__signupName {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
}

.o-purchaseNoteGuestComplete__signupValue {
    font-size: 14px
}

.o-purchaseNoteGuestComplete__signupLink {
    color: #2cb696;
    color: var(--customPrimaryColor)
}

.o-purchaseNoteGuestComplete__mailsend {
    padding: 32px 40px;
    text-align: center
}


.m-contentReviewButton {
    width: 100%
}


.m-avatars__list {
    display: -webkit-box;
    display: flex
}

.m-avatars__item {
    position: relative;
    margin-right: -8px;
    cursor: pointer
}

.m-avatars__item:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    box-sizing: content-box;
    display: block;
    content: "";
    border: 2px solid #fff;
    border-radius: 30px
}

.m-avatars__item:last-child {
    margin-right: 0
}

.m-avatars__item:first-child {
    z-index: 8
}

.m-avatars__item:nth-child(2) {
    z-index: 7
}

.m-avatars__item:nth-child(3) {
    z-index: 6
}

.m-avatars__item:nth-child(4) {
    z-index: 5
}

.m-avatars__item:nth-child(5) {
    z-index: 4
}

.m-avatars__item:nth-child(6) {
    z-index: 3
}

.m-avatars__item:nth-child(7) {
    z-index: 2
}

.m-avatars__item--more {
    padding: 0 8px;
    color: #787c7b;
    text-align: center;
    background-color: #f7f9f9;
    font-size: 12px
}

.m-avatars__item--more--small {
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 24px
}

.m-avatars__item--more--medium {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px
}

.m-avatars__item--more--large {
    min-width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 56px
}


.m-contentReviewers {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.m-contentReviewers__label {
    font-size: 14px;
    margin: 4px 8px;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .m-contentReviewers__label {
        font-size: 12px
    }
}

.m-contentReviewers__list {
    display: -webkit-box;
    display: flex;
    margin-right: 8px
}

.m-contentReviewers--more {
    z-index: 1;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    line-height: 30px;
    color: #787c7b;
    text-align: center;
    background-color: #f7f9f9;
    border-radius: 30px;
    font-size: 12px
}


.o-noteReview {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 24px;
    margin: 0 0 16px
}

.o-noteReview:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    content: "";
    border: 1px solid #2cb696;
    border: 1px solid var(--customPrimaryColor);
    border-radius: 4px
}

.o-noteReview__title {
    font-size: 16px;
    position: relative;
    z-index: 3;
    padding: 0 16px;
    margin-top: -36px;
    margin-bottom: 16px;
    color: #2cb696;
    color: var(--customPrimaryColor);
    background-color: #fff
}

@media only screen and (max-width: 479px) {
    .o-noteReview__title {
        font-size: 13px
    }
}

.o-noteReview__info {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 8px
}

.o-noteReview__description {
    color: #2cb696;
    font-size: 12px
}

.o-noteReview__action {
    position: relative;
    z-index: 2;
    width: 100%
}

.o-noteReview__reviewers {
    position: relative;
    z-index: 2;
    margin-top: 8px
}

.o-noteReview__button {
    display: none
}

.o-noteReview__button.is-show {
    display: block
}

.o-noteReview__thanks {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-weight: 700;
    color: #2cb696;
    color: var(--customPrimaryColor);
    pointer-events: none;
    background-color: #fff;
    opacity: 0;
    font-size: 18px
}

@media only screen and (max-width: 479px) {
    .o-noteReview__thanks {
        font-size: 16px
    }
}

@-webkit-keyframes effectThanks{
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes effectThanks{
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.o-noteReview__thanks.is-show {
    -webkit-animation: effectThanks2.6s;
    animation: effectThanks2.6s
}

.o-noteReviewModal__label {
    display: -webkit-box;
    display: flex;
    margin-top: 8px
}

.o-noteReviewModal__help {
    margin-left: 8px
}

.o-noteReviewModal__text {
    color: #2cb696;
    font-size: 14px
}

.o-noteReviewModal__helpLink {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-noteReviewModal__helpLink {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-noteReviewModal__helpLink:hover {
        color: #787c7b
    }
}


.o-afterPurchaseMessageModal__item {
    position: relative
}

.o-afterPurchaseMessageModal__bg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.o-afterPurchaseMessageModal__bgImage {
    width: auto;
    max-width: 100%
}

.o-afterPurchaseMessageModal__default {
    width: 104px;
    border-radius: 50%
}

.o-afterPurchaseMessageModal__avatar {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 48px 0
}

@media only screen and (max-width: 479px) {
    .o-afterPurchaseMessageModal__avatar {
        padding: 32px 0
    }
}

.o-afterPurchaseMessageModal__message {
    position: relative;
    z-index: 2;
    padding: 24px;
    margin: 0 40px 40px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 16px
}

.o-afterPurchaseMessageModal__message:before {
    position: absolute;
    top: -12px;
    left: 50%;
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #e6e6e6;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

.o-afterPurchaseMessageModal__support {
    margin: 0 40px 40px
}

.o-afterPurchaseMessageModal__shareButtons {
    padding: 14px 24px 24px
}

.o-afterPurchaseMessageModal__action {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .05)
}

.o-afterPurchaseMessageModal__actionMessage {
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
    text-align: center
}


.m-couponForm__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.m-couponForm__submit {
    margin-left: 8px
}


.o-purchaseSubscribeMagazine__helpSupport {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-purchaseSubscribeMagazine__helpSupport {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-purchaseSubscribeMagazine__helpSupport:hover {
        color: #787c7b
    }
}

.o-purchaseSubscribeMagazine__item {
    margin: 16px
}

.o-purchaseSubscribeMagazine__item--strong {
    padding: 24px 48px;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-purchaseSubscribeMagazine__item--strong {
        padding: 16px
    }
}

.o-purchaseSubscribeMagazine__coupon {
    margin-top: 8px;
    margin-left: 96px;
    font-size: 14px;
    color: #2cb696;
    color: var(--customPrimaryColor)
}

@media only screen and (max-width: 479px) {
    .o-purchaseSubscribeMagazine__coupon {
        margin-left: 88px
    }
}

.o-purchaseSubscribeMagazine__alert {
    font-size: 12px;
    font-weight: 700;
    color: #ed4956;
    text-align: center
}

.o-purchaseSubscribeMagazine__message {
    font-size: 14px;
    text-align: center
}

.o-purchaseSubscribeMagazine__date {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center
}

.o-purchaseSubscribeMagazine__dateSub {
    font-size: 12px;
    display: inline;
    font-weight: 400
}

.o-purchaseSubscribeMagazine__dateMore {
    font-size: 12px;
    font-weight: 400;
    color: #787c7b;
    text-align: center
}

.o-purchaseSubscribeMagazine__price {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center
}

.o-purchaseSubscribeMagazine__priceSub {
    font-size: 12px;
    display: inline;
    font-weight: 400
}

.o-purchaseSubscribeMagazine__select {
    margin-top: 16px
}

.o-purchaseSubscribeMagazine__carrier {
    padding: 16px;
    margin-top: 16px;
    background-color: #fff;
    border-radius: 4px
}

.o-purchaseSubscribeMagazine__carrierItem + .o-purchaseSubscribeMagazine__carrierItem {
    margin-top: 8px
}

.o-purchaseSubscribeMagazine__attention {
    margin-top: 16px
}

.o-purchaseSubscribeMagazine__attentionItem {
    display: -webkit-box;
    display: flex;
    align-content: center
}

.o-purchaseSubscribeMagazine__attentionItem + .o-purchaseSubscribeMagazine__attentionItem {
    margin-top: 8px
}

.o-purchaseSubscribeMagazine__attentionIcon {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px;
    line-height: 1.5;
    color: #2cb696;
    color: var(--customPrimaryColor)
}

.o-purchaseSubscribeMagazine__cautionIcon {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px;
    line-height: 1.5;
    color: #f95
}

.o-purchaseSubscribeMagazine__attentionText {
    font-size: 12px;
    width: 100%;
    font-weight: 700;
    line-height: 1.5;
    color: #787c7b
}


.o-purchaseCaution__item {
    margin-right: 24px;
    margin-left: 24px
}

@media only screen and (max-width: 479px) {
    .o-purchaseCaution__item {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-purchaseCaution__item + .o-purchaseCaution__item {
    margin-top: 16px
}

.o-purchaseCaution__item--target {
    padding: 16px 24px;
    margin-right: 0;
    margin-left: 0;
    background-color: #f7f9f9
}

@media only screen and (max-width: 479px) {
    .o-purchaseCaution__item--target {
        padding: 16px
    }
}

.o-purchaseCaution__item--border {
    padding-top: 16px;
    border-top: 1px solid #f2f2f2
}

.o-purchaseCaution__helpLink {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-purchaseCaution__helpLink {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-purchaseCaution__helpLink:hover {
        color: #787c7b
    }
}

.o-purchaseCaution__text {
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5
}


.o-sendNoteMailModal__soundMessage {
    margin: 24px 32px;
    text-align: center
}

.o-sendNoteMailModal__main {
    padding: 24px;
    margin: 24px;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-sendNoteMailModal__main {
        padding: 16px;
        margin: 16px
    }
}

.o-sendNoteMailModal__helpSupport {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-sendNoteMailModal__helpSupport {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-sendNoteMailModal__helpSupport:hover {
        color: #787c7b
    }
}

.o-sendNoteMailModal__explain {
    margin-bottom: 16px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-sendNoteMailModal__explain {
        font-size: 14px
    }
}

.o-sendNoteMailModal__mailItem {
    margin-bottom: 16px
}

.o-sendNoteMailModal__mailItemBody {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-sendNoteMailModal__close {
    margin-left: 8px;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-sendNoteMailModal__close:hover {
        color: #787c7b
    }
}

.o-sendNoteMailModal__add {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.o-sendNoteMailModal__attention {
    margin: 32px 24px
}

@media only screen and (max-width: 479px) {
    .o-sendNoteMailModal__attention {
        margin: 16px
    }
}

.o-sendNoteMailModal__attentionTitle {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-sendNoteMailModal__attentionTitle {
        margin-bottom: 8px
    }
}

.o-sendNoteMailModal__attentionItem {
    display: -webkit-box;
    display: flex;
    align-content: center
}

.o-sendNoteMailModal__attentionItem + .o-sendNoteMailModal__attentionItem {
    margin-top: 8px
}

.o-sendNoteMailModal__attentionIcon {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px;
    color: #2cb696
}

.o-sendNoteMailModal__attentionIcon[data-icon=caution] {
    color: #f95
}

.o-sendNoteMailModal__attentionText {
    font-size: 12px;
    width: 100%;
    font-weight: 700;
    color: #787c7b
}

.o-sendNoteMailModal__image > img {
    width: 100%;
    height: auto
}

.o-sendNoteMailModal__addressList {
    margin-bottom: 16px
}

.o-sendNoteMailModal__addressListItem {
    margin-bottom: 4px;
    text-align: center
}


.o-cancelEditModal {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-cancelEditModal {
        padding: 24px
    }
}

.o-cancelEditModal__title {
    font-size: 16px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
}

.o-cancelEditModal__button + .o-cancelEditModal__button {
    margin-top: 16px
}


.o-discardDraftModal {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-discardDraftModal {
        padding: 24px
    }
}

.o-discardDraftModal__title {
    font-size: 16px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
}

.o-discardDraftModal__button + .o-discardDraftModal__button {
    margin-top: 16px
}


.o-indexSetting__help {
    margin-left: 4px;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-indexSetting__help:hover {
        color: #787c7b
    }
}

.o-indexSetting__description {
    font-size: 14px;
    color: #787c7b
}


.o-editTextNoteForm__onboarding {
    padding-right: 24px;
    padding-left: 24px;
    margin-top: 24px;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-editTextNoteForm__onboarding {
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 16px;
        margin-bottom: 16px
    }
}

.o-editTextNoteForm__onboarding:empty {
    padding: 0;
    margin: 0
}

.o-editTextNoteForm__item {
    padding-right: 24px;
    padding-left: 24px;
    margin-top: 24px;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-editTextNoteForm__item {
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 16px;
        margin-bottom: 16px
    }
}

.o-editTextNoteForm__item:empty {
    padding: 0;
    margin: 0
}

.o-editTextNoteForm__loading {
    margin: 32px 0
}


.o-reactionOnboardingInModal {
    padding: 16px;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

.o-reactionOnboardingInModal__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-bottom: 16px
}

.o-reactionOnboardingInModal__image {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    margin-right: 8px
}

.o-reactionOnboardingInModal__discription {
    font-size: 14px;
    font-weight: 700
}


@media only screen and (max-width: 479px) {
    .o-userPopup {
        width: 100%
    }
}

.o-userPopup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
}

@media only screen and (max-width: 479px) {
    .o-userPopup__close {
        top: 8px;
        right: 8px
    }
}

@media only screen and (min-width: 769px) {
    .o-userPopup__close:hover {
        background-color: rgba(34, 34, 34, .5);
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-userPopup__body {
    padding: 24px
}

@media only screen and (max-width: 479px) {
    .o-userPopup__confetti {
        position: relative;
        z-index: 2
    }
}

.o-userPopup__imageSrc {
    width: 100%;
    vertical-align: top;
    border-radius: 4px 4px 0 0
}

.o-userPopup__title {
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-userPopup__title {
        font-size: 16px
    }
}

.o-userPopup__description {
    font-size: 14px;
    text-align: center
}

.o-userPopup__description a {
    margin: 0 4px;
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-userPopup__description a:hover {
        color: #222;
        text-decoration: none
    }
}

.o-userPopup__description .p-achievementsModal__caption {
    display: block;
    font-size: 16px;
    text-align: left
}

.o-userPopup__actionMessage {
    font-size: 12px;
    text-align: center
}

.o-userPopup__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    margin-top: 16px
}

.o-userPopup__action--borderedTop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding-top: 16px;
    margin-top: 16px;
    text-align: center;
    border-top: 1px solid #e6e6e6
}

.o-userPopup__action--borderedTop > p {
    margin-bottom: 16px
}

.o-userPopup__badge {
    display: block;
    padding: 16px;
    margin: 24px 24px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-userPopup__badge:hover {
        border: 1px solid #a8abb1
    }
}

@media only screen and (max-width: 479px) {
    .o-userPopup__badge {
        margin: 24px 8px
    }
}

.o-userPopup__badgeMessage {
    display: -webkit-box;
    display: flex
}

.o-userPopup__badgeIcon {
    width: 56px;
    height: 56px;
    border-radius: 50%
}

.o-userPopup__badgeBody {
    margin: auto auto auto 16px
}

.o-userPopup__badgeDescription, .o-userPopup__badgeLink {
    font-size: 14px;
    font-weight: 700
}

.o-userPopup__badgeLink {
    text-decoration: underline
}

.o-userPopup__reaction {
    margin-top: 24px
}

.o-userPopup__share {
    padding-top: 16px;
    margin-top: 24px;
    border-top: 1px solid #f2f2f2
}

.o-userPopup__continuousCount {
    padding-top: 48px;
    padding-bottom: 48px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 360px 180px;
    border-radius: 4px 4px 0 0
}

.o-userPopup__continuousCount--pattern_1 {
    background-color: #ec407a
}

.o-userPopup__continuousCount--pattern_2 {
    background-color: #ffa726
}

.o-userPopup__continuousCount--pattern_3 {
    background-color: #ffeb3b
}

.o-userPopup__continuousCount--pattern_4 {
    background-color: #26a69a
}

.o-userPopup__continuousCount--pattern_5 {
    background-color: #42a5f5
}

.o-userPopup__continuousCount--pattern_6 {
    background-color: #7e57c2
}

.o-userPopup__continuousNum {
    font-family: "Avenir Next", "Arial", sans-serif;
    font-size: 130px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    opacity: 0;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation: countModalAnimation.4s;
    animation: countModalAnimation.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes countModalAnimation{
    30% {
        text-shadow: 0 0 0 transparent;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        text-shadow: 8px 8px rgba(0, 0, 0, .1);
        opacity: 1;
        -webkit-transform: translateY(-4px) translateX(-4px);
        transform: translateY(-4px) translateX(-4px)
    }
}

@keyframes countModalAnimation{
    30% {
        text-shadow: 0 0 0 transparent;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        text-shadow: 8px 8px rgba(0, 0, 0, .1);
        opacity: 1;
        -webkit-transform: translateY(-4px) translateX(-4px);
        transform: translateY(-4px) translateX(-4px)
    }
}


.o-violationModal__body {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-violationModal__body {
        padding: 24px
    }
}

.o-violationModal__item {
    display: block;
    margin-bottom: 16px;
    cursor: pointer
}

.o-violationModal__radio {
    margin-right: 8px
}

.o-violationModal__textarea {
    min-height: 160px
}

.o-violationModal__error {
    color: #ed4956;
    font-size: 14px
}

.o-violationModal__thanks {
    font-size: 16px;
    text-align: center
}


.o-receiptModal__body {
    font-size: 16px;
    padding: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-receiptModal__body {
        padding: 24px
    }
}


.o-refundModal__body {
    font-size: 16px;
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-refundModal__body {
        padding: 24px
    }
}

.o-refundModal__item {
    margin-bottom: 16px
}

.o-refundModal__text {
    font-size: 12px
}

.o-refundModal__link {
    color: #2cb696
}


.o-requestEmailConfirmModal__body {
    padding: 24px 32px;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .o-requestEmailConfirmModal__body {
        padding: 24px
    }
}

.o-requestEmailConfirmModal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
}

@media only screen and (max-width: 479px) {
    .o-requestEmailConfirmModal__close {
        top: 8px;
        right: 8px
    }
}

@media only screen and (min-width: 769px) {
    .o-requestEmailConfirmModal__close:hover {
        background-color: rgba(34, 34, 34, .5);
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-requestEmailConfirmModal__image {
    width: 100%;
    margin-bottom: 16px
}

.o-requestEmailConfirmModal__title {
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center;
    font-size: 18px
}

.o-requestEmailConfirmModal__description {
    margin-bottom: 16px;
    font-size: 14px
}

.o-requestEmailConfirmModal__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px
}

.o-requestEmailConfirmModal__error {
    margin-top: 16px;
    margin-bottom: 16px;
    color: #ed4956
}

.o-requestEmailConfirmModal__attention {
    color: #787c7b;
    font-size: 12px
}

.o-requestEmailConfirmModal__attentionLink {
    color: #787c7b;
    text-decoration: underline
}


.o-thanksMessage {
    padding: 24px
}

.o-thanksMessage__payer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 152px;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/achievements_bg_author.469f18d.png);
    background-repeat: no-repeat;
    background-position: center 2px;
    background-size: 380px 152px
}

.o-thanksMessage__avatar {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%
}

.o-thanksMessage__balloon {
    position: relative;
    text-align: left;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

.o-thanksMessage__balloon:before {
    position: absolute;
    top: -12px;
    left: 50%;
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #f2f2f2;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

.o-thanksMessage__balloonBody {
    padding: 16px;
    font-size: 14px
}

.o-thanksMessage__message {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px
}

.o-thanksMessage__price {
    font-size: 14px;
    font-weight: 700;
    text-align: center
}

.o-thanksMessage__reply {
    margin-top: 24px
}

.o-thanksMessage__replyCaption {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 700
}

.o-thanksMessage__replyTextarea {
    width: 100%;
    min-height: 80px;
    font-size: 12px
}

.o-thanksMessage__confirmmessage {
    margin-top: 24px
}

.o-thanksMessage__confirmmessageCaption {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 700
}

.o-thanksMessage__confirmmessageBody {
    font-size: 14px
}


.o-thanksMessageComplete {
    padding: 24px
}

.o-thanksMessageComplete__responseImg {
    width: 100%;
    height: auto
}

.o-thanksMessageComplete__responseText {
    padding: 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: center
}


.o-transferRequestModal__main {
    padding: 24px
}

.o-transferRequestModal__main--loading {
    padding: 48px 24px
}

.o-transferRequestModal__text {
    text-align: center
}

.o-transferRequestModal__text + .o-transferRequestModal__text {
    margin-top: 16px
}

.o-transferRequestModal__price {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
    text-align: center
}


.o-badgeDetail {
    padding: 24px
}

@media only screen and (max-width: 479px) {
    .o-badgeDetail {
        padding: 16px
    }
}

.o-badgeDetail__status {
    position: relative;
    width: 260px;
    height: 260px;
    margin: auto
}

@media only screen and (max-width: 479px) {
    .o-badgeDetail__status {
        width: 220px;
        height: 220px
    }
}

.o-badgeDetail__status.is-achieved {
    margin-bottom: 16px
}

.o-badgeDetail__status.is-gold .o-badgeDetail__icon, .o-badgeDetail__status.is-silver .o-badgeDetail__icon {
    opacity: .4
}

.o-badgeDetail__status.is-silver .o-badgeDetail__count {
    color: #a3aebb
}

.o-badgeDetail__status.is-bronze .o-badgeDetail__icon {
    opacity: .4
}

.o-badgeDetail__status.is-bronze .o-badgeDetail__count {
    color: #8b5528
}

.o-badgeDetail__status.is-contest:after {
    position: absolute;
    top: 28px;
    left: 50%;
    display: block;
    width: 208px;
    height: 262.08px;
    margin-left: -104px;
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyNiIgd2lkdGg9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIj48cGF0aCBkPSJNODMuNSA2NC4yVjEyNkw1MCAxMTAuNiAxNi41IDEyNlY2NC41eiIgZmlsbD0iI2ViYTcyNCIvPjxwYXRoIGQ9Ik0yNCA5OC43aC4xdjIzLjhsLTEuMi41LTEuOS45di0yN3ptNTItLjJjMS0uNiAyLjEtMS4yIDMtMS44djI3LjJsLTMtMS40eiIgZmlsbD0iI2ZiZThiMyIvPjxwYXRoIGQ9Ik0xNi41IDQyLjh2NTAuOGMxLjQgMS4yIDIuOSAyLjMgNC41IDMuM1Y4OWgzdjkuN2M3LjYgNC4zIDE2LjQgNi44IDI1LjggNi44IDkuNSAwIDE4LjUtMi42IDI2LjItN2wzLTEuOGMxLjYtMSAzLjEtMi4yIDQuNS0zLjNWNDIuOHoiIGZpbGw9IiNjYzg1MTYiLz48cGF0aCBkPSJNMjQgNDIuOHY1NS44Yy0xLS41LTItMS4yLTMtMS44di01NHptNTUgMHY1My45bC0zIDEuOFY0Mi44eiIgZmlsbD0iI2Y2ZDA2NyIvPjwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 208px 262.08px
}

@media only screen and (max-width: 479px) {
    .o-badgeDetail__status.is-contest:after {
        top: 32px;
        width: 168px;
        height: 211.68px;
        margin-left: -84px;
        background-size: 168px 211.68px
    }
}

.o-badgeDetail__icon {
    position: absolute;
    top: 8%;
    right: 8%;
    bottom: 8%;
    left: 8%;
    z-index: 1;
    opacity: 1
}

.o-badgeDetail__iconImg {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.o-badgeDetail__count {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 50px;
    font-weight: 700;
    color: #eca726
}

@media only screen and (max-width: 479px) {
    .o-badgeDetail__count {
        font-size: 40px
    }
}

.o-badgeDetail__progress {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%
}

@media only screen and (max-width: 479px) {
    .o-badgeDetail__progress {
        width: 220px;
        height: 220px
    }
}

.o-badgeDetail__progress:before {
    position: absolute;
    width: 90%;
    height: 90%;
    margin: 5%;
    content: "";
    background-color: #fff;
    border-radius: 50%
}

.o-badgeDetail__description {
    padding: 24px;
    color: #787c7b;
    font-size: 14px;
    text-align: center
}

.o-badgeDetail__collection {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    padding: 16px
}

@media only screen and (max-width: 479px) {
    .o-badgeDetail__collection {
        margin-right: 0;
        margin-left: 0
    }
}

.o-badgeDetail__collectionItem {
    width: 25%;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .o-badgeDetail__collectionItem {
        width: 33%;
        padding: 8px
    }
}

.o-badgeDetail__collectionItem.is-achieved.is-gold .o-badgeDetail__collectionLabel {
    color: #eca726
}

.o-badgeDetail__collectionItem.is-achieved.is-silver .o-badgeDetail__collectionLabel {
    color: #a3aebb
}

.o-badgeDetail__collectionItem.is-achieved.is-bronze .o-badgeDetail__collectionLabel {
    color: #8b5528
}

.o-badgeDetail__collectionIcon {
    width: 48px;
    height: 48px;
    margin-right: auto;
    margin-bottom: 8px;
    margin-left: auto
}

.o-badgeDetail__collectionIconImg {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.o-badgeDetail__collectionLabel {
    font-size: 12px;
    font-weight: 700;
    color: #ccc;
    text-align: center
}

.o-badgeDetail__onboarding {
    display: -webkit-box;
    display: flex;
    padding: 16px;
    margin: 16px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-badgeDetail__onboardingIcon {
    margin-right: 16px;
    size: 80px
}

.o-badgeDetail__onboardingIconImage {
    width: 50px;
    height: 50px
}

.o-badgeDetail__onboardingTitle {
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: 700
}

.o-badgeDetail__onboardingText {
    padding-bottom: 8px;
    font-size: 14px;
    color: #787c7b
}


.o-topicEditModal__body {
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .o-topicEditModal__body {
        padding: 24px
    }
}

.o-topicEditModal__form {
    margin-bottom: 16px
}


.o-creatorCustomLinks {
    padding: 0;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-creatorCustomLinks__body {
    border-bottom: 1px solid #e6e6e6
}

.o-creatorCustomLinks__body:empty {
    border-bottom: none
}

.o-creatorCustomLinks__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff
}

.o-creatorCustomLinks__item + .o-creatorCustomLinks__item {
    border-top: 1px solid #e6e6e6
}

.o-creatorCustomLinks__item:first-child {
    border-radius: 3px 3px 0 0
}

.o-creatorCustomLinks__item[draggable=true] {
    border-radius: 4px
}

.o-creatorCustomLinks__itemDrag {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 8px;
    color: #a8abb1;
    border-right: 1px solid #e6e6e6
}

@media only screen and (min-width: 769px) {
    .o-creatorCustomLinks__itemDrag {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorCustomLinks__itemDrag:hover {
        color: #787c7b
    }
}

.o-creatorCustomLinks__itemTitle {
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 48px;
    padding-left: 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer
}

.o-creatorCustomLinks__itemDelete, .o-creatorCustomLinks__itemTitle {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.o-creatorCustomLinks__itemDelete {
    -webkit-box-align: center;
    align-items: center;
    padding: 0 8px;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-creatorCustomLinks__itemDelete {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorCustomLinks__itemDelete:hover {
        color: #787c7b
    }
}

.o-creatorCustomLinks__delete {
    padding: 12px 16px 12px 0
}

.o-creatorCustomLinks__addItem, .o-creatorCustomLinks__delete {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer
}

.o-creatorCustomLinks__addItem {
    -webkit-box-pack: center;
    justify-content: center;
    height: 48px;
    font-weight: 700
}

.o-creatorCustomLinks__addItemIcon {
    margin-right: 4px
}


.o-topicEditModal__body {
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .o-topicEditModal__body {
        padding: 24px
    }
}

.o-topicEditModal__form {
    margin-bottom: 16px
}

.o-topicEditModal__formItem {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.o-topicEditModal__formLabel {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
}

.o-topicEditModal__formField {
    -webkit-box-flex: 1;
    flex: 1
}

.o-topicEditModal__formButton {
    padding-left: 8px
}

.o-topicEditModal__formError {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    font-size: 14px;
    color: #ed4956
}

.o-topicEditModal__card {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-top: 16px;
    border-radius: 4px
}

.o-topicEditModal__card + .o-topicEditModal__card {
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
}

.o-topicEditModal__cardTitle {
    font-size: 14px;
    padding-right: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.o-topicEditModal__cardThumb {
    height: 40px;
    margin-left: auto;
    border-radius: 4px
}

.o-topicEditModal__cardClose {
    padding-left: 16px;
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-topicEditModal__cardClose {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-topicEditModal__cardClose:hover {
        color: #787c7b
    }
}


.o-topicSettings__body {
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .o-topicSettings__body {
        padding: 24px
    }
}

.o-topicSettings__form {
    margin-bottom: 16px
}

.o-topicSettings__txtLink {
    font-size: 14px;
    color: #787c7b;
    text-decoration: underline
}

.o-topicSettings__layout {
    margin-bottom: 32px
}

.o-topicSettings__layoutTitle {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
}

.o-topicSettings__layoutList {
    display: -webkit-box;
    display: flex
}

.o-topicSettings__layoutItem {
    margin-right: 8px
}

.o-topicSettings__layoutImage {
    width: 56px;
    height: 56px;
    padding: 4px;
    cursor: pointer;
    border: 4px solid transparent;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-topicSettings__layoutImage:hover {
        border-color: #e6e6e6
    }
}

.o-topicSettings__layoutImage[data-active=true] {
    border-color: #2cb696
}

.o-topicSettings__delete {
    margin-top: 24px
}


.o-topicSettings__body {
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .o-topicSettings__body {
        padding: 24px
    }
}

.o-topicSettings__form {
    margin-bottom: 16px
}


.o-topicSettings__body {
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .o-topicSettings__body {
        padding: 24px
    }
}

.o-topicSettings__form + .o-topicSettings__form {
    margin-top: 24px
}

.o-topicSettings__formItem {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.o-topicSettings__formLabel {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 8px
}

.o-topicSettings__formField {
    -webkit-box-flex: 1;
    flex: 1
}

.o-topicSettings__formButton {
    padding-left: 8px
}

.o-topicSettings__formDescription {
    font-size: 14px;
    margin-bottom: 16px;
    color: #787c7b
}

.o-topicSettings__formError {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    font-size: 14px;
    color: #ed4956
}

.o-topicSettings__card {
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid #f2f2f2
}

.o-topicSettings__card, .o-topicSettings__cardContent {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-topicSettings__cardNickname {
    padding-right: 8px;
    margin-left: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 14px
}

.o-topicSettings__cardThumb {
    height: 40px;
    margin-left: auto;
    border-radius: 4px
}

.o-topicSettings__close {
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-topicSettings__close {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-topicSettings__close:hover {
        color: #787c7b
    }
}


.o-subscribeCirclePlanModal__title {
    font-weight: 700
}

.o-subscribeCirclePlanModal__detail {
    padding: 24px;
    background-color: #f7f9f9
}

.o-subscribeCirclePlanModal__card {
    position: relative;
    width: 300px;
    margin: 0 auto 24px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
}

.o-subscribeCirclePlanModal__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.o-subscribeCirclePlanModal__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
}

.o-subscribeCirclePlanModal__section {
    margin-bottom: 24px
}

.o-subscribeCirclePlanModal__section:last-child {
    margin-bottom: 0
}

.o-subscribeCirclePlanModal__agreement {
    padding: 16px 24px
}

.o-subscribeCirclePlanModal__heading {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
}

.o-subscribeCirclePlanModal__description {
    font-size: 14px
}

.o-subscribeCirclePlanModal__benefitItem {
    font-size: 12px
}

.o-subscribeCirclePlanModal__benefitItem:before {
    margin-right: 4px;
    content: "-"
}

.o-subscribeCirclePlanModal__unsubscribeButton {
    margin-right: auto
}


.o-subscribeCirclePlanCompleteModal__item {
    position: relative
}

.o-subscribeCirclePlanCompleteModal__bg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.o-subscribeCirclePlanCompleteModal__bgImage {
    width: auto;
    max-width: 100%
}

.o-subscribeCirclePlanCompleteModal__default {
    width: 104px;
    border-radius: 50%
}

.o-subscribeCirclePlanCompleteModal__avatar {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 48px 0
}

@media only screen and (max-width: 479px) {
    .o-subscribeCirclePlanCompleteModal__avatar {
        padding: 32px 0
    }
}

.o-subscribeCirclePlanCompleteModal__message {
    position: relative;
    z-index: 2;
    padding: 24px;
    margin: 0 40px 40px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 16px
}

.o-subscribeCirclePlanCompleteModal__message:before {
    position: absolute;
    top: -12px;
    left: 50%;
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #e6e6e6;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}


.o-unsubscribeCirclePlanModal__title {
    font-weight: 700
}

.o-unsubscribeCirclePlanModal__body {
    font-size: 16px;
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-unsubscribeCirclePlanModal__body {
        padding: 24px
    }
}

.o-unsubscribeCirclePlanModal__card {
    position: relative;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
}

.o-unsubscribeCirclePlanModal__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.o-unsubscribeCirclePlanModal__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
}

.o-unsubscribeCirclePlanModal__section {
    margin-bottom: 24px
}

.o-unsubscribeCirclePlanModal__section:last-child {
    margin-bottom: 0
}

.o-unsubscribeCirclePlanModal__heading {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700
}

.o-unsubscribeCirclePlanModal__description {
    font-size: 14px
}

.o-unsubscribeCirclePlanModal__message {
    font-size: 14px;
    text-align: center;
    white-space: pre-line
}

.o-unsubscribeCirclePlanModal__benefitItem {
    font-size: 12px
}

.o-unsubscribeCirclePlanModal__benefitItem:before {
    margin-right: 4px;
    content: "-"
}


.o-circleMemberDetailModal__title {
    font-weight: 700
}

.o-circleMemberDetailModal__body {
    font-size: 16px;
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-circleMemberDetailModal__body {
        padding: 24px
    }
}

.o-circleMemberDetailModal__avatar {
    height: 144px;
    margin-bottom: 32px
}

.o-circleMemberDetailModal__avatarImage, .o-circleMemberDetailModal__avatarLink {
    display: block;
    width: 144px;
    height: 144px;
    margin: 0 auto;
    border-radius: 50%
}

.o-circleMemberDetailModal__section {
    margin-bottom: 32px
}

.o-circleMemberDetailModal__heading {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700
}

.o-circleMemberDetailModal__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2
}

.o-circleMemberDetailModal__item:last-child {
    border-bottom: 1px solid #f2f2f2
}

.o-circleMemberDetailModal__itemDetail {
    -webkit-box-flex: 1;
    flex: 1
}

.o-circleMemberDetailModal__itemTitle {
    font-size: 14px
}

.o-circleMemberDetailModal__itemInfo {
    margin-top: 4px;
    line-height: 1;
    color: #787c7b;
    font-size: 12px
}

.o-circleMemberDetailModal__itemInfo:not(:last-child) {
    margin-bottom: 4px
}

.o-circleMemberDetailModal__itemAside {
    margin-left: 16px;
    font-size: 12px;
    color: #787c7b
}


.o-circleMemberKickModal__body {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-circleMemberKickModal__body {
        padding: 24px
    }
}

.o-circleMemberKickModal__profile {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start
}

.o-circleMemberKickModal__avatar {
    margin-right: 12px
}

.o-circleMemberKickModal__avatar, .o-circleMemberKickModal__avatarIcon {
    width: 36px;
    height: 36px;
    border-radius: 50%
}

.o-circleMemberKickModal__name {
    -webkit-box-flex: 1;
    flex: 1;
    font-weight: 700
}

.o-circleMemberKickModal__small {
    font-size: 10px;
    color: #787c7b
}

.o-circleMemberKickModal__item {
    margin-bottom: 24px
}

.o-circleMemberKickModal__item:last-child {
    margin-bottom: 0
}

.o-circleMemberKickModal__radio {
    margin-right: 8px
}

.o-circleMemberKickModal__textarea {
    min-height: 160px
}

.o-circleMemberKickModal__error {
    color: #ed4956;
    font-size: 14px
}

.o-circleMemberKickModal__thanks {
    font-size: 16px;
    text-align: center
}


.o-circleCommentDeleteModal__title {
    font-weight: 700
}

.o-circleCommentDeleteModal__body {
    padding: 40px;
    text-align: center;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .o-circleCommentDeleteModal__body {
        padding: 24px
    }
}

.o-circleCommentDeleteModal__profileIcon {
    position: relative;
    height: 120px;
    margin-bottom: 24px
}

.o-circleCommentDeleteModal__profileIconImage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: #787c7b;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2);
    -o-object-fit: cover;
    object-fit: cover
}

.o-circleCommentDeleteModal__section {
    margin-bottom: 32px
}

.o-circleCommentDeleteModal__heading {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700
}

.o-circleCommentDeleteModal__description {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid #f2f2f2
}

.o-circleCommentDeleteModal__description:last-child {
    border-bottom: 1px solid #f2f2f2
}


.o-suspendCirclePlanModal__title {
    font-weight: 700
}

.o-suspendCirclePlanModal__body {
    padding: 24px
}

.o-suspendCirclePlanModal__notice {
    display: block;
    margin-bottom: 16px;
    font-size: 10px;
    color: #a8abb1
}

.o-suspendCirclePlanModal__item {
    margin-bottom: 16px
}


.o-circleMembersModal__userList {
    max-height: 440px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

@media only screen and (max-width: 479px) {
    .o-circleMembersModal__userList {
        max-height: 360px
    }
}

.o-circleMembersModal__invisibleMember {
    padding: 8px 16px;
    font-size: 14px;
    color: #787c7b
}


.o-circleInvitation__body {
    padding: 24px
}

@media only screen and (max-width: 479px) {
    .o-circleInvitation__body {
        padding: 16px
    }
}

.o-circleInvitation__description {
    margin-bottom: 8px;
    font-size: 14px;
    color: #787c7b
}

.o-circleInvitation__plan {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 4px;
    background-color: #f7f9f9;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-circleInvitation__plan {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }
}

.o-circleInvitation__card {
    position: relative;
    width: 160px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
}

@media only screen and (max-width: 479px) {
    .o-circleInvitation__card {
        width: 200px;
        margin-bottom: 8px
    }
}

.o-circleInvitation__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.o-circleInvitation__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
}

.o-circleInvitation__detail {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .o-circleInvitation__detail {
        width: 100%;
        margin-left: 0
    }
}

.o-circleInvitation__title {
    font-size: 14px;
    font-weight: 700
}

.o-circleInvitation__price {
    margin-bottom: 8px;
    font-size: 14px;
    color: #2cb696
}

.o-circleInvitation__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end
}


.o-circlePlanSelect__body {
    padding: 24px
}

@media only screen and (max-width: 479px) {
    .o-circlePlanSelect__body {
        padding: 16px
    }
}

.o-circlePlanSelect__description {
    margin-bottom: 8px;
    font-size: 14px;
    color: #787c7b
}

.o-circlePlanSelect__plan {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 4px;
    background-color: #f7f9f9;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-circlePlanSelect__plan {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }
}

.o-circlePlanSelect__card {
    position: relative;
    width: 160px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
}

@media only screen and (max-width: 479px) {
    .o-circlePlanSelect__card {
        width: 200px;
        margin-bottom: 8px
    }
}

.o-circlePlanSelect__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.o-circlePlanSelect__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
}

.o-circlePlanSelect__detail {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .o-circlePlanSelect__detail {
        width: 100%;
        margin-left: 0
    }
}

.o-circlePlanSelect__title {
    font-size: 14px;
    font-weight: 700
}

.o-circlePlanSelect__price {
    margin-bottom: 8px;
    font-size: 14px;
    color: #2cb696
}

.o-circlePlanSelect__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end
}


.o-contentsUpdates__body {
    max-height: 400px;
    overflow: auto
}

.o-contentsUpdates__item {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px
}

@media only screen and (min-width: 769px) {
    .o-contentsUpdates__item:hover {
        background-color: #f7f9f9
    }
}

.o-contentsUpdates__item + .o-contentsUpdates__item {
    border-top: 1px solid #f2f2f2
}

.o-contentsUpdates__itemLink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.o-contentsUpdates__itemEyecatch {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 80px;
    margin-right: 16px
}

.o-contentsUpdates__itemTitle {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 700;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px
}

.o-contentsUpdates__itemImage {
    width: 80px;
    height: 45px;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: top;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}


.o-finishBoardPostModal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
}

@media only screen and (max-width: 479px) {
    .o-finishBoardPostModal__close {
        top: 8px;
        right: 8px
    }
}

@media only screen and (min-width: 769px) {
    .o-finishBoardPostModal__close:hover {
        background-color: rgba(34, 34, 34, .5);
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-finishBoardPostModal__hero {
    overflow: hidden;
    border-radius: 4px 4px 0 0
}

.o-finishBoardPostModal__heroCount {
    padding-top: 48px;
    padding-bottom: 48px;
    cursor: default;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/achievements_bgCount.ef5c16a.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 360px 180px
}

.o-finishBoardPostModal__heroCount--pattern_1 {
    background-color: #ec407a
}

.o-finishBoardPostModal__heroCount--pattern_2 {
    background-color: #ffa726
}

.o-finishBoardPostModal__heroCount--pattern_3 {
    background-color: #ffeb3b
}

.o-finishBoardPostModal__heroCount--pattern_4 {
    background-color: #26a69a
}

.o-finishBoardPostModal__heroCount--pattern_5 {
    background-color: #42a5f5
}

.o-finishBoardPostModal__heroCount--pattern_6 {
    background-color: #7e57c2
}

.o-finishBoardPostModal__heroNum {
    font-family: "Avenir Next", "Arial", sans-serif;
    font-size: 130px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    opacity: 0;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation: countModalAnimation.4s;
    animation: countModalAnimation.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes countModalAnimation{
    30% {
        text-shadow: 0 0 0 rgba(34, 34, 34, 0);
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        text-shadow: 8px 8px rgba(34, 34, 34, .1);
        opacity: 1;
        -webkit-transform: translateY(-4px) translateX(-4px);
        transform: translateY(-4px) translateX(-4px)
    }
}

@keyframes countModalAnimation{
    30% {
        text-shadow: 0 0 0 rgba(34, 34, 34, 0);
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        text-shadow: 8px 8px rgba(34, 34, 34, .1);
        opacity: 1;
        -webkit-transform: translateY(-4px) translateX(-4px);
        transform: translateY(-4px) translateX(-4px)
    }
}

.o-finishBoardPostModal__heroImage {
    width: 100%;
    height: auto
}

.o-finishBoardPostModal__body {
    padding: 24px
}

.o-finishBoardPostModal__title {
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-finishBoardPostModal__title {
        font-size: 16px
    }
}

.o-finishBoardPostModal__description {
    font-size: 14px;
    text-align: center
}

.o-finishBoardPostModal__description a {
    margin: 0 4px;
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-finishBoardPostModal__description a:hover {
        color: #222;
        text-decoration: none
    }
}

.o-finishBoardPostModal__share {
    padding-top: 16px;
    margin-top: 24px;
    border-top: 1px solid #f2f2f2
}


.o-confirmModal__title {
    font-weight: 700
}

.o-confirmModal__body {
    font-size: 16px;
    padding: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-confirmModal__body {
        padding: 24px
    }
}


.o-commentAcknowledgement__body {
    font-size: 16px;
    padding: 0;
    text-align: center
}

.o-commentAcknowledgement__image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-commentAcknowledgement__image {
        margin-bottom: 16px
    }
}

.o-commentAcknowledgement__main {
    padding: 0 40px 16px
}

@media only screen and (max-width: 479px) {
    .o-commentAcknowledgement__main {
        padding: 0 16px 16px
    }
}

.o-commentAcknowledgement__title {
    font-size: 16px;
    font-weight: 700
}

.o-commentAcknowledgement__text {
    font-size: 14px;
    margin: 16px 0
}

.o-commentAcknowledgement__textInner {
    display: inline-block
}

.o-commentAcknowledgement__check {
    text-align: left
}

@media only screen and (max-width: 479px) {
    .o-commentAcknowledgement__check {
        font-size: 12px
    }
}

.o-commentAcknowledgement__link {
    color: #2cb696
}

@media only screen and (min-width: 769px) {
    .o-commentAcknowledgement__link {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-commentAcknowledgement__link:hover {
        color: #228d74
    }
}


.o-urlnameConfirmModal__header {
    position: relative
}

.o-urlnameConfirmModal__closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

.o-urlnameConfirmModal__body {
    padding: 24px;
    font-size: 14px
}

.o-urlnameConfirmModal__preview {
    margin-bottom: 16px
}

.o-urlnameConfirmModal__previewItem {
    display: -webkit-box;
    display: flex;
    margin-bottom: 4px
}

.o-urlnameConfirmModal__caption {
    margin-right: 4px;
    font-weight: 700;
    white-space: nowrap
}

.o-urlnameConfirmModal__urlname {
    font-weight: 700;
    word-break: break-all
}

.o-urlnameConfirmModal__confirm {
    padding-bottom: 24px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f2f2
}

.o-urlnameConfirmModal__attentionTitle {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700
}

.o-urlnameConfirmModal__attentionIcon {
    margin-right: 4px;
    color: #f95
}

.o-urlnameConfirmModal__attentionListItem {
    margin: 4px 0 0 20px;
    font-size: 12px;
    list-style-type: disc
}


.m-userInfo {
    text-align: center
}

.m-userInfo__image {
    width: 110px;
    height: 110px;
    margin: auto;
    background-color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3)
}

.m-userInfo__name {
    font-size: 18px;
    font-weight: 700
}


.o-withdrawalModal__header {
    position: relative
}

.o-withdrawalModal__closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

.o-withdrawalModal__body {
    padding: 24px;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .o-withdrawalModal__body {
        padding: 16px
    }
}

.o-withdrawalModal__userInfo {
    margin-bottom: 16px
}

.o-withdrawalModal__title {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    font-weight: 700
}

.o-withdrawalModal__reason {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    white-space: pre-wrap
}

.o-withdrawalModal__message {
    padding: 24px 0 0;
    font-weight: 700;
    text-align: center;
    border-top: 1px solid #ccc
}

@media only screen and (max-width: 479px) {
    .o-withdrawalModal__message {
        padding-bottom: 8px
    }
}

.o-withdrawalModal__error {
    margin-top: 16px;
    color: #ed4956
}


.o-stockPhotoBlockConfirmModal__header {
    position: relative
}

.o-stockPhotoBlockConfirmModal__body {
    padding: 24px 32px;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .o-stockPhotoBlockConfirmModal__body {
        padding: 24px
    }
}

.o-stockPhotoBlockConfirmModal__message {
    padding-bottom: 4px;
    font-size: 16px;
    font-weight: 700
}

@media only screen and (max-width: 479px) {
    .o-stockPhotoBlockConfirmModal__message {
        padding-bottom: 8px
    }
}

.o-stockPhotoBlockConfirmModal__appendix {
    padding-bottom: 24px;
    color: #787c7b
}

.o-stockPhotoBlockConfirmModal__error {
    margin-top: 16px;
    color: #ed4956
}


.m-pagingModalContainer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.m-pagingModalContainer__page {
    position: absolute;
    left: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow-y: auto;
    opacity: 1;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-property: left, opacity;
    transition-property: left, opacity
}

.m-pagingModalContainer__page.out-left {
    left: -50%;
    z-index: -1;
    opacity: 0
}

.m-pagingModalContainer__page.out-right {
    left: 50%;
    z-index: -1;
    opacity: 0
}

.m-pagingModalContainer__bullets {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 16px 0
}

.m-pagingModalContainer__bullet {
    width: 8px;
    height: 8px;
    margin-right: 12px;
    background-color: #fff;
    border-radius: 4px
}

.m-pagingModalContainer__bullet:last-child {
    margin-right: 0
}

.m-pagingModalContainer__bullet.current {
    background-color: #2cb696
}

.m-pagingModalContainer__pageButton {
    position: absolute;
    top: 50%;
    left: 50%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%
}

@media only screen and (max-width: 479px) {
    .m-pagingModalContainer__pageButton {
        width: 24px;
        height: 100px;
        box-shadow: 0 2px 4px rgba(34, 34, 34, .2)
    }
}

.m-pagingModalContainer__pageButton--left {
    -webkit-transform: translate(-314px, -50%);
    transform: translate(-314px, -50%)
}

@media only screen and (max-width: 479px) {
    .m-pagingModalContainer__pageButton--left {
        left: 0;
        border-radius: 0 4px 4px 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

.m-pagingModalContainer__pageButton--right {
    -webkit-transform: translate(266px, -50%);
    transform: translate(266px, -50%)
}

@media only screen and (max-width: 479px) {
    .m-pagingModalContainer__pageButton--right {
        right: 0;
        left: auto;
        border-radius: 4px 0 0 4px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

.m-pagingModalContainer__pageButton.disabled {
    pointer-events: none;
    cursor: default;
    opacity: .3
}

@media only screen and (max-width: 479px) {
    .m-pagingModalContainer__pageButton.disabled {
        display: none
    }
}


.m-richModalContentPresetLayout__image {
    overflow: hidden;
    border-radius: 4px 4px 0 0
}

.m-richModalContentPresetLayout__image img {
    display: block;
    width: 100%;
    height: auto
}

.m-richModalContentPresetLayout__main {
    padding: 24px
}

.m-richModalContentPresetLayout__title {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 18px
}

@media only screen and (max-width: 479px) {
    .m-richModalContentPresetLayout__title {
        font-size: 16px
    }
}

.m-richModalContentPresetLayout__description {
    margin: 16px 0;
    font-size: 14px
}

.m-richModalContentPresetLayout__description:last-child {
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .m-richModalContentPresetLayout__description {
        font-size: 12px
    }
}

.m-richModalContentPresetLayout__action {
    margin: 16px 0
}

.m-richModalContentPresetLayout__action:last-child {
    margin-bottom: 0
}

.m-richModalContentPresetLayout__subAction {
    margin: 16px 0
}

.m-richModalContentPresetLayout__subAction:last-child {
    margin-bottom: 0
}


.o-r18ObjectionClaimModal__container {
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .o-r18ObjectionClaimModal__container {
        padding: 24px
    }
}

.o-r18ObjectionClaimModal__textarea {
    margin-bottom: 16px
}

.o-r18ObjectionClaimModal__notes {
    color: #787c7b;
    font-size: 12px
}


.o-snsIntegrationConfirmationModal {
    overflow: hidden
}

.o-snsIntegrationConfirmationModal__body {
    padding: 24px
}

.o-snsIntegrationConfirmationModal__image {
    width: 100%
}

.o-snsIntegrationConfirmationModal__imageBody {
    width: 100%;
    height: auto
}

.o-snsIntegrationConfirmationModal__title {
    font-size: 20px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-snsIntegrationConfirmationModal__title {
        font-size: 18px
    }
}

.o-snsIntegrationConfirmationModal__description {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
}

.o-snsIntegrationConfirmationModal__attention {
    padding-left: 24px;
    list-style-type: disc;
    font-size: 14px
}

.o-snsIntegrationConfirmationModal__attentionItem {
    margin-bottom: 4px;
    list-style-type: disc
}

.o-snsIntegrationConfirmationModal__attentionItem:last-child {
    margin-bottom: 0
}

.o-snsIntegrationConfirmationModal__attentionItemAside {
    display: block;
    color: #787c7b;
    font-size: 12px
}


.o-shareBooster {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    background-color: #f7f9f9;
    border-radius: 8px 8px 0 0;
    overflow: hidden
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-shareBooster {
        padding-bottom: env(safe-area-inset-bottom)
    }
}

@media only screen and (max-width: 768px) {
    .o-shareBooster {
        padding-bottom: env(safe-area-inset-bottom)
    }
}

.o-shareBooster__body {
    border-bottom: 1px solid #f2f2f2;
    background-color: #fff
}

.o-shareBooster__title {
    padding: 16px;
    font-size: 14px
}

.o-shareBooster__share {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
/*  //deleted by xman 2020.12.18 for detail_1 
    padding-right: 8px;
    padding-bottom: 16px;
    padding-left: 8px;
     */
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.o-shareBooster__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-width: 56px;
    /* //deleted by xman 2020.12.18 for detail_1 
    margin-right: 4px;
    margin-left: 4px */
}

.o-shareBooster__icon, .o-shareBooster__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-shareBooster__icon {
    -webkit-box-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    color: #fff;
    border-radius: 50%
}

.o-shareBooster__icon--copy {
    background: #a8abb1
}

.o-shareBooster__icon--twitter {
    background: #55acee
}

.o-shareBooster__icon--line {
    background: #06c755
}

.o-shareBooster__icon--facebook {
    background: #1877f2
}

.o-shareBooster__icon--note {
    background: #2cb696
}

.o-shareBooster__name {
    font-size: 10px;
    color: #787c7b;
    white-space: nowrap
}

.o-shareBooster__close {
    -webkit-transition: margin-bottom .2s ease-out;
    transition: margin-bottom .2s ease-out;
    margin-bottom: env(safe-area-inset-bottom);
    border-bottom: 1px solid #f2f2f2
}


.o-notFoundMuseum__body {
    padding: 80px 24px;
    background-color: #f7f9f9
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__body {
        padding-top: 40px;
        padding-bottom: 40px
    }
}

.o-notFoundMuseum__body--white {
    padding-top: 120px;
    background-color: #fff
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__body--white {
        padding-top: 80px
    }
}

.o-notFoundMuseum__siteLogo {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 100px;
    height: auto
}

.o-notFoundMuseum__siteLogoImg {
    width: 100%;
    height: auto
}

.o-notFoundMuseum__image {
    display: block;
    width: 100%;
    max-width: 350px;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto
}

.o-notFoundMuseum__title {
    font-size: 28px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__title {
        margin-bottom: 16px;
        text-align: left;
        font-size: 20px
    }
}

.o-notFoundMuseum__search {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin-top: 16px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__search {
        max-width: 100%
    }
}

.o-notFoundMuseum__searchField {
    width: 100%
}

.o-notFoundMuseum__searchIcon {
    position: absolute;
    top: 50%;
    right: 8px;
    color: #a8abb1;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media only screen and (min-width: 769px) {
    .o-notFoundMuseum__searchIcon {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-notFoundMuseum__searchIcon:hover {
        color: #787c7b
    }
}

.o-notFoundMuseum__description {
    font-size: 16px;
    color: #787c7b;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__description {
        text-align: left;
        font-size: 14px
    }

    .o-notFoundMuseum__description br {
        display: none
    }
}

.o-notFoundMuseum__button {
    margin-top: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__button {
        margin-top: 16px;
        text-align: left
    }
}

.o-notFoundMuseum__slide {
    position: relative;
    max-width: 500px;
    padding-bottom: 80px;
    margin: 80px auto;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__slide {
        max-width: 100%;
        padding-right: 40px;
        padding-bottom: 60px;
        padding-left: 40px;
        margin-top: 40px;
        margin-bottom: 40px;
        overflow: hidden
    }
}

.o-notFoundMuseum__slideItem {
    text-align: left
}

.o-notFoundMuseum__slideName {
    font-size: 20px;
    font-weight: 700
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__slideName {
        font-size: 16px
    }
}

.o-notFoundMuseum__slideHelp {
    font-size: 12px;
    color: #787c7b;
    text-decoration: underline
}

.o-notFoundMuseum__slideLink {
    display: block
}

.o-notFoundMuseum__slideImage {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 16px;
    margin-bottom: 16px;
    border: 1px solid #f2f2f2;
    box-shadow: 4px 4px 16px rgba(34, 34, 34, .3)
}

.o-notFoundMuseum__slideTitle {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__slideTitle {
        font-size: 14px
    }
}

.o-notFoundMuseum__slideCreator {
    font-size: 12px;
    color: #787c7b
}

.o-notFoundMuseum__slideChara01 {
    position: absolute;
    bottom: 10px;
    left: -80px;
    z-index: -1;
    width: auto;
    height: 140px;
    pointer-events: none
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__slideChara01 {
        left: -8px;
        height: 100px
    }
}

.o-notFoundMuseum__slideChara02 {
    position: absolute;
    right: -80px;
    bottom: 10px;
    z-index: -1;
    width: auto;
    height: 140px;
    pointer-events: none
}

@media only screen and (max-width: 479px) {
    .o-notFoundMuseum__slideChara02 {
        right: -3px;
        height: 100px
    }
}


.o-error {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100vh
}

.o-error__body {
    padding: 16px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-error__body {
        padding: 32px
    }
}

.o-error__siteLogo {
    width: 216px;
    height: auto;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto
}

.o-error__siteLogoImg {
    width: 100%;
    height: auto;
    vertical-align: top
}

.o-error__text {
    font-size: 20px;
    margin-bottom: 32px;
    font-weight: 700;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .o-error__text {
        font-size: 16px
    }
}


.l-error__body {
    padding: 80px 24px;
    background-color: #f7f9f9
}

@media only screen and (max-width: 479px) {
    .l-error__body {
        padding-top: 40px;
        padding-bottom: 40px
    }
}

.l-error__body--white {
    padding-top: 120px;
    background-color: #fff
}

@media only screen and (max-width: 479px) {
    .l-error__body--white {
        padding-top: 80px
    }
}

.l-error__siteLogo {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 100px;
    height: auto
}

.l-error__siteLogoImg {
    width: 100%;
    height: auto
}

.l-error__image {
    display: block;
    width: 100%;
    max-width: 350px;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto
}

.l-error__title {
    font-size: 28px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .l-error__title {
        margin-bottom: 16px;
        text-align: left;
        font-size: 20px
    }
}

.l-error__search {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin-top: 16px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .l-error__search {
        max-width: 100%
    }
}

.l-error__searchField {
    width: 100%
}

.l-error__searchIcon {
    position: absolute;
    top: 50%;
    right: 8px;
    color: #a8abb1;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media only screen and (min-width: 769px) {
    .l-error__searchIcon {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .l-error__searchIcon:hover {
        color: #787c7b
    }
}

.l-error__description {
    font-size: 16px;
    color: #787c7b;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .l-error__description {
        text-align: left;
        font-size: 14px
    }

    .l-error__description br {
        display: none
    }
}

.l-error__button {
    margin-top: 40px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .l-error__button {
        margin-top: 16px;
        text-align: left
    }
}


.m-messageAlert {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 8px;
    color: #fff;
    border-bottom: 1px solid #fff;
    font-size: 12px
}

.m-messageAlert:last-child {
    border-bottom: none
}

.m-messageAlert--type_alert {
    background-color: #ed4956
}

.m-messageAlert--type_warn {
    background-color: #f95
}

.m-messageAlert--type_message {
    color: #222;
    background-color: #cdeeea
}

.m-messageAlert__message {
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 16px;
    text-align: center;
    word-break: break-all
}

@media only screen and (max-width: 479px) {
    .m-messageAlert__message {
        margin-right: 8px;
        text-align: left
    }
}

.m-messageAlert__message a {
    font-weight: 700;
    text-decoration: underline
}


.m-flashMessage {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    z-index: var(--z-index-coast);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    padding: 16px
}

.m-flashMessage__body {
    position: relative;
    border-radius: 4px;
    overflow: hidden
}

.m-flashMessage__body:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    content: "";
    background-color: #fff
}

.m-flashMessage__label {
    position: relative;
    z-index: 2;
    padding: 8px 16px;
    font-weight: 700
}

.m-flashMessage__label--success {
    color: #2cb696;
    background-color: rgba(44, 182, 150, .2)
}

.m-flashMessage__label--warning {
    color: #f95;
    background-color: rgba(255, 153, 85, .2)
}

.m-flashMessage__label--error {
    color: #ed4956;
    background-color: rgba(237, 73, 86, .2)
}

.m-flashMessage__label--info {
    color: #222;
    background-color: #f7f9f9
}

.m-flashMessage-enter, .m-flashMessage-leave-to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.m-flashMessage-enter-active, .m-flashMessage-leave-active {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out
}


.p-replyToFollow {
    position: absolute;
    z-index: 100;
    display: -webkit-box;
    display: flex;
    min-width: 300px;
    visibility: hidden;
    opacity: 0
}

@media only screen and (max-width: 479px) {
    .p-replyToFollow {
        min-width: 220px
    }

    .p-replyToFollow .p-replyToFollow__message {
        max-width: 150px
    }
}

.p-replyToFollow__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px
}

.p-replyToFollow__avatar {
    width: 32px;
    margin-right: 16px;
    line-height: 1
}

@media only screen and (max-width: 479px) {
    .p-replyToFollow__avatar {
        margin-right: 8px
    }
}

.p-replyToFollow__message {
    max-width: 220px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    white-space: normal
}

@media only screen and (max-width: 479px) {
    .p-replyToFollow__message {
        font-size: 12px
    }
}

.p-replyToFollow__status {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 12px
}

.p-replyToFollow__status:last-child {
    margin-bottom: 0
}

.p-replyToFollow__status--type_firstLike {
    color: #ea3f60
}

.p-replyToFollow.is-shown {
    -webkit-animation: replyToFollow.16s;
    animation: replyToFollow.16s
}

@-webkit-keyframes replyToFollow{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    4.5% {
        opacity: 0;
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    6.75% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px)
    }
    6.75% {
        -webkit-transform: translateY(-48px);
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    11.25% {
        -webkit-transform: translateY(-34px);
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    13.5% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    81.25% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px)
    }
    87.5% {
        -webkit-transform: translateY(-42px);
        transform: translateY(-42px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    93.75% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-20px) scale(.95);
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes replyToFollow{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    4.5% {
        opacity: 0;
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    6.75% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px)
    }
    6.75% {
        -webkit-transform: translateY(-48px);
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    11.25% {
        -webkit-transform: translateY(-34px);
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    13.5% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    81.25% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px)
    }
    87.5% {
        -webkit-transform: translateY(-42px);
        transform: translateY(-42px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    93.75% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-20px) scale(.95);
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.p-replyToFollow--with_creatorTop {
    right: 0;
    bottom: 8px;
    -webkit-transform-origin: right top;
    transform-origin: right top
}

.p-replyToFollow--with_creatorTop .p-replyToFollow__message {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    white-space: normal
}

@media only screen and (max-width: 479px) {
    .p-replyToFollow--with_creatorTop .p-replyToFollow__message {
        font-size: 12px;
        max-width: 290px
    }
}

.p-replyToFollow--with_creatorTop .p-messageBalloon {
    margin-left: auto
}

.p-replyToFollow--with_noteDetailTop {
    bottom: 10px;
    left: -6px;
    -webkit-transform-origin: 25px top;
    transform-origin: 25px top
}

.p-replyToFollow--with_noteDetailBottom {
    right: 0;
    bottom: 8px;
    left: auto;
    -webkit-transform-origin: right top;
    transform-origin: right top
}

.p-replyToFollow--with_noteDetailBottom .p-messageBalloon {
    margin-left: auto
}

.p-messageBalloon {
    position: relative;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e1e5e7;
    border-radius: 4px
}

.p-messageBalloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #e1e5e7
}

.p-messageBalloon--tailPosition_topCenter:before {
    left: 50%;
    margin-left: -6px
}

.p-messageBalloon--tailPosition_topCenter:before, .p-messageBalloon--tailPosition_topRight:before {
    top: -12px;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

.p-messageBalloon--tailPosition_topRight:before {
    right: 14px
}

.p-messageBalloon--tailPosition_bottomLeft:before {
    left: 14px
}

.p-messageBalloon--tailPosition_bottomCenter:before, .p-messageBalloon--tailPosition_bottomLeft:before {
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.p-messageBalloon--tailPosition_bottomCenter:before {
    left: 50%;
    margin-left: -6px
}

.p-messageBalloon--tailPosition_bottomRight:before {
    right: 14px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.p-messageBalloon--tailPosition_middletopLeft:before {
    top: 14px;
    left: -12px;
    -webkit-transform: rotate(135deg) translate(-5px, -5px);
    transform: rotate(135deg) translate(-5px, -5px)
}


.is-clickable {
    cursor: pointer
}


/* deleted by xman 2020.12.18 for detail_1.html mobile
    .o-creatorProfile {
    position: relative;
    width: 100%
} */

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfile {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile {
        margin-bottom: 16px;
    }
}

.o-creatorProfile__avatar {
    margin-bottom: 8px
}

.o-creatorProfile__avatarLink {
    display: inline-block
}

.o-creatorProfile__header {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 8px
}

.o-creatorProfile__leftSide {
    display: -webkit-inline-box;
    display: inline-flex
}

.o-creatorProfile__name {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 4px;
    font-size: 16px;
    font-weight: 700;
    /* word-break: break-all */  /*  <-- deleted by xman 2020.12.19 for detail_1.html */
}

.o-creatorProfile__nameLink {
    display: inline-block
}

.o-creatorProfile__description {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start
}

.o-creatorProfile__introduction {
    -webkit-box-flex: 1;
    flex: 1
}

.o-creatorProfile__profile {
    font-size: 14px;
    word-break: break-all
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__profile {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px
    }
}

.o-creatorProfile__profile:empty {
    margin-bottom: 0
}

.o-creatorProfile__profile a {
    text-decoration: underline
}

.o-creatorProfile__followButton {
    position: absolute;
    top: 0;
    right: 0
}

.o-creatorProfile__followed {
    display: inline-block;
    padding: 4px 8px;
    font-weight: 400;
    color: #a8abb1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 10px
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__followed {
        padding: 2px 8px
    }
}

.o-creatorProfile__follow {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    /* // deleted by xman 2020.12.18 for detail_1.html
    margin-top: 8px; */
    white-space: nowrap
}

.o-creatorProfile__followLink {
    margin-right: 8px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .o-creatorProfile__followLink .o-creatorProfile__followLabel {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorProfile__followLink .o-creatorProfile__followLabel:hover {
        color: #222
    }
}

.o-creatorProfile__followCount {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #222
}

.o-creatorProfile__followLabel {
    font-size: 12px;
    line-height: 1.5;
    color: #787c7b
}


.o-quickLook {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 280px;
    padding: 16px;
    visibility: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 4px 8px 16px rgba(34, 34, 34, .1), 0 1px 4px rgba(34, 34, 34, .15);
    opacity: 0;
    -webkit-transition: opacity .2s ease-in 30ms, visibility .2s ease-in 30ms;
    transition: opacity .2s ease-in 30ms, visibility .2s ease-in 30ms;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.o-quickLook[data-active=true] {
    visibility: visible;
    opacity: 1
}


.preview-layout {
    pointer-events: none
}
/*!
 * Cropper.js v1.5.1
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2019-03-10T09:55:50.492Z
 */
.cropper-container {
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cropper-container img {
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%
}

.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.cropper-canvas, .cropper-wrap-box {
    overflow: hidden
}

.cropper-drag-box {
    background-color: #fff;
    opacity: 0
}

.cropper-modal {
    background-color: #000;
    opacity: .5
}

.cropper-view-box {
    display: block;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, .75);
    overflow: hidden;
    width: 100%
}

.cropper-dashed {
    border: 0 dashed #eee;
    display: block;
    opacity: .5;
    position: absolute
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: 33.33333%;
    left: 0;
    top: 33.33333%;
    width: 100%
}

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: 33.33333%;
    top: 0;
    width: 33.33333%
}

.cropper-center {
    display: block;
    height: 0;
    left: 50%;
    opacity: .75;
    position: absolute;
    top: 50%;
    width: 0
}

.cropper-center:after, .cropper-center:before {
    background-color: #eee;
    content: " ";
    display: block;
    position: absolute
}

.cropper-center:before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px
}

.cropper-center:after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px
}

.cropper-face, .cropper-line, .cropper-point {
    display: block;
    height: 100%;
    opacity: .1;
    position: absolute;
    width: 100%
}

.cropper-face {
    background-color: #fff;
    left: 0;
    top: 0
}

.cropper-line {
    background-color: #39f
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px
}

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px
}

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px
}

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0
}

.cropper-point {
    background-color: #39f;
    height: 5px;
    opacity: .75;
    width: 5px
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%
}

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px
}

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%
}

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px
}

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px
}

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px
}

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px
}

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px
}

@media (min-width: 768px) {
    .cropper-point.point-se {
        height: 15px;
        width: 15px
    }
}

@media (min-width: 992px) {
    .cropper-point.point-se {
        height: 10px;
        width: 10px
    }
}

@media (min-width: 1200px) {
    .cropper-point.point-se {
        height: 5px;
        opacity: .75;
        width: 5px
    }
}

.cropper-point.point-se:before {
    background-color: #39f;
    bottom: -50%;
    content: " ";
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%
}

.cropper-invisible {
    opacity: 0
}

.cropper-bg {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
}

.cropper-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0
}

.cropper-hidden {
    display: none !important
}

.cropper-move {
    cursor: move
}

.cropper-crop {
    cursor: crosshair
}

.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
    cursor: not-allowed
}
<script charset="utf-8" src="./index_files/note.155584fbaa1dba6ddcf4.js.download"></script>
                                                                                    <script async="" src="./index_files/js" charset="utf8"></script>


                                                                                                                                             .m-bannerStopCovid__image {
                                                                                                                                                 width: 100%;
                                                                                                                                                 height: auto;
                                                                                                                                                 vertical-align: top;
                                                                                                                                                 border-radius: 4px
                                                                                                                                             }


.m-breadcrumb__list {
    display: -webkit-box;
    display: flex;
    overflow-x: auto
}

@media only screen and (max-width: 768px) {
    .m-breadcrumb__list {
        -webkit-overflow-scrolling: touch
    }
}

.m-breadcrumb__item {
    font-size: 14px;
    white-space: nowrap
}

.m-breadcrumb__item:last-child {
    pointer-events: none
}

.m-breadcrumb__item:not(:first-child) {
    margin-left: 4px
}

.m-breadcrumb__item:not(:first-child):before {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    content: "";
    border: solid #a8abb1;
    border-width: 1px 1px 0 0;
    -webkit-transform: rotate(45deg) scale(.8) skew(10deg, 10deg);
    transform: rotate(45deg) scale(.8) skew(10deg, 10deg)
}

.m-breadcrumb__link {
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .m-breadcrumb__link {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-breadcrumb__link:hover {
        color: #222
    }
}


.o-contentList {
    position: relative;
    width: 100%
}

.o-contentList__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .o-contentList__header {
        padding-right: 16px;
        padding-left: 16px
    }
}

.o-contentList__headerTitle {
    font-size: 16px;
    font-weight: 700
}

@media only screen and (max-width: 479px) {
    .o-contentList__headerTitle {
        font-size: 12px;
        font-weight: 400;
        color: #787c7b
    }
}

.o-contentList--horizontal .o-contentList__headerTitle {
    text-align: center
}

.o-contentList__headerAll {
    font-size: 12px;
    color: #787c7b
}

.o-contentList--horizontal .o-contentList__headerAll {
    display: none
}

@media only screen and (min-width: 769px) {
    .o-contentList__headerAll {
        cursor: pointer
    }

    .o-contentList__headerAll:hover {
        color: #222
    }
}

.o-contentList--horizontal .o-contentList__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.o-contentList--horizontal .o-contentList__body:after {
    display: block;
    min-width: 1px;
    height: 16px;
    pointer-events: none;
    content: ""
}

@media only screen and (max-width: 479px) {
    .o-contentList__body {
        padding-right: 16px;
        padding-left: 16px
    }
}

.o-contentList__item {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer
}

.o-contentList--horizontal .o-contentList__item {
    display: block;
    max-width: 80px;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 16px
}

@media only screen and (min-width: 769px) {
    .o-contentList--horizontal .o-contentList__item {
        max-width: 88px
    }
}

@media only screen and (min-width: 769px) {
    .o-contentList__item:hover:before {
        position: absolute;
        top: 0;
        right: -8px;
        bottom: 0;
        left: -8px;
        z-index: -1;
        display: block;
        content: "";
        background-color: #f7f9f9;
        border-radius: 4px
    }

    .o-contentList--horizontal .o-contentList__item:hover:before {
        top: -8px;
        bottom: -8px
    }
}

.o-contentList__itemLink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.o-contentList__itemEyecatch {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 80px;
    margin-right: 16px
}

.o-contentList--horizontal .o-contentList__itemEyecatch {
    margin-right: 0;
    margin-bottom: 8px
}

@media only screen and (min-width: 769px) {
    .o-contentList--horizontal .o-contentList__itemEyecatch {
        width: 88px;
        margin-bottom: 12px
    }
}

.o-contentList__itemTitle {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 700;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px
}

.o-contentList--horizontal .o-contentList__itemTitle {
    display: block;
    font-weight: 400;
    line-height: 1;
    line-height: 1.5;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px
}

@media only screen and (max-width: 479px) {
    .o-contentList--horizontal .o-contentList__itemTitle {
        font-size: 10px
    }
}

.o-contentList__itemImage {
    width: 80px;
    height: 45px;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: top;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-contentList--horizontal .o-contentList__itemImage {
        width: 88px;
        height: 50px
    }
}


@media only screen and (max-width: 479px) {
    .o-kaizenNotice {
        padding: 16px
    }
}

.o-kaizenNotice--layout_grid {
    display: -webkit-box;
    display: flex;
    height: 100%
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice--layout_grid {
        display: block
    }
}

.o-kaizenNotice--layout_grid .o-kaizenNotice__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice--layout_grid .o-kaizenNotice__header {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-pack: inherit;
        justify-content: inherit
    }
}

.o-kaizenNotice--layout_grid .o-kaizenNotice__detail {
    -webkit-box-ordinal-group: 3;
    order: 2;
    width: 100%
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice--layout_grid .o-kaizenNotice__detail {
        -webkit-box-ordinal-group: initial;
        order: 0
    }
}

.o-kaizenNotice--layout_grid .o-kaizenNotice__headIcon {
    -webkit-box-ordinal-group: 2;
    order: 1;
    margin: 0 0 8px
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice--layout_grid .o-kaizenNotice__headIcon {
        -webkit-box-ordinal-group: initial;
        order: 0;
        margin: inherit
    }
}

.o-kaizenNotice__container {
    width: 100%;
    padding: 24px;
    background-color: #f7f9f9;
    border-radius: 4px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-kaizenNotice__container {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: justify;
        justify-content: space-between
    }
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice__container {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: justify;
        justify-content: space-between
    }
}

.o-kaizenNotice__container[data-type=basic] {
    color: #222;
    background-color: #fff;
    border: 1px solid #e6e6e6
}

.o-kaizenNotice__container[data-type=primary] {
    color: #fff;
    background-color: #2cb696
}

.o-kaizenNotice__container[data-type=primary] .o-kaizenNotice__close, .o-kaizenNotice__container[data-type=primary] .o-kaizenNotice__description {
    color: #fff
}

@media only screen and (min-width: 769px) {
    .o-kaizenNotice__container[data-type=primary] .o-kaizenNotice__close:hover {
        color: #e8f9f5
    }
}

.o-kaizenNotice__container[data-type=secondary] {
    color: #222;
    background-color: #f7f9f9;
    border: none
}

.o-kaizenNotice__container[data-size=medium] .o-kaizenNotice__headIcon {
    margin-left: 8px
}

.o-kaizenNotice__container[data-size=small] {
    padding: 16px
}

.o-kaizenNotice__container[data-size=small] .o-kaizenNotice__headIcon {
    width: 32px;
    height: 32px;
    margin-left: 8px
}

.o-kaizenNotice__container[data-size=small] .o-kaizenNotice__title {
    font-size: 12px;
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice__container[data-size=small] .o-kaizenNotice__title {
        font-size: 14px
    }
}

.o-kaizenNotice__container[data-size=small] .o-kaizenNotice__description {
    margin-top: 4px;
    font-size: 12px
}

.o-kaizenNotice__container[data-size=small] .o-kaizenNotice__description:empty {
    margin-top: 0
}

.o-kaizenNotice__container[data-location=header] .o-kaizenNotice__headIcon {
    height: 96px
}

.o-kaizenNotice__header {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-kaizenNotice__detail {
    -webkit-box-flex: 1;
    flex: 1
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice__detail {
        display: block;
        margin-left: 0
    }
}

.o-kaizenNotice__headIcon {
    height: 56px;
    margin-left: 16px;
    background-color: transparent
}

.o-kaizenNotice__title {
    -webkit-box-flex: 1;
    flex: 1;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice__title {
        font-size: 12px
    }
}

.o-kaizenNotice__close {
    position: absolute;
    top: -8px;
    right: -8px;
    color: #a8abb1
}

.o-kaizenNotice__description {
    margin-bottom: 16px;
    font-size: 14px;
    color: #787c7b
}

@media only screen and (max-width: 768px) {
    .o-kaizenNotice__description {
        -webkit-box-flex: 1;
        flex: 1
    }
}

@media only screen and (max-width: 479px) {
    .o-kaizenNotice__description {
        font-size: 12px
    }
}


.m-magazineEditIconButton__link {
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    color: #fff;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .m-magazineEditIconButton__link:hover {
        background-color: rgba(34, 34, 34, .5);
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
}

.m-magazineEditIconButton__icon {
    position: absolute;
    top: 8px;
    right: 8px
}


.o-magazineFollow {
    width: 80px
}


.m-eyecatch {
    overflow: hidden;
    border-radius: 4px
}

.m-eyecatch__image {
    width: 100%;
    max-width: 100%;
    height: 100%;
    vertical-align: top;
    -o-object-fit: cover;
    object-fit: cover
}

.m-eyecatch--size_xxSmall {
    width: 16px;
    height: 16px
}

.m-eyecatch--size_xSmall {
    width: 24px;
    height: 24px
}

.m-eyecatch--size_small {
    width: 32px;
    height: 32px
}

.m-eyecatch--size_medium {
    width: 56px;
    height: 56px
}

.m-eyecatch--size_large {
    width: 80px;
    height: 80px
}

.m-eyecatch--size_xLarge {
    width: 104px;
    height: 104px
}


.m-noteListItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%
}

@media only screen and (min-width: 769px) {
    .m-noteListItem--hover:hover:before {
        position: absolute;
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        z-index: -1;
        display: block;
        content: "";
        background-color: #f7f9f9;
        border-radius: 4px
    }
}

.m-noteListItem__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.m-noteListItem__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
}

.m-noteListItem__detail {
    overflow: hidden
}

.m-noteListItem__eyecatch {
    margin-left: 16px
}

.m-noteListItem__eyecatchImage {
    border: 1px solid #f2f2f2
}

.m-noteListItem__title {
    display: -webkit-box;
    font-size: 16px;
    margin-bottom: 4px;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.m-noteListItem__meta {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 4px;
    overflow: hidden
}

.m-noteListItem__metaIcon {
    max-height: 16px
}

.m-noteListItem__metaCount {
    margin-left: 4px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap
}

.m-noteListItem__metaLimitedCount {
    margin-left: 8px;
    font-size: 14px
}

.m-noteListItem__like {
    color: #ea3f60
}

.m-noteListItem__like, .m-noteListItem__price {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 8px
}

.m-noteListItem__price {
    color: #2cb696
}

.m-noteListItem__name {
    z-index: 1;
    overflow: hidden;
    line-height: 1.5;
    color: #787c7b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px
}


.m-noteCard {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 0 56px;
    cursor: pointer;
    background-color: #fff
}

.m-noteCard[data-has-border=true] {
    padding: 16px 16px 56px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-noteCard[data-has-border=true] {
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-noteCard[data-has-border=true]:hover {
        border: 1px solid #a8abb1
    }
}

.m-noteCard__head {
    display: -webkit-box;
    display: flex;
    margin-top: 16px;
    margin-bottom: 8px
}

.m-noteCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block
}

.m-noteCard__eyecatch {
    float: right;
    padding-left: 16px;
    margin-left: auto
}

.m-noteCard__eyecatchLarge {
    position: relative;
    padding-bottom: calc(52.34375% + 17px);
    margin: -16px -16px 16px;
    overflow: hidden;
    border-radius: 3px 3px 0 0
}

.m-noteCard__eyecatchLargeImage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.m-noteCard__title {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.m-noteCard__description, .m-noteCard__title {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.5;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.m-noteCard__description {
    color: #787c7b;
    font-size: 14px
}

.m-noteCard__like, .m-noteCard__status {
    display: -webkit-box;
    display: flex
}

.m-noteCard__like {
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 16px;
    line-height: 1;
    color: #ea3f60
}

.m-noteCard__likeCount {
    font-size: 14px;
    margin-left: 4px;
    line-height: 1.5
}

.m-noteCard__comment {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 16px;
    line-height: 1;
    color: #a8abb1
}

.m-noteCard__commentCount {
    font-size: 14px;
    margin-left: 4px;
    line-height: 1.5
}

.m-noteCard__footer {
    position: absolute;
    bottom: 0;
    z-index: 1;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px;
    pointer-events: inherit
}

.m-noteCard__author, .m-noteCard__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: calc(100% - 32px)
}

.m-noteCard__authorAvatar {
    flex-shrink: 0
}

.m-noteCard__authorName {
    font-size: 12px;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.m-noteCard__actionsItem {
    padding-left: 4px
}

.m-noteCard__actionsIcon {
    position: relative;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .m-noteCard__actionsIcon {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-noteCard__actionsIcon:hover {
        color: #787c7b
    }
}

.m-noteCard__actionsIconarea:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 40px;
    height: 40px;
    content: "";
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}


.m-recommender {
    display: -webkit-box;
    display: flex;
    margin-bottom: 8px;
    overflow: hidden;
    color: #787c7b;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 10px
}

.m-recommender__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.m-recommender__text {
    -webkit-box-flex: 1;
    flex: 1;
    white-space: nowrap
}


.o-userReviewedNotes {
    position: relative
}

.o-userReviewedNotes:before {
    position: absolute;
    top: 32px;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 0, #fff)
}

@media only screen and (max-width: 479px) {
    .o-userReviewedNotes:before {
        display: none
    }
}

.o-userReviewedNotes:after {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff)
}

@media only screen and (max-width: 479px) {
    .o-userReviewedNotes:after {
        display: none
    }
}

.o-userReviewedNotes--position_leftEnd:before, .o-userReviewedNotes--position_rightEnd:after {
    display: none
}

.o-userReviewedNotes__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #787c7b;
    letter-spacing: .04em;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .o-userReviewedNotes__title {
        padding: 16px 16px 0;
        margin-bottom: 8px
    }
}

.o-userReviewedNotes__titleIcon {
    margin-right: 8px;
    line-height: 1
}

.o-userReviewedNotes__titleBody {
    line-height: 1.5;
    font-size: 12px;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.o-userReviewedNotes__readAll {
    margin-right: 16px;
    margin-left: auto;
    font-size: 12px
}

.o-userReviewedNotes__close {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-userReviewedNotes__close {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-userReviewedNotes__close:hover {
        color: #787c7b
    }
}

.o-userReviewedNotes__body {
    position: relative
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-userReviewedNotes__body {
        padding-top: 0
    }
}

@media only screen and (max-width: 768px) {
    .o-userReviewedNotes__body {
        padding-top: 0
    }
}

.o-userReviewedNotes__article {
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex: 1;
    width: 100%
}

.o-userReviewedNotes__tips {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    margin-top: 24px;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 14px
}

.o-userReviewedNotes__tipsBody {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
}

.o-userReviewedNotes__tipsIcon {
    width: 40px
}

.o-userReviewedNotes__tipsIconImg {
    width: 100%;
    height: 40px;
    background-color: transparent
}

.o-userReviewedNotes__tipsDetail {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 8px
}

.o-userReviewedNotes__tipsTitle {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
}

@media only screen and (max-width: 768px) {
    .o-userReviewedNotes__tipsTitle {
        font-size: 12px
    }
}

.o-userReviewedNotes__tipsText {
    font-size: 14px
}

@media only screen and (max-width: 768px) {
    .o-userReviewedNotes__tipsText {
        font-size: 12px
    }
}

.o-userReviewedNotes__tipsAction {
    box-sizing: border-box
}

.swiper-container, .swiper-wrapper {
    width: 100%
}

@media only screen and (max-width: 479px) {
    .swiper-wrapper {
        padding: 0 16px 16px
    }
}

.swiper-slide {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: auto
}

@media only screen and (min-width: 769px) {
    .swiper-slide {
        margin-right: 8px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-slide {
        width: 230px
    }
}

@media only screen and (max-width: 768px) {
    .swiper-slide {
        width: 230px
    }
}

.swiper-nav {
    /* start */
    /* //deleted by xman 2020.12.18 for index.html
    position: absolute;
    top: 50%;
    left: 50%; */
    z-index: 2;
    /* 
        //deleted by xman 2020.12.18 for index.html
        width: calc(100% + 32px); */
    min-height: 40px;
    pointer-events: none;
    /* -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%) */
    
    
    margin-left: 16px;
    align-items: center;
    -webkit-box-align:center; /*  <--added by xman 2020.12.18 for index.html */
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-nav {
        display: none
    }
}

@media only screen and (max-width: 768px) {
    .swiper-nav {
        display: none
    }
}

.swiper-prev {
    /* 
        //deleted by xman 2020.12.18 for index.html ASOBISYSTEM｜アソビシステムのnoteへようこそ」から check
        position: absolute; */
    left: 0;
    padding: 4px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    /* //deleted by xman 2020.12.18 for index.html ASOBISYSTEM｜アソビシステムのnoteへようこそ」から check
    border: 1px solid #f2f2f2; */
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .swiper-prev {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-prev:hover {
        color: #787c7b
    }
}

.swiper-next {
        /* start */
    /* position: absolute; */
    right: 0;
    padding: 4px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    /* //deleted by xman 2020.12.18 for index.html ASOBISYSTEM｜アソビシステムのnoteへようこそ」から check
    border: 1px solid #f2f2f2; */
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .swiper-next {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-next:hover {
        color: #787c7b
    }
}

.swiper-button-disabled {
    color: #f2f2f2
}

@media only screen and (min-width: 769px) {
    .swiper-button-disabled:hover {
        color: #f2f2f2
    }
}
@font-face {
    font-family: "swiper-icons";
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-container-vertical > .swiper-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    box-sizing: content-box
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.swiper-container-multirow > .swiper-wrapper {
    flex-wrap: wrap
}

.swiper-container-multirow-column > .swiper-wrapper {
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.swiper-container-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
    height: auto
}

.swiper-container-autoheight .swiper-wrapper {
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-transition-property: height, -webkit-transform;
    transition-property: height, -webkit-transform;
    transition-property: transform, height;
    transition-property: transform, height, -webkit-transform
}

.swiper-container-3d {
    -webkit-perspective: 1200px;
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), transparent);
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-right {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), transparent);
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-top {
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), transparent);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), transparent);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
    -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: 44px;
    height: var(--swiper-navigation-size);
    margin-top: -22px;
    margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
    z-index: 10;
    cursor: pointer;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: var(--swiper-theme-color);
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 44px;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    -webkit-font-feature-settings: normal,;
    font-feature-settings: normal,;
    font-variant: normal;
    line-height: 1
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white {
    --swiper-navigation-color: #fff
}

.swiper-button-next.swiper-button-black, .swiper-button-prev.swiper-button-black {
    --swiper-navigation-color: #000
}

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transform: scale(.33);
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    -webkit-transform: scale(.66);
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    -webkit-transform: scale(.33);
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    -webkit-transform: scale(.66);
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    -webkit-transform: scale(.33);
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--swiper-theme-color);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-container-vertical > .swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 6px 0;
    display: block
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 8px
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    -webkit-transition: top .2s, -webkit-transform .2s;
    transition: top .2s, -webkit-transform .2s;
    transition: transform .2s, top .2s;
    transition: transform .2s, top .2s, -webkit-transform .2s
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transition: left .2s, -webkit-transform .2s;
    transition: left .2s, -webkit-transform .2s;
    transition: transform .2s, left .2s;
    transition: transform .2s, left .2s, -webkit-transform .2s
}

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transition: right .2s, -webkit-transform .2s;
    transition: right .2s, -webkit-transform .2s;
    transition: transform .2s, right .2s;
    transition: transform .2s, right .2s, -webkit-transform .2s
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-theme-color);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: left top;
    transform-origin: left top
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    -webkit-transform-origin: right top;
    transform-origin: right top
}

.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0
}

.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical > .swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-white {
    --swiper-pagination-color: #fff
}

.swiper-pagination-black {
    --swiper-pagination-color: #000
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal > .swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-container-vertical > .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s linear infinite;
    animation: swiper-preloader-spin 1s linear infinite;
    box-sizing: border-box;
    border-left: 4px solid var(--swiper-theme-color);
    border-bottom: 4px solid var(--swiper-theme-color);
    border-right: 4px solid var(--swiper-theme-color);
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top: 4px solid transparent
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@-webkit-keyframes swiper-preloader-spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes swiper-preloader-spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide {
    pointer-events: none;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube {
    overflow: visible
}

.swiper-container-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-container-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    z-index: 0
}

.swiper-container-flip {
    overflow: visible
}

.swiper-container-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-container-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}


.m-userDescCard {
    position: relative;
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 16px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-userDescCard {
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-userDescCard:hover {
        border: 1px solid #ccc
    }
}

.m-userDescCard__item {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100%
}

.m-userDescCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.m-userDescCard__head {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px
}

.m-userDescCard__userName {
    margin-left: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 14px;
    -webkit-line-clamp: 2
}

.m-userDescCard__description, .m-userDescCard__userName {
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    -webkit-box-orient: vertical
}

.m-userDescCard__description {
    -webkit-box-flex: 1;
    flex: 1;
    max-height: 54px;
    margin-bottom: 16px;
    color: #787c7b;
    -webkit-line-clamp: 3;
    font-size: 12px
}

.m-userDescCard__action {
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: auto
}

.m-userDescCard__menu {
    position: relative;
    z-index: 3;
    margin-left: auto;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .m-userDescCard__menu {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-userDescCard__menu:hover {
        color: #787c7b
    }
}

.m-userDescCard__option {
    position: absolute;
    top: 48px;
    right: 0;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .m-userDescCard__option {
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-userDescCard__option:hover {
        color: #787c7b
    }
}


.o-recommendedUsers {
    position: relative
}

.o-recommendedUsers:before {
    position: absolute;
    top: 32px;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 0, #fff)
}

@media only screen and (max-width: 479px) {
    .o-recommendedUsers:before {
        display: none
    }
}

.o-recommendedUsers:after {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff)
}

@media only screen and (max-width: 479px) {
    .o-recommendedUsers:after {
        display: none
    }
}

.o-recommendedUsers--position_leftEnd:before, .o-recommendedUsers--position_rightEnd:after {
    display: none
}

.o-recommendedUsers__title {
    display: -webkit-box;
    display: flex;
    margin-bottom: 16px;
    color: #787c7b;
    letter-spacing: .04em;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .o-recommendedUsers__title {
        padding: 16px 16px 0;
        margin-bottom: 8px
    }
}

.o-recommendedUsers__titleIcon {
    margin-right: 8px;
    line-height: 1
}

.o-recommendedUsers__titleBody {
    width: 100%;
    line-height: 1.5;
    font-size: 12px;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.o-recommendedUsers__close {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-recommendedUsers__close {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-recommendedUsers__close:hover {
        color: #787c7b
    }
}

.o-recommendedUsers__body {
    position: relative
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-recommendedUsers__body {
        padding-top: 0
    }
}

@media only screen and (max-width: 768px) {
    .o-recommendedUsers__body {
        padding-top: 0
    }
}

.swiper-container, .swiper-wrapper {
    width: 100%
}

@media only screen and (max-width: 479px) {
    .swiper-wrapper {
        padding: 0 16px 16px
    }
}

.swiper-slide {
    display: -webkit-box;
    display: flex;
    height: auto
}

@media only screen and (min-width: 769px) {
    .swiper-slide {
        max-width: 168px;
        margin-right: 8px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-slide {
        width: 160px
    }
}

@media only screen and (max-width: 768px) {
    .swiper-slide {
        width: 160px
    }
}



.swiper-button-disabled {
    color: #f2f2f2
}

@media only screen and (min-width: 769px) {
    .swiper-button-disabled:hover {
        color: #f2f2f2
    }
}


.o-topicFollowedNotes {
    position: relative
}

.o-topicFollowedNotes:before {
    position: absolute;
    top: 32px;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 0, #fff)
}

@media only screen and (max-width: 479px) {
    .o-topicFollowedNotes:before {
        display: none
    }
}

.o-topicFollowedNotes:after {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff)
}

@media only screen and (max-width: 479px) {
    .o-topicFollowedNotes:after {
        display: none
    }
}

.o-topicFollowedNotes--position_leftEnd:before, .o-topicFollowedNotes--position_rightEnd:after {
    display: none
}

.o-topicFollowedNotes__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .o-topicFollowedNotes__header {
        padding: 16px 16px 0;
        margin-bottom: 8px
    }
}

.o-topicFollowedNotes__headerMain {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-topicFollowedNotes__headerIcon {
    margin-right: 8px;
    font-size: 14px;
    line-height: 1;
    color: #787c7b
}

.o-topicFollowedNotes__headerTitle {
    display: -webkit-box;
    padding-right: 24px;
    overflow: hidden;
    font-size: 12px;
    color: #787c7b;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.o-topicFollowedNotes__headerTitle:hover {
    color: #222;
    text-decoration: underline
}

.o-topicFollowedNotes__headerSide {
    font-size: 12px;
    color: #787c7b;
    white-space: nowrap
}

.o-topicFollowedNotes__headerSide:hover {
    color: #222;
    text-decoration: underline
}

.o-topicFollowedNotes__body {
    position: relative
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-topicFollowedNotes__body {
        padding-top: 0
    }
}

@media only screen and (max-width: 768px) {
    .o-topicFollowedNotes__body {
        padding-top: 0
    }
}

.o-topicFollowedNotes__recommender {
    display: -webkit-box;
    display: flex;
    margin-bottom: 8px;
    overflow: hidden;
    color: #787c7b;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 10px
}

.o-topicFollowedNotes__recommenderName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.o-topicFollowedNotes__recommenderText {
    -webkit-box-flex: 1;
    flex: 1;
    white-space: nowrap
}

.o-topicFollowedNotes__article {
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex: 1;
    width: 100%
}

.o-topicFollowedNotes__tips {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    margin-top: 24px;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 14px
}

.o-topicFollowedNotes__tipsBody {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
}

.o-topicFollowedNotes__tipsIcon {
    width: 40px
}

.o-topicFollowedNotes__tipsIconImg {
    width: 100%;
    height: 40px;
    background-color: transparent
}

.o-topicFollowedNotes__tipsDetail {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 8px
}

.o-topicFollowedNotes__tipsTitle {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
}

@media only screen and (max-width: 768px) {
    .o-topicFollowedNotes__tipsTitle {
        font-size: 12px
    }
}

.o-topicFollowedNotes__tipsText {
    font-size: 14px
}

@media only screen and (max-width: 768px) {
    .o-topicFollowedNotes__tipsText {
        font-size: 12px
    }
}

.o-topicFollowedNotes__tipsAction {
    box-sizing: border-box
}

.swiper-container, .swiper-wrapper {
    width: 100%
}

@media only screen and (max-width: 479px) {
    .swiper-wrapper {
        padding: 0 16px 16px
    }
}

.swiper-slide {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: auto
}

@media only screen and (min-width: 769px) {
    .swiper-slide {
        margin-right: 8px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-slide {
        width: 230px
    }
}

@media only screen and (max-width: 768px) {
    .swiper-slide {
        width: 230px
    }
}


.swiper-button-disabled {
    color: #f2f2f2
}

@media only screen and (min-width: 769px) {
    .swiper-button-disabled:hover {
        color: #f2f2f2
    }
}


.m-carouselGroup {
    position: relative
}

.m-carouselGroup__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-carouselGroup__header {
        margin-right: 16px;
        margin-left: 16px;
        font-size: 16px
    }
}

@media only screen and (max-width: 768px) {
    .m-carouselGroup__header {
        margin-right: 16px;
        margin-left: 16px;
        font-size: 16px
    }
}

.m-carouselGroup__title {
    font-size: 24px;
    font-weight: 700
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-carouselGroup__title {
        font-size: 20px
    }
}

@media only screen and (max-width: 768px) {
    .m-carouselGroup__title {
        font-size: 18px
    }
}

.m-carouselGroup__seeAllLink {
    font-size: 12px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .m-carouselGroup__seeAllLink {
        cursor: pointer;
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-carouselGroup__seeAllLink:hover {
        color: #222
    }
}

.m-carouselGroup__clickableItem {
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .m-carouselGroup__clickableItem {
        cursor: pointer;
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-carouselGroup__clickableItem:hover {
        color: #222
    }
}

.swiper-container {
    width: 100%
}

.swiper-wrapper {
    display: -webkit-box;
    display: flex;
    width: 100%;
    padding-right: 3px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-wrapper {
        padding: 0 16px
    }
}

@media only screen and (max-width: 768px) {
    .swiper-wrapper {
        padding: 0 16px
    }
}

.swiper-slide {
    display: -webkit-box;
    display: flex;
    height: auto;
    min-height: 160px
}

@media only screen and (min-width: 769px) {
    .swiper-slide {
        margin-bottom: 8px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-slide {
        width: 240px
    }
}

@media only screen and (max-width: 768px) {
    .swiper-slide {
        width: 240px
    }
}

.swiper-header {
    -webkit-box-pack: justify;
    justify-content: space-between
}

.swiper-header, .swiper-nav {
    display: -webkit-box;
    display: flex
}


@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-prev {
        display: none
    }
}

@media only screen and (max-width: 768px) {
    .swiper-prev {
        display: none
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-next {
        display: none
    }
}

@media only screen and (max-width: 768px) {
    .swiper-next {
        display: none
    }
}

.swiper-seeAll {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 8px;
    margin-left: 8px;
    white-space: nowrap;
    pointer-events: auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-seeAll {
        margin-right: 0;
        margin-left: 0
    }
}

@media only screen and (max-width: 768px) {
    .swiper-seeAll {
        margin-right: 0;
        margin-left: 0
    }
}

.swiper-button-disabled {
    color: #ccc;
    pointer-events: none
}

@media only screen and (min-width: 769px) {
    .swiper-button-disabled:hover {
        color: #ccc
    }
}

.swiper-close {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: 8px;
    white-space: nowrap;
    pointer-events: auto
}


.m-likeOnBoarding {
    position: absolute;
    bottom: 0;
    left: -6px;
    z-index: 10;
    display: -webkit-box;
    display: flex;
    min-width: 300px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform-origin: 25px bottom;
    transform-origin: 25px bottom
}

@media only screen and (max-width: 479px) {
    .m-likeOnBoarding {
        min-width: 270px
    }

    .m-likeOnBoarding .m-likeOnBoarding__message {
        max-width: 220px
    }
}

@media only screen and (max-width: 479px) {
    .m-likeOnBoarding--with_articleActionSp {
        right: -7px;
        bottom: 16px;
        left: auto;
        -webkit-transform-origin: 98% bottom;
        transform-origin: 98% bottom
    }

    .m-likeOnBoarding--with_articleActionSp .m-likeOnBoarding__balloon {
        margin-left: auto
    }
}

.m-likeOnBoarding__balloon {
    position: relative;
    color: #fff;
    text-align: left;
    background-color: #2cb696;
    border: 1px solid #2cb696;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(34, 34, 34, .25), 0 0 1px rgba(34, 34, 34, .35)
}

.m-likeOnBoarding__balloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #2cb696;
    box-shadow: 1px 1px 0 0 #2cb696
}

.m-likeOnBoarding__balloon--tailPosition_bottomLeft:before {
    bottom: -12px;
    left: 12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeOnBoarding__balloon--tailPosition_bottomRight:before {
    right: 14px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeOnBoarding__body {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px
}

.m-likeOnBoarding__message {
    max-width: 220px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: normal
}

@media only screen and (max-width: 479px) {
    .m-likeOnBoarding__message {
        font-size: 12px
    }
}

.m-likeOnBoarding__status {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 12px
}

.m-likeOnBoarding__status:last-child {
    margin-bottom: 0
}

.m-likeOnBoarding__statusText {
    margin-left: 8px
}

.m-likeOnBoarding__statusImage {
    width: 40px;
    height: 40px;
    background-color: transparent
}

.m-likeOnBoarding__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #e6e6e6
}

.m-likeOnBoarding.is-shown {
    -webkit-animation: showOnBoarding.16s;
    animation: showOnBoarding.16s
}

@-webkit-keyframes showOnBoarding{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    3% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px)
    }
    3% {
        -webkit-transform: translateY(-48px);
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    5% {
        -webkit-transform: translateY(-34px);
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    6% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    91.66667% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px)
    }
    94.44444% {
        -webkit-transform: translateY(-42px);
        transform: translateY(-42px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    97.22222% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-20px) scale(.95);
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes showOnBoarding{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    3% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px)
    }
    3% {
        -webkit-transform: translateY(-48px);
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    5% {
        -webkit-transform: translateY(-34px);
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    6% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    91.66667% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px)
    }
    94.44444% {
        -webkit-transform: translateY(-42px);
        transform: translateY(-42px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    97.22222% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-20px) scale(.95);
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}


.m-likeNoLogin {
    position: absolute;
    bottom: 24px;
    left: -6px;
    z-index: 8
}

.m-likeNoLogin__wrapper {
    min-width: 300px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform-origin: 25px bottom;
    transform-origin: 25px bottom
}

.m-likeNoLogin__wrapper.is-shown {
    -webkit-animation: showNoLogin.16s;
    animation: showNoLogin.16s
}

@-webkit-keyframes showNoLogin{
    0% {
        opacity: 0;
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    1% {
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    1.5% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    1.5% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    2.5% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    3% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    95.83333% {
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px)
    }
    97.22222% {
        -webkit-transform: translateY(-18px);
        transform: translateY(-18px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    98.61111% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(4px) scale(.95);
        transform: translateY(4px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes showNoLogin{
    0% {
        opacity: 0;
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    1% {
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    1.5% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    1.5% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    2.5% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    3% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    95.83333% {
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px)
    }
    97.22222% {
        -webkit-transform: translateY(-18px);
        transform: translateY(-18px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    98.61111% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(4px) scale(.95);
        transform: translateY(4px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.m-likeNoLogin__balloon {
    position: relative;
    text-align: left;
    background-color: #fff;
    border: 1px solid #2cb696;
    border-radius: 4px
}

.m-likeNoLogin__balloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #2cb696
}

.m-likeNoLogin__balloon--tailPosition_bottomLeft:before {
    bottom: -12px;
    left: 12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeNoLogin__body {
    position: relative;
    padding: 16px 24px 16px 16px
}

.m-likeNoLogin__title {
    font-weight: 700;
    color: #2cb696;
    font-size: 14px
}

.m-likeNoLogin__description {
    font-weight: 400;
    color: #787c7b;
    font-size: 12px
}

.m-likeNoLogin__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .m-likeNoLogin__close:hover {
        color: #787c7b
    }
}


.o-timelineLimitedNote a {
    text-decoration: none
}

.o-timelineLimitedNote a:hover {
    text-decoration: underline
}

.o-timelineLimitedNote__body {
    display: inline;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 12px
}

.o-timelineLimitedNote__body + .o-timelineLimitedNote__body {
    margin-top: 8px
}

.o-timelineLimitedNote__text {
    display: inline;
    margin-left: -.2em;
    letter-spacing: .04em
}

.o-timelineLimitedNote__text:first-child {
    margin-left: 0
}

.o-timelineLimitedNote__link {
    display: -webkit-box;
    display: flex;
    color: #787c7b;
    letter-spacing: .04em
}

@media only screen and (min-width: 769px) {
    .o-timelineLimitedNote__link:hover {
        color: #222
    }
}

.o-timelineLimitedNote__link--inline {
    display: inline-block
}

.o-timelineLimitedNote__aside {
    display: inline;
    margin-left: -.2em;
    letter-spacing: .04em
}

.o-timelineLimitedNote__aside:first-child {
    margin-left: 0
}


.o-topicRecommendNotes__item {
    position: relative;
    box-sizing: border-box;
    width: 100%
}


.m-contestLightsCard {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 4px
}

.m-contestLightsCard[data-color=red] .m-contestLightsCard__title {
    background-color: #ff8c6e
}

.m-contestLightsCard[data-color=red] .m-contestLightsCard__title:before {
    border-color: hsla(0, 0%, 100%, .6)
}

.m-contestLightsCard[data-color=green] .m-contestLightsCard__title {
    color: #005155;
    background-color: #99e1d7
}

.m-contestLightsCard[data-color=green] .m-contestLightsCard__title:before {
    border-color: rgba(0, 81, 85, .2)
}

.m-contestLightsCard[data-color=blue] .m-contestLightsCard__title {
    background-color: #5dc0d5
}

.m-contestLightsCard[data-color=blue] .m-contestLightsCard__title:before {
    border-color: hsla(0, 0%, 100%, .6)
}

.m-contestLightsCard[data-color=yellow] .m-contestLightsCard__title {
    color: #6d3f00;
    background-color: #ffc23c
}

.m-contestLightsCard[data-color=yellow] .m-contestLightsCard__title:before {
    border-color: rgba(109, 63, 0, .2)
}

.m-contestLightsCard[data-less-info=true] .m-contestLightsCard__title {
    width: 100%
}

.m-contestLightsCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    cursor: pointer
}

.m-contestLightsCard__container {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-contestLightsCard__container {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-contestLightsCard__container:hover {
        border-color: #ccc
    }
}

.m-contestLightsCard__title {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 68%;
    padding: 4px 8px 4px 40px;
    color: #fff;
    background-color: #787c7b
}

.m-contestLightsCard__title, .m-contestLightsCard__title:before {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.m-contestLightsCard__title:before {
    position: absolute;
    top: 50%;
    left: 8px;
    -webkit-box-align: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    font-size: 20px;
    line-height: 1;
    content: "#"
}

.m-contestLightsCard__titleMain {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    font-weight: 700
}

.m-contestLightsCard__sponsor {
    font-size: 10px;
    font-weight: 700
}

.m-contestLightsCard__detail {
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.m-contestLightsCard__postCount {
    padding-bottom: 2px;
    line-height: 1;
    text-align: center;
    border-bottom: 1px solid #222
}

.m-contestLightsCard__postCountLink {
    font-weight: 700;
    color: #222;
    font-size: 12px
}


.m-contestsCard {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-contestsCard {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-contestsCard:hover {
        border-color: #ccc
    }
}

.m-contestsCard[data-less-info=true] .m-contestsCard__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.m-contestsCard[data-less-info=true] .m-contestsCard__period {
    margin-top: 0;
    font-size: 12px
}

.m-contestsCard--large {
    overflow: hidden
}

.m-contestsCard--large .m-contestsCard__container {
    display: inline;
    min-height: 0
}

.m-contestsCard--large .m-contestsCard__banner {
    width: 100%;
    border-radius: 0
}

.m-contestsCard--large .m-contestsCard__detail {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px 24px
}

@media only screen and (max-width: 479px) {
    .m-contestsCard--large .m-contestsCard__detail {
        padding: 8px 16px
    }
}

.m-contestsCard--large .m-contestsCard__postCount {
    z-index: 1
}

.m-contestsCard--large .m-contestsCard__period {
    font-size: 12px;
    margin-top: 0;
    line-height: 1
}

.m-contestsCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    cursor: pointer
}

.m-contestsCard__container {
    display: -webkit-box;
    display: flex
}

.m-contestsCard__banner {
    position: relative;
    width: 68%;
    overflow: hidden;
    border-radius: 3px 0 0 3px
}

.m-contestsCard__banner:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 33.33333%;
    content: ""
}

.m-contestsCard__bannerImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.m-contestsCard__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.m-contestsCard__postCount {
    padding-bottom: 2px;
    line-height: 1;
    text-align: center;
    border-bottom: 1px solid #222
}

.m-contestsCard__postCountLink {
    font-weight: 700;
    color: #222;
    font-size: 12px
}

.m-contestsCard__period {
    margin-top: 8px;
    font-size: 10px;
    color: #787c7b;
    text-align: center
}


.m-odaiCard {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-odaiCard {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-odaiCard:hover {
        border-color: #ccc
    }
}

.m-odaiCard[data-color=red] .m-odaiCard__title {
    color: #ff5732
}

.m-odaiCard[data-color=green] .m-odaiCard__title {
    color: #5ac8b8
}

.m-odaiCard[data-color=blue] .m-odaiCard__title {
    color: #4f9aa8
}

.m-odaiCard[data-color=yellow] .m-odaiCard__title {
    color: #f68229
}

.m-odaiCard[data-less-info=true] .m-odaiCard__title {
    width: 100%
}

.m-odaiCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block
}

.m-odaiCard__container {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    min-height: 56px
}

.m-odaiCard__title {
    position: relative;
    width: 68%;
    padding: 4px 0 4px 40px
}

.m-odaiCard__title:before {
    position: absolute;
    top: 50%;
    left: 8px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    font-size: 20px;
    line-height: 1;
    content: "#"
}

.m-odaiCard__titleMain {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    font-weight: 700
}

.m-odaiCard__sponsor {
    font-size: 10px;
    font-weight: 700
}

.m-odaiCard__detail {
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.m-odaiCard__postCount {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap
}

.m-odaiCard__postCountLink {
    padding-bottom: 2px;
    font-weight: 700;
    color: #222;
    border-bottom: 1px solid #222;
    font-size: 12px
}


.o-sidebarContests {
    position: relative;
    width: 100%
}

.o-sidebarContests__item + .o-sidebarContests__item {
    margin-top: 40px
}

.o-sidebarContests__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
}

.o-sidebarContests__header__title {
    font-size: 16px;
    font-weight: 700
}

.o-sidebarContests__header__readAll {
    font-size: 12px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .o-sidebarContests__header__readAll:hover {
        color: #222
    }
}

.o-sidebarContests__listItem {
    margin-top: 16px
}


.o-sidebarPickupNotes {
    position: relative;
    width: 100%
}

.o-sidebarPickupNotes__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.o-sidebarPickupNotes__header__title {
    font-size: 16px;
    font-weight: 700
}

.o-sidebarPickupNotes__header__readAll {
    font-size: 12px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .o-sidebarPickupNotes__header__readAll:hover {
        color: #222
    }
}

.o-sidebarPickupNotes__noteListItem {
    padding: 16px 0;
    border-bottom: 1px solid #f2f2f2
}


.m-contestListItem {
    position: relative;
    width: 100%;
    padding-bottom: 16px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2
}

@media only screen and (min-width: 769px) {
    .m-contestListItem:hover:before {
        position: absolute;
        top: -8px;
        right: -8px;
        bottom: 8px;
        left: -8px;
        z-index: -1;
        display: block;
        content: "";
        background-color: #f7f9f9;
        border-radius: 4px
    }
}

.m-contestListItem__title {
    font-size: 18px;
    display: block;
    width: 100%;
    padding-bottom: 4px;
    font-weight: 700
}

.m-contestListItem__bannerContainer {
    position: relative;
    height: 0;
    padding-bottom: 33.33333%;
    overflow: hidden;
    border-radius: 4px
}

.m-contestListItem__banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.m-contestListItem__description {
    font-size: 12px;
    display: block;
    width: 100%;
    color: #787c7b
}

.m-contestListItem__bottom {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-top: 8px
}

.m-contestListItem__link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%
}

.m-contestListItem__button {
    z-index: 2
}


.o-sidebarThemes {
    position: relative;
    width: 100%
}

.o-sidebarThemes__item + .o-sidebarThemes__item {
    margin-top: 40px
}

.o-sidebarThemes__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
}

.o-sidebarThemes__header__title {
    font-size: 16px;
    font-weight: 700
}

.o-sidebarThemes__header__readAll {
    font-size: 12px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .o-sidebarThemes__header__readAll:hover {
        color: #222
    }
}

.o-sidebarThemes__listItem {
    margin-top: 16px
}


.o-sidebarOfficialAccounts {
    display: block;
    padding: 16px;
    cursor: pointer;
    background-color: #5ac8b8;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/follow_official_acounts.304fa01.png);
    background-repeat: no-repeat;
    background-position: top 16px right 16px;
    background-size: 100px 100px;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-sidebarOfficialAccounts:hover .o-sidebarOfficialAccounts__action {
        background-color: #228d74;
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-sidebarOfficialAccounts__header {
    position: relative
}

.o-sidebarOfficialAccounts__title {
    -webkit-box-flex: 1;
    flex: 1;
    height: 100px;
    font-size: 16px
}

.o-sidebarOfficialAccounts__action, .o-sidebarOfficialAccounts__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 700;
    color: #fff
}

.o-sidebarOfficialAccounts__action {
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    background-color: #2cb696;
    border-radius: 4px;
    font-size: 12px
}


.m-hashtagContestCard__header {
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
}

.m-hashtagContestCard__header, .m-hashtagContestCard__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.m-hashtagContestCard__title {
    -webkit-box-flex: 1;
    flex: 1;
    flex-wrap: wrap
}

.m-hashtagContestCard__titleBody {
    font-size: 32px;
    font-weight: 700
}

.m-hashtagContestCard__titleBody:before {
    display: inline-block;
    content: "#"
}

.m-hashtagContestCard__titleLabel {
    margin-left: 8px
}

.m-hashtagContestCard__action {
    padding-left: 16px
}

.m-hashtagContestCard__actionItem {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .m-hashtagContestCard__actionItem:hover {
        color: #787c7b
    }
}

.m-hashtagContestCard__body, .m-hashtagContestCard__info {
    width: 100%
}

.m-hashtagContestCard__banner {
    width: 290px;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .m-hashtagContestCard__banner {
        width: 100%
    }
}

.m-hashtagContestCard__image {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4px
}

.m-hashtagContestCard__imageBody {
    width: 100%;
    height: auto;
    vertical-align: top
}

.m-hashtagContestCard__message {
    margin-bottom: 16px;
    margin-left: 4px;
    font-size: 14px
}

.m-hashtagContestCard__messageMore {
    font-weight: 700;
    text-decoration: underline
}

.m-hashtagContestCard__regulation {
    margin-bottom: 16px;
    font-size: 12px;
    white-space: pre-line;
    -webkit-animation: contestRegulationAnimation1);
    animation: contestRegulationAnimation1)
}

@-webkit-keyframes contestRegulationAnimation{
    0% {
        height: 0;
        opacity: 0
    }
    to {
        height: auto;
        opacity: 1
    }
}

@keyframes contestRegulationAnimation{
    0% {
        height: 0;
        opacity: 0
    }
    to {
        height: auto;
        opacity: 1
    }
}

.m-hashtagContestCard__button {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}


.m-buttonGroup {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start
}

.m-buttonGroup__item {
    margin-left: -1px
}

@media only screen and (min-width: 769px) {
    .m-buttonGroup__item:hover {
        z-index: 2
    }
}

.m-buttonGroup__item .btn {
    display: inline-block;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    line-height: 1;
    color: inherit;
    color: #787c7b;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.m-buttonGroup__item .btn.is-active {
    /*color: #fff;*/
    /*background-color: #2cb696;*/
    color: #000;
    background-color: #2cb696;
}



.m-buttonGroup__item .btn:active, .m-buttonGroup__item .btn:hover {
    outline: none
}

@media only screen and (min-width: 769px) {
    .m-buttonGroup__item .btn:hover {
        color: #222
    }
}

.m-buttonGroup__item .btn--size_small {
    min-height: 32px;
    font-size: 14px
}

.m-buttonGroup__item .btn--size_large {
    min-height: 48px;
    font-size: 16px
}

.m-buttonGroup__item:first-child .btn {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.m-buttonGroup__item:last-child .btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.m-buttonGroup__item .is-active {
    color: #222;
    background-color: #e6e6e6
}


.o-timelineHashtag__head {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__head {
        margin: 0 16px
    }
}

.o-timelineHashtag__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    align-items: center
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__title {
        flex-wrap: wrap
    }
}

.o-timelineHashtag__titleLabel {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    word-break: break-all
}

.o-timelineHashtag__titleLabel:before {
    display: inline-block;
    content: "#"
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__titleLabel {
        width: 100%;
        font-size: 18px
    }
}

.o-timelineHashtag__titleLabel[data-has-contest=true] {
    font-size: 32px
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__titleLabel[data-has-contest=true] {
        font-size: 24px
    }
}

.o-timelineHashtag__tag {
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__tag {
        margin-top: 8px;
        margin-left: 0
    }
}

.o-timelineHashtag__rss {
    flex-shrink: 0;
    margin-left: 16px;
    color: #a8abb1
}

.o-timelineHashtag__num {
    margin-left: 16px;
    color: #787c7b;
    white-space: nowrap;
    font-size: 14px
}

@media only screen and (max-width: 359px) {
    .o-timelineHashtag__num {
        margin-top: 8px;
        margin-left: 0;
        text-align: center
    }
}

.o-timelineHashtag__related {
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__related {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        margin-top: 8px;
        margin-bottom: 0;
        overflow: auto;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch
    }

    .o-timelineHashtag__related::-webkit-scrollbar {
        display: none
    }
}

.o-timelineHashtag__relatedTitle {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__relatedTitle {
        padding-right: 16px;
        padding-left: 16px;
        margin-bottom: 0;
        line-height: 1
    }
}

.o-timelineHashtag__relatedBody {
    display: -webkit-inline-box;
    display: inline-flex;
    flex-wrap: wrap
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__relatedBody {
        flex-wrap: nowrap;
        padding-right: 16px
    }
}

.o-timelineHashtag__relatedItem {
    margin-right: 4px;
    margin-bottom: 4px
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__relatedItem + .o-timelineHashtag__relatedItem {
        margin-right: 0;
        margin-left: 4px
    }
}

.o-timelineHashtag__contest {
    -webkit-box-flex: 0;
    flex: 0;
    margin-bottom: 32px
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__contest {
        padding-right: 16px;
        padding-left: 16px;
        margin-bottom: 24px
    }
}

.o-timelineHashtag__contestItem + .o-timelineHashtag__contestItem {
    margin-top: 8px
}

.o-timelineHashtag__contestImage {
    width: 100%;
    height: 100%
}

.o-timelineHashtag__nav {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__nav {
        padding: 8px 16px;
        background-color: #fff;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2
    }
}

@media only screen and (max-width: 359px) {
    .o-timelineHashtag__nav {
        display: block
    }
}

@media only screen and (max-width: 359px) {
    .o-timelineHashtag__sort {
        -webkit-box-pack: center;
        justify-content: center
    }
}


.m-tabMenu__menu {
    display: -webkit-box;
    display: flex
}

.m-tabMenu__item {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border-bottom: 2px solid transparent
}

.m-tabMenu__item.is--active {
    border-bottom: 2px solid #222
}

.m-tabMenu__item.is--active .m-tabMenu__link {
    color: #222
}

.m-tabMenu__item.is--separate {
    position: relative;
    margin-left: 16px
}

.m-tabMenu__item.is--separate:before {
    position: absolute;
    top: 50%;
    left: -8px;
    display: block;
    width: 1px;
    height: 24px;
    content: "";
    background-color: #e6e6e6;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.m-tabMenu__link {
    display: block;
    padding: 16px;
    color: #a8abb1;
    white-space: nowrap
}

@media only screen and (min-width: 769px) {
    .m-tabMenu__link:hover {
        color: #222
    }
}

@media only screen and (max-width: 479px) {
    .m-tabMenu__link {
        padding: 12px
    }
}


.o-timelineNoteItem__pinned {
    position: relative;
    z-index: 2;
    margin: 0 0 8px
}

@media only screen and (max-width: 479px) {
    .o-timelineNoteItem__pinned {
        margin: 16px 16px -8px
    }
}


.m-userPromoteCard {
    width: 100%;
    padding: 16px;
    background-color: #f7f9f9;
    border-radius: 4px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-userPromoteCard {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: justify;
        justify-content: space-between
    }
}

@media only screen and (max-width: 479px) {
    .m-userPromoteCard {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: justify;
        justify-content: space-between
    }
}

.m-userPromoteCard__header {
    position: relative;
    display: -webkit-box;
    display: flex
}

.m-userPromoteCard__headIcon {
    height: 56px;
    margin-right: 8px;
    background-color: #f7f9f9
}

.m-userPromoteCard__title {
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 16px;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px
}

.m-userPromoteCard__close {
    position: absolute;
    top: -8px;
    right: -8px;
    color: #a8abb1
}

.m-userPromoteCard__description {
    font-size: 14px;
    color: #787c7b
}

@media only screen and (max-width: 768px) {
    .m-userPromoteCard__description {
        -webkit-box-flex: 1;
        flex: 1
    }
}

@media only screen and (max-width: 479px) {
    .m-userPromoteCard__description {
        font-size: 12px
    }
}

.m-userPromoteCard__body {
    margin-top: 16px
}


.m-profilePromoteCard__item, .m-profilePromoteCard__textarea {
    margin-bottom: 16px
}


.m-SettingProfileImageUserPromoteCard__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px
}

.m-SettingProfileImageUserPromoteCard__item:last-child {
    margin-bottom: 0
}

.m-SettingProfileImageUserPromoteCard__avatarSetting {
    position: relative;
    height: 68px;
    padding: 4px;
    cursor: pointer;
    border: 2px dotted #2cb696;
    border-radius: 50%
}

.m-SettingProfileImageUserPromoteCard__avatarSettingOverlay {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    background-color: rgba(34, 34, 34, .5);
    border-radius: 50%
}


.m-welcomeBeginnerUserPromoteCard__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px
}

.m-welcomeBeginnerUserPromoteCard__item:last-child {
    margin-bottom: 0
}


@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-userPromote {
        position: relative;
        margin-bottom: 32px
    }
}

@media only screen and (max-width: 479px) {
    .o-userPromote {
        position: relative
    }
}

.o-userPromote.is-tabletSp .o-userPromote__item {
    min-width: 290px
}

@media only screen and (max-width: 768px) {
    .o-userPromote__body {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        padding: 8px
    }
}

.o-userPromote__item {
    display: -webkit-box;
    display: flex;
    margin-bottom: 16px
}

.o-userPromote__item:last-child {
    margin-bottom: 0
}


.m-categoryList__heading {
    margin-bottom: 16px;
    font-weight: 700
}

@media only screen and (max-width: 479px) {
    .m-categoryList__heading {
        margin-bottom: 8px
    }
}

.m-categoryList__item {
    padding: 4px 0;
    border-bottom: 1px solid #f2f2f2
}

.m-categoryList__item:last-child {
    border-bottom: 0
}

.m-categoryList__itemLink {
    position: relative;
    display: block;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-categoryList__itemLink:hover:after {
        position: absolute;
        top: 0;
        right: -8px;
        bottom: 0;
        left: -8px;
        z-index: -1;
        content: "";
        background-color: #f7f9f9;
        border-radius: 4px
    }
}

.m-categoryList__itemLink.active {
    color: #2cb696
}


.m-notificationListItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    padding: 16px
}

@media only screen and (min-width: 769px) {
    .m-notificationListItem:hover {
        background-color: #f7f9f9
    }
}

.m-notificationListItem--webview .m-notificationListItem__date {
    position: absolute;
    top: 0;
    right: 16px;
    margin-top: 16px
}

@media only screen and (max-width: 479px) {
    .m-notificationListItem--webview .m-notificationListItem__date {
        position: static;
        top: auto;
        right: auto;
        margin-top: 8px
    }
}

.m-notificationListItem--webview .m-notificationListItem__body {
    margin-right: 48px
}

@media only screen and (max-width: 479px) {
    .m-notificationListItem--webview .m-notificationListItem__body {
        margin-right: 0
    }
}

.m-notificationListItem__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.m-notificationListItem__featured {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 0;
    flex: 0 0 32px;
    height: 100%
}

.m-notificationListItem__featuredLink {
    display: block
}

.m-notificationListItem__featuredIcon {
    width: 32px;
    height: 32px;
    -o-object-fit: cover;
    object-fit: cover;
    background-color: transparent;
    border-radius: 4px
}

.m-notificationListItem__actionUser {
    display: -webkit-box;
    display: flex;
    margin-bottom: 4px
}

.m-notificationListItem__actionUserItem {
    position: relative;
    z-index: 3
}

.m-notificationListItem__actionUserItem + .m-notificationListItem__actionUserItem {
    margin-left: 4px
}

.m-notificationListItem__body {
    margin-left: 16px;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.m-notificationListItem__message {
    font-size: 12px;
    line-height: 1.5;
    color: #222;
    word-break: break-all
}

@media only screen and (max-width: 479px) {
    .m-notificationListItem__message {
        font-size: 14px
    }
}

.m-notificationListItem__message a {
    position: relative;
    z-index: 3;
    font-weight: 700;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .m-notificationListItem__message a:hover {
        text-decoration: none
    }
}

.m-notificationListItem__date {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1;
    color: #a8abb1
}

.m-notificationListItem .welcomSub {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.5;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .m-notificationListItem .welcomSub {
        font-size: 14px
    }
}


.m-notificationList {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.m-notificationList__item {
    display: -webkit-box;
    display: flex;
    padding: 16px
}

.m-notificationList__item + .m-notificationList__item {
    border-top: 1px solid #f2f2f2
}

.m-notificationList__item--empty {
    color: #787c7b;
    white-space: nowrap;
    font-size: 14px
}

.loading, .m-notificationList__item--empty, .m-notificationList__item--loading {
    -webkit-box-pack: center;
    justify-content: center
}

.loading {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%
}

.loading__item {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    margin-left: 4px;
    background-color: #222;
    border-radius: 8px;
    opacity: .3
}

.loading__item:first-child {
    -webkit-animation: loadingAnimationinfinite;
    animation: loadingAnimationinfinite
}

.loading__item:nth-child(2) {
    -webkit-animation: loadingAnimationinfinite;
    animation: loadingAnimationinfinite
}

.loading__item:nth-child(3) {
    -webkit-animation: loadingAnimationinfinite;
    animation: loadingAnimationinfinite
}


.m-pulldown {
    position: relative
}

.m-pulldown__body {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 1000;
    min-width: 180px;
    overflow: auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(34, 34, 34, .25), 0 0 1px rgba(34, 34, 34, .35);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-overflow-scrolling: touch
}

.m-pulldown__body:before {
    content: ""
}

@media only screen and (max-width: 479px) {
    .m-pulldown__body {
        position: fixed;
        top: 48px;
        left: 0;
        width: 100%;
        height: calc(100vh - 48px);
        height: calc(var(--ih, 1vh) * 100 - 48px);
        border-radius: 0;
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    .m-pulldown__body:before {
        display: none
    }
}


.p-draftNoteList {
    border-top: 1px solid #f2f2f2
}

@media only screen and (max-width: 479px) {
    .p-draftNoteList {
        padding-bottom: 32px
    }
}

.p-draftNoteList__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 32px 32px 8px
}

.p-draftNoteList__caption {
    font-size: 12px;
    font-weight: 700;
    color: #222
}

.p-draftNoteList__noteList {
    font-size: 12px;
    text-align: right
}

.p-draftNoteList__noteList > a {
    color: #2cb696
}

@media only screen and (min-width: 769px) {
    .p-draftNoteList__noteList > a:hover {
        color: #2cb696
    }
}

.p-draftNoteList__body {
    padding-bottom: 16px
}

.p-draftNoteList__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 16px 32px;
    color: #787c7b;
    text-align: left
}

@media only screen and (min-width: 769px) {
    .p-draftNoteList__link:hover {
        color: #222;
        background-color: #f7f9f9
    }
}

@media only screen and (max-width: 479px) {
    .p-draftNoteList__link {
        padding: 8px 32px
    }
}

.p-draftNoteList__title {
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 300px;
    overflow: hidden;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px
}

@media only screen and (min-width: 769px) {
    .p-draftNoteList__title:hover {
        color: #222
    }
}

.p-draftNoteList__date {
    padding-left: 16px;
    color: #a8abb1;
    font-size: 12px;
    white-space: nowrap
}


li {
    list-style: none
}


@media only screen and (min-width: 769px) {
    .o-kaizenNoticeNavbar {
        cursor: pointer
    }

    .o-kaizenNoticeNavbar:hover {
        background-color: #f7f9f9
    }
}

.o-kaizenNoticeNavbar .o-kaizenNotice__container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0
}
<script charset="utf-8" src="./index_files/note.9503633cb2c0180a6eac.js.download"></script>
                                                                                    <script charset="utf-8" src="./index_files/note.c31b39ee433da729fcb9.js.download"></script>
                                                                                                                                                                        <script charset="utf-8" src="./index_files/note.a55bee406f68fb0bdcc5.js.download"></script>
                                                                                                                                                                                                                                                            <script charset="utf-8" src="./index_files/note.564b2ab751cf1514060c.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                <script charset="utf-8" src="./index_files/note.528f18ceb7133c1322f4.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                    <script charset="utf-8" src="./index_files/note.7b21cb879db7b41b6b03.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <script charset="utf-8" src="./index_files/note.82f5dc0b9a849f40ebe7.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <script charset="utf-8" src="./index_files/note.b363e01a9361ca9e5e0d.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <script charset="utf-8" src="./index_files/note.ab2074bace6eb066c364.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <script charset="utf-8" src="./index_files/note.3b2c6cd86d3f4a6cd0e7.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <script charset="utf-8" src="./index_files/note.c6dfbc72d10110e3eb39.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <script charset="utf-8" src="./index_files/note.c3d54ba3870054f396df.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <script charset="utf-8" src="./index_files/note.c12340dc996cd7460a46.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <script charset="utf-8" src="./index_files/note.9cc7ba54b23ed1ad08d9.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <script charset="utf-8" src="./index_files/note.eac2e886ba6475212cc5.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <script charset="utf-8" src="./index_files/note.6f1dabe480654fb24687.js.download"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <script charset="utf-8" src="./index_files/note.70160b0af8ded31f9941.js.download"></script>


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    .o-actionItemsField {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        display: -webkit-box;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        display: flex;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        -webkit-box-align: center;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        align-items: center
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }

.o-actionItemsField__actionItemButton {
    position: relative;
    margin-left: 16px
}

.o-actionItemsField__actionItem {
    margin-left: 16px;
    color: #a8abb1;
    white-space: nowrap
}

@media only screen and (min-width: 769px) {
    .o-actionItemsField__actionItem {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-actionItemsField__actionItem:hover {
        color: #787c7b
    }
}

.o-actionItemsField__followIcon {
    margin-right: 4px
}


.o-creatorMenu {
    width: 100%;
    background-color: #fff
}

.o-creatorMenu--bottomBorder, .o-creatorMenu--topic {
    border-bottom: 1px solid #e6e6e6
}

.o-creatorMenu--topic {
    margin-top: -1px
}

.o-creatorMenu--topic .o-creatorMenu__inner {
    max-width: none;
    padding: 0 24px 0 8px;
    border-top: none;
    border-bottom: none
}

@media only screen and (max-width: 479px) {
    .o-creatorMenu--topic .o-creatorMenu__inner {
        padding: 0 16px 0 0
    }
}

.o-creatorMenu__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: top;
    align-items: top;
    max-width: 940px;
    margin: 0 auto;
    border-top: 1px solid #f2f2f2
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-creatorMenu__inner {
        width: 100%;
        padding: 0 0 0 8px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorMenu__inner {
        width: 100%;
        padding: 0 0 0 8px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorMenu__inner {
        width: 100%
    }
}

.o-creatorMenu__nav {
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.o-creatorMenu__nav::-webkit-scrollbar {
    display: none
}

.o-creatorMenu__nav:before {
    position: absolute;
    top: 2px;
    right: 0;
    z-index: 1;
    width: 32px;
    height: 98%;
    content: "";
    background: -webkit-linear-gradient(right, #fff 50%, hsla(0, 0%, 100%, 0));
    background: linear-gradient(270deg, #fff 50%, hsla(0, 0%, 100%, 0))
}

@media only screen and (max-width: 768px) {
    .o-creatorMenu__nav:before {
        display: none
    }
}

.o-creatorMenu__navBody {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.o-creatorMenu__navBody::-webkit-scrollbar {
    display: none
}

.o-creatorMenu__navItem {
    white-space: nowrap
}

@media only screen and (max-width: 479px) {
    .o-creatorMenu__navItem:first-child {
        margin-left: 8px
    }
}

.o-creatorMenu__navItem:last-child {
    padding-right: 32px
}

.o-creatorMenu__navLink {
    position: relative;
    display: block;
    padding: 24px 16px;
    font-size: 14px;
    line-height: 1
}

@media only screen and (max-width: 479px) {
    .o-creatorMenu__navLink {
        padding: 16px 8px;
        font-size: 12px
    }
}

@media only screen and (min-width: 769px) {
    .o-creatorMenu__navLink:hover:before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        content: "";
        background-color: #222
    }
}

.o-creatorMenu__navLink.is-active {
    font-weight: 700
}

.o-creatorMenu__navLink.is-active:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #222
}

.o-creatorMenu__option {
    display: none
}

@media only screen and (min-width: 769px) {
    .o-creatorMenu__option {
        display: block
    }
}

.o-creatorMenu__optionLink {
    position: relative;
    display: block;
    padding: 24px 16px;
    font-size: 14px;
    line-height: 1
}

@media only screen and (max-width: 479px) {
    .o-creatorMenu__optionLink {
        padding: 16px;
        font-size: 12px
    }
}

@media only screen and (min-width: 769px) {
    .o-creatorMenu__optionLink:hover:before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        content: "";
        background-color: #222
    }
}

.o-creatorMenu__optionLink.is-active {
    font-weight: 700
}

.o-creatorMenu__optionLink.is-active:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #222
}


.o-followRecommend__title {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-followRecommend__title {
        margin-left: 128px
    }
}

.o-followRecommend__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-followRecommend__body {
        width: calc(100% + 48px);
        margin-left: -24px
    }
}

@media only screen and (max-width: 479px) {
    .o-followRecommend__body {
        width: calc(100% + 32px);
        margin-left: -16px
    }
}

.o-followRecommend__body:after {
    display: block;
    padding-left: 1px;
    content: ""
}

.o-followRecommend__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    width: 20%
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-followRecommend__item {
        width: 160px;
        min-width: 160px
    }
}

@media only screen and (max-width: 479px) {
    .o-followRecommend__item {
        width: 160px;
        min-width: 160px
    }
}

.o-followRecommend__item + .o-followRecommend__item {
    margin-left: 8px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-followRecommend__item:first-child {
        margin-left: 152px
    }
}

@media only screen and (max-width: 479px) {
    .o-followRecommend__item:first-child {
        margin-left: 16px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-followRecommend__item:last-child {
        margin-right: 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-followRecommend__item:last-child {
        margin-right: 16px
    }
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
.pswp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    outline: none
}

.pswp * {
    box-sizing: border-box
}

.pswp img {
    max-width: none
}

.pswp--animate_opacity {
    opacity: .001;
    will-change: opacity;
    -webkit-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
    transition: opacity 333ms cubic-bezier(.4, 0, .22, 1)
}

.pswp--open {
    display: block
}

.pswp--zoom-allowed .pswp__img {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in
}

.pswp--zoomed-in .pswp__img {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab
}

.pswp--dragging .pswp__img {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing
}

.pswp__bg {
    background: #000;
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden
}

.pswp__bg, .pswp__scroll-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.pswp__scroll-wrap {
    overflow: hidden
}

.pswp__container, .pswp__zoom-wrap {
    touch-action: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.pswp__container, .pswp__img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

.pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transition: -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1);
    transition: -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1);
    transition: transform 333ms cubic-bezier(.4, 0, .22, 1);
    transition: transform 333ms cubic-bezier(.4, 0, .22, 1), -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1)
}

.pswp__bg {
    will-change: opacity;
    -webkit-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
    transition: opacity 333ms cubic-bezier(.4, 0, .22, 1)
}

.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap {
    -webkit-transition: none;
    transition: none
}

.pswp__container, .pswp__zoom-wrap {
    -webkit-backface-visibility: hidden
}

.pswp__item {
    right: 0;
    bottom: 0;
    overflow: hidden
}

.pswp__img, .pswp__item {
    position: absolute;
    left: 0;
    top: 0
}

.pswp__img {
    width: auto;
    height: auto
}

.pswp__img--placeholder {
    -webkit-backface-visibility: hidden
}

.pswp__img--placeholder--blank {
    background: #222
}

.pswp--ie .pswp__img {
    width: 100% !important;
    height: auto !important;
    left: 0;
    top: 0
}

.pswp__error-msg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    margin-top: -8px;
    color: #ccc
}

.pswp__error-msg a {
    color: #ccc;
    text-decoration: underline
}


.pswp {
    pointer-events: auto
}

.pswp [data-shape=round] .pswp__img {
    border-radius: 50%
}

.pswp .pswp__img, .pswp__bg {
    background-color: #fff
}

@media only screen and (min-width: 769px) {
    .pswp__container {
        top: -22px
    }
}

.pswp__top-bar {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    padding: 16px
}

.pswp__button {
    display: block;
    width: 40px;
    height: 40px;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none
}

@media only screen and (min-width: 769px) {
    .pswp__button {
        -webkit-transition: color .2s;
        transition: color .2s
    }
}

.pswp__button:focus, .pswp__button:hover {
    opacity: 1
}

.pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.pswp__button--close {
    z-index: 1;
    color: #a8abb1;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .pswp__button--close {
        -webkit-transition: color .2s;
        transition: color .2s
    }

    .pswp__button--close:hover {
        color: #787c7b
    }
}

.pswp__button--arrow--left {
    position: absolute;
    top: 50%;
    right: auto;
    left: 16px;
    margin-top: -16px;
    color: #a8abb1;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .pswp__button--arrow--left {
        -webkit-transition: color .2s;
        transition: color .2s
    }

    .pswp__button--arrow--left:hover {
        color: #787c7b
    }
}

@media only screen and (max-width: 479px) {
    .pswp__button--arrow--left {
        display: none
    }
}

.pswp__button--arrow--right {
    position: absolute;
    top: 50%;
    right: 16px;
    left: auto;
    margin-top: -16px;
    color: #a8abb1;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .pswp__button--arrow--right {
        -webkit-transition: color .2s;
        transition: color .2s
    }

    .pswp__button--arrow--right:hover {
        color: #787c7b
    }
}

@media only screen and (max-width: 479px) {
    .pswp__button--arrow--right {
        display: none
    }
}

.pswp__buttonIcon {
    pointer-events: none
}

.pswp__img {
    background-color: #fff
}


.m-profileBiography {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

.m-profileBiography a {
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .m-profileBiography a:hover {
        text-decoration: none
    }
}


.m-creatorSocialLinks {
    display: -webkit-box;
    display: flex
}

.m-creatorSocialLinks__item {
    margin-right: 8px;
    color: #a8abb1
}

@media only screen and (max-width: 479px) {
    .m-creatorSocialLinks__item {
        margin-right: 0
    }

    .m-creatorSocialLinks__item + .m-creatorSocialLinks__item {
        margin-left: 8px
    }
}

@media only screen and (min-width: 769px) {
    .m-creatorSocialLinks__item {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-creatorSocialLinks__item:hover {
        color: #787c7b
    }
}


.m-profileStatus__status {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 128px
}

@media only screen and (max-width: 479px) {
    .m-profileStatus__status {
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding-left: 0
    }
}

.m-profileStatus__follow {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    white-space: nowrap
}

.m-profileStatus__follow:after {
    font-size: 14px;
    margin-right: 8px;
    color: #787c7b;
    /*content: "・"*/
}

@media only screen and (max-width: 479px) {
    .m-profileStatus__follow:after {
        display: none
    }
}

.m-profileStatus__followLink {
    margin-right: 8px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .m-profileStatus__followLink .m-profileStatus__followLabel {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-profileStatus__followLink .m-profileStatus__followLabel:hover {
        color: #222
    }
}

.m-profileStatus__followCount {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222
}

@media only screen and (max-width: 479px) {
    .m-profileStatus__followCount {
        font-size: 14px
    }
}

.m-profileStatus__followLabel {
    font-size: 14px;
    line-height: 1.5;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .m-profileStatus__followLabel {
        font-size: 12px
    }
}

.m-profileStatus__onlyVisibleToYou {
    display: inline-block;
    padding: 4px 8px;
    margin-left: 8px;
    font-weight: 400;
    color: #a8abb1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 10px
}

.m-profileStatus__social {
    margin-top: 8px;
    margin-bottom: 8px
}

.m-profileStatus__social:empty {
    display: none
}


.o-creatorProfile {
    background-color: #fff
}

@media only screen and (min-width: 769px) {
    .o-creatorProfile--topic {
        display: none
    }
}

.o-creatorProfile--topic .o-creatorProfile__profile {
    padding-top: 0;
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile--topic .o-creatorProfile__content {
        padding-bottom: 0
    }
}

.o-creatorProfile__header {
    /* //deleted by xman 2020.12.18 for detail_1.html
    padding-top: 16.875% */
}

.o-creatorProfile__header .o-creatorProfile__headerNewstyle {  /* removed comma */
    position: relative;
    /* 
        //deleted by xman 2020.12.18 for detail_1.html
        width: 100%; 
    */
    max-height: 700px;
    overflow: hidden
}

.o-creatorProfile__headerNewstyle {
    height: 0;
    padding-top: 16.9%
}

.o-creatorProfile__headerImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.o-creatorProfile__content {
    max-width: 940px;
    padding: 32px 0;
    margin: 0 auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-creatorProfile__content {
        padding-right: 16px;
        padding-left: 16px
    }
}

@media only screen and (max-width: 768px) {
    .o-creatorProfile__content {
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfile__content {
        padding-right: 24px;
        padding-left: 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__content {
        padding: 16px
    }
}

.o-creatorProfile__content--none_header {
    padding-top: 48px;
    padding-bottom: 48px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfile__content--none_header {
        padding-top: 32px;
        padding-bottom: 32px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__content--none_header {
        padding-top: 16px;
        padding-bottom: 16px
    }
}

.o-creatorProfile__contentInner, .o-creatorProfile__profile {
    position: relative;
    width: 100%
}

.o-creatorProfile__profile {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    /* //deleted by xman 2020.12.18 for detail_1.html
    padding-left: 128px; */
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__profile {
        padding-top: 80px;
        padding-left: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__action {
        position: absolute;
        top: 24px;
        right: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__action--topic {
        position: static;
        top: auto;
        right: auto
    }
}

.o-creatorProfile__biography {
    padding-left: 128px;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__biography {
        padding-left: 0
    }
}

.o-creatorProfile__recommend {
    width: 100%;
    padding-left: 128px;
    margin-top: 32px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfile__recommend {
        padding-left: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__recommend {
        padding-left: 0
    }
}

.o-creatorProfile__recommend-enter-active, .o-creatorProfile__recommend-leave-active {
    max-height: 500px;
    opacity: 1;
    -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;
    transition: max-height .3s ease-in, opacity .3s ease-in
}

.o-creatorProfile__recommend-enter, .o-creatorProfile__recommend-leave-to {
    max-height: 0;
    overflow: hidden;
    opacity: 0
}

.o-creatorProfile__onboarding {
    margin-top: 32px
}

.o-creatorProfile__onboarding:empty {
    display: none
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__onboarding {
        margin: 0 -16px
    }
}

.o-creatorProfile__avatar {
     /* 
    //deleted by xman 2020.12.18 for detail_1.html
    position: absolute;
    */
    top: -18px;
    left: 0;
    /* 
    //deleted by xman 2020.12.18 for detail_1.html
    width: 104px;
    height: 104px; */
    cursor: pointer
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-creatorProfile__avatar {
        top: -8px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfile__avatar {
        top: -8px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__avatar {
        top: 0;
        width: 72px;
        height: 72px
    }
}

/* .o-creatorProfile__name {
    font-weight: 700;
    line-height: 1.5;
    word-break: break-all;
    font-size: 22px
} */

@media only screen and (max-width: 479px) {
    .o-creatorProfile__name {
        font-size: 16px
    }
}

.o-creatorProfile__nameLabel {
    display: inline;
    vertical-align: middle
}

.o-creatorProfile__official {
    display: inline-block;
    max-height: 16px;
    vertical-align: middle
}

.o-creatorProfile__follower {
    display: inline-block;
    padding: 4px 8px;
    margin-left: 8px;
    font-weight: 400;
    color: #a8abb1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 10px
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__follower {
        padding: 2px 8px
    }
}

.o-creatorProfile__onlyVisibleToYou {
    display: inline-block;
    padding: 4px 8px;
    margin-left: 128px;
    font-weight: 400;
    color: #a8abb1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 10px
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__onlyVisibleToYou {
        padding: 2px 8px;
        margin-left: 0
    }
}


.o-creatorProfileNourlname {
    background-color: #fff
}

.o-creatorProfileNourlname__content {
    max-width: 940px;
    padding: 32px 0;
    margin: 0 auto
}

@media only screen and (max-width: 768px) {
    .o-creatorProfileNourlname__content {
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfileNourlname__content {
        padding: 32px 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__content {
        padding: 16px
    }
}

.o-creatorProfileNourlname__content--none_header {
    padding-top: 48px;
    padding-bottom: 48px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfileNourlname__content--none_header {
        padding-top: 32px;
        padding-bottom: 32px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__content--none_header {
        padding-top: 16px;
        padding-bottom: 16px
    }
}

.o-creatorProfileNourlname__contentInner {
    position: relative;
    width: 100%
}

.o-creatorProfileNourlname__profile {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-left: 128px;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__profile {
        padding-top: 80px;
        padding-left: 0
    }
}

.o-creatorProfileNourlname__avatar {
    position: absolute;
    top: -18px;
    left: 0;
    width: 104px;
    height: 104px;
    cursor: pointer
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-creatorProfileNourlname__avatar {
        top: -8px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfileNourlname__avatar {
        top: -8px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__avatar {
        top: 0;
        width: 72px;
        height: 72px
    }
}

.o-creatorProfileNourlname__name {
    font-weight: 700;
    line-height: 1.5;
    word-break: break-all;
    font-size: 22px
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__name {
        font-size: 16px
    }
}

.o-creatorProfileNourlname__nameLabel {
    display: inline;
    vertical-align: middle
}

.o-creatorProfileNourlname__official {
    display: inline;
    color: #2cb696;
    vertical-align: middle
}

.o-creatorProfileNourlname__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__action {
        position: absolute;
        top: 20px;
        right: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__action--none_header {
        top: -16px
    }
}

.o-creatorProfileNourlname__actionItem {
    position: relative;
    margin-left: 16px;
    color: #a8abb1;
    white-space: nowrap
}

@media only screen and (min-width: 769px) {
    .o-creatorProfileNourlname__actionItem {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorProfileNourlname__actionItem:hover {
        color: #787c7b
    }
}

.o-creatorProfileNourlname__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .5);
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .o-creatorProfileNourlname__overlay {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorProfileNourlname__overlay:hover {
        background-color: rgba(34, 34, 34, .8)
    }
}

.o-creatorProfileNourlname__nickname {
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    padding-left: 128px;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__nickname {
        padding-top: 56px;
        padding-left: 0
    }
}

.o-creatorProfileNourlname__description {
    font-size: 14px;
    padding-left: 128px;
    margin-bottom: 16px;
    font-weight: 400;
    line-height: 1.5
}

@media only screen and (max-width: 479px) {
    .o-creatorProfileNourlname__description {
        padding-left: 0;
        margin-bottom: 8px
    }
}


.t-creator {
    position: relative
}

.t-creator--background {
    background-color: #f7f9f9
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .t-creator--background {
        background-color: #fff
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .t-creator--background {
        background-color: #fff
    }
}


.p-creator--background {
    background-color: #f7f9f9
}


.o-addMagazine__icon {
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-addMagazine__icon {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-addMagazine__icon:hover {
        color: #787c7b
    }
}


.m-shareBalloon {
    position: absolute;
    bottom: 56px;
    width: 90%;
    margin: 0 5%
}

.m-shareBalloon.mobile {
    bottom: 60px;
    width: 201px;
    margin: 0
}

.m-shareBalloon.mobile .m-shareBalloon__balloon:before {
    left: 76px
}

.m-shareBalloon__wrapper {
    visibility: hidden;
    opacity: 0;
    -webkit-transform-origin: 0 bottom;
    transform-origin: 0 bottom
}

.m-shareBalloon__wrapper.is-shown {
    -webkit-animation: shareBalloon0ms;
    animation: shareBalloon0ms
}

@-webkit-keyframes shareBalloon{
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(16px);
        transform: translateY(16px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    3% {
        -webkit-transform: translateY(16px);
        transform: translateY(16px)
    }
    3% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    5% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    6% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    91.66667% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    94.44444% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    97.22222% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(20px) scale(.95);
        transform: translateY(20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes shareBalloon{
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(16px);
        transform: translateY(16px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    3% {
        -webkit-transform: translateY(16px);
        transform: translateY(16px)
    }
    3% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    5% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    6% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    91.66667% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    94.44444% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    97.22222% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(20px) scale(.95);
        transform: translateY(20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.m-shareBalloon__balloon {
    position: relative;
    color: #fff;
    text-align: left;
    background-color: #2cb696;
    border: 1px solid #2cb696;
    border-radius: 4px
}

.m-shareBalloon__balloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #2cb696;
    box-shadow: 1px 1px 0 0 #2cb696
}

.m-shareBalloon__balloon--tailPosition_bottom:before {
    bottom: -12px;
    left: 50%;
    -webkit-transform: translate(-6px, -6px) rotate(45deg);
    transform: translate(-6px, -6px) rotate(45deg)
}

.m-shareBalloon__body {
    position: relative;
    padding: 16px
}

.m-shareBalloon__message {
    font-weight: 700;
    font-size: 12px
}

.m-shareBalloon__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #e6e6e6
}


.m-socialPlugin {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: -16px
}

.m-socialPlugin__item {
    color: #a8abb1;
    text-align: center;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .m-socialPlugin__item {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-socialPlugin__item:hover {
        color: #787c7b
    }
}

@media only screen and (min-width: 769px) {
    .m-socialPlugin__item--copy:hover {
        color: #8d9199
    }
}

.m-socialPlugin__item--twitter {
    color: #55acee
}

@media only screen and (min-width: 769px) {
    .m-socialPlugin__item--twitter:hover {
        color: #2795e9
    }
}

.m-socialPlugin__item--facebook {
    color: #1877f2
}

@media only screen and (min-width: 769px) {
    .m-socialPlugin__item--facebook:hover {
        color: #0b5fcc
    }
}

.m-socialPlugin__item--line {
    color: #06c755
}

@media only screen and (min-width: 769px) {
    .m-socialPlugin__item--line:hover {
        color: #059540
    }
}

.m-socialPlugin__item--post {
    color: #2cb696
}

@media only screen and (min-width: 769px) {
    .m-socialPlugin__item--post:hover {
        color: #228d74
    }
}

.m-socialPlugin__link {
    display: block;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    line-height: 56px
}


.o-socialShare__icon {
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-socialShare__icon {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-socialShare__icon:hover {
        color: #787c7b
    }
}

.o-socialShare__itemIcon {
    margin-right: 8px
}

.o-socialShare__link {
    display: -webkit-box;
    display: flex;
    justify-items: center;
    padding: 8px 16px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .o-socialShare__link:hover {
        color: #222;
        background-color: #f7f9f9
    }
}


.m-recommendNote__actionsIcon {
    position: relative;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .m-recommendNote__actionsIcon {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-recommendNote__actionsIcon:hover {
        color: #787c7b
    }
}


.o-adminMenu__flag {
    color: #a8abb1
}


.o-actionControl {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-actionControl {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-actionControl {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-actionControl__item {
    margin-right: 32px
}

.o-actionControl__item--social {
    margin-right: 0;
    margin-left: auto;
    font-weight: 700
}

@media only screen and (max-width: 479px) {
    .o-actionControl__item--social {
        display: none
    }
}


.m-warningMessage {
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    background-color: #f7f9f9;
    border-radius: 4px
}

.m-warningMessage, .m-warningMessage__body, .m-warningMessage__image {
    display: -webkit-box;
    display: flex
}

.m-warningMessage__image {
    flex-shrink: 1;
    -webkit-box-align: center;
    align-items: center;
    padding-right: 10px
}

.m-warningMessage__content {
    -webkit-box-flex: 1;
    flex-grow: 1
}

.m-warningMessage__title {
    font-size: 14px;
    font-weight: 700
}

.m-warningMessage__icon {
    display: inline-block;
    color: #f95;
    vertical-align: middle
}

.m-warningMessage__message {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all
}

.m-warningMessage__action {
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .m-warningMessage__action {
        margin-top: 8px;
        margin-left: 0
    }
}


.o-articleTopNotices__message {
    margin-top: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-articleTopNotices__message:first-child {
        margin: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-articleTopNotices__message {
        display: block
    }

    .o-articleTopNotices__message:first-child {
        margin: 0
    }
}

.o-articleTopNotices__onboarding {
    margin-top: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-articleTopNotices__onboarding {
        margin: 16px
    }
}

@media only screen and (max-width: 479px) {
    .o-articleTopNotices__onboarding {
        margin: 16px
    }
}

.o-articleTopNotices__spoilerImage {
    width: 70px
}

@media only screen and (max-width: 479px) {
    .o-articleTopNotices__spoilerImage {
        width: 56px
    }
}

.o-articleTopNotices__description a {
    text-decoration: underline
}


.m-bar {
    padding: 32px 8px;
    margin-bottom: 32px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .m-bar {
        padding: 16px
    }
}

.m-bar--type_caution {
    color: #fff;
    background-color: #f95
}

.m-bar--type_alert {
    color: #fff;
    background-color: #ed4956
}

@media only screen and (max-width: 479px) {
    .m-bar--type_alert {
        text-align: left
    }
}

.m-bar--type_draft {
    color: #222;
    background-color: #f2f2f2
}

.m-bar__title {
    padding-bottom: 8px;
    font-size: 14px
}

.m-bar__title:empty {
    display: none
}

.m-bar__text {
    font-size: 14px
}


.o-commentArea__alertLabel {
    font-size: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
    line-height: 1.5;
    color: #787c7b;
    border-top: 1px solid #f2f2f2
}

.o-commentArea__alertLabel--noborder {
    border-top: none
}

.o-commentArea__alertLink {
    font-size: 14px;
    line-height: 1.5;
    color: #2cb696;
    color: var(--customPrimaryColor)
}


.o-commentArea__container {
    margin-right: auto;
    margin-left: auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-commentArea__container {
        width: auto;
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-commentArea__container {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-commentArea__title {
    font-size: 14px;
    margin-top: 32px;
    margin-bottom: 16px;
    font-weight: 700
}

@media only screen and (max-width: 479px) {
    .o-commentArea__title {
        margin-top: 16px
    }
}

.o-commentArea__more {
    margin-top: 16px;
    margin-bottom: 16px
}

.o-commentArea__name {
    width: auto;
    padding-right: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.o-commentArea__nameLink {
    font-size: 14px;
    font-weight: 700;
    color: #222
}

@media only screen and (max-width: 479px) {
    .o-commentArea__nameLink {
        font-size: 12px
    }
}

.o-commentArea__status {
    display: -webkit-box;
    display: flex
}

.o-commentArea__date, .o-commentArea__likeCount {
    font-size: 12px;
    display: block;
    line-height: 1;
    color: #787c7b
}

.o-commentArea__likeCount:before {
    margin-right: 4px;
    margin-left: 4px;
    content: "・"
}

.o-commentArea__likeLink {
    margin-left: 4px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .o-commentArea__likeLink:hover {
        color: #222;
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-commentArea__message {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #222
}

.o-commentArea__message a {
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-commentArea__message a:hover {
        text-decoration: none
    }
}

.o-commentArea__item {
    position: relative;
    padding-bottom: 24px;
    padding-left: 48px
}

@media only screen and (max-width: 479px) {
    .o-commentArea__item {
        padding-bottom: 16px;
        padding-left: 48px
    }
}

.o-commentArea__item--edit .o-commentArea__input {
    padding-left: 0
}

.o-commentArea__action {
    position: absolute;
    top: 8px;
    right: 0;
    display: -webkit-box;
    display: flex
}

.o-commentArea__actionPopover {
    position: relative
}

.o-commentArea__actionIcon {
    margin-left: 16px;
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-commentArea__actionIcon {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-commentArea__actionIcon:hover {
        color: #787c7b
    }
}

.o-commentArea__actionIcon.is-disabled {
    pointer-events: none;
    cursor: auto;
    opacity: .5
}

.o-commentArea__actionIcon--like.is-active {
    color: #ea3f60
}

.o-commentArea__avatar {
    position: absolute;
    top: 4px;
    left: 0;
    display: block;
    border-radius: 50%
}

.o-commentArea__add {
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid #e6e6e6
}

@media only screen and (max-width: 479px) {
    .o-commentArea__add {
        padding-top: 16px;
        padding-bottom: 16px
    }
}

.o-commentArea__add.is-empty {
    border: none
}

.o-commentArea__input {
    position: relative;
    box-sizing: border-box;
    padding-left: 48px;
    -webkit-transition: padding-bottom .15s ease-in-out;
    transition: padding-bottom .15s ease-in-out
}

@media only screen and (max-width: 479px) {
    .o-commentArea__input {
        padding-left: 48px
    }
}

.o-commentArea__input.is-active {
    padding-bottom: 48px
}

@media only screen and (max-width: 479px) {
    .o-commentArea__input.is-active {
        padding-bottom: 40px
    }
}

.o-commentArea__inputAvatar {
    position: absolute;
    top: 4px;
    left: 0
}

.o-commentArea__inputMessage {
    height: 32px;
    min-height: 32px;
    margin-top: 8px;
    resize: none;
    font-size: 14px
}

.o-commentArea__inputAction {
    display: -webkit-box;
    display: flex;
    margin-top: 8px
}

.o-commentArea__inputAction.is-active {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out
}

.o-commentArea__inputAction--edit {
    position: static;
    bottom: auto;
    left: auto;
    pointer-events: auto;
    opacity: 1
}

.o-commentArea__inputButton {
    width: 100px
}

.o-commentArea__inputButton + .o-commentArea__inputButton {
    margin-left: 8px
}

.o-commentArea__inputButton.is-disabled {
    pointer-events: none
}

.o-commentArea__inputError {
    margin-top: 8px;
    color: #ed4956;
    font-size: 14px
}

.o-commentArea__alertLabel {
    font-size: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
    line-height: 1.5;
    color: #787c7b;
    border-top: 1px solid #f2f2f2
}

.o-commentArea__alertLabel--noborder {
    border-top: none
}

.o-commentArea__alertLink {
    font-size: 14px;
    line-height: 1.5;
    color: #2cb696;
    color: var(--customPrimaryColor)
}

.slide-enter-active, .slide-leave-active {
    -webkit-transition: padding-top .3s ease-out, padding-bottom .3s ease-out;
    transition: padding-top .3s ease-out, padding-bottom .3s ease-out
}

.slide-enter-active > * {
    -webkit-transition: line-height .1s ease-out, opacity .1s linear .1s, visibility .1s linear .1s;
    transition: line-height .1s ease-out, opacity .1s linear .1s, visibility .1s linear .1s
}

.slide-leave-active > * {
    -webkit-transition: line-height .1s ease-out, opacity .1s linear, visibility .1s linear;
    transition: line-height .1s ease-out, opacity .1s linear, visibility .1s linear
}

.slide-enter, .slide-leave-to {
    padding-top: 0;
    padding-bottom: 0
}

.slide-enter > *, .slide-leave-to > * {
    line-height: 0;
    visibility: hidden;
    opacity: 0
}


.o-commentArea__item {
    position: relative;
    padding-bottom: 24px;
    padding-left: 48px
}

@media only screen and (max-width: 479px) {
    .o-commentArea__item {
        padding-bottom: 16px;
        padding-left: 48px
    }
}

.o-commentArea__item--edit .o-commentArea__input {
    padding-left: 0
}

.o-commentArea__item--edit .o-commentArea__inputMessage {
    padding: 8px;
    margin-top: 8px;
    border: 1px solid #f2f2f2
}

.o-commentArea__more {
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: center
}


.o-commentArea__avatar {
    position: absolute;
    top: 4px;
    left: 0;
    display: block;
    border-radius: 50%
}

.o-commentArea__add {
    box-sizing: border-box;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid #e6e6e6
}

@media only screen and (max-width: 479px) {
    .o-commentArea__add {
        padding-top: 16px;
        padding-bottom: 16px
    }
}

.o-commentArea__add.is-empty {
    border: none
}

.o-commentArea__input {
    position: relative;
    padding-left: 48px;
    -webkit-transition: padding-bottom .15s ease-in-out;
    transition: padding-bottom .15s ease-in-out
}

@media only screen and (max-width: 479px) {
    .o-commentArea__input {
        padding-left: 48px
    }
}

.o-commentArea__input.is-active {
    padding-bottom: 48px
}

@media only screen and (max-width: 479px) {
    .o-commentArea__input.is-active {
        padding-bottom: 40px
    }
}

.o-commentArea__inputAvatar {
    position: absolute;
    top: 0;
    left: 0
}

.o-commentArea__inputMessage:not(:root) {
    width: 100%;
    height: 32px;
    min-height: 32px;
    margin-top: -4px;
    resize: none;
    border: 1px solid transparent
}

.o-commentArea__inputAction {
    position: absolute;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: flex;
    margin-top: 8px;
    opacity: 0
}

.o-commentArea__inputAction.is-active {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out
}

.o-commentArea__inputAction--edit {
    position: static;
    bottom: auto;
    left: auto;
    pointer-events: auto;
    opacity: 1
}

.o-commentArea__inputButton {
    width: 100px
}

.o-commentArea__inputButton + .o-commentArea__inputButton {
    margin-left: 8px
}

.o-commentArea__inputButton.is-disabled {
    pointer-events: none
}

.o-commentArea__inputError {
    margin-top: 8px;
    color: #ed4956;
    font-size: 14px
}

.o-commentArea__alertLabel {
    font-size: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
    line-height: 1.5;
    color: #787c7b;
    border-top: 1px solid #f2f2f2
}

.o-commentArea__alertLabel--noborder {
    border-top: none
}

.o-commentArea__alertLink {
    font-size: 14px;
    line-height: 1.5;
    color: #2cb696;
    color: var(--customPrimaryColor)
}

.o-commentArea__webview {
    margin-top: 16px;
    margin-bottom: 16px
}

.o-commentArea__webviewButton {
    display: block;
    width: calc(100% - 32px) !important;
    margin: auto;
    outline: none
}

.slide-enter-active, .slide-leave-active {
    -webkit-transition: padding-top .3s ease-out, padding-bottom .3s ease-out;
    transition: padding-top .3s ease-out, padding-bottom .3s ease-out
}

.slide-enter-active > * {
    -webkit-transition: line-height .1s ease-out, opacity .1s linear .1s, visibility .1s linear .1s;
    transition: line-height .1s ease-out, opacity .1s linear .1s, visibility .1s linear .1s
}

.slide-leave-active > * {
    -webkit-transition: line-height .1s ease-out, opacity .1s linear, visibility .1s linear;
    transition: line-height .1s ease-out, opacity .1s linear, visibility .1s linear
}

.slide-enter, .slide-leave-to {
    padding-top: 0;
    padding-bottom: 0
}

.slide-enter > *, .slide-leave-to > * {
    line-height: 0;
    visibility: hidden;
    opacity: 0
}


.o-commentAreaHeader {
    width: 100%;
    padding: 8px 0;
    margin: 8px auto;
    font-weight: 700;
    text-align: center;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    font-size: 14px
}

.o-commentAreaHeader::marker {
    color: transparent
}

.o-commentAreaHeader::-webkit-details-marker {
    display: none
}

@media only screen and (max-width: 479px) {
    .o-commentAreaHeader {
        margin-top: 16px
    }
}

.o-commentAreaHeader[data-webview=true] {
    outline: none
}

.o-commentAreaHeader .a-icon {
    vertical-align: middle
}

.o-commentAreaHeader .dim {
    color: #a8abb1
}

.o-commentAreaHeader__label {
    display: inline-block;
    -webkit-box-align: center;
    align-items: center;
    line-height: 1;
    color: #a8abb1
}

.o-commentAreaHeader__labelIcon {
    margin-right: 4px
}


.o-commentArea__container {
    margin-right: auto;
    margin-left: auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-commentArea__container {
        width: auto;
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-commentArea__container {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}


.o-contestBanner__title {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
}

.o-contestBanner__item {
    max-width: 360px
}

.o-contestBanner__item + .o-contestBanner__item {
    margin-top: 8px
}


.o-creatorProfile {
    display: -webkit-box;
    display: flex
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorProfile {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile {
        margin-bottom: 16px;
    }
}

.o-creatorProfile__body {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 16px
}

.o-creatorProfile__header {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 8px
}      margin-left: 16px


                          /* .o-creatorProfile__name {
                              display: -webkit-box;
                              display: flex;
                              -webkit-box-flex: 1;
                              flex: 1;
                              font-size: 16px;
                              font-weight: 700;
                              word-break: break-all
                          } */

.o-creatorProfile__social {
    margin-right: 8px
}

.o-creatorProfile__description {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start
}

.o-creatorProfile__introduction {
    -webkit-box-flex: 1;
    flex: 1
}

.o-creatorProfile__profile {
    margin-bottom: 8px;
    font-size: 14px;
    word-break: break-all
}

@media only screen and (max-width: 479px) {
    .o-creatorProfile__profile {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px
    }
}

.o-creatorProfile__profile:empty {
    margin-bottom: 0
}

.o-creatorProfile__profile a {
    text-decoration: underline
}

.o-creatorProfile__aside {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start
}

.o-creatorProfile__follow {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-left: 16px
}


.o-hashtags {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
}

.o-hashtags__item {
    margin-right: 8px;
    margin-bottom: 8px
}

.o-hashtags__item a {
    font-size: 14px;
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    line-height: 1.5;
    color: #787c7b;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #f7f9f9;
    border-radius: 4px
}

.o-hashtags__item a:active, .o-hashtags__item a:hover {
    outline: none
}

@media only screen and (min-width: 769px) {
    .o-hashtags__item a {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-hashtags__item a:hover {
        background-color: #f2f2f2
    }
}


.o-mediaItemWithNotes {
    position: relative;
    width: 100%;
    margin: 0 6px 6px 0;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-mediaItemWithNotes {
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-mediaItemWithNotes:hover {
        border: 1px solid #ccc
    }
}

.o-mediaItemWithNotes--size_medium .o-mediaItemWithNotes__cover {
    position: relative;
    top: 0;
    right: 0;
    width: 100%
}

.o-mediaItemWithNotes--size_medium .o-mediaItemWithNotes__coverInner {
    width: 100%;
    height: 0;
    padding-bottom: 16.875%;
    border-radius: 3px 3px 0 0
}

.o-mediaItemWithNotes--size_medium .o-mediaItemWithNotes__title {
    padding-right: 0
}

.o-mediaItemWithNotes:after, .o-mediaItemWithNotes:before {
    position: absolute;
    content: "";
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-mediaItemWithNotes:before {
    top: 2px;
    right: -4px;
    bottom: -4px;
    left: 2px;
    z-index: -1
}

.o-mediaItemWithNotes:after {
    top: 6px;
    right: -7px;
    bottom: -7px;
    left: 6px;
    z-index: -2
}

.o-mediaItemWithNotes__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.o-mediaItemWithNotes__body {
    padding: 16px;
    overflow: hidden
}

.o-mediaItemWithNotes__cover {
    position: absolute;
    top: 16px;
    right: 16px;
    pointer-events: none
}

.o-mediaItemWithNotes__coverImg {
    max-width: 80px;
    max-height: 45px;
    vertical-align: top
}

.o-mediaItemWithNotes__title {
    display: -webkit-box;
    padding-right: 96px;
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 700;
    font-size: 16px;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    letter-spacing: .06em
}

.o-mediaItemWithNotes__status {
    display: -webkit-box;
    display: flex;
    margin-bottom: 8px
}

.o-mediaItemWithNotes__statusItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 12px
}

.o-mediaItemWithNotes__statusItem + .o-mediaItemWithNotes__statusItem {
    margin-left: 8px
}

.o-mediaItemWithNotes__statusItem--articleNum {
    font-weight: 700
}

.o-mediaItemWithNotes__statusItem--price {
    color: #2cb696
}

.o-mediaItemWithNotes__statusIcon {
    margin-right: 4px
}

.o-mediaItemWithNotes__articles {
    position: relative;
    width: auto;
    margin-left: 8px
}

.o-mediaItemWithNotes__articles:before {
    position: absolute;
    top: 0;
    bottom: 8px;
    left: 0;
    content: "";
    border: solid #ccc;
    border-width: 0 1px 0 0
}

.o-mediaItemWithNotes__articlesItem {
    position: relative;
    width: 100%;
    font-size: 12px;
    text-indent: 16px
}

.o-mediaItemWithNotes__articlesItem + .o-mediaItemWithNotes__articlesItem {
    margin-top: 4px
}

.o-mediaItemWithNotes__articlesItem:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    content: "";
    border: solid #ccc;
    border-width: 1px 0 0
}

.o-mediaItemWithNotes__articlesLink {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .o-mediaItemWithNotes__articlesLink {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-mediaItemWithNotes__articlesLink:hover {
        color: #222
    }
}


.o-magazineHaving__title {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-magazineHaving__title {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-magazineHaving__title {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-magazineHaving__content {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    align-items: stretch;
    padding-bottom: 8px;
    overflow-x: auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-magazineHaving__content {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-magazineHaving__content {
        padding-bottom: 0;
        -webkit-overflow-scrolling: touch
    }

    .o-magazineHaving__content:after {
        display: block;
        padding-left: 16px;
        content: ""
    }
}

.o-magazineHaving__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    width: 280px;
    min-width: 280px
}

.o-magazineHaving__item + .o-magazineHaving__item {
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .o-magazineHaving__item {
        margin-left: 16px
    }

    .o-magazineHaving__item:only-child {
        width: 100%
    }
}

.o-magazineHaving__more {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 264px;
    height: 100%;
    cursor: pointer;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 12px
}

@media only screen and (min-width: 769px) {
    .o-magazineHaving__more {
        -webkit-transition: border-color .2s cubic-bezier(1, 0, 0, 1);
        transition: border-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-magazineHaving__more:hover {
        border-color: #ccc
    }
}

.o-magazineHaving__moreLabel {
    font-weight: 700
}

.o-magazineHaving__loading {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 250px;
    height: 100%
}


@-webkit-keyframes loadingAnimation {
    0% {
        opacity: 1
    }
    to {
        opacity: .3
    }
}

@keyframes loadingAnimation {
    0% {
        opacity: 1
    }
    to {
        opacity: .3
    }
}

.a-button {
    display: inline-block;
    display: -webkit-inline-box;
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    font-weight: 700;
    line-height: 1;
    color: #787c7b;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    touch-action: manipulation;
    cursor: pointer;
    background: #fff;
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.a-button, .a-button .a-button__inner {
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.a-button .a-button__inner {
    font-size: 14px;
    display: -webkit-box;
    display: flex
}

.a-button[data-type=none] {
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=none] {
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=none]:hover {
        color: #222
    }
}

.a-button[data-type=disabled] {
    color: hsla(0, 0%, 100%, .5);
    background-color: #ccc
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=disabled] {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=disabled]:hover {
        background-color: #b3b3b3
    }
}

.a-button[data-type=basic] {
    color: #222;
    border: 1px solid #e6e6e6
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=basic] {
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=basic]:hover {
        border: 1px solid #a8abb1
    }
}

.a-button[data-type=primary] {
    color: #fff;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
}

.a-button-unfollow {
    background-color: #ffffff !important;
    color: #2cb696 !important;
}

.a-button-follow {
    background-color: #2cb696 !important;
    color: #000 !important;
}



@media only screen and (min-width: 769px) {
    .a-button[data-type=primary] {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=primary]:hover {
        background-color: #228d74;
        background-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=secondary] {
    color: #2cb696;
    color: var(--customPrimaryColor);
    border: 1px solid #2cb696;
    border: 1px solid var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=secondary] {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=secondary]:hover {
        color: #2cb696;
        color: var(--customPrimaryColor);
        border-color: #228d74;
        border-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=danger] {
    color: #fff;
    background-color: #ed4956
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=danger] {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=danger]:hover {
        background-color: #e81b2b
    }
}

.a-button[data-type=twitter] {
    color: #fff;
    background-color: #55acee
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=twitter] {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=twitter]:hover {
        background-color: #2795e9
    }
}

.a-button[data-type=facebook] {
    color: #fff;
    background-color: #1877f2
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=facebook] {
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=facebook]:hover {
        background-color: #0b5fcc
    }
}

.a-button[data-size=small] {
    min-height: 32px
}

@media only screen and (max-width: 479px) {
    .a-button[data-size=small] {
        padding-right: 12px;
        padding-left: 12px
    }
}

.a-button[data-size=small] .a-button__inner {
    font-size: 12px
}

.a-button[data-size=large] {
    min-height: 48px
}

.a-button[data-size=large] .a-button__inner {
    font-size: 16px
}

.a-button[data-width=fit] {
    width: 100%
}

.a-button[data-width=square] {
    width: 32px
}

.a-button[data-disable-focus=false]:active, .a-button[data-disable-focus=false]:hover, .a-button[data-disable-focus=true]:focus {
    outline: none
}

.a-button:disabled {
    color: hsla(0, 0%, 100%, .5);
    cursor: not-allowed;
    background-color: #ccc;
    border: none;
    -webkit-transition: none;
    transition: none
}

@media only screen and (min-width: 769px) {
    .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5);
        background-color: #ccc;
        border: none
    }
}

.a-button--icon {
    padding-right: 0;
    padding-left: 0
}

.a-button--icon .a-button__icon {
    margin-right: 0
}
.c-button {
    visibility: hidden
}


.o-noteContentHeader {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* padding-left: 40px      // deleted by xman 2020.12.18   for detail_1 */
}

.o-noteContentHeader__statusItem {
    margin-left: 16px
}

.o-noteContentHeader__label, .o-noteContentHeader__price {
    font-weight: 700;
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px
}


.o-noteContentHeader {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
}

.o-noteContentHeader__avatar {
    margin-right: 8px
}

.o-noteContentHeader__info {
    -webkit-box-flex: 1;
    flex: 1;
    line-height: 1.5;
    font-size: 12px
}

.o-noteContentHeader__name {
    word-break: break-all
}

.o-noteContentHeader__date {
    color: #a8abb1
}

.o-noteContentHeader__dateSlot:after {
    content: " "
}

.o-noteContentHeader__action {
    font-size: 12px;
    line-height: 1.5;
    color: #a8abb1
}

.o-noteContentHeader__actionFollow {
    text-decoration: underline
}

.o-noteContentHeader__actionFollow--following {
    text-decoration: none
}

.o-noteContentHeader__status {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-noteContentHeader__label, .o-noteContentHeader__price {
    font-weight: 700;
    color: #2cb696;
    font-size: 14px
}

.o-noteContentHeader__more {
    margin-left: 16px;
    color: #a8abb1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-noteContentHeader__more {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-noteContentHeader__more:hover {
        color: #787c7b
    }
}


.o-noteEyecatch {
    position: relative
}

.o-noteEyecatch__image {
    width: 100%;
    height: auto;
    vertical-align: top
}

.o-noteEyecatch__copyright {
    margin-top: 8px;
    font-style: italic;
    line-height: 1;
    color: #787c7b;
    text-align: right;
    font-size: 12px
}

@media only screen and (max-width: 479px) {
    .o-noteEyecatch__copyright {
        margin-right: 8px;
        margin-left: 8px
    }
}

.o-noteEyecatch__copyrightName {
    font-weight: 700
}

.o-noteEyecatch__delete {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .o-noteEyecatch__delete:hover {
        background-color: rgba(34, 34, 34, .5);
        -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-noteEyecatch__block {
    padding-left: 8px;
    font-style: normal;
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-noteEyecatch__block:hover {
        color: #222
    }
}

.o-noteEyecatch__help {
    line-height: 16px;
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-noteEyecatch__help:hover {
        color: #787c7b
    }
}


.o-tableOfContents {
    padding: 16px;
    margin: 36px 0;
    background-color: #f7f9f9
}

.o-tableOfContents__title {
    font-size: 14px;
    position: relative;
    padding-left: 16px;
    margin: 0;
    font-weight: 700;
    color: #787c7b
}

.o-tableOfContents__title:hover {
    color: #444;
    cursor: pointer
}

.o-tableOfContents__title.is-open .o-tableOfContents__dropdown {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.o-tableOfContents__dropdown {
    position: absolute;
    top: -1px;
    left: -8px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.o-tableOfContents__body {
    margin: 0
}

.o-tableOfContents__list {
    padding-left: 0;
    margin: 0;
    list-style: none
}

.o-tableOfContents__item {
    padding: 8px 0;
    font-size: 14px;
    list-style-type: none;
    border-top: 1px solid #e6e6e6
}

@media only screen and (max-width: 479px) {
    .o-tableOfContents__item {
        padding: 8px 0;
        font-size: 14px
    }
}

.o-tableOfContents__item:first-child {
    padding-top: 20px;
    border-top: none
}

.o-tableOfContents__item:hover {
    color: #444
}

.o-tableOfContents__link {
    display: block;
    color: #787c7b;
    text-decoration: none !important;
    cursor: pointer
}

.o-tableOfContents__more {
    margin-top: 8px
}


.m-paywallLineSeparator {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 40px 0;
    text-align: center;
    border-top: 1px dashed #ccc
}

.m-paywallLineSeparator__label {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    padding: 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    line-height: 1;
    color: #787c7b;
    white-space: nowrap;
    background: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .m-paywallLineSeparator__label {
        font-size: 12px
    }
}

@media only screen and (max-width: 359px) {
    .m-paywallLineSeparator__label {
        font-size: 10px
    }
}


.o-winContestBadge__badge {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #eca726;
    font-size: 14px
}

@media only screen and (min-width: 769px) {
    .o-winContestBadge__badge {
        cursor: pointer
    }
}


.m-shareSheet {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 0 0 0 16px;
    color: #fff;
    border-radius: 4px;
    box-shadow: 2px 4px 8px rgba(34, 34, 34, .2);
    -webkit-transform: translate(-50%, calc(-100% - 12px));
    transform: translate(-50%, calc(-100% - 12px));
    -webkit-transform: translate(calc(-50% + var(--shareSheetOffsetX, 0px)), calc(-100% - 12px));
    transform: translate(calc(-50% + var(--shareSheetOffsetX, 0px)), calc(-100% - 12px))
}

.m-shareSheet, .m-shareSheet:after {
    position: absolute;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
}

.m-shareSheet:after {
    right: 50%;
    right: calc(50% + var(--shareSheetOffsetX, 0px));
    bottom: 0;
    z-index: -1;
    width: 8px;
    height: 8px;
    pointer-events: none;
    content: "";
    -webkit-transform: rotate(45deg) translate(50%);
    transform: rotate(45deg) translate(50%)
}

.m-shareSheet__title {
    font-size: 12px;
    margin-right: 8px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap
}

.m-shareSheet__item {
    padding: 8px;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
}

.m-shareSheet__item:last-child {
    border-radius: 0 4px 4px 0
}

@media only screen and (min-width: 769px) {
    .m-shareSheet__item:hover {
        background-color: #228d74;
        background-color: var(--customPrimaryDarkenColor)
    }
}


.o-noteContentText--device_windows .o-noteContentText__body, .o-noteContentText--device_windows .o-noteContentText__body .note-editor-placeholder:after, .o-noteContentText--device_windows .o-noteContentText__title, .o-noteContentText--device_windows .o-noteContentText__title .note-editor-placeholder:after {
    font-family: YakuHanJPs, Segoe UI, Arial, メイリオ, Meiryo, sans-serif
}

.o-noteContentText--font_sansserif .o-noteContentText__body, .o-noteContentText--font_sansserif .o-noteContentText__body .note-editor-placeholder:after, .o-noteContentText--font_sansserif .o-noteContentText__title, .o-noteContentText--font_sansserif .o-noteContentText__title .note-editor-placeholder:after {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif
}

.o-noteContentText__title {
    min-height: 1em;
    margin-top: 72px;
    margin-bottom: 18px;
    font-family: Hiragino Mincho ProN, ヒラギノ明朝 Pro W6, Hiragino Mincho Pro, HGS明朝E, Yu Mincho, YuMincho, ＭＳ Ｐ明朝, serif;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    pointer-events: auto;
    font-size: 32px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentText__title {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__title {
        font-size: 24px;
        margin: 30px 16px 15px
    }
}

.o-noteContentText__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-bottom: 20px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentText__status {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__status {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentText__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
}

.o-noteContentText__likeIcon {
    position: absolute;
    font-size: 16px
}

.o-noteContentText__likeCount {
    padding-left: 20px
}

.o-noteContentText__author {
    width: 100%;
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentText__author {
        width: calc(100% - 80px);
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__author {
        width: calc(100% - 32px);
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentText__body {
    font-family: Hiragino Mincho ProN, ヒラギノ明朝 Pro W6, Hiragino Mincho Pro, HGS明朝E, Yu Mincho, YuMincho, ＭＳ Ｐ明朝, serif;
    color: #222;
    pointer-events: auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentText__body {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentText__body b {
    font-weight: 700
}

.o-noteContentText__body pre, .o-noteContentText__body pre[data-name=preCode] {
    padding: 36px;
    margin-top: 36px;
    margin-bottom: 36px;
    font-family: note monospace, SFMono-Regular, Consolas, Menlo, Courier, monospace;
    line-height: 18px;
    color: #fff;
    white-space: pre-wrap;
    background-color: #282c34;
    font-size: 12px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body pre, .o-noteContentText__body pre[data-name=preCode] {
        padding: 24px;
        margin: 32px -16px
    }
}

.o-noteContentText__body code, .o-noteContentText__body code[data-name=code] {
    display: block;
    overflow-x: auto;
    font-family: note monospace, SFMono-Regular, Consolas, Menlo, Courier, monospace;
    line-height: 18px;
    color: #fff;
    word-wrap: normal;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    font-size: 12px
}

.o-noteContentText__body code::-webkit-scrollbar, .o-noteContentText__body code[data-name=code]::-webkit-scrollbar {
    display: none
}

.o-noteContentText__body blockquote, .o-noteContentText__body figure, .o-noteContentText__body h2, .o-noteContentText__body h3, .o-noteContentText__body p, .o-noteContentText__body ul li {
    margin-top: 36px;
    margin-bottom: 36px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body blockquote, .o-noteContentText__body figure, .o-noteContentText__body h2, .o-noteContentText__body h3, .o-noteContentText__body p, .o-noteContentText__body ul li {
        margin-top: 30px;
        margin-bottom: 30px
    }
}

.o-noteContentText__body a {
    text-decoration: underline;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-noteContentText__body a:hover {
        color: #222;
        text-decoration: none
    }
}

.o-noteContentText__body img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 1px rgba(34, 34, 34, .3)
}

.o-noteContentText__body img.is-slide {
    cursor: -webkit-zoom-in;
    cursor: zoom-in
}

.o-noteContentText__body h2, .o-noteContentText__body h3 {
    font-size: 24px;
    margin-top: 50px;
    margin-bottom: -18px;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body h2, .o-noteContentText__body h3 {
        font-size: 20px;
        margin-top: 36px;
        margin-bottom: -20px
    }
}

.o-noteContentText__body p, .o-noteContentText__body ul li {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 13px; margin-bottom: 13px;

}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body p, .o-noteContentText__body ul li {
        font-size: 13px;
        line-height: 1.6;
        margin-top: 13px; margin-bottom: 13px;
    }
}

.o-noteContentText__body blockquote {
    font-size: 16px;
    padding: 25px 36px;
    line-height: 36px;
    background-color: #f7f9f9
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body blockquote {
        font-size: 14px;
        padding: 18px 24px;
        line-height: 30px
    }
}

.o-noteContentText__body blockquote > * {
    margin-top: 0;
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body blockquote > * {
        font-size: 14px
    }
}

.o-noteContentText__body .widget-cover {
    width: 100% !important;
    cursor: pointer
}

.o-noteContentText__body .widget-cover > * {
    pointer-events: none
}

.o-noteContentText__body .widget-cover:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
    border: 1px solid transparent;
    border-radius: 4px;
    opacity: 0
}

@media only screen and (min-width: 769px) {
    .o-noteContentText__body .widget-cover:hover:before {
        opacity: 1
    }
}

.o-noteContentText__body .widget-cover.is-selected:before {
    background-color: rgba(#2cb696, .3);
    background-color: rgba(var(--customPrimaryColor), .3);
    border-color: #2cb696;
    border-color: var(--customPrimaryColor);
    opacity: 1
}

.o-noteContentText__body [embedded-service] {
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    border-radius: 4px
}

.o-noteContentText__body [embedded-service] ::-moz-selection {
    background-color: transparent
}

.o-noteContentText__body [embedded-service] ::selection {
    background-color: transparent
}

.o-noteContentText__body [embedded-service=googlemap] {
    position: relative;
    width: 100% !important;
    height: 0;
    padding-bottom: 75%;
    border: 1px solid #f2f2f2
}

.o-noteContentText__body [embedded-service=googlemap] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
}

.o-noteContentText__body [embedded-service=gist] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.o-noteContentText__body [embedded-service=gist]::-webkit-scrollbar {
    display: none
}

.o-noteContentText__body [embedded-service=googleform] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.o-noteContentText__body [embedded-service=googleform]::-webkit-scrollbar {
    display: none
}

.o-noteContentText__body [embedded-service=itunes] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.o-noteContentText__body [embedded-service=itunes]::-webkit-scrollbar {
    display: none
}

.o-noteContentText__body [embedded-service=apple-music] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.o-noteContentText__body [embedded-service=apple-music]::-webkit-scrollbar {
    display: none
}

.o-noteContentText__body [embedded-service=slideshare] {
    width: 100%
}

.o-noteContentText__body [embedded-service=slideshare] iframe {
    overflow: hidden;
    vertical-align: top;
    border-radius: 4px
}

.o-noteContentText__body [embedded-service=speakerdeck] {
    width: 100%
}

.o-noteContentText__body [embedded-service=speakerdeck] iframe {
    overflow: hidden;
    vertical-align: top;
    border-radius: 4px
}

.o-noteContentText__body [embedded-service=note] {
    width: 100%;
    max-width: auto;
    margin-right: auto;
    margin-left: auto
}

.o-noteContentText__body [embedded-service=note] iframe {
    display: block !important;
    width: 100% !important;
    max-width: auto !important;
    margin: 0 auto !important
}

.o-noteContentText__body [embedded-service=twitter] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto
}

.o-noteContentText__body [embedded-service=twitter] .twitter-tweet {
    margin-top: 0 !important;
    margin-right: auto;
    margin-bottom: 0 !important;
    margin-left: auto
}

.o-noteContentText__body [embedded-service=twitterProfile] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #ccd6dd;
    border-radius: 15px
}

.o-noteContentText__body [embedded-service=instagram] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.o-noteContentText__body [embedded-service=instagram]::-webkit-scrollbar {
    display: none
}

.o-noteContentText__body [embedded-service=instagram] iframe {
    display: block;
    width: 100% !important;
    max-width: 500px !important;
    height: 590px;
    padding: 8px;
    margin: 0 auto !important;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

.o-noteContentText__body [embedded-service=tiktok] {
    width: 100%;
    max-width: 340px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=tiktok] {
        position: relative;
        width: 100%;
        max-width: none;
        height: 0;
        padding-bottom: 205.29412% !important
    }
}

.o-noteContentText__body [embedded-service=tiktok] span div {
    position: static !important;
    left: auto !important;
    max-width: none !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.o-noteContentText__body [embedded-service=tiktok] iframe {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block;
    width: 340px !important;
    height: 700px !important;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=tiktok] iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important
    }
}

.o-noteContentText__body [embedded-service=tiktok-web] {
    width: 100%;
    max-width: 340px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=tiktok-web] {
        position: relative;
        width: 100%;
        max-width: none
    }
}

.o-noteContentText__body [embedded-service=tiktok-web] blockquote {
    padding: 0;
    margin: 0;
    background-color: transparent
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=tiktok-web] blockquote {
        padding: 0
    }
}

.o-noteContentText__body [embedded-service=tiktok-web] span div {
    position: static !important;
    left: auto !important;
    max-width: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.o-noteContentText__body [embedded-service=tiktok-web] iframe {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block;
    width: 340px !important;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=tiktok-web] iframe {
        width: 100% !important
    }
}

.o-noteContentText__body [embedded-service=soundcloud] {
    width: 100% !important;
    border: 1px solid #f2f2f2
}

.o-noteContentText__body [embedded-service=niconico] {
    position: relative;
    width: 100% !important;
    height: 0;
    padding-bottom: 56.25%;
    border: 1px solid #f2f2f2
}

.o-noteContentText__body [embedded-service=niconico] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
}

.o-noteContentText__body [embedded-service=spotify] div {
    max-width: none !important
}

.o-noteContentText__body [embedded-service=youtube] {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    border: 1px solid #f2f2f2
}

.o-noteContentText__body [embedded-service=youtube] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
}

.o-noteContentText__body [embedded-service=vimeo] {
    position: relative;
    width: 100% !important;
    border: 1px solid #f2f2f2
}

.o-noteContentText__body [embedded-service=vimeo] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=note-slide] {
        position: relative;
        height: auto
    }

    .o-noteContentText__body [embedded-service=note-slide]:after {
        display: block;
        padding-top: calc(75% + 92px);
        content: ""
    }
}

.o-noteContentText__body [embedded-service=note-slide] iframe {
    height: 455px;
    border: none
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=note-slide] iframe {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%
    }
}

.o-noteContentText__body [embedded-service=external-article] a {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 24px;
    text-decoration: none
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] a {
        padding: 16px
    }
}

.o-noteContentText__body [embedded-service=external-article] a:first-child {
    width: 100%
}

.o-noteContentText__body [embedded-service=external-article] a:nth-child(2) {
    -webkit-box-flex: 0;
    flex: 0;
    min-width: 220px;
    padding: 0;
    background-position: 50%;
    background-size: cover;
    border-left: 1px solid #f2f2f2
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] a:nth-child(2) {
        min-width: 120px
    }
}

.o-noteContentText__body [embedded-service=external-article] strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    word-break: break-all;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] strong {
        font-size: 14px
    }
}

.o-noteContentText__body [embedded-service=external-article] em {
    display: block;
    margin-bottom: 4px;
    line-height: 1.5;
    color: #787c7b;
    font-size: 12px
}

.o-noteContentText__body [embedded-service=external-article] em:nth-child(3) {
    margin-bottom: 0;
    color: #222
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget {
    display: table;
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget:hover {
        border: 1px solid #a8abb1;
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget > a {
    display: table-cell;
    padding: 16px;
    vertical-align: middle
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget-title {
        max-height: 2.8em;
        font-size: 14px
    }
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-description {
    display: -webkit-box;
    max-height: 3em;
    overflow: hidden;
    color: #787c7b;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-image {
    width: 225px;
    height: 150px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    border-left: 1px solid #e8eceb;
    border-radius: 0 3px 3px 0
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget-image {
        width: 120px;
        height: 120px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping > a:first-child {
        -webkit-box-ordinal-group: 3;
        order: 2
    }
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-image {
    display: -webkit-box;
    display: flex;
    width: 225px;
    height: 225px;
    padding: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-image {
        -webkit-box-ordinal-group: 2;
        order: 1;
        width: 100%;
        height: 190px;
        padding: 16px 16px 0;
        border: none
    }
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-disclaimer {
    text-decoration: underline
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-productImage {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-price {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -webkit-box-pack: start;
    justify-content: flex-start;
    margin-top: 16px;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget-price {
        display: block;
        margin-top: 8px;
        margin-bottom: 8px
    }
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-button .a-button__inner {
    margin-top: 8px;
    margin-bottom: 8px;
    white-space: normal
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-regularprice, .o-noteContentText__body [embedded-service=external-article] .external-article-widget-saleprice {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    font-weight: 700;
    line-height: 1;
    color: #222;
    font-size: 16px
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-saleprice + .external-article-widget-regularprice {
    padding-left: 8px;
    font-weight: 400;
    color: #787c7b;
    text-decoration: line-through;
    font-size: 12px
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-currency {
    padding-left: 2px;
    font-size: 12px
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-update {
    margin-left: 8px;
    line-height: 1;
    color: #787c7b;
    font-size: 10px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget-update {
        display: block;
        margin-top: 4px;
        margin-left: 0
    }
}

.o-noteContentText__body [embedded-service=external-article] .external-article-widget-url + .external-article-widget-button {
    margin-top: 16px
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget:hover {
        border: 1px solid #a8abb1;
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__link {
    display: block !important;
    width: 100%;
    padding: 0 !important
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__header {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 52.3%;
    overflow: hidden
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__img {
    width: 100% !important;
    height: 100% !important;
    border: none;
    -o-object-fit: cover;
    object-fit: cover
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__body {
    display: block;
    padding: 16px
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__title {
    display: block;
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__title {
        font-size: 14px
    }
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__description {
    display: block;
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__url {
    display: block;
    font-size: 10px;
    font-style: normal;
    line-height: 1.5
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__link {
    display: grid;
    grid-template-areas: "detail aside" "status aside";
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr 190px;
    padding: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__link {
        grid-template-areas: "detail aside" "status status";
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr 140px
    }
}

@media only screen and (max-width: 359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__link {
        grid-template-columns: 1fr 132px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    grid-area: detail;
    -webkit-box-pack: center;
    justify-content: center;
    padding-right: 16px
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__domain {
    margin-bottom: 4px;
    color: #787c7b;
    font-size: 10px
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__title {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__title {
        font-size: 14px;
        -webkit-line-clamp: 3
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__property {
    display: -webkit-box;
    display: flex
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__property {
        display: block
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__owner {
    display: -webkit-box;
    font-size: 12px;
    margin-right: 16px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__owner {
        display: block;
        margin-right: 0;
        word-break: break-all
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__category {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: #787c7b;
    white-space: nowrap;
    font-size: 12px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__category {
        margin-top: 4px;
        white-space: normal
    }
}

@media only screen and (max-width: 359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__category {
        font-size: 10px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__categoryIcon {
    margin-right: 4px
}

@media only screen and (max-width: 359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__categoryIcon {
        margin-right: 0
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__aside {
    grid-area: aside
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__thumbImg {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__thumbImg {
        margin-bottom: 8px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__status {
    grid-area: status;
    padding: 8px 16px 0 0
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__status {
        padding: 16px 0 0
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__statusList {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__statusListItem {
    margin-top: 0;
    margin-right: 16px;
    margin-bottom: 0;
    line-height: 1
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__statusListItem--timeleft {
    margin-right: 0;
    margin-left: auto
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__currentAmount {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 0;
    line-height: 1;
    color: #222;
    font-size: 14px
}

@media only screen and (max-width: 359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__currentAmount {
        font-size: 12px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__supporters {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 14px
}

@media only screen and (max-width: 359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__supporters {
        font-size: 12px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__supportersIcon {
    margin-right: 4px
}

@media only screen and (max-width: 359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__supportersIcon {
        margin-right: 0
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__timeleft {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: #787c7b;
    font-size: 12px
}

@media only screen and (max-width: 359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__timeleft {
        font-size: 10px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__timeleftIcon {
    margin-right: 4px
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__complateRate {
    position: relative;
    margin-top: 8px
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__complateRate:after {
    position: absolute;
    top: 2px;
    left: 4px;
    z-index: 1;
    font-weight: 700;
    color: #fff;
    content: attr(title);
    font-size: 10px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__complateRate {
        height: 16px;
        margin-right: -16px;
        margin-bottom: -14px;
        margin-left: -16px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    height: 16px;
    overflow: hidden;
    border: none;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value] {
        border-radius: 0 0 3px 3px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-bar {
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    background-color: #f2f2f2;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-bar {
        border-radius: 0 0 3px 3px
    }
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-value {
    -webkit-appearance: none;
    appearance: none;
    background-color: #2cb696
}

.o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-moz-progress-bar {
    -moz-appearance: none;
    background-color: #2cb696
}

.o-noteContentText__body [embedded-service=attachment] {
    border: 1px solid #e6e6e6
}

@media only screen and (min-width: 769px) {
    .o-noteContentText__body [embedded-service=attachment]:hover {
        border: 1px solid #a8abb1;
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px;
    text-decoration: none;
    cursor: pointer
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=attachment] .file-widget__link {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__info {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    align-items: center;
    padding-right: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=attachment] .file-widget__info {
        width: 100%;
        padding-right: 0
    }
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__icon {
    padding-right: 16px;
    color: #a8abb1
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__data {
    -webkit-box-flex: 1;
    flex-grow: 1
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__filename {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    word-break: break-all;
    font-size: 16px
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__loading {
    font-size: 14px;
    padding: 40px 16px 16px;
    line-height: 1;
    color: #787c7b;
    text-align: center
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__loadingLabel {
    padding-top: 24px;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/loading_128x128.0f89a3b.gif);
    background-repeat: no-repeat;
    background-position: 50% 10%;
    background-size: 32px
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__filesize {
    font-size: 12px;
    color: #787c7b
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__note {
    font-size: 10px;
    color: #2cb696;
    color: var(--customPrimaryColor);
    text-decoration: none
}

@media only screen and (min-width: 769px) {
    .o-noteContentText__body [embedded-service=attachment] .file-widget__note:hover {
        color: #228d74;
        color: var(--customPrimaryDarkenColor)
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=attachment] .file-widget__download {
        width: 100%;
        padding-top: 16px
    }
}

.o-noteContentText__body [embedded-service=attachment] .file-widget__download .a-icon {
    margin-right: 8px
}

.o-noteContentText__body [embedded-service=hr], .o-noteContentText__body [embedded-service=wantedly] {
    border: 1px solid #e6e6e6
}

@media only screen and (min-width: 769px) {
    .o-noteContentText__body [embedded-service=hr]:hover, .o-noteContentText__body [embedded-service=wantedly]:hover {
        border: 1px solid #a8abb1;
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget {
    width: 100%;
    text-align: left
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__link, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__link {
    display: -webkit-box;
    display: flex;
    width: 100%;
    padding: 16px;
    overflow: visible;
    text-decoration: none
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__info, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__info {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__url, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__url {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    font-size: 10px;
    font-style: normal;
    line-height: 1;
    color: #787c7b;
    text-indent: 48px
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__url:before, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__url:before {
    position: absolute;
    top: -1px;
    left: 0;
    width: 40px;
    height: 14px;
    padding: 2px 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    text-indent: 0;
    white-space: nowrap;
    content: "求人";
    background-color: #2cb696;
    background-color: var(--customPrimaryColor);
    border-radius: 7px
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__title, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__title {
    display: -webkit-box;
    width: 100%;
    max-height: 3em;
    padding-right: 16px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=hr] .recruitment-widget__title, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__title {
        font-size: 14px
    }
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__requirements, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__requirements {
    width: 100%;
    padding-top: 8px;
    padding-right: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=hr] .recruitment-widget__requirements, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__requirements {
        padding-top: 8px
    }
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__companyName, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__companyName {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__companyName:last-child, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__companyName:last-child {
    margin-bottom: 0
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__location, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__location {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__location:last-child, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__location:last-child {
    margin-bottom: 0
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__occupations, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__occupations {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #787c7b
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__occupations:last-child, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__occupations:last-child {
    margin-bottom: 0
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__employmentSystem, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__employmentSystem {
    display: block;
    font-size: 12px;
    color: #787c7b
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__aside, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__aside {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    width: 190px
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=hr] .recruitment-widget__aside, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__aside {
        width: 120px
    }
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__thumbnailImg, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__thumbnailImg {
    width: 100%;
    height: 100px !important;
    border: none;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

@media only screen and (max-width: 479px) {
    .o-noteContentText__body [embedded-service=hr] .recruitment-widget__thumbnailImg, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__thumbnailImg {
        height: 64px !important
    }
}

.o-noteContentText__body [embedded-service=hr] .recruitment-widget__button, .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__button {
    width: 100%;
    margin-top: 16px
}

.o-noteContentText__body [embedded-service=alu] {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto
}

.o-noteContentText__body .fude-iframe-ratio-widget__wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    border-radius: 4px
}

.o-noteContentText__body .fude-iframe-ratio-widget__inner {
    position: static;
    left: auto;
    max-width: none;
    height: auto;
    padding-top: 0;
    padding-bottom: 0
}

.o-noteContentText__body .fude-iframe-ratio-widget__iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.o-noteContentText__body .fude-iframe-ratio-widget__domain {
    text-align: right
}

.o-noteContentText__body .fude-iframe-ratio-widget__link {
    display: inline-block;
    padding-top: 8px;
    color: #787c7b;
    text-decoration: none;
    font-size: 12px
}

.o-noteContentText__body [embedded-service=oembed] {
    border-radius: 0
}

.o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget {
    margin: 0 auto
}

.o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden
}

.o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__inner {
    position: static;
    left: auto;
    max-width: none;
    height: auto;
    padding-top: 0;
    padding-bottom: 0
}

.o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__domain {
    text-align: right
}

.o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__link {
    display: inline-block;
    padding-top: 8px;
    color: #787c7b;
    text-decoration: none;
    font-size: 12px
}

.o-noteContentText__body .fb-post {
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden
}


@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentImage {
        margin-top: 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentImage {
        margin-top: 16px
    }
}

.o-noteContentImage__title {
    min-height: 1em;
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 32px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentImage__title {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentImage__title {
        font-size: 24px;
        margin-right: 16px;
        margin-bottom: 16px;
        margin-left: 16px
    }
}

.o-noteContentImage__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-bottom: 20px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentImage__status {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentImage__status {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentImage__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
}

.o-noteContentImage__likeIcon {
    position: absolute;
    font-size: 16px
}

.o-noteContentImage__likeCount {
    padding-left: 20px
}

.o-noteContentImage__author {
    width: 100%;
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentImage__author {
        width: calc(100% - 80px);
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentImage__author {
        width: calc(100% - 32px);
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentImage__item {
    margin-bottom: 40px;
    text-align: center
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentImage__item {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentImage__item {
        margin-right: 16px;
        margin-bottom: 16px;
        margin-left: 16px
    }
}

.o-noteContentImage__itemLink {
    display: inline-block;
    vertical-align: top
}

.o-noteContentImage__itemImage {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    pointer-events: auto
}

.o-noteContentImage__itemCaption {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .o-noteContentImage__itemCaption {
        margin-top: 8px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentImage__paywallLine {
        margin-right: 16px;
        margin-left: 16px
    }
}


.tl-movie-limited {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    background: #f8f9fa url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/movie_limited.2393ca0.png) no-repeat center 75px;
    border: 1px solid #f8f9fa
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .tl-movie-limited {
        background: #f8f9fa url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/movie_limited.2393ca0.png) no-repeat center 75px;
        background-size: 80px 99px
    }
}

.tl-movie-limited.page {
    height: 340px;
    background-position: center 90px;
    border: 1px solid #f8f9fa
}

.tl-movie-limited > p {
    margin-top: 200px;
    font-size: 14px;
    color: #bdc3c7;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .tl-movie-limited {
        max-height: 170px;
        background: #f8f9fa url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/movie_limited.2393ca0.png) no-repeat center 25px;
        background-size: 60px 74px
    }

    .tl-movie-limited > p {
        margin-top: 115px;
        font-size: 12px
    }

    .tl-movie-limited.page {
        max-height: 190px;
        background-position: center 35px;
        border: 1px solid #f8f9fa
    }

    .tl-movie-limited.page > p {
        margin-top: 125px
    }
}


@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentMovie {
        margin-top: 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentMovie {
        margin-top: 16px
    }
}

.o-noteContentMovie__title {
    min-height: 1em;
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 32px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentMovie__title {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentMovie__title {
        font-size: 24px;
        margin-right: 16px;
        margin-bottom: 16px;
        margin-left: 16px
    }
}

.o-noteContentMovie__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-bottom: 20px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentMovie__status {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentMovie__status {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentMovie__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
}

.o-noteContentMovie__likeIcon {
    position: absolute;
    font-size: 16px
}

.o-noteContentMovie__likeCount {
    padding-left: 20px
}

.o-noteContentMovie__author {
    width: 100%;
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentMovie__author {
        width: calc(100% - 80px);
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentMovie__author {
        width: calc(100% - 32px);
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentMovie__body {
    margin-bottom: 40px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentMovie__body {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentMovie__body {
        margin-right: 16px;
        margin-bottom: 16px;
        margin-left: 16px
    }
}

.o-noteContentMovie__movie {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 40px;
    overflow: hidden
}

@media only screen and (max-width: 479px) {
    .o-noteContentMovie__movie {
        margin-bottom: 24px
    }
}

.o-noteContentMovie__movieIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.o-noteContentMovie__caption {
    font-size: 16px
}


.mejs-container {
    position: relative;
    font-family: Helvetica, Arial;
    text-align: left;
    text-indent: 0;
    vertical-align: top;
    background: none
}

.mejs-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: none !important;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOzEo46UAAAAA1JREFUeAFjGFRgFAAAAZAAAZqGe0YAAAAASUVORK5CYII=);
    background: rgba(0, 0, 0, .7);
    background: -webkit-linear-gradient(rgba(50, 50, 50, .7), rgba(0, 0, 0, .7));
    background: linear-gradient(rgba(50, 50, 50, .7), rgba(0, 0, 0, .7))
}

.mejs-controls .mejs-playpause-button {
    width: 30px;
    height: 30px;
    padding: 7px;
    cursor: pointer;
    background-color: #444;
    border-radius: 50%
}

.mejs-controls div {
    display: block;
    float: left;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    font-family: Helvetica, Arial;
    font-size: 11px;
    line-height: 11px;
    color: #fff;
    list-style-type: none;
    background-image: none;
    border: 0
}

.mejs-button button {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 7px;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAQAAADdCbXSAAAAQElEQVR42mNgGAVI4P/+//Z45f///4/OwlCAzxDiDMBjCPEG4DCENAMO/Hcg3wAsmok3AIdm4gzAo5koA0YsAACTiYd5TASq7wAAAABJRU5ErkJggg==) no-repeat;
    background-size: 32px 16px;
    border: 0
}

.mejs-play button {
    background-position: 0 0
}

.mejs-pause button {
    background-position: -16px 0
}

.mejs-controls .mejs-time-rail {
    width: 200px;
    padding: 0;
    direction: ltr
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 12px 10px;
    background: #333;
    background: rgba(50, 50, 50, .8);
    background: -webkit-linear-gradient(rgba(30, 30, 30, .8), rgba(60, 60, 60, .8));
    background: linear-gradient(rgba(30, 30, 30, .8), rgba(60, 60, 60, .8));
    background: #e1e5e7
}

.mejs-controls .mejs-time-rail span {
    position: absolute;
    display: block;
    width: 180px;
    height: 6px;
    cursor: pointer
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    width: 0;
    background: #fff;
    background: hsla(0, 0%, 100%, .8);
    background: -webkit-linear-gradient(hsla(0, 0%, 100%, .9), hsla(0, 0%, 78.4%, .8));
    background: linear-gradient(hsla(0, 0%, 100%, .9), hsla(0, 0%, 78.4%, .8));
    background: #cacbcc
}

.mejs-controls .mejs-time {
    box-sizing: content-box;
    display: block;
    width: auto;
    height: 17px;
    padding: 6px 0 0;
    overflow: hidden;
    color: #fff;
    text-align: center
}

.mejs-controls .mejs-time span {
    display: block;
    float: left;
    width: auto;
    margin: 1px 2px 0 0;
    font-size: 11px;
    line-height: 15px;
    color: #a1a6a9
}


@media only screen and (max-width: 479px) {
    .o-soundDownload {
        text-align: center
    }
}


.o-noteContentSound {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentSound {
        margin-top: 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentSound {
        display: block;
        margin-top: 16px
    }
}

.o-noteContentSound__author {
    width: 100%;
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentSound__author {
        width: calc(100% - 80px);
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentSound__author {
        width: calc(100% - 32px);
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentSound__cover {
    width: 45%;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentSound__cover {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentSound__coverImage {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: auto
}

.o-noteContentSound__coverImage--lightbox {
    cursor: pointer
}

.o-noteContentSound__body {
    width: 55%;
    padding-left: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentSound__body {
        width: auto;
        padding-left: 0;
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentSound__title {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 700
}

.o-noteContentSound__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 12px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentSound__status {
        margin-right: 40px;
        margin-left: 40px
    }
}

.o-noteContentSound__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
}

.o-noteContentSound__likeIcon {
    position: absolute;
    font-size: 16px
}

.o-noteContentSound__likeCount {
    padding-left: 20px
}

.o-noteContentSound__name {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 14px
}

.o-noteContentSound__player {
    margin-top: 16px;
    margin-bottom: 16px;
    pointer-events: auto
}

.o-noteContentSound__playerHowler {
    pointer-events: auto
}

.o-noteContentSound__playerCaption {
    margin-top: 16px;
    font-size: 14px;
    color: #787c7b
}

.o-noteContentSound__download {
    margin-top: 16px;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentSound__download {
        text-align: center
    }
}

.o-noteContentSound__description {
    margin-top: 16px;
    margin-bottom: 16px;
    line-height: 1.5;
    font-size: 14px
}


.o-noteContentTalk {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentTalk {
        margin-top: 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentTalk {
        margin-top: 16px
    }
}

.o-noteContentTalk__author {
    width: 100%;
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentTalk__author {
        width: calc(100% - 80px);
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentTalk__author {
        width: calc(100% - 32px);
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentTalk__body {
    position: relative;
    width: 100%;
    padding: 32px;
    margin-top: 8px;
    border: 2px solid #e6e6e6
}

.o-noteContentTalk__body:before {
    position: absolute;
    top: -8px;
    left: 8px;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #fff;
    border-right: 2px solid #e6e6e6;
    border-bottom: 2px solid #e6e6e6;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentTalk__body {
        padding: 24px;
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentTalk__body {
        padding: 16px;
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentTalk__body.is-limited, .o-noteContentTalk__body.is-limited:before {
    background-color: #f7f9f9
}

.o-noteContentTalk__body.is-limited p {
    color: #787c7b;
    font-size: 14px;
    text-align: center
}

.o-noteContentTalk__text {
    word-break: break-word;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .o-noteContentTalk__text {
        font-size: 14px
    }
}

.o-noteContentTalk__text a {
    text-decoration: underline
}

.o-noteContentTalk__image {
    margin-top: 16px;
    pointer-events: auto
}

.o-noteContentTalk__image img {
    max-width: 100%;
    height: auto;
    vertical-align: top
}

.o-noteContentTalk__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-noteContentTalk__status {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-noteContentTalk__status {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-noteContentTalk__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
}

.o-noteContentTalk__likeIcon {
    position: absolute;
    font-size: 16px
}

.o-noteContentTalk__likeCount {
    padding-left: 20px
}


@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-otherReccomend {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-otherReccomend {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-otherReccomend__title {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
}

.o-otherReccomend__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width: 479px) {
    .o-otherReccomend__body {
        display: block
    }
}

.o-otherReccomend__item {
    width: calc(50% - 8px);
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .o-otherReccomend__item {
        width: auto;
        margin-bottom: 8px
    }
}


.m-paywallHeader__title {
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
}

.m-paywallHeader__title:after {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: -12px;
    content: "";
    border-top: 1px dashed #a8abb1
}

.m-paywallHeader__titleInner {
    display: inline-block;
    padding-right: 8px;
    padding-left: 8px;
    margin-top: -8px;
    background-color: #fff
}

.m-paywallHeader__warning {
    margin-bottom: 8px;
    text-align: center
}

.m-paywallHeader__login {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px
}


.m-paywallContentNote {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
}

.m-paywallContentNote__itemDetail {
    -webkit-box-flex: 1;
    flex: 1
}

.m-paywallContentNote__itemTitle {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .06em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.m-paywallContentNote__itemPrice {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1;
    color: #2cb696;
}

.m-paywallContentNote__itemDescription {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    font-size: 14px
}

.m-paywallContentNote__itemName {
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all
}

.m-paywallContentNote__itemImage {
    width: 56px;
    margin-left: 16px;
    overflow: hidden
}

.m-paywallContentNote__itemImageSrc {
    display: block;
    width: auto;
    width: 56px;
    height: 56px;
    vertical-align: top;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover
}


.o-paywallContentItem {
    width: 100%
}

.o-paywallContentItem + .o-paywallContentItem {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .o-paywallContentItem + .o-paywallContentItem {
        margin-top: 16px
    }
}

.o-paywallContentItem__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .o-paywallContentItem__inner {
        padding: 16px
    }
}

.o-paywallContentItem__itemAction {
    width: 100%;
    margin-top: 16px;
}

.o-paywallContentItem__itemAction .a-button {
    background-color: #2cb696 !important;
    color: #000 !important;
}

.o-paywallContentItem__itemReview {
    margin-top: 8px
}


.m-paywallPriorSale__item {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.m-paywallPriorSale__item + .m-paywallPriorSale__item {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .m-paywallPriorSale__item + .m-paywallPriorSale__item {
        margin-top: 16px
    }
}

.m-paywallPriorSale__limit {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 8px 24px;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 1px solid #f2f2f2
}

@media only screen and (max-width: 479px) {
    .m-paywallPriorSale__limit {
        padding: 8px 16px
    }
}

.m-paywallPriorSale__limitTitle {
    font-size: 14px;
    font-weight: 700
}

.m-paywallPriorSale__limitCount {
    font-size: 14px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start;
    white-space: nowrap
}

.m-paywallPriorSale__limitNum {
    font-weight: 700;
    font-size: 16px
}

.m-paywallPriorSale__limitDivider {
    margin-right: 4px;
    margin-left: 4px
}

.m-paywallPriorSale__itemInner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    margin-right: auto;
    margin-left: auto
}

.m-paywallPriorSale__itemAction {
    width: 100%;
    margin-top: 16px
}


.m-paywallSimplePaidNote {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.m-paywallSimplePaidNote + .m-paywallSimplePaidNote {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .m-paywallSimplePaidNote + .m-paywallSimplePaidNote {
        margin-top: 16px
    }
}

.m-paywallSimplePaidNote__action {
    width: 100%;
    margin-top: 16px
}


.m-paywallMessage {
    background-color: #f7f9f9;
    border-bottom: 1px solid #f2f2f2
}

.m-paywallMessage__inner {
    position: relative;
    max-width: 480px;
    padding: 16px 24px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .m-paywallMessage__inner {
        padding: 16px
    }
}

.m-paywallMessage__inner:before {
    position: absolute;
    bottom: 0;
    left: 24px;
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    background-color: #f7f9f9;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom
}

@media only screen and (max-width: 479px) {
    .m-paywallMessage__inner:before {
        left: 16px
    }
}

.m-paywallMessage__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.m-paywallMessage__author {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 16px
}

@media only screen and (max-width: 479px) {
    .m-paywallMessage__author {
        margin-right: 8px
    }
}

.m-paywallMessage__content {
    width: 100%;
    font-size: 12px;
    color: #787c7b
}


.m-paywallContentMagazine {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
}

.m-paywallContentMagazine__itemDetail {
    -webkit-box-flex: 1;
    flex: 1
}

.m-paywallContentMagazine__itemTitle {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .06em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.m-paywallContentMagazine__itemPrice {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1;
    color: #2cb696;
    color: var(--customPrimaryColor)
}

.m-paywallContentMagazine__itemImage {
    width: 80px;
    margin-left: 16px;
    overflow: hidden
}

.m-paywallContentMagazine__itemImage a {
    display: block;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

.m-paywallContentMagazine__itemImage img {
    width: auto;
    width: 80px;
    height: 40px;
    vertical-align: top;
    -o-object-fit: cover;
    object-fit: cover
}

.m-paywallContentMagazine__itemDescription {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    font-size: 14px
}


.m-paywallMagazineBuy {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.m-paywallMagazineBuy + .m-paywallMagazineBuy {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .m-paywallMagazineBuy + .m-paywallMagazineBuy {
        margin-top: 16px
    }
}

.m-paywallMagazineBuy__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .m-paywallMagazineBuy__inner {
        padding: 16px
    }
}

.m-paywallMagazineBuy__action {
    width: 100%;
    margin-top: 16px
}


.m-paywallMagazineSubsc__item {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.m-paywallMagazineSubsc__item + .m-paywallMagazineSubsc__item {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .m-paywallMagazineSubsc__item + .m-paywallMagazineSubsc__item {
        margin-top: 16px
    }
}

.m-paywallMagazineSubsc__itemInner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .m-paywallMagazineSubsc__itemInner {
        padding: 16px
    }
}

.m-paywallMagazineSubsc__itemAction {
    width: 100%;
    margin-top: 16px
}


.o-paywall {
    margin: 40px 0 56px
}

@media only screen and (max-width: 479px) {
    .o-paywall {
        margin: 32px 0
    }
}

.o-paywall__message {
    font-size: 14px;
    margin-top: 32px;
    margin-bottom: 8px;
    line-height: 1.5;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-paywall__message {
        margin-top: 24px
    }
}

.o-paywall__item + .o-paywall__item {
    margin-top: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-paywall__item {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-paywall__item {
        margin-right: 16px;
        margin-left: 16px
    }
}


.m-paywallLimitedNoteMagazine {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.m-paywallLimitedNoteMagazine + .m-paywallLimitedNoteMagazine {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .m-paywallLimitedNoteMagazine + .m-paywallLimitedNoteMagazine {
        margin-top: 16px
    }
}

.m-paywallLimitedNoteMagazine__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .m-paywallLimitedNoteMagazine__inner {
        padding: 16px
    }
}

.m-paywallLimitedNoteMagazine__action {
    width: 100%;
    margin-top: 16px
}


.m-paywallMagazineNote {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.m-paywallMagazineNote + .m-paywallMagazineNote {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .m-paywallMagazineNote + .m-paywallMagazineNote {
        margin-top: 16px
    }
}

.m-paywallMagazineNote__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .m-paywallMagazineNote__inner {
        padding: 16px
    }
}

.m-paywallMagazineNote__action {
    width: 100%;
    margin-top: 16px
}


.o-paywallMagazine {
    margin: 40px 0 56px
}

@media only screen and (max-width: 479px) {
    .o-paywallMagazine {
        margin: 32px 0
    }
}

.o-paywallMagazine__message {
    font-size: 14px;
    margin-top: 32px;
    margin-bottom: 8px;
    line-height: 1.5;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-paywallMagazine__message {
        margin-top: 24px
    }
}

.o-paywallMagazine__item + .o-paywallMagazine__item {
    margin-top: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-paywallMagazine__item {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-paywallMagazine__item {
        margin-right: 16px;
        margin-left: 16px
    }
}


.o-relatedNote__title {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-relatedNote__title {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-relatedNote__title {
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-relatedNote__body {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-relatedNote__body {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-relatedNote__item {
    padding: 8px 0
}


.o-shareBooster {
    position: fixed;
    bottom: 0;
    z-index: 8;
    width: 100%;
    /* margin-bottom: 28px;    //deleted by xman for detail_1 o-shareBooster is--active */
    -webkit-transition: padding-bottom .2s ease-out;
    transition: padding-bottom .2s ease-out;
    padding-bottom: env(safe-area-inset-bottom);
    pointer-events: none
}

.o-shareBooster__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 16px;
    margin-left: 16px;
    pointer-events: none
}

.o-shareBooster__item {
    /* margin-right: 16px; //deleted by xman 2020.12.18 for detail_1  */
    pointer-events: auto
}

.o-shareBooster__item--type_twitter .o-shareBooster__link {
    background-color: #55acee
}

.o-shareBooster__item--type_hatena .o-shareBooster__link {
    background-color: #00a4df
}

.o-shareBooster__item--type_line .o-shareBooster__link {
    background-color: #06c755
}

.o-shareBooster__item--type_share .o-shareBooster__link {
    color: #a8abb1;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
}

.o-shareBooster__item--suki {
    margin-right: 0;
    /* margin-bottom: 8px;     // deleted by xman 2020.12.18 for detail_1 */
    margin-left: auto
}

.o-shareBooster__item--suki .o-shareBooster__link {
    width: 48px;
    height: 48px;
    color: #ea3f60;
    background-color: #fff;
    border: 2px solid #ea3f60;
    border-radius: 48px
}

.o-shareBooster__icon--share {
    margin-right: 2px
}

.o-shareBooster__link {
    display: block;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 40px
}


.o-shareBooster {
    position: fixed;
    bottom: 0;
    border-top: 1px solid #f2f2f2;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    -webkit-transform: translateY(110%);
    transform: translateY(110%)
}

.o-shareBooster, .o-shareBooster:before {
    left: 0;
    width: 100%;
    background-color: #fff
}

.o-shareBooster:before {
    position: absolute;
    bottom: -10px;
    z-index: -1;
    display: block;
    height: 100%;
    content: ""
}

@media only screen and (max-width: 479px) {
    .o-shareBooster {
        display: none
    }
}

.o-shareBooster[focus-within] {
    z-index: 10;
    -webkit-transition: all .4s cubic-bezier(1, 0, 0, 1);
    transition: all .4s cubic-bezier(1, 0, 0, 1);
    -webkit-transform: translate(0);
    transform: translate(0)
}

.o-shareBooster:focus-within {
    z-index: 10;
    -webkit-transition: all .4s cubic-bezier(1, 0, 0, 1);
    transition: all .4s cubic-bezier(1, 0, 0, 1);
    -webkit-transform: translate(0);
    transform: translate(0)
}

.o-shareBooster.is--active {
    z-index: 10;
    -webkit-transition: all .4s cubic-bezier(1, 0, 0, 1);
    transition: all .4s cubic-bezier(1, 0, 0, 1);
    -webkit-transform: translate(0);
    transform: translate(0)
}

.o-shareBooster__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 620px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-shareBooster__inner {
        width: auto;
        padding-right: 16px;
        padding-left: 16px
    }
}

.o-shareBooster__note {
    margin-left: -16px
}

.o-shareBooster__note, .o-shareBooster__share {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.o-shareBooster__share {
    margin-right: -16px
}

.o-shareBooster__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    line-height: 56px;
    color: #a8abb1;
    text-align: center;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-shareBooster__item {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-shareBooster__item:hover {
        color: #787c7b
    }
}

.o-shareBooster__item--suki {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: auto;
    padding-right: 16px;
    padding-left: 16px
}

.o-shareBooster__like {
    display: inline-block;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #2cb696;
    color: var(--customPrimaryColor);
    vertical-align: top
}

@media only screen and (min-width: 769px) {
    .o-shareBooster__like {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }
}

.o-shareBooster__count {
    display: inline-block;
    margin-left: 4px;
    font-weight: 400;
    color: #ea3f60;
    vertical-align: middle;
    font-size: 14px
}

@media only screen and (min-width: 769px) {
    .o-shareBooster__count:hover {
        text-decoration: underline
    }
}


.o-sliblingNote {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-sliblingNote:before {
    position: absolute;
    top: 16px;
    left: 50%;
    display: block;
    width: 1px;
    height: calc(100% - 32px);
    content: "";
    background-color: #f2f2f2
}

.o-sliblingNote__prev {
    -webkit-box-flex: 1;
    flex: 1;
    width: 50%;
    font-size: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-sliblingNote__prev {
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-sliblingNote__prev {
        padding-left: 8px;
        font-size: 14px
    }
}

.o-sliblingNote__next {
    -webkit-box-flex: 1;
    flex: 1;
    width: 50%;
    text-align: right;
    font-size: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-sliblingNote__next {
        margin-right: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-sliblingNote__next {
        padding-right: 8px;
        font-size: 14px
    }
}

.o-sliblingNote__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 24px 0
}

@media only screen and (max-width: 479px) {
    .o-sliblingNote__link {
        padding: 16px 0
    }
}

.o-sliblingNote__label {
    display: -webkit-box;
    -webkit-box-flex: 1;
    flex: 1;
    padding-right: 16px;
    padding-left: 16px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width: 479px) {
    .o-sliblingNote__label {
        display: block;
        padding-right: 8px;
        padding-left: 8px;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.o-sliblingNote__icon {
    width: 24px
}


.o-supportAppeal {
    padding: 16px;
    background-color: #f7f9f9
}

.o-supportAppeal__title {
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-size: 12px
}

.o-supportAppeal__body {
    display: -webkit-box;
    display: flex
}

.o-supportAppeal__img {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 16px
}

.o-supportAppeal__contents {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 24px 24px 16px;
    background: #fff;
    border-radius: 12px
}

@media only screen and (max-width: 479px) {
    .o-supportAppeal__contents {
        padding: 16px
    }
}

.o-supportAppeal__message {
    width: 100%;
    margin-bottom: 24px;
    line-height: 1.5;
    white-space: pre-line;
    font-size: 14px
}

.o-supportAppeal__message a {
    color: #2cb696;
    color: var(--customPrimaryColor);
    word-break: break-all;
    word-wrap: break-word
}

@media only screen and (min-width: 769px) {
    .o-supportAppeal__message a:hover {
        color: #228d74;
        color: var(--customPrimaryDarkenColor)
    }
}

.o-supportAppeal__button {
    width: 100%
}


.o-thanksMessage {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 24px;
    background-color: #f7f9f9;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-thanksMessage {
        display: block;
        padding: 16px;
        border-radius: 0
    }
}

.o-thanksMessage__title {
    -webkit-box-flex: 1;
    flex: 1;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    word-break: break-all
}

.o-thanksMessage__title + .o-thanksMessage__action {
    -webkit-box-flex: 0;
    flex: 0 0 230px;
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .o-thanksMessage__title + .o-thanksMessage__action {
        margin-top: 16px;
        margin-left: 0
    }
}

.o-thanksMessage__action {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 0;
    flex: 0 0 360px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-thanksMessage__action:hover {
        opacity: .8
    }
}

.o-thanksMessage__actionLink {
    display: -webkit-box;
    display: flex;
    width: 100%;
    padding: 0 40px 0 16px
}

.o-thanksMessage__actionBody {
    margin-top: 16px;
    margin-bottom: 16px
}

.o-thanksMessage__actionTitle {
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 14px;
    word-break: break-all
}

.o-thanksMessage__actionDescription {
    color: #fff;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 12px;
    word-break: break-all
}

.o-thanksMessage__actionArrow {
    position: absolute;
    top: 50%;
    right: 8px;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}


.p-article__body {
    width: 620px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 768px) {
    .p-article__body {
        width: auto
    }
}

.p-article__content {
    margin-top: 48px;
    margin-bottom: 48px
}

@media only screen and (max-width: 768px) {
    .p-article__content {
        margin-top: 0
    }
}

@media only screen and (max-width: 479px) {
    .p-article__content {
        margin-bottom: 32px
    }
}

.p-article__paywall {
    margin-top: 48px;
    margin-bottom: 48px
}

@media only screen and (max-width: 479px) {
    .p-article__paywall {
        margin-top: 32px;
        margin-bottom: 32px
    }
}

@media print {
    .p-article__paywall {
        display: none
    }
}

.p-article__contest {
    margin-top: 48px;
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .p-article__contest {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .p-article__contest {
        margin-top: 32px;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media print {
    .p-article__contest {
        display: none
    }
}

.p-article__hashtags {
    margin-top: 16px;
    margin-bottom: 48px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .p-article__hashtags {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .p-article__hashtags {
        margin-right: 16px;
        margin-bottom: 32px;
        margin-left: 16px
    }
}

@media print {
    .p-article__hashtags {
        display: none
    }
}

.p-article__review {
    margin-top: 16px;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .p-article__review {
        margin-right: 16px;
        margin-left: 16px
    }
}

@media print {
    .p-article__review {
        display: none
    }
}

.p-article__support {
    margin-top: 16px;
    margin-bottom: 32px
}

@media only screen and (max-width: 479px) {
    .p-article__support {
        margin-bottom: 24px
    }
}

@media print {
    .p-article__support {
        display: none
    }
}

.p-article__action {
    margin-top: 32px;
    margin-bottom: 32px
}

@media only screen and (max-width: 479px) {
    .p-article__action {
        margin-top: 24px;
        margin-bottom: 24px
    }
}

@media print {
    .p-article__action {
        display: none
    }
}

.p-article__creator {
    margin-top: 32px;
    margin-bottom: 32px
}

@media only screen and (max-width: 479px) {
    .p-article__creator {
        margin-top: 24px;
        margin-bottom: 24px
    }
}

@media print {
    .p-article__creator {
        display: none
    }
}

.p-article__related {
    padding-top: 32px;
    margin-top: 32px;
    margin-bottom: 32px;
    border-top: 1px solid #f2f2f2
}

.p-article__related:empty {
    display: none
}

@media only screen and (max-width: 479px) {
    .p-article__related {
        margin-top: 24px;
        margin-bottom: 24px
    }
}

@media print {
    .p-article__related {
        display: none
    }
}

.p-article__sibling {
    margin-top: 32px;
    margin-bottom: 32px;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2
}

.p-article__sibling:empty {
    display: none
}

@media only screen and (max-width: 479px) {
    .p-article__sibling {
        margin-top: 24px;
        margin-bottom: 24px
    }
}

@media print {
    .p-article__sibling {
        display: none
    }
}

.p-article__magazineHaving {
    margin-top: 32px;
    margin-bottom: 32px
}

@media only screen and (max-width: 479px) {
    .p-article__magazineHaving {
        margin-top: 24px;
        margin-bottom: 24px
    }
}

@media print {
    .p-article__magazineHaving {
        display: none
    }
}

.p-article__reservedDate {
    padding-right: 4px;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 700
}

.p-article__comment {
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6
}

@media print {
    .p-article__comment {
        display: none
    }
}

.p-article__commentInner {
    width: 620px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 768px) {
    .p-article__commentInner {
        width: auto
    }
}

.p-article__recommend {
    padding: 24px 0;
    background-color: #f7f9f9
}

@media print {
    .p-article__recommend {
        display: none
    }
}

.p-article__recommendInner {
    width: 620px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 768px) {
    .p-article__recommendInner {
        width: auto
    }
}

@media print {
    .p-article__share {
        display: none
    }
}


.o-r18Confirmation {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.o-r18Confirmation__body {
    max-width: 500px;
    padding: 40px 0
}

@media only screen and (max-width: 479px) {
    .o-r18Confirmation__body {
        padding: 40px 16px 8px
    }
}

.o-r18Confirmation__content {
    text-align: center
}

.o-r18Confirmation__image {
    display: block;
    margin: 0 auto 32px
}

.o-r18Confirmation__title {
    font-size: 18px;
    margin-bottom: 24px;
    font-weight: 700
}

.o-r18Confirmation__titleLine {
    display: inline-block
}

.o-r18Confirmation__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

@media only screen and (max-width: 479px) {
    .o-r18Confirmation__action {
        display: block
    }
}

.o-r18Confirmation__button {
    margin: 16px
}

@media only screen and (max-width: 479px) {
    .o-r18Confirmation__button {
        margin: 16px 0
    }
}


.loading {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 620px;
    min-height: 60vh;
    padding: 48px 0;
    margin: 0 auto
}

@media only screen and (max-width: 768px) {
    .loading {
        width: auto
    }
}
<script charset="utf-8" src="./index_files/note.11ca3c625a58282b3662.js.download"></script>
                                                                                    <script charset="utf-8" src="./index_files/note.eefa74607e251d22217d.js.download"></script>


                                                                                                                                                                        .m-archiveList {
                                                                                                                                                                            display: -webkit-box;
                                                                                                                                                                            display: flex;
                                                                                                                                                                            -webkit-box-orient: vertical;
                                                                                                                                                                            -webkit-box-direction: normal;
                                                                                                                                                                            flex-direction: column;
                                                                                                                                                                            -webkit-box-pack: center;
                                                                                                                                                                            justify-content: center
                                                                                                                                                                        }

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-archiveList {
        margin: 32px 24px 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-archiveList {
        margin: 32px 24px 0
    }
}

@media only screen and (max-width: 479px) {
    .m-archiveList {
        margin-right: 16px;
        margin-left: 16px
    }
}

.m-archiveList__section {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.m-archiveList__section + .m-archiveList__section {
    margin-top: 16px
}

.m-archiveList__header {
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px
}

.m-archiveList__headerLink {
    display: block;
    padding: 8px 16px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .m-archiveList__headerLink {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-archiveList__headerLink:hover {
        color: #222;
        background-color: #f7f9f9
    }
}

.m-archiveList__item {
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    font-size: 16px
}

.m-archiveList__item:last-child {
    border-bottom: none
}

.m-archiveList__link {
    display: block;
    padding: 16px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .m-archiveList__link {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-archiveList__link:hover {
        color: #222;
        background-color: #f7f9f9
    }
}

.m-archiveList__count {
    position: absolute;
    top: 50%;
    right: 16px;
    color: #787c7b;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px
}


.m-basicEmptyContent {
    padding: 24px
}

.m-basicEmptyContent__title {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center
}

.m-basicEmptyContent__description {
    font-size: 14px;
    color: #787c7b;
    text-align: center
}

.m-basicEmptyContent__image {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-right: auto;
    margin-bottom: 16px;
    margin-left: auto;
    background-color: transparent
}

.m-basicEmptyContent__icon {
    display: block;
    margin: 0 auto;
    color: #a8abb1
}


.o-empty__title--disabled {
    color: #a8abb1
}

.o-empty__descriptionIcon {
    margin-right: 4px;
    margin-left: 4px;
    vertical-align: text-bottom
}

.o-empty__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 24px
}

.o-empty__action--vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    max-width: 300px;
    margin-right: auto;
    margin-left: auto
}

.o-empty__action--vertical .o-empty__button {
    margin: 0
}

.o-empty__action--vertical .o-empty__button + .o-empty__button {
    margin-top: 16px
}

.o-empty__button {
    margin: 0 8px
}


.m-circle-summary {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-circle-summary {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center
    }
}

@media only screen and (max-width: 768px) {
    .m-circle-summary {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center
    }
}

.m-circle-summary__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.m-circle-summary__card {
    position: relative;
    width: 100%;
    margin: 0 auto 16px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-circle-summary__card {
        width: 112px;
        margin-bottom: 0
    }
}

@media only screen and (max-width: 768px) {
    .m-circle-summary__card {
        width: 112px;
        margin-bottom: 0
    }
}

.m-circle-summary__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.m-circle-summary__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-circle-summary__body {
        -webkit-box-flex: 1;
        flex: 1;
        margin-left: 16px
    }
}

@media only screen and (max-width: 768px) {
    .m-circle-summary__body {
        -webkit-box-flex: 1;
        flex: 1;
        margin-left: 16px
    }
}

.m-circle-summary__statusLabel {
    position: absolute;
    top: 8px;
    right: 8px
}

.m-circle-summary__title {
    font-weight: 700;
    font-size: 14px
}

.m-circle-summary__description {
    margin-bottom: 8px;
    word-break: break-all;
    font-size: 12px
}

.m-circle-summary__benefitlist {
    -webkit-box-flex: 1;
    flex: 1;
    margin-bottom: 16px;
    color: #787c7b
}

@media only screen and (max-width: 768px) {
    .m-circle-summary__benefitlist {
        display: none
    }
}

.m-circle-summary__benefitlist:empty {
    margin-bottom: 0
}

.m-circle-summary__benefitlistItem {
    box-sizing: border-box;
    padding: 0 0 0 1em;
    text-indent: -1em;
    word-break: break-all;
    font-size: 12px
}

.m-circle-summary__benefitlistItem:before {
    content: "・"
}

.m-circle-summary__button {
    position: relative;
    pointer-events: auto
}


.o-circle-card {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-circle-card {
        display: -webkit-box;
        display: flex;
        background-color: transparent;
        border: none;
        -webkit-overflow-scrolling: touch
    }
}

@media only screen and (max-width: 768px) {
    .o-circle-card {
        display: -webkit-box;
        display: flex;
        background-color: transparent;
        border: none;
        -webkit-overflow-scrolling: touch
    }
}

.o-circle-card__head {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px 16px 0
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-circle-card__head {
        display: none
    }
}

@media only screen and (max-width: 768px) {
    .o-circle-card__head {
        display: none
    }
}

.o-circle-card__title {
    margin-right: 8px;
    font-weight: 700;
    font-size: 16px
}

.o-circle-card__help {
    color: #a8abb1
}

@media only screen and (min-width: 769px) {
    .o-circle-card__help {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circle-card__help:hover {
        color: #787c7b
    }
}

.o-circle-card__item {
    padding: 16px 0;
    margin: 0 16px
}

@media only screen and (min-width: 769px) {
    .o-circle-card__item:not(:last-child) {
        border-bottom: 1px solid #e6e6e6
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-circle-card__item {
        display: -webkit-box;
        display: flex;
        min-width: 290px;
        padding: 16px;
        margin: 0 8px 0 0;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 4px
    }

    .o-circle-card__item:not(:last-child) {
        padding: 16px
    }

    .o-circle-card__item:last-child {
        margin-right: 0
    }
}

@media only screen and (max-width: 768px) {
    .o-circle-card__item {
        display: -webkit-box;
        display: flex;
        min-width: 290px;
        padding: 16px;
        margin: 0 8px 0 0;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 4px
    }

    .o-circle-card__item:last-child {
        margin-right: 0
    }
}


.o-customLink {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-customLink:hover {
        opacity: .8
    }
}

.o-customLink__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    padding: 0 40px 0 16px
}

.o-customLink__body {
    margin-top: 16px;
    margin-bottom: 16px
}

.o-customLink__title {
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.o-customLink__description {
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

.o-customLink__arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}


.m-storeItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-storeItem {
        -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-storeItem:hover {
        border: 1px solid #ccc
    }
}

.m-storeItem__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2
}

.m-storeItem__thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .m-storeItem__thumb {
        padding-bottom: 70%
    }
}

.m-storeItem__thumbImg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.m-storeItem__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.m-storeItem__title {
    max-height: 72px;
    font-weight: 700
}

.m-storeItem__description, .m-storeItem__title {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.m-storeItem__description {
    -webkit-box-flex: 1;
    flex: 1;
    max-height: 54px;
    color: #787c7b;
    font-size: 12px
}

.m-storeItem__description:last-child {
    margin-bottom: 0
}

.m-storeItem__aside {
    margin-top: auto
}

.m-storeItem__price {
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 12px
}

.m-storeItem__storeName {
    display: -webkit-box;
    overflow: hidden;
    color: #787c7b;
    font-size: 10px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.m-storeItem[data-size=small] {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center
}

.m-storeItem[data-size=small] .m-storeItem__thumb {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 72px;
    padding-bottom: 72px;
    margin-bottom: 0
}

.m-storeItem[data-size=small] .m-storeItem__detail {
    margin-left: 16px
}

.m-storeItem[data-size=small] .m-storeItem__title {
    max-height: 42px;
    margin-bottom: 0;
    font-size: 14px;
    -webkit-line-clamp: 2
}

.m-storeItem[data-size=small] .m-storeItem__description {
    display: none
}

.m-storeItem[data-size=small] .m-storeItem__price {
    margin-bottom: 4px
}


.o-rightColumn__list {
    margin-bottom: 32px
}

.o-rightColumn__listItem {
    width: 100%
}

.o-rightColumn__listItem + .o-rightColumn__listItem {
    margin-top: 16px
}

.o-rightColumn__widgetList {
    margin-bottom: 16px
}

@media only screen and (max-width: 768px) {
    .o-rightColumn__widgetList {
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media only screen and (max-width: 768px) {
    .o-rightColumn__widgetBody {
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-align: stretch;
        align-items: stretch;
        padding: 0 30px 30px
    }
}

@media only screen and (max-width: 479px) {
    .o-rightColumn__widgetBody {
        padding: 10px
    }
}

.o-rightColumn__moreBtn {
    margin-top: 16px
}


.o-contentHome {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentHome {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }
}

.o-contentHome__main {
    width: 100%;
    max-width: 610px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contentHome__main {
        -webkit-box-ordinal-group: 3;
        order: 2;
        max-width: none
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentHome__main {
        -webkit-box-ordinal-group: 3;
        order: 2;
        max-width: none
    }
}

@media only screen and (max-width: 479px) {
    .o-contentHome__main {
        max-width: none
    }
}

.o-contentHome__aside {
    width: 280px;
    margin-left: auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contentHome__aside {
        display: none;
        -webkit-box-ordinal-group: 2;
        order: 1;
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentHome__aside {
        display: none;
        -webkit-box-ordinal-group: 2;
        order: 1;
        width: 100%
    }
}

@media only screen and (max-width: 479px) {
    .o-contentHome__aside {
        display: none;
        -webkit-box-ordinal-group: 2;
        order: 1;
        width: 100%
    }
}

.o-contentHome__list {
    margin-bottom: 32px
}

.o-contentHome__list:empty {
    display: none
}

.o-contentHome__listItem {
    width: 100%
}

.o-contentHome__listItem + .o-contentHome__listItem {
    margin-top: 16px
}

.o-contentHome__emptyKaizenNotice {
    max-width: 400px;
    padding: 24px;
    margin: auto
}


.o-contentArchive {
    width: 100%;
    max-width: 610px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentArchive {
        width: auto;
        max-width: none
    }
}

@media only screen and (max-width: 479px) {
    .o-contentArchive {
        width: auto;
        max-width: none
    }
}

.o-contentArchive__select {
    max-width: none;
    padding-bottom: 16px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contentArchive__select {
        margin: 32px 24px 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentArchive__select {
        margin: 32px 24px 0
    }
}

@media only screen and (max-width: 479px) {
    .o-contentArchive__select {
        padding-right: 16px;
        padding-left: 16px
    }
}


.m-paginate__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.m-paginate__item {
    -webkit-box-align: center;
    align-items: center;
    min-width: 31px;
    height: 32px;
    padding-bottom: 1px;
    margin-right: 4px;
    margin-left: 4px
}

.m-paginate__item.active > a {
    color: #2cb696;
    color: var(--customPrimaryColor);
    border-color: #2cb696;
    border-color: var(--customPrimaryColor)
}

.m-paginate__item.prev {
    color: #ccc
}

.m-paginate__item.prev > a {
    padding: 4px;
    border-color: transparent
}

.m-paginate__item.prev:hover {
    color: #787c7b
}

.m-paginate__item.next {
    color: #ccc
}

.m-paginate__item.next > a {
    padding: 4px;
    border-color: transparent
}

.m-paginate__item.next:hover {
    color: #787c7b
}

.m-paginate__item > a {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-right: 8px;
    padding-left: 8px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 32px;
    font-size: 14px
}

@media only screen and (min-width: 769px) {
    .m-paginate__item > a:hover {
        color: #2cb696;
        color: var(--customPrimaryColor)
    }
}


.o-contentFollow {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 620px;
    margin: 0 auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contentFollow {
        margin: 32px auto
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentFollow {
        margin: 32px auto
    }
}

.o-contentFollow__userList {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentFollow__userList {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-contentFollow__userList {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-contentFollow__item + .o-contentFollow__item {
    border-top: 1px solid #f2f2f2
}

.o-contentFollow__pagenate {
    margin-top: 24px
}


.o-contentStore {
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentStore {
        width: auto
    }
}

@media only screen and (max-width: 479px) {
    .o-contentStore {
        width: auto;
        margin: 16px
    }
}

.o-contentStore__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contentStore__body {
        padding: 32px 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentStore__body {
        margin: 32px 24px
    }
}

.o-contentStore__item {
    display: -webkit-box;
    display: flex;
    width: calc(33.333% - 16px);
    margin-bottom: 24px
}

@media only screen and (min-width: 769px) {
    .o-contentStore__item:nth-child(3n+2):last-child {
        margin-right: calc(33.333% + 8px)
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentStore__item {
        width: calc(50% - 12px)
    }
}

@media only screen and (max-width: 479px) {
    .o-contentStore__item {
        width: 100%;
        margin-bottom: 16px
    }
}

.o-contentStore__empty {
    margin-right: auto;
    margin-left: auto
}


.o-magazineCreateCard {
    position: relative;
    width: 100%;
    min-height: 170px
}

.o-magazineCreateCard__button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 3px
}

@media only screen and (min-width: 769px) {
    .o-magazineCreateCard__button {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-magazineCreateCard__button:hover {
        border: 1px solid #ccc
    }
}

.o-magazineCreateCard__icon {
    margin-bottom: 8px;
    color: #a8abb1
}

.o-magazineCreateCard__label {
    display: block;
    font-weight: 700;
    color: #a8abb1;
    text-align: center;
    font-size: 14px
}


.o-contentMagazine {
    max-width: 940px;
    margin: 0 auto
}

.o-contentMagazine__list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contentMagazine__list {
        margin: 32px 24px 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentMagazine__list {
        margin: 32px 24px 0
    }
}

@media only screen and (max-width: 479px) {
    .o-contentMagazine__list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        padding: 0 16px
    }
}

.o-contentMagazine__card {
    display: -webkit-box;
    display: flex;
    width: calc(50% - 8px);
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .o-contentMagazine__card {
        width: 100%;
        margin-bottom: 0
    }

    .o-contentMagazine__card + .o-contentMagazine__card {
        margin-top: 16px
    }
}

.o-contentMagazine__more {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 300px;
    padding-top: 24px;
    margin: 0 auto
}

@media only screen and (max-width: 479px) {
    .o-contentMagazine__more {
        width: auto;
        padding: 16px
    }
}


.m-multipleImages {
    position: relative
}

.m-multipleImages:before {
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    content: ""
}

.m-multipleImages__multipleImagesContainer {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%
}

.m-multipleImages__multipleImages {
    display: -webkit-box;
    display: flex;
    flex-basis: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin-right: 4px
}

.m-multipleImages__multipleImages:last-child {
    margin-right: 0
}

.m-multipleImages__imageContainer {
    position: relative;
    height: 100%;
    margin-bottom: 4px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.m-multipleImages__imageContainer:last-child {
    margin-bottom: 0
}

.m-multipleImages__imageContainer[data-view-only=true] {
    cursor: pointer
}

.m-multipleImages__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.m-multipleImages__imageDeleteButton {
    position: absolute;
    top: 8px;
    right: 8px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #fff;
    cursor: pointer;
    background-color: #222;
    border-radius: 50%;
    opacity: .7
}

@media only screen and (min-width: 769px) {
    .m-multipleImages__imageDeleteButton {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-multipleImages__imageDeleteButton:hover {
        opacity: 1
    }
}


.m-privacySettings {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    max-width: 200px;
    padding: 8px;
    margin-right: auto;
    cursor: pointer;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .m-privacySettings {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-privacySettings:hover {
        border-color: #ccc
    }
}

@media only screen and (max-width: 359px) {
    .m-privacySettings {
        max-width: 156px
    }
}

.m-privacySettings__currentSetting {
    margin-left: 4px;
    font-size: 14px
}

@media only screen and (max-width: 359px) {
    .m-privacySettings__currentSetting {
        font-size: 12px
    }
}

.m-privacySettings__dropdownIcon {
    justify-self: flex-end;
    margin-left: auto
}

.m-privacySettings__selector {
    position: absolute;
    top: 38px;
    left: -1px;
    z-index: 1;
    width: calc(100% + 30px);
    padding: 16px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 0 4px 4px 4px
}

.m-privacySettings__kindSelector {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%
}

.m-privacySettings__kindSelector + .m-privacySettings__kindSelector {
    margin-top: 16px
}

.m-privacySettings__itemText {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 0 8px
}

.m-privacySettings__itemName {
    font-weight: 700;
    font-size: 12px
}

.m-privacySettings__itemDescription {
    color: #787c7b;
    font-size: 10px
}

.m-privacySettings__itemInput {
    width: 24px;
    height: 24px
}

.m-privacySettings__itemInput--check {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.m-privacySettings__itemInputCheck {
    align-self: center;
    justify-self: center
}

.m-privacySettings__planSelector {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    padding-left: 8px;
    margin-top: 8px
}

.m-privacySettings__planSelector:first-child {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #e6e6e6
}


.o-circlePostEditor {
    box-sizing: border-box;
    padding: 24px;
    margin-bottom: 24px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-circlePostEditor[data-mode=edit] {
    padding: 16px;
    border-width: 1px;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-circlePostEditor {
        padding: 16px;
        margin-bottom: 8px;
        border-width: 0 0 1px;
        border-radius: 0
    }
}

.o-circlePostEditor__inputTitle:not(:root) {
    height: 36px;
    padding: 0;
    margin-bottom: 8px;
    font-weight: 700;
    resize: none;
    border-color: transparent;
    font-size: 24px
}

.o-circlePostEditor__inputTitle:not(:root):focus, .o-circlePostEditor__inputTitle:not(:root):not(:disabled):hover {
    border-color: transparent
}

.o-circlePostEditor__inputBody:not(:root) {
    padding: 0;
    margin-bottom: 8px;
    resize: none;
    border-color: transparent
}

.o-circlePostEditor__inputBody:not(:root):focus {
    border-color: transparent
}

.o-circlePostEditor__imageLoading, .o-circlePostEditor__images {
    margin-bottom: 16px
}

.o-circlePostEditor__images:empty {
    margin-bottom: 0
}

.o-circlePostEditor__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin-top: 40px
}

@media only screen and (max-width: 479px) {
    .o-circlePostEditor__footer {
        flex-wrap: wrap;
        margin-top: 24px
    }
}

.o-circlePostEditor__buttons {
    display: -webkit-box;
    display: flex;
    margin-left: 16px
}

@media only screen and (max-width: 479px) {
    .o-circlePostEditor__buttons {
        margin-top: 16px
    }
}

.o-circlePostEditor__imageUpload {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 16px;
    color: #fff;
    cursor: pointer;
    background-color: #a8abb1;
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .o-circlePostEditor__imageUpload {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circlePostEditor__imageUpload:hover {
        background-color: #787c7b
    }
}

.o-circlePostEditor__cancel {
    margin-right: 8px
}


.o-circleReplyEditor {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #e6e6e6
}

.o-circleReplyEditor[data-mode=edit] {
    padding-top: 0;
    margin-top: 0;
    border-top-color: transparent
}

.o-circleReplyEditor__creatorIcon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 50%
}

[data-mode=edit] .o-circleReplyEditor__creatorIcon {
    display: none
}

.o-circleReplyEditor__textarea:not(:root) {
    resize: none;
    border-color: transparent
}

.o-circleReplyEditor__textarea:not(:root):focus {
    border-color: transparent
}

.o-circleReplyEditor__lower, .o-circleReplyEditor__upper {
    display: -webkit-box;
    display: flex
}

.o-circleReplyEditor__lower {
    -webkit-box-pack: end;
    justify-content: flex-end
}

.o-circleReplyEditor__imageLoading, .o-circleReplyEditor__images {
    margin-bottom: 16px
}

.o-circleReplyEditor__images:empty {
    margin-bottom: 0
}

.o-circleReplyEditor__imageUpload {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 16px;
    color: #fff;
    cursor: pointer;
    background-color: #a8abb1;
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .o-circleReplyEditor__imageUpload {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circleReplyEditor__imageUpload:hover {
        background-color: #787c7b
    }
}

.o-circleReplyEditor__cancel {
    margin-right: 16px
}


.o-circleBoardViewMore {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.o-circleBoardViewMore__loading {
    margin: 8px 0
}

.o-circleBoardViewMore__label {
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px;
    cursor: pointer
}

.o-circleBoardViewMore__label:hover {
    text-decoration: underline
}

.o-circleBoardViewMore__numbers {
    font-size: 12px;
    color: #a8abb1
}


.o-circleBoardCreator {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.o-circleBoardCreator__icon {
    margin-right: 8px
}

.o-circleBoardCreator__iconImg {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%
}

.o-circleBoardCreator__info {
    font-size: 12px
}

.o-circleBoardCreator__creatorName {
    display: block;
    word-break: break-all
}

.o-circleBoardCreator__infoSub {
    display: -webkit-box;
    display: flex;
    color: #787c7b
}

.o-circleBoardCreator__date {
    display: block;
    margin-right: 8px
}

.o-circleBoardCreator__date[data-has-link=true]:hover {
    text-decoration: underline
}

.o-circleBoardCreator__permission[data-is-author=true]:hover {
    text-decoration: underline;
    cursor: pointer
}


.o-circleCommentItem {
    margin-top: 24px
}

.o-circleCommentItem__creatorInfo {
    margin-bottom: 8px
}

.o-circleCommentItem__main {
    box-sizing: border-box;
    padding-left: 40px
}

.o-circleCommentItem__body {
    margin-bottom: 8px;
    font-size: 14px;
    white-space: pre-line
}

.o-circleCommentItem__body a {
    color: #2cb696;
    color: var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .o-circleCommentItem__body a {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circleCommentItem__body a:hover {
        color: #228d74;
        color: var(--customPrimaryDarkenColor)
    }
}

.o-circleCommentItem__readMore {
    margin-bottom: 8px;
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px;
    cursor: pointer
}

.o-circleCommentItem__image {
    width: 100%;
    max-height: 400px;
    margin-bottom: 8px;
    -o-object-fit: contain;
    object-fit: contain;
    cursor: pointer
}

.o-circleCommentItem__viewmore {
    padding-top: 16px;
    margin-top: 24px;
    border-top: 1px solid #e6e6e6
}

.o-circleCommentItem__viewmore:empty {
    padding-top: 0;
    margin-top: 0;
    border-top: none
}

.o-circleCommentItem__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start
}

.o-circleCommentItem__actionItem {
    margin-right: 16px
}

.o-circleCommentItem__actionItem:empty {
    margin-right: 0
}

.o-circleCommentItem__actionItem--more {
    margin-right: 0;
    margin-left: auto
}

.o-circleCommentItem__reply {
    color: #787c7b;
    font-size: 14px;
    cursor: pointer
}

.o-circleCommentItem__reply:hover {
    text-decoration: underline
}

.o-circleCommentItem__more {
    color: #a8abb1
}


.o-viewComments {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-top: 16px
}

.o-viewComments__label {
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px;
    cursor: pointer
}

.o-viewComments__label:hover {
    text-decoration: underline
}

.o-viewComments__count {
    font-size: 12px;
    color: #a8abb1
}


.o-circleBlurPost {
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.o-circleBlurPost__title {
    padding: 16px;
    font-weight: 700;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 3px 3px 0 0;
    font-size: 24px
}

.o-circleBlurPost__content {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 160px;
    background-color: #f7f9f9;
    border-radius: 0 0 3px 3px
}

.o-circleBlurPost__contentText {
    color: #a8abb1;
    text-align: center;
    white-space: pre-wrap;
    font-size: 14px
}


.o-circlePost:not(:last-child) {
    margin-bottom: 24px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-circlePost:not(:last-child) {
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 768px) {
    .o-circlePost:not(:last-child) {
        margin-bottom: 8px
    }
}

.o-circlePost__post {
    box-sizing: border-box;
    padding: 24px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-circlePost__post {
        padding: 16px;
        border-width: 0 0 1px;
        border-radius: 0
    }
}

.o-circlePost__title {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 700
}

.o-circlePost__creatorinfo {
    margin-bottom: 8px
}

.o-circlePost__body {
    margin-bottom: 8px;
    font-size: 14px;
    white-space: pre-line
}

.o-circlePost__body a {
    color: #2cb696;
    color: var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .o-circlePost__body a {
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circlePost__body a:hover {
        color: #228d74;
        color: var(--customPrimaryDarkenColor)
    }
}

.o-circlePost__readMore {
    margin-bottom: 8px;
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px;
    cursor: pointer
}

.o-circlePost__image {
    width: 100%;
    margin-bottom: 8px
}

.o-circlePost__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start
}

.o-circlePost__actionItem {
    margin-right: 16px
}

.o-circlePost__actionItem--more {
    margin-right: 0;
    margin-left: auto
}

.o-circlePost__reply {
    color: #787c7b;
    font-size: 14px;
    cursor: pointer
}

.o-circlePost__reply:hover {
    text-decoration: underline
}

.o-circlePost__more {
    color: #a8abb1
}

.o-circlePost__comments {
    margin-top: 24px;
    border-top: 1px solid #e6e6e6
}

.o-circlePost__comments[data-empty=true] {
    margin-top: 0;
    border-top: none
}

.o-circlePost__commentsViewmore {
    padding-top: 16px
}

.o-circlePost__commentsViewmore:empty {
    padding-top: 0
}


.o-circleMember__pinnedPostMessage {
    margin-bottom: 8px;
    font-size: 12px;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .o-circleMember__pinnedPostMessage {
        padding: 16px 8px 0;
        margin-bottom: 4px
    }
}

.o-circleMember__pinnedPostIcon {
    margin-right: 4px
}


.o-timelineNoteCard__pinned {
    height: 16px;
    margin-top: -24px;
    margin-bottom: 8px
}


.o-circleDefault {
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-circleDefault {
        padding: 32px 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-circleDefault {
        padding: 16px
    }
}

.o-circleDefault__showMemberPage {
    display: block;
    width: 280px;
    margin: 0 0 16px auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-circleDefault__showMemberPage {
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-circleDefault__showMemberPage {
        width: 100%
    }
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__showMemberPage {
        width: 100%;
        margin-top: 8px;
        margin-bottom: 24px
    }
}

.o-circleDefault__summary {
    padding: 48px 80px;
    margin-bottom: 40px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-circleDefault__summary {
        margin-bottom: 32px
    }
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__summary {
        padding: 24px 16px;
        margin-bottom: 24px
    }
}

.o-circleDefault__summaryTitle {
    margin-bottom: 40px;
    font-size: 24px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__summaryTitle {
        margin-bottom: 24px
    }
}

.o-circleDefault__summaryDescription {
    white-space: pre-line;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__summaryDescription {
        font-size: 14px
    }
}

.o-circleDefault__summaryAvatarList {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 32px
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__summaryAvatarList {
        margin-top: 24px
    }
}

.o-circleDefault__intro {
    margin-bottom: 40px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-circleDefault__intro {
        margin-bottom: 32px
    }
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__intro {
        margin-bottom: 24px
    }
}

.o-circleDefault__section {
    margin-bottom: 40px
}

.o-circleDefault__section:last-child {
    margin-bottom: 0
}

.o-circleDefault__sectionTitle {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__sectionTitle {
        font-size: 18px
    }
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__relatedArticle {
        overflow: hidden;
        border: 1px solid #e6e6e6;
        border-radius: 4px
    }
}

.o-circleDefault__planList {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
}

.o-circleDefault__planItem {
    display: -webkit-box;
    display: flex;
    width: calc(33.333% - 16px);
    padding: 16px;
    margin-bottom: 24px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .o-circleDefault__planItem:only-child {
        margin-right: auto;
        margin-left: auto
    }

    .o-circleDefault__planItem:nth-child(3n+2):last-child {
        margin-right: calc(33.333% + 8px)
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-circleDefault__planItem {
        width: calc(50% - 8px);
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 479px) {
    .o-circleDefault__planItem {
        width: 100%;
        margin-bottom: 16px
    }
}

.o-circleDefault__circleDetail {
    width: 100%;
    max-width: 608px;
    margin: 0 auto
}

.o-circleDefault__blurPost {
    margin-bottom: 40px
}

.o-circleDefault__more {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.o-circleDefault__moreButton {
    width: 300px
}


.o-contentCircle {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentCircle {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: auto;
        padding: 16px
    }
}

@media only screen and (max-width: 479px) {
    .o-contentCircle {
        width: auto;
        background-color: #f7f9f9
    }
}

.o-contentCircle__main {
    width: 100%;
    max-width: 610px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contentCircle__main {
        -webkit-box-ordinal-group: 3;
        order: 2;
        max-width: none
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentCircle__main {
        -webkit-box-ordinal-group: 3;
        order: 2;
        max-width: none
    }
}

@media only screen and (max-width: 479px) {
    .o-contentCircle__main {
        max-width: none
    }
}

.o-contentCircle__onboarding {
    margin-bottom: 16px
}

.o-contentCircle__onboarding:empty {
    display: none
}

@media only screen and (max-width: 479px) {
    .o-contentCircle__onboarding {
        margin-bottom: 0
    }
}

.o-contentCircle__aside {
    width: 280px;
    margin-left: auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contentCircle__aside {
        display: none;
        -webkit-box-ordinal-group: 2;
        order: 1;
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contentCircle__aside {
        display: none;
        -webkit-box-ordinal-group: 2;
        order: 1;
        width: 100%
    }
}

@media only screen and (max-width: 479px) {
    .o-contentCircle__aside {
        display: none;
        -webkit-box-ordinal-group: 2;
        order: 1;
        width: 100%
    }
}

.o-contentCircle__benefits {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (max-width: 768px) {
    .o-contentCircle__benefits {
        display: -webkit-box;
        display: flex;
        background-color: transparent;
        border: none;
        -webkit-overflow-scrolling: touch
    }

    .o-contentCircle__benefits:after {
        padding-left: 16px;
        content: ""
    }
}

.o-contentCircle__benefitsTitle {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 18px
}

@media only screen and (max-width: 768px) {
    .o-contentCircle__benefitsTitle {
        display: none
    }
}

.o-contentCircle__benefitsItem:not(:last-child) {
    margin-bottom: 8px
}

.o-contentCircle__benefitsLink {
    color: #2cb696;
    color: var(--customPrimaryColor);
    text-decoration: underline
}

.o-contentCircle__buttonsItem, .o-contentCircle__planList {
    margin-bottom: 16px
}

.o-contentCircle__members {
    padding: 16px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (max-width: 768px) {
    .o-contentCircle__members {
        display: -webkit-box;
        display: flex;
        background-color: transparent;
        border: none;
        -webkit-overflow-scrolling: touch
    }

    .o-contentCircle__members:after {
        padding-left: 16px;
        content: ""
    }
}

.o-contentCircle__membersTitle {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 18px
}

@media only screen and (max-width: 768px) {
    .o-contentCircle__membersTitle {
        display: none
    }
}

.o-contentCircle__emptyKaizenNotice {
    max-width: 400px;
    padding: 24px;
    margin: auto
}


.o-creatorContent {
    padding: 40px 0
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-creatorContent {
        padding: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-creatorContent {
        padding: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorContent {
        padding: 0
    }
}

.o-creatorContent--topic {
    padding: 0
}

@media only screen and (max-width: 479px) {
    .o-creatorContent__magazine {
        padding: 16px 0 0
    }
}

@media only screen and (max-width: 479px) {
    .o-creatorContent__archive, .o-creatorContent__follow {
        padding: 16px 0 24px
    }
}


@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-magazineTop {
        padding-bottom: calc(env(safe-area-inset-bottom) + 64px)
    }
}

@media only screen and (max-width: 768px) {
    .o-magazineTop {
        padding-bottom: calc(env(safe-area-inset-bottom) + 64px)
    }
}

.o-magazineTop__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 940px;
    padding: 40px 0;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-magazineTop__body {
        display: block;
        padding: 0
    }
}

@media only screen and (max-width: 768px) {
    .o-magazineTop__body {
        display: block;
        padding: 0
    }
}

.o-magazineTop__menu {
    border-bottom: 1px solid #e6e6e6
}

.o-magazineTop__menuWrap {
    position: relative;
    width: 100%;
    max-width: 940px;
    margin-right: auto;
    margin-left: auto
}

.o-magazineTop__menuWrap:before {
    position: absolute;
    top: 2px;
    right: 0;
    z-index: 1;
    width: 32px;
    height: 94%;
    content: "";
    background: -webkit-linear-gradient(right, #fff 50%, hsla(0, 0%, 100%, 0));
    background: linear-gradient(270deg, #fff 50%, hsla(0, 0%, 100%, 0))
}

@media only screen and (max-width: 768px) {
    .o-magazineTop__menuWrap:before {
        display: none
    }
}

.o-magazineTop__menuBody {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.o-magazineTop__menuBody::-webkit-scrollbar {
    display: none
}

.o-magazineTop__main {
    width: 610px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-magazineTop__main {
        width: auto
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-magazineTop__main {
        width: auto
    }
}

@media only screen and (max-width: 479px) {
    .o-magazineTop__main {
        width: 100%
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-magazineTop__content {
        margin: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-magazineTop__content {
        margin: 24px
    }
}

.o-magazineTop__sub {
    width: 280px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-magazineTop__sub {
        width: auto;
        margin: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-magazineTop__sub {
        width: auto;
        margin: 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-magazineTop__sub {
        width: auto;
        margin: 16px
    }
}

.o-magazineTop__loading {
    height: 40px;
    margin-top: 24px;
    margin-bottom: 24px
}


.p-category {
    min-height: 100vh
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .p-category {
        padding-top: 16px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .p-category {
        padding-top: 16px
    }
}


.o-menu {
    display: -webkit-box;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.o-menu::-webkit-scrollbar {
    display: none
}

@media only screen and (max-width: 479px) {
    .o-menu__item:first-child {
        padding-left: 8px
    }
}


.o-setting {
    margin-left: 8px
}

.o-setting__icon {
    color: #a8abb1
}


.o-navbar--liquid .o-navbar__header {
    width: 100%
}

@media only screen and (max-width: 479px) {
    .o-navbar--liquid .o-navbar__header {
        padding-right: 16px;
        padding-left: 16px
    }
}

.o-navbar__header {
    padding-right: 24px;
    padding-left: 24px;
    margin: 24px auto 16px
}

@media only screen and (max-width: 479px) {
    .o-navbar__header {
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 16px
    }
}

.o-navbar__headerBreadcrumb {
    margin-bottom: 8px
}

.o-navbar__headerContent {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

@media only screen and (max-width: 479px) {
    .o-navbar__headerContent {
        -webkit-box-pack: justify;
        justify-content: space-between
    }
}

.o-navbar__headerTitle {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1
}

@media only screen and (max-width: 479px) {
    .o-navbar__headerTitle {
        -webkit-box-flex: 1;
        flex: 1
    }
}

.o-navbar__headerFollow {
    margin-left: 16px
}

.o-navbar__headerSettings {
    margin-left: 8px
}

.o-navbar__body {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 0 24px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6
}

.o-navbar__body--type_official {
    border-bottom: 1px solid #f2f2f2
}

@media only screen and (min-width: 769px) {
    .o-navbar__body--type_official {
        padding: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-navbar__body--type_official {
        padding: 0
    }
}

.o-navbar__body--type_normal {
    margin-top: -1px
}

@media only screen and (max-width: 479px) {
    .o-navbar__body--type_normal {
        padding: 0
    }
}

.o-navbar__inner {
    display: -webkit-box;
    display: flex;
    width: 100%;
    max-width: 1920px;
    padding: 0 24px 0 8px;
    margin: 0 auto 0 0
}

@media only screen and (max-width: 479px) {
    .o-navbar__inner {
        padding: 0
    }
}

.o-navbar__side {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 8px;
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .o-navbar__side {
        padding-right: 16px
    }
}

.o-navbar__side:before {
    position: absolute;
    top: 0;
    left: -16px;
    display: block;
    width: 16px;
    height: 100%;
    content: "";
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff)
}

.o-navbar__breadcrumb {
    margin: 16px 0 8px
}

@media only screen and (max-width: 479px) {
    .o-navbar__breadcrumb {
        padding-left: 16px
    }
}

.o-navbar__breadcrumbContainer {
    display: -webkit-box;
    display: flex;
    width: 100%;
    max-width: 940px;
    margin: 16px auto 0
}

@media only screen and (max-width: 479px) {
    .o-navbar__breadcrumbContainer {
        padding-right: 16px;
        padding-left: 16px
    }
}


.m-privateBar {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    background-color: #f95
}

.m-privateBar__text {
    margin-right: 16px;
    font-size: 14px;
    color: #fff
}


.m-empty {
    padding: 32px;
    text-align: center;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .m-empty {
        padding: 16px;
        text-align: left
    }
}

.m-empty__title {
    font-size: 14px;
    font-weight: 700;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .m-empty__title {
        font-size: 12px
    }
}

.m-empty__description {
    margin-top: 8px;
    color: #787c7b;
    font-size: 12px
}

@media only screen and (max-width: 479px) {
    .m-empty__description {
        font-size: 10px
    }
}


.m-mainCarousel {
    position: relative;
    width: 100%;
    margin-bottom: 16px
}

.swiper-container {
    width: 100%
}

.swiper-slide {
    display: -webkit-box;
    display: flex;
    width: 80%;
    max-width: 520px;
    height: auto;
    padding: 0 8px;

    /* opacity: .4 
        <---   deleted by xman 2020.12.18 */
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .swiper-slide {
        width: calc(100% - 64px)
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .swiper-slide {
        width: calc(100% - 64px)
    }
}

@media only screen and (max-width: 479px) {
    .swiper-slide {
        width: calc(100% - 64px);
        padding: 0 4px
    }
}

.swiper-slide-next {
    -webkit-transition: opacity .2s ease-in .1s;
    transition: opacity .2s ease-in .1s
}

@media only screen and (max-width: 479px) {
    .swiper-slide-next {
        opacity: 1
    }

    .swiper-slide-next .m-pickupCircles__body {
        opacity: 0
    }
}

.swiper-slide-prev {
    -webkit-transition: opacity .2s ease-in .1s;
    transition: opacity .2s ease-in .1s
}

@media only screen and (max-width: 479px) {
    .swiper-slide-prev {
        opacity: 1
    }

    .swiper-slide-prev .m-pickupCircles__body {
        opacity: 0
    }
}

.swiper-slide-active {
    opacity: 1;
    -webkit-transition: opacity .2s ease-in .1s;
    transition: opacity .2s ease-in .1s
}

@media only screen and (max-width: 479px) {
    .swiper-slide-active .m-pickupCircles__body {
        opacity: 1
    }
}


.m-indexItem {
    position: relative;
    box-sizing: border-box;
    width: 100%
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-indexItem[data-size=medium] {
        max-width: 300px
    }
}

.m-indexItem__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%
}

.m-indexItem__card {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
}

.m-indexItem__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.m-indexItem__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
}

.m-indexItem__title {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

[data-size=large] .m-indexItem__title {
    font-size: 20px
}

[data-size=medium] .m-indexItem__title {
    font-size: 16px
}

.m-indexItem__creator {
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

[data-size=large] .m-indexItem__creator {
    font-size: 14px
}

[data-size=medium] .m-indexItem__creator {
    font-size: 12px
}

.m-indexItem__description {
    display: -webkit-box;
    -webkit-box-flex: 1;
    flex: 1;
    overflow: hidden;
    color: #787c7b;
    -webkit-box-orient: vertical
}

[data-size=large] .m-indexItem__description {
    font-size: 14px;
    -webkit-line-clamp: 2
}

[data-size=medium] .m-indexItem__description {
    font-size: 12px;
    -webkit-line-clamp: 3
}


.m-carouselItem {
    width: 100%;
    overflow: hidden;
    border-radius: 4px
}

.m-carouselItem, .m-carouselItem__cover {
    position: relative
}

.m-carouselItem__cover:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%;
    content: ""
}

.m-carouselItem__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.m-carouselItem__body, .m-carouselItem__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.m-carouselItem__body {
    z-index: 3;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: calc(100% - 32px);
    padding: 16px;
    background: -webkit-linear-gradient(bottom, rgba(34, 34, 34, .4), rgba(34, 34, 34, 0));
    background: linear-gradient(0deg, rgba(34, 34, 34, .4), rgba(34, 34, 34, 0))
}

.m-carouselItem__title {
    display: -webkit-box;
    font-size: 20px;
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 5px rgba(34, 34, 34, .5);
    letter-spacing: .06em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width: 479px) {
    .m-carouselItem__title {
        font-size: 16px
    }
}

.m-carouselItem__status {
    display: -webkit-box;
    display: flex
}

.m-carouselItem__suki {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    font-size: 12px;
    margin-right: 16px;
    color: #fff;
    text-shadow: 0 0 5px rgba(34, 34, 34, .5)
}

.m-carouselItem__author {
    display: flex;
    display: -webkit-box;
    -webkit-box-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.m-carouselItem__authorName {
    font-size: 12px;
    color: #fff;
    text-shadow: 0 0 5px rgba(34, 34, 34, .5)
}


.o-mediaNoteForMobile {
    width: 100%;
    height: 100%
}

.o-mediaNoteForMobile__main {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    cursor: pointer;
    background-color: transparent
}

@media only screen and (min-width: 769px) {
    .o-mediaNoteForMobile__main:hover:before {
        position: absolute;
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        z-index: -1;
        z-index: 0;
        display: block;
        pointer-events: none;
        content: "";
        background-color: #f7f9f9;
        border-radius: 4px
    }
}

.o-mediaNoteForMobile__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block
}

.o-mediaNoteForMobile__eyecatch {
    -webkit-box-ordinal-group: 3;
    order: 2;
    width: 106px;
    margin-left: 16px
}

.o-mediaNoteForMobile__eyecatchInner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px
}

.o-mediaNoteForMobile__eyecatchInner:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%;
    content: ""
}

.o-mediaNoteForMobile__eyecatchInner--movie {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.o-mediaNoteForMobile__eyecatchInner img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.o-mediaNoteForMobile__eyecatchInner img.o-mediaNoteForMobile__userIcon {
    width: 80px;
    height: 80px;
    margin: auto;
    border: 4px solid #fff;
    border-radius: 50%
}

.o-mediaNoteForMobile__eyecatchMovie {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%
}

.o-mediaNoteForMobile__imageCount {
    font-size: 12px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 1;
    padding: 2px 4px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: rgba(34, 34, 34, .7);
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .o-mediaNoteForMobile__imageCount {
        font-size: 10px;
        right: 0;
        bottom: 0;
        border-radius: 4px 0 0 0
    }
}

.o-mediaNoteForMobile__pinned {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1
}

.o-mediaNoteForMobile__body {
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-ordinal-group: 2;
    order: 1
}

.o-mediaNoteForMobile__footer {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-ordinal-group: 4;
    order: 3;
    width: 100%;
    padding: 0;
    margin-top: 8px;
    pointer-events: none
}

.o-mediaNoteForMobile__status {
    padding-right: 16px;
    overflow: hidden
}

.o-mediaNoteForMobile__message {
    position: relative;
    z-index: 3;
    -webkit-box-ordinal-group: 5;
    order: 4;
    width: 100%;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
}

.o-mediaNoteForMobile__message:empty {
    display: none
}


.m-contentNote {
    width: 100%
}


.m-basicList--type_custom_links, .m-basicList--type_oembed {
    width: 100%
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--1column .m-basicList__item {
        padding: 0 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--1column .m-basicList__item {
        padding: 0 24px
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--1column .m-basicList__item {
        padding: 0 16px
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--2column {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        justify-content: space-between
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--2column {
        padding: 0 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--2column {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding: 0 24px
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--2column {
        padding: 0 16px
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--2column .m-basicList__item {
        width: calc(50% - 8px)
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--2column .m-basicList__item {
        width: calc(50% - 8px)
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--2column .m-basicList__item {
        width: calc(50% - 8px)
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--3column {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        justify-content: space-between
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--3column {
        padding: 0 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--3column {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding: 0 24px
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--3column {
        padding: 0 16px
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--3column .m-basicList__item {
        width: calc(33.33333% - 8px)
    }

    .m-basicList--3column .m-basicList__item:nth-child(3n+2):last-child {
        margin-right: calc(33.33333% + 4px);
        margin-left: auto
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--3column .m-basicList__item {
        width: calc(33.33333% - 8px)
    }

    .m-basicList--3column .m-basicList__item:nth-child(3n+2):last-child {
        margin-right: calc(33.33333% + 4px);
        margin-left: auto
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--3column .m-basicList__item {
        width: calc(33.33333% - 8px)
    }

    .m-basicList--3column .m-basicList__item:nth-child(3n+2):last-child {
        margin-right: calc(33.33333% + 4px);
        margin-left: auto
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--liquid {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-align: strech;
        align-items: strech;
        -webkit-box-pack: start;
        justify-content: flex-start;
        margin-right: -12px;
        margin-left: -12px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--liquid {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-align: strech;
        align-items: strech;
        -webkit-box-pack: start;
        justify-content: flex-start;
        margin-right: -8px;
        margin-left: -8px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--liquid {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-align: strech;
        align-items: strech;
        -webkit-box-pack: start;
        justify-content: flex-start
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--liquid {
        padding-right: 16px;
        padding-left: 16px
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--liquid .m-basicList__item {
        display: -webkit-box;
        display: flex;
        -webkit-box-flex: 1;
        flex: 1;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        min-width: 240px;
        margin-bottom: 24px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--liquid .m-basicList__item {
        display: -webkit-box;
        display: flex;
        -webkit-box-flex: 1;
        flex: 1;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        min-width: 240px;
        margin-bottom: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--liquid .m-basicList__item {
        display: -webkit-box;
        display: flex;
        -webkit-box-flex: 1;
        flex: 1;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        min-width: 240px;
        margin-bottom: 24px
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--liquid:after, .m-basicList--liquid:before {
        display: -webkit-box;
        display: flex;
        -webkit-box-flex: 1;
        flex: 1;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        min-width: 240px;
        height: 0;
        content: ""
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--liquid:after, .m-basicList--liquid:before {
        display: -webkit-box;
        display: flex;
        -webkit-box-flex: 1;
        flex: 1;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        min-width: 232px;
        height: 0;
        content: ""
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--liquid:after, .m-basicList--liquid:before {
        display: -webkit-box;
        display: flex;
        -webkit-box-flex: 1;
        flex: 1;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        min-width: 232px;
        height: 0;
        content: ""
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--liquid:after, .m-basicList--liquid:before {
        display: none
    }
}

.m-basicList--liquid:before {
    -webkit-box-ordinal-group: 2;
    order: 1
}

.m-basicList--liquid .m-basicList__itemContent {
    width: calc(100% - 24px)
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--liquid .m-basicList__itemContent {
        width: calc(100% - 16px)
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--liquid .m-basicList__itemContent {
        width: calc(100% - 16px)
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--liquid .m-basicList__itemContent {
        width: 100%
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--liquid_side_column {
        max-width: 260px;
        padding: 0
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--liquid_side_column {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        padding: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--liquid_side_column {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        padding: 0
    }
}

.m-basicList--liquid_side_column .m-basicList__item {
    width: 100%
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--liquid_side_column .m-basicList__item {
        min-width: 240px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--liquid_side_column .m-basicList__item {
        min-width: 240px
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--liquid_side_column .m-basicList__item {
        width: 240px;
        margin-right: 16px
    }

    .m-basicList--liquid_side_column .m-basicList__item:empty {
        width: 0;
        margin-right: 0
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--type_notes .m-basicList__item {
        margin-bottom: 40px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--type_notes .m-basicList__item {
        margin-bottom: 40px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--type_notes .m-basicList__item {
        margin-bottom: 24px
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--type_notes .m-basicList__item {
        margin-bottom: 24px
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--type_notesSmall .m-basicList__item {
        margin-bottom: 32px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-basicList--type_notesSmall .m-basicList__item {
        margin-bottom: 32px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-basicList--type_notesSmall .m-basicList__item {
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 479px) {
    .m-basicList--type_notesSmall .m-basicList__item {
        margin-bottom: 16px
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--type_notes.m-basicList--2column .m-basicList__item, .m-basicList--type_notesSmall.m-basicList--2column .m-basicList__item {
        width: calc(50% - 16px)
    }
}

@media only screen and (min-width: 769px) {
    .m-basicList--type_notes.m-basicList--3column .m-basicList__item, .m-basicList--type_notesSmall.m-basicList--3column .m-basicList__item {
        width: calc(33.33333% - 16px)
    }
}

.m-basicList__item {
    display: -webkit-box;
    display: flex;
    margin-bottom: 16px
}

.m-basicList__item:empty {
    margin: 0
}

.m-basicList__customLink {
    margin-bottom: 16px
}

.m-basicList__itemContent {
    display: -webkit-box;
    display: flex;
    width: 100%
}


.m-topicSetting {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: 8px
}

.m-topicSetting__icon {
    margin-left: 8px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .m-topicSetting__icon {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-topicSetting__icon:hover {
        color: #787c7b
    }
}


.m-horizontalScrollItem {
    display: -webkit-box;
    display: flex;
    width: 100%;
    margin-bottom: 16px
}

.m-horizontalScrollItem:empty {
    margin: 0
}

.m-horizontalScrollItem .m-horizontalScrollItem__content {
    display: -webkit-box;
    display: flex;
    width: 100%
}


.m-horizontalScrollSection .swiper-container-free-mode .swiper-slide {
    width: 220px
}


.m-sectionBody {
    width: 100%
}

.m-sectionBody--liquid .m-sectionBody__header {
    max-width: 100%
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-sectionBody--liquid .m-sectionBody__header {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-sectionBody--liquid .m-sectionBody__header {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-sectionBody--liquid .m-sectionBody__main {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-sectionBody--liquid .m-sectionBody__main {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (max-width: 479px) {
    .m-sectionBody--liquid .m-sectionBody__main {
        width: auto
    }
}

@media only screen and (min-width: 769px) {
    .m-sectionBody--sideSection .m-sectionBody__more {
        max-width: 200px;
        margin-left: 0
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-sectionBody--sideSection .m-sectionBody__more {
        max-width: 300px;
        margin-left: auto
    }
}

.m-sectionBody--liquid.m-sectionBody--sideSection .m-sectionBody__more {
    max-width: 200px;
    margin-top: 16px;
    margin-left: 0
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-sectionBody--liquid.m-sectionBody--sideSection .m-sectionBody__more {
        max-width: 300px;
        margin-top: 0;
        margin-left: auto
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-sectionBody--liquid.m-sectionBody--sideSection .m-sectionBody__more {
        max-width: 300px;
        margin-top: 0;
        margin-left: auto
    }
}

@media only screen and (max-width: 479px) {
    .m-sectionBody--liquid.m-sectionBody--sideSection .m-sectionBody__more {
        max-width: 300px;
        margin-top: 0;
        margin-left: auto
    }
}

.m-sectionBody__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-right: auto;
    margin-bottom: 16px;
    margin-left: auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-sectionBody__header {
        width: auto;
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-sectionBody__header {
        width: auto;
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (max-width: 479px) {
    .m-sectionBody__header {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}

.m-sectionBody__header:empty {
    margin: 0
}

.m-sectionBody__title {
    font-size: 16px;
    font-weight: 700
}

.m-sectionBody__side {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: auto
}

.m-sectionBody__more {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    max-width: 300px;
    margin: 16px auto 40px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-sectionBody__more {
        margin-top: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-sectionBody__more {
        margin-top: 0
    }
}

@media only screen and (max-width: 479px) {
    .m-sectionBody__more {
        margin-top: 0
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-sectionBody__main {
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-sectionBody__main {
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media only screen and (max-width: 479px) {
    .m-sectionBody__main {
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }
}

.m-sectionBody__empty--carouselSection {
    max-width: 940px;
    margin: auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .m-sectionBody__empty {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .m-sectionBody__empty {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (max-width: 479px) {
    .m-sectionBody__empty {
        margin-right: 16px;
        margin-left: 16px
    }
}


.o-basicColumnList {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 940px;
    margin: 32px auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-basicColumnList {
        display: block
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-basicColumnList {
        display: block
    }
}

@media only screen and (max-width: 479px) {
    .o-basicColumnList {
        display: block;
        margin: 24px auto
    }
}

.o-basicColumnList__main {
    width: 100%;
    margin-bottom: 32px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-basicColumnList__main {
        max-width: none
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-basicColumnList__main {
        max-width: none
    }
}

@media only screen and (max-width: 479px) {
    .o-basicColumnList__main {
        max-width: none;
        margin-bottom: 24px
    }
}

.o-basicColumnList__item + .o-basicColumnList__item {
    margin-top: 32px
}

@media only screen and (max-width: 479px) {
    .o-basicColumnList__item + .o-basicColumnList__item {
        margin-top: 24px
    }
}


@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .swiper-wrapper {
        padding: 0 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .swiper-wrapper {
        padding: 0 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .swiper-wrapper {
        padding: 0 16px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .m-carouselGroup__header {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .m-carouselGroup__header {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-carouselColumnMulti .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
        right: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-carouselColumnMulti .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
        right: 24px
    }
}

.o-carouselColumnMulti__hero {
    margin: 32px auto
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti__hero {
        margin: 24px auto
    }
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti__hero .m-carouselGroup__header {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-carouselColumnMulti__hero .m-horizontalScrollSection .swiper-nav {
    right: 24px
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti__hero .m-horizontalScrollSection .swiper-nav {
        right: 16px
    }
}

.o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
    right: 0
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
        right: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
        right: 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
        right: 16px
    }
}

.o-carouselColumnMulti__hero .m-sectionBody {
    max-width: 940px;
    margin: auto
}

.o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--carouselSection {
    max-width: none
}

@media only screen and (min-width: 769px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--carouselSection .m-sectionBody__header {
        padding: 0 24px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--carouselSection .m-sectionBody__header {
        padding: 0
    }
}

.o-carouselColumnMulti__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 940px;
    margin: 32px auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-carouselColumnMulti__body {
        display: block
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-carouselColumnMulti__body {
        display: block
    }
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti__body {
        display: block;
        margin: 24px auto
    }
}

.o-carouselColumnMulti__main {
    -webkit-box-flex: 1;
    flex: 1 1 610px;
    min-width: 610px;
    margin-bottom: 32px
}

.o-carouselColumnMulti__main:empty {
    display: none
}

.o-carouselColumnMulti__main:empty + .o-carouselColumnMulti__side {
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    margin-left: 0
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-carouselColumnMulti__main {
        min-width: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti__main {
        min-width: 0;
        margin-bottom: 24px
    }
}

.o-carouselColumnMulti__side {
    -webkit-box-flex: 0;
    flex: 0 0 260px;
    min-width: 260px;
    margin-bottom: 32px;
    margin-left: 56px
}

.o-carouselColumnMulti__side:empty {
    display: none
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-carouselColumnMulti__side {
        min-width: 0;
        margin-left: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-carouselColumnMulti__side {
        min-width: 0;
        margin-left: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti__side {
        min-width: 0;
        margin-bottom: 24px;
        margin-left: 0
    }
}

.o-carouselColumnMulti__item + .o-carouselColumnMulti__item {
    margin-top: 32px
}

@media only screen and (max-width: 479px) {
    .o-carouselColumnMulti__item + .o-carouselColumnMulti__item {
        margin-top: 24px
    }
}


.o-liquidColumnMulti {
    max-width: 1920px;
    margin: 0 auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .swiper-wrapper {
        padding: 0 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .swiper-wrapper {
        padding: 0 24px
    }
}

@media only screen and (max-width: 479px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .swiper-wrapper {
        padding: 0 16px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .m-carouselGroup__header {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .m-carouselGroup__header {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-liquidColumnMulti .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
        right: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-liquidColumnMulti .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
        right: 24px
    }
}

.o-liquidColumnMulti__hero {
    margin: 32px auto
}

@media only screen and (max-width: 479px) {
    .o-liquidColumnMulti__hero {
        margin: 24px auto
    }
}

.o-liquidColumnMulti__hero .m-carouselGroup__header {
    margin-right: 24px;
    margin-left: 24px
}

@media only screen and (max-width: 479px) {
    .o-liquidColumnMulti__hero .m-carouselGroup__header {
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-liquidColumnMulti__hero .m-horizontalScrollSection .swiper-nav {
    right: 24px
}

@media only screen and (max-width: 479px) {
    .o-liquidColumnMulti__hero .m-horizontalScrollSection .swiper-nav {
        right: 16px
    }
}

.o-liquidColumnMulti__hero .m-horizontalScrollSection .swiper-wrapper {
    padding: 0 24px
}

@media only screen and (max-width: 479px) {
    .o-liquidColumnMulti__hero .m-horizontalScrollSection .swiper-wrapper {
        padding: 0 16px
    }
}

@media only screen and (min-width: 769px) {
    .o-liquidColumnMulti__hero .m-sectionBody.m-sectionBody--carouselSection .m-sectionBody__header, .o-liquidColumnMulti__hero .m-sectionBody .m-sectionBody__header, .o-liquidColumnMulti__hero .m-sectionBody .m-sectionBody__main {
        width: auto;
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-liquidColumnMulti__hero .m-sectionBody .m-sectionBody__main {
        width: auto;
        margin-right: 0;
        margin-left: 0
    }
}

.o-liquidColumnMulti__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    max-width: 1920px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
    margin: 32px auto 0
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-liquidColumnMulti__body {
        display: block;
        padding: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-liquidColumnMulti__body {
        display: block;
        padding: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-liquidColumnMulti__body {
        display: block;
        padding: 0;
        margin: 24px auto
    }
}

.o-liquidColumnMulti__main {
    -webkit-box-flex: 1;
    flex: 1 1 100%;
    margin-top: 0;
    overflow: hidden
}

.o-liquidColumnMulti__main:empty {
    display: none
}

.o-liquidColumnMulti__main:empty + .o-liquidColumnMulti__side {
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    margin-left: 0
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-liquidColumnMulti__main {
        margin-right: 0;
        margin-left: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-liquidColumnMulti__main {
        margin-right: 0;
        margin-left: 0
    }
}

@media only screen and (max-width: 768px) {
    .o-liquidColumnMulti__main {
        margin-bottom: 24px
    }
}

.o-liquidColumnMulti__side {
    -webkit-box-flex: 0;
    flex: 0 0 260px;
    min-width: 260px;
    margin-left: 56px
}

.o-liquidColumnMulti__side:empty {
    display: none
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-liquidColumnMulti__side {
        -webkit-box-flex: 0;
        flex: none;
        width: 100%;
        max-width: none;
        margin-left: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-liquidColumnMulti__side {
        -webkit-box-flex: 0;
        flex: none;
        width: 100%;
        max-width: none;
        margin-left: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-liquidColumnMulti__side {
        -webkit-box-flex: 0;
        flex: none;
        width: 100%;
        max-width: none;
        margin-bottom: 24px;
        margin-left: 0
    }
}

.o-liquidColumnMulti__item + .o-liquidColumnMulti__item {
    margin-top: 32px
}

@media only screen and (max-width: 479px) {
    .o-liquidColumnMulti__item + .o-liquidColumnMulti__item {
        margin-top: 24px
    }
}


.p-page--categoryMenu {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 0 24px 0 8px;
    margin: 0 auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .p-page--categoryMenu {
        display: block;
        padding: 0
    }
}

@media only screen and (max-width: 768px) {
    .p-page--categoryMenu {
        display: block;
        padding: 0
    }
}

@media only screen and (min-width: 769px) {
    .p-page--categoryMenu .p-page__categoryMenu {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        width: 192px;
        height: 100%;
        max-height: 100vh;
        padding-top: 24px;
        padding-right: 16px;
        padding-bottom: 24px;
        margin-right: 24px;
        overflow-y: auto
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .p-page--categoryMenu .p-page__categoryMenu {
        position: static;
        top: auto;
        width: 100%;
        padding: 0;
        margin-top: 16px;
        overflow-y: visible
    }
}

@media only screen and (max-width: 768px) {
    .p-page--categoryMenu .p-page__categoryMenu {
        width: 100%;
        height: 50px;
        margin-top: 16px
    }
}

.p-page--categoryMenu .p-page__main {
    -webkit-box-flex: 1;
    flex: 1;
    overflow-x: hidden
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .p-page--categoryMenu .p-page__main {
        width: 100%
    }
}

@media only screen and (max-width: 768px) {
    .p-page--categoryMenu .p-page__main {
        width: 100%
    }
}


@-webkit-keyframes loadingAnimation {
    0% {
        opacity: 1
    }
    to {
        opacity: .3
    }
}

@keyframes loadingAnimation {
    0% {
        opacity: 1
    }
    to {
        opacity: .3
    }
}

.o-contests {
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-contests {
        width: auto;
        max-width: none;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contests {
        width: auto;
        max-width: none;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 479px) {
    .o-contests {
        width: 100%
    }
}

.o-contests__column {
    margin: 24px auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contests__column {
        margin-right: 16px;
        margin-bottom: 48px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 479px) {
    .o-contests__column {
        margin-right: 16px;
        margin-bottom: 32px;
        margin-left: 16px
    }
}

.o-contests__column--contest .o-contests__item {
    width: calc(50% - 8px)
}

@media only screen and (max-width: 479px) {
    .o-contests__column--contest .o-contests__item {
        width: 100%
    }
}

.o-contests__columnTitle {
    -webkit-box-align: center;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #222
}

.o-contests__columnTitle, .o-contests__itemBox {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.o-contests__itemBox {
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    align-items: stretch
}

.o-contests__itemBox:after {
    width: calc(33.333% - 8px);
    content: ""
}

.o-contests__item {
    width: calc(33.333% - 8px);
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-contests__item {
        width: calc(50% - 8px);
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 479px) {
    .o-contests__item {
        width: 100%;
        margin-bottom: 8px
    }

    .o-contests__item:last-child {
        margin-bottom: 0
    }
}


.o-largeNotice {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 280px;
    padding: 0 40px;
    overflow: hidden;
    background-color: #41c9b4;
    border-radius: 8px
}

@media only screen and (min-width: 769px) {
    .o-largeNotice:hover .o-largeNotice__about {
        background-color: hsla(0, 0%, 100%, .8);
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-largeNotice {
        height: 240px;
        min-height: 0
    }
}

@media only screen and (max-width: 479px) {
    .o-largeNotice {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        height: auto;
        min-height: 0;
        padding: 0 16px 16px
    }

    .o-largeNotice:after {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 200px;
        content: "";
        background: -webkit-linear-gradient(top, rgba(65, 201, 180, 0) 50%, #41c9b4 80%);
        background: linear-gradient(180deg, rgba(65, 201, 180, 0) 50%, #41c9b4 80%)
    }
}

.o-largeNotice__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2
}

.o-largeNotice__main {
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start
}

@media only screen and (max-width: 479px) {
    .o-largeNotice__main {
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-ordinal-group: 3;
        order: 2
    }
}

.o-largeNotice__messageArea {
    display: block;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px #41c9b4;
    font-size: 24px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-largeNotice__messageArea {
        font-size: 18px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-largeNotice__messageArea {
        font-size: 18px
    }
}

@media only screen and (max-width: 479px) {
    .o-largeNotice__messageArea {
        font-size: 18px;
        margin-bottom: 8px
    }
}

.o-largeNotice__image {
    position: absolute;
    right: 10%;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 100% center;
    object-position: 100% center
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-largeNotice__image {
        top: 0;
        right: 0;
        width: 498px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-largeNotice__image {
        top: 0;
        right: 0;
        width: 426px;
        height: 240px
    }
}

@media only screen and (max-width: 479px) {
    .o-largeNotice__image {
        position: static;
        -webkit-box-ordinal-group: 2;
        order: 1;
        height: 160px;
        margin-bottom: -48px;
        -o-object-position: center center;
        object-position: center center
    }
}

.o-largeNotice__about {
    display: -webkit-box;
    display: flex;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #41c9b4;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50px
}

@media only screen and (max-width: 479px) {
    .o-largeNotice__about {
        padding: 4px 16px;
        font-size: 12px
    }
}


.p-contests {
    padding-top: 24px;
    background: #f7f9f9
}

.p-contests__menu {
    width: 100%;
    max-width: 940px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .p-contests__menu {
        width: 620px;
        max-width: none;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .p-contests__menu {
        width: 620px;
        max-width: none;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 479px) {
    .p-contests__menu {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}

.p-contests__notice {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 32px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .p-contests__notice {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 768px) {
    .p-contests__notice {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}


.o-circleIndex {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 32px
}

.o-circleIndex__main {
    width: calc(100% - 312px);
    max-width: calc(100% - 312px);
    margin-right: 32px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-circleIndex__main {
        width: 100%;
        max-width: none;
        margin-right: 0
    }
}

@media only screen and (max-width: 768px) {
    .o-circleIndex__main {
        width: 100%;
        max-width: none;
        margin-right: 0
    }
}

.o-circleIndex__item {
    margin-bottom: 32px
}

.o-circleIndex__aside {
    width: 280px
}

@media only screen and (max-width: 768px) {
    .o-circleIndex__aside {
        width: 100%;
        max-width: none;
        margin-bottom: 32px
    }
}

.o-circleIndex__updatedContents {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e6e6e6
}

.o-circleIndex__updatedContents:empty {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-circleIndex__updatedContents {
        display: none
    }
}

@media only screen and (max-width: 768px) {
    .o-circleIndex__updatedContents {
        display: none
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-circleIndex__option {
        display: none
    }
}

@media only screen and (max-width: 768px) {
    .o-circleIndex__option {
        display: none
    }
}

.o-circleIndex__optionItem + .o-circleIndex__optionItem {
    margin-top: 16px
}

.o-circleIndex__pinnedNoteLink {
    width: 100%
}

.o-circleIndex__pinnedNoteImage {
    width: 100%;
    border-radius: 4px
}

.o-circleIndex__faqLink {
    display: -webkit-box;
    display: flex;
    font-weight: 700;
    color: #787c7b;
    font-size: 12px
}

@media only screen and (min-width: 769px) {
    .o-circleIndex__faqLink {
        -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circleIndex__faqLink:hover {
        color: #222
    }
}

.o-circleIndex__faqIcon {
    margin-right: 4px
}


.t-indexPage {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.t-indexPage--withCategory {
    padding: 0 24px 0 8px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .t-indexPage--withCategory {
        display: block;
        padding: 0;
        margin: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .t-indexPage--withCategory {
        display: block;
        padding: 0;
        margin: 0
    }
}

@media only screen and (max-width: 479px) {
    .t-indexPage--withCategory {
        display: block;
        padding: 0;
        margin: 0
    }
}

@media only screen and (min-width: 769px) {
    .t-indexPage__categoryMenu {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        width: 232px;
        height: 100%;
        max-height: 100vh;
        padding-top: 24px;
        padding-right: 16px;
        padding-bottom: 24px;
        margin-right: 24px;
        overflow-y: auto
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .t-indexPage__categoryMenu {
        position: static;
        top: auto;
        width: 100%;
        height: 50px;
        padding: 16px 0 0;
        overflow: visible;
        background-color: #fff
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .t-indexPage__categoryMenu {
        width: 100%;
        height: 50px;
        padding-top: 16px;
        background-color: #fff
    }
}

@media only screen and (max-width: 479px) {
    .t-indexPage__categoryMenu {
        width: 100%;
        height: 50px;
        padding-top: 16px;
        background-color: #fff
    }
}

.t-indexPage__body {
    -webkit-box-flex: 1;
    flex: 1;
    padding-top: 24px;
    overflow-x: hidden
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .t-indexPage__body {
        width: 100%;
        padding-top: 16px
    }
}

@media only screen and (max-width: 768px) {
    .t-indexPage__body {
        width: 100%;
        padding-top: 16px
    }
}

.t-indexPage__header {
    width: 940px;
    margin-bottom: 32px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .t-indexPage__header {
        width: 100%;
        margin-bottom: 24px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .t-indexPage__header {
        width: 100%;
        margin-bottom: 24px
    }
}

@media only screen and (max-width: 479px) {
    .t-indexPage__header {
        width: 100%;
        margin-bottom: 0
    }
}

.t-indexPage__updatedContents {
    width: 100%;
    max-width: 940px;
    margin-bottom: 16px
}

@media only screen and (min-width: 769px) {
    .t-indexPage__updatedContents {
        display: none
    }
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .t-indexPage__updatedContents {
        padding-left: 16px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .t-indexPage__updatedContents {
        padding-left: 16px
    }
}

.t-indexPage__hero {
    width: 100%
}

.t-indexPage__main {
    width: 100%;
    max-width: 1920px;
    padding: 0 24px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .t-indexPage__main {
        padding: 0;
        overflow: hidden
    }
}

@media only screen and (max-width: 768px) {
    .t-indexPage__main {
        padding: 0;
        overflow: hidden
    }
}

.t-indexPage__onboarding {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 32px
}

.t-indexPage__onboarding:empty {
    margin: 0
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .t-indexPage__onboarding {
        width: auto;
        max-width: none;
        margin: 0 16px 16px
    }
}

@media only screen and (max-width: 768px) {
    .t-indexPage__onboarding {
        width: auto;
        max-width: none;
        margin: 0 16px 16px
    }
}


.p-circleIndex__notice {
    margin: 0 24px 56px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .p-circleIndex__notice {
        margin-right: 16px;
        margin-bottom: 32px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 768px) {
    .p-circleIndex__notice {
        margin-right: 16px;
        margin-bottom: 32px;
        margin-left: 16px
    }
}


.o-basicLayoutContent {
    padding-top: 40px;
    padding-bottom: 40px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .o-basicLayoutContent {
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 768px) {
    .o-basicLayoutContent {
        padding-top: 32px;
        padding-bottom: 32px;
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-basicLayoutContent__inner {
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

.o-basicLayoutContent__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 16px
}

.o-basicLayoutContent__title {
    display: block;
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media only screen and (max-width: 768px) {
    .o-basicLayoutContent__title {
        font-size: 18px
    }
}

.o-basicLayoutContent[data-title-border=bottom] .o-basicLayoutContent__header {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, .05)
}

.o-basicLayoutContent__paginate {
    margin-top: 40px
}


.m-prevNextPaginate__paging {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.m-prevNextPaginate__pagingItem {
    margin: 0 8px
}


.p-hashtag {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 48px 0
}

@media only screen and (max-width: 479px) {
    .p-hashtag {
        -webkit-box-pack: start;
        justify-content: flex-start
    }
}

.p-hashtag__item {
    width: calc(25% - 8px);
    padding: 8px;
    margin-bottom: 8px;
    color: #787c7b;
    font-size: 14px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .p-hashtag__item {
        width: calc(33.33% - 8px)
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .p-hashtag__item {
        width: calc(33.33% - 8px)
    }
}

@media only screen and (max-width: 479px) {
    .p-hashtag__item {
        width: auto;
        margin-bottom: 0
    }
}

.p-hashtag__itemBody {
    display: inline-block
}

.p-hashtag__link {
    display: block;
    padding: 4px 8px;
    word-break: break-all;
    background: #fff;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .p-hashtag__link {
        color: #787c7b;
        -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .p-hashtag__link:hover {
        color: #222
    }
}


.o-timelineHashtag__header {
    width: 580px;
    margin: 40px auto 24px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-timelineHashtag__header {
        width: auto;
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__header {
        width: auto;
        margin-top: 0;
        margin-bottom: 0
    }
}

.o-timelineHashtag__body {
    width: 580px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .o-timelineHashtag__body {
        width: auto;
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 479px) {
    .o-timelineHashtag__body {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-timelineHashtag__item + .o-timelineHashtag__item {
    margin-top: 16px
}

.o-timelineHashtag__loading {
    padding-top: 24px
}


.p-hashtag {
    padding-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .p-hashtag {
        padding-bottom: 0
    }
}


.o-imageNote__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    font-size: 20px
}

.o-imageNote__message {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #787c7b
}

.ml10 { margin-left: 10px; }
.mr05 { margin-right: 5px; }

.o-articleList__item{position:relative;display:-webkit-box;display:flex;padding:16px;border-bottom:1px solid #f2f2f2;}
@media only screen and (max-width:768px){
    .o-articleList__item{padding:16px 0;}
}
@media only screen and (min-width:769px){
    .o-articleList__item:hover{background-color:#f7f9f9;}
}
.o-articleList__link{position:absolute;top:0;right:48px;bottom:0;left:40px;z-index:1;}
.o-articleList__checkbox{z-index:3;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-right:16px;}
.o-articleList__body{flex-basis:auto;-webkit-box-flex:1;flex-grow:1;flex-shrink:1;}
.o-articleList__heading{margin-bottom:3px;letter-spacing:.04em;word-break:break-all;-webkit-font-feature-settings:"palt" 1;font-feature-settings:"palt" 1;}
.o-articleList__headingLink{display:block;margin-right:8px;font-weight:700;line-height:1.5;font-size:16px;}
@media only screen and (max-width:479px){
    .o-articleList__headingLink{font-size:14px;}
}
.o-articleList__description{display:-webkit-box;display:flex;flex-wrap:wrap;}
.o-articleList__descriptionItem{display:-webkit-box;display:flex;color:#787c7b;font-size:12px;}
.o-articleList__descriptionItem:before{margin:0 4px;color:#787c7b;content:"・";}
.o-articleList__descriptionItem:first-child:before{margin:0;content:"";}
@media only screen and (max-width:479px){
    .o-articleList__descriptionItem{font-size:11px;}
}
.o-articleList__edit{z-index:3;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-left:16px;}
@media only screen and (max-width:768px){
    .o-articleList__edit{display:none;}
}
.o-articleList__others{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-left:16px;}
.o-articleList__more{color:#a8abb1;cursor:pointer;}
@media only screen and (min-width:769px){
    .o-articleList__more{-webkit-transition:color .2s cubic-bezier(1,0,0,1);transition:color .2s cubic-bezier(1,0,0,1);}
    .o-articleList__more:hover{color:#787c7b;}
}
.o-articleList__status{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;cursor:pointer;}
.o-articleList__status--draft .o-articleList__statusIcon{border-color:#787c7b;}
.o-articleList__statusIcon{display:inline-block;width:8px;height:8px;margin-right:4px;line-height:1;border:1px solid #2cb696;border-radius:50%;}
.o-articleList__statusLabel{font-size:11px;font-weight:700;color:#787c7b;}

.m-settings-navigation{padding:8px;margin-bottom:16px;background-color:#fff;border:1px solid #f2f2f2;border-radius:4px;}
.m-settings-navigation__title{font-size:24px;padding:40px;text-align:center;}
@media only screen and (max-width:479px){
    .m-settings-navigation__title{padding:24px;}
}
.m-settings-navigation__navList{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;}
@media only screen and (max-width:479px){
    .m-settings-navigation__navList{-webkit-box-pack:start;justify-content:flex-start;}
}
.m-settings-navigation__navItem{font-size:14px;font-weight:700;}
@media only screen and (max-width:479px){
    .m-settings-navigation__navItem{font-size:12px;}
}
.m-settings-navigation__navLink{display:block;padding:8px;color:#787c7b;}
.m-settings-navigation__navLink:hover{color:#222;}
.m-settings-navigation__navLink[data-current=true]{color:#2cb696;}

.o-account{box-sizing:border-box;width:100%;background-color:#fff;border:1px solid #f2f2f2;border-radius:4px;}
.o-account__container{margin:40px;}
@media only screen and (max-width:479px){
    .o-account__container{margin:24px 16px;}
}
.o-account__section{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid #e6e6e6;}
.o-account__section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none;}
.o-account__normalSettings{margin-bottom:24px;}
.o-account__normalSettings:last-child{margin-bottom:0;}
.o-account__title{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:8px;font-size:14px;font-weight:700;}
.o-account__title .o-account__link{color: #2cb696 !important;}
.o-account__link{margin-left:8px;font-weight:400;color:#2cb696;cursor:pointer;}
.o-account__link:hover{text-decoration:underline;}
.o-account__switch{display:-webkit-box;display:flex;flex-wrap:wrap;margin-bottom:16px;}
.o-account__switchDetail{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:start;align-items:flex-start;-webkit-box-pack:center;justify-content:center;width:calc(100% - 100px);padding-right:16px;}
.o-account__label{font-size:14px;}
.o-account__aside{margin-top:8px;}
.o-account__asideHelp{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;color:#787c7b;}
.o-account__asideHelpIcon{margin-right:4px;color:#a8abb1;}
.o-account__description{margin-top:4px;font-size:11px;color:#787c7b;}
/*! CSS Used from: Embedded */
.a-switch{position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;height:24px;}
.a-switch__input{position:absolute;width:0;opacity:0;}
.a-switch__input:focus~.a-switch__core{background-color:#a8abb1;}
.a-switch.is-checked .a-switch__input:focus~.a-switch__core{background-color:#228d74;background-color:var(--customPrimaryDarkenColor);}
.a-switch__core{position:relative;width:40px;height:24px;margin:0;background-color:#ccc;border-radius:24px;outline:0;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out;}
@media only screen and (min-width:769px){
    .a-switch__core:hover{background-color:#a8abb1;}
}
.a-switch__core:after{position:absolute;top:4px;left:4px;width:16px;height:16px;content:"";background-color:#fff;border-radius:100%;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out;}
.a-switch.is-checked .a-switch__core{background-color:#2cb696;background-color:var(--customPrimaryColor);}
.a-switch.is-checked .a-switch__core:after{left:20px;}
.a-switch__core,.a-switch__label{cursor:pointer;}
.a-switch__label{margin-left:8px;font-size:12px;line-height:1;}
/*! CSS Used fontfaces */
@font-face{font-family:"icon";src:url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.5227f28.eot);src:url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.5227f28.eot?#iefix) format("eot"),url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.59ea0d8.woff) format("woff"),url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.c55b483.ttf) format("truetype"),url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/icon.57f1c16.svg#icon) format("svg");font-display:swap;}

.error-message {
    color: red; margin: 6px 0;
}

.o-nicknameForm select {
    margin: 0;
    color: inherit;
    font-size: 1em;
    font-family: inherit;
    display: inherit;
    height: 31px;
    padding: 4px;
    line-height: 28px;

    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    background: #fff;
    border: 1px solid #e1e5e7;
}

.a-icon--close:before {
    content: "\f00e"
}