/*!
* ress.css • v3.0.0
* MIT License
* github.com/filipelinhares/ress
*/
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4
}

*,
:after,
:before {
    background-repeat: no-repeat;
    box-sizing: inherit
}

:after,
:before {
    text-decoration: inherit;
    vertical-align: inherit
}

* {
    padding: 0;
    margin: 0
}

hr {
    overflow: visible;
    height: 0
}

details,
main {
    display: block
}

summary {
    display: list-item
}

small {
    font-size: 80%
}

[hidden] {
    display: none
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

a {
    background-color: initial
}

a:active,
a:hover {
    outline-width: 0
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace
}

pre {
    font-size: 1em
}

b,
strong {
    font-weight: bolder
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

input {
    border-radius: 0
}

[disabled] {
    cursor: default
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    overflow: auto;
    resize: vertical
}

button,
input,
optgroup,
select,
textarea {
    font: inherit
}

optgroup {
    font-weight: 700
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

/*[role=button],*/
[type=button],
[type=reset],
[type=submit],
button {
    cursor: pointer;
    color: inherit
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

button,
input,
select,
textarea {
    background-color: initial;
    border-style: none
}

select {
    -moz-appearance: none;
    -webkit-appearance: none
}

select::-ms-expand {
    display: none
}

select::-ms-value {
    color: currentColor
}

legend {
    border: 0;
    color: inherit;
    display: table;
    white-space: normal;
    max-width: 100%
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    color: inherit;
    font: inherit
}

img {
    border-style: none
}

progress {
    vertical-align: initial
}

@media screen {
    [hidden~=screen] {
        display: inherit
    }

    [hidden~=screen]:not(:active):not(:focus):not(:target) {
        position: absolute !important;
        clip: rect(0 0 0 0) !important
    }
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled] {
    cursor: default
}

html {
    box-sizing: border-box;
    font-size: 100%
}

body {
    height: 100%;
    margin: 0;
    /*font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;*/
    font-weight: 400;
    line-height: 1.5;
    color: #222;
    color: var(--color-black);
    word-wrap: break-word;
    background-color: #fff;
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern";
    font-kerning: normal;
    font-size: 16px
}

[tabindex]:active,
[tabindex]:hover {
    outline: none
}

@media only screen and (min-width: 769px) {

    [data-tooltip]:focus,
    [data-tooltip]:hover {
        position: relative
    }

    [data-tooltip]:focus:after,
    [data-tooltip]:hover:after {
        position: absolute;
        display: block;
        max-width: 200px;
        padding: 4px 8px;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        pointer-events: none;
        content: attr(data-tooltip);
        border: 1px solid #f2f2f2;
        border: 1px solid var(--color-concreteGray);
        border-radius: 4px;
        opacity: 0;
        font-size: 12px;
        -webkit-animation: tooltipAnimation .2s cubic-bezier(1, 0, 0, 1) .2s forwards;
        animation: tooltipAnimation .2s cubic-bezier(1, 0, 0, 1) .2s forwards;
        top: -8px;
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
        color: #6f7372;
        color: var(--color-darkGray);
        background-color: #f7f9f9;
        background-color: var(--color-waterBlue)
    }

    @-webkit-keyframes tooltipAnimation {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes tooltipAnimation {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }
}

input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    display: none
}

button {
    padding: 0
}

a {
    color: inherit;
    text-decoration: none
}

*,
:after,
:before {
    box-sizing: inherit
}

address,
blockquote,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ol,
p,
pre,
table,
ul {
    padding: 0;
    margin: 0
}

address,
cite,
dfn,
em,
i {
    font-style: normal
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    font-size: 100%;
    font-weight: 400;
    color: inherit
}

ol,
ul {
    list-style-type: none
}

table {
    width: 100%
}

th {
    text-align: left
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px)
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    color: #abb2bf;
    background: #282c34
}

.hljs-comment,
.hljs-quote {
    color: #5c6370;
    font-style: italic
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword {
    color: #c678dd
}

.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
    color: #e06c75
}

.hljs-literal {
    color: #56b6c2
}

.hljs-addition,
.hljs-attribute,
.hljs-meta-string,
.hljs-regexp,
.hljs-string {
    color: #98c379
}

.hljs-built_in,
.hljs-class .hljs-title {
    color: #e6c07b
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
    color: #d19a66
}

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
    color: #61aeee
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}

.hljs-link {
    text-decoration: underline
}

:root {
    --color-noteGreen: #2cb696;
    --color-noteLightGreen: #41c9b4;
    --color-noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --color-black: #222;
    --color-gray: #ccc;
    --color-darkGray: #6f7372;
    --color-lightGray: #a8abb1;
    --color-mercuryGray: #e6e6e6;
    --color-concreteGray: #f2f2f2;
    --color-waterBlue: #f7f9f9;
    --color-white: #fff;
    --color-likeRed: #ea3f60;
    --color-dangerRed: #ed4956;
    --color-cautionOrange: #f95
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview {
        --color-noteGreen: #25c1a9;
        --color-noteLightGreen: #41c9b4;
        --color-noteDarkenGreen: #228d74;
        --customPrimaryColor: #2cb696;
        --customPrimaryDarkenColor: #228d74;
        --color-black: #dfdfdf;
        --color-gray: #dfdfdf;
        --color-darkGray: #c8c8c8;
        --color-lightGray: #dfdfdf;
        --color-mercuryGray: #656565;
        --color-concreteGray: #424242;
        --color-waterBlue: #111212;
        --color-white: #202222;
        --color-likeRed: #ff6d91;
        --color-dangerRed: #ff6d91;
        --color-cautionOrange: #f95
    }
}

.modal-open {
    overflow: hidden
}

.modal-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: none
}

.modal-open .modal-wrapper {
    display: block
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(34, 34, 34, .5);
    opacity: 1
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .modal-backdrop {
        background-color: hsla(0, 0%, 100%, .5)
    }
}

.modal-backdrop-enter {
    opacity: 0
}

.modal-backdrop-enter-active {
    transition: all .2s ease-in-out
}

.modal-backdrop-enter-to,
.modal-backdrop-leave {
    opacity: 1
}

.modal-backdrop-leave-active {
    transition: all .2s ease-in-out
}

.modal-backdrop-leave-to {
    opacity: 0
}

.modal-content-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    overflow: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch
}

.modal-content-wrapper:before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: ""
}

.modal-content {
    position: relative;
    display: inline-block;
    text-align: left;
    vertical-align: middle
}

.modal-content-enter {
    opacity: 0;
    transform: scale(.9)
}

.modal-content-enter-active {
    transition: all .2s ease-in-out 30ms
}

.modal-content-enter-to {
    opacity: 1;
    transform: scale(1)
}

.modal-content-leave-active {
    display: none;
    transition: all .2s ease-in-out
}

.modal-content-slide-enter {
    transform: translateY(100%)
}

.modal-content-slide-enter-active {
    transition: all .3s ease-out 30ms
}

.modal-content-slide-enter-to,
.modal-content-slide-leave {
    transform: translate(0)
}

.modal-content-slide-leave-active {
    transition: all .2s ease-in
}

.modal-content-slide-leave-to {
    transform: translateY(100%)
}

.sortable-ghost {
    position: relative
}

.sortable-ghost:before {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    z-index: 3;
    display: block;
    content: "";
    background-color: #fff;
    background-color: var(--color-white);
    border: 1px dashed #a8abb1
}

.nuxt-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 0;
    opacity: 1;
    transition: width .1s, opacity .4s;
    background-color: #29d;
    z-index: 999999
}

.nuxt-progress.nuxt-progress-notransition {
    transition: none
}

.nuxt-progress-failed {
    background-color: red
}

.o-homescreenBanner {
    display: flex;
    align-items: center;
    padding: 8px;
    background-color: var(--color-concreteGray)
}

@media only screen and (min-width: 769px) {
    .o-homescreenBanner {
        display: none
    }
}

.o-homescreenBanner--type_ios .o-homescreenBanner__icon {
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(34, 34, 34, .05)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .o-homescreenBanner--type_ios .o-homescreenBanner__icon {
        box-shadow: 0 0 10px hsla(0, 0%, 86.7%, .05)
    }
}

@media only screen and (max-width: 480px) {
    .o-homescreenBanner--type_ios .o-homescreenBanner__icon {
        width: 40px;
        height: 40px;
        border-radius: 8px
    }
}

.o-homescreenBanner__icon {
    width: 56px;
    height: 56px;
    margin-right: 8px;
    margin-left: 8px;
    overflow: hidden
}

.o-homescreenBanner__app {
    width: 100%;
    height: 100%
}

.o-homescreenBanner__caption {
    flex-grow: 2;
    font-size: 14px;
    font-weight: 700
}

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

.o-homescreenBanner__button {
    padding: 8px
}

.o-homescreenBanner__close {
    color: var(--color-lightGray)
}

.o-navBar {
    position: relative;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-mercuryGray);
    box-shadow: 0 0 1px rgba(34, 34, 34, .08);
    transition: transform .3s ease
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .o-navBar {
        box-shadow: 0 0 1px hsla(0, 0%, 86.7%, .08)
    }
}

@media only screen and (max-width: 768px) {
    .o-navBar {
        box-shadow: none
    }
}

.o-navBar.active {
    z-index: 11
}

@media only screen and (max-width: 480px) {
    .o-navBar.active {
        position: fixed;
        top: 0;
        width: 100%
    }

    .o-navBar.active.is-search {
        position: relative
    }
}

.o-navBar.is-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 11;
    transition: transform .3s ease;
    transform: translate(0)
}

@media print {
    .o-navBar.is-sticky {
        display: none
    }
}

.o-navBar.is-stickyActive1 {
    transform: translateY(-100%)
}

.o-navBar.is-stickyActive1.is-search {
    position: -webkit-sticky;
    position: sticky
}

.o-navBar.is-stickyActive2 {
    transform: translate(0)
}

.o-navBar.is-stickyActive2.is-search {
    position: -webkit-sticky;
    position: sticky
}

.o-navBar.is-stickyHide {
    transform: translateY(-200%)
}

.o-navBar.is-stickyHide.is-search {
    position: -webkit-sticky;
    position: sticky
}

.o-navBar__creator {
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

.o-navBar__creator.active {
    max-height: 100px
}

@media only screen and (max-width: 480px) {
    .o-navBar__creator {
        top: 48px
    }
}

.o-navbarTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    min-height: 64px;
    margin-right: 24px;
    margin-left: 24px
}

@media only screen and (min-width: 481px)and (max-width:768px) {
    .o-navbarTop {
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (max-width: 480px) {
    .o-navbarTop {
        width: calc(100% - 32px);
        min-height: 48px;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 360px) {
    .o-navbarTop {
        width: calc(100% - 16px);
        min-height: 48px;
        margin-right: 8px;
        margin-left: 8px
    }
}

.o-navbarTop__nav {
    display: flex;
    align-items: center
}

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

.o-navbarTop__search--fieldVisible {
    width: 240px
}

.o-navbarTop__search--fieldVisibleSp {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 4px;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-mercuryGray)
}

.o-navbarTop__navItem {
    display: flex;
    align-items: center;
    margin-left: 16px
}

@media only screen and (max-width: 360px) {
    .o-navbarTop__navItem {
        margin-left: 8px
    }
}

@media only screen and (max-width: 480px) {

    .o-navbarTop__navItem--entry,
    .o-navbarTop__navItem--login {
        margin-left: 0
    }
}

.o-navbarTop__navItem--signupLink {
    font-size: 12px;
    color: #6f7372
}

.o-navbarTop__navItem--home {
    margin-right: -4px;
    color: var(--color-lightGray)
}

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

    .o-navbarTop__navItem--home:hover {
        color: var(--color-darkGray)
    }
}

.m-siteLogo__link {
    display: flex;
    align-items: center
}

.m-siteLogo__image {
    max-width: 200px;
    max-height: 40px;
    vertical-align: top
}

@media only screen and (max-width: 480px) {
    .m-siteLogo__image {
        max-width: 120px;
        max-height: 30px
    }
}

@media only screen and (max-width: 360px) {
    .m-siteLogo__image {
        max-width: 90px;
        max-height: 30px
    }
}

.a-button {
    display: inline-block;
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--color-darkGray);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    touch-action: manipulation;
    cursor: pointer;
    background: var(--color-white);
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none
}

.a-button,
.a-button .a-button__inner {
    align-items: center;
    justify-content: center
}

.a-button .a-button__inner {
    font-size: 14px;
    display: flex
}

.a-button[data-type=none] {
    color: var(--color-darkGray)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=none] {
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=none]:hover {
        color: var(--color-black)
    }
}

.a-button[data-type=disabled] {
    color: hsla(0, 0%, 100%, .3);
    background-color: var(--color-gray)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-button[data-type=disabled] {
        color: hsla(0, 0%, 100%, .3)
    }
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=disabled] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=disabled]:hover {
        background-color: #b3b3b3
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=disabled]:hover {
        background-color: #e6e6e6
    }
}

.a-button[data-type=basic] {
    color: var(--color-black);
    border: 1px solid var(--color-mercuryGray)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=basic] {
        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: var(--color-white);
    background-color: var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=primary] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=primary]:hover {
        background-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=secondary] {
    color: var(--customPrimaryColor);
    border: 1px solid var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=secondary] {
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=secondary]:hover {
        color: var(--customPrimaryColor);
        border-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=danger] {
    color: var(--color-white);
    background-color: var(--color-dangerRed)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=danger] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=danger]:hover {
        background-color: #e81b2b
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=danger]:hover {
        background-color: #f27781
    }
}

.a-button[data-type=twitter] {
    color: var(--color-white);
    background-color: #55acee
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=twitter] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=twitter]:hover {
        background-color: #2795e9
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=twitter]:hover {
        background-color: #83c3f3
    }
}

.a-button[data-type=facebook] {
    color: var(--color-white);
    background-color: #1877f2
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=facebook] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=facebook]:hover {
        background-color: #0b5fcc
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=facebook]:hover {
        background-color: #4893f5
    }
}

.a-button[data-size=small] {
    min-height: 32px
}

@media only screen and (max-width: 480px) {
    .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: var(--color-gray);
    border: none;
    transition: none
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-button:disabled {
        color: hsla(0, 0%, 100%, .5)
    }
}

@media only screen and (min-width: 769px) {
    .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5);
        background-color: var(--color-gray);
        border: none
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5)
    }
}

.a-button--icon {
    padding-right: 0;
    padding-left: 0
}

.a-button--icon .a-button__icon {
    margin-right: 0
}

.a-link {
    cursor: pointer
}

.a-link:active,
.a-link:hover {
    outline: none
}

.a-link.disabled {
    cursor: default
}

.a-link.a-link--underline {
    text-decoration: underline
}

.a-image {
    background-color: var(--color-white)
}

.a-image.a-image--bg-transparent {
    background-color: initial
}

.o-searchWindow {
    width: 280px
}

@media only screen and (max-width: 480px) {
    .o-searchWindow {
        width: auto
    }
}

.o-searchWindow__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 16px 16px 8px;
    cursor: default;
    border-top: 1px solid var(--color-concreteGray)
}

.o-searchWindow__header:first-child {
    border-top: none
}

.o-searchWindow__deleteAll {
    flex: 0 0 auto;
    color: var(--customPrimaryColor);
    cursor: pointer;
    font-size: 12px
}

.o-searchWindow__title {
    font-size: 12px;
    font-weight: 700;
    cursor: default
}

.o-searchWindow__body {
    width: 100%
}

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

.o-searchWindow__item {
    display: flex;
    align-items: center;
    width: 100%
}

.o-searchWindow__item:last-child {
    border-radius: 0 0 4px 4px
}

@media only screen and (min-width: 769px) {
    .o-searchWindow__item:hover {
        background-color: var(--color-waterBlue)
    }
}

.o-searchWindow__link {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    padding: 12px 16px;
    overflow: hidden;
    color: var(--color-darkGray);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px
}

@media only screen and (min-width: 769px) {
    .o-searchWindow__link:hover {
        color: var(--color-black)
    }
}

.o-searchWindow__delete {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--color-lightGray);
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .o-searchWindow__delete:hover {
        color: var(--color-darkGray)
    }
}

.m-iconWithtext {
    display: flex;
    align-items: center
}

.m-iconWithtext__form {
    position: relative;
    width: 100%
}

.m-iconWithtext__fieldInput {
    padding-right: 40px !important
}

.m-iconWithtext__submit {
    position: absolute;
    top: 50%;
    right: 8px;
    color: var(--color-lightGray);
    cursor: pointer;
    transform: translateY(-50%)
}

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

    .m-iconWithtext__submit:hover {
        color: var(--color-darkGray)
    }
}

.m-iconWithtext__close {
    padding: 8px;
    color: var(--color-lightGray);
    cursor: pointer
}

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

    .m-iconWithtext__close:hover {
        color: var(--color-darkGray)
    }
}

.m-iconWithtext__button {
    display: flex;
    align-items: center;
    padding: 8px;
    color: var(--color-lightGray);
    cursor: pointer
}

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

    .m-iconWithtext__button:hover {
        color: var(--color-darkGray)
    }
}

.a-input {
    display: inline-block;
    min-height: 40px;
    padding: 4px 8px;
    line-height: 1.5;
    color: var(--color-black);
    vertical-align: top;
    background: var(--color-white);
    border: 1px solid var(--color-mercuryGray);
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px
}

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

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

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

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-input::placeholder {
        color: hsla(0, 0%, 100%, .3)
    }
}

@media only screen and (min-width: 769px) {
    .a-input:not(:disabled) {
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-input:not(:disabled):hover {
        border: 1px solid #a8abb1
    }
}

.a-input:disabled {
    color: var(--color-white);
    cursor: not-allowed;
    background-color: var(--color-mercuryGray)
}

.a-input--size_small {
    min-height: 32px
}

.a-input--size_small .a-input__label {
    font-size: 12px
}

.a-input--size_large {
    min-height: 48px
}

.a-input--size_large .a-input__label {
    font-size: 16px
}

.a-input--width_fit {
    width: 100%
}

.a-input--width_4length {
    width: 80px
}

.a-input--width_8length {
    width: 160px
}

@font-face {
    font-family: "icon";
    src: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.faf08d4.eot);
    src: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.faf08d4.eot?#iefix) format("eot"), url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.df4c727.woff) format("woff"), url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.2a558d9.ttf) format("truetype"), url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/icon.86b66d0.svg#icon) format("svg");
    font-display: swap
}

button.a-icon {
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    button.a-icon {
        transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    button.a-icon:hover {
        color: var(--color-darkGray)
    }
}

.a-icon {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    font-family: "icon";
    font-size: 24px;
    line-height: 1;
    color: inherit;
    vertical-align: top;
    touch-action: manipulation;
    background-color: initial;
    border: none;
    border-radius: 24px;
    -webkit-appearance: none;
    appearance: none
}

.a-icon:active,
.a-icon:hover {
    outline: none
}

.a-icon:before {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "icon";
    font-style: normal;
    font-weight: 400;
    font-feature-settings: normal;
    font-variant: normal;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    vertical-align: middle
}

.a-icon--size_small {
    width: 16px;
    height: 16px;
    font-size: 16px;
    border-radius: 16px
}

.a-icon--size_large {
    width: 32px;
    height: 32px;
    font-size: 32px;
    border-radius: 32px
}

.a-icon--action:before {
    content: ""
}

.a-icon--add:before {
    content: ""
}

.a-icon--amazon:before {
    content: ""
}

.a-icon--animation:before {
    content: ""
}

.a-icon--announceFill:before {
    content: ""
}

.a-icon--arrowback:before {
    content: ""
}

.a-icon--arrowdropdown:before {
    content: ""
}

.a-icon--arrowforward:before {
    content: ""
}

.a-icon--arrowright:before {
    content: ""
}

.a-icon--artFill:before {
    content: ""
}

.a-icon--attachFile:before {
    content: ""
}

.a-icon--badge:before {
    content: ""
}

.a-icon--barChart:before {
    content: ""
}

.a-icon--baseballFill:before {
    content: ""
}

.a-icon--beautyFill:before {
    content: ""
}

.a-icon--businessFill:before {
    content: ""
}

.a-icon--camera:before {
    content: ""
}

.a-icon--cameraPlus:before {
    content: ""
}

.a-icon--careerFill:before {
    content: ""
}

.a-icon--check:before {
    content: ""
}

.a-icon--checkCircle:before {
    content: ""
}

.a-icon--childraisingFill:before {
    content: ""
}

.a-icon--circle:before {
    content: ""
}

.a-icon--close:before {
    content: ""
}

.a-icon--code:before {
    content: ""
}

.a-icon--columnFill:before {
    content: ""
}

.a-icon--comment:before {
    content: ""
}

.a-icon--commentFill:before {
    content: ""
}

.a-icon--contest:before {
    content: ""
}

.a-icon--copy:before {
    content: ""
}

.a-icon--create:before {
    content: ""
}

.a-icon--creationFill:before {
    content: ""
}

.a-icon--designFill:before {
    content: ""
}

.a-icon--download:before {
    content: ""
}

.a-icon--drag_handle:before {
    content: ""
}

.a-icon--editorBold:before {
    content: ""
}

.a-icon--editorCenter:before {
    content: ""
}

.a-icon--editorCode:before {
    content: ""
}

.a-icon--editorEmbed:before {
    content: ""
}

.a-icon--editorFileUpload:before {
    content: ""
}

.a-icon--editorImage:before {
    content: ""
}

.a-icon--editorImageAdd:before {
    content: ""
}

.a-icon--editorLarge:before {
    content: ""
}

.a-icon--editorLink:before {
    content: ""
}

.a-icon--editorMinphoto:before {
    content: ""
}

.a-icon--editorPc:before {
    content: ""
}

.a-icon--editorQuotation:before {
    content: ""
}

.a-icon--editorSmall:before {
    content: ""
}

.a-icon--editorTitle:before {
    content: ""
}

.a-icon--editorTrash:before {
    content: ""
}

.a-icon--educationFill:before {
    content: ""
}

.a-icon--entertainmentFill:before {
    content: ""
}

.a-icon--eventFill:before {
    content: ""
}

.a-icon--expandless:before {
    content: ""
}

.a-icon--expandmore:before {
    content: ""
}

.a-icon--eye:before {
    content: ""
}

.a-icon--facebookFill:before {
    content: ""
}

.a-icon--fashionFill:before {
    content: ""
}

.a-icon--fileDownload:before {
    content: ""
}

.a-icon--firstpage:before {
    content: ""
}

.a-icon--flagFill:before {
    content: ""
}

.a-icon--follow:before {
    content: ""
}

.a-icon--following:before {
    content: ""
}

.a-icon--gadgetFill:before {
    content: ""
}

.a-icon--gameFill:before {
    content: ""
}

.a-icon--gift:before {
    content: ""
}

.a-icon--gourmetFill:before {
    content: ""
}

.a-icon--hatenaFill:before {
    content: ""
}

.a-icon--healthFill:before {
    content: ""
}

.a-icon--heart:before {
    content: ""
}

.a-icon--heartFill:before {
    content: ""
}

.a-icon--help:before {
    content: ""
}

.a-icon--home:before {
    content: ""
}

.a-icon--humanitiesFill:before {
    content: ""
}

.a-icon--image:before {
    content: ""
}

.a-icon--info:before {
    content: ""
}

.a-icon--instagramFill:before {
    content: ""
}

.a-icon--itFill:before {
    content: ""
}

.a-icon--keyboard:before {
    content: ""
}

.a-icon--lastpage:before {
    content: ""
}

.a-icon--lifestyleFill:before {
    content: ""
}

.a-icon--lightbulb:before {
    content: ""
}

.a-icon--lineFill:before {
    content: ""
}

.a-icon--linkFill:before {
    content: ""
}

.a-icon--livelihoodFill:before {
    content: ""
}

.a-icon--localFill:before {
    content: ""
}

.a-icon--lock:before {
    content: ""
}

.a-icon--loveFill:before {
    content: ""
}

.a-icon--magazine:before {
    content: ""
}

.a-icon--magazineAdd:before {
    content: ""
}

.a-icon--magazineGrid:before {
    content: ""
}

.a-icon--magazineList:before {
    content: ""
}

.a-icon--magazineStream:before {
    content: ""
}

.a-icon--mail:before {
    content: ""
}

.a-icon--mangaFill:before {
    content: ""
}

.a-icon--more:before {
    content: ""
}

.a-icon--movieFill:before {
    content: ""
}

.a-icon--musicFill:before {
    content: ""
}

.a-icon--navbefore:before {
    content: ""
}

.a-icon--navnext:before {
    content: ""
}

.a-icon--note:before {
    content: ""
}

.a-icon--noteAdd:before {
    content: ""
}

.a-icon--notification:before {
    content: ""
}

.a-icon--novelFill:before {
    content: ""
}

.a-icon--pause:before {
    content: ""
}

.a-icon--person:before {
    content: ""
}

.a-icon--petFill:before {
    content: ""
}

.a-icon--photoFill:before {
    content: ""
}

.a-icon--pin:before {
    content: ""
}

.a-icon--place:before {
    content: ""
}

.a-icon--playFill:before {
    content: ""
}

.a-icon--postNote:before {
    content: ""
}

.a-icon--public:before {
    content: ""
}

.a-icon--radioFill:before {
    content: ""
}

.a-icon--readingFill:before {
    content: ""
}

.a-icon--return:before {
    content: ""
}

.a-icon--rss:before {
    content: ""
}

.a-icon--satisfied:before {
    content: ""
}

.a-icon--scienceFill:before {
    content: ""
}

.a-icon--search:before {
    content: ""
}

.a-icon--setting:before {
    content: ""
}

.a-icon--share:before {
    content: ""
}

.a-icon--shoppingFill:before {
    content: ""
}

.a-icon--shoppingcart:before {
    content: ""
}

.a-icon--shoppingcartFill:before {
    content: ""
}

.a-icon--soccerFill:before {
    content: ""
}

.a-icon--societyFill:before {
    content: ""
}

.a-icon--sort:before {
    content: ""
}

.a-icon--sportsFill:before {
    content: ""
}

.a-icon--stageFill:before {
    content: ""
}

.a-icon--store:before {
    content: ""
}

.a-icon--tag:before {
    content: ""
}

.a-icon--technologyFill:before {
    content: ""
}

.a-icon--time:before {
    content: ""
}

.a-icon--topic:before {
    content: ""
}

.a-icon--travelFill:before {
    content: ""
}

.a-icon--twitterFill:before {
    content: ""
}

.a-icon--undo:before {
    content: ""
}

.a-icon--view:before {
    content: ""
}

.a-icon--viewOff:before {
    content: ""
}

.a-icon--warning:before {
    content: ""
}

.a-icon--yen:before {
    content: ""
}

.a-icon--yenFill:before {
    content: ""
}

.a-icon--youtubeFill:before {
    content: ""
}

.a-button {
    display: inline-block;
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--color-darkGray);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    touch-action: manipulation;
    cursor: pointer;
    background: var(--color-white);
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none
}

.a-button,
.a-button .a-button__inner {
    align-items: center;
    justify-content: center
}

.a-button .a-button__inner {
    font-size: 14px;
    display: flex
}

.a-button[data-type=none] {
    color: var(--color-darkGray)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=none] {
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=none]:hover {
        color: var(--color-black)
    }
}

.a-button[data-type=disabled] {
    color: hsla(0, 0%, 100%, .3);
    background-color: var(--color-gray)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-button[data-type=disabled] {
        color: hsla(0, 0%, 100%, .3)
    }
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=disabled] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=disabled]:hover {
        background-color: #b3b3b3
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=disabled]:hover {
        background-color: #e6e6e6
    }
}

.a-button[data-type=basic] {
    color: var(--color-black);
    border: 1px solid var(--color-mercuryGray)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=basic] {
        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: var(--color-white);
    background-color: var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=primary] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=primary]:hover {
        background-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=secondary] {
    color: var(--customPrimaryColor);
    border: 1px solid var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=secondary] {
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=secondary]:hover {
        color: var(--customPrimaryColor);
        border-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=danger] {
    color: var(--color-white);
    background-color: var(--color-dangerRed)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=danger] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=danger]:hover {
        background-color: #e81b2b
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=danger]:hover {
        background-color: #f27781
    }
}

.a-button[data-type=twitter] {
    color: var(--color-white);
    background-color: #55acee
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=twitter] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=twitter]:hover {
        background-color: #2795e9
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=twitter]:hover {
        background-color: #83c3f3
    }
}

.a-button[data-type=facebook] {
    color: var(--color-white);
    background-color: #1877f2
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=facebook] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=facebook]:hover {
        background-color: #0b5fcc
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=facebook]:hover {
        background-color: #4893f5
    }
}

.a-button[data-size=small] {
    min-height: 32px
}

@media only screen and (max-width: 480px) {
    .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: var(--color-gray);
    border: none;
    transition: none
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-button:disabled {
        color: hsla(0, 0%, 100%, .5)
    }
}

@media only screen and (min-width: 769px) {
    .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5);
        background-color: var(--color-gray);
        border: none
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5)
    }
}

.a-button--icon {
    padding-right: 0;
    padding-left: 0
}

.a-button--icon .a-button__icon {
    margin-right: 0
}

.a-link {
    cursor: pointer
}

.a-link:active,
.a-link:hover {
    outline: none
}

.a-link.disabled {
    cursor: default
}

.a-link.a-link--underline {
    text-decoration: underline
}

.o-navbarMenu__notification {
    padding: 2px 4px;
    margin-left: 4px;
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-darkGray);
    border-radius: 4px;
    font-size: 12px
}

.o-navbarMenu__menu {
    display: flex;
    justify-content: flex-start;
    margin-right: 24px;
    margin-left: 8px
}

@media only screen and (min-width: 769px)and (max-width:940px) {
    .o-navbarMenu__menu {
        display: flex;
        width: auto;
        padding-left: 8px;
        margin: 0 auto;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch
    }

    .o-navbarMenu__menu::-webkit-scrollbar {
        display: none
    }

    .o-navbarMenu__menu .a-link {
        flex: 0 0 auto
    }
}

@media only screen and (max-width: 768px) {
    .o-navbarMenu__menu {
        display: flex;
        width: auto;
        padding-left: 8px;
        margin: 0 auto;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch
    }

    .o-navbarMenu__menu::-webkit-scrollbar {
        display: none
    }
}

.o-navbarNoteDetail__body {
    width: 100%;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-concreteGray);
    border-bottom: 1px solid var(--color-mercuryGray)
}

.o-navbarNoteDetail__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 620px;
    min-height: 56px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (min-width: 769px)and (max-width:940px) {
    .o-navbarNoteDetail__inner {
        width: auto;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (min-width: 481px)and (max-width:768px) {
    .o-navbarNoteDetail__inner {
        width: auto;
        margin-right: 24px;
        margin-left: 24px
    }
}

@media only screen and (max-width: 480px) {
    .o-navbarNoteDetail__inner {
        width: calc(100% - 32px);
        min-height: 48px;
        margin-right: 16px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 360px) {
    .o-navbarNoteDetail__inner {
        width: calc(100% - 16px);
        min-height: 48px;
        margin-right: 8px;
        margin-left: 8px
    }
}

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

.o-navbarNoteDetail__avatar {
    flex: 0 0 auto;
    margin-right: 8px
}

.o-navbarNoteDetail__info {
    flex: 1;
    overflow: hidden;
    line-height: 1.5;
    font-size: 12px
}

.o-navbarNoteDetail__ArticleTitle {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    letter-spacing: .04em;
    white-space: nowrap;
    font-feature-settings: "palt"1
}

.o-navbarNoteDetail__name {
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap
}

.o-navbarNoteDetail__user {
    display: flex
}

.o-navbarNoteDetail__date {
    color: var(--color-lightGray)
}

.o-navbarNoteDetail__dateSlot:after {
    content: " "
}

.o-navbarNoteDetail__action {
    font-size: 12px;
    z-index: 1;
    line-height: 1.5;
    color: var(--color-lightGray);
    white-space: nowrap
}

.o-navbarNoteDetail__actionFollow {
    text-decoration: underline
}

.o-navbarNoteDetail__actionFollow--following {
    text-decoration: none
}

.o-navbarNoteDetail__status {
    display: flex;
    align-items: center
}

.o-navbarNoteDetail__label,
.o-navbarNoteDetail__price {
    font-weight: 700;
    color: var(--customPrimaryColor);
    font-size: 14px
}

.o-navbarNoteDetail__more {
    margin-left: 16px;
    color: var(--color-lightGray);
    cursor: pointer
}

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

    .o-navbarNoteDetail__more:hover {
        color: var(--color-darkGray)
    }
}

.o-navbarNoteDetail__categorieLink {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700
}

.o-navbarNoteDetail__categorieLinkIcon {
    padding: 4px;
    margin-right: 8px;
    border: 1px solid var(--color-mercuryGray);
    border-radius: 50%
}

.m-avatar {
    display: block;
    overflow: hidden;
    border-radius: 4px
}

.m-avatar:active,
.m-avatar:hover {
    outline: none
}

.m-avatar__image {
    width: 100%;
    max-width: 100%;
    height: auto
}

.m-avatar--xsmall {
    width: 16px;
    height: 16px;
    border-radius: 16px
}

.m-avatar--small {
    width: 24px;
    height: 24px;
    border-radius: 24px
}

.m-avatar--medium {
    width: 32px;
    height: 32px;
    border-radius: 32px
}

.m-avatar--large {
    width: 56px;
    height: 56px;
    border-radius: 56px
}

.m-avatar--xlarge {
    width: 80px;
    height: 80px;
    border-radius: 80px
}

.m-avatar--xxlarge {
    width: 104px;
    height: 104px;
    border-radius: 104px
}

.m-avatar--fit {
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.activationMessage {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    line-height: 1.5em;
    color: #41c9b4;
    text-align: center;
    background-color: #f0fbf9;
    border-bottom: 1px solid var(--color-mercuryGray);
    box-shadow: 0 0 1px rgba(34, 34, 34, .08)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .activationMessage {
        box-shadow: 0 0 1px hsla(0, 0%, 86.7%, .08)
    }
}

.activationMessage a:hover {
    text-decoration: underline
}

@media only screen and (max-width: 480px) {
    .activationMessage {
        padding: 8px;
        font-size: 12px;
        line-height: 1.4
    }
}

.activationMessage .beforeResend .resend {
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer
}

.activationMessage .beforeResend .resend:hover {
    text-decoration: none
}

.p-creator--background {
    background-color: var(--color-waterBlue)
}

.t-creator {
    position: relative
}

.t-creator--background {
    background-color: var(--color-waterBlue)
}

@media only screen and (min-width: 769px)and (max-width:940px) {
    .t-creator--background {
        background-color: var(--color-white)
    }
}

@media only screen and (min-width: 481px)and (max-width:768px) {
    .t-creator--background {
        background-color: var(--color-white)
    }
}

.loading {
    display: flex;
    align-items: center;
    width: 620px;
    min-height: 60vh;
    padding: 48px 0;
    margin: 0 auto
}

@media only screen and (max-width: 768px) {
    .loading {
        width: auto
    }
}

.o-cautionBar__title {
    font-weight: 700
}

.o-cautionBar__onlyVisibleToYou {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px
}

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

@media only screen and (min-width: 1280px) {
    .p-article__articleWrapper[data-has-aside=true] {
        display: grid;
        grid-template-columns: 1fr 620px 1fr;
        align-items: flex-start
    }

    .p-article__articleWrapper[data-has-aside=true] .p-article__body {
        grid-column: 1/3;
        margin-right: 0
    }
}

.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__rightColumn {
    position: -webkit-sticky;
    position: sticky;
    top: calc(100vh - 250px);
    box-sizing: border-box;
    display: none;
    grid-column: 3;
    width: 100%;
    padding: 0 16px 16px 64px;
    overflow: hidden
}

@media only screen and (min-width: 1280px) {
    .p-article__rightColumn {
        display: block
    }
}

.p-article__rightColumn[data-has-eyecatch=true] {
    margin-top: 550px
}

.p-article__rightColumn[data-has-like=true][data-has-eyecatch=true] {
    margin-top: 576px
}

.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: 480px) {
    .p-article__content {
        margin-bottom: 32px
    }
}

.p-article__paywall {
    margin-top: 48px;
    margin-bottom: 48px
}

@media only screen and (max-width: 480px) {
    .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: 481px)and (max-width:768px) {
    .p-article__contest {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 480px) {
    .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: 481px)and (max-width:768px) {
    .p-article__hashtags {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 480px) {
    .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: 480px) {
    .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: 480px) {
    .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: 480px) {
    .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: 480px) {
    .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 var(--color-concreteGray)
}

.p-article__related:empty {
    display: none
}

@media only screen and (max-width: 480px) {
    .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 var(--color-concreteGray);
    border-bottom: 1px solid var(--color-concreteGray)
}

.p-article__sibling:empty {
    display: none
}

@media only screen and (max-width: 480px) {
    .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: 480px) {
    .p-article__magazineHaving {
        margin-top: 24px;
        margin-bottom: 24px
    }
}

@media print {
    .p-article__magazineHaving {
        display: none
    }
}

.p-article__comment {
    border-top: 1px solid var(--color-mercuryGray);
    border-bottom: 1px solid var(--color-mercuryGray)
}

@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
}

@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-noteDetailStatusBar__title {
    font-weight: 700
}

.o-noteDetailStatusBar__emphasized {
    padding: 4px 8px;
    margin: 0 4px;
    font-weight: 700;
    color: var(--color-white);
    word-break: break-all;
    border-radius: 4px;
    background-color: rgba(34, 34, 34, .1);
    font-size: 12px
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .o-noteDetailStatusBar__emphasized {
        background-color: hsla(0, 0%, 100%, .1)
    }
}

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

@media only screen and (min-width: 481px)and (max-width:768px) {
    .o-articleTopNotices__message:first-child {
        margin: 0
    }
}

@media only screen and (max-width: 480px) {
    .o-articleTopNotices__message {
        display: block
    }

    .o-articleTopNotices__message:first-child {
        margin: 0
    }
}

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

@media only screen and (min-width: 481px)and (max-width:768px) {
    .o-articleTopNotices__onboarding {
        margin: 16px
    }
}

@media only screen and (max-width: 480px) {
    .o-articleTopNotices__onboarding {
        margin: 16px
    }
}

.o-articleTopNotices__spoilerImage {
    width: 70px
}

@media only screen and (max-width: 480px) {
    .o-articleTopNotices__spoilerImage {
        width: 56px
    }
}

.a-button {
    display: inline-block;
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--color-darkGray);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    touch-action: manipulation;
    cursor: pointer;
    background: var(--color-white);
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none
}

.a-button,
.a-button .a-button__inner {
    align-items: center;
    justify-content: center
}

.a-button .a-button__inner {
    font-size: 14px;
    display: flex
}

.a-button[data-type=none] {
    color: var(--color-darkGray)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=none] {
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=none]:hover {
        color: var(--color-black)
    }
}

.a-button[data-type=disabled] {
    color: hsla(0, 0%, 100%, .3);
    background-color: var(--color-gray)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-button[data-type=disabled] {
        color: hsla(0, 0%, 100%, .3)
    }
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=disabled] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=disabled]:hover {
        background-color: #b3b3b3
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=disabled]:hover {
        background-color: #e6e6e6
    }
}

.a-button[data-type=basic] {
    color: var(--color-black);
    border: 1px solid var(--color-mercuryGray)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=basic] {
        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: var(--color-white);
    background-color: var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=primary] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=primary]:hover {
        background-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=secondary] {
    color: var(--customPrimaryColor);
    border: 1px solid var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=secondary] {
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=secondary]:hover {
        color: var(--customPrimaryColor);
        border-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=danger] {
    color: var(--color-white);
    background-color: var(--color-dangerRed)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=danger] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=danger]:hover {
        background-color: #e81b2b
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=danger]:hover {
        background-color: #f27781
    }
}

.a-button[data-type=twitter] {
    color: var(--color-white);
    background-color: #55acee
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=twitter] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=twitter]:hover {
        background-color: #2795e9
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=twitter]:hover {
        background-color: #83c3f3
    }
}

.a-button[data-type=facebook] {
    color: var(--color-white);
    background-color: #1877f2
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=facebook] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=facebook]:hover {
        background-color: #0b5fcc
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=facebook]:hover {
        background-color: #4893f5
    }
}

.a-button[data-size=small] {
    min-height: 32px
}

@media only screen and (max-width: 480px) {
    .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: var(--color-gray);
    border: none;
    transition: none
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-button:disabled {
        color: hsla(0, 0%, 100%, .5)
    }
}

@media only screen and (min-width: 769px) {
    .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5);
        background-color: var(--color-gray);
        border: none
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5)
    }
}

.a-button--icon {
    padding-right: 0;
    padding-left: 0
}

.a-button--icon .a-button__icon {
    margin-right: 0
}

.c-button {
    visibility: hidden
}

.note-common-styles__textnote-body {
    /*font-family: Hiragino Mincho ProN,ヒラギノ明朝 Pro W6,Hiragino Mincho Pro,HGS明朝E,Yu Mincho,YuMincho,ＭＳ Ｐ明朝,serif;*/
    color: var(--color-black);
    pointer-events: auto;
    overflow: hidden
}

[class$=device_windows] .note-common-styles__textnote-body,
[class$=device_windows] .note-common-styles__textnote-body .note-editor-placeholder:after {
    font-family: YakuHanJPs, Segoe UI, Arial, メイリオ, Meiryo, sans-serif
}

[class$=font_sansserif] .note-common-styles__textnote-body,
[class$=font_sansserif] .note-common-styles__textnote-body .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
}

@media only screen and (min-width: 481px)and (max-width:768px) {
    .note-common-styles__textnote-body {
        padding-right: 40px;
        padding-left: 40px
    }
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body {
        padding-right: 16px;
        padding-left: 16px
    }
}

.note-common-styles__textnote-body b,
.note-common-styles__textnote-body strong {
    font-weight: 700
}

.note-common-styles__textnote-body pre,
.note-common-styles__textnote-body pre[data-name=preCode] {
    margin-top: 36px;
    margin-bottom: 36px;
    font-family: SFMono-Regular, Consolas, Menlo, Courier, monospace;
    line-height: 18px;
    color: var(--color-white);
    white-space: pre-wrap;
    background-color: var(--color-black);
    font-size: 12px
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body pre,
    .note-common-styles__textnote-body pre[data-name=preCode] {
        margin: 32px -16px
    }
}

.note-common-styles__textnote-body code,
.note-common-styles__textnote-body code[data-name=code] {
    padding: 36px;
    display: block;
    overflow-x: auto;
    font-family: SFMono-Regular, Consolas, Menlo, Courier, monospace;
    line-height: 18px;
    color: var(--color-white);
    background-color: initial;
    word-wrap: normal;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    font-size: 12px
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body code,
    .note-common-styles__textnote-body code[data-name=code] {
        padding: 24px
    }

    .note-common-styles__textnote-body code::-webkit-scrollbar,
    .note-common-styles__textnote-body code[data-name=code]::-webkit-scrollbar {
        display: none
    }
}

.note-common-styles__textnote-body>ol,
.note-common-styles__textnote-body>ul,
.note-common-styles__textnote-body blockquote,
.note-common-styles__textnote-body figure,
.note-common-styles__textnote-body h2,
.note-common-styles__textnote-body h3,
.note-common-styles__textnote-body hr,
.note-common-styles__textnote-body p {
    margin-top: 36px;
    margin-bottom: 36px
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body>ol,
    .note-common-styles__textnote-body>ul,
    .note-common-styles__textnote-body blockquote,
    .note-common-styles__textnote-body figure,
    .note-common-styles__textnote-body h2,
    .note-common-styles__textnote-body h3,
    .note-common-styles__textnote-body hr,
    .note-common-styles__textnote-body p {
        margin-top: 30px;
        margin-bottom: 30px
    }
}

.note-common-styles__textnote-body a {
    text-decoration: underline;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .note-common-styles__textnote-body a:hover {
        color: var(--color-black);
        text-decoration: none
    }
}

.note-common-styles__textnote-body img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    text-align: center;
    /*cursor: pointer;*/
    border: 1px solid var(--color-concreteGray)
}

/*.note-common-styles__textnote-body img.is-slide {
 cursor: zoom-in 
}*/

.note-common-styles__textnote-body img.lazyload {
    width: 1000px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover
}

.note-common-styles__textnote-body img+figcaption {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 14px
}

.note-common-styles__textnote-body h2,
.note-common-styles__textnote-body h3 {
    font-size: 24px;
    margin-top: 50px;
    margin-bottom: -18px;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .04em;
    font-feature-settings: "palt"1
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body h2,
    .note-common-styles__textnote-body h3 {
        font-size: 20px;
        margin-top: 36px;
        margin-bottom: -20px
    }
}

.note-common-styles__textnote-body h2:last-child,
.note-common-styles__textnote-body h3:last-child {
    margin-bottom: 0
}

.note-common-styles__textnote-body p,
.note-common-styles__textnote-body ul li {
    font-size: 18px;
    line-height: 36px
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body p,
    .note-common-styles__textnote-body ul li {
        font-size: 16px;
        line-height: 30px
    }
}

.note-common-styles__textnote-body blockquote,
.note-common-styles__textnote-body figure blockquote {
    font-size: 16px;
    padding: 25px 36px;
    line-height: 36px;
    background-color: var(--color-waterBlue)
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body blockquote,
    .note-common-styles__textnote-body figure blockquote {
        font-size: 14px;
        padding: 18px 24px;
        line-height: 30px
    }
}

.note-common-styles__textnote-body blockquote>*,
.note-common-styles__textnote-body figure blockquote>* {
    margin-top: 0;
    margin-bottom: 0
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body blockquote>*,
    .note-common-styles__textnote-body figure blockquote>* {
        font-size: 14px
    }
}

.note-common-styles__textnote-body blockquote+figcaption,
.note-common-styles__textnote-body figure blockquote+figcaption {
    display: block;
    margin-top: 16px;
    text-align: right;
    font-size: 14px
}

.note-common-styles__textnote-body figure blockquote {
    margin: 0
}

.note-common-styles__textnote-body ol,
.note-common-styles__textnote-body ul {
    padding-left: 24px
}

.note-common-styles__textnote-body ol li,
.note-common-styles__textnote-body ul li {
    margin-top: 9px;
    margin-bottom: 9px;
    overflow: initial
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body ol li,
    .note-common-styles__textnote-body ul li {
        margin-top: 7px;
        margin-bottom: 7px
    }
}

.note-common-styles__textnote-body ol li p,
.note-common-styles__textnote-body ul li p {
    margin: 0 auto
}

.note-common-styles__textnote-body ul>li {
    list-style-type: disc
}

.note-common-styles__textnote-body ol>li {
    list-style-type: decimal
}

.note-common-styles__textnote-body ruby rt {
    color: #6f7372
}

.note-common-styles__textnote-body [embedded-service=alu] {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto
}

.note-common-styles__textnote-body .fude-iframe-ratio-widget__wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    border-radius: 4px
}

.note-common-styles__textnote-body .fude-iframe-ratio-widget__inner {
    position: static;
    left: auto;
    max-width: none;
    height: auto;
    padding-top: 0;
    padding-bottom: 0
}

.note-common-styles__textnote-body .fude-iframe-ratio-widget__iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.note-common-styles__textnote-body .fude-iframe-ratio-widget__domain {
    text-align: right
}

.note-common-styles__textnote-body .fude-iframe-ratio-widget__link {
    display: inline-block;
    padding-top: 8px;
    color: var(--color-darkGray);
    text-decoration: none;
    font-size: 12px
}

.note-common-styles__textnote-body [embedded-service=apple-music] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.note-common-styles__textnote-body [embedded-service=apple-music]::-webkit-scrollbar {
    display: none
}

.note-common-styles__textnote-body [embedded-service=attachment] {
    border: 1px solid var(--color-mercuryGray)
}

@media only screen and (min-width: 769px) {
    .note-common-styles__textnote-body [embedded-service=attachment]:hover {
        border: 1px solid var(--color-lightGray);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__link {
    display: flex;
    align-items: center;
    padding: 16px;
    text-decoration: none;
    cursor: pointer
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=attachment] .file-widget__link {
        flex-direction: column
    }
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__info {
    display: flex;
    flex-grow: 1;
    align-items: center;
    padding-right: 16px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=attachment] .file-widget__info {
        width: 100%;
        padding-right: 0
    }
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__icon {
    padding-right: 16px;
    color: var(--color-lightGray)
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__data {
    flex-grow: 1
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__filename {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    word-break: break-all;
    font-size: 16px
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__loading {
    font-size: 14px;
    padding: 40px 16px 16px;
    line-height: 1;
    color: var(--color-darkGray);
    text-align: center
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__loadingLabel {
    padding-top: 24px;
    background-image: url(https://assets.st-note.com/poc-image/manual/production/loading_128x128.gif);
    background-repeat: no-repeat;
    background-position: 50% 10%;
    background-size: 32px
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__filesize {
    font-size: 12px;
    color: var(--color-darkGray)
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__note {
    font-size: 10px;
    color: var(--customPrimaryColor);
    text-decoration: none
}

@media only screen and (min-width: 769px) {
    .note-common-styles__textnote-body [embedded-service=attachment] .file-widget__note:hover {
        color: var(--customPrimaryDarkenColor)
    }
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=attachment] .file-widget__download {
        width: 100%;
        padding-top: 16px
    }
}

.note-common-styles__textnote-body [embedded-service=attachment] .file-widget__download .a-icon {
    margin-right: 8px
}

.note-common-styles__textnote-body [embedded-service=external-article] a {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
    text-decoration: none
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] a {
        padding: 16px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] a:first-child {
    width: 100%
}

.note-common-styles__textnote-body [embedded-service=external-article] a:nth-child(2) {
    flex: 0;
    min-width: 220px;
    padding: 0;
    background-position: 50%;
    background-size: cover;
    border-left: 1px solid var(--color-concreteGray)
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] a:nth-child(2) {
        min-width: 120px
    }
}

.note-common-styles__textnote-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: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] strong {
        font-size: 14px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] em {
    display: block;
    margin-bottom: 4px;
    line-height: 1.5;
    color: var(--color-darkGray);
    font-size: 12px
}

.note-common-styles__textnote-body [embedded-service=external-article] em:nth-child(3) {
    margin-bottom: 0;
    color: var(--color-black)
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget {
    display: table;
    width: 100%;
    border: 1px solid var(--color-mercuryGray);
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget:hover {
        border: 1px solid var(--color-lightGray);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget>a {
    display: table-cell;
    padding: 16px;
    vertical-align: middle
}

.note-common-styles__textnote-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: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-title {
        max-height: 2.8em;
        font-size: 14px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-description {
    display: -webkit-box;
    max-height: 3em;
    overflow: hidden;
    color: var(--color-darkGray);
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.note-common-styles__textnote-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: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-image {
        width: 120px;
        height: 120px
    }
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping {
        display: flex;
        flex-direction: column
    }

    .note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping>a:first-child {
        order: 2
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-image {
    display: flex;
    width: 225px;
    height: 225px;
    padding: 16px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-image {
        order: 1;
        width: 100%;
        min-height: 190px;
        height: 190px;
        padding: 16px 16px 0;
        border: none
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-disclaimer {
    text-decoration: underline
}

.note-common-styles__textnote-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
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-price {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 16px;
    margin-bottom: 16px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-price {
        display: block;
        margin-top: 8px;
        margin-bottom: 8px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-button .a-button__inner {
    margin-top: 8px;
    margin-bottom: 8px;
    white-space: normal
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-regularprice,
.note-common-styles__textnote-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: var(--color-black);
    font-size: 16px
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-saleprice+.external-article-widget-regularprice {
    padding-left: 8px;
    font-weight: 400;
    color: var(--color-darkGray);
    text-decoration: line-through;
    font-size: 12px
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-currency {
    padding-left: 2px;
    font-size: 12px
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-update {
    margin-left: 8px;
    line-height: 1;
    color: var(--color-darkGray);
    font-size: 10px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-update {
        display: block;
        margin-top: 4px;
        margin-left: 0
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .external-article-widget-url+.external-article-widget-button {
    margin-top: 16px
}

.note-common-styles__textnote-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 var(--color-mercuryGray);
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget:hover {
        border: 1px solid var(--color-lightGray);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__link {
    display: block !important;
    width: 100%;
    padding: 0 !important
}

.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__header {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 52.3%;
    overflow: hidden
}

.note-common-styles__textnote-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%
}

.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__img {
    width: 100% !important;
    height: 100% !important;
    border: none;
    object-fit: cover
}

.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__body {
    display: block;
    padding: 16px
}

.note-common-styles__textnote-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;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 16px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__title {
        font-size: 14px
    }
}

.note-common-styles__textnote-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: var(--color-darkGray);
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.note-common-styles__textnote-body [embedded-service=external-article] .summary-large-image-widget__url {
    display: block;
    font-size: 10px;
    font-style: normal;
    line-height: 1.5
}

.note-common-styles__textnote-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: 480px) {
    .note-common-styles__textnote-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: 360px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__link {
        grid-template-columns: 1fr 132px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__detail {
    display: flex;
    flex-direction: column;
    grid-area: detail;
    justify-content: center;
    padding-right: 16px
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__domain {
    margin-bottom: 4px;
    color: var(--color-darkGray);
    font-size: 10px
}

.note-common-styles__textnote-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: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__title {
        font-size: 14px;
        -webkit-line-clamp: 3
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__property {
    display: flex
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__property {
        display: block
    }
}

.note-common-styles__textnote-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: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__owner {
        display: block;
        margin-right: 0;
        word-break: break-all
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__category {
    display: flex;
    align-items: center;
    color: var(--color-darkGray);
    white-space: nowrap;
    font-size: 12px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__category {
        margin-top: 4px;
        white-space: normal
    }
}

@media only screen and (max-width: 360px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__category {
        font-size: 10px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__categoryIcon {
    margin-right: 4px
}

@media only screen and (max-width: 360px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__categoryIcon {
        margin-right: 0
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__aside {
    grid-area: aside
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__thumbImg {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    border-radius: 4px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__thumbImg {
        margin-bottom: 8px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__status {
    grid-area: status;
    padding: 8px 16px 0 0
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__status {
        padding: 16px 0 0
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__statusList {
    display: flex;
    align-items: center
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__statusListItem {
    margin-top: 0;
    margin-right: 16px;
    margin-bottom: 0;
    line-height: 1
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__statusListItem--timeleft {
    margin-right: 0;
    margin-left: auto
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__currentAmount {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    line-height: 1;
    color: var(--color-black);
    font-size: 14px
}

@media only screen and (max-width: 360px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__currentAmount {
        font-size: 12px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__supporters {
    display: flex;
    align-items: center;
    font-size: 14px
}

@media only screen and (max-width: 360px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__supporters {
        font-size: 12px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__supportersIcon {
    margin-right: 4px
}

@media only screen and (max-width: 360px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__supportersIcon {
        margin-right: 0
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__timeleft {
    display: flex;
    align-items: center;
    color: var(--color-darkGray);
    font-size: 12px
}

@media only screen and (max-width: 360px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__timeleft {
        font-size: 10px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__timeleftIcon {
    margin-right: 4px
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__complateRate {
    position: relative;
    margin-top: 8px
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__complateRate:after {
    position: absolute;
    top: 2px;
    left: 4px;
    z-index: 1;
    font-weight: 700;
    color: var(--color-white);
    content: attr(title);
    font-size: 10px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__complateRate {
        height: 16px;
        margin-right: -16px;
        margin-bottom: -14px;
        margin-left: -16px
    }
}

.note-common-styles__textnote-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: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value] {
        border-radius: 0 0 3px 3px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-bar {
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    background-color: var(--color-concreteGray);
    border-radius: 4px
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-bar {
        border-radius: 0 0 3px 3px
    }
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-value {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-noteGreen)
}

.note-common-styles__textnote-body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-moz-progress-bar {
    -moz-appearance: none;
    background-color: var(--color-noteGreen)
}

.note-common-styles__textnote-body .fb-post {
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden
}

.note-common-styles__textnote-body [embedded-service=gist] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.note-common-styles__textnote-body [embedded-service=gist]::-webkit-scrollbar {
    display: none
}

.note-common-styles__textnote-body [embedded-service=googleform] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.note-common-styles__textnote-body [embedded-service=googleform]::-webkit-scrollbar {
    display: none
}

.note-common-styles__textnote-body [embedded-service=googlemap] {
    position: relative;
    width: 100% !important;
    height: 0;
    padding-bottom: 75%;
    border: 1px solid #f2f2f2
}

.note-common-styles__textnote-body [embedded-service=googlemap] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
}

.note-common-styles__textnote-body [embedded-service=hr],
.note-common-styles__textnote-body [embedded-service=wantedly] {
    border: 1px solid var(--color-mercuryGray)
}

@media only screen and (min-width: 769px) {

    .note-common-styles__textnote-body [embedded-service=hr]:hover,
    .note-common-styles__textnote-body [embedded-service=wantedly]:hover {
        border: 1px solid var(--color-lightGray);
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget {
    width: 100%;
    text-align: left
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__link,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__link {
    display: flex;
    width: 100%;
    padding: 16px;
    overflow: visible;
    text-decoration: none
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__info,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__url,
.note-common-styles__textnote-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: var(--color-darkGray);
    text-indent: 48px
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__url:before,
.note-common-styles__textnote-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: var(--color-white);
    text-align: center;
    text-indent: 0;
    white-space: nowrap;
    content: "求人";
    background-color: var(--customPrimaryColor);
    border-radius: 7px
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__title,
.note-common-styles__textnote-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: 480px) {

    .note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__title,
    .note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__title {
        font-size: 14px
    }
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__requirements,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__requirements {
    width: 100%;
    padding-top: 8px;
    padding-right: 16px
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__requirements,
    .note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__requirements {
        padding-top: 8px
    }
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__companyName,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__companyName {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__companyName:last-child,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__companyName:last-child {
    margin-bottom: 0
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__location,
.note-common-styles__textnote-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
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__location:last-child,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__location:last-child {
    margin-bottom: 0
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__occupations,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__occupations {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--color-darkGray)
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__occupations:last-child,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__occupations:last-child {
    margin-bottom: 0
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__employmentSystem,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__employmentSystem {
    display: block;
    font-size: 12px;
    color: var(--color-darkGray)
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__aside,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 190px
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__aside,
    .note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__aside {
        width: 120px
    }
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__thumbnailImg,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__thumbnailImg {
    width: 100%;
    height: 100px !important;
    border: none;
    border-radius: 4px;
    object-fit: cover;
    object-position: center center
}

@media only screen and (max-width: 480px) {

    .note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__thumbnailImg,
    .note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__thumbnailImg {
        height: 64px !important
    }
}

.note-common-styles__textnote-body [embedded-service=hr] .recruitment-widget__button,
.note-common-styles__textnote-body [embedded-service=wantedly] .recruitment-widget__button {
    width: 100%;
    margin-top: 16px
}

.note-common-styles__textnote-body [embedded-service=instagram] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.note-common-styles__textnote-body [embedded-service=instagram]::-webkit-scrollbar {
    display: none
}

.note-common-styles__textnote-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
}

.note-common-styles__textnote-body [embedded-service=itunes] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.note-common-styles__textnote-body [embedded-service=itunes]::-webkit-scrollbar {
    display: none
}

.note-common-styles__textnote-body [embedded-service=niconico] {
    position: relative;
    width: 100% !important;
    height: 0;
    padding-bottom: 56.25%;
    border: 1px solid #f2f2f2
}

.note-common-styles__textnote-body [embedded-service=niconico] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=note-slide] {
        position: relative;
        height: auto
    }

    .note-common-styles__textnote-body [embedded-service=note-slide]:after {
        display: block;
        padding-top: calc(75% + 92px);
        content: ""
    }
}

.note-common-styles__textnote-body [embedded-service=note-slide] iframe {
    height: 455px;
    border: none
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=note-slide] iframe {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%
    }
}

.note-common-styles__textnote-body [embedded-service=note] {
    width: 100%;
    max-width: auto;
    margin-right: auto;
    margin-left: auto
}

.note-common-styles__textnote-body [embedded-service=note] iframe {
    display: block !important;
    width: 100% !important;
    max-width: auto !important;
    margin: 0 auto !important
}

.note-common-styles__textnote-body [embedded-service=oembed] {
    border-radius: 0
}

.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget {
    margin: 0 auto
}

.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden
}

.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__inner {
    position: static;
    left: auto;
    max-width: none;
    height: auto;
    padding-top: 0;
    padding-bottom: 0
}

.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__domain {
    text-align: right
}

.note-common-styles__textnote-body [embedded-service=oembed] .fude-iframe-oembed-widget__link {
    display: inline-block;
    padding-top: 8px;
    color: var(--color-darkGray);
    text-decoration: none;
    font-size: 12px
}

.note-common-styles__textnote-body [embedded-service=slideshare] {
    width: 100%
}

.note-common-styles__textnote-body [embedded-service=slideshare] iframe {
    overflow: hidden;
    vertical-align: top;
    border-radius: 4px
}

.note-common-styles__textnote-body [embedded-service=soundcloud] {
    width: 100% !important;
    border: 1px solid #f2f2f2
}

.note-common-styles__textnote-body [embedded-service=speakerdeck] {
    width: 100%
}

.note-common-styles__textnote-body [embedded-service=speakerdeck] iframe {
    overflow: hidden;
    vertical-align: top;
    border-radius: 4px
}

.note-common-styles__textnote-body [embedded-service=spotify] div {
    max-width: none !important
}

.note-common-styles__textnote-body [embedded-service=tiktok-web] {
    width: 100%;
    max-width: 340px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=tiktok-web] {
        position: relative;
        width: 100%;
        max-width: none
    }
}

.note-common-styles__textnote-body [embedded-service=tiktok-web] blockquote {
    padding: 0;
    margin: 0;
    background-color: initial
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=tiktok-web] blockquote {
        padding: 0
    }
}

.note-common-styles__textnote-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
}

.note-common-styles__textnote-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: 480px) {
    .note-common-styles__textnote-body [embedded-service=tiktok-web] iframe {
        width: 100% !important
    }
}

.note-common-styles__textnote-body [embedded-service=tiktok] {
    width: 100%;
    max-width: 340px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=tiktok] {
        position: relative;
        width: 100%;
        max-width: none
    }
}

.note-common-styles__textnote-body [embedded-service=tiktok] blockquote {
    padding: 0;
    margin: 0;
    background-color: initial
}

@media only screen and (max-width: 480px) {
    .note-common-styles__textnote-body [embedded-service=tiktok] blockquote {
        padding: 0
    }
}

.note-common-styles__textnote-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
}

.note-common-styles__textnote-body [embedded-service=tiktok] 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: 480px) {
    .note-common-styles__textnote-body [embedded-service=tiktok] iframe {
        width: 100% !important
    }
}

.note-common-styles__textnote-body [embedded-service=twitter] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto
}

.note-common-styles__textnote-body [embedded-service=twitter] .twitter-tweet {
    margin-top: 0 !important;
    margin-right: auto;
    margin-bottom: 0 !important;
    margin-left: auto
}

.note-common-styles__textnote-body [embedded-service=twitterProfile] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #ccd6dd;
    border-radius: 15px
}

.note-common-styles__textnote-body [embedded-service=vimeo] {
    position: relative;
    width: 100% !important;
    border: 1px solid #f2f2f2
}

.note-common-styles__textnote-body [embedded-service=vimeo] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
}

.note-common-styles__textnote-body [embedded-service=youtube] {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    border: 1px solid #f2f2f2
}

.note-common-styles__textnote-body [embedded-service=youtube] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
}

.note-common-styles__textnote-body .widget-cover {
    width: 100% !important;
    cursor: pointer
}

.note-common-styles__textnote-body .widget-cover>* {
    pointer-events: none
}

.note-common-styles__textnote-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) {
    .note-common-styles__textnote-body .widget-cover:hover:before {
        opacity: 1
    }
}

.note-common-styles__textnote-body .widget-cover.is-selected:before {
    background-color: rgba(44, 182, 150, .3);
    border-color: var(--customPrimaryColor);
    opacity: 1
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .note-common-styles__textnote-body .widget-cover.is-selected:before {
        background-color: hsla(0, 0%, 100%, .3)
    }
}

.note-common-styles__textnote-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
}

.note-common-styles__textnote-body [embedded-service] ::selection {
    background-color: initial
}

.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__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: var(--color-black);
    letter-spacing: .04em;
    font-feature-settings: "palt"1;
    pointer-events: auto;
    font-size: 32px
}

@media only screen and (min-width: 481px)and (max-width:768px) {
    .o-noteContentText__title {
        padding-right: 40px;
        padding-left: 40px
    }
}

@media only screen and (max-width: 480px) {
    .o-noteContentText__title {
        font-size: 24px;
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 30px;
        margin-bottom: 15px
    }
}

.o-noteContentText__title::placeholder {
    color: rgba(34, 34, 34, .3)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .o-noteContentText__title::placeholder {
        color: hsla(0, 0%, 100%, .3)
    }
}

.o-noteContentText__status {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-bottom: 20px
}

@media only screen and (min-width: 481px)and (max-width:768px) {
    .o-noteContentText__status {
        margin-right: 40px;
        margin-left: 40px
    }
}

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

.o-noteContentText__like {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: var(--color-likeRed);
    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: 481px)and (max-width:768px) {
    .o-noteContentText__author {
        width: calc(100% - 80px);
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 480px) {
    .o-noteContentText__author {
        width: calc(100% - 32px);
        margin-right: 16px;
        margin-left: 16px
    }
}

.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: var(--color-darkGray);
    text-align: right;
    font-size: 12px
}

@media only screen and (max-width: 480px) {
    .o-noteEyecatch__copyright {
        margin-right: 8px;
        margin-left: 8px
    }
}

.o-noteEyecatch__copyrightName {
    display: inline-flex;
    align-items: center;
    font-weight: 700
}

.o-noteEyecatch__copyrightNameHelp {
    margin-left: 4px;
    color: var(--color-lightGray)
}

.o-noteEyecatch__delete {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 8px;
    color: var(--color-white);
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .o-noteEyecatch__delete {
        background-color: hsla(0, 0%, 100%, .2)
    }
}

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

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .o-noteEyecatch__delete:hover {
        background-color: hsla(0, 0%, 100%, .5)
    }
}

.o-noteEyecatch__block {
    padding-left: 8px;
    font-style: normal;
    color: var(--color-darkGray);
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .o-noteEyecatch__block:hover {
        color: var(--color-black)
    }
}

.o-noteEyecatch__help {
    line-height: 16px;
    color: var(--color-lightGray)
}

@media only screen and (min-width: 769px) {
    .o-noteEyecatch__help:hover {
        color: var(--color-darkGray)
    }
}

.o-winContestBadge__badge {
    display: flex;
    flex-wrap: wrap;
    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
    }
}

.o-noteContentHeader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

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

.o-noteContentHeader__info {
    flex: 1;
    line-height: 1.5;
    font-size: 12px
}

.o-noteContentHeader__name {
    word-break: break-all
}

.o-noteContentHeader__date {
    color: var(--color-lightGray)
}

.o-noteContentHeader__dateSlot:after {
    content: " "
}

.o-noteContentHeader__action {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-lightGray)
}

.o-noteContentHeader__actionFollow {
    text-decoration: underline
}

.o-noteContentHeader__actionFollow--following {
    text-decoration: none
}

.o-noteContentHeader__status {
    display: flex;
    align-items: center
}

.o-noteContentHeader__label,
.o-noteContentHeader__price {
    font-weight: 700;
    color: var(--customPrimaryColor);
    font-size: 14px
}

.o-noteContentHeader__more {
    margin-left: 16px;
    color: var(--color-lightGray);
    cursor: pointer
}

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

    .o-noteContentHeader__more:hover {
        color: var(--color-darkGray)
    }
}

.o-noteContentHeader__share {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-left: 16px
}

.o-noteContentHeader__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    color: var(--color-lightGray);
    text-align: center;
    cursor: pointer
}

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

    .o-noteContentHeader__item:hover {
        color: var(--color-darkGray)
    }
}

.m-socialShareButton__item {
    display: flex;
    align-items: center;
    justify-content: center
}

.a-button {
    display: inline-block;
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--color-darkGray);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    touch-action: manipulation;
    cursor: pointer;
    background: var(--color-white);
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none
}

.a-button,
.a-button .a-button__inner {
    align-items: center;
    justify-content: center
}

.a-button .a-button__inner {
    font-size: 14px;
    display: flex
}

.a-button[data-type=none] {
    color: var(--color-darkGray)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=none] {
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=none]:hover {
        color: var(--color-black)
    }
}

.a-button[data-type=disabled] {
    color: hsla(0, 0%, 100%, .3);
    background-color: var(--color-gray)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-button[data-type=disabled] {
        color: hsla(0, 0%, 100%, .3)
    }
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=disabled] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=disabled]:hover {
        background-color: #b3b3b3
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=disabled]:hover {
        background-color: #e6e6e6
    }
}

.a-button[data-type=basic] {
    color: var(--color-black);
    border: 1px solid var(--color-mercuryGray)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=basic] {
        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: var(--color-white);
    background-color: var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=primary] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=primary]:hover {
        background-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=secondary] {
    color: var(--customPrimaryColor);
    border: 1px solid var(--customPrimaryColor)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=secondary] {
        transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=secondary]:hover {
        color: var(--customPrimaryColor);
        border-color: var(--customPrimaryDarkenColor)
    }
}

.a-button[data-type=danger] {
    color: var(--color-white);
    background-color: var(--color-dangerRed)
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=danger] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=danger]:hover {
        background-color: #e81b2b
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=danger]:hover {
        background-color: #f27781
    }
}

.a-button[data-type=twitter] {
    color: var(--color-white);
    background-color: #55acee
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=twitter] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=twitter]:hover {
        background-color: #2795e9
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=twitter]:hover {
        background-color: #83c3f3
    }
}

.a-button[data-type=facebook] {
    color: var(--color-white);
    background-color: #1877f2
}

@media only screen and (min-width: 769px) {
    .a-button[data-type=facebook] {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=facebook]:hover {
        background-color: #0b5fcc
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button[data-type=facebook]:hover {
        background-color: #4893f5
    }
}

.a-button[data-size=small] {
    min-height: 32px
}

@media only screen and (max-width: 480px) {
    .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: var(--color-gray);
    border: none;
    transition: none
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .a-button:disabled {
        color: hsla(0, 0%, 100%, .5)
    }
}

@media only screen and (min-width: 769px) {
    .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5);
        background-color: var(--color-gray);
        border: none
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .a-button:disabled:hover {
        color: hsla(0, 0%, 100%, .5)
    }
}

.a-button--icon {
    padding-right: 0;
    padding-left: 0
}

.a-button--icon .a-button__icon {
    margin-right: 0
}

.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
}

.m-odaiCard {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-mercuryGray);
    border-radius: 4px
}

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

    .m-odaiCard:hover {
        border-color: var(--color-gray)
    }
}

.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: flex;
    align-items: center;
    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: flex;
    align-items: 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 {
    flex: 1;
    flex-direction: column
}

.m-odaiCard__postCount {
    display: flex;
    justify-content: center;
    line-height: 1;
    text-align: center;
    white-space: nowrap
}

.m-odaiCard__postCountLink {
    padding-bottom: 2px;
    font-weight: 700;
    color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
    font-size: 12px
}

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

.o-hashtagBanner__container {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 1fr -webkit-min-content;
    grid-template-rows: 1fr min-content;
    grid-template-columns: auto;
    width: 100%;
    height: 330px;
    padding: 64px 64px 24px;
    background-position: 50%;
    background-size: 100% auto
}

@media only screen and (max-width: 768px) {
    .o-hashtagBanner__container {
        height: 270px;
        padding-left: 32px
    }
}

@media only screen and (max-width: 480px) {
    .o-hashtagBanner__container {
        height: 197px;
        padding: 16px
    }
}

.o-hashtagBanner__smallContainer {
    position: relative;
    display: block;
    max-width: 360px;
    height: 84px;
    padding: 20px 14px;
    overflow: hidden;
    background-position: 50%;
    background-size: 100% auto;
    border: 1px solid var(--color-mercuryGray);
    border-radius: 4px
}

.o-hashtagBanner__bannerLink,
.o-hashtagBanner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.o-hashtagBanner__overlay {
    background-image: linear-gradient(90deg, #fff 0, #fff 31.42%, hsla(0, 0%, 100%, 0))
}

.o-hashtagBanner__overlay[data-size=small] {
    background-image: linear-gradient(90deg, #fff 0, #fff 43.9%, hsla(0, 0%, 100%, 0) 78.54%)
}

.o-hashtagBanner__bottom,
.o-hashtagBanner__top {
    position: relative;
    pointer-events: none
}

.o-hashtagBanner__bottom {
    display: flex;
    align-items: center
}

@media only screen and (max-width: 480px) {
    .o-hashtagBanner__bottom {
        flex-direction: column;
        align-items: flex-start
    }
}

.o-hashtagBanner__headline {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.5
}

@media only screen and (max-width: 768px) {
    .o-hashtagBanner__headline {
        font-size: 32px
    }
}

@media only screen and (max-width: 480px) {
    .o-hashtagBanner__headline {
        font-size: 22px
    }
}

.o-hashtagBanner__lead {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: pre-line
}

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

.o-hashtagBanner__presenter {
    font-size: 14px;
    margin-right: 16px;
    font-weight: 700;
    color: var(--color-black)
}

@media only screen and (max-width: 480px) {
    .o-hashtagBanner__presenter {
        font-size: 12px;
        margin-right: 0;
        margin-bottom: 8px
    }
}

.o-hashtagBanner__linkList {
    display: flex;
    align-items: center;
    min-height: 24px
}

.o-hashtagBanner__official {
    font-size: 14px;
    margin-right: 16px;
    font-weight: 700;
    color: var(--color-darkGray);
    pointer-events: auto
}

@media only screen and (max-width: 480px) {
    .o-hashtagBanner__official {
        font-size: 12px;
        margin-bottom: 8px
    }
}

.o-hashtagBanner__sns {
    color: var(--color-darkGray);
    pointer-events: auto
}

.o-hashtagBanner__smallInner {
    position: relative
}

.o-hashtagBanner__smallHeadline {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5
}

.o-hashtagBanner__smallPresenter {
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    color: var(--color-black)
}

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

.m-tagList__body {
    display: flex;
    flex-wrap: wrap
}

.m-tagList__item {
    display: inline-block;
    max-width: 100%;
    margin-right: 8px;
    margin-bottom: 8px
}

.a-tag {
    position: relative;
    display: inline-block;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 8px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    background: var(--color-white);
    border: 1px solid var(--color-mercuryGray);
    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;
        transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-tag:hover .a-tag__close {
        color: var(--color-darkGray);
        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: var(--color-black);
    text-overflow: ellipsis;
    white-space: nowrap
}

.a-tag__close {
    margin-left: 8px;
    color: var(--color-lightGray)
}

.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
}

.o-supportAppeal {
    padding: 16px;
    background-color: var(--color-waterBlue)
}

.o-supportAppeal__title {
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-size: 12px
}

.o-supportAppeal__body {
    display: flex
}

.o-supportAppeal__img {
    flex: 0 0 auto;
    margin-right: 16px
}

.o-supportAppeal__contents {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    padding: 24px 24px 16px;
    background: var(--color-white);
    border-radius: 12px
}

@media only screen and (max-width: 480px) {
    .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: var(--customPrimaryColor);
    word-break: break-all;
    word-wrap: break-word
}

@media only screen and (min-width: 769px) {
    .o-supportAppeal__message a:hover {
        color: var(--customPrimaryDarkenColor)
    }
}

.o-supportAppeal__button {
    width: 100%
}

.o-actionControl {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px
}

@media only screen and (min-width: 481px)and (max-width:768px) {
    .o-actionControl {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media only screen and (max-width: 480px) {
    .o-actionControl {
        height: 24px;
        margin-right: 16px;
        margin-left: 16px
    }
}

.o-actionControl__item {
    margin-right: 32px
}

.o-actionControl__item--add {
    position: relative
}

.o-actionControl__item--social {
    margin-right: 0;
    margin-left: auto;
    font-weight: 700
}

@media only screen and (max-width: 480px) {
    .o-actionControl__item--social {
        display: none
    }
}

.o-actionControl__item--socialMobile {
    color: var(--color-lightGray)
}

.o-actionControl__shareCoachMark {
    position: absolute;
    right: 0;
    bottom: 56px;
    width: 90%;
    margin: 0 5%
}

.o-like {
    position: relative;
    display: flex;
    align-items: center
}

.o-like.is-active .o-like__count,
.o-like.is-active .o-like__icon {
    color: var(--color-likeRed)
}

.o-like__icon {
    color: var(--color-lightGray);
    cursor: pointer
}

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

    .o-like__icon:hover {
        color: var(--color-darkGray)
    }
}

.o-like__icon.is-animate {
    -webkit-animation: effectSuki-data-v-0f549444 .28s;
    animation: effectSuki-data-v-0f549444 .28s
}

@-webkit-keyframes effectSuki-data-v-0f549444 {
    20% {
        opacity: 0;
        transform: scale(1)
    }

    48% {
        opacity: 1;
        transform: scale(1.6)
    }

    56% {
        transform: scale(1.2)
    }
}

.o-like__icon[data-disable-focus=true]:active,
.o-like__icon[data-disable-focus=true]:focus {
    outline: none
}

.o-like__count {
    margin-left: 8px;
    color: var(--color-lightGray);
    cursor: pointer
}

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

    .o-like__count:hover {
        color: var(--color-darkGray)
    }
}

.o-like__pc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.o-like__pc.is-active .o-like__pcCount,
.o-like__pc.is-active .o-like__pcIcon {
    color: var(--color-likeRed)
}

.o-like__pcIcon {
    display: flex;
    align-items: center;
    color: var(--color-lightGray);
    cursor: pointer
}

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

    .o-like__pcIcon:hover {
        color: var(--color-darkGray)
    }
}

.o-like__pcIcon.is-animate {
    -webkit-animation: effectSuki-data-v-0f549444 .28s;
    animation: effectSuki-data-v-0f549444 .28s
}

@keyframes effectSuki-data-v-0f549444 {
    20% {
        opacity: 0;
        transform: scale(1)
    }

    48% {
        opacity: 1;
        transform: scale(1.6)
    }

    56% {
        transform: scale(1.2)
    }
}

.o-like__pcIcon[data-disable-focus=true]:active,
.o-like__pcIcon[data-disable-focus=true]:focus {
    outline: none
}

.o-like__pcCount {
    margin-left: 8px;
    line-height: 1;
    color: var(--color-lightGray);
    cursor: pointer
}

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

    .o-like__pcCount:hover {
        color: var(--color-darkGray)
    }
}

.o-like--color_red .o-like__icon {
    color: var(--color-likeRed)
}

.m-likeOnBoarding {
    position: absolute;
    bottom: 0;
    left: -6px;
    z-index: 10;
    display: flex;
    min-width: 300px;
    visibility: hidden;
    opacity: 0;
    transform-origin: 25px bottom
}

@media only screen and (max-width: 480px) {
    .m-likeOnBoarding {
        min-width: 270px
    }

    .m-likeOnBoarding .m-likeOnBoarding__message {
        max-width: 220px
    }
}

@media only screen and (max-width: 480px) {
    .m-likeOnBoarding--with_articleActionSp {
        right: -7px;
        bottom: 16px;
        left: auto;
        transform-origin: 98% bottom
    }

    .m-likeOnBoarding--with_articleActionSp .m-likeOnBoarding__balloon {
        margin-left: auto
    }
}

.m-likeOnBoarding__balloon {
    position: relative;
    color: var(--color-white);
    text-align: left;
    background-color: var(--color-noteGreen);
    border: 1px solid var(--color-noteGreen);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(34, 34, 34, .25), 0 0 1px rgba(34, 34, 34, .35)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .m-likeOnBoarding__balloon {
        box-shadow: 0 1px 2px hsla(0, 0%, 86.7%, .25), 0 0 1px hsla(0, 0%, 86.7%, .35)
    }
}

.m-likeOnBoarding__balloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: var(--color-noteGreen);
    box-shadow: 1px 1px 0 0 #2cb696
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .m-likeOnBoarding__balloon:before {
        box-shadow: 1px 1px 0 0 #d34969
    }
}

.m-likeOnBoarding__balloon--tailPosition_bottomLeft:before {
    bottom: -12px;
    left: 12px;
    transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeOnBoarding__balloon--tailPosition_bottomRight:before {
    right: 14px;
    bottom: -12px;
    transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeOnBoarding__body {
    position: relative;
    display: flex;
    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: 480px) {
    .m-likeOnBoarding__message {
        font-size: 12px
    }
}

.m-likeOnBoarding__status {
    display: flex;
    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: initial
}

.m-likeOnBoarding__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-mercuryGray)
}

.m-likeOnBoarding.is-shown {
    -webkit-animation: showOnBoarding-data-v-7e7039fe 9s .16s;
    animation: showOnBoarding-data-v-7e7039fe 9s .16s
}

@-webkit-keyframes showOnBoarding-data-v-7e7039fe {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    2% {
        opacity: 0;
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    3% {
        transform: translateY(-24px)
    }

    3% {
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    5% {
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    6% {
        visibility: visible;
        opacity: 1;
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    91.6666666667% {
        transform: translateY(-40px)
    }

    94.4444444444% {
        transform: translateY(-42px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    97.2222222222% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        display: none;
        opacity: 0;
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes showOnBoarding-data-v-7e7039fe {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    2% {
        opacity: 0;
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    3% {
        transform: translateY(-24px)
    }

    3% {
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    5% {
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    6% {
        visibility: visible;
        opacity: 1;
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    91.6666666667% {
        transform: translateY(-40px)
    }

    94.4444444444% {
        transform: translateY(-42px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    97.2222222222% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        display: none;
        opacity: 0;
        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 {
    width: 200px;
    visibility: hidden;
    opacity: 0;
    transform-origin: 25px bottom
}

.m-likeNoLogin__wrapper.is-shown {
    -webkit-animation: showNoLogin-data-v-0a5d654e 6s .16s;
    animation: showNoLogin-data-v-0a5d654e 6s .16s
}

@-webkit-keyframes showNoLogin-data-v-0a5d654e {
    0% {
        opacity: 0;
        transform: translateY(4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    3% {
        opacity: 0;
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    4.5% {
        transform: translateY(0)
    }

    4.5% {
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    7.5% {
        transform: translateY(-10px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    9% {
        visibility: visible;
        opacity: 1;
        transform: translateY(-16px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    87.5% {
        transform: translateY(-16px)
    }

    91.6666666667% {
        transform: translateY(-18px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    95.8333333333% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        display: none;
        opacity: 0;
        transform: translateY(4px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes showNoLogin-data-v-0a5d654e {
    0% {
        opacity: 0;
        transform: translateY(4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    3% {
        opacity: 0;
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    4.5% {
        transform: translateY(0)
    }

    4.5% {
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    7.5% {
        transform: translateY(-10px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    9% {
        visibility: visible;
        opacity: 1;
        transform: translateY(-16px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    87.5% {
        transform: translateY(-16px)
    }

    91.6666666667% {
        transform: translateY(-18px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    95.8333333333% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        display: none;
        opacity: 0;
        transform: translateY(4px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.m-likeNoLogin__balloon {
    position: relative;
    text-align: left
}

.m-likeNoLogin__balloon:before {
    position: absolute;
    z-index: 1;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: var(--color-white)
}

.m-likeNoLogin__balloon--tailPosition_bottomLeft:before {
    bottom: -12px;
    left: 12px;
    box-shadow: 2px 2px 6px rgba(34, 34, 34, .1);
    transform: rotate(45deg) translate(-5px, -5px)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .m-likeNoLogin__balloon--tailPosition_bottomLeft:before {
        box-shadow: 2px 2px 6px hsla(0, 0%, 86.7%, .1)
    }
}

.m-likeNoLogin__balloon--tailPosition_bottomRight:before {
    right: 14px;
    bottom: -12px;
    transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeNoLogin__body {
    position: relative;
    padding-bottom: 16px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 4px 8px 16px rgba(34, 34, 34, .1), 0 1px 4px rgba(34, 34, 34, .15)
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .m-likeNoLogin__body {
        box-shadow: 4px 8px 16px hsla(0, 0%, 86.7%, .1), 0 1px 4px hsla(0, 0%, 86.7%, .15)
    }
}

.m-likeNoLogin__title {
    padding-right: 16px;
    padding-left: 16px;
    font-weight: 700;
    font-size: 16px
}

@media only screen and (max-width: 480px) {
    .m-likeNoLogin__title {
        font-size: 14px
    }
}

.m-likeNoLogin__description {
    padding-right: 16px;
    padding-left: 16px;
    font-weight: 400;
    font-size: 12px
}

@media only screen and (max-width: 480px) {
    .m-likeNoLogin__description {
        font-size: 10px
    }
}

.m-likeNoLogin__image {
    width: 100%;
    height: auto;
    vertical-align: top
}

.m-likeNoLogin__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-lightGray)
}

@media only screen and (min-width: 769px) {
    .m-likeNoLogin__close:hover {
        color: var(--color-darkGray)
    }
}

.m-likeThanks {
    position: absolute;
    bottom: 0;
    left: -6px;
    z-index: 1;
    display: flex;
    min-width: 300px;
    visibility: hidden;
    opacity: 0;
    transform-origin: 25px bottom
}

@media only screen and (max-width: 480px) {
    .m-likeThanks {
        min-width: 270px
    }

    .m-likeThanks .m-likeThanks__message {
        max-width: 190px
    }
}

@media only screen and (max-width: 480px) {
    .m-likeThanks[data-type=spBooster] {
        right: -7px;
        bottom: 16px;
        left: auto;
        transform-origin: 98% bottom
    }

    .m-likeThanks[data-type=spBooster] .m-likeThanks__balloon {
        margin-left: auto
    }
}

.m-likeThanks[data-type=pcBooster] {
    bottom: -4px;
    left: -9px
}

.m-likeThanks[data-type=comment],
.m-likeThanks[data-type=timeline] {
    right: -9px;
    bottom: -4px;
    left: auto;
    transform-origin: 98% bottom
}

.m-likeThanks[data-type=comment] .m-likeThanks__body,
.m-likeThanks[data-type=timeline] .m-likeThanks__body {
    padding: 12px
}

.m-likeThanks[data-type=comment] .m-likeThanks__balloon,
.m-likeThanks[data-type=timeline] .m-likeThanks__balloon {
    margin-left: auto
}

@media only screen and (max-width: 480px) {

    .m-likeThanks[data-type=circleBoardComment],
    .m-likeThanks[data-type=circleBoardPost] {
        min-width: 240px
    }
}

@media only screen and (max-width: 360px) {

    .m-likeThanks[data-type=circleBoardComment],
    .m-likeThanks[data-type=circleBoardPost] {
        min-width: 200px
    }
}

.m-likeThanks--size_small .m-likeThanks__imageMain {
    max-height: 80px
}

.m-likeThanks__balloon {
    position: relative;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-mercuryGray);
    border-radius: 4px
}

.m-likeThanks__balloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: var(--color-white);
    box-shadow: 1px 1px 0 0 #e6e6e6
}

@media only screen and (prefers-color-scheme: dark) {
    html.ios-webview .m-likeThanks__balloon:before {
        box-shadow: 1px 1px 0 0 #191919
    }
}

.m-likeThanks__balloon[data-tail-position=bottomLeft]:before {
    bottom: -12px;
    left: 14px;
    transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeThanks__balloon[data-tail-position=bottomRight]:before {
    right: 14px;
    bottom: -12px;
    transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeThanks__body {
    display: flex;
    align-items: center;
    padding: 16px
}

.m-likeThanks__avatar {
    width: 32px;
    margin-right: 16px;
    line-height: 1
}

@media only screen and (max-width: 480px) {
    .m-likeThanks__avatar {
        margin-right: 8px
    }
}

.m-likeThanks__message {
    max-width: 220px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-black);
    white-space: normal
}

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

.m-likeThanks__flag {
    color: var(--color-likeRed)
}

.m-likeThanks__status {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 12px
}

.m-likeThanks__status:last-child {
    margin-bottom: 0
}

.m-likeThanks__status--type_firstLike {
    color: var(--color-likeRed)
}

.m-likeThanks__statusText {
    margin-left: 4px
}

.m-likeThanks__image {
    max-width: 220px;
    margin-bottom: 8px
}

.m-likeThanks__imageMain {
    width: 100%;
    max-height: 160px;
    border-radius: 4px;
    object-fit: contain
}

.m-likeThanks[data-is-shown=true] {
    -webkit-animation: replyToLike-data-v-930e757a 4s .16s;
    animation: replyToLike-data-v-930e757a 4s .16s
}

@-webkit-keyframes replyToLike-data-v-930e757a {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    4.5% {
        opacity: 0;
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    6.75% {
        transform: translateY(-24px)
    }

    6.75% {
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    11.25% {
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    13.5% {
        visibility: visible;
        opacity: 1;
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    81.25% {
        transform: translateY(-40px)
    }

    87.5% {
        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 {
        display: none;
        opacity: 0;
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes replyToLike-data-v-930e757a {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    4.5% {
        opacity: 0;
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    6.75% {
        transform: translateY(-24px)
    }

    6.75% {
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    11.25% {
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    13.5% {
        visibility: visible;
        opacity: 1;
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    81.25% {
        transform: translateY(-40px)
    }

    87.5% {
        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 {
        display: none;
        opacity: 0;
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.m-likeThanks[data-is-shown=true][data-has-reaction-image=true] {
    -webkit-animation: replyToLikeWithImage-data-v-930e757a 6s .16s;
    animation: replyToLikeWithImage-data-v-930e757a 6s .16s
}

@-webkit-keyframes replyToLikeWithImage-data-v-930e757a {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    3% {
        opacity: 0;
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    4.5% {
        transform: translateY(-24px)
    }

    4.5% {
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    7.5% {
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    9% {
        visibility: visible;
        opacity: 1;
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    87.5% {
        transform: translateY(-40px)
    }

    91.6666666667% {
        transform: translateY(-42px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    95.8333333333% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        display: none;
        opacity: 0;
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes replyToLikeWithImage-data-v-930e757a {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    3% {
        opacity: 0;
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    4.5% {
        transform: translateY(-24px)
    }

    4.5% {
        transform: translateY(-48px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    7.5% {
        transform: translateY(-34px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    9% {
        visibility: visible;
        opacity: 1;
        transform: translateY(-40px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    87.5% {
        transform: translateY(-40px)
    }

    91.6666666667% {
        transform: translateY(-42px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    95.8333333333% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        display: none;
        opacity: 0;
        transform: translateY(-20px) scale(.95);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.m-likeAnimation {
    position: absolute;
    top: -28px;
    left: -28px;
    width: 80px;
    overflow: hidden;
    background-size: 0 0
}

.m-likeAnimation,
.m-likeAnimation:before {
    height: 80px;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/like_animation_sprite.36c59e8.png)
}

.m-likeAnimation:before {
    display: block;
    width: 3040px;
    content: "";
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 3040px 80px;
    transform: translateZ(0);
    -webkit-animation: likeAnimation-data-v-38df392f 1s steps(38) forwards;
    animation: likeAnimation-data-v-38df392f 1s steps(38) forwards
}

@-webkit-keyframes likeAnimation-data-v-38df392f {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes likeAnimation-data-v-38df392f {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-100%, 0, 0)
    }
}

.m-recommendNote__actionsIcon {
    position: relative;
    color: var(--color-lightGray)
}

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

    .m-recommendNote__actionsIcon:hover {
        color: var(--color-darkGray)
    }
}

.m-socialPlugin {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: -16px
}

.m-socialPlugin__item {
    color: var(--color-lightGray);
    text-align: center;
    cursor: pointer
}

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

    .m-socialPlugin__item:hover {
        color: var(--color-darkGray)
    }
}

@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
    }
}

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .m-socialPlugin__item--line:hover {
        color: #08f86a
    }
}

.m-socialPlugin__item--post {
    color: var(--color-noteGreen)
}

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

@media only screen and (min-width: 769px)and (prefers-color-scheme:dark) {
    html.ios-webview .m-socialPlugin__item--post:hover {
        color: #43d2b1
    }
}

.m-socialPlugin__link {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    line-height: 56px
}

.o-creatorProfile {
    display: flex
}

@media only screen and (min-width: 481px)and (max-width:768px) {
    .o-creatorProfile {
        margin-right: 40px;
        margin-left: 40px
    }
}

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

.o-creatorProfile__body {
    flex: 1;
    margin-left: 16px
}

.o-creatorProfile__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 8px
}

.o-creatorProfile__name {
    display: flex;
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    word-break: break-all
}

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

.o-creatorProfile__description {
    display: flex;
    align-items: flex-start
}

.o-creatorProfile__introduction {
    flex: 1
}

.o-creatorProfile__profile {
    margin-bottom: 8px;
    font-size: 14px;
    word-break: break-all
}

@media only screen and (max-width: 480px) {
    .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: flex;
    justify-content: flex-start
}

.o-creatorProfile__follow {
    position: relative;
    flex: 0 0 auto;
    margin-left: 16px
}

.is-clickable {
    cursor: pointer
}

.m-creatorSocialLinks {
    display: flex
}

.m-creatorSocialLinks__item {
    margin-right: 8px;
    line-height: 1;
    color: var(--color-lightGray)
}

@media only screen and (max-width: 480px) {
    .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 {
        transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-creatorSocialLinks__item:hover {
        color: var(--color-darkGray)
    }
}

.o-sideBannerArea {
    width: 264px
}

.o-sideBannerArea-enter-active,
.o-sideBannerArea-leave-active {
    opacity: 1;
    transition: opacity .4s cubic-bezier(1, 0, 0, 1)
}

.o-sideBannerArea-enter,
.o-sideBannerArea-leave-to {
    opacity: 0
}

.o-sideBannerArea__title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--color-darkGray)
}

.o-sideBannerArea__text {
    margin-left: 4px;
    font-size: 12px
}

.o-sideBannerArea__banner {
    display: block;
    width: 100%;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 4px
}

.o-sideBannerArea__banner:first-of-type {
    margin-top: 0
}

.o-sideBannerArea__image {
    display: block
}

.o-footer {
    position: relative;
    padding: 40px 16px 32px
}

@media print {
    .o-footer {
        display: none
    }
}

.o-footer__menu {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
}

.o-footer__item {
    margin-right: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
    font-size: 12px
}

.o-footer__item--strong {
    font-weight: 700
}

.o-footer__link {
    color: var(--color-darkGray)
}

@media only screen and (min-width: 769px) {
    .o-footer__link:hover {
        color: var(--color-black)
    }
}

.o-footer__powerdby {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px
}

.o-footer__powerdbyTitle {
    margin-right: 8px;
    font-size: 12px;
    color: var(--color-darkGray)
}

.o-footer--article {
    padding-bottom: 104px
}

.o-tableOfContents {
    padding: 16px;
    margin: 36px 0;
    background-color: #f7f9f9;
}

.o-tableOfContents__title#table-of-contents {
    font-size: 14px;
    position: relative;
    padding-left: 16px;
    margin: 0;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-darkGray)
}

.o-tableOfContents__title#table-of-contents:hover {
    color: #444;
    cursor: pointer
}

.o-tableOfContents__title#table-of-contents.is-open .o-tableOfContents__dropdown {
    transform: rotate(0deg)
}

.o-tableOfContents__dropdown {
    position: absolute;
    top: -1px;
    left: -8px;
    background-color: #f7f9f9;
    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:480px) {
    .o-tableOfContents__item {
        padding: 8px 0;
        font-size: 14px
    }
}

.o-tableOfContents__item:first-child {
    padding-top: 20px;
    border-top: none
}

.o-tableOfContents__link {
    display: inline-block;
    width: 100%;
    color: var(--color-darkGray);
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    background-color: #f7f9f9;
}

.o-tableOfContents__link:hover {
    color: #444
}

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