/*!
* ress.css • v2.0.4
* MIT License
* github.com/filipelinhares/ress
*/
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  -o-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: transparent
}

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: baseline
}

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: transparent;
  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: baseline
}

svg:not([fill]) {
  fill: currentColor
}

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

@-webkit-keyframes loadingAnimation {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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

@keyframes loadingAnimation {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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;
  word-wrap: break-word;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
  -webkit-font-kerning: normal;
  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-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%;
    -webkit-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
    color: #787c7b;
    background-color: #f7f9f9
  }

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

@font-face {
  font-family: "note monospace";
  font-style: normal;
  font-weight: 400;
  src: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/notemonospace.f347e59.woff) format("woff");
  src: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/notemonospace.4b4d5fa.ttf) format("truetype");
  font-display: swap
}

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

.modal-open {
  overflow: hidden
}

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

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

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

.modal-backdrop-enter {
  opacity: 0
}

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

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

.modal-backdrop-leave-active {
  -webkit-transition: all .2s ease-in-out;
  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;
  -webkit-transform: scale(.9);
  transform: scale(.9)
}

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

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

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

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

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

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

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

.modal-content-slide-leave-to {
  -webkit-transform: translateY(100%);
  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;
  border: 1px dashed #a8abb1
}

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

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

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

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

@-webkit-keyframes loadingAnimation-data-v-4b970f2a {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-4b970f2a {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-homescreenBanner {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 8px;
  background-color: #f2f2f2
}

@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(0, 0, 0, .05)
}

@media only screen and (max-width:479px) {
  .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 {
  -webkit-box-flex: 2;
  flex-grow: 2;
  font-size: 14px;
  font-weight: 700
}

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

.o-homescreenBanner__button {
  padding: 8px
}

.o-homescreenBanner__close {
  color: #a8abb1
}

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

@-webkit-keyframes loadingAnimation-data-v-1567e10a {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-1567e10a {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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

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

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

@media only screen and (max-width:479px) {
  .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;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  -webkit-transform: translate(0);
  transform: translate(0)
}

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

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

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

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

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

.o-navBar.is-stickyHide {
  -webkit-transform: translateY(-200%);
  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;
  -webkit-transition: max-height .3s ease;
  transition: max-height .3s ease
}

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

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

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

@-webkit-keyframes loadingAnimation-data-v-3c321dc2 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-3c321dc2 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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

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

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

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

.o-navbarTop__nav {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  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: #fff;
  border-bottom: 1px solid #e6e6e6
}

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

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

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

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

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

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

  .o-navbarTop__navItem--home:hover {
    color: #787c7b
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-e26e4412 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-e26e4412 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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

.m-siteLogo__image {
    max-width: 250px;
    max-height: 100px;
    vertical-align: top;
  }

  @media only screen and (max-width:479px) {
    .m-siteLogo__image {
      max-width: 160px;
      max-height: 64px;
    }
  }

  @media only screen and (max-width:359px) {
    .m-siteLogo__image {
      max-width: 140px;
      max-height: 58px
    }
  }

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

@-webkit-keyframes loadingAnimation-data-v-7c9718b1 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-7c9718b1 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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

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

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

.a-button[data-type=none] {
  color: #787c7b
}

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

  .a-button[data-type=none]:hover {
    color: #222
  }
}

.a-button[data-type=disabled] {
  color: hsla(0, 0%, 100%, .5);
  background-color: #ccc
}

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

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

.a-button[data-type=basic] {
  color: #222;
  border: 1px solid #e6e6e6
}

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

  .a-button[data-type=basic]:hover {
    border: 1px solid #a8abb1
  }
}

.a-button[data-type=primary] {
  color: #fff;
  background-color: #2cb696;
  background-color: var(--customPrimaryColor)
}

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

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

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

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

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

.a-button[data-type=danger] {
  color: #fff;
  background-color: #ed4956
}

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

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

.a-button[data-type=twitter] {
  color: #fff;
  background-color: #55acee
}

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

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

.a-button[data-type=facebook] {
  color: #fff;
  background-color: #1877f2
}

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

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

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

@media only screen and (max-width:479px) {
  .a-button[data-size=small] {
    padding-right: 12px;
    padding-left: 12px
  }
}

.a-button[data-size=small] .a-button__inner {
  font-size: 12px
}

.a-button[data-size=large] {
  min-height: 48px
}

.a-button[data-size=large] .a-button__inner {
  font-size: 16px
}

.a-button[data-width=fit] {
  width: 100%
}

.a-button[data-width=square] {
  width: 32px
}

.a-button[data-disable-focus=false]:active,
.a-button[data-disable-focus=false]:hover,
.a-button[data-disable-focus=true]:focus {
  outline: none
}

.a-button:disabled {
  color: hsla(0, 0%, 100%, .5);
  cursor: not-allowed;
  background-color: #ccc;
  border: none;
  -webkit-transition: none;
  transition: none
}

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

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

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

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

@-webkit-keyframes loadingAnimation-data-v-7c9718b1 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-7c9718b1 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.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:root {
  --noteGreen: #2cb696;
  --noteDarkenGreen: #228d74;
  --customPrimaryColor: #2cb696;
  --customPrimaryDarkenColor: #228d74;
  --z-index-modal: 9999;
  --z-index-coast: 10000
}

@-webkit-keyframes loadingAnimation-data-v-40d4f4cd {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-40d4f4cd {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.a-image {
  background-color: #fff
}

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

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

@-webkit-keyframes loadingAnimation-data-v-472b3468 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-472b3468 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-searchWindow {
  width: 280px
}

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

.o-searchWindow__header {
  position: relative;
  padding: 12px 16px;
  cursor: default
}

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

.o-searchWindow__deleteAll {
  position: absolute;
  top: 12px;
  right: 16px;
  color: #2cb696;
  color: var(--customPrimaryColor);
  font-size: 12px;
  cursor: pointer
}

.o-searchWindow__body {
  width: 100%
}

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

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

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

.o-searchWindow__item--header {
  border-bottom: 1px solid #f2f2f2
}

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

.o-searchWindow__link {
  position: relative;
  display: block;
  display: -webkit-box;
  display: flex;
  -webkit-box-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  align-items: center;
  padding: 12px 16px;
  overflow: hidden;
  color: #787c7b;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px
}

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

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

.o-searchWindow__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.o-searchWindow__hash {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin-right: 8px;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 32px
}

.o-searchWindow__hash:before {
  font-weight: 700;
  color: #787c7b;
  content: "#";
  font-size: 16px
}

.o-searchWindow__official {
  position: absolute;
  top: 8px;
  left: 8px;
  color: #2cb696;
  color: var(--customPrimaryColor)
}

.o-searchWindow__delete {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 12px 16px;
  color: #a8abb1;
  cursor: pointer
}

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

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

@-webkit-keyframes loadingAnimation-data-v-f037c0a8 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-f037c0a8 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.m-iconWithtext {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  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: #a8abb1;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

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

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

.m-iconWithtext__close {
  padding: 8px;
  color: #a8abb1;
  cursor: pointer
}

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

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

.m-iconWithtext__button {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 8px;
  color: #a8abb1;
  cursor: pointer
}

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

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

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

@-webkit-keyframes loadingAnimation-data-v-84a6d3fa {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-84a6d3fa {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@-webkit-keyframes loadingAnimation {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@font-face {
  font-family: "icon";
  src: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.5227f28.eot);
  src: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.5227f28.eot?#iefix) format("eot"), url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.59ea0d8.woff) format("woff"), url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/fonts/icon.c55b483.ttf) format("truetype"), url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/icon.57f1c16.svg#icon) format("svg");
  font-display: swap
}

button.a-icon {
  cursor: pointer
}

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

  button.a-icon:hover {
    color: #787c7b
  }
}

.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: transparent;
  border: none;
  border-radius: 24px;
  -webkit-appearance: none;
  -moz-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;
  -webkit-font-feature-settings: normal;
  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--add:before {
  content: "\f001"
}

.a-icon--amazon:before {
  content: "\f002"
}

.a-icon--arrowback:before {
  content: "\f003"
}

.a-icon--arrowdropdown:before {
  content: "\f004"
}

.a-icon--arrowforward:before {
  content: "\f005"
}

.a-icon--arrowright:before {
  content: "\f006"
}

.a-icon--attachFile:before {
  content: "\f007"
}

.a-icon--badge:before {
  content: "\f008"
}

.a-icon--camera:before {
  content: "\f009"
}

.a-icon--cameraPlus:before {
  content: "\f00a"
}

.a-icon--check:before {
  content: "\f00b"
}

.a-icon--checkCircle:before {
  content: "\f00c"
}

.a-icon--circle:before {
  content: "\f00d"
}

.a-icon--close:before {
  content: "\f00e"
}

.a-icon--code:before {
  content: "\f00f"
}

.a-icon--comment:before {
  content: "\f010"
}

.a-icon--commentFill:before {
  content: "\f011"
}

.a-icon--copy:before {
  content: "\f012"
}

.a-icon--create:before {
  content: "\f013"
}

.a-icon--download:before {
  content: "\f014"
}

.a-icon--drag_handle:before {
  content: "\f015"
}

.a-icon--editorBold:before {
  content: "\f016"
}

.a-icon--editorCenter:before {
  content: "\f017"
}

.a-icon--editorCode:before {
  content: "\f018"
}

.a-icon--editorEmbed:before {
  content: "\f019"
}

.a-icon--editorFileUpload:before {
  content: "\f01a"
}

.a-icon--editorImage:before {
  content: "\f01b"
}

.a-icon--editorImageAdd:before {
  content: "\f01c"
}

.a-icon--editorLarge:before {
  content: "\f01d"
}

.a-icon--editorLink:before {
  content: "\f01e"
}

.a-icon--editorMinphoto:before {
  content: "\f01f"
}

.a-icon--editorPc:before {
  content: "\f020"
}

.a-icon--editorQuotation:before {
  content: "\f021"
}

.a-icon--editorSmall:before {
  content: "\f022"
}

.a-icon--editorTitle:before {
  content: "\f023"
}

.a-icon--editorTrash:before {
  content: "\f024"
}

.a-icon--expandless:before {
  content: "\f025"
}

.a-icon--expandmore:before {
  content: "\f026"
}

.a-icon--eye:before {
  content: "\f027"
}

.a-icon--facebookFill:before {
  content: "\f028"
}

.a-icon--fileDownload:before {
  content: "\f029"
}

.a-icon--firstpage:before {
  content: "\f02a"
}

.a-icon--flagFill:before {
  content: "\f02b"
}

.a-icon--follow:before {
  content: "\f02c"
}

.a-icon--following:before {
  content: "\f02d"
}

.a-icon--gift:before {
  content: "\f02e"
}

.a-icon--hatenaFill:before {
  content: "\f02f"
}

.a-icon--heart:before {
  content: "\f030"
}

.a-icon--heartFill:before {
  content: "\f031"
}

.a-icon--help:before {
  content: "\f032"
}

.a-icon--home:before {
  content: "\f033"
}

.a-icon--image:before {
  content: "\f034"
}

.a-icon--info:before {
  content: "\f035"
}

.a-icon--instagramFill:before {
  content: "\f036"
}

.a-icon--keyboard:before {
  content: "\f037"
}

.a-icon--lastpage:before {
  content: "\f038"
}

.a-icon--lightbulb:before {
  content: "\f039"
}

.a-icon--lineFill:before {
  content: "\f03a"
}

.a-icon--linkFill:before {
  content: "\f03b"
}

.a-icon--lock:before {
  content: "\f03c"
}

.a-icon--magazine:before {
  content: "\f03d"
}

.a-icon--magazineAdd:before {
  content: "\f03e"
}

.a-icon--magazineGrid:before {
  content: "\f03f"
}

.a-icon--magazineList:before {
  content: "\f040"
}

.a-icon--magazineStream:before {
  content: "\f041"
}

.a-icon--mail:before {
  content: "\f042"
}

.a-icon--more:before {
  content: "\f043"
}

.a-icon--navbefore:before {
  content: "\f044"
}

.a-icon--navnext:before {
  content: "\f045"
}

.a-icon--note:before {
  content: "\f046"
}

.a-icon--noteAdd:before {
  content: "\f047"
}

.a-icon--notification:before {
  content: "\f048"
}

.a-icon--pause:before {
  content: "\f049"
}

.a-icon--person:before {
  content: "\f04a"
}

.a-icon--pin:before {
  content: "\f04b"
}

.a-icon--place:before {
  content: "\f04c"
}

.a-icon--playFill:before {
  content: "\f04d"
}

.a-icon--postNote:before {
  content: "\f04e"
}

.a-icon--public:before {
  content: "\f04f"
}

.a-icon--return:before {
  content: "\f050"
}

.a-icon--rss:before {
  content: "\f051"
}

.a-icon--satisfied:before {
  content: "\f052"
}

.a-icon--search:before {
  content: "\f053"
}

.a-icon--setting:before {
  content: "\f054"
}

.a-icon--share:before {
  content: "\f055"
}

.a-icon--shoppingcart:before {
  content: "\f056"
}

.a-icon--shoppingcartFill:before {
  content: "\f057"
}

.a-icon--sort:before {
  content: "\f058"
}

.a-icon--tag:before {
  content: "\f059"
}

.a-icon--time:before {
  content: "\f05a"
}

.a-icon--topic:before {
  content: "\f05b"
}

.a-icon--twitterFill:before {
  content: "\f05c"
}

.a-icon--undo:before {
  content: "\f05d"
}

.a-icon--view:before {
  content: "\f05e"
}

.a-icon--viewOff:before {
  content: "\f05f"
}

.a-icon--warning:before {
  content: "\f060"
}

.a-icon--yen:before {
  content: "\f061"
}

.a-icon--yenFill:before {
  content: "\f062"
}

.a-icon--youtubeFill:before {
  content: "\f063"
}

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

@-webkit-keyframes loadingAnimation-data-v-0a8a3793 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-0a8a3793 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-notification__popover {
  width: 300px;
  height: 400px;
  background-color: #fff
}

@media only screen and (max-width:479px) {
  .o-notification__popover {
    width: 100%;
    height: 100%
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-08842544 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-08842544 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.m-notificationBell {
  position: relative
}

.m-notificationBell__icon {
  color: #a8abb1;
  cursor: pointer
}

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

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

.m-notificationBell__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 2px 4px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  background-color: #ed4956;
  border-radius: 4px;
  font-size: 12px
}

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

@-webkit-keyframes loadingAnimation-data-v-418a0247 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-418a0247 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-usermenuPopover__avatar {
  cursor: pointer;
  opacity: .9
}

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

  .o-usermenuPopover__avatar:hover {
    opacity: 1
  }
}

.o-usermenuPopover__body {
  position: relative;
  width: 220px
}

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

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

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

.o-usermenuPopover__item.is-first {
  border-top: none
}

.o-usermenuPopover__item--separate {
  position: relative
}

.o-usermenuPopover__item--separate:before {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 8px;
  margin-bottom: 8px;
  content: "";
  background-color: #f2f2f2
}

.o-usermenuPopover__item--separate:empty:before {
  height: 0;
  margin: 0
}

.o-usermenuPopover__item--profile {
  display: -webkit-box;
  display: flex
}

.o-usermenuPopover__item--profile>:first-child {
  -webkit-box-flex: 2;
  flex-grow: 2
}

.o-usermenuPopover__header {
  display: block;
  padding: 4px 16px;
  color: #787c7b
}

.o-usermenuPopover__link {
  display: block;
  width: 100%;
  padding: 8px 16px;
  color: #222;
  text-align: left
}

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

@media only screen and (min-width:769px) {
  .o-usermenuPopover__link {
    cursor: pointer
  }

  .o-usermenuPopover__link:hover {
    background-color: #f7f9f9
  }
}

.o-usermenuPopover__probanner {
  display: block
}

@media only screen and (max-width:479px) {
  .o-usermenuPopover__probanner {
    margin: 14px 16px;
    overflow: hidden;
    border-radius: 4px
  }
}

.o-usermenuPopover__probannerImage {
  width: 100%;
  vertical-align: top
}

.o-usermenuPopover__profile {
  display: block;
  font-weight: 700;
  word-break: break-all
}

.o-usermenuPopover__summary {
  display: block;
  font-size: 12px;
  color: #787c7b
}

.o-usermenuPopover__onboardingItem {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 16px
}

@media only screen and (min-width:769px) {
  .o-usermenuPopover__onboardingItem {
    cursor: pointer
  }

  .o-usermenuPopover__onboardingItem:hover {
    background-color: #f7f9f9
  }
}

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

.o-usermenuPopover__onboardingIcon {
  padding-left: 8px
}

.o-usermenuPopover__onboardingIconImage {
  width: 24px;
  height: 24px;
  padding: 4px;
  color: #fff;
  border-radius: 50%
}

.o-usermenuPopover__onboardingIconImage[data-type=twitter] {
  background-color: #55acee
}

.o-usermenuPopover__onboardingLabel {
  font-size: 12px;
  font-weight: 700
}

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

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

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

.o-usermenuPopover__onboardingClose {
  position: absolute;
  top: 8px;
  right: 8px;
  line-height: 1;
  color: #a8abb1;
  cursor: pointer
}

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

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

@-webkit-keyframes loadingAnimation-data-v-59f24ae5 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-59f24ae5 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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

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

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

.a-button[data-type=none] {
  color: #787c7b
}

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

  .a-button[data-type=none]:hover {
    color: #222
  }
}

.a-button[data-type=disabled] {
  color: hsla(0, 0%, 100%, .5);
  background-color: #ccc
}

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

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

.a-button[data-type=basic] {
  color: #222;
  border: 1px solid #e6e6e6
}

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

  .a-button[data-type=basic]:hover {
    border: 1px solid #a8abb1
  }
}

.a-button[data-type=primary] {
  color: #fff;
  background-color: #2cb696;
  background-color: var(--customPrimaryColor)
}

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

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

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

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

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

.a-button[data-type=danger] {
  color: #fff;
  background-color: #ed4956
}

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

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

.a-button[data-type=twitter] {
  color: #fff;
  background-color: #55acee
}

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

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

.a-button[data-type=facebook] {
  color: #fff;
  background-color: #1877f2
}

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

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

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

@media only screen and (max-width:479px) {
  .a-button[data-size=small] {
    padding-right: 12px;
    padding-left: 12px
  }
}

.a-button[data-size=small] .a-button__inner {
  font-size: 12px
}

.a-button[data-size=large] {
  min-height: 48px
}

.a-button[data-size=large] .a-button__inner {
  font-size: 16px
}

.a-button[data-width=fit] {
  width: 100%
}

.a-button[data-width=square] {
  width: 32px
}

.a-button[data-disable-focus=false]:active,
.a-button[data-disable-focus=false]:hover,
.a-button[data-disable-focus=true]:focus {
  outline: none
}

.a-button:disabled {
  color: hsla(0, 0%, 100%, .5);
  cursor: not-allowed;
  background-color: #ccc;
  border: none;
  -webkit-transition: none;
  transition: none
}

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

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

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

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

@-webkit-keyframes loadingAnimation-data-v-9346dab8 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-9346dab8 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.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%
}

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

@-webkit-keyframes loadingAnimation-data-v-3545bbc6 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-3545bbc6 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-postNote__body {
  width: 440px;
  padding: 24px
}

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

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

@media only screen and (max-width:479px) {
  .o-postNote__list {
    -webkit-box-pack: start;
    justify-content: flex-start
  }
}

.o-postNote__item {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin-right: 8px;
  margin-left: 8px;
  white-space: nowrap
}

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

@media only screen and (max-width:479px) {
  .o-postNote__item {
    width: 33.3333%;
    margin-right: 0;
    margin-bottom: 24px;
    margin-left: 0
  }
}

.o-postNote__item.is-disabled {
  pointer-events: none;
  cursor: default
}

.o-postNote__item.is-disabled .o-postNote__itemIcon--textnote {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwIiB2aWV3Qm94PSIwIDAgNjAgNjAiIHdpZHRoPSI2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBvcGFjaXR5PSIuMyI+PHBhdGggZD0ibTYwIDMwYzAgMTYuNTY4LTEzLjQzMiAzMC0zMCAzMHMtMzAtMTMuNDMyLTMwLTMwIDEzLjQzMi0zMCAzMC0zMCAzMCAxMy40MzIgMzAgMzAiIGZpbGw9IiNkZWRlZGUiLz48cGF0aCBkPSJtMTcuODE4IDM1LjczMy0zLjgxOCAxMi4yNjcgMTIuMjY3LTMuODE4eiIgZmlsbD0iI2Y1ZjVmNSIvPjxwYXRoIGQ9Im00Ny4yNSAxNy41MDctNS42MDItNS42MDMtNC4xMzcgNC4xMzYtMTkuNjk0IDE5LjY5MyA1LjYwNCA1LjYwNCAyLjg0NiAyLjg0NSAxOS42OTMtMTkuNjkzIDQuMTM3LTQuMTM2eiIgZmlsbD0iI2U4ZThlOCIvPjxwYXRoIGQ9Im00Ny4yNSAxNy41MDctNS42MDItNS42MDMtNC4xMzcgNC4xMzYgOC40NDggOC40NDkgNC4xMzctNC4xMzZ6IiBmaWxsPSIjYzRjNGM0Ii8+PHBhdGggZD0ibTE0IDQ4IDUuNjA3LTEuNzQ1LTMuODYyLTMuODYzeiIgZmlsbD0iI2IwYWVhOSIvPjxwYXRoIGQ9Im0yMy40MiA0MS4zMzcgMi44NDcgMi44NDQgMTkuNjkzLTE5LjY5MS0yLjg0Ni0yLjg0NnoiIGZpbGw9IiNkYmRiZGIiLz48cGF0aCBkPSJtNDcuMjUgMTcuNTA3LTQuMTM2IDQuMTM2IDIuODQ2IDIuODQ2IDQuMTM2LTQuMTM2eiIgZmlsbD0iI2FiYWJhYiIvPjwvZz48L3N2Zz4=)
}

.o-postNote__item.is-disabled .o-postNote__itemIcon--soundnote {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwIiB2aWV3Qm94PSIwIDAgNjAgNjAiIHdpZHRoPSI2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBvcGFjaXR5PSIuMyI+PHBhdGggZD0ibTYwIDMwYzAgMTYuNTY4LTEzLjQzMiAzMC0zMCAzMHMtMzAtMTMuNDMyLTMwLTMwIDEzLjQzMi0zMCAzMC0zMCAzMCAxMy40MzIgMzAgMzAiIGZpbGw9IiNkZWRlZGUiLz48cGF0aCBkPSJtMjAgNDMuMTRjMCAxLjAyNzI0OTYtLjgzMjc1MDQgMS44Ni0xLjg2IDEuODZoLTEuMjhjLTEuMDI3MjQ5NiAwLTEuODYtLjgzMjc1MDQtMS44Ni0xLjg2di0xNC4yOGMwLTEuMDI3MjQ5Ni44MzI3NTA0LTEuODYgMS44Ni0xLjg2aDEuMjhjMS4wMjcyNDk2IDAgMS44Ni44MzI3NTA0IDEuODYgMS44NnptMjQgMGMwIDEuMDI3MjQ5Ni0uODMyNzUwNCAxLjg2LTEuODYgMS44NmgtMS4yOGMtMS4wMjcyNDk2IDAtMS44Ni0uODMyNzUwNC0xLjg2LTEuODZ2LTE0LjI4YzAtMS4wMjcyNDk2LjgzMjc1MDQtMS44NiAxLjg2LTEuODZoMS4yOGMxLjAyNzI0OTYgMCAxLjg2LjgzMjc1MDQgMS44NiAxLjg2eiIgZmlsbD0iI2IwYjBiMCIvPjxwYXRoIGQ9Im0zMC4wOCAxNGM5LjIxNiAwIDEzLjkyIDMuODM2IDEzLjkyIDEyLjIwM3YxOS43OTdoMS4zOGMuNDYzIDAgNS42Mi0yLjM5NCA1LjYyLTUuNjk4di03LjcwN2MwLTMuMzAzLTIuNzg5LTUuODk2LTIuNzg5LTUuODk2cy0xLjE5NS0xNy4yMjUtMTguMTMtMTcuMjI1bC0uMDguMDU4di0uMDU4Yy0xNy4xODMgMC0xOC4xNzIgMTcuMjI1LTE4LjE3MiAxNy4yMjVzLTIuODI5IDIuNTkzLTIuODI5IDUuODk2djcuNzA3YzAgMy4zMDQgNS4xNTcgNS42OTggNS42MiA1LjY5OGguMzh2LTE5Ljc5N2MxLTguMzY3IDUuNDU0LTEyLjIwMyAxNS0xMi4yMDN6IiBmaWxsPSIjZjVmNWY1Ii8+PC9nPjwvc3ZnPg==)
}

.o-postNote__item.is-disabled .o-postNote__itemLabel {
  color: #a8abb1
}

.o-postNote__itemLink {
  display: block;
  cursor: pointer
}

.o-postNote__itemIcon {
  display: block;
  width: 60px;
  height: 60px;
  margin-right: auto;
  margin-bottom: 8px;
  margin-left: auto
}

@media only screen and (max-width:479px) {
  .o-postNote__itemIcon {
    width: 72px;
    height: 72px;
    background-size: 72px
  }
}

.o-postNote__itemIcon--talknote {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwIiB3aWR0aD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJtNjAgMzBjMCAxNi41NjktMTMuNDMxIDMwLTMwIDMwcy0zMC0xMy40MzEtMzAtMzAgMTMuNDMxLTMwIDMwLTMwIDMwIDEzLjQzMSAzMCAzMCIgZmlsbD0iIzJkY2RiNCIvPjxwYXRoIGQ9Im0zMC40NyAxMi41MDNjLTEwLjk4LS4xODEtMTkuOTg2IDcuNzEtMjAuMTIgMTcuNjI3LS4xMzMgOS45MTYgOC42NTggMTYuNjU3IDE5LjYzNiAxNi44MzggMS4wNTUuMDE3IDMuMTA0LS4xNjggMy4xMDQtLjE2OGw3LjQxIDUuN3YtNi41YzAtMS4xOTMtLjI4LTEuNjctLjU1Ni0uMjY2IDYuNzktNC4yODQgMTAuMDg1LTkuMzE0IDEwLjE2MS0xNC45NS4xMzQtOS45MTYtOC42NTctMTguMTAxLTE5LjYzNS0xOC4yOCIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0yMy42NjYgMzAuNWEyLjUgMi41IDAgMSAxIC00Ljk5OSAwIDIuNSAyLjUgMCAwIDEgNSAwbTkuMTY3IDBhMi41IDIuNSAwIDEgMSAtNSAwIDIuNSAyLjUgMCAwIDEgNSAwbTkuMTY2IDBhMi41IDIuNSAwIDEgMSAtNSAwIDIuNSAyLjUgMCAwIDEgNSAwIiBmaWxsPSIjNDk0ODQ2Ii8+PC9nPjwvc3ZnPg==)
}

.o-postNote__itemIcon--imagenote {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwIiB3aWR0aD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxtYXNrIGlkPSJhIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJtLjgwNyAxaDEuMjc5di0uMDNoLTEuMjc5eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9tYXNrPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0ibTYwIDMwYzAgMTYuNTY4LTEzLjQzMiAzMC0zMCAzMHMtMzAtMTMuNDMyLTMwLTMwIDEzLjQzMi0zMCAzMC0zMCAzMCAxMy40MzIgMzAgMzAiIGZpbGw9IiNiZWU2ZjAiLz48cGF0aCBkPSJtMiAxIC4wODYtLjAwMmMtLjQyOS0uMDAxLS44NTMtLjAxNi0xLjI3OS0uMDI4LjM5Ny4wMTUuNzkzLjAzIDEuMTkzLjAzIiBmaWxsPSIjYmVlNmYwIiBtYXNrPSJ1cmwoI2EpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOCA1OSkiLz48cGF0aCBkPSJtMzguMDQ0IDM5LjM0NyAxMS45MiAxMy4wNGEzMC4xNTQgMzAuMTU0IDAgMCAwIDUuMjI2LTYuMTAzbC0xMS43NDMtMTIuNzQxeiIgZmlsbD0iIzZlOGMyZSIvPjxwYXRoIGQ9Im0zMCA2MGM3LjY2NyAwIDE0LjY2LTIuODgxIDE5Ljk2My03LjYxM2wtMTEuOTE5LTEzLjA0LTExLjc0My0xMi44NDctMjAuNjIxIDIxLjA1NmM1LjQ1IDcuNTM2IDE0LjMwOSAxMi40NDQgMjQuMzIgMTIuNDQ0IiBmaWxsPSIjOTBiMjNkIi8+PHBhdGggZD0ibTQ1LjE1NiAyMC44NDVhMy44NDUgMy44NDUgMCAwIDEgLTMuODQ2IDMuODQ2IDMuODQ1IDMuODQ1IDAgMCAxIC0zLjg0Ny0zLjg0NiAzLjg0NSAzLjg0NSAwIDAgMSAzLjg0Ny0zLjg0NiAzLjg0NSAzLjg0NSAwIDAgMSAzLjg0NiAzLjg0NiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=)
}

.o-postNote__itemIcon--textnote {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwIiB3aWR0aD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJtNjAgMzBjMCAxNi41NjgtMTMuNDMyIDMwLTMwIDMwcy0zMC0xMy40MzItMzAtMzAgMTMuNDMyLTMwIDMwLTMwIDMwIDEzLjQzMiAzMCAzMCIgZmlsbD0iI2ZmZDAwMyIvPjxwYXRoIGQ9Im0xNy44MTggMzUuNzMzLTMuODE4IDEyLjI2NyAxMi4yNjctMy44MTh6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTQ3LjI1IDE3LjUwNy01LjYwMi01LjYwMy00LjEzNyA0LjEzNi0xOS42OTQgMTkuNjkzIDUuNjA0IDUuNjA0IDIuODQ2IDIuODQ1IDE5LjY5My0xOS42OTMgNC4xMzctNC4xMzZ6IiBmaWxsPSIjZmZkMDAzIi8+PHBhdGggZD0ibTQ3LjI1IDE3LjUwNy01LjYwMi01LjYwMy00LjEzNyA0LjEzNiA4LjQ0OCA4LjQ0OSA0LjEzNy00LjEzNnoiIGZpbGw9IiNkZDcwNDciLz48cGF0aCBkPSJtMTQgNDggNS42MDctMS43NDUtMy44NjItMy44NjN6IiBmaWxsPSIjNDk0ODQ2Ii8+PHBhdGggZD0ibTIzLjQyIDQxLjMzNyAyLjg0NyAyLjg0NCAxOS42OTMtMTkuNjkxLTIuODQ2LTIuODQ2eiIgZmlsbD0iI2U0YmEyYSIvPjxwYXRoIGQ9Im00Ny4yNSAxNy41MDctNC4xMzYgNC4xMzYgMi44NDYgMi44NDYgNC4xMzYtNC4xMzZ6IiBmaWxsPSIjYzU2NTQ1Ii8+PC9nPjwvc3ZnPg==)
}

.o-postNote__itemIcon--soundnote {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwIiB3aWR0aD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJtNjAgMzBjMCAxNi41NjgtMTMuNDMyIDMwLTMwIDMwcy0zMC0xMy40MzItMzAtMzAgMTMuNDMyLTMwIDMwLTMwIDMwIDEzLjQzMiAzMCAzMCIgZmlsbD0iI2RkNzA0NyIvPjxwYXRoIGQ9Im0yMCA0My4xNGExLjg2IDEuODYgMCAwIDEgLTEuODYgMS44NmgtMS4yOGExLjg2IDEuODYgMCAwIDEgLTEuODYtMS44NnYtMTQuMjhhMS44NiAxLjg2IDAgMCAxIDEuODYtMS44NmgxLjI4YTEuODYgMS44NiAwIDAgMSAxLjg2IDEuODZ6bTI0IDBhMS44NiAxLjg2IDAgMCAxIC0xLjg2IDEuODZoLTEuMjhhMS44NiAxLjg2IDAgMCAxIC0xLjg2LTEuODZ2LTE0LjI4YTEuODYgMS44NiAwIDAgMSAxLjg2LTEuODZoMS4yOGExLjg2IDEuODYgMCAwIDEgMS44NiAxLjg2eiIgZmlsbD0iIzQ5NDg0NiIvPjxwYXRoIGQ9Im0zMC4wOCAxNGM5LjIxNiAwIDEzLjkyIDMuODM2IDEzLjkyIDEyLjIwM3YxOS43OTdoMS4zOGMuNDYzIDAgNS42Mi0yLjM5NCA1LjYyLTUuNjk4di03LjcwN2MwLTMuMzAzLTIuNzg5LTUuODk2LTIuNzg5LTUuODk2cy0xLjE5NS0xNy4yMjUtMTguMTMtMTcuMjI1bC0uMDguMDU4di0uMDU4Yy0xNy4xODMgMC0xOC4xNzIgMTcuMjI1LTE4LjE3MiAxNy4yMjVzLTIuODI5IDIuNTkzLTIuODI5IDUuODk2djcuNzA3YzAgMy4zMDQgNS4xNTcgNS42OTggNS42MiA1LjY5OGguMzh2LTE5Ljc5N2MxLTguMzY3IDUuNDU0LTEyLjIwMyAxNS0xMi4yMDN6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==)
}

.o-postNote__itemIcon--movienote {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwIiB3aWR0aD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJtNjAgMzBjMCAxNi41NjgtMTMuNDMyIDMwLTMwIDMwcy0zMC0xMy40MzItMzAtMzAgMTMuNDMyLTMwIDMwLTMwIDMwIDEzLjQzMiAzMCAzMCIgZmlsbD0iIzQ5NDg0NiIvPjxwYXRoIGQ9Im00OSAxMS41aC0zNy43OTVjLS44ODYgMC0xLjcwNS42MTUtMS43MDUgMS41djMyLjg5N2MwIC44ODYuNzE3IDEuNjAzIDEuNjAzIDEuNjAzaDM3Ljc5NWMuODg0IDAgMS42MDItLjcxNyAxLjYwMi0xLjYwM3YtMzIuODk3YzAtLjg4NS0uNjE2LTEuNS0xLjUtMS41IiBmaWxsPSIjZTFlNWU3IiBvcGFjaXR5PSIuMyIvPjxwYXRoIGQ9Im0xMS41IDQ1LjVoNXYtNGgtNXptMC03aDV2LTRoLTV6bTAtN2g1di00aC01em0wLTdoNXYtNGgtNXptMC03aDV2LTRoLTV6bTMyIDI4aDV2LTRoLTV6bTAtN2g1di00aC01em0wLTdoNXYtNGgtNXptMC03aDV2LTRoLTV6bTAtN2g1di00aC01eiIgZmlsbD0iIzQ5NDg0NiIvPjxwYXRoIGQ9Im0yNiAyNHYxMC45bDkuMDgzLTUuNjY4eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=)
}

.o-postNote__itemLabel {
  display: block
}

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

.o-postNote__attention {
  padding-top: 16px;
  line-height: 1.5
}

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

@-webkit-keyframes loadingAnimation-data-v-7f1904c0 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-7f1904c0 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-navbarMenu__notification {
  padding: 2px 4px;
  margin-left: 4px;
  line-height: 1;
  color: #fff;
  background-color: #787c7b;
  border-radius: 4px;
  font-size: 12px
}

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

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-navbarMenu__menu {
    display: -webkit-box;
    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 {
    -webkit-box-flex: 0;
    flex: 0 0 auto
  }
}

@media only screen and (max-width:768px) {
  .o-navbarMenu__menu {
    display: -webkit-box;
    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
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-127cad20 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-127cad20 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.a-navItem {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start
}

@media only screen and (max-width:768px) {
  .a-navItem {
    -webkit-box-flex: 0;
    flex: 0 0 auto
  }
}

.a-navItem__item {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 700;
  line-height: 1;
  color: #787c7b;
  white-space: nowrap;
  cursor: pointer
}

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

.a-navItem__item:before {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  pointer-events: none;
  content: "";
  background-color: transparent
}

@media only screen and (max-width:768px) {
  .a-navItem__item {
    -webkit-box-flex: 0;
    flex: 0 0 auto
  }
}

@media only screen and (min-width:769px) {
  .a-navItem__item:hover:before {
    background-color: #222;
    -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
    transition: background-color .2s cubic-bezier(1, 0, 0, 1)
  }
}

.a-navItem__item.is-active {
  color: #222
}

.a-navItem__item.is-active:before {
  background-color: #222
}

.a-navItem__item--size_small {
  height: 40px;
  padding: 0 13px;
  font-size: 13px
}

@media only screen and (max-width:768px) {
  .a-navItem__item--size_small {
    padding: 0 8px
  }
}

.a-navItem__item--size_medium {
  height: 48px;
  padding: 0 16px;
  font-size: 14px
}

@media only screen and (max-width:768px) {
  .a-navItem__item--size_medium {
    font-size: 13px;
    height: 40px;
    padding: 0 8px
  }
}

.a-navItem__item--size_large {
  height: 64px;
  padding: 0 16px;
  font-size: 14px
}

@media only screen and (max-width:768px) {
  .a-navItem__item--size_large {
    padding: 0 8px
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-022e6afb {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-022e6afb {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

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

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

@media only screen and (max-width:479px) {
  .activationMessage {
    padding: 5px;
    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-category:root {
  --noteGreen: #2cb696;
  --noteDarkenGreen: #228d74;
  --customPrimaryColor: #2cb696;
  --customPrimaryDarkenColor: #228d74;
  --z-index-modal: 9999;
  --z-index-coast: 10000
}

@-webkit-keyframes loadingAnimation-data-v-427da729 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-427da729 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.p-category {
  min-height: 100vh
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .p-category {
    padding-top: 16px
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .p-category {
    padding-top: 16px
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-19a44271 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-19a44271 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-container {
  width: 940px;
  margin: 0 auto
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-container {
    width: 610px
  }
}

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

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

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-container__body {
    margin-right: 16px;
    margin-bottom: 48px;
    margin-left: 16px
  }
}

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

.o-container--column_1column {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 100%;
  max-width: 610px;
  margin: auto
}

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

@media only screen and (max-width:479px) {
  .o-container--column_1column {
    width: auto;
    padding-top: 0;
    padding-bottom: 0
  }
}

.o-container--column_1column .o-container__header {
  width: 100%;
  margin-bottom: 16px
}

@media only screen and (max-width:479px) {
  .o-container--column_1column .o-container__header {
    margin-bottom: 0
  }
}

.o-container--column_1column .o-container__body {
  width: 610px;
  margin-top: 0;
  margin-bottom: 0
}

@media only screen and (max-width:768px) {
  .o-container--column_1column .o-container__body {
    width: 100%;
    margin-right: 0;
    margin-left: 0
  }
}

.o-container--column_2column {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: auto;
  max-width: 940px;
  margin: auto
}

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

@media only screen and (max-width:479px) {
  .o-container--column_2column {
    padding-top: 0;
    padding-bottom: 0
  }
}

.o-container--column_2column .o-container__header {
  width: 100%;
  margin-bottom: 16px
}

@media only screen and (max-width:479px) {
  .o-container--column_2column .o-container__header {
    margin-bottom: 0
  }
}

.o-container--column_2column .o-container__body {
  width: calc(100% - 314px);
  max-width: 610px;
  margin-top: 0;
  margin-right: 24px;
  margin-bottom: 0
}

@media only screen and (max-width:768px) {
  .o-container--column_2column .o-container__body {
    width: 100%;
    margin-right: 0;
    margin-left: 0
  }
}

.o-container--column_2column .o-container__sub {
  width: 290px
}

@media only screen and (max-width:768px) {
  .o-container--column_2column .o-container__sub {
    display: none;
    width: auto
  }
}

.o-container--column_2column .o-container__subItem {
  margin-bottom: 40px
}

.o-container--column_2column .o-container__subItem:last-child {
  margin-bottom: 0
}

.o-container--column_2column .o-container__loading {
  margin-top: 20px
}

.o-container--recommend {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 100%;
  max-width: 1920px
}

.o-container--recommend .o-container__body {
  width: calc(100% - 320px);
  margin-top: 0
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-container--recommend .o-container__body {
    flex-wrap: wrap;
    width: calc(100% - 280px);
    margin-right: 0;
    margin-left: 0
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-container--recommend .o-container__body {
    flex-wrap: wrap;
    width: calc(100% - 280px);
    margin-right: 0;
    margin-left: 0
  }
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-container--recommend .o-container__categoryMenu {
    width: 100%;
    margin-bottom: 24px
  }
}

@media only screen and (max-width:768px) {
  .o-container--recommend .o-container__categoryMenu {
    width: 100%;
    margin-bottom: 24px
  }
}

.o-container--recommend .o-container__sub {
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  width: 264px;
  margin-left: 56px
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-container--recommend .o-container__sub {
    width: 240px;
    margin-left: 40px
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-container--recommend .o-container__sub {
    width: 240px;
    margin-left: 40px
  }
}

.o-container--recommend .o-container__subItem {
  margin-bottom: 40px
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-container--recommend .o-container__subItem {
    margin-bottom: 24px
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-container--recommend .o-container__subItem {
    margin-bottom: 24px
  }
}

.o-container--recommend .o-container__subItem:last-child {
  margin-bottom: 0
}

.o-container--recommend .o-container__header {
  margin-bottom: 24px
}

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

.o-container__categoryMenu {
  width: 160px;
  margin-top: 16px;
  margin-right: 40px
}

@media only screen and (max-width:768px) {
  .o-container__categoryMenu {
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    background-color: #fff
  }
}

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

.o-timeline--recommend {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  margin-right: -12px;
  margin-left: -12px
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-timeline--recommend {
    margin-right: -8px;
    margin-left: -8px
  }
}

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

.o-timeline--recommend:after,
.o-timeline--recommend:before {
  display: block;
  -webkit-box-flex: 1;
  flex: 1;
  width: 100%;
  min-width: 33.33333%;
  height: 0;
  content: ""
}

@media only screen and (min-width:768px) and (max-width:940px) {

  .o-timeline--recommend:after,
  .o-timeline--recommend:before {
    display: none
  }
}

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

  .o-timeline--recommend:after,
  .o-timeline--recommend:before {
    display: none
  }
}

.o-timeline--recommend:before {
  -webkit-box-ordinal-group: 2;
  order: 1
}

.o-timeline--recommend .o-timeline__itemWrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  min-width: 320px;
  margin-bottom: 48px
}

@media only screen and (min-width:940px) and (max-width:1280px) {
  .o-timeline--recommend .o-timeline__itemWrapper {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 50%;
    min-width: 0
  }
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-timeline--recommend .o-timeline__itemWrapper {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 50%;
    min-width: 0
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-timeline--recommend .o-timeline__itemWrapper {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 50%;
    min-width: 0
  }
}

@media only screen and (max-width:479px) {
  .o-timeline--recommend .o-timeline__itemWrapper {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0
  }
}

.o-timeline--recommend .o-timeline__itemWrapper:empty {
  margin-bottom: 0
}

.o-timeline--recommend .o-timeline__item {
  width: calc(100% - 24px);
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-timeline--recommend .o-timeline__item {
    width: calc(100% - 16px)
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-timeline--recommend .o-timeline__item {
    width: calc(100% - 16px)
  }
}

@media only screen and (max-width:479px) {
  .o-timeline--recommend .o-timeline__item {
    border-bottom: none
  }
}

.o-timeline--recommend .o-timeline__insertItemRow {
  width: calc(100% - 24px);
  padding: 40px 0;
  margin-bottom: 48px;
  margin-left: 12px;
  border: solid #e6e6e6;
  border-width: 1px 0
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-timeline--recommend .o-timeline__insertItemRow {
    width: 100%;
    margin-left: 0
  }
}

@media only screen and (max-width:768px) {
  .o-timeline--recommend .o-timeline__insertItemRow {
    width: 100%;
    margin-left: 0
  }
}

.o-timeline__item {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #e6e6e6
}

@media only screen and (max-width:479px) {
  .o-timeline__item {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #f2f2f2
  }
}

.o-timeline__insert {
  border-bottom: 1px solid #e6e6e6
}

@media only screen and (min-width:769px) {
  .o-timeline__insert {
    padding-top: 8px;
    margin-top: -40px;
    margin-bottom: 40px
  }
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-timeline__insert {
    padding-top: 8px;
    margin-top: -40px;
    margin-bottom: 40px
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-timeline__insert {
    padding-top: 8px;
    margin-top: -40px;
    margin-bottom: 40px
  }
}

@media only screen and (max-width:479px) {
  .o-timeline__insert {
    overflow: hidden;
    border-bottom: 1px solid #f2f2f2
  }
}

.o-timeline__insert--bg_grey {
  background-color: #f7f9f9
}

.o-timeline__insert--topic {
  padding: 16px 0
}

.o-timeline__insertTitle {
  font-size: 14px;
  padding: 8px 16px 0;
  font-weight: 700;
  color: #222
}

.o-timeline__insertBody {
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  -webkit-box-align: stretch;
  align-items: stretch;
  padding-top: 8px;
  padding-right: 16px;
  padding-left: 16px;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch
}

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

.o-timeline__insertBody:after {
  display: block;
  padding-left: 1px;
  content: ""
}

.o-timeline__insertItem {
  display: -webkit-box;
  display: flex;
  width: calc(50% - 8px);
  min-width: 70vw;
  margin-right: 8px;
  margin-bottom: 16px
}

@media only screen and (max-width:479px) {
  .o-timeline__insertItem {
    min-width: 320px
  }
}

.o-timeline__insertMore {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: 100%
}

.o-timeline__loading {
  padding-top: 24px;
  padding-bottom: 24px
}

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

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

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

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

.o-timeline__webPushNotice:empty {
  margin-bottom: 0
}

.o-timeline__webPushNoticeAction1 {
  margin-right: 32px
}

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

@media only screen and (max-width:479px) {
  .o-timeline__covid {
    position: relative;
    display: block;
    padding: 16px;
    border-bottom: 1px solid #f2f2f2
  }
}

.p-boosterList {
  padding-bottom: 40px
}

.p-boosterList--vertical .p-boosterList__item {
  margin-bottom: 16px
}

.o-wrapper--with_sideMenu {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  padding: 0 24px 0 8px;
  margin: 0 auto
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-wrapper--with_sideMenu {
    display: block;
    padding: 0;
    margin: 0
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-wrapper--with_sideMenu {
    display: block;
    padding: 0;
    margin: 0
  }
}

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

@media only screen and (min-width:769px) {
  .o-wrapper--with_sideMenu .o-wrapper__sideMenu {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 192px;
    height: 100%;
    max-height: 100vh;
    padding-top: 24px;
    padding-right: 16px;
    padding-bottom: 24px;
    margin-right: 24px;
    overflow-y: auto
  }
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-wrapper--with_sideMenu .o-wrapper__sideMenu {
    position: static;
    top: auto;
    width: 100%;
    height: 50px;
    padding: 16px 0 0;
    margin-right: 0;
    overflow: visible;
    background-color: #fff
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-wrapper--with_sideMenu .o-wrapper__sideMenu {
    width: 100%;
    height: 50px;
    padding-top: 16px;
    background-color: #fff
  }
}

@media only screen and (max-width:479px) {
  .o-wrapper--with_sideMenu .o-wrapper__sideMenu {
    width: 100%;
    height: 50px;
    padding-top: 16px;
    background-color: #fff
  }
}

.o-wrapper--with_sideMenu .o-wrapper__content {
  width: calc(100% - 216px);
  padding: 24px 0
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .o-wrapper--with_sideMenu .o-wrapper__content {
    width: auto;
    padding-right: 24px;
    padding-left: 24px
  }
}

@media only screen and (min-width:480px) and (max-width:768px) {
  .o-wrapper--with_sideMenu .o-wrapper__content {
    width: auto;
    padding-right: 24px;
    padding-left: 24px
  }
}

@media only screen and (max-width:479px) {
  .o-wrapper--with_sideMenu .o-wrapper__content {
    width: auto;
    padding: 16px 0 0
  }
}

.o-wrapper__content {
  padding: 24px
}

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

.sidebarPickupNotes {
  position: relative;
  width: 100%;
  padding-bottom: 40px
}

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

.sidebarPickupNotes__noteListItem {
  padding: 16px 0;
  border-bottom: 1px solid #f2f2f2
}

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

@-webkit-keyframes loadingAnimation-data-v-108a9501 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-108a9501 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.m-categoryMenu {
  width: 100%;
  margin-right: 40px
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu {
    display: -webkit-box;
    display: flex;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: 0;
    overflow-x: scroll
  }

  .m-categoryMenu::-webkit-scrollbar {
    display: none
  }

  .m-categoryMenu.is-open {
    height: 100vh
  }
}

@media only screen and (max-width:768px) {
  .m-categoryMenu {
    display: -webkit-box;
    display: flex;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: 0;
    overflow-x: scroll
  }

  .m-categoryMenu::-webkit-scrollbar {
    display: none
  }

  .m-categoryMenu.is-open {
    height: 100vh
  }
}

@media only screen and (max-width:479px) {
  .m-categoryMenu {
    padding-right: 16px;
    padding-left: 16px
  }
}

@media only screen and (min-width:769px) {
  .m-categoryMenu__container {
    margin-top: -8px;
    margin-left: 0
  }
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu__container {
    display: -webkit-box;
    display: flex;
    height: 34px;
    margin-top: 0;
    margin-left: 0
  }
}

@media only screen and (max-width:768px) {
  .m-categoryMenu__container {
    display: -webkit-box;
    display: flex;
    height: 34px
  }
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu__section {
    position: relative;
    margin-right: 8px;
    pointer-events: auto
  }

  .m-categoryMenu__section:last-child {
    padding-right: 16px
  }
}

@media only screen and (max-width:768px) {
  .m-categoryMenu__section {
    position: relative;
    margin-right: 8px;
    pointer-events: auto
  }
}

@media only screen and (max-width:768px) and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu__section:last-child .m-categoryMenu__subCategories {
    right: 16px
  }
}

@media only screen and (max-width:768px) and (max-width:768px) {
  .m-categoryMenu__section:last-child .m-categoryMenu__subCategories {
    right: 16px
  }
}

@media only screen and (max-width:768px) {
  .m-categoryMenu__section:last-child .m-categoryMenu__subCategories:before {
    right: 30px;
    left: auto
  }
}

@media only screen and (max-width:479px) {
  .m-categoryMenu__section:last-child {
    padding-right: 16px
  }
}

.m-categoryMenu__title {
  display: -webkit-box;
  display: flex;
  width: 100%;
  font-weight: 700;
  color: #787c7b;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

@media only screen and (min-width:769px) {
  .m-categoryMenu__title {
    padding: 8px
  }

  .m-categoryMenu__title:focus,
  .m-categoryMenu__title:hover {
    color: #222;
    outline: none
  }

  .m-categoryMenu__title:focus .m-categoryMenu__titleIcon,
  .m-categoryMenu__title:hover .m-categoryMenu__titleIcon {
    color: #222
  }
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    -webkit-box-align: center;
    align-items: center;
    padding: 4px 8px 4px 16px;
    line-height: 1;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
    font-size: 14px
  }

  .m-categoryMenu__title:focus {
    outline: 0
  }
}

@media only screen and (max-width:768px) {
  .m-categoryMenu__title {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    -webkit-box-align: center;
    align-items: center;
    padding: 4px 8px 4px 16px;
    line-height: 1;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
    font-size: 13px
  }

  .m-categoryMenu__title:focus {
    outline: 0
  }
}

.m-categoryMenu__titleIcon {
  color: #ccc
}

@media only screen and (min-width:769px) {
  .m-categoryMenu__titleIcon {
    margin-right: 4px
  }
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu__titleIcon {
    margin-right: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
  }
}

@media only screen and (max-width:768px) {
  .m-categoryMenu__titleIcon {
    margin-right: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
  }
}

.m-categoryMenu__titleIcon.is-rotated {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.m-categoryMenu__subCategories {
  z-index: 5;
  display: none;
  padding-bottom: 16px;
  margin-left: 20px;
  text-align: left
}

.m-categoryMenu__subCategories.is-block {
  display: block
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu__subCategories {
    position: absolute;
    top: 48px;
    min-width: 200px;
    padding: 8px 0;
    margin-left: 0;
    background-color: #fff;
    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 (max-width:768px) {
  .m-categoryMenu__subCategories {
    position: absolute;
    top: 48px;
    min-width: 200px;
    padding: 8px 0;
    margin-left: 0;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(34, 34, 34, .25), 0 0 1px rgba(34, 34, 34, .35)
  }
}

.m-categoryMenu__subCategories:before {
  position: absolute;
  top: -7px;
  left: 32px;
  display: none;
  width: 12px;
  height: 12px;
  content: "";
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg)
}

@media only screen and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu__subCategories:before {
    display: block
  }
}

@media only screen and (max-width:768px) {
  .m-categoryMenu__subCategories:before {
    display: block
  }
}

.m-categoryMenu__subTitle {
  display: block;
  padding: 4px 16px;
  color: #787c7b;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px
}

.m-categoryMenu__subTitle.is-active {
  font-weight: 700;
  color: #2cb696
}

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

@media only screen and (min-width:768px) and (max-width:940px) {
  .m-categoryMenu__subTitle {
    padding: 8px 16px;
    white-space: nowrap
  }

  .m-categoryMenu__subTitle:first-child {
    margin-top: 0
  }
}

@media only screen and (max-width:768px) {
  .m-categoryMenu__subTitle {
    padding: 8px 16px;
    white-space: nowrap
  }

  .m-categoryMenu__subTitle:first-child {
    margin-top: 0
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-fbdb1b5e {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-fbdb1b5e {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.p-searchHeader__inner {
  position: relative
}

.p-searchHeader__breadcrumbs {
  margin-bottom: 8px
}

@media only screen and (max-width:479px) {
  .p-searchHeader__breadcrumbs {
    padding-right: 16px;
    padding-left: 16px
  }
}

.p-searchHeader__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .04em;
  word-break: break-all;
  -webkit-font-feature-settings: "palt"1;
  font-feature-settings: "palt"1
}

@media only screen and (max-width:479px) {
  .p-searchHeader__title {
    padding-right: 16px;
    padding-left: 16px
  }
}

.p-searchHeader__rss {
  position: absolute;
  right: 0;
  bottom: 4px;
  line-height: 1;
  color: #a8abb1
}

@media only screen and (max-width:479px) {
  .p-searchHeader__rss {
    right: 16px;
    -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
    transition: all .2s cubic-bezier(1, 0, 0, 1)
  }

  .p-searchHeader__rss:hover {
    color: #787c7b
  }
}

@media only screen and (max-width:479px) {
  .p-searchHeader__nav {
    padding: 0 16px;
    margin-top: 16px
  }
}

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

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

@-webkit-keyframes loadingAnimation-data-v-486fe862 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-486fe862 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.m-breadcrumb__list {
  display: -webkit-box;
  display: flex;
  overflow-x: auto
}

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

.m-breadcrumb__item {
  font-size: 14px;
  white-space: nowrap
}

.m-breadcrumb__item:last-child {
  pointer-events: none
}

.m-breadcrumb__item:not(:first-child) {
  margin-left: 4px
}

.m-breadcrumb__item:not(:first-child):before {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  content: "";
  border: solid #a8abb1;
  border-width: 1px 1px 0 0;
  -webkit-transform: rotate(45deg) scale(.8) skew(10deg, 10deg);
  transform: rotate(45deg) scale(.8) skew(10deg, 10deg)
}

.m-breadcrumb__link {
  color: #787c7b
}

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

  .m-breadcrumb__link:hover {
    color: #222
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-0f4d58de {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-0f4d58de {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.m-buttonGroup {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start
}

.m-buttonGroup__item {
  margin-left: -1px
}

@media only screen and (min-width:769px) {
  .m-buttonGroup__item:hover {
    z-index: 2
  }
}

.m-buttonGroup__item .btn {
  display: inline-block;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  margin: 0;
  line-height: 1;
  color: inherit;
  color: #787c7b;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: top;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.m-buttonGroup__item .btn:active,
.m-buttonGroup__item .btn:hover {
  outline: none
}

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

.m-buttonGroup__item .btn--size_small {
  min-height: 32px;
  font-size: 14px
}

.m-buttonGroup__item .btn--size_large {
  min-height: 48px;
  font-size: 16px
}

.m-buttonGroup__item:first-child .btn {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.m-buttonGroup__item:last-child .btn {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.m-buttonGroup__item .is-active {
  color: #222;
  background-color: #e6e6e6
}

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

@-webkit-keyframes loadingAnimation-data-v-fc535656 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-fc535656 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-timelineNoteItem__pinned {
  position: relative;
  z-index: 2;
  margin: 0 0 8px
}

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

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

@-webkit-keyframes loadingAnimation-data-v-c549ecf6 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-c549ecf6 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-textNote {
  position: relative;
  cursor: pointer;
  background: #fff
}

@media only screen and (min-width:769px) {
  .o-textNote:hover:before {
    position: absolute;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    display: block;
    content: "";
    background-color: #f7f9f9;
    border-radius: 4px
  }
}

@media only screen and (max-width:479px) {
  .o-textNote[data-less-info=true] .o-textNote__body {
    padding: 16px
  }
}

.o-textNote__addMagazine:not(:empty),
.o-textNote__addRecommended:not(:empty) {
  position: relative;
  z-index: 4;
  display: block;
  margin-bottom: 16px
}

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

  .o-textNote__addMagazine:not(:empty),
  .o-textNote__addRecommended:not(:empty) {
    padding: 0 16px;
    margin-top: 16px;
    margin-bottom: -8px
  }
}

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

.o-textNote__body {
  position: relative;
  z-index: 3;
  pointer-events: none
}

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

.o-textNote__item:after,
.o-textNote__item:before {
  display: table;
  content: " "
}

.o-textNote__item:after {
  clear: both
}

.o-textNote__eyecatch {
  position: relative;
  float: right;
  width: 104px;
  height: 104px;
  margin: 0 0 0 16px;
  overflow: hidden;
  background-position: 50%;
  background-size: cover;
  border: 1px solid #f2f2f2;
  border-radius: 4px
}

@media only screen and (max-width:479px) {
  .o-textNote__eyecatch {
    width: 56px;
    height: 56px
  }
}

.o-textNote__eyecatch img {
  display: block;
  width: 100%
}

.o-textNote__eyecatch.is-first,
.o-textNote__eyecatch.is-home {
  float: none;
  width: auto;
  height: auto;
  margin-bottom: 24px;
  margin-left: 0;
  border: none
}

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

  .o-textNote__eyecatch.is-first,
  .o-textNote__eyecatch.is-home {
    margin-bottom: 16px
  }
}

.o-textNote__eyecatch.is-first:before,
.o-textNote__eyecatch.is-home:before {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 52.34375%;
  content: ""
}

.o-textNote__eyecatch.is-first img,
.o-textNote__eyecatch.is-home img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.o-textNote__title {
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  word-break: break-all;
  -webkit-font-feature-settings: "palt"1;
  font-feature-settings: "palt"1;
  font-size: 22px
}

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

.o-textNote__description {
  margin-bottom: 16px;
  line-height: 1.5;
  text-align: justify;
  word-break: break-all;
  font-size: 14px
}

@media only screen and (max-width:479px) {
  .o-textNote__description {
    margin-bottom: 8px;
    font-size: 12px
  }
}

.o-textNote__message {
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 1.5;
  color: #787c7b
}

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

@-webkit-keyframes loadingAnimation-data-v-7007d9d6 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-7007d9d6 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-noteStatus {
  display: -webkit-box;
  display: flex;
  font-size: 14px
}

.o-noteStatus__item {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-right: 8px
}

.o-noteStatus__item--like {
  color: #ea3f60
}

.o-noteStatus__item--comment {
  color: #787c7b
}

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

.o-noteStatus__item--creatorName {
  display: block;
  overflow: hidden;
  color: #787c7b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px
}

.o-noteStatus__item--limitedSale {
  margin-left: 8px
}

.o-noteStatus__icon {
  height: 16px
}

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

.o-noteStatus__label {
  margin-left: 4px;
  line-height: 1
}

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

@-webkit-keyframes loadingAnimation-data-v-7a02fe7f {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-7a02fe7f {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-timelineFooter {
  position: relative;
  z-index: 4;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 16px 0 0;
  pointer-events: none;
  border-top: none
}

@media only screen and (max-width:479px) {
  .o-timelineFooter {
    padding: 16px 0;
    margin: 0 16px
  }
}

.o-timelineFooter__avatar {
  position: relative;
  width: calc(100% - 40px);
  min-height: 32px;
  padding-left: 40px;
  overflow: hidden;
  pointer-events: auto
}

@media only screen and (max-width:479px) {
  .o-timelineFooter__avatar {
    width: calc(100% - 32px);
    min-height: 24px;
    padding-left: 32px
  }
}

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

.o-timelineFooter__name {
  font-size: 12px;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: auto
}

@media only screen and (max-width:479px) {
  .o-timelineFooter__name {
    line-height: 1.2
  }
}

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

@media only screen and (max-width:479px) {
  .o-timelineFooter__date {
    font-size: 10px;
    line-height: 1.5
  }
}

.o-timelineFooter__action {
  pointer-events: auto
}

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

@-webkit-keyframes loadingAnimation-data-v-1f35f45c {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-1f35f45c {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-timelineNoteAction {
  pointer-events: auto
}

.o-timelineNoteAction__wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 0;
  margin-left: 8px;
  border: none
}

.o-timelineNoteAction__item {
  position: relative;
  display: block;
  margin-right: 16px;
  line-height: 1;
  color: #a8abb1;
  white-space: nowrap
}

.o-timelineNoteAction__item:last-child {
  margin-right: 0
}

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

@-webkit-keyframes loadingAnimation-data-v-2aa571ba {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-2aa571ba {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.c-card__action {
  pointer-events: auto
}

.p-action {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-align: stretch;
  align-items: stretch;
  padding: 0;
  margin-right: 0;
  border: none
}

.p-action__item {
  position: relative;
  display: block;
  line-height: 1;
  color: #a8abb1;
  white-space: nowrap
}

.p-action .p-action__like {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

.o-noteActionPopover__report {
  font-size: 16px;
  color: #787c7b
}

.o-noteActionPopover__note {
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.5
}

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

@-webkit-keyframes loadingAnimation-data-v-78eba018 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-78eba018 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-like {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.o-like.is-active .o-like__count,
.o-like.is-active .o-like__icon {
  color: #ea3f60
}

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

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

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

.o-like__icon.is-animate {
  -webkit-animation: effectSuki-data-v-78eba018 .28s;
  animation: effectSuki-data-v-78eba018 .28s
}

@-webkit-keyframes effectSuki-data-v-78eba018 {
  20% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  48% {
    opacity: 1;
    -webkit-transform: scale(1.6);
    transform: scale(1.6)
  }

  56% {
    -webkit-transform: scale(1.2);
    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: #a8abb1;
  cursor: pointer
}

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

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

.o-like__pc {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: start;
  justify-content: flex-start
}

.o-like__pc.is-active .o-like__pcCount,
.o-like__pc.is-active .o-like__pcIcon {
  color: #ea3f60
}

.o-like__pcIcon {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  color: #a8abb1;
  cursor: pointer
}

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

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

.o-like__pcIcon.is-animate {
  -webkit-animation: effectSuki-data-v-78eba018 .28s;
  animation: effectSuki-data-v-78eba018 .28s
}

@keyframes effectSuki-data-v-78eba018 {
  20% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  48% {
    opacity: 1;
    -webkit-transform: scale(1.6);
    transform: scale(1.6)
  }

  56% {
    -webkit-transform: scale(1.2);
    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: #a8abb1;
  cursor: pointer
}

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

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

.o-like--color_red .o-like__icon {
  color: #ea3f60
}

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

@-webkit-keyframes loadingAnimation-data-v-2cd961ac {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-2cd961ac {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.m-likeThanks {
  position: absolute;
  bottom: 0;
  left: -6px;
  z-index: 100;
  display: -webkit-box;
  display: flex;
  min-width: 300px;
  visibility: hidden;
  opacity: 0;
  -webkit-transform-origin: 25px bottom;
  transform-origin: 25px bottom
}

@media only screen and (max-width:479px) {
  .m-likeThanks {
    min-width: 270px
  }

  .m-likeThanks .m-likeThanks__message {
    max-width: 190px
  }
}

@media only screen and (max-width:479px) {
  .m-likeThanks[data-type=spBooster] {
    right: -7px;
    bottom: 16px;
    left: auto;
    -webkit-transform-origin: 98% bottom;
    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;
  -webkit-transform-origin: 98% bottom;
  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:479px) {

  .m-likeThanks[data-type=circleBoardComment],
  .m-likeThanks[data-type=circleBoardPost] {
    min-width: 240px
  }
}

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

  .m-likeThanks[data-type=circleBoardComment],
  .m-likeThanks[data-type=circleBoardPost] {
    min-width: 200px
  }
}

.m-likeThanks__balloon {
  position: relative;
  text-align: left;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px
}

.m-likeThanks__balloon:before {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  background-color: #fff;
  box-shadow: 1px 1px 0 0 #e6e6e6
}

.m-likeThanks__balloon[data-tail-position=bottomLeft]:before {
  bottom: -12px;
  left: 14px;
  -webkit-transform: rotate(45deg) translate(-5px, -5px);
  transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeThanks__balloon[data-tail-position=bottomRight]:before {
  right: 14px;
  bottom: -12px;
  -webkit-transform: rotate(45deg) translate(-5px, -5px);
  transform: rotate(45deg) translate(-5px, -5px)
}

.m-likeThanks__body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 16px
}

.m-likeThanks__avatar {
  width: 32px;
  margin-right: 16px;
  line-height: 1
}

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

.m-likeThanks__message {
  max-width: 220px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  white-space: normal
}

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

.m-likeThanks__flag {
  color: #ea3f60
}

.m-likeThanks__status {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  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: #ea3f60
}

.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;
  -o-object-fit: contain;
  object-fit: contain
}

.m-likeThanks[data-is-shown=true] {
  -webkit-animation: replyToLike-data-v-2cd961ac 4s .16s;
  animation: replyToLike-data-v-2cd961ac 4s .16s
}

@-webkit-keyframes replyToLike-data-v-2cd961ac {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  4.5% {
    opacity: 0;
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  6.75% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px)
  }

  6.75% {
    -webkit-transform: translateY(-48px);
    transform: translateY(-48px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  11.25% {
    -webkit-transform: translateY(-34px);
    transform: translateY(-34px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  13.5% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  81.25% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px)
  }

  87.5% {
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  93.75% {
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(-20px) scale(.95);
    transform: translateY(-20px) scale(.95);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

@keyframes replyToLike-data-v-2cd961ac {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  4.5% {
    opacity: 0;
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  6.75% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px)
  }

  6.75% {
    -webkit-transform: translateY(-48px);
    transform: translateY(-48px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  11.25% {
    -webkit-transform: translateY(-34px);
    transform: translateY(-34px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  13.5% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  81.25% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px)
  }

  87.5% {
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  93.75% {
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(-20px) scale(.95);
    transform: translateY(-20px) scale(.95);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

.m-likeThanks[data-is-shown=true][data-has-reaction-image=true] {
  -webkit-animation: replyToLikeWithImage-data-v-2cd961ac 6s .16s;
  animation: replyToLikeWithImage-data-v-2cd961ac 6s .16s
}

@-webkit-keyframes replyToLikeWithImage-data-v-2cd961ac {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  3% {
    opacity: 0;
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  4.5% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px)
  }

  4.5% {
    -webkit-transform: translateY(-48px);
    transform: translateY(-48px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  7.5% {
    -webkit-transform: translateY(-34px);
    transform: translateY(-34px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  9% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  87.5% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px)
  }

  91.66667% {
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  95.83333% {
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(-20px) scale(.95);
    transform: translateY(-20px) scale(.95);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

@keyframes replyToLikeWithImage-data-v-2cd961ac {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  3% {
    opacity: 0;
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  4.5% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px)
  }

  4.5% {
    -webkit-transform: translateY(-48px);
    transform: translateY(-48px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  7.5% {
    -webkit-transform: translateY(-34px);
    transform: translateY(-34px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  9% {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  87.5% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px)
  }

  91.66667% {
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  95.83333% {
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(-20px) scale(.95);
    transform: translateY(-20px) scale(.95);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-38df392f {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-38df392f {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.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.de8fca6.png)
}

.m-likeAnimation:before {
  display: block;
  width: 3040px;
  content: "";
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 3040px 80px;
  -webkit-transform: translateZ(0);
  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% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

@keyframes likeAnimation-data-v-38df392f {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

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

@-webkit-keyframes loadingAnimation-data-v-04138d63 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-04138d63 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.m-infiniteScroll__spacer {
  height: 1px
}

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

@-webkit-keyframes loadingAnimation-data-v-9dc516d4 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

@keyframes loadingAnimation-data-v-9dc516d4 {
  0% {
    opacity: 1
  }

  to {
    opacity: .3
  }
}

.o-footer {
  position: relative;
  padding: 40px 16px 32px
}

@media print {
  .o-footer {
    display: none
  }
}

.o-footer__menu {
  display: -webkit-inline-box;
  display: inline-flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  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: #787c7b
}

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

.o-footer__powerdby {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-top: 24px
}

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

.o-footer__powerdbyLogo {
  width: 54px;
  height: 14px;
  overflow: hidden;
  text-indent: -9999px;
  background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/logo_powerdby_note.8ba28c9.svg);
  background-repeat: no-repeat
}

.o-footer--article {
  padding-bottom: 104px
}



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

  @-webkit-keyframes loadingAnimation-data-v-5668a963 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5668a963 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-14aff5a2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-14aff5a2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

  .m-formErrorList a {
    color: #ed4956
  }

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

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



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

  @-webkit-keyframes loadingAnimation-data-v-78cec4e8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-78cec4e8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-65561d7e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-65561d7e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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



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

  @-webkit-keyframes loadingAnimation-data-v-553e1356 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-553e1356 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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



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

  @-webkit-keyframes loadingAnimation-data-v-621c6dd6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-621c6dd6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .a-loadingDots {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%
  }

  .a-loadingDots__item {
    background-color: #222;
    border-radius: 8px;
    opacity: .3
  }

  .a-loadingDots__item:first-child {
    -webkit-animation: loadingAnimation-data-v-621c6dd6 2s ease-in-out infinite;
    animation: loadingAnimation-data-v-621c6dd6 2s ease-in-out infinite
  }

  .a-loadingDots__item:nth-child(2) {
    -webkit-animation: loadingAnimation-data-v-621c6dd6 2s ease-in-out 666ms infinite;
    animation: loadingAnimation-data-v-621c6dd6 2s ease-in-out 666ms infinite
  }

  .a-loadingDots__item:nth-child(3) {
    -webkit-animation: loadingAnimation-data-v-621c6dd6 2s ease-in-out 1.3s infinite;
    animation: loadingAnimation-data-v-621c6dd6 2s ease-in-out 1.3s infinite
  }

  .a-loadingDots__item--color_black {
    background-color: #222
  }

  .a-loadingDots__item--color_primary {
    background-color: #2cb696
  }

  .a-loadingDots__item--size_small {
    width: 4px;
    height: 4px;
    margin-right: 2px;
    margin-left: 2px
  }

  .a-loadingDots__item--size_medium {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    margin-left: 4px
  }

  .a-loadingDots__item--size_large {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    margin-left: 8px
  }


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

  @-webkit-keyframes loadingAnimation-data-v-801aeff4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-801aeff4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-amazonWidget__body {
    padding: 40px
  }

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

  .o-amazonWidget__premiumLink {
    color: #2cb696
  }


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

  @-webkit-keyframes loadingAnimation-data-v-19b90557 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-19b90557 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

  .m-basicBalloonList__text {
    color: #a8abb1
  }

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-607d4566 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-607d4566 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .a-balloon {
    position: relative
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-2e6bbd44 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2e6bbd44 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .o-amazonWidget__sellerLink {
    color: #787c7b
  }

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-63e8f92b {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-63e8f92b {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

  .o-widgetCard__more {
    color: #a8abb1
  }

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-f98f912c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-f98f912c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorWidget__body {
    padding: 40px
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-54489f2a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-54489f2a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-696a155e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-696a155e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-3c92c557 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3c92c557 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-basicFlashMessageModal__title {
    font-weight: 700
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-3d0b60de {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3d0b60de {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  button.a-iconCustom {
    cursor: pointer
  }

  .a-iconCustom {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 1;
    color: inherit;
    vertical-align: top;
    touch-action: manipulation;
    background-color: transparent;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
  }

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

  .a-iconCustom--size_small {
    width: 16px;
    height: 16px
  }

  .a-iconCustom--size_small .a-iconCustom__inner {
    -webkit-transform: scale(.6668);
    transform: scale(.6668);
    -webkit-transform-origin: left top;
    transform-origin: left top
  }

  .a-iconCustom--size_large {
    width: 32px;
    height: 32px
  }

  .a-iconCustom--size_large .a-iconCustom__inner {
    -webkit-transform: scale(1.3333);
    transform: scale(1.3333);
    -webkit-transform-origin: left top;
    transform-origin: left top
  }

  .a-iconCustom--official .a-iconCustom__inner {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 24px;
    height: 24px
  }

  .a-iconCustom--official .a-iconCustom__inner:before {
    display: block;
    width: 22px;
    height: 22px;
    content: "";
    background-color: #2cb696;
    border-radius: 22px
  }

  .a-iconCustom--official .a-iconCustom__inner:after {
    position: absolute;
    top: 9px;
    left: 8px;
    display: block;
    width: 8px;
    height: 5px;
    content: "";
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
  }


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

  @-webkit-keyframes loadingAnimation-data-v-11b3fabe {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-11b3fabe {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-1e492a42 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1e492a42 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

  .m-userList__more {
    padding: 16px
  }


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

  @-webkit-keyframes loadingAnimation-data-v-15d820fe {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-15d820fe {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-07dc61c8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-07dc61c8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-6ec3e382 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6ec3e382 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-formSelect__field {
    position: relative
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-92e00352 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-92e00352 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-1c31c857 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1c31c857 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-f7834210 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-f7834210 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-customMenuModal__body {
    padding: 40px
  }

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

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-72ac3e7e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-72ac3e7e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-customLinkModal__body {
    padding: 40px
  }

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

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

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


  @charset "UTF-8";

  /*!
* Pikaday
* Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
*/
  .pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #333;
    background: #fff;
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  }

  .pika-single:after,
  .pika-single:before {
    content: " ";
    display: table
  }

  .pika-single:after {
    clear: both
  }

  .pika-single {
    *zoom: 1
  }

  .pika-single.is-hidden {
    display: none
  }

  .pika-single.is-bound {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5)
  }

  .pika-lendar {
    float: left;
    width: 240px;
    margin: 8px
  }

  .pika-title {
    position: relative;
    text-align: center
  }

  .pika-label {
    display: inline-block;
    *display: inline;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    background-color: #fff
  }

  .pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    filter: alpha(opacity=0);
    opacity: 0
  }

  .pika-next,
  .pika-prev {
    display: block;
    cursor: pointer;
    position: relative;
    outline: none;
    border: 0;
    padding: 0;
    width: 20px;
    height: 30px;
    text-indent: 20px;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    opacity: .5;
    *position: absolute;
    *top: 0
  }

  .pika-next:hover,
  .pika-prev:hover {
    opacity: 1
  }

  .is-rtl .pika-next,
  .pika-prev {
    float: left;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
    *left: 0
  }

  .is-rtl .pika-prev,
  .pika-next {
    float: right;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
    *right: 0
  }

  .pika-next.is-disabled,
  .pika-prev.is-disabled {
    cursor: default;
    opacity: .2
  }

  .pika-select {
    display: inline-block;
    *display: inline
  }

  .pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0
  }

  .pika-table td,
  .pika-table th {
    width: 14.285714285714286%;
    padding: 0
  }

  .pika-table th {
    color: #999;
    font-size: 12px;
    line-height: 25px;
    font-weight: 700;
    text-align: center
  }

  .pika-button {
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    border: 0;
    margin: 0;
    width: 100%;
    padding: 5px;
    color: #666;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    background: #f5f5f5
  }

  .pika-week {
    font-size: 11px;
    color: #999
  }

  .is-today .pika-button {
    color: #3af;
    font-weight: 700
  }

  .has-event .pika-button,
  .is-selected .pika-button {
    color: #fff;
    font-weight: 700;
    background: #3af;
    box-shadow: inset 0 1px 3px #178fe5;
    border-radius: 3px
  }

  .has-event .pika-button {
    background: #005da9;
    box-shadow: inset 0 1px 3px #0076c9
  }

  .is-disabled .pika-button,
  .is-inrange .pika-button {
    background: #d5e9f7
  }

  .is-startrange .pika-button {
    color: #fff;
    background: #6cb31d;
    box-shadow: none;
    border-radius: 3px
  }

  .is-endrange .pika-button {
    color: #fff;
    background: #3af;
    box-shadow: none;
    border-radius: 3px
  }

  .is-disabled .pika-button {
    pointer-events: none;
    cursor: default;
    color: #999;
    opacity: .3
  }

  .is-outside-current-month .pika-button {
    color: #999;
    opacity: .3
  }

  .is-selection-disabled {
    pointer-events: none;
    cursor: default
  }

  .pika-button:hover,
  .pika-row.pick-whole-week:hover .pika-button {
    color: #fff;
    background: #ff8000;
    box-shadow: none;
    border-radius: 3px
  }

  .pika-table abbr {
    border-bottom: none;
    cursor: help
  }

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

  @-webkit-keyframes loadingAnimation {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }


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

  @-webkit-keyframes loadingAnimation-data-v-44d31779 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-44d31779 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }


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

  @-webkit-keyframes loadingAnimation-data-v-19d1d92d {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-19d1d92d {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-064e0bdc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-064e0bdc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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


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

  @-webkit-keyframes loadingAnimation-data-v-183b93a4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-183b93a4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-draftNoteEditConfirmModal__body {
    margin: 24px
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-230085e8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-230085e8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-6dc5f5c6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6dc5f5c6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  @-webkit-keyframes countModalAnimation-data-v-6dc5f5c6 {
    30% {
      text-shadow: 0 0 0 rgba(34, 34, 34, 0);
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    to {
      text-shadow: 8px 8px rgba(34, 34, 34, .1);
      opacity: 1;
      -webkit-transform: translateY(-4px) translateX(-4px);
      transform: translateY(-4px) translateX(-4px)
    }
  }

  @keyframes countModalAnimation-data-v-6dc5f5c6 {
    30% {
      text-shadow: 0 0 0 rgba(34, 34, 34, 0);
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    to {
      text-shadow: 8px 8px rgba(34, 34, 34, .1);
      opacity: 1;
      -webkit-transform: translateY(-4px) translateX(-4px);
      transform: translateY(-4px) translateX(-4px)
    }
  }

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-45f5b0a3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-45f5b0a3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

  .m-formFile__item {
    cursor: pointer
  }

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

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

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

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

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

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

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

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

  .m-formFile__field {
    display: none
  }

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

  .m-formFile__description:empty {
    display: none
  }


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

  @-webkit-keyframes loadingAnimation-data-v-263708c8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-263708c8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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


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

  @-webkit-keyframes loadingAnimation-data-v-77358a6e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-77358a6e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-colorLabel {
    display: -webkit-box;
    display: flex;
    height: 20px;
    padding: 4px 8px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border-radius: 10px;
    font-size: 12px
  }

  .m-colorLabel[data-type=basic] {
    color: #787c7b;
    background-color: #f2f2f2
  }

  .m-colorLabel[data-type=primary] {
    color: #fff;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
  }

  .m-colorLabel[data-type=green] {
    color: #fff;
    background-color: #5ac8b8
  }

  .m-colorLabel[data-type=yellow] {
    color: #fff;
    background-color: #f68229
  }

  .m-colorLabel[data-type=red] {
    color: #fff;
    background-color: #ff5732
  }

  .m-colorLabel[data-type=contest] {
    color: #fff;
    background-color: #eca726
  }

  .m-colorLabel[data-size=small] {
    font-size: 10px;
    height: 16px;
    padding: 3px 8px
  }


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

  @-webkit-keyframes loadingAnimation-data-v-61ecb302 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-61ecb302 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .m-uploadedImage__item {
    padding: 16px
  }

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-89429e9a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-89429e9a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-1da89e2a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1da89e2a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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

  .a-checkbox__check {
    cursor: pointer
  }

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-74335828 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-74335828 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }


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

  @-webkit-keyframes loadingAnimation-data-v-13bb9076 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-13bb9076 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

  .m-accordion__body {
    padding: 16px
  }

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


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

  @-webkit-keyframes loadingAnimation-data-v-6bc17e11 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6bc17e11 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-27772296 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-27772296 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-45107202 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-45107202 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-iconButton .m-iconButton__labelWithIcon {
    margin-right: 4px
  }


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

  @-webkit-keyframes loadingAnimation-data-v-da1ba3f2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-da1ba3f2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

  .o-magazineListForm__full {
    padding: 8px
  }

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

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

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

  .o-magazineListForm__editFormButton {
    padding: 0 8px
  }

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-afd62386 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-afd62386 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-3d6548e7 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3d6548e7 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-536dcd77 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-536dcd77 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

  .a-tag__link {
    display: block
  }

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-3dcb2f50 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3dcb2f50 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

  .m-tagInput__autocomplete {
    position: relative
  }

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-14fc9452 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-14fc9452 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-dc14f83c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-dc14f83c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-74d3cf95 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-74d3cf95 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-00d2a719 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-00d2a719 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-e5afbffa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e5afbffa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }


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

  @-webkit-keyframes loadingAnimation-data-v-47678728 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-47678728 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-42d5fa69 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-42d5fa69 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-7ed52b54 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7ed52b54 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

  .txt-grey {
    color: #898d8c
  }


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

  @-webkit-keyframes loadingAnimation-data-v-5be8cbcb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5be8cbcb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

  .o-refundSetting__link {
    color: #2cb696
  }

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


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

  @-webkit-keyframes loadingAnimation-data-v-67544c86 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-67544c86 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-2ed3c549 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2ed3c549 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

  .m-fileContainer__item {
    padding: 16px
  }

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-9edf60de {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-9edf60de {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-3c1ffaed {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3c1ffaed {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .inner-4 {
    padding: 40px
  }

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

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

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

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

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

  .fl-left {
    float: left
  }

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

  .fl-right {
    float: right
  }


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

  @-webkit-keyframes loadingAnimation-data-v-7b0a2c34 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7b0a2c34 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-5fa1740f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5fa1740f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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


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

  @-webkit-keyframes loadingAnimation-data-v-51eda01e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-51eda01e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

  .o-editTalkNoteForm__file {
    text-align: left
  }


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

  @-webkit-keyframes loadingAnimation-data-v-4bc93502 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4bc93502 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-434c1684 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-434c1684 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-homescreenTutorial {
    padding: 24px
  }

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-3ab7b850 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3ab7b850 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

  .o-imageCropModal__body {
    text-align: center
  }

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

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

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

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

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

  .o-imageCropModal__setting {
    padding: 24px
  }

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

  .o-imageCropModal__sliderIcon {
    margin: 0 8px
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-2a5d5071 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2a5d5071 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

  .o-galleryModal__body {
    padding: 24px
  }

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-71fc2dca {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-71fc2dca {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-146a0cf8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-146a0cf8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-loginSignupModal__body {
    padding: 40px
  }

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-41a5e297 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-41a5e297 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-3173cf8a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3173cf8a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

  .m-richModalContentStandardLayout__main {
    padding: 24px
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-09e6b22d {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-09e6b22d {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

  .o-signupModal__action {
    margin: 16px 0
  }

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

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

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

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

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

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

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

  .o-signupModal__subAction {
    margin: 16px 0
  }

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-470faa72 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-470faa72 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

  @-webkit-keyframes loadingAnimation-data-v-a1a90344 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-a1a90344 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineArrangeNotes__header {
    position: relative
  }

  .o-magazineArrangeNotes__bodyLoading {
    margin: 20px 0
  }

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

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

  .o-magazineArrangeNotes__pinNote {
    padding: 8px 0
  }

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

  .o-magazineArrangeNotes__pinnedNote:empty {
    margin: 0
  }

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


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

  @-webkit-keyframes loadingAnimation-data-v-86133424 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-86133424 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineDescription {
    padding: 24px
  }

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

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

  .o-magazineDescription__name {
    color: #787c7b
  }

  .o-magazineDescription__count,
  .o-magazineDescription__name {
    font-size: 12px;
    margin-bottom: 16px
  }

  .o-magazineDescription__price {
    display: -webkit-box;
    display: flex;
    align-self: center
  }

  .o-magazineDescription__priceLabel {
    margin-left: 8px
  }

  .o-magazineDescription__sns {
    display: -webkit-inline-box;
    display: inline-flex
  }

  .o-magazineDescription__snsLink {
    margin-right: 8px;
    color: #a8abb1
  }


  .o-magazineLeave__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-be11bb58 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-be11bb58 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineLeave__body {
    padding: 40px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-magazineLeave__body {
      padding: 24px
    }
  }

  .o-magazineLeave__name {
    font-weight: 700
  }

  .o-magazineLeave__alert {
    margin-top: 16px;
    font-weight: 700;
    color: #f95;
    font-size: 14px
  }


  .o-magazineDeactivate__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-08332d4a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-08332d4a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineDeactivate__body {
    padding: 40px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-magazineDeactivate__body {
      padding: 24px
    }
  }

  .o-magazineDeactivate__name {
    font-weight: 700
  }

  .o-magazineDeactivate__alert {
    margin-top: 16px;
    font-weight: 700;
    color: #f95;
    font-size: 14px
  }


  .o-magazineAuthority__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-362f6b81 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-362f6b81 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineAuthority__body {
    padding: 40px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-magazineAuthority__body {
      padding: 24px
    }
  }

  .o-magazineAuthority__name {
    font-weight: 700
  }


  .o-magazineResendInvitation__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7e622924 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7e622924 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineResendInvitation__body {
    padding: 40px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-magazineResendInvitation__body {
      padding: 24px
    }
  }

  .o-magazineResendInvitation__name {
    font-weight: 700
  }


  .m-magazineDistributeItem:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1b1d7e8a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1b1d7e8a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-magazineDistributeItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .m-magazineDistributeItem__avatar {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px
  }

  .m-magazineDistributeItem__body {
    margin-right: 16px
  }

  .m-magazineDistributeItem__name {
    font-weight: 700;
    word-break: break-all;
    font-size: 14px
  }

  .m-magazineDistributeItem__role {
    font-size: 12px;
    line-height: 1;
    color: #787c7b
  }

  .m-magazineDistributeItem__number {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: auto
  }

  .m-magazineDistributeItem__numberField {
    margin-right: 8px
  }

  .m-magazineDistributeItem__numberFixed {
    font-size: 16px;
    margin-right: 8px;
    margin-left: 8ex;
    font-weight: 700
  }

  .m-magazineDistributeItem__numberRatio {
    font-size: 14px
  }


  .o-magazineDistribute__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-663b64a8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-663b64a8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineDistribute__body {
    padding: 24px
  }

  @media only screen and (max-width:479px) {
    .o-magazineDistribute__body {
      padding: 16px
    }
  }

  .o-magazineDistribute__item+.o-magazineDistribute__item {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
  }

  .o-magazineDistribute__error {
    margin-top: 16px;
    font-weight: 700;
    color: #ed4956;
    font-size: 14px
  }


  .o-magazineDistributeConfirm__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-d0e4ecf8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-d0e4ecf8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineDistributeConfirm__body {
    padding: 24px
  }

  @media only screen and (max-width:479px) {
    .o-magazineDistributeConfirm__body {
      padding: 16px
    }
  }

  .o-magazineDistributeConfirm__item+.o-magazineDistributeConfirm__item {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
  }


  .m-pickUserItem:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-718aca9c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-718aca9c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-pickUserItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .m-pickUserItem__avatar {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px
  }

  .m-pickUserItem__name {
    margin-right: 16px;
    font-weight: 700;
    font-size: 14px;
    word-break: break-all
  }

  .m-pickUserItem__delete {
    margin-left: auto;
    color: #a8abb1;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .m-pickUserItem__delete {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-pickUserItem__delete:hover {
      color: #787c7b
    }
  }


  .o-userPick:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-fa515342 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-fa515342 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-userPick {
    position: relative
  }

  .o-userPick__dropdown {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 300px;
    margin-top: -4px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #a8abb1;
    border-top: none;
    border-radius: 0 0 4px 4px
  }

  .o-userPick__item+.o-userPick__item {
    border-top: 1px solid #f2f2f2
  }

  .o-userPick__itemLink {
    display: -webkit-box;
    display: flex;
    padding: 16px
  }

  .o-userPick__itemAvatar {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px
  }

  .o-userPick__itemName {
    font-weight: 700;
    font-size: 14px
  }

  .o-userPick__itemUrl {
    font-size: 12px;
    line-height: 1;
    color: #787c7b
  }

  .o-userPick__selected {
    padding: 16px;
    margin-top: 8px;
    background-color: #f7f9f9;
    border-radius: 4px
  }

  .o-userPick__selectedItem+.o-userPick__selectedItem {
    margin-top: 16px
  }


  .o-magazineUserpick__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-64b59bb0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-64b59bb0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineUserpick__body {
    padding: 24px
  }

  @media only screen and (max-width:479px) {
    .o-magazineUserpick__body {
      padding: 16px
    }
  }

  .o-magazineUserpick__premium {
    padding: 24px;
    margin-top: 16px;
    text-align: center;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-magazineUserpick__premium {
      text-align: left
    }
  }

  .o-magazineUserpick__premiumTitle {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
  }

  .o-magazineUserpick__premiumDescription {
    font-size: 12px
  }

  .o-magazineUserpick__premiumButton {
    margin-top: 16px
  }

  .o-magazineUserpick__limit {
    margin-top: 16px;
    font-weight: 700;
    color: #ed4956;
    text-align: center;
    font-size: 14px
  }


  .o-magazineEditorModal__other:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-63ac29bd {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-63ac29bd {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineEditorModal__other {
    padding: 16px 24px;
    color: #787c7b;
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .o-magazineEditorModal__other {
      padding: 8px 16px
    }
  }


  .o-magazineHaving__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3d79cc40 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3d79cc40 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineHaving__body {
    max-height: 440px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }

  @media only screen and (max-width:479px) {
    .o-magazineHaving__body {
      max-height: 360px
    }
  }

  .o-magazineHaving__item+.o-magazineHaving__item {
    border-top: 1px solid #f2f2f2
  }

  @media only screen and (max-width:768px) {
    .o-magazineHaving__item {
      margin-bottom: 1px
    }
  }

  .o-magazineHaving__link {
    display: block;
    padding: 16px
  }

  @media only screen and (min-width:769px) {
    .o-magazineHaving__link:hover {
      background-color: #f7f9f9
    }
  }

  .o-magazineHaving__more {
    padding: 16px
  }

  .o-magazineHaving__loading {
    padding: 32px
  }


  .o-topicListItem:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-40ee02b4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-40ee02b4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicListItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f2f2f2
  }

  .o-topicListItem__content {
    -webkit-box-flex: 1;
    flex: 1
  }

  .o-topicListItem__name {
    font-size: 14px;
    font-weight: 700
  }

  .o-topicListItem__subname {
    font-size: 12px;
    color: #787c7b
  }


  .o-topicList:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-203b6ff6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-203b6ff6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicList {
    background-color: #fff
  }

  .o-topicList__icon {
    margin-right: 8px
  }

  .o-topicList__title {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 16px;
    color: #787c7b;
    background-color: #f7f9f9;
    font-size: 12px
  }


  .o-modalMagazineList__header:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-b0cfb748 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-b0cfb748 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-modalMagazineList__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: center;
    justify-content: center
  }

  .o-modalMagazineList__body {
    max-height: 400px;
    overflow: auto
  }


  .o-magazineSuspendModal__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-43addf3f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-43addf3f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineSuspendModal__body {
    padding: 32px
  }

  @media only screen and (max-width:479px) {
    .o-magazineSuspendModal__body {
      padding: 24px
    }
  }

  .o-magazineSuspendModal__read {
    margin-bottom: 16px;
    text-align: center;
    font-size: 14px
  }

  .o-magazineSuspendModal__attention {
    padding: 16px;
    background-color: #f7f9f9;
    border: 1px solid #e6e6e6;
    font-size: 16px
  }


  .o-magazineSuspendCompletedModal__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-c9ed03d6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-c9ed03d6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineSuspendCompletedModal__body {
    padding: 32px
  }

  @media only screen and (max-width:479px) {
    .o-magazineSuspendCompletedModal__body {
      padding: 24px
    }
  }

  .o-magazineSuspendCompletedModal__read {
    margin-bottom: 24px
  }

  .o-magazineSuspendCompletedModal__suspendedAt {
    font-weight: 700
  }

  .o-magazineSuspendCompletedModal__question {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
  }

  .o-magazineSuspendCompletedModal__option {
    color: #787c7b
  }

  .o-magazineSuspendCompletedModal__checkbox {
    margin-bottom: 16px
  }

  .o-magazineSuspendCompletedModal__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
  }

  .o-magazineSuspendCompletedModal__footer button:first-child {
    margin-left: 0
  }


  .m-paywallRemainingContentLabel__count:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0db1611a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0db1611a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallRemainingContentLabel__count {
    font-size: 12px;
    color: #787c7b
  }

  .m-paywallRemainingContentLabel__countWarning {
    display: inline;
    margin-right: 4px;
    color: #f95
  }

  .m-paywallRemainingContentLabel__countText {
    font-size: 12px;
    display: inline;
    color: #787c7b
  }

  .m-paywallRemainingContentLabel__countDivider {
    display: inline;
    margin-right: 4px;
    margin-left: 4px
  }


  .m-purchaseCover:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4f340b28 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4f340b28 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-purchaseCover {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .m-purchaseCover__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-align: start;
    align-items: flex-start
  }

  @media only screen and (max-width:479px) {
    .m-purchaseCover__body {
      display: block
    }
  }

  .m-purchaseCover__cover {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 16px
  }

  .m-purchaseCover__coverImage {
    border: 1px solid #f2f2f2
  }

  .m-purchaseCover__coverImage--note {
    width: 40px;
    height: 40px;
    border-radius: 4px
  }

  .m-purchaseCover__coverImage--magazine {
    width: 80px;
    height: 40px;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover
  }

  @media only screen and (max-width:479px) {
    .m-purchaseCover__coverImage--magazine {
      width: 72px
    }
  }

  .m-purchaseCover__title {
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .m-purchaseCover__author {
    font-size: 14px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all
  }

  .m-purchaseCover__action {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin-left: 16px
  }

  @media only screen and (max-width:479px) {
    .m-purchaseCover__action {
      -webkit-box-pack: start;
      justify-content: flex-start;
      margin-top: 16px;
      margin-left: 0
    }
  }

  .m-purchaseCover__price {
    font-weight: 700;
    color: #2cb696;
    color: var(--customPrimaryColor);
    text-align: right;
    white-space: nowrap
  }

  .m-purchaseCover__warning {
    display: inline-block;
    margin-top: 4px
  }

  .m-purchaseCover__caution {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 8px;
    margin-left: 8px
  }

  @media only screen and (max-width:479px) {
    .m-purchaseCover__caution {
      margin-top: 0
    }
  }

  .m-purchaseCover__cautionLabel {
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 22px;
    padding: 5px 8px;
    margin-right: 4px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    background-color: #f95;
    border-radius: 11px;
    font-size: 12px
  }

  .m-purchaseCover__cautionIcon {
    margin-right: 4px
  }

  .m-purchaseCover__help {
    height: 16px;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .m-purchaseCover__help {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-purchaseCover__help:hover {
      color: #787c7b
    }
  }


  .o-magazineSuspendConfirmModal__alert:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7ac90801 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7ac90801 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineSuspendConfirmModal__alert {
    padding: 8px;
    margin-bottom: 32px;
    color: #fff;
    text-align: center;
    background-color: #f95;
    font-size: 14px
  }

  .o-magazineSuspendConfirmModal__message {
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
  }

  .o-magazineSuspendConfirmModal__magazine {
    padding: 16px;
    margin: 0 24px 24px;
    background-color: #f7f9f9;
    border-radius: 4px
  }


  .m-confirmListItem__title:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-238b49c3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-238b49c3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-confirmListItem__title {
    font-size: 14px;
    margin-bottom: 8px;
    color: #787c7b
  }

  .m-confirmListItem__body {
    font-weight: 700
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1eebb9d1 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1eebb9d1 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-unsubscribeModal__item {
    margin: 24px
  }

  .o-unsubscribeModal__item+.o-unsubscribeModal__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
  }

  .o-unsubscribeModal__item--target {
    padding: 24px;
    margin: 0;
    background-color: #f7f9f9
  }


  .o-unsubscribeConfirmModal__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3363c048 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3363c048 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-unsubscribeConfirmModal__body {
    padding: 32px
  }

  @media only screen and (max-width:479px) {
    .o-unsubscribeConfirmModal__body {
      padding: 24px
    }
  }

  .o-unsubscribeConfirmModal__read {
    margin-bottom: 24px
  }

  .o-unsubscribeConfirmModal__header {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px
  }

  .o-unsubscribeConfirmModal__option {
    color: #787c7b
  }

  .o-unsubscribeConfirmModal__attention {
    margin-bottom: 16px;
    color: #787c7b;
    font-size: 12px
  }

  .o-unsubscribeConfirmModal__checkbox {
    margin-bottom: 16px
  }


  .o-creatorQrCodeModal__header:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-368dc6c8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-368dc6c8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorQrCodeModal__header {
    font-weight: 700
  }

  .o-creatorQrCodeModal__body {
    padding: 24px
  }

  .o-creatorQrCodeModal__qrCode {
    text-align: center
  }

  .o-creatorQrCodeModal__description {
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center;
    font-size: 14px
  }

  .o-creatorQrCodeModal__exampleNotes {
    font-weight: 400;
    color: #787c7b;
    text-align: center;
    font-size: 14px
  }


  .o-pickUrlname__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-317cf2f9 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-317cf2f9 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-pickUrlname__body {
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-pickUrlname__body {
      padding: 24px
    }
  }

  .o-pickUrlname__title {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center
  }

  .o-pickUrlname__field {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .o-pickUrlname__fieldDomain {
    -webkit-box-flex: 1;
    flex: 1;
    width: 60px;
    font-size: 12px
  }

  .o-pickUrlname__fieldInput {
    -webkit-box-flex: 2;
    flex: 2;
    margin-left: 16px;
    border: none
  }

  .o-pickUrlname__error {
    font-size: 14px;
    color: #ed4956
  }

  .o-pickUrlname__description {
    margin-top: 16px;
    font-size: 12px;
    color: #787c7b
  }

  .o-pickUrlname__descriptionItem+.o-pickUrlname__descriptionItem {
    margin-top: 8px
  }

  .o-pickUrlname__action {
    margin-top: 16px
  }

  .o-pickUrlname__about {
    display: block;
    margin-top: 16px;
    color: #2cb696;
    text-align: center;
    font-size: 14px
  }


  .o-premiumSuspendAgreementModal__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0751840e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0751840e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-premiumSuspendAgreementModal__body {
    padding: 24px
  }

  .o-premiumSuspendAgreementModal__caption {
    margin-bottom: 16px;
    text-align: center
  }

  .o-premiumSuspendAgreementModal__notes {
    padding: 24px 24px 24px 40px;
    list-style-type: disc;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  .o-premiumSuspendAgreementModal__notesItem {
    font-weight: 700;
    font-size: 14px
  }

  .o-premiumSuspendAgreementModal__notesItem+.o-premiumSuspendAgreementModal__notesItem {
    margin-top: 8px
  }

  .o-premiumSuspendAgreementModal__subNotes {
    padding: 0 0 0 16px;
    font-weight: 400
  }

  .o-premiumSuspendAgreementModal__subNotesItem {
    padding: 0;
    margin-top: 4px;
    list-style-type: disc
  }


  .o-premiumSuspendConfirmModal__body:root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-31841a0d {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-31841a0d {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-premiumSuspendConfirmModal__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    padding: 24px
  }

  .o-premiumSuspendConfirmModal__planImg {
    width: 128px;
    height: auto;
    margin-bottom: 24px;
    vertical-align: top;
    border-radius: 50%
  }

  .o-premiumSuspendConfirmModal__planInfo {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px;
    line-height: 1
  }

  .o-premiumSuspendConfirmModal__planName {
    font-size: 14px
  }

  .o-premiumSuspendConfirmModal__planPrice {
    margin-left: 8px;
    font-weight: 700
  }

  .o-premiumSuspendConfirmModal__limit {
    color: #787c7b;
    text-align: center;
    font-size: 14px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-53b2ee76 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-53b2ee76 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-previewLinkModal__body {
    font-size: 14px;
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-previewLinkModal__body {
      padding: 24px
    }
  }

  .o-previewLinkModal__message {
    margin-bottom: 16px
  }

  .o-previewLinkModal__field {
    min-height: 100px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-29344e74 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-29344e74 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-supportSelectPrice {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .m-supportSelectPrice__item {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 8px 4px;
    border: 2px solid transparent;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-supportSelectPrice__item:hover {
      background-color: #f7f9f9
    }
  }

  .m-supportSelectPrice__item.is-active {
    color: #2cb696;
    color: var(--customPrimaryColor);
    background-color: #fff;
    border: 2px solid #2cb696;
    border: 2px solid var(--customPrimaryColor)
  }

  .m-supportSelectPrice__icon {
    width: 64px
  }

  @media only screen and (max-width:479px) {
    .m-supportSelectPrice__icon {
      width: 48px
    }
  }

  .m-supportSelectPrice__link {
    display: block;
    text-align: center
  }

  .m-supportSelectPrice__customField {
    width: 70px
  }

  @media only screen and (max-width:479px) {
    .m-supportSelectPrice__customField {
      width: 60px
    }
  }

  .m-supportSelectPrice__price {
    font-weight: 700;
    font-size: 18px;
    line-height: 1
  }

  @media only screen and (max-width:479px) {
    .m-supportSelectPrice__price {
      font-size: 16px
    }
  }

  .m-supportSelectPrice__unit {
    font-size: 12px;
    margin-left: 2px;
    line-height: 1
  }

  .m-supportSelectPrice__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 30px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6463ad3c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6463ad3c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseSupport__title {
    font-size: 18px;
    margin: 24px 24px 8px;
    font-weight: 700;
    text-align: center
  }

  .o-purchaseSupport__link {
    font-size: 14px;
    display: block;
    color: #787c7b;
    text-align: center;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .o-purchaseSupport__link:hover {
      color: #222
    }
  }

  .o-purchaseSupport__avatar {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px
  }

  .o-purchaseSupport__body {
    margin: 24px
  }

  .o-purchaseSupport__item+.o-purchaseSupport__item {
    margin-top: 24px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6e491c58 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6e491c58 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseOneshotContent__body {
    padding-bottom: 24px
  }

  @media only screen and (max-width:479px) {
    .o-purchaseOneshotContent__body {
      padding-bottom: 16px
    }
  }

  .o-purchaseOneshotContent__item {
    margin-right: 24px;
    margin-left: 24px
  }

  @media only screen and (max-width:479px) {
    .o-purchaseOneshotContent__item {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-purchaseOneshotContent__item+.o-purchaseOneshotContent__item {
    margin-top: 16px
  }

  .o-purchaseOneshotContent__item--target {
    padding: 16px 24px;
    margin-right: 0;
    margin-left: 0;
    background-color: #f7f9f9
  }

  @media only screen and (max-width:479px) {
    .o-purchaseOneshotContent__item--target {
      padding: 16px
    }
  }

  .o-purchaseOneshotContent__item--border {
    padding-top: 16px;
    border-top: 1px solid #f2f2f2
  }

  .o-purchaseOneshotContent__itemInline {
    display: inline-block
  }

  .o-purchaseOneshotContent__help {
    margin-left: 8px
  }

  .o-purchaseOneshotContent__helpLink {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-purchaseOneshotContent__helpLink {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-purchaseOneshotContent__helpLink:hover {
      color: #787c7b
    }
  }

  .o-purchaseOneshotContent__helpSupport {
    font-size: 14px;
    color: #787c7b;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .o-purchaseOneshotContent__helpSupport:hover {
      color: #222
    }
  }

  .o-purchaseOneshotContent__helpPay {
    font-size: 14px;
    display: block;
    color: #787c7b;
    text-align: center;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .o-purchaseOneshotContent__helpPay:hover {
      color: #222
    }
  }

  .o-purchaseOneshotContent__payment {
    display: -webkit-inline-box;
    display: inline-flex
  }

  .o-purchaseOneshotContent__paymentLabel {
    font-size: 14px
  }

  .o-purchaseOneshotContent__paymentChange {
    font-size: 14px;
    margin-left: 8px;
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  .o-purchaseOneshotContent__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: 100%
  }

  .o-purchaseOneshotContent__footerButton {
    margin-left: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-614c4813 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-614c4813 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseSupportPaymentMethod__carrier {
    margin: 24px 0 24px 32px
  }

  .o-purchaseSupportPaymentMethod__about {
    margin-top: 24px
  }

  .o-purchaseSupportPaymentMethod__helpCarrier {
    font-size: 14px;
    color: #787c7b;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .o-purchaseSupportPaymentMethod__helpCarrier:hover {
      color: #222
    }
  }

  .o-purchaseSupportPaymentMethod__item+.o-purchaseSupportPaymentMethod__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
  }

  .o-purchaseSupportPaymentMethod__body {
    margin: 24px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0b3329d0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0b3329d0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-creditCardForm__item+.m-creditCardForm__item {
    margin-top: 24px
  }

  .m-creditCardForm__item--security {
    display: -webkit-box;
    display: flex
  }

  .m-creditCardForm__cardimage {
    display: block;
    width: 260px;
    max-width: 100%;
    max-height: 34px;
    margin: 24px auto
  }

  .m-creditCardForm__limit,
  .m-creditCardForm__limitSeparate {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .m-creditCardForm__limitSeparate {
    margin-right: 16px;
    margin-left: 16px
  }

  .m-creditCardForm__securityImage {
    height: 40px;
    margin-left: 8px
  }

  .m-creditCardForm__note {
    font-size: 14px;
    margin-top: 24px;
    color: #787c7b
  }

  .m-creditCardForm__noteLink {
    color: #2cb696;
    color: var(--customPrimaryColor)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-497d5450 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-497d5450 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseCreditCardInput__body {
    margin: 24px
  }

  .o-purchaseCreditCardInput__item+.o-purchaseCreditCardInput__item {
    margin-top: 24px
  }

  .o-purchaseCreditCardInput__item--segment {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #f2f2f2
  }

  .o-purchaseCreditCardInput__note {
    font-size: 14px;
    margin-top: 24px;
    color: #787c7b
  }

  .o-purchaseCreditCardInput__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: 100%
  }

  .o-purchaseCreditCardInput__footerButton {
    margin-left: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-105e9f59 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-105e9f59 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseSupportConfirm__title {
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
  }

  .o-purchaseSupportConfirm__avatar {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px
  }

  .o-purchaseSupportConfirm__item {
    margin: 24px
  }

  .o-purchaseSupportConfirm__item+.o-purchaseSupportConfirm__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
  }

  .o-purchaseSupportConfirm__item--target {
    padding: 16px 24px;
    margin: 0;
    background-color: #f7f9f9
  }

  .o-purchaseSupportConfirm__item--target+.o-purchaseSupportConfirm__item {
    padding-top: 0;
    border-top: 0
  }

  .o-purchaseSupportConfirm__credit {
    margin-bottom: 8px
  }

  .o-purchaseSupportConfirm__count {
    font-size: 14px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    color: #787c7b
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-736fa3b3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-736fa3b3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseNoteFlowChoiceModal {
    padding: 40px
  }

  .o-purchaseNoteFlowChoiceModal__item+.o-purchaseNoteFlowChoiceModal__item {
    padding-top: 32px;
    margin-top: 32px;
    border-top: 1px solid #f2f2f2
  }

  .o-purchaseNoteFlowChoiceModal__button+.o-purchaseNoteFlowChoiceModal__button {
    margin-top: 8px
  }

  .o-purchaseNoteFlowChoiceModal__title {
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-e32277ac {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e32277ac {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseNoteGuestConfirm__item {
    margin: 24px
  }

  .o-purchaseNoteGuestConfirm__item+.o-purchaseNoteGuestConfirm__item {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
  }

  .o-purchaseNoteGuestConfirm__item--target {
    padding: 16px 24px;
    margin: 0;
    background-color: #f7f9f9
  }

  .o-purchaseNoteGuestConfirm__item--target+.o-purchaseNoteGuestConfirm__item {
    padding-top: 0;
    border-top: 0
  }

  .o-purchaseNoteGuestConfirm__link {
    color: #2cb696;
    color: var(--customPrimaryColor)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5c14e722 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5c14e722 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseNoteGuestComplete__thanks {
    padding: 32px 40px
  }

  .o-purchaseNoteGuestComplete__thanksNum {
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
  }

  .o-purchaseNoteGuestComplete__thanksMessage {
    margin-bottom: 8px;
    font-weight: 700;
    color: #ed4956;
    text-align: center;
    font-size: 14px
  }

  .o-purchaseNoteGuestComplete__signup {
    padding: 32px 24px 24px;
    margin: 0 16px 16px;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  .o-purchaseNoteGuestComplete__signupTitle {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
  }

  .o-purchaseNoteGuestComplete__signupDescription {
    margin-bottom: 24px;
    font-size: 14px
  }

  .o-purchaseNoteGuestComplete__signupItem+.o-purchaseNoteGuestComplete__signupItem {
    margin-top: 24px
  }

  .o-purchaseNoteGuestComplete__signupItem__description {
    font-size: 12px
  }

  .o-purchaseNoteGuestComplete__signupName {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
  }

  .o-purchaseNoteGuestComplete__signupValue {
    font-size: 14px
  }

  .o-purchaseNoteGuestComplete__signupLink {
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  .o-purchaseNoteGuestComplete__mailsend {
    padding: 32px 40px;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-9d621ee2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-9d621ee2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-contentReviewButton {
    width: 100%
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-406e320f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-406e320f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-avatars__list {
    display: -webkit-box;
    display: flex
  }

  .m-avatars__item {
    position: relative;
    margin-right: -8px;
    cursor: pointer
  }

  .m-avatars__item:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    box-sizing: content-box;
    display: block;
    content: "";
    border: 2px solid #fff;
    border-radius: 30px
  }

  .m-avatars__item:last-child {
    margin-right: 0
  }

  .m-avatars__item:first-child {
    z-index: 8
  }

  .m-avatars__item:nth-child(2) {
    z-index: 7
  }

  .m-avatars__item:nth-child(3) {
    z-index: 6
  }

  .m-avatars__item:nth-child(4) {
    z-index: 5
  }

  .m-avatars__item:nth-child(5) {
    z-index: 4
  }

  .m-avatars__item:nth-child(6) {
    z-index: 3
  }

  .m-avatars__item:nth-child(7) {
    z-index: 2
  }

  .m-avatars__item--more {
    padding: 0 8px;
    color: #787c7b;
    text-align: center;
    background-color: #f7f9f9;
    font-size: 12px
  }

  .m-avatars__item--more--small {
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 24px
  }

  .m-avatars__item--more--medium {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px
  }

  .m-avatars__item--more--large {
    min-width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 56px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7b2f8a23 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7b2f8a23 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-contentReviewers {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-contentReviewers__label {
    font-size: 14px;
    margin: 4px 8px;
    color: #787c7b
  }

  @media only screen and (max-width:479px) {
    .m-contentReviewers__label {
      font-size: 12px
    }
  }

  .m-contentReviewers__list {
    display: -webkit-box;
    display: flex;
    margin-right: 8px
  }

  .m-contentReviewers--more {
    z-index: 1;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    line-height: 30px;
    color: #787c7b;
    text-align: center;
    background-color: #f7f9f9;
    border-radius: 30px;
    font-size: 12px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5ef8ee67 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5ef8ee67 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-noteReview {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 24px;
    margin: 0 0 16px
  }

  .o-noteReview:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    content: "";
    border: 1px solid #2cb696;
    border: 1px solid var(--customPrimaryColor);
    border-radius: 4px
  }

  .o-noteReview__title {
    font-size: 16px;
    position: relative;
    z-index: 3;
    padding: 0 16px;
    margin-top: -36px;
    margin-bottom: 16px;
    color: #2cb696;
    color: var(--customPrimaryColor);
    background-color: #fff
  }

  @media only screen and (max-width:479px) {
    .o-noteReview__title {
      font-size: 13px
    }
  }

  .o-noteReview__info {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 8px
  }

  .o-noteReview__description {
    color: #2cb696;
    font-size: 12px
  }

  .o-noteReview__action {
    position: relative;
    z-index: 2;
    width: 100%
  }

  .o-noteReview__reviewers {
    position: relative;
    z-index: 2;
    margin-top: 8px
  }

  .o-noteReview__button {
    display: none
  }

  .o-noteReview__button.is-show {
    display: block
  }

  .o-noteReview__thanks {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-weight: 700;
    color: #2cb696;
    color: var(--customPrimaryColor);
    pointer-events: none;
    background-color: #fff;
    opacity: 0;
    font-size: 18px
  }

  @media only screen and (max-width:479px) {
    .o-noteReview__thanks {
      font-size: 16px
    }
  }

  @-webkit-keyframes effectThanks-data-v-5ef8ee67 {
    0% {
      opacity: 0
    }

    25% {
      opacity: 1
    }

    75% {
      opacity: 1
    }

    to {
      opacity: 0
    }
  }

  @keyframes effectThanks-data-v-5ef8ee67 {
    0% {
      opacity: 0
    }

    25% {
      opacity: 1
    }

    75% {
      opacity: 1
    }

    to {
      opacity: 0
    }
  }

  .o-noteReview__thanks.is-show {
    -webkit-animation: effectThanks-data-v-5ef8ee67 2.6s;
    animation: effectThanks-data-v-5ef8ee67 2.6s
  }

  .o-noteReviewModal__label {
    display: -webkit-box;
    display: flex;
    margin-top: 8px
  }

  .o-noteReviewModal__help {
    margin-left: 8px
  }

  .o-noteReviewModal__text {
    color: #2cb696;
    font-size: 14px
  }

  .o-noteReviewModal__helpLink {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-noteReviewModal__helpLink {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-noteReviewModal__helpLink:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-f903ea20 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-f903ea20 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-afterPurchaseMessageModal__item {
    position: relative
  }

  .o-afterPurchaseMessageModal__bg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
  }

  .o-afterPurchaseMessageModal__bgImage {
    width: auto;
    max-width: 100%
  }

  .o-afterPurchaseMessageModal__default {
    width: 104px;
    border-radius: 50%
  }

  .o-afterPurchaseMessageModal__avatar {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 48px 0
  }

  @media only screen and (max-width:479px) {
    .o-afterPurchaseMessageModal__avatar {
      padding: 32px 0
    }
  }

  .o-afterPurchaseMessageModal__message {
    position: relative;
    z-index: 2;
    padding: 24px;
    margin: 0 40px 40px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 16px
  }

  .o-afterPurchaseMessageModal__message:before {
    position: absolute;
    top: -12px;
    left: 50%;
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #e6e6e6;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
  }

  .o-afterPurchaseMessageModal__support {
    margin: 0 40px 40px
  }

  .o-afterPurchaseMessageModal__shareButtons {
    padding: 14px 24px 24px
  }

  .o-afterPurchaseMessageModal__action {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .05)
  }

  .o-afterPurchaseMessageModal__actionMessage {
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-66db984d {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-66db984d {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-couponForm__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .m-couponForm__submit {
    margin-left: 8px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5f11cf4b {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5f11cf4b {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseSubscribeMagazine__helpSupport {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-purchaseSubscribeMagazine__helpSupport {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-purchaseSubscribeMagazine__helpSupport:hover {
      color: #787c7b
    }
  }

  .o-purchaseSubscribeMagazine__item {
    margin: 16px
  }

  .o-purchaseSubscribeMagazine__item--strong {
    padding: 24px 48px;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-purchaseSubscribeMagazine__item--strong {
      padding: 16px
    }
  }

  .o-purchaseSubscribeMagazine__coupon {
    margin-top: 8px;
    margin-left: 96px;
    font-size: 14px;
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  @media only screen and (max-width:479px) {
    .o-purchaseSubscribeMagazine__coupon {
      margin-left: 88px
    }
  }

  .o-purchaseSubscribeMagazine__alert {
    font-size: 12px;
    font-weight: 700;
    color: #ed4956;
    text-align: center
  }

  .o-purchaseSubscribeMagazine__message {
    font-size: 14px;
    text-align: center
  }

  .o-purchaseSubscribeMagazine__date {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center
  }

  .o-purchaseSubscribeMagazine__dateSub {
    font-size: 12px;
    display: inline;
    font-weight: 400
  }

  .o-purchaseSubscribeMagazine__dateMore {
    font-size: 12px;
    font-weight: 400;
    color: #787c7b;
    text-align: center
  }

  .o-purchaseSubscribeMagazine__price {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center
  }

  .o-purchaseSubscribeMagazine__priceSub {
    font-size: 12px;
    display: inline;
    font-weight: 400
  }

  .o-purchaseSubscribeMagazine__select {
    margin-top: 16px
  }

  .o-purchaseSubscribeMagazine__carrier {
    padding: 16px;
    margin-top: 16px;
    background-color: #fff;
    border-radius: 4px
  }

  .o-purchaseSubscribeMagazine__carrierItem+.o-purchaseSubscribeMagazine__carrierItem {
    margin-top: 8px
  }

  .o-purchaseSubscribeMagazine__attention {
    margin-top: 16px
  }

  .o-purchaseSubscribeMagazine__attentionItem {
    display: -webkit-box;
    display: flex;
    align-content: center
  }

  .o-purchaseSubscribeMagazine__attentionItem+.o-purchaseSubscribeMagazine__attentionItem {
    margin-top: 8px
  }

  .o-purchaseSubscribeMagazine__attentionIcon {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px;
    line-height: 1.5;
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  .o-purchaseSubscribeMagazine__cautionIcon {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px;
    line-height: 1.5;
    color: #f95
  }

  .o-purchaseSubscribeMagazine__attentionText {
    font-size: 12px;
    width: 100%;
    font-weight: 700;
    line-height: 1.5;
    color: #787c7b
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-e5bbde9a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e5bbde9a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-purchaseCaution__item {
    margin-right: 24px;
    margin-left: 24px
  }

  @media only screen and (max-width:479px) {
    .o-purchaseCaution__item {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-purchaseCaution__item+.o-purchaseCaution__item {
    margin-top: 16px
  }

  .o-purchaseCaution__item--target {
    padding: 16px 24px;
    margin-right: 0;
    margin-left: 0;
    background-color: #f7f9f9
  }

  @media only screen and (max-width:479px) {
    .o-purchaseCaution__item--target {
      padding: 16px
    }
  }

  .o-purchaseCaution__item--border {
    padding-top: 16px;
    border-top: 1px solid #f2f2f2
  }

  .o-purchaseCaution__helpLink {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-purchaseCaution__helpLink {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-purchaseCaution__helpLink:hover {
      color: #787c7b
    }
  }

  .o-purchaseCaution__text {
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-72fdbbad {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-72fdbbad {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-sendNoteMailModal__soundMessage {
    margin: 24px 32px;
    text-align: center
  }

  .o-sendNoteMailModal__main {
    padding: 24px;
    margin: 24px;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-sendNoteMailModal__main {
      padding: 16px;
      margin: 16px
    }
  }

  .o-sendNoteMailModal__helpSupport {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-sendNoteMailModal__helpSupport {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-sendNoteMailModal__helpSupport:hover {
      color: #787c7b
    }
  }

  .o-sendNoteMailModal__explain {
    margin-bottom: 16px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-sendNoteMailModal__explain {
      font-size: 14px
    }
  }

  .o-sendNoteMailModal__mailItem {
    margin-bottom: 16px
  }

  .o-sendNoteMailModal__mailItemBody {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-sendNoteMailModal__close {
    margin-left: 8px;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-sendNoteMailModal__close:hover {
      color: #787c7b
    }
  }

  .o-sendNoteMailModal__add {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
  }

  .o-sendNoteMailModal__attention {
    margin: 32px 24px
  }

  @media only screen and (max-width:479px) {
    .o-sendNoteMailModal__attention {
      margin: 16px
    }
  }

  .o-sendNoteMailModal__attentionTitle {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-sendNoteMailModal__attentionTitle {
      margin-bottom: 8px
    }
  }

  .o-sendNoteMailModal__attentionItem {
    display: -webkit-box;
    display: flex;
    align-content: center
  }

  .o-sendNoteMailModal__attentionItem+.o-sendNoteMailModal__attentionItem {
    margin-top: 8px
  }

  .o-sendNoteMailModal__attentionIcon {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px;
    color: #2cb696
  }

  .o-sendNoteMailModal__attentionIcon[data-icon=caution] {
    color: #f95
  }

  .o-sendNoteMailModal__attentionText {
    font-size: 12px;
    width: 100%;
    font-weight: 700;
    color: #787c7b
  }

  .o-sendNoteMailModal__image>img {
    width: 100%;
    height: auto
  }

  .o-sendNoteMailModal__addressList {
    margin-bottom: 16px
  }

  .o-sendNoteMailModal__addressListItem {
    margin-bottom: 4px;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1d7e4189 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1d7e4189 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-cancelEditModal {
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-cancelEditModal {
      padding: 24px
    }
  }

  .o-cancelEditModal__title {
    font-size: 16px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
  }

  .o-cancelEditModal__button+.o-cancelEditModal__button {
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-856fa606 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-856fa606 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-discardDraftModal {
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-discardDraftModal {
      padding: 24px
    }
  }

  .o-discardDraftModal__title {
    font-size: 16px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
  }

  .o-discardDraftModal__button+.o-discardDraftModal__button {
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-563b7b1c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-563b7b1c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-indexSetting__help {
    margin-left: 4px;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-indexSetting__help:hover {
      color: #787c7b
    }
  }

  .o-indexSetting__description {
    font-size: 14px;
    color: #787c7b
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-55b8d7ec {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-55b8d7ec {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-editTextNoteForm__onboarding {
    padding-right: 24px;
    padding-left: 24px;
    margin-top: 24px;
    margin-bottom: 24px
  }

  @media only screen and (max-width:479px) {
    .o-editTextNoteForm__onboarding {
      padding-right: 16px;
      padding-left: 16px;
      margin-top: 16px;
      margin-bottom: 16px
    }
  }

  .o-editTextNoteForm__onboarding:empty {
    padding: 0;
    margin: 0
  }

  .o-editTextNoteForm__item {
    padding-right: 24px;
    padding-left: 24px;
    margin-top: 24px;
    margin-bottom: 24px
  }

  @media only screen and (max-width:479px) {
    .o-editTextNoteForm__item {
      padding-right: 16px;
      padding-left: 16px;
      margin-top: 16px;
      margin-bottom: 16px
    }
  }

  .o-editTextNoteForm__item:empty {
    padding: 0;
    margin: 0
  }

  .o-editTextNoteForm__loading {
    margin: 32px 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3b16d6e9 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3b16d6e9 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-reactionOnboardingInModal {
    padding: 16px;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  .o-reactionOnboardingInModal__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-bottom: 16px
  }

  .o-reactionOnboardingInModal__image {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    margin-right: 8px
  }

  .o-reactionOnboardingInModal__discription {
    font-size: 14px;
    font-weight: 700
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3d19a871 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3d19a871 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (max-width:479px) {
    .o-userPopup {
      width: 100%
    }
  }

  .o-userPopup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
  }

  @media only screen and (max-width:479px) {
    .o-userPopup__close {
      top: 8px;
      right: 8px
    }
  }

  @media only screen and (min-width:769px) {
    .o-userPopup__close:hover {
      background-color: rgba(34, 34, 34, .5);
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-userPopup__body {
    padding: 24px
  }

  @media only screen and (max-width:479px) {
    .o-userPopup__confetti {
      position: relative;
      z-index: 2
    }
  }

  .o-userPopup__imageSrc {
    width: 100%;
    vertical-align: top;
    border-radius: 4px 4px 0 0
  }

  .o-userPopup__title {
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: 700;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-userPopup__title {
      font-size: 16px
    }
  }

  .o-userPopup__description {
    font-size: 14px;
    text-align: center
  }

  .o-userPopup__description a {
    margin: 0 4px;
    color: #787c7b;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .o-userPopup__description a:hover {
      color: #222;
      text-decoration: none
    }
  }

  .o-userPopup__description .p-achievementsModal__caption {
    display: block;
    font-size: 16px;
    text-align: left
  }

  .o-userPopup__actionMessage {
    font-size: 12px;
    text-align: center
  }

  .o-userPopup__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    margin-top: 16px
  }

  .o-userPopup__action--borderedTop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding-top: 16px;
    margin-top: 16px;
    text-align: center;
    border-top: 1px solid #e6e6e6
  }

  .o-userPopup__action--borderedTop>p {
    margin-bottom: 16px
  }

  .o-userPopup__badge {
    display: block;
    padding: 16px;
    margin: 24px 24px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-userPopup__badge:hover {
      border: 1px solid #a8abb1
    }
  }

  @media only screen and (max-width:479px) {
    .o-userPopup__badge {
      margin: 24px 8px
    }
  }

  .o-userPopup__badgeMessage {
    display: -webkit-box;
    display: flex
  }

  .o-userPopup__badgeIcon {
    width: 56px;
    height: 56px;
    border-radius: 50%
  }

  .o-userPopup__badgeBody {
    margin: auto auto auto 16px
  }

  .o-userPopup__badgeDescription,
  .o-userPopup__badgeLink {
    font-size: 14px;
    font-weight: 700
  }

  .o-userPopup__badgeLink {
    text-decoration: underline
  }

  .o-userPopup__reaction {
    margin-top: 24px
  }

  .o-userPopup__share {
    padding-top: 16px;
    margin-top: 24px;
    border-top: 1px solid #f2f2f2
  }

  .o-userPopup__continuousCount {
    padding-top: 48px;
    padding-bottom: 48px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 360px 180px;
    border-radius: 4px 4px 0 0
  }

  .o-userPopup__continuousCount--pattern_1 {
    background-color: #ec407a
  }

  .o-userPopup__continuousCount--pattern_2 {
    background-color: #ffa726
  }

  .o-userPopup__continuousCount--pattern_3 {
    background-color: #ffeb3b
  }

  .o-userPopup__continuousCount--pattern_4 {
    background-color: #26a69a
  }

  .o-userPopup__continuousCount--pattern_5 {
    background-color: #42a5f5
  }

  .o-userPopup__continuousCount--pattern_6 {
    background-color: #7e57c2
  }

  .o-userPopup__continuousNum {
    font-family: "Avenir Next", "Arial", sans-serif;
    font-size: 130px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    opacity: 0;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation: countModalAnimation-data-v-3d19a871 1s .4s;
    animation: countModalAnimation-data-v-3d19a871 1s .4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
  }

  @-webkit-keyframes countModalAnimation-data-v-3d19a871 {
    30% {
      text-shadow: 0 0 0 transparent;
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    to {
      text-shadow: 8px 8px rgba(0, 0, 0, .1);
      opacity: 1;
      -webkit-transform: translateY(-4px) translateX(-4px);
      transform: translateY(-4px) translateX(-4px)
    }
  }

  @keyframes countModalAnimation-data-v-3d19a871 {
    30% {
      text-shadow: 0 0 0 transparent;
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    to {
      text-shadow: 8px 8px rgba(0, 0, 0, .1);
      opacity: 1;
      -webkit-transform: translateY(-4px) translateX(-4px);
      transform: translateY(-4px) translateX(-4px)
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-aad78c2c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-aad78c2c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-violationModal__body {
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-violationModal__body {
      padding: 24px
    }
  }

  .o-violationModal__item {
    display: block;
    margin-bottom: 16px;
    cursor: pointer
  }

  .o-violationModal__radio {
    margin-right: 8px
  }

  .o-violationModal__textarea {
    min-height: 160px
  }

  .o-violationModal__error {
    color: #ed4956;
    font-size: 14px
  }

  .o-violationModal__thanks {
    font-size: 16px;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5b7f4094 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5b7f4094 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-receiptModal__body {
    font-size: 16px;
    padding: 40px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-receiptModal__body {
      padding: 24px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-05d9bef6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-05d9bef6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-refundModal__body {
    font-size: 16px;
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-refundModal__body {
      padding: 24px
    }
  }

  .o-refundModal__item {
    margin-bottom: 16px
  }

  .o-refundModal__text {
    font-size: 12px
  }

  .o-refundModal__link {
    color: #2cb696
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0643b921 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0643b921 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-requestEmailConfirmModal__body {
    padding: 24px 32px;
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .o-requestEmailConfirmModal__body {
      padding: 24px
    }
  }

  .o-requestEmailConfirmModal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
  }

  @media only screen and (max-width:479px) {
    .o-requestEmailConfirmModal__close {
      top: 8px;
      right: 8px
    }
  }

  @media only screen and (min-width:769px) {
    .o-requestEmailConfirmModal__close:hover {
      background-color: rgba(34, 34, 34, .5);
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-requestEmailConfirmModal__image {
    width: 100%;
    margin-bottom: 16px
  }

  .o-requestEmailConfirmModal__title {
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center;
    font-size: 18px
  }

  .o-requestEmailConfirmModal__description {
    margin-bottom: 16px;
    font-size: 14px
  }

  .o-requestEmailConfirmModal__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px
  }

  .o-requestEmailConfirmModal__error {
    margin-top: 16px;
    margin-bottom: 16px;
    color: #ed4956
  }

  .o-requestEmailConfirmModal__attention {
    color: #787c7b;
    font-size: 12px
  }

  .o-requestEmailConfirmModal__attentionLink {
    color: #787c7b;
    text-decoration: underline
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-681b09ac {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-681b09ac {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-thanksMessage {
    padding: 24px
  }

  .o-thanksMessage__payer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 152px;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/achievements_bg_author.469f18d.png);
    background-repeat: no-repeat;
    background-position: center 2px;
    background-size: 380px 152px
  }

  .o-thanksMessage__avatar {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%
  }

  .o-thanksMessage__balloon {
    position: relative;
    text-align: left;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  .o-thanksMessage__balloon:before {
    position: absolute;
    top: -12px;
    left: 50%;
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #f2f2f2;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
  }

  .o-thanksMessage__balloonBody {
    padding: 16px;
    font-size: 14px
  }

  .o-thanksMessage__message {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px
  }

  .o-thanksMessage__price {
    font-size: 14px;
    font-weight: 700;
    text-align: center
  }

  .o-thanksMessage__reply {
    margin-top: 24px
  }

  .o-thanksMessage__replyCaption {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 700
  }

  .o-thanksMessage__replyTextarea {
    width: 100%;
    min-height: 80px;
    font-size: 12px
  }

  .o-thanksMessage__confirmmessage {
    margin-top: 24px
  }

  .o-thanksMessage__confirmmessageCaption {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 700
  }

  .o-thanksMessage__confirmmessageBody {
    font-size: 14px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1fcb80ca {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1fcb80ca {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-thanksMessageComplete {
    padding: 24px
  }

  .o-thanksMessageComplete__responseImg {
    width: 100%;
    height: auto
  }

  .o-thanksMessageComplete__responseText {
    padding: 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-21701f72 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-21701f72 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-transferRequestModal__main {
    padding: 24px
  }

  .o-transferRequestModal__main--loading {
    padding: 48px 24px
  }

  .o-transferRequestModal__text {
    text-align: center
  }

  .o-transferRequestModal__text+.o-transferRequestModal__text {
    margin-top: 16px
  }

  .o-transferRequestModal__price {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7673920c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7673920c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-badgeDetail {
    padding: 24px
  }

  @media only screen and (max-width:479px) {
    .o-badgeDetail {
      padding: 16px
    }
  }

  .o-badgeDetail__status {
    position: relative;
    width: 260px;
    height: 260px;
    margin: auto
  }

  @media only screen and (max-width:479px) {
    .o-badgeDetail__status {
      width: 220px;
      height: 220px
    }
  }

  .o-badgeDetail__status.is-achieved {
    margin-bottom: 16px
  }

  .o-badgeDetail__status.is-gold .o-badgeDetail__icon,
  .o-badgeDetail__status.is-silver .o-badgeDetail__icon {
    opacity: .4
  }

  .o-badgeDetail__status.is-silver .o-badgeDetail__count {
    color: #a3aebb
  }

  .o-badgeDetail__status.is-bronze .o-badgeDetail__icon {
    opacity: .4
  }

  .o-badgeDetail__status.is-bronze .o-badgeDetail__count {
    color: #8b5528
  }

  .o-badgeDetail__status.is-contest:after {
    position: absolute;
    top: 28px;
    left: 50%;
    display: block;
    width: 208px;
    height: 262.08px;
    margin-left: -104px;
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyNiIgd2lkdGg9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIj48cGF0aCBkPSJNODMuNSA2NC4yVjEyNkw1MCAxMTAuNiAxNi41IDEyNlY2NC41eiIgZmlsbD0iI2ViYTcyNCIvPjxwYXRoIGQ9Ik0yNCA5OC43aC4xdjIzLjhsLTEuMi41LTEuOS45di0yN3ptNTItLjJjMS0uNiAyLjEtMS4yIDMtMS44djI3LjJsLTMtMS40eiIgZmlsbD0iI2ZiZThiMyIvPjxwYXRoIGQ9Ik0xNi41IDQyLjh2NTAuOGMxLjQgMS4yIDIuOSAyLjMgNC41IDMuM1Y4OWgzdjkuN2M3LjYgNC4zIDE2LjQgNi44IDI1LjggNi44IDkuNSAwIDE4LjUtMi42IDI2LjItN2wzLTEuOGMxLjYtMSAzLjEtMi4yIDQuNS0zLjNWNDIuOHoiIGZpbGw9IiNjYzg1MTYiLz48cGF0aCBkPSJNMjQgNDIuOHY1NS44Yy0xLS41LTItMS4yLTMtMS44di01NHptNTUgMHY1My45bC0zIDEuOFY0Mi44eiIgZmlsbD0iI2Y2ZDA2NyIvPjwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 208px 262.08px
  }

  @media only screen and (max-width:479px) {
    .o-badgeDetail__status.is-contest:after {
      top: 32px;
      width: 168px;
      height: 211.68px;
      margin-left: -84px;
      background-size: 168px 211.68px
    }
  }

  .o-badgeDetail__icon {
    position: absolute;
    top: 8%;
    right: 8%;
    bottom: 8%;
    left: 8%;
    z-index: 1;
    opacity: 1
  }

  .o-badgeDetail__iconImg {
    width: 100%;
    height: 100%;
    border-radius: 50%
  }

  .o-badgeDetail__count {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 50px;
    font-weight: 700;
    color: #eca726
  }

  @media only screen and (max-width:479px) {
    .o-badgeDetail__count {
      font-size: 40px
    }
  }

  .o-badgeDetail__progress {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%
  }

  @media only screen and (max-width:479px) {
    .o-badgeDetail__progress {
      width: 220px;
      height: 220px
    }
  }

  .o-badgeDetail__progress:before {
    position: absolute;
    width: 90%;
    height: 90%;
    margin: 5%;
    content: "";
    background-color: #fff;
    border-radius: 50%
  }

  .o-badgeDetail__description {
    padding: 24px;
    color: #787c7b;
    font-size: 14px;
    text-align: center
  }

  .o-badgeDetail__collection {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    padding: 16px
  }

  @media only screen and (max-width:479px) {
    .o-badgeDetail__collection {
      margin-right: 0;
      margin-left: 0
    }
  }

  .o-badgeDetail__collectionItem {
    width: 25%;
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .o-badgeDetail__collectionItem {
      width: 33%;
      padding: 8px
    }
  }

  .o-badgeDetail__collectionItem.is-achieved.is-gold .o-badgeDetail__collectionLabel {
    color: #eca726
  }

  .o-badgeDetail__collectionItem.is-achieved.is-silver .o-badgeDetail__collectionLabel {
    color: #a3aebb
  }

  .o-badgeDetail__collectionItem.is-achieved.is-bronze .o-badgeDetail__collectionLabel {
    color: #8b5528
  }

  .o-badgeDetail__collectionIcon {
    width: 48px;
    height: 48px;
    margin-right: auto;
    margin-bottom: 8px;
    margin-left: auto
  }

  .o-badgeDetail__collectionIconImg {
    width: 100%;
    height: 100%;
    border-radius: 50%
  }

  .o-badgeDetail__collectionLabel {
    font-size: 12px;
    font-weight: 700;
    color: #ccc;
    text-align: center
  }

  .o-badgeDetail__onboarding {
    display: -webkit-box;
    display: flex;
    padding: 16px;
    margin: 16px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .o-badgeDetail__onboardingIcon {
    margin-right: 16px;
    size: 80px
  }

  .o-badgeDetail__onboardingIconImage {
    width: 50px;
    height: 50px
  }

  .o-badgeDetail__onboardingTitle {
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: 700
  }

  .o-badgeDetail__onboardingText {
    padding-bottom: 8px;
    font-size: 14px;
    color: #787c7b
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6fb72d03 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6fb72d03 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicEditModal__body {
    padding: 32px
  }

  @media only screen and (max-width:479px) {
    .o-topicEditModal__body {
      padding: 24px
    }
  }

  .o-topicEditModal__form {
    margin-bottom: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-401ae7be {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-401ae7be {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorCustomLinks {
    padding: 0;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .o-creatorCustomLinks__body {
    border-bottom: 1px solid #e6e6e6
  }

  .o-creatorCustomLinks__body:empty {
    border-bottom: none
  }

  .o-creatorCustomLinks__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff
  }

  .o-creatorCustomLinks__item+.o-creatorCustomLinks__item {
    border-top: 1px solid #e6e6e6
  }

  .o-creatorCustomLinks__item:first-child {
    border-radius: 3px 3px 0 0
  }

  .o-creatorCustomLinks__item[draggable=true] {
    border-radius: 4px
  }

  .o-creatorCustomLinks__itemDrag {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 8px;
    color: #a8abb1;
    border-right: 1px solid #e6e6e6
  }

  @media only screen and (min-width:769px) {
    .o-creatorCustomLinks__itemDrag {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorCustomLinks__itemDrag:hover {
      color: #787c7b
    }
  }

  .o-creatorCustomLinks__itemTitle {
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 48px;
    padding-left: 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer
  }

  .o-creatorCustomLinks__itemDelete,
  .o-creatorCustomLinks__itemTitle {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
  }

  .o-creatorCustomLinks__itemDelete {
    -webkit-box-align: center;
    align-items: center;
    padding: 0 8px;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-creatorCustomLinks__itemDelete {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorCustomLinks__itemDelete:hover {
      color: #787c7b
    }
  }

  .o-creatorCustomLinks__delete {
    padding: 12px 16px 12px 0
  }

  .o-creatorCustomLinks__addItem,
  .o-creatorCustomLinks__delete {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer
  }

  .o-creatorCustomLinks__addItem {
    -webkit-box-pack: center;
    justify-content: center;
    height: 48px;
    font-weight: 700
  }

  .o-creatorCustomLinks__addItemIcon {
    margin-right: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-be0de17a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-be0de17a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicEditModal__body {
    padding: 32px
  }

  @media only screen and (max-width:479px) {
    .o-topicEditModal__body {
      padding: 24px
    }
  }

  .o-topicEditModal__form {
    margin-bottom: 16px
  }

  .o-topicEditModal__formItem {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .o-topicEditModal__formLabel {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
  }

  .o-topicEditModal__formField {
    -webkit-box-flex: 1;
    flex: 1
  }

  .o-topicEditModal__formButton {
    padding-left: 8px
  }

  .o-topicEditModal__formError {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    font-size: 14px;
    color: #ed4956
  }

  .o-topicEditModal__card {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-top: 16px;
    border-radius: 4px
  }

  .o-topicEditModal__card+.o-topicEditModal__card {
    margin-top: 16px;
    border-top: 1px solid #f2f2f2
  }

  .o-topicEditModal__cardTitle {
    font-size: 14px;
    padding-right: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .o-topicEditModal__cardThumb {
    height: 40px;
    margin-left: auto;
    border-radius: 4px
  }

  .o-topicEditModal__cardClose {
    padding-left: 16px;
    color: #a8abb1;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .o-topicEditModal__cardClose {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-topicEditModal__cardClose:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-01b465dc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-01b465dc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicSettings__body {
    padding: 32px
  }

  @media only screen and (max-width:479px) {
    .o-topicSettings__body {
      padding: 24px
    }
  }

  .o-topicSettings__form {
    margin-bottom: 16px
  }

  .o-topicSettings__txtLink {
    font-size: 14px;
    color: #787c7b;
    text-decoration: underline
  }

  .o-topicSettings__layout {
    margin-bottom: 32px
  }

  .o-topicSettings__layoutTitle {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
  }

  .o-topicSettings__layoutList {
    display: -webkit-box;
    display: flex
  }

  .o-topicSettings__layoutItem {
    margin-right: 8px
  }

  .o-topicSettings__layoutImage {
    width: 56px;
    height: 56px;
    padding: 4px;
    cursor: pointer;
    border: 4px solid transparent;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-topicSettings__layoutImage:hover {
      border-color: #e6e6e6
    }
  }

  .o-topicSettings__layoutImage[data-active=true] {
    border-color: #2cb696
  }

  .o-topicSettings__delete {
    margin-top: 24px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-997a25f8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-997a25f8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicSettings__body {
    padding: 32px
  }

  @media only screen and (max-width:479px) {
    .o-topicSettings__body {
      padding: 24px
    }
  }

  .o-topicSettings__form {
    margin-bottom: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5674f548 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5674f548 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicSettings__body {
    padding: 32px
  }

  @media only screen and (max-width:479px) {
    .o-topicSettings__body {
      padding: 24px
    }
  }

  .o-topicSettings__form+.o-topicSettings__form {
    margin-top: 24px
  }

  .o-topicSettings__formItem {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .o-topicSettings__formLabel {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 8px
  }

  .o-topicSettings__formField {
    -webkit-box-flex: 1;
    flex: 1
  }

  .o-topicSettings__formButton {
    padding-left: 8px
  }

  .o-topicSettings__formDescription {
    font-size: 14px;
    margin-bottom: 16px;
    color: #787c7b
  }

  .o-topicSettings__formError {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    font-size: 14px;
    color: #ed4956
  }

  .o-topicSettings__card {
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid #f2f2f2
  }

  .o-topicSettings__card,
  .o-topicSettings__cardContent {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-topicSettings__cardNickname {
    padding-right: 8px;
    margin-left: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 14px
  }

  .o-topicSettings__cardThumb {
    height: 40px;
    margin-left: auto;
    border-radius: 4px
  }

  .o-topicSettings__close {
    color: #a8abb1;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .o-topicSettings__close {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-topicSettings__close:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-b13fd0c6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-b13fd0c6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-subscribeCirclePlanModal__title {
    font-weight: 700
  }

  .o-subscribeCirclePlanModal__detail {
    padding: 24px;
    background-color: #f7f9f9
  }

  .o-subscribeCirclePlanModal__card {
    position: relative;
    width: 300px;
    margin: 0 auto 24px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
  }

  .o-subscribeCirclePlanModal__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .o-subscribeCirclePlanModal__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-subscribeCirclePlanModal__section {
    margin-bottom: 24px
  }

  .o-subscribeCirclePlanModal__section:last-child {
    margin-bottom: 0
  }

  .o-subscribeCirclePlanModal__agreement {
    padding: 16px 24px
  }

  .o-subscribeCirclePlanModal__heading {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
  }

  .o-subscribeCirclePlanModal__description {
    font-size: 14px
  }

  .o-subscribeCirclePlanModal__benefitItem {
    font-size: 12px
  }

  .o-subscribeCirclePlanModal__benefitItem:before {
    margin-right: 4px;
    content: "-"
  }

  .o-subscribeCirclePlanModal__unsubscribeButton {
    margin-right: auto
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3243632c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3243632c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-subscribeCirclePlanCompleteModal__item {
    position: relative
  }

  .o-subscribeCirclePlanCompleteModal__bg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
  }

  .o-subscribeCirclePlanCompleteModal__bgImage {
    width: auto;
    max-width: 100%
  }

  .o-subscribeCirclePlanCompleteModal__default {
    width: 104px;
    border-radius: 50%
  }

  .o-subscribeCirclePlanCompleteModal__avatar {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 48px 0
  }

  @media only screen and (max-width:479px) {
    .o-subscribeCirclePlanCompleteModal__avatar {
      padding: 32px 0
    }
  }

  .o-subscribeCirclePlanCompleteModal__message {
    position: relative;
    z-index: 2;
    padding: 24px;
    margin: 0 40px 40px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 16px
  }

  .o-subscribeCirclePlanCompleteModal__message:before {
    position: absolute;
    top: -12px;
    left: 50%;
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #e6e6e6;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-ffb73886 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-ffb73886 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-unsubscribeCirclePlanModal__title {
    font-weight: 700
  }

  .o-unsubscribeCirclePlanModal__body {
    font-size: 16px;
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-unsubscribeCirclePlanModal__body {
      padding: 24px
    }
  }

  .o-unsubscribeCirclePlanModal__card {
    position: relative;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
  }

  .o-unsubscribeCirclePlanModal__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .o-unsubscribeCirclePlanModal__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-unsubscribeCirclePlanModal__section {
    margin-bottom: 24px
  }

  .o-unsubscribeCirclePlanModal__section:last-child {
    margin-bottom: 0
  }

  .o-unsubscribeCirclePlanModal__heading {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700
  }

  .o-unsubscribeCirclePlanModal__description {
    font-size: 14px
  }

  .o-unsubscribeCirclePlanModal__message {
    font-size: 14px;
    text-align: center;
    white-space: pre-line
  }

  .o-unsubscribeCirclePlanModal__benefitItem {
    font-size: 12px
  }

  .o-unsubscribeCirclePlanModal__benefitItem:before {
    margin-right: 4px;
    content: "-"
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-07a28450 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-07a28450 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleMemberDetailModal__title {
    font-weight: 700
  }

  .o-circleMemberDetailModal__body {
    font-size: 16px;
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-circleMemberDetailModal__body {
      padding: 24px
    }
  }

  .o-circleMemberDetailModal__avatar {
    height: 144px;
    margin-bottom: 32px
  }

  .o-circleMemberDetailModal__avatarImage,
  .o-circleMemberDetailModal__avatarLink {
    display: block;
    width: 144px;
    height: 144px;
    margin: 0 auto;
    border-radius: 50%
  }

  .o-circleMemberDetailModal__section {
    margin-bottom: 32px
  }

  .o-circleMemberDetailModal__heading {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700
  }

  .o-circleMemberDetailModal__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2
  }

  .o-circleMemberDetailModal__item:last-child {
    border-bottom: 1px solid #f2f2f2
  }

  .o-circleMemberDetailModal__itemDetail {
    -webkit-box-flex: 1;
    flex: 1
  }

  .o-circleMemberDetailModal__itemTitle {
    font-size: 14px
  }

  .o-circleMemberDetailModal__itemInfo {
    margin-top: 4px;
    line-height: 1;
    color: #787c7b;
    font-size: 12px
  }

  .o-circleMemberDetailModal__itemInfo:not(:last-child) {
    margin-bottom: 4px
  }

  .o-circleMemberDetailModal__itemAside {
    margin-left: 16px;
    font-size: 12px;
    color: #787c7b
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-2ab5b70a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2ab5b70a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleMemberKickModal__body {
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-circleMemberKickModal__body {
      padding: 24px
    }
  }

  .o-circleMemberKickModal__profile {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start
  }

  .o-circleMemberKickModal__avatar {
    margin-right: 12px
  }

  .o-circleMemberKickModal__avatar,
  .o-circleMemberKickModal__avatarIcon {
    width: 36px;
    height: 36px;
    border-radius: 50%
  }

  .o-circleMemberKickModal__name {
    -webkit-box-flex: 1;
    flex: 1;
    font-weight: 700
  }

  .o-circleMemberKickModal__small {
    font-size: 10px;
    color: #787c7b
  }

  .o-circleMemberKickModal__item {
    margin-bottom: 24px
  }

  .o-circleMemberKickModal__item:last-child {
    margin-bottom: 0
  }

  .o-circleMemberKickModal__radio {
    margin-right: 8px
  }

  .o-circleMemberKickModal__textarea {
    min-height: 160px
  }

  .o-circleMemberKickModal__error {
    color: #ed4956;
    font-size: 14px
  }

  .o-circleMemberKickModal__thanks {
    font-size: 16px;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-21df6f24 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-21df6f24 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleCommentDeleteModal__title {
    font-weight: 700
  }

  .o-circleCommentDeleteModal__body {
    padding: 40px;
    text-align: center;
    font-size: 16px
  }

  @media only screen and (max-width:479px) {
    .o-circleCommentDeleteModal__body {
      padding: 24px
    }
  }

  .o-circleCommentDeleteModal__profileIcon {
    position: relative;
    height: 120px;
    margin-bottom: 24px
  }

  .o-circleCommentDeleteModal__profileIconImage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: #787c7b;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2);
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-circleCommentDeleteModal__section {
    margin-bottom: 32px
  }

  .o-circleCommentDeleteModal__heading {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700
  }

  .o-circleCommentDeleteModal__description {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid #f2f2f2
  }

  .o-circleCommentDeleteModal__description:last-child {
    border-bottom: 1px solid #f2f2f2
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-d907700e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-d907700e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-suspendCirclePlanModal__title {
    font-weight: 700
  }

  .o-suspendCirclePlanModal__body {
    padding: 24px
  }

  .o-suspendCirclePlanModal__notice {
    display: block;
    margin-bottom: 16px;
    font-size: 10px;
    color: #a8abb1
  }

  .o-suspendCirclePlanModal__item {
    margin-bottom: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-72b3f608 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-72b3f608 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleMembersModal__userList {
    max-height: 440px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }

  @media only screen and (max-width:479px) {
    .o-circleMembersModal__userList {
      max-height: 360px
    }
  }

  .o-circleMembersModal__invisibleMember {
    padding: 8px 16px;
    font-size: 14px;
    color: #787c7b
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7ff05c12 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7ff05c12 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleInvitation__body {
    padding: 24px
  }

  @media only screen and (max-width:479px) {
    .o-circleInvitation__body {
      padding: 16px
    }
  }

  .o-circleInvitation__description {
    margin-bottom: 8px;
    font-size: 14px;
    color: #787c7b
  }

  .o-circleInvitation__plan {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 4px;
    background-color: #f7f9f9;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-circleInvitation__plan {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column
    }
  }

  .o-circleInvitation__card {
    position: relative;
    width: 160px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
  }

  @media only screen and (max-width:479px) {
    .o-circleInvitation__card {
      width: 200px;
      margin-bottom: 8px
    }
  }

  .o-circleInvitation__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .o-circleInvitation__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-circleInvitation__detail {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 16px
  }

  @media only screen and (max-width:479px) {
    .o-circleInvitation__detail {
      width: 100%;
      margin-left: 0
    }
  }

  .o-circleInvitation__title {
    font-size: 14px;
    font-weight: 700
  }

  .o-circleInvitation__price {
    margin-bottom: 8px;
    font-size: 14px;
    color: #2cb696
  }

  .o-circleInvitation__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-f0f68d48 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-f0f68d48 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circlePlanSelect__body {
    padding: 24px
  }

  @media only screen and (max-width:479px) {
    .o-circlePlanSelect__body {
      padding: 16px
    }
  }

  .o-circlePlanSelect__description {
    margin-bottom: 8px;
    font-size: 14px;
    color: #787c7b
  }

  .o-circlePlanSelect__plan {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 4px;
    background-color: #f7f9f9;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-circlePlanSelect__plan {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column
    }
  }

  .o-circlePlanSelect__card {
    position: relative;
    width: 160px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
  }

  @media only screen and (max-width:479px) {
    .o-circlePlanSelect__card {
      width: 200px;
      margin-bottom: 8px
    }
  }

  .o-circlePlanSelect__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .o-circlePlanSelect__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-circlePlanSelect__detail {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 16px
  }

  @media only screen and (max-width:479px) {
    .o-circlePlanSelect__detail {
      width: 100%;
      margin-left: 0
    }
  }

  .o-circlePlanSelect__title {
    font-size: 14px;
    font-weight: 700
  }

  .o-circlePlanSelect__price {
    margin-bottom: 8px;
    font-size: 14px;
    color: #2cb696
  }

  .o-circlePlanSelect__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7cdf3e6c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7cdf3e6c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contentsUpdates__body {
    max-height: 400px;
    overflow: auto
  }

  .o-contentsUpdates__item {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px
  }

  @media only screen and (min-width:769px) {
    .o-contentsUpdates__item:hover {
      background-color: #f7f9f9
    }
  }

  .o-contentsUpdates__item+.o-contentsUpdates__item {
    border-top: 1px solid #f2f2f2
  }

  .o-contentsUpdates__itemLink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
  }

  .o-contentsUpdates__itemEyecatch {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 80px;
    margin-right: 16px
  }

  .o-contentsUpdates__itemTitle {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 700;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px
  }

  .o-contentsUpdates__itemImage {
    width: 80px;
    height: 45px;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: top;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-444e13b5 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-444e13b5 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-finishBoardPostModal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
  }

  @media only screen and (max-width:479px) {
    .o-finishBoardPostModal__close {
      top: 8px;
      right: 8px
    }
  }

  @media only screen and (min-width:769px) {
    .o-finishBoardPostModal__close:hover {
      background-color: rgba(34, 34, 34, .5);
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-finishBoardPostModal__hero {
    overflow: hidden;
    border-radius: 4px 4px 0 0
  }

  .o-finishBoardPostModal__heroCount {
    padding-top: 48px;
    padding-bottom: 48px;
    cursor: default;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/achievements_bgCount.ef5c16a.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 360px 180px
  }

  .o-finishBoardPostModal__heroCount--pattern_1 {
    background-color: #ec407a
  }

  .o-finishBoardPostModal__heroCount--pattern_2 {
    background-color: #ffa726
  }

  .o-finishBoardPostModal__heroCount--pattern_3 {
    background-color: #ffeb3b
  }

  .o-finishBoardPostModal__heroCount--pattern_4 {
    background-color: #26a69a
  }

  .o-finishBoardPostModal__heroCount--pattern_5 {
    background-color: #42a5f5
  }

  .o-finishBoardPostModal__heroCount--pattern_6 {
    background-color: #7e57c2
  }

  .o-finishBoardPostModal__heroNum {
    font-family: "Avenir Next", "Arial", sans-serif;
    font-size: 130px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    opacity: 0;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation: countModalAnimation-data-v-444e13b5 1s .4s;
    animation: countModalAnimation-data-v-444e13b5 1s .4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
  }

  @-webkit-keyframes countModalAnimation-data-v-444e13b5 {
    30% {
      text-shadow: 0 0 0 rgba(34, 34, 34, 0);
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    to {
      text-shadow: 8px 8px rgba(34, 34, 34, .1);
      opacity: 1;
      -webkit-transform: translateY(-4px) translateX(-4px);
      transform: translateY(-4px) translateX(-4px)
    }
  }

  @keyframes countModalAnimation-data-v-444e13b5 {
    30% {
      text-shadow: 0 0 0 rgba(34, 34, 34, 0);
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    to {
      text-shadow: 8px 8px rgba(34, 34, 34, .1);
      opacity: 1;
      -webkit-transform: translateY(-4px) translateX(-4px);
      transform: translateY(-4px) translateX(-4px)
    }
  }

  .o-finishBoardPostModal__heroImage {
    width: 100%;
    height: auto
  }

  .o-finishBoardPostModal__body {
    padding: 24px
  }

  .o-finishBoardPostModal__title {
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: 700;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-finishBoardPostModal__title {
      font-size: 16px
    }
  }

  .o-finishBoardPostModal__description {
    font-size: 14px;
    text-align: center
  }

  .o-finishBoardPostModal__description a {
    margin: 0 4px;
    color: #787c7b;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .o-finishBoardPostModal__description a:hover {
      color: #222;
      text-decoration: none
    }
  }

  .o-finishBoardPostModal__share {
    padding-top: 16px;
    margin-top: 24px;
    border-top: 1px solid #f2f2f2
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-31e17014 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-31e17014 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-confirmModal__title {
    font-weight: 700
  }

  .o-confirmModal__body {
    font-size: 16px;
    padding: 40px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-confirmModal__body {
      padding: 24px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-45161c1a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-45161c1a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-commentAcknowledgement__body {
    font-size: 16px;
    padding: 0;
    text-align: center
  }

  .o-commentAcknowledgement__image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 24px
  }

  @media only screen and (max-width:479px) {
    .o-commentAcknowledgement__image {
      margin-bottom: 16px
    }
  }

  .o-commentAcknowledgement__main {
    padding: 0 40px 16px
  }

  @media only screen and (max-width:479px) {
    .o-commentAcknowledgement__main {
      padding: 0 16px 16px
    }
  }

  .o-commentAcknowledgement__title {
    font-size: 16px;
    font-weight: 700
  }

  .o-commentAcknowledgement__text {
    font-size: 14px;
    margin: 16px 0
  }

  .o-commentAcknowledgement__textInner {
    display: inline-block
  }

  .o-commentAcknowledgement__check {
    text-align: left
  }

  @media only screen and (max-width:479px) {
    .o-commentAcknowledgement__check {
      font-size: 12px
    }
  }

  .o-commentAcknowledgement__link {
    color: #2cb696
  }

  @media only screen and (min-width:769px) {
    .o-commentAcknowledgement__link {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-commentAcknowledgement__link:hover {
      color: #228d74
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-92aecf58 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-92aecf58 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-urlnameConfirmModal__header {
    position: relative
  }

  .o-urlnameConfirmModal__closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto
  }

  .o-urlnameConfirmModal__body {
    padding: 24px;
    font-size: 14px
  }

  .o-urlnameConfirmModal__preview {
    margin-bottom: 16px
  }

  .o-urlnameConfirmModal__previewItem {
    display: -webkit-box;
    display: flex;
    margin-bottom: 4px
  }

  .o-urlnameConfirmModal__caption {
    margin-right: 4px;
    font-weight: 700;
    white-space: nowrap
  }

  .o-urlnameConfirmModal__urlname {
    font-weight: 700;
    word-break: break-all
  }

  .o-urlnameConfirmModal__confirm {
    padding-bottom: 24px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f2f2
  }

  .o-urlnameConfirmModal__attentionTitle {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700
  }

  .o-urlnameConfirmModal__attentionIcon {
    margin-right: 4px;
    color: #f95
  }

  .o-urlnameConfirmModal__attentionListItem {
    margin: 4px 0 0 20px;
    font-size: 12px;
    list-style-type: disc
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-e09c7bf6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e09c7bf6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-userInfo {
    text-align: center
  }

  .m-userInfo__image {
    width: 110px;
    height: 110px;
    margin: auto;
    background-color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3)
  }

  .m-userInfo__name {
    font-size: 18px;
    font-weight: 700
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-229b9832 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-229b9832 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-withdrawalModal__header {
    position: relative
  }

  .o-withdrawalModal__closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto
  }

  .o-withdrawalModal__body {
    padding: 24px;
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .o-withdrawalModal__body {
      padding: 16px
    }
  }

  .o-withdrawalModal__userInfo {
    margin-bottom: 16px
  }

  .o-withdrawalModal__title {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    font-weight: 700
  }

  .o-withdrawalModal__reason {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    white-space: pre-wrap
  }

  .o-withdrawalModal__message {
    padding: 24px 0 0;
    font-weight: 700;
    text-align: center;
    border-top: 1px solid #ccc
  }

  @media only screen and (max-width:479px) {
    .o-withdrawalModal__message {
      padding-bottom: 8px
    }
  }

  .o-withdrawalModal__error {
    margin-top: 16px;
    color: #ed4956
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4cb0915a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4cb0915a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-stockPhotoBlockConfirmModal__header {
    position: relative
  }

  .o-stockPhotoBlockConfirmModal__body {
    padding: 24px 32px;
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .o-stockPhotoBlockConfirmModal__body {
      padding: 24px
    }
  }

  .o-stockPhotoBlockConfirmModal__message {
    padding-bottom: 4px;
    font-size: 16px;
    font-weight: 700
  }

  @media only screen and (max-width:479px) {
    .o-stockPhotoBlockConfirmModal__message {
      padding-bottom: 8px
    }
  }

  .o-stockPhotoBlockConfirmModal__appendix {
    padding-bottom: 24px;
    color: #787c7b
  }

  .o-stockPhotoBlockConfirmModal__error {
    margin-top: 16px;
    color: #ed4956
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5bf2d800 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5bf2d800 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-pagingModalContainer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }

  .m-pagingModalContainer__page {
    position: absolute;
    left: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow-y: auto;
    opacity: 1;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-property: left, opacity;
    transition-property: left, opacity
  }

  .m-pagingModalContainer__page.out-left {
    left: -50%;
    z-index: -1;
    opacity: 0
  }

  .m-pagingModalContainer__page.out-right {
    left: 50%;
    z-index: -1;
    opacity: 0
  }

  .m-pagingModalContainer__bullets {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 16px 0
  }

  .m-pagingModalContainer__bullet {
    width: 8px;
    height: 8px;
    margin-right: 12px;
    background-color: #fff;
    border-radius: 4px
  }

  .m-pagingModalContainer__bullet:last-child {
    margin-right: 0
  }

  .m-pagingModalContainer__bullet.current {
    background-color: #2cb696
  }

  .m-pagingModalContainer__pageButton {
    position: absolute;
    top: 50%;
    left: 50%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%
  }

  @media only screen and (max-width:479px) {
    .m-pagingModalContainer__pageButton {
      width: 24px;
      height: 100px;
      box-shadow: 0 2px 4px rgba(34, 34, 34, .2)
    }
  }

  .m-pagingModalContainer__pageButton--left {
    -webkit-transform: translate(-314px, -50%);
    transform: translate(-314px, -50%)
  }

  @media only screen and (max-width:479px) {
    .m-pagingModalContainer__pageButton--left {
      left: 0;
      border-radius: 0 4px 4px 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%)
    }
  }

  .m-pagingModalContainer__pageButton--right {
    -webkit-transform: translate(266px, -50%);
    transform: translate(266px, -50%)
  }

  @media only screen and (max-width:479px) {
    .m-pagingModalContainer__pageButton--right {
      right: 0;
      left: auto;
      border-radius: 4px 0 0 4px;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%)
    }
  }

  .m-pagingModalContainer__pageButton.disabled {
    pointer-events: none;
    cursor: default;
    opacity: .3
  }

  @media only screen and (max-width:479px) {
    .m-pagingModalContainer__pageButton.disabled {
      display: none
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3adf929a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3adf929a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-richModalContentPresetLayout__image {
    overflow: hidden;
    border-radius: 4px 4px 0 0
  }

  .m-richModalContentPresetLayout__image img {
    display: block;
    width: 100%;
    height: auto
  }

  .m-richModalContentPresetLayout__main {
    padding: 24px
  }

  .m-richModalContentPresetLayout__title {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 18px
  }

  @media only screen and (max-width:479px) {
    .m-richModalContentPresetLayout__title {
      font-size: 16px
    }
  }

  .m-richModalContentPresetLayout__description {
    margin: 16px 0;
    font-size: 14px
  }

  .m-richModalContentPresetLayout__description:last-child {
    margin-bottom: 0
  }

  @media only screen and (max-width:479px) {
    .m-richModalContentPresetLayout__description {
      font-size: 12px
    }
  }

  .m-richModalContentPresetLayout__action {
    margin: 16px 0
  }

  .m-richModalContentPresetLayout__action:last-child {
    margin-bottom: 0
  }

  .m-richModalContentPresetLayout__subAction {
    margin: 16px 0
  }

  .m-richModalContentPresetLayout__subAction:last-child {
    margin-bottom: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-28ec5f88 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-28ec5f88 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-r18ObjectionClaimModal__container {
    padding: 40px
  }

  @media only screen and (max-width:479px) {
    .o-r18ObjectionClaimModal__container {
      padding: 24px
    }
  }

  .o-r18ObjectionClaimModal__textarea {
    margin-bottom: 16px
  }

  .o-r18ObjectionClaimModal__notes {
    color: #787c7b;
    font-size: 12px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6fd89838 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6fd89838 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }
  
 .o-snsIntegrationConfirmationModal {
    overflow: hidden
  }

  .o-snsIntegrationConfirmationModal__body {
    padding: 24px
  }

  .o-snsIntegrationConfirmationModal__image {
    width: 100%
  }

  .o-snsIntegrationConfirmationModal__imageBody {
    width: 100%;
    height: auto
  }

  .o-snsIntegrationConfirmationModal__title {
    font-size: 20px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-snsIntegrationConfirmationModal__title {
      font-size: 18px
    }
  }

  .o-snsIntegrationConfirmationModal__description {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
  }

  .o-snsIntegrationConfirmationModal__attention {
    padding-left: 24px;
    list-style-type: disc;
    font-size: 14px
  }

  .o-snsIntegrationConfirmationModal__attentionItem {
    margin-bottom: 4px;
    list-style-type: disc
  }

  .o-snsIntegrationConfirmationModal__attentionItem:last-child {
    margin-bottom: 0
  }

  .o-snsIntegrationConfirmationModal__attentionItemAside {
    display: block;
    color: #787c7b;
    font-size: 12px
  }

  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5ca26276 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5ca26276 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-shareBooster {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    background-color: #f7f9f9;
    border-radius: 8px 8px 0 0;
    overflow: hidden
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-shareBooster {
      padding-bottom: env(safe-area-inset-bottom)
    }
  }

  @media only screen and (max-width:768px) {
    .o-shareBooster {
      padding-bottom: env(safe-area-inset-bottom)
    }
  }

  .o-shareBooster__body {
    border-bottom: 1px solid #f2f2f2;
    background-color: #fff
  }

  .o-shareBooster__title {
    padding: 16px;
    font-size: 14px
  }

  .o-shareBooster__share {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-right: 8px;
    padding-bottom: 16px;
    padding-left: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch
  }

  .o-shareBooster__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-width: 56px;
    margin-right: 4px;
    margin-left: 4px
  }

  .o-shareBooster__icon,
  .o-shareBooster__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-shareBooster__icon {
    -webkit-box-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    color: #fff;
    border-radius: 50%
  }

  .o-shareBooster__icon--copy {
    background: #a8abb1
  }

  .o-shareBooster__icon--twitter {
    background: #55acee
  }

  .o-shareBooster__icon--line {
    background: #06c755
  }

  .o-shareBooster__icon--facebook {
    background: #1877f2
  }

  .o-shareBooster__icon--note {
    background: #2cb696
  }

  .o-shareBooster__name {
    font-size: 10px;
    color: #787c7b;
    white-space: nowrap
  }

  .o-shareBooster__close {
    -webkit-transition: margin-bottom .2s ease-out;
    transition: margin-bottom .2s ease-out;
    margin-bottom: env(safe-area-inset-bottom);
    border-bottom: 1px solid #f2f2f2
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5f53ce47 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5f53ce47 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-notFoundMuseum__body {
    padding: 80px 24px;
    background-color: #f7f9f9
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__body {
      padding-top: 40px;
      padding-bottom: 40px
    }
  }

  .o-notFoundMuseum__body--white {
    padding-top: 120px;
    background-color: #fff
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__body--white {
      padding-top: 80px
    }
  }

  .o-notFoundMuseum__siteLogo {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 100px;
    height: auto
  }

  .o-notFoundMuseum__siteLogoImg {
    width: 100%;
    height: auto
  }

  .o-notFoundMuseum__image {
    display: block;
    width: 100%;
    max-width: 350px;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto
  }

  .o-notFoundMuseum__title {
    font-size: 28px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__title {
      margin-bottom: 16px;
      text-align: left;
      font-size: 20px
    }
  }

  .o-notFoundMuseum__search {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin-top: 16px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__search {
      max-width: 100%
    }
  }

  .o-notFoundMuseum__searchField {
    width: 100%
  }

  .o-notFoundMuseum__searchIcon {
    position: absolute;
    top: 50%;
    right: 8px;
    color: #a8abb1;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  @media only screen and (min-width:769px) {
    .o-notFoundMuseum__searchIcon {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-notFoundMuseum__searchIcon:hover {
      color: #787c7b
    }
  }

  .o-notFoundMuseum__description {
    font-size: 16px;
    color: #787c7b;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__description {
      text-align: left;
      font-size: 14px
    }

    .o-notFoundMuseum__description br {
      display: none
    }
  }

  .o-notFoundMuseum__button {
    margin-top: 40px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__button {
      margin-top: 16px;
      text-align: left
    }
  }

  .o-notFoundMuseum__slide {
    position: relative;
    max-width: 500px;
    padding-bottom: 80px;
    margin: 80px auto;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__slide {
      max-width: 100%;
      padding-right: 40px;
      padding-bottom: 60px;
      padding-left: 40px;
      margin-top: 40px;
      margin-bottom: 40px;
      overflow: hidden
    }
  }

  .o-notFoundMuseum__slideItem {
    text-align: left
  }

  .o-notFoundMuseum__slideName {
    font-size: 20px;
    font-weight: 700
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__slideName {
      font-size: 16px
    }
  }

  .o-notFoundMuseum__slideHelp {
    font-size: 12px;
    color: #787c7b;
    text-decoration: underline
  }

  .o-notFoundMuseum__slideLink {
    display: block
  }

  .o-notFoundMuseum__slideImage {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 16px;
    margin-bottom: 16px;
    border: 1px solid #f2f2f2;
    box-shadow: 4px 4px 16px rgba(34, 34, 34, .3)
  }

  .o-notFoundMuseum__slideTitle {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__slideTitle {
      font-size: 14px
    }
  }

  .o-notFoundMuseum__slideCreator {
    font-size: 12px;
    color: #787c7b
  }

  .o-notFoundMuseum__slideChara01 {
    position: absolute;
    bottom: 10px;
    left: -80px;
    z-index: -1;
    width: auto;
    height: 140px;
    pointer-events: none
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__slideChara01 {
      left: -8px;
      height: 100px
    }
  }

  .o-notFoundMuseum__slideChara02 {
    position: absolute;
    right: -80px;
    bottom: 10px;
    z-index: -1;
    width: auto;
    height: 140px;
    pointer-events: none
  }

  @media only screen and (max-width:479px) {
    .o-notFoundMuseum__slideChara02 {
      right: -3px;
      height: 100px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7ec9e420 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7ec9e420 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-error {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100vh
  }

  .o-error__body {
    padding: 16px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-error__body {
      padding: 32px
    }
  }

  .o-error__siteLogo {
    width: 216px;
    height: auto;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto
  }

  .o-error__siteLogoImg {
    width: 100%;
    height: auto;
    vertical-align: top
  }

  .o-error__text {
    font-size: 20px;
    margin-bottom: 32px;
    font-weight: 700;
    color: #787c7b
  }

  @media only screen and (max-width:479px) {
    .o-error__text {
      font-size: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-20133550 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-20133550 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .l-error__body {
    padding: 80px 24px;
    background-color: #f7f9f9
  }

  @media only screen and (max-width:479px) {
    .l-error__body {
      padding-top: 40px;
      padding-bottom: 40px
    }
  }

  .l-error__body--white {
    padding-top: 120px;
    background-color: #fff
  }

  @media only screen and (max-width:479px) {
    .l-error__body--white {
      padding-top: 80px
    }
  }

  .l-error__siteLogo {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 100px;
    height: auto
  }

  .l-error__siteLogoImg {
    width: 100%;
    height: auto
  }

  .l-error__image {
    display: block;
    width: 100%;
    max-width: 350px;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto
  }

  .l-error__title {
    font-size: 28px;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .l-error__title {
      margin-bottom: 16px;
      text-align: left;
      font-size: 20px
    }
  }

  .l-error__search {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin-top: 16px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .l-error__search {
      max-width: 100%
    }
  }

  .l-error__searchField {
    width: 100%
  }

  .l-error__searchIcon {
    position: absolute;
    top: 50%;
    right: 8px;
    color: #a8abb1;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  @media only screen and (min-width:769px) {
    .l-error__searchIcon {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .l-error__searchIcon:hover {
      color: #787c7b
    }
  }

  .l-error__description {
    font-size: 16px;
    color: #787c7b;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .l-error__description {
      text-align: left;
      font-size: 14px
    }

    .l-error__description br {
      display: none
    }
  }

  .l-error__button {
    margin-top: 40px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .l-error__button {
      margin-top: 16px;
      text-align: left
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-364f4956 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-364f4956 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-messageAlert {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 8px;
    color: #fff;
    border-bottom: 1px solid #fff;
    font-size: 12px
  }

  .m-messageAlert:last-child {
    border-bottom: none
  }

  .m-messageAlert--type_alert {
    background-color: #ed4956
  }

  .m-messageAlert--type_warn {
    background-color: #f95
  }

  .m-messageAlert--type_message {
    color: #222;
    background-color: #cdeeea
  }

  .m-messageAlert__message {
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 16px;
    text-align: center;
    word-break: break-all
  }

  @media only screen and (max-width:479px) {
    .m-messageAlert__message {
      margin-right: 8px;
      text-align: left
    }
  }

  .m-messageAlert__message a {
    font-weight: 700;
    text-decoration: underline
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-03da03c8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-03da03c8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-flashMessage {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    z-index: var(--z-index-coast);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    padding: 16px
  }

  .m-flashMessage__body {
    position: relative;
    border-radius: 4px;
    overflow: hidden
  }

  .m-flashMessage__body:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    content: "";
    background-color: #fff
  }

  .m-flashMessage__label {
    position: relative;
    z-index: 2;
    padding: 8px 16px;
    font-weight: 700
  }

  .m-flashMessage__label--success {
    color: #2cb696;
    background-color: rgba(44, 182, 150, .2)
  }

  .m-flashMessage__label--warning {
    color: #f95;
    background-color: rgba(255, 153, 85, .2)
  }

  .m-flashMessage__label--error {
    color: #ed4956;
    background-color: rgba(237, 73, 86, .2)
  }

  .m-flashMessage__label--info {
    color: #222;
    background-color: #f7f9f9
  }

  .m-flashMessage-enter,
  .m-flashMessage-leave-to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }

  .m-flashMessage-enter-active,
  .m-flashMessage-leave-active {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-9c1b6f78 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-9c1b6f78 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .p-replyToFollow {
    position: absolute;
    z-index: 100;
    display: -webkit-box;
    display: flex;
    min-width: 300px;
    visibility: hidden;
    opacity: 0
  }

  @media only screen and (max-width:479px) {
    .p-replyToFollow {
      min-width: 220px
    }

    .p-replyToFollow .p-replyToFollow__message {
      max-width: 150px
    }
  }

  .p-replyToFollow__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px
  }

  .p-replyToFollow__avatar {
    width: 32px;
    margin-right: 16px;
    line-height: 1
  }

  @media only screen and (max-width:479px) {
    .p-replyToFollow__avatar {
      margin-right: 8px
    }
  }

  .p-replyToFollow__message {
    max-width: 220px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    white-space: normal
  }

  @media only screen and (max-width:479px) {
    .p-replyToFollow__message {
      font-size: 12px
    }
  }

  .p-replyToFollow__status {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 12px
  }

  .p-replyToFollow__status:last-child {
    margin-bottom: 0
  }

  .p-replyToFollow__status--type_firstLike {
    color: #ea3f60
  }

  .p-replyToFollow.is-shown {
    -webkit-animation: replyToFollow-data-v-9c1b6f78 4s .16s;
    animation: replyToFollow-data-v-9c1b6f78 4s .16s
  }

  @-webkit-keyframes replyToFollow-data-v-9c1b6f78 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    4.5% {
      opacity: 0;
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    6.75% {
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px)
    }

    6.75% {
      -webkit-transform: translateY(-48px);
      transform: translateY(-48px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    11.25% {
      -webkit-transform: translateY(-34px);
      transform: translateY(-34px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    13.5% {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    81.25% {
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px)
    }

    87.5% {
      -webkit-transform: translateY(-42px);
      transform: translateY(-42px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    93.75% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(-20px) scale(.95);
      transform: translateY(-20px) scale(.95);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }

  @keyframes replyToFollow-data-v-9c1b6f78 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    4.5% {
      opacity: 0;
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    6.75% {
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px)
    }

    6.75% {
      -webkit-transform: translateY(-48px);
      transform: translateY(-48px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    11.25% {
      -webkit-transform: translateY(-34px);
      transform: translateY(-34px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    13.5% {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    81.25% {
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px)
    }

    87.5% {
      -webkit-transform: translateY(-42px);
      transform: translateY(-42px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    93.75% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(-20px) scale(.95);
      transform: translateY(-20px) scale(.95);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }

  .p-replyToFollow--with_creatorTop {
    right: 0;
    bottom: 8px;
    -webkit-transform-origin: right top;
    transform-origin: right top
  }

  .p-replyToFollow--with_creatorTop .p-replyToFollow__message {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    white-space: normal
  }

  @media only screen and (max-width:479px) {
    .p-replyToFollow--with_creatorTop .p-replyToFollow__message {
      font-size: 12px;
      max-width: 290px
    }
  }

  .p-replyToFollow--with_creatorTop .p-messageBalloon {
    margin-left: auto
  }

  .p-replyToFollow--with_noteDetailTop {
    bottom: 10px;
    left: -6px;
    -webkit-transform-origin: 25px top;
    transform-origin: 25px top
  }

  .p-replyToFollow--with_noteDetailBottom {
    right: 0;
    bottom: 8px;
    left: auto;
    -webkit-transform-origin: right top;
    transform-origin: right top
  }

  .p-replyToFollow--with_noteDetailBottom .p-messageBalloon {
    margin-left: auto
  }

  .p-messageBalloon {
    position: relative;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e1e5e7;
    border-radius: 4px
  }

  .p-messageBalloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #e1e5e7
  }

  .p-messageBalloon--tailPosition_topCenter:before {
    left: 50%;
    margin-left: -6px
  }

  .p-messageBalloon--tailPosition_topCenter:before,
  .p-messageBalloon--tailPosition_topRight:before {
    top: -12px;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
  }

  .p-messageBalloon--tailPosition_topRight:before {
    right: 14px
  }

  .p-messageBalloon--tailPosition_bottomLeft:before {
    left: 14px
  }

  .p-messageBalloon--tailPosition_bottomCenter:before,
  .p-messageBalloon--tailPosition_bottomLeft:before {
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
  }

  .p-messageBalloon--tailPosition_bottomCenter:before {
    left: 50%;
    margin-left: -6px
  }

  .p-messageBalloon--tailPosition_bottomRight:before {
    right: 14px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
  }

  .p-messageBalloon--tailPosition_middletopLeft:before {
    top: 14px;
    left: -12px;
    -webkit-transform: rotate(135deg) translate(-5px, -5px);
    transform: rotate(135deg) translate(-5px, -5px)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-52180bc0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-52180bc0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .is-clickable {
    cursor: pointer
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3369d79c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3369d79c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorProfile {
    position: relative;
    width: 100%
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfile {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile {
      margin-bottom: 16px;
    }
  }

  .o-creatorProfile__avatar {
    margin-bottom: 8px
  }

  .o-creatorProfile__avatarLink {
    display: inline-block
  }

  .o-creatorProfile__header {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 8px
  }

  .o-creatorProfile__leftSide {
    display: -webkit-inline-box;
    display: inline-flex
  }

  .o-creatorProfile__name {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 4px;
    font-size: 16px;
    font-weight: 700;
    word-break: break-all
  }

  .o-creatorProfile__nameLink {
    display: inline-block
  }

  .o-creatorProfile__description {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start
  }

  .o-creatorProfile__introduction {
    -webkit-box-flex: 1;
    flex: 1
  }

  .o-creatorProfile__profile {
    font-size: 14px;
    word-break: break-all
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__profile {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 12px
    }
  }

  .o-creatorProfile__profile:empty {
    margin-bottom: 0
  }

  .o-creatorProfile__profile a {
    text-decoration: underline
  }

  .o-creatorProfile__followButton {
    position: absolute;
    top: 0;
    right: 0
  }

  .o-creatorProfile__followed {
    display: inline-block;
    padding: 4px 8px;
    font-weight: 400;
    color: #a8abb1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 10px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__followed {
      padding: 2px 8px
    }
  }

  .o-creatorProfile__follow {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 8px;
    white-space: nowrap
  }

  .o-creatorProfile__followLink {
    margin-right: 8px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-creatorProfile__followLink .o-creatorProfile__followLabel {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorProfile__followLink .o-creatorProfile__followLabel:hover {
      color: #222
    }
  }

  .o-creatorProfile__followCount {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #222
  }

  .o-creatorProfile__followLabel {
    font-size: 12px;
    line-height: 1.5;
    color: #787c7b
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5a526802 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5a526802 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-quickLook {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 280px;
    padding: 16px;
    visibility: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 4px 8px 16px rgba(34, 34, 34, .1), 0 1px 4px rgba(34, 34, 34, .15);
    opacity: 0;
    -webkit-transition: opacity .2s ease-in 30ms, visibility .2s ease-in 30ms;
    transition: opacity .2s ease-in 30ms, visibility .2s ease-in 30ms;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
  }

  .o-quickLook[data-active=true] {
    visibility: visible;
    opacity: 1
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5264825f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5264825f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .preview-layout {
    pointer-events: none
  }


  /*!
* Cropper.js v1.5.1
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2019-03-10T09:55:50.492Z
*/
  .cropper-container {
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .cropper-container img {
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%
  }

  .cropper-canvas,
  .cropper-crop-box,
  .cropper-drag-box,
  .cropper-modal,
  .cropper-wrap-box {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
  }

  .cropper-canvas,
  .cropper-wrap-box {
    overflow: hidden
  }

  .cropper-drag-box {
    background-color: #fff;
    opacity: 0
  }

  .cropper-modal {
    background-color: #000;
    opacity: .5
  }

  .cropper-view-box {
    display: block;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, .75);
    overflow: hidden;
    width: 100%
  }

  .cropper-dashed {
    border: 0 dashed #eee;
    display: block;
    opacity: .5;
    position: absolute
  }

  .cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: 33.33333%;
    left: 0;
    top: 33.33333%;
    width: 100%
  }

  .cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: 33.33333%;
    top: 0;
    width: 33.33333%
  }

  .cropper-center {
    display: block;
    height: 0;
    left: 50%;
    opacity: .75;
    position: absolute;
    top: 50%;
    width: 0
  }

  .cropper-center:after,
  .cropper-center:before {
    background-color: #eee;
    content: " ";
    display: block;
    position: absolute
  }

  .cropper-center:before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px
  }

  .cropper-center:after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    display: block;
    height: 100%;
    opacity: .1;
    position: absolute;
    width: 100%
  }

  .cropper-face {
    background-color: #fff;
    left: 0;
    top: 0
  }

  .cropper-line {
    background-color: #39f
  }

  .cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px
  }

  .cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px
  }

  .cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px
  }

  .cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0
  }

  .cropper-point {
    background-color: #39f;
    height: 5px;
    opacity: .75;
    width: 5px
  }

  .cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%
  }

  .cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px
  }

  .cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%
  }

  .cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px
  }

  .cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px
  }

  .cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px
  }

  .cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px
  }

  .cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px
  }

  @media (min-width:768px) {
    .cropper-point.point-se {
      height: 15px;
      width: 15px
    }
  }

  @media (min-width:992px) {
    .cropper-point.point-se {
      height: 10px;
      width: 10px
    }
  }

  @media (min-width:1200px) {
    .cropper-point.point-se {
      height: 5px;
      opacity: .75;
      width: 5px
    }
  }

  .cropper-point.point-se:before {
    background-color: #39f;
    bottom: -50%;
    content: " ";
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%
  }

  .cropper-invisible {
    opacity: 0
  }

  .cropper-bg {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
  }

  .cropper-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0
  }

  .cropper-hidden {
    display: none !important
  }

  .cropper-move {
    cursor: move
  }

  .cropper-crop {
    cursor: crosshair
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed
  }



  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5f382746 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5f382746 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-bannerStopCovid__image {
    width: 100%;
    height: auto;
    vertical-align: top;
    border-radius: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-de06e11e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-de06e11e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-calendar__title {
    font-size: 18px;
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1
  }

  .o-calendar__body {
    padding: 16px;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  .o-calendar__item {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f2f2
  }

  .o-calendar__item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none
  }

  .o-calendar__year {
    margin-bottom: 8px
  }

  .o-calendar__yearLink {
    font-size: 16px;
    line-height: 1;
    cursor: pointer
  }

  .o-calendar__yearLink.is-current {
    font-weight: 700;
    color: #222;
    pointer-events: none
  }

  .o-calendar__monthList {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
  }

  .o-calendar__monthItem {
    width: 25%;
    padding: 4px;
    font-size: 14px
  }

  .o-calendar__monthLink {
    display: block;
    padding: 4px;
    line-height: 1;
    color: #a8abb1;
    text-align: center;
    white-space: nowrap
  }

  .o-calendar__monthLink.is-active {
    color: #222
  }

  .o-calendar__monthLink.is-current {
    font-weight: 700;
    color: #222;
    text-decoration: none;
    pointer-events: none
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5f3508ca {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5f3508ca {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contentList {
    position: relative;
    width: 100%
  }

  .o-contentList__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 8px
  }

  @media only screen and (max-width:479px) {
    .o-contentList__header {
      padding-right: 16px;
      padding-left: 16px
    }
  }

  .o-contentList__headerTitle {
    font-size: 16px;
    font-weight: 700
  }

  @media only screen and (max-width:479px) {
    .o-contentList__headerTitle {
      font-size: 12px;
      font-weight: 400;
      color: #787c7b
    }
  }

  .o-contentList--horizontal .o-contentList__headerTitle {
    text-align: center
  }

  .o-contentList__headerAll {
    font-size: 12px;
    color: #787c7b
  }

  .o-contentList--horizontal .o-contentList__headerAll {
    display: none
  }

  @media only screen and (min-width:769px) {
    .o-contentList__headerAll {
      cursor: pointer
    }

    .o-contentList__headerAll:hover {
      color: #222
    }
  }

  .o-contentList--horizontal .o-contentList__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .o-contentList--horizontal .o-contentList__body:after {
    display: block;
    min-width: 1px;
    height: 16px;
    pointer-events: none;
    content: ""
  }

  @media only screen and (max-width:479px) {
    .o-contentList__body {
      padding-right: 16px;
      padding-left: 16px
    }
  }

  .o-contentList__item {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer
  }

  .o-contentList--horizontal .o-contentList__item {
    display: block;
    max-width: 80px;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 16px
  }

  @media only screen and (min-width:769px) {
    .o-contentList--horizontal .o-contentList__item {
      max-width: 88px
    }
  }

  @media only screen and (min-width:769px) {
    .o-contentList__item:hover:before {
      position: absolute;
      top: 0;
      right: -8px;
      bottom: 0;
      left: -8px;
      z-index: -1;
      display: block;
      content: "";
      background-color: #f7f9f9;
      border-radius: 4px
    }

    .o-contentList--horizontal .o-contentList__item:hover:before {
      top: -8px;
      bottom: -8px
    }
  }

  .o-contentList__itemLink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
  }

  .o-contentList__itemEyecatch {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 80px;
    margin-right: 16px
  }

  .o-contentList--horizontal .o-contentList__itemEyecatch {
    margin-right: 0;
    margin-bottom: 8px
  }

  @media only screen and (min-width:769px) {
    .o-contentList--horizontal .o-contentList__itemEyecatch {
      width: 88px;
      margin-bottom: 12px
    }
  }

  .o-contentList__itemTitle {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 700;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px
  }

  .o-contentList--horizontal .o-contentList__itemTitle {
    display: block;
    font-weight: 400;
    line-height: 1;
    line-height: 1.5;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px
  }

  @media only screen and (max-width:479px) {
    .o-contentList--horizontal .o-contentList__itemTitle {
      font-size: 10px
    }
  }

  .o-contentList__itemImage {
    width: 80px;
    height: 45px;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: top;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-contentList--horizontal .o-contentList__itemImage {
      width: 88px;
      height: 50px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-39a675b2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-39a675b2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice {
      padding: 16px
    }
  }

  .o-kaizenNotice--layout_grid {
    display: -webkit-box;
    display: flex;
    height: 100%
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice--layout_grid {
      display: block
    }
  }

  .o-kaizenNotice--layout_grid .o-kaizenNotice__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice--layout_grid .o-kaizenNotice__header {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-pack: inherit;
      justify-content: inherit
    }
  }

  .o-kaizenNotice--layout_grid .o-kaizenNotice__detail {
    -webkit-box-ordinal-group: 3;
    order: 2;
    width: 100%
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice--layout_grid .o-kaizenNotice__detail {
      -webkit-box-ordinal-group: initial;
      order: 0
    }
  }

  .o-kaizenNotice--layout_grid .o-kaizenNotice__headIcon {
    -webkit-box-ordinal-group: 2;
    order: 1;
    margin: 0 0 8px
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice--layout_grid .o-kaizenNotice__headIcon {
      -webkit-box-ordinal-group: initial;
      order: 0;
      margin: inherit
    }
  }

  .o-kaizenNotice__container {
    width: 100%;
    padding: 24px;
    background-color: #f7f9f9;
    border-radius: 4px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-kaizenNotice__container {
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-pack: justify;
      justify-content: space-between
    }
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice__container {
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-pack: justify;
      justify-content: space-between
    }
  }

  .o-kaizenNotice__container[data-type=basic] {
    color: #222;
    background-color: #fff;
    border: 1px solid #e6e6e6
  }

  .o-kaizenNotice__container[data-type=primary] {
    color: #fff;
    background-color: #2cb696
  }

  .o-kaizenNotice__container[data-type=primary] .o-kaizenNotice__close,
  .o-kaizenNotice__container[data-type=primary] .o-kaizenNotice__description {
    color: #fff
  }

  @media only screen and (min-width:769px) {
    .o-kaizenNotice__container[data-type=primary] .o-kaizenNotice__close:hover {
      color: #e8f9f5
    }
  }

  .o-kaizenNotice__container[data-type=secondary] {
    color: #222;
    background-color: #f7f9f9;
    border: none
  }

  .o-kaizenNotice__container[data-size=medium] .o-kaizenNotice__headIcon {
    margin-left: 8px
  }

  .o-kaizenNotice__container[data-size=small] {
    padding: 16px
  }

  .o-kaizenNotice__container[data-size=small] .o-kaizenNotice__headIcon {
    width: 32px;
    height: 32px;
    margin-left: 8px
  }

  .o-kaizenNotice__container[data-size=small] .o-kaizenNotice__title {
    font-size: 12px;
    margin-bottom: 0
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice__container[data-size=small] .o-kaizenNotice__title {
      font-size: 14px
    }
  }

  .o-kaizenNotice__container[data-size=small] .o-kaizenNotice__description {
    margin-top: 4px;
    font-size: 12px
  }

  .o-kaizenNotice__container[data-size=small] .o-kaizenNotice__description:empty {
    margin-top: 0
  }

  .o-kaizenNotice__container[data-location=header] .o-kaizenNotice__headIcon {
    height: 96px
  }

  .o-kaizenNotice__header {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-kaizenNotice__detail {
    -webkit-box-flex: 1;
    flex: 1
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice__detail {
      display: block;
      margin-left: 0
    }
  }

  .o-kaizenNotice__headIcon {
    height: 56px;
    margin-left: 16px;
    background-color: transparent
  }

  .o-kaizenNotice__title {
    -webkit-box-flex: 1;
    flex: 1;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 16px
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice__title {
      font-size: 12px
    }
  }

  .o-kaizenNotice__close {
    position: absolute;
    top: -8px;
    right: -8px;
    color: #a8abb1
  }

  .o-kaizenNotice__description {
    margin-bottom: 16px;
    font-size: 14px;
    color: #787c7b
  }

  @media only screen and (max-width:768px) {
    .o-kaizenNotice__description {
      -webkit-box-flex: 1;
      flex: 1
    }
  }

  @media only screen and (max-width:479px) {
    .o-kaizenNotice__description {
      font-size: 12px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-f568ec2e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-f568ec2e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-magazineEditIconButton__link {
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    color: #fff;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .m-magazineEditIconButton__link:hover {
      background-color: rgba(34, 34, 34, .5);
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .m-magazineEditIconButton__icon {
    position: absolute;
    top: 8px;
    right: 8px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-c53e9f66 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-c53e9f66 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineFollow {
    width: 80px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-2a6ca243 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2a6ca243 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineItemWithNotes {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    width: calc(100% - 6px);
    margin: 0 0 6px
  }

  .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__cover {
    position: relative;
    top: 0;
    right: 0;
    width: 100%
  }

  .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__coverInner {
    width: 100%;
    height: 0;
    padding-bottom: 35.5%;
    border-radius: 3px 3px 0 0
  }

  .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__title {
    padding-right: 0;
    font-size: 20px
  }

  @media only screen and (max-width:479px) {
    .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__title {
      font-size: 18px
    }
  }

  .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articles {
    margin-left: 12px
  }

  .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articles:before {
    bottom: 10px
  }

  @media only screen and (max-width:479px) {
    .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articles {
      margin-left: 12px
    }

    .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articles:before {
      bottom: 8px
    }
  }

  .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articlesItem {
    font-size: 14px
  }

  .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articlesItem+.o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articlesItem {
    margin-top: 8px
  }

  @media only screen and (max-width:479px) {
    .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articlesItem {
      font-size: 12px
    }

    .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articlesItem+.o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__articlesItem {
      margin-top: 4px
    }
  }

  .o-magazineItemWithNotes--size_large .o-magazineItemWithNotes__labels {
    margin-top: 16px
  }

  .o-magazineItemWithNotes--size_medium .o-magazineItemWithNotes__cover {
    position: relative;
    top: 0;
    right: 0;
    width: 100%
  }

  .o-magazineItemWithNotes--size_medium .o-magazineItemWithNotes__coverInner {
    width: 100%;
    height: 0;
    padding-bottom: 35.5%;
    border-radius: 3px 3px 0 0
  }

  .o-magazineItemWithNotes--size_medium .o-magazineItemWithNotes__title {
    padding-right: 0
  }

  .o-magazineItemWithNotes__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-magazineItemWithNotes__body {
      -webkit-transition: border-color .2s cubic-bezier(1, 0, 0, 1);
      transition: border-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-magazineItemWithNotes__body:hover {
      border: 1px solid #ccc
    }

    .o-magazineItemWithNotes__body:hover:after,
    .o-magazineItemWithNotes__body:hover:before {
      border-color: #ccc;
      -webkit-transition: border-color .2s cubic-bezier(1, 0, 0, 1);
      transition: border-color .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-magazineItemWithNotes__body:after,
  .o-magazineItemWithNotes__body:before {
    position: absolute;
    content: "";
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {

    .o-magazineItemWithNotes__body:after,
    .o-magazineItemWithNotes__body:before {
      -webkit-transition: border-color .2s cubic-bezier(1, 0, 0, 1);
      transition: border-color .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-magazineItemWithNotes__body:before {
    top: 2px;
    right: -3px;
    bottom: -3px;
    left: 2px;
    z-index: -1
  }

  .o-magazineItemWithNotes__body:after {
    top: 6px;
    right: -6px;
    bottom: -6px;
    left: 6px;
    z-index: -2
  }

  .o-magazineItemWithNotes__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }

  .o-magazineItemWithNotes__main {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 16px;
    overflow: hidden
  }

  .o-magazineItemWithNotes__cover {
    position: absolute;
    top: 16px;
    right: 16px;
    pointer-events: none
  }

  .o-magazineItemWithNotes__coverInner {
    position: relative;
    width: 80px;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: 4px
  }

  .o-magazineItemWithNotes__setting {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    align-self: auto;
    width: 32px
  }

  .o-magazineItemWithNotes__coverImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
  }

  .o-magazineItemWithNotes__title {
    display: -webkit-box;
    padding-right: 96px;
    overflow: hidden;
    font-weight: 700;
    letter-spacing: .06em;
    word-break: break-all;
    font-size: 16px;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .o-magazineItemWithNotes__badge {
    display: inline-block;
    line-height: 1;
    vertical-align: text-top
  }

  .o-magazineItemWithNotes__description {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    color: #787c7b;
    word-break: break-all;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
  }

  .o-magazineItemWithNotes__status {
    display: -webkit-box;
    display: flex;
    margin-top: 8px
  }

  .o-magazineItemWithNotes__statusItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 12px
  }

  .o-magazineItemWithNotes__statusItem+.o-magazineItemWithNotes__statusItem {
    margin-left: 8px
  }

  .o-magazineItemWithNotes__statusItem--articleNum {
    font-weight: 700
  }

  .o-magazineItemWithNotes__statusItem--price {
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  .o-magazineItemWithNotes__statusCount {
    margin-left: 4px
  }

  .o-magazineItemWithNotes__statusCount:empty {
    margin-left: 0
  }

  .o-magazineItemWithNotes__articles {
    position: relative;
    width: auto;
    margin-left: 8px
  }

  .o-magazineItemWithNotes__articles:before {
    position: absolute;
    top: 0;
    bottom: 8px;
    left: 0;
    content: "";
    border: solid #ccc;
    border-width: 0 1px 0 0
  }

  .o-magazineItemWithNotes__articlesItem {
    position: relative;
    width: 100%;
    font-size: 12px;
    text-indent: 16px
  }

  .o-magazineItemWithNotes__articlesItem+.o-magazineItemWithNotes__articlesItem {
    margin-top: 4px
  }

  .o-magazineItemWithNotes__articlesItem:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    content: "";
    border: solid #ccc;
    border-width: 1px 0 0
  }

  .o-magazineItemWithNotes__articlesLink {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-magazineItemWithNotes__articlesLink {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-magazineItemWithNotes__articlesLink:hover {
      color: #222
    }
  }

  .o-magazineItemWithNotes__labels {
    display: -webkit-box;
    display: flex;
    margin-top: 8px
  }

  .o-magazineItemWithNotes__statusLabel {
    display: inline-block
  }

  .o-magazineItemWithNotes__footer {
    z-index: 3;
    width: 100%;
    padding: 0 16px 16px
  }

  .o-magazineItemWithNotes__avatar,
  .o-magazineItemWithNotes__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-magazineItemWithNotes__avatar {
    width: calc(100% - 90px)
  }

  .o-magazineItemWithNotes__avatarImage {
    -webkit-box-flex: 0;
    flex: 0 0 auto
  }

  .o-magazineItemWithNotes__avatarName {
    font-size: 12px;
    margin-left: 8px;
    overflow: hidden;
    color: #787c7b;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  @media only screen and (max-width:479px) {
    .o-magazineItemWithNotes__avatarName {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }
  }

  .o-magazineItemWithNotes__avatarList {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    align-items: center
  }

  .o-magazineItemWithNotes__action {
    margin-left: auto;
    text-align: right
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-71f2f1aa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-71f2f1aa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-eyecatch {
    overflow: hidden;
    border-radius: 4px
  }

  .m-eyecatch__image {
    width: 100%;
    max-width: 100%;
    height: 100%;
    vertical-align: top;
    -o-object-fit: cover;
    object-fit: cover
  }

  .m-eyecatch--size_xxSmall {
    width: 16px;
    height: 16px
  }

  .m-eyecatch--size_xSmall {
    width: 24px;
    height: 24px
  }

  .m-eyecatch--size_small {
    width: 32px;
    height: 32px
  }

  .m-eyecatch--size_medium {
    width: 56px;
    height: 56px
  }

  .m-eyecatch--size_large {
    width: 80px;
    height: 80px
  }

  .m-eyecatch--size_xLarge {
    width: 104px;
    height: 104px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-66fb8414 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-66fb8414 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-noteListItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%
  }

  @media only screen and (min-width:769px) {
    .m-noteListItem--hover:hover:before {
      position: absolute;
      top: -8px;
      right: -8px;
      bottom: -8px;
      left: -8px;
      z-index: -1;
      display: block;
      content: "";
      background-color: #f7f9f9;
      border-radius: 4px
    }
  }

  .m-noteListItem__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }

  .m-noteListItem__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
  }

  .m-noteListItem__detail {
    overflow: hidden
  }

  .m-noteListItem__eyecatch {
    margin-left: 16px
  }

  .m-noteListItem__eyecatchImage {
    border: 1px solid #f2f2f2
  }

  .m-noteListItem__title {
    display: -webkit-box;
    font-size: 16px;
    margin-bottom: 4px;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .m-noteListItem__meta {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 4px;
    overflow: hidden
  }

  .m-noteListItem__metaIcon {
    max-height: 16px
  }

  .m-noteListItem__metaCount {
    margin-left: 4px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap
  }

  .m-noteListItem__metaLimitedCount {
    margin-left: 8px;
    font-size: 14px
  }

  .m-noteListItem__like {
    color: #ea3f60
  }

  .m-noteListItem__like,
  .m-noteListItem__price {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 8px
  }

  .m-noteListItem__price {
    color: #2cb696
  }

  .m-noteListItem__name {
    z-index: 1;
    overflow: hidden;
    line-height: 1.5;
    color: #787c7b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3a12b53c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3a12b53c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-noteCard {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 0 56px;
    cursor: pointer;
    background-color: #fff
  }

  .m-noteCard[data-has-border=true] {
    padding: 16px 16px 56px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-noteCard[data-has-border=true] {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-noteCard[data-has-border=true]:hover {
      border: 1px solid #a8abb1
    }
  }

  .m-noteCard__head {
    display: -webkit-box;
    display: flex;
    margin-top: 16px;
    margin-bottom: 8px
  }

  .m-noteCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block
  }

  .m-noteCard__eyecatch {
    float: right;
    padding-left: 16px;
    margin-left: auto
  }

  .m-noteCard__eyecatchLarge {
    position: relative;
    padding-bottom: calc(52.34375% + 17px);
    margin: -16px -16px 16px;
    overflow: hidden;
    border-radius: 3px 3px 0 0
  }

  .m-noteCard__eyecatchLargeImage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }

  .m-noteCard__title {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .m-noteCard__description,
  .m-noteCard__title {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.5;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .m-noteCard__description {
    color: #787c7b;
    font-size: 14px
  }

  .m-noteCard__like,
  .m-noteCard__status {
    display: -webkit-box;
    display: flex
  }

  .m-noteCard__like {
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 16px;
    line-height: 1;
    color: #ea3f60
  }

  .m-noteCard__likeCount {
    font-size: 14px;
    margin-left: 4px;
    line-height: 1.5
  }

  .m-noteCard__comment {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 16px;
    line-height: 1;
    color: #a8abb1
  }

  .m-noteCard__commentCount {
    font-size: 14px;
    margin-left: 4px;
    line-height: 1.5
  }

  .m-noteCard__footer {
    position: absolute;
    bottom: 0;
    z-index: 1;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px;
    pointer-events: inherit
  }

  .m-noteCard__author,
  .m-noteCard__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: calc(100% - 32px)
  }

  .m-noteCard__authorAvatar {
    flex-shrink: 0
  }

  .m-noteCard__authorName {
    font-size: 12px;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .m-noteCard__actionsItem {
    padding-left: 4px
  }

  .m-noteCard__actionsIcon {
    position: relative;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .m-noteCard__actionsIcon {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-noteCard__actionsIcon:hover {
      color: #787c7b
    }
  }

  .m-noteCard__actionsIconarea:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 40px;
    height: 40px;
    content: "";
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-73a1362f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-73a1362f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-recommender {
    display: -webkit-box;
    display: flex;
    margin-bottom: 8px;
    overflow: hidden;
    color: #787c7b;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 10px
  }

  .m-recommender__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .m-recommender__text {
    -webkit-box-flex: 1;
    flex: 1;
    white-space: nowrap
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-48781340 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-48781340 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-userReviewedNotes {
    position: relative
  }

  .o-userReviewedNotes:before {
    position: absolute;
    top: 32px;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 0, #fff)
  }

  @media only screen and (max-width:479px) {
    .o-userReviewedNotes:before {
      display: none
    }
  }

  .o-userReviewedNotes:after {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff)
  }

  @media only screen and (max-width:479px) {
    .o-userReviewedNotes:after {
      display: none
    }
  }

  .o-userReviewedNotes--position_leftEnd:before,
  .o-userReviewedNotes--position_rightEnd:after {
    display: none
  }

  .o-userReviewedNotes__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #787c7b;
    letter-spacing: .04em;
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .o-userReviewedNotes__title {
      padding: 16px 16px 0;
      margin-bottom: 8px
    }
  }

  .o-userReviewedNotes__titleIcon {
    margin-right: 8px;
    line-height: 1
  }

  .o-userReviewedNotes__titleBody {
    line-height: 1.5;
    font-size: 12px;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .o-userReviewedNotes__readAll {
    margin-right: 16px;
    margin-left: auto;
    font-size: 12px
  }

  .o-userReviewedNotes__close {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-userReviewedNotes__close {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-userReviewedNotes__close:hover {
      color: #787c7b
    }
  }

  .o-userReviewedNotes__body {
    position: relative
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-userReviewedNotes__body {
      padding-top: 0
    }
  }

  @media only screen and (max-width:768px) {
    .o-userReviewedNotes__body {
      padding-top: 0
    }
  }

  .o-userReviewedNotes__article {
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex: 1;
    width: 100%
  }

  .o-userReviewedNotes__tips {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    margin-top: 24px;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 14px
  }

  .o-userReviewedNotes__tipsBody {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
  }

  .o-userReviewedNotes__tipsIcon {
    width: 40px
  }

  .o-userReviewedNotes__tipsIconImg {
    width: 100%;
    height: 40px;
    background-color: transparent
  }

  .o-userReviewedNotes__tipsDetail {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 8px
  }

  .o-userReviewedNotes__tipsTitle {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
  }

  @media only screen and (max-width:768px) {
    .o-userReviewedNotes__tipsTitle {
      font-size: 12px
    }
  }

  .o-userReviewedNotes__tipsText {
    font-size: 14px
  }

  @media only screen and (max-width:768px) {
    .o-userReviewedNotes__tipsText {
      font-size: 12px
    }
  }

  .o-userReviewedNotes__tipsAction {
    box-sizing: border-box
  }

  .swiper-container,
  .swiper-wrapper {
    width: 100%
  }

  @media only screen and (max-width:479px) {
    .swiper-wrapper {
      padding: 0 16px 16px
    }
  }

  .swiper-slide {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: auto
  }

  @media only screen and (min-width:769px) {
    .swiper-slide {
      margin-right: 8px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-slide {
      width: 230px
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-slide {
      width: 230px
    }
  }

  .swiper-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: calc(100% + 32px);
    min-height: 40px;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-nav {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-nav {
      display: none
    }
  }

  .swiper-prev {
    position: absolute;
    left: 0;
    padding: 4px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-prev {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-prev:hover {
      color: #787c7b
    }
  }

  .swiper-next {
    position: absolute;
    right: 0;
    padding: 4px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-next {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-next:hover {
      color: #787c7b
    }
  }

  .swiper-button-disabled {
    color: #f2f2f2
  }

  @media only screen and (min-width:769px) {
    .swiper-button-disabled:hover {
      color: #f2f2f2
    }
  }


  @font-face {
    font-family: "swiper-icons";
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
    font-weight: 400;
    font-style: normal
  }

  :root {
    --swiper-theme-color: #007aff
  }

  .swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
  }

  .swiper-container-vertical>.swiper-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
  }

  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    box-sizing: content-box
  }

  .swiper-container-android .swiper-slide,
  .swiper-wrapper {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  .swiper-container-multirow>.swiper-wrapper {
    flex-wrap: wrap
  }

  .swiper-container-multirow-column>.swiper-wrapper {
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
  }

  .swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
  }

  .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform
  }

  .swiper-slide-invisible-blank {
    visibility: hidden
  }

  .swiper-container-autoheight,
  .swiper-container-autoheight .swiper-slide {
    height: auto
  }

  .swiper-container-autoheight .swiper-wrapper {
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-transition-property: height, -webkit-transform;
    transition-property: height, -webkit-transform;
    transition-property: transform, height;
    transition-property: transform, height, -webkit-transform
  }

  .swiper-container-3d {
    -webkit-perspective: 1200px;
    perspective: 1200px
  }

  .swiper-container-3d .swiper-cube-shadow,
  .swiper-container-3d .swiper-slide,
  .swiper-container-3d .swiper-slide-shadow-bottom,
  .swiper-container-3d .swiper-slide-shadow-left,
  .swiper-container-3d .swiper-slide-shadow-right,
  .swiper-container-3d .swiper-slide-shadow-top,
  .swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
  }

  .swiper-container-3d .swiper-slide-shadow-bottom,
  .swiper-container-3d .swiper-slide-shadow-left,
  .swiper-container-3d .swiper-slide-shadow-right,
  .swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
  }

  .swiper-container-3d .swiper-slide-shadow-left {
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), transparent);
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
  }

  .swiper-container-3d .swiper-slide-shadow-right {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), transparent);
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
  }

  .swiper-container-3d .swiper-slide-shadow-top {
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), transparent);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
  }

  .swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), transparent);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
  }

  .swiper-container-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
  }

  .swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
  }

  .swiper-container-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
  }

  .swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
  }

  .swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {
    -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
  }

  :root {
    --swiper-navigation-size: 44px
  }

  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    width: calc(var(--swiper-navigation-size)/44*27);
    height: 44px;
    height: var(--swiper-navigation-size);
    margin-top: -22px;
    margin-top: calc(-1*var(--swiper-navigation-size)/2);
    z-index: 10;
    cursor: pointer;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: var(--swiper-theme-color);
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
  }

  .swiper-button-next.swiper-button-disabled,
  .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 44px;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    -webkit-font-feature-settings: normal, ;
    font-feature-settings: normal, ;
    font-variant: normal;
    line-height: 1
  }

  .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    left: 10px;
    right: auto
  }

  .swiper-button-prev:after,
  .swiper-container-rtl .swiper-button-next:after {
    content: "prev"
  }

  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    right: 10px;
    left: auto
  }

  .swiper-button-next:after,
  .swiper-container-rtl .swiper-button-prev:after {
    content: "next"
  }

  .swiper-button-next.swiper-button-white,
  .swiper-button-prev.swiper-button-white {
    --swiper-navigation-color: #fff
  }

  .swiper-button-next.swiper-button-black,
  .swiper-button-prev.swiper-button-black {
    --swiper-navigation-color: #000
  }

  .swiper-button-lock {
    display: none
  }

  .swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 10
  }

  .swiper-pagination.swiper-pagination-hidden {
    opacity: 0
  }

  .swiper-container-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
  }

  .swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transform: scale(.33);
    transform: scale(.33);
    position: relative
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    -webkit-transform: scale(.66);
    transform: scale(.66)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    -webkit-transform: scale(.33);
    transform: scale(.33)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    -webkit-transform: scale(.66);
    transform: scale(.66)
  }

  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    -webkit-transform: scale(.33);
    transform: scale(.33)
  }

  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2
  }

  button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
  }

  .swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
  }

  .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--swiper-theme-color);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
  }

  .swiper-container-vertical>.swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }

  .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 6px 0;
    display: block
  }

  .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 8px
  }

  .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    -webkit-transition: top .2s, -webkit-transform .2s;
    transition: top .2s, -webkit-transform .2s;
    transition: transform .2s, top .2s;
    transition: transform .2s, top .2s, -webkit-transform .2s
  }

  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px
  }

  .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap
  }

  .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transition: left .2s, -webkit-transform .2s;
    transition: left .2s, -webkit-transform .2s;
    transition: transform .2s, left .2s;
    transition: transform .2s, left .2s, -webkit-transform .2s
  }

  .swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transition: right .2s, -webkit-transform .2s;
    transition: right .2s, -webkit-transform .2s;
    transition: transform .2s, right .2s;
    transition: transform .2s, right .2s, -webkit-transform .2s
  }

  .swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
  }

  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-theme-color);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: left top;
    transform-origin: left top
  }

  .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    -webkit-transform-origin: right top;
    transform-origin: right top
  }

  .swiper-container-horizontal>.swiper-pagination-progressbar,
  .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0
  }

  .swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
  .swiper-container-vertical>.swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0
  }

  .swiper-pagination-white {
    --swiper-pagination-color: #fff
  }

  .swiper-pagination-black {
    --swiper-pagination-color: #000
  }

  .swiper-pagination-lock {
    display: none
  }

  .swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
  }

  .swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
  }

  .swiper-container-vertical>.swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
  }

  .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
  }

  .swiper-scrollbar-cursor-drag {
    cursor: move
  }

  .swiper-scrollbar-lock {
    display: none
  }

  .swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center
  }

  .swiper-zoom-container>canvas,
  .swiper-zoom-container>img,
  .swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain
  }

  .swiper-slide-zoomed {
    cursor: move
  }

  .swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s linear infinite;
    animation: swiper-preloader-spin 1s linear infinite;
    box-sizing: border-box;
    border-left: 4px solid var(--swiper-theme-color);
    border-bottom: 4px solid var(--swiper-theme-color);
    border-right: 4px solid var(--swiper-theme-color);
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top: 4px solid transparent
  }

  .swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
  }

  .swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
  }

  @-webkit-keyframes swiper-preloader-spin {
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
    }
  }

  @keyframes swiper-preloader-spin {
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
    }
  }

  .swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
  }

  .swiper-container-fade.swiper-container-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
  }

  .swiper-container-fade .swiper-slide {
    pointer-events: none;
    -webkit-transition-property: opacity;
    transition-property: opacity
  }

  .swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none
  }

  .swiper-container-fade .swiper-slide-active,
  .swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
  }

  .swiper-container-cube {
    overflow: visible
  }

  .swiper-container-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
  }

  .swiper-container-cube .swiper-slide .swiper-slide {
    pointer-events: none
  }

  .swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
  }

  .swiper-container-cube .swiper-slide-active,
  .swiper-container-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
  }

  .swiper-container-cube .swiper-slide-active,
  .swiper-container-cube .swiper-slide-next,
  .swiper-container-cube .swiper-slide-next+.swiper-slide,
  .swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
  }

  .swiper-container-cube .swiper-slide-shadow-bottom,
  .swiper-container-cube .swiper-slide-shadow-left,
  .swiper-container-cube .swiper-slide-shadow-right,
  .swiper-container-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
  }

  .swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    z-index: 0
  }

  .swiper-container-flip {
    overflow: visible
  }

  .swiper-container-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
  }

  .swiper-container-flip .swiper-slide .swiper-slide {
    pointer-events: none
  }

  .swiper-container-flip .swiper-slide-active,
  .swiper-container-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
  }

  .swiper-container-flip .swiper-slide-shadow-bottom,
  .swiper-container-flip .swiper-slide-shadow-left,
  .swiper-container-flip .swiper-slide-shadow-right,
  .swiper-container-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7e0be901 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7e0be901 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-userDescCard {
    position: relative;
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 16px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-userDescCard {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-userDescCard:hover {
      border: 1px solid #ccc
    }
  }

  .m-userDescCard__item {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100%
  }

  .m-userDescCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
  }

  .m-userDescCard__head {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px
  }

  .m-userDescCard__userName {
    margin-left: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 14px;
    -webkit-line-clamp: 2
  }

  .m-userDescCard__description,
  .m-userDescCard__userName {
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    -webkit-box-orient: vertical
  }

  .m-userDescCard__description {
    -webkit-box-flex: 1;
    flex: 1;
    max-height: 54px;
    margin-bottom: 16px;
    color: #787c7b;
    -webkit-line-clamp: 3;
    font-size: 12px
  }

  .m-userDescCard__action {
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: auto
  }

  .m-userDescCard__menu {
    position: relative;
    z-index: 3;
    margin-left: auto;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .m-userDescCard__menu {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-userDescCard__menu:hover {
      color: #787c7b
    }
  }

  .m-userDescCard__option {
    position: absolute;
    top: 48px;
    right: 0;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .m-userDescCard__option {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-userDescCard__option:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4bec4f38 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4bec4f38 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-recommendedUsers {
    position: relative
  }

  .o-recommendedUsers:before {
    position: absolute;
    top: 32px;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 0, #fff)
  }

  @media only screen and (max-width:479px) {
    .o-recommendedUsers:before {
      display: none
    }
  }

  .o-recommendedUsers:after {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff)
  }

  @media only screen and (max-width:479px) {
    .o-recommendedUsers:after {
      display: none
    }
  }

  .o-recommendedUsers--position_leftEnd:before,
  .o-recommendedUsers--position_rightEnd:after {
    display: none
  }

  .o-recommendedUsers__title {
    display: -webkit-box;
    display: flex;
    margin-bottom: 16px;
    color: #787c7b;
    letter-spacing: .04em;
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .o-recommendedUsers__title {
      padding: 16px 16px 0;
      margin-bottom: 8px
    }
  }

  .o-recommendedUsers__titleIcon {
    margin-right: 8px;
    line-height: 1
  }

  .o-recommendedUsers__titleBody {
    width: 100%;
    line-height: 1.5;
    font-size: 12px;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .o-recommendedUsers__close {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-recommendedUsers__close {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-recommendedUsers__close:hover {
      color: #787c7b
    }
  }

  .o-recommendedUsers__body {
    position: relative
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-recommendedUsers__body {
      padding-top: 0
    }
  }

  @media only screen and (max-width:768px) {
    .o-recommendedUsers__body {
      padding-top: 0
    }
  }

  .swiper-container,
  .swiper-wrapper {
    width: 100%
  }

  @media only screen and (max-width:479px) {
    .swiper-wrapper {
      padding: 0 16px 16px
    }
  }

  .swiper-slide {
    display: -webkit-box;
    display: flex;
    height: auto
  }

  @media only screen and (min-width:769px) {
    .swiper-slide {
      max-width: 168px;
      margin-right: 8px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-slide {
      width: 160px
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-slide {
      width: 160px
    }
  }

  .swiper-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: calc(100% + 32px);
    min-height: 40px;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-nav {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-nav {
      display: none
    }
  }

  .swiper-prev {
    position: absolute;
    left: 0;
    padding: 4px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-prev {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-prev:hover {
      color: #787c7b
    }
  }

  .swiper-next {
    position: absolute;
    right: 0;
    padding: 4px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-next {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-next:hover {
      color: #787c7b
    }
  }

  .swiper-button-disabled {
    color: #f2f2f2
  }

  @media only screen and (min-width:769px) {
    .swiper-button-disabled:hover {
      color: #f2f2f2
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-ca08603c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-ca08603c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicFollowedNotes {
    position: relative
  }

  .o-topicFollowedNotes:before {
    position: absolute;
    top: 32px;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 0, #fff)
  }

  @media only screen and (max-width:479px) {
    .o-topicFollowedNotes:before {
      display: none
    }
  }

  .o-topicFollowedNotes:after {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1;
    display: block;
    width: 20px;
    content: "";
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff)
  }

  @media only screen and (max-width:479px) {
    .o-topicFollowedNotes:after {
      display: none
    }
  }

  .o-topicFollowedNotes--position_leftEnd:before,
  .o-topicFollowedNotes--position_rightEnd:after {
    display: none
  }

  .o-topicFollowedNotes__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .o-topicFollowedNotes__header {
      padding: 16px 16px 0;
      margin-bottom: 8px
    }
  }

  .o-topicFollowedNotes__headerMain {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-topicFollowedNotes__headerIcon {
    margin-right: 8px;
    font-size: 14px;
    line-height: 1;
    color: #787c7b
  }

  .o-topicFollowedNotes__headerTitle {
    display: -webkit-box;
    padding-right: 24px;
    overflow: hidden;
    font-size: 12px;
    color: #787c7b;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
  }

  .o-topicFollowedNotes__headerTitle:hover {
    color: #222;
    text-decoration: underline
  }

  .o-topicFollowedNotes__headerSide {
    font-size: 12px;
    color: #787c7b;
    white-space: nowrap
  }

  .o-topicFollowedNotes__headerSide:hover {
    color: #222;
    text-decoration: underline
  }

  .o-topicFollowedNotes__body {
    position: relative
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-topicFollowedNotes__body {
      padding-top: 0
    }
  }

  @media only screen and (max-width:768px) {
    .o-topicFollowedNotes__body {
      padding-top: 0
    }
  }

  .o-topicFollowedNotes__recommender {
    display: -webkit-box;
    display: flex;
    margin-bottom: 8px;
    overflow: hidden;
    color: #787c7b;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 10px
  }

  .o-topicFollowedNotes__recommenderName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .o-topicFollowedNotes__recommenderText {
    -webkit-box-flex: 1;
    flex: 1;
    white-space: nowrap
  }

  .o-topicFollowedNotes__article {
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex: 1;
    width: 100%
  }

  .o-topicFollowedNotes__tips {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    margin-top: 24px;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 14px
  }

  .o-topicFollowedNotes__tipsBody {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
  }

  .o-topicFollowedNotes__tipsIcon {
    width: 40px
  }

  .o-topicFollowedNotes__tipsIconImg {
    width: 100%;
    height: 40px;
    background-color: transparent
  }

  .o-topicFollowedNotes__tipsDetail {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 8px
  }

  .o-topicFollowedNotes__tipsTitle {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
  }

  @media only screen and (max-width:768px) {
    .o-topicFollowedNotes__tipsTitle {
      font-size: 12px
    }
  }

  .o-topicFollowedNotes__tipsText {
    font-size: 14px
  }

  @media only screen and (max-width:768px) {
    .o-topicFollowedNotes__tipsText {
      font-size: 12px
    }
  }

  .o-topicFollowedNotes__tipsAction {
    box-sizing: border-box
  }

  .swiper-container,
  .swiper-wrapper {
    width: 100%
  }

  @media only screen and (max-width:479px) {
    .swiper-wrapper {
      padding: 0 16px 16px
    }
  }

  .swiper-slide {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: auto
  }

  @media only screen and (min-width:769px) {
    .swiper-slide {
      margin-right: 8px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-slide {
      width: 230px
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-slide {
      width: 230px
    }
  }

  .swiper-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: calc(100% + 32px);
    min-height: 40px;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-nav {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-nav {
      display: none
    }
  }

  .swiper-prev {
    position: absolute;
    left: 0;
    padding: 4px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-prev {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-prev:hover {
      color: #787c7b
    }
  }

  .swiper-next {
    position: absolute;
    right: 0;
    padding: 4px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-next {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-next:hover {
      color: #787c7b
    }
  }

  .swiper-button-disabled {
    color: #f2f2f2
  }

  @media only screen and (min-width:769px) {
    .swiper-button-disabled:hover {
      color: #f2f2f2
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1968a6dc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1968a6dc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-carouselGroup {
    position: relative
  }

  .m-carouselGroup__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-carouselGroup__header {
      margin-right: 16px;
      margin-left: 16px;
      font-size: 16px
    }
  }

  @media only screen and (max-width:768px) {
    .m-carouselGroup__header {
      margin-right: 16px;
      margin-left: 16px;
      font-size: 16px
    }
  }

  .m-carouselGroup__title {
    font-size: 24px;
    font-weight: 700
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-carouselGroup__title {
      font-size: 20px
    }
  }

  @media only screen and (max-width:768px) {
    .m-carouselGroup__title {
      font-size: 18px
    }
  }

  .m-carouselGroup__seeAllLink {
    font-size: 12px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .m-carouselGroup__seeAllLink {
      cursor: pointer;
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-carouselGroup__seeAllLink:hover {
      color: #222
    }
  }

  .m-carouselGroup__clickableItem {
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .m-carouselGroup__clickableItem {
      cursor: pointer;
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-carouselGroup__clickableItem:hover {
      color: #222
    }
  }

  .swiper-container {
    width: 100%
  }

  .swiper-wrapper {
    display: -webkit-box;
    display: flex;
    width: 100%;
    padding-right: 3px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-wrapper {
      padding: 0 16px
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-wrapper {
      padding: 0 16px
    }
  }

  .swiper-slide {
    display: -webkit-box;
    display: flex;
    height: auto;
    min-height: 160px
  }

  @media only screen and (min-width:769px) {
    .swiper-slide {
      margin-bottom: 8px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-slide {
      width: 240px
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-slide {
      width: 240px
    }
  }

  .swiper-header {
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .swiper-header,
  .swiper-nav {
    display: -webkit-box;
    display: flex
  }

  .swiper-nav {
    z-index: 2;
    -webkit-box-align: center;
    align-items: center;
    margin-left: 16px;
    pointer-events: none
  }

  .swiper-prev {
    left: 0;
    padding: 4px;
    color: #787c7b;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-prev {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-prev:hover {
      color: #222
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-prev {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-prev {
      display: none
    }
  }

  .swiper-next {
    right: 0;
    padding: 4px;
    color: #787c7b;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-next {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-next:hover {
      color: #222
    }
  }

  .swiper-next[aria-disabled=true] {
    cursor: default
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-next {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-next {
      display: none
    }
  }

  .swiper-seeAll {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 8px;
    margin-left: 8px;
    white-space: nowrap;
    pointer-events: auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-seeAll {
      margin-right: 0;
      margin-left: 0
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-seeAll {
      margin-right: 0;
      margin-left: 0
    }
  }

  .swiper-button-disabled {
    color: #ccc;
    pointer-events: none
  }

  @media only screen and (min-width:769px) {
    .swiper-button-disabled:hover {
      color: #ccc
    }
  }

  .swiper-close {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: 8px;
    white-space: nowrap;
    pointer-events: auto
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5e9f1b2a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5e9f1b2a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-likeOnBoarding {
    position: absolute;
    bottom: 0;
    left: -6px;
    z-index: 10;
    display: -webkit-box;
    display: flex;
    min-width: 300px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform-origin: 25px bottom;
    transform-origin: 25px bottom
  }

  @media only screen and (max-width:479px) {
    .m-likeOnBoarding {
      min-width: 270px
    }

    .m-likeOnBoarding .m-likeOnBoarding__message {
      max-width: 220px
    }
  }

  @media only screen and (max-width:479px) {
    .m-likeOnBoarding--with_articleActionSp {
      right: -7px;
      bottom: 16px;
      left: auto;
      -webkit-transform-origin: 98% bottom;
      transform-origin: 98% bottom
    }

    .m-likeOnBoarding--with_articleActionSp .m-likeOnBoarding__balloon {
      margin-left: auto
    }
  }

  .m-likeOnBoarding__balloon {
    position: relative;
    color: #fff;
    text-align: left;
    background-color: #2cb696;
    border: 1px solid #2cb696;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(34, 34, 34, .25), 0 0 1px rgba(34, 34, 34, .35)
  }

  .m-likeOnBoarding__balloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #2cb696;
    box-shadow: 1px 1px 0 0 #2cb696
  }

  .m-likeOnBoarding__balloon--tailPosition_bottomLeft:before {
    bottom: -12px;
    left: 12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
  }

  .m-likeOnBoarding__balloon--tailPosition_bottomRight:before {
    right: 14px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
  }

  .m-likeOnBoarding__body {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px
  }

  .m-likeOnBoarding__message {
    max-width: 220px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: normal
  }

  @media only screen and (max-width:479px) {
    .m-likeOnBoarding__message {
      font-size: 12px
    }
  }

  .m-likeOnBoarding__status {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 12px
  }

  .m-likeOnBoarding__status:last-child {
    margin-bottom: 0
  }

  .m-likeOnBoarding__statusText {
    margin-left: 8px
  }

  .m-likeOnBoarding__statusImage {
    width: 40px;
    height: 40px;
    background-color: transparent
  }

  .m-likeOnBoarding__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #e6e6e6
  }

  .m-likeOnBoarding.is-shown {
    -webkit-animation: showOnBoarding-data-v-5e9f1b2a 9s .16s;
    animation: showOnBoarding-data-v-5e9f1b2a 9s .16s
  }

  @-webkit-keyframes showOnBoarding-data-v-5e9f1b2a {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    2% {
      opacity: 0;
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    3% {
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px)
    }

    3% {
      -webkit-transform: translateY(-48px);
      transform: translateY(-48px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    5% {
      -webkit-transform: translateY(-34px);
      transform: translateY(-34px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    6% {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    91.66667% {
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px)
    }

    94.44444% {
      -webkit-transform: translateY(-42px);
      transform: translateY(-42px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    97.22222% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(-20px) scale(.95);
      transform: translateY(-20px) scale(.95);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }

  @keyframes showOnBoarding-data-v-5e9f1b2a {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    2% {
      opacity: 0;
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    3% {
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px)
    }

    3% {
      -webkit-transform: translateY(-48px);
      transform: translateY(-48px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    5% {
      -webkit-transform: translateY(-34px);
      transform: translateY(-34px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    6% {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    91.66667% {
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px)
    }

    94.44444% {
      -webkit-transform: translateY(-42px);
      transform: translateY(-42px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    97.22222% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(-20px) scale(.95);
      transform: translateY(-20px) scale(.95);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7f11f372 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7f11f372 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-likeNoLogin {
    position: absolute;
    bottom: 24px;
    left: -6px;
    z-index: 8
  }

  .m-likeNoLogin__wrapper {
    min-width: 300px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform-origin: 25px bottom;
    transform-origin: 25px bottom
  }

  .m-likeNoLogin__wrapper.is-shown {
    -webkit-animation: showNoLogin-data-v-7f11f372 18s .16s;
    animation: showNoLogin-data-v-7f11f372 18s .16s
  }
    
  @-webkit-keyframes showNoLogin-data-v-7f11f372 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    1% {
      opacity: 0;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    1.5% {
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    1.5% {
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    2.5% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    3% {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(-16px);
      transform: translateY(-16px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    95.83333% {
      -webkit-transform: translateY(-16px);
      transform: translateY(-16px)
    }

    97.22222% {
      -webkit-transform: translateY(-18px);
      transform: translateY(-18px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    98.61111% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(4px) scale(.95);
      transform: translateY(4px) scale(.95);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }

  @keyframes showNoLogin-data-v-7f11f372 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    1% {
      opacity: 0;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    1.5% {
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    1.5% {
      -webkit-transform: translateY(-24px);
      transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    2.5% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    3% {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(-16px);
      transform: translateY(-16px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    95.83333% {
      -webkit-transform: translateY(-16px);
      transform: translateY(-16px)
    }

    97.22222% {
      -webkit-transform: translateY(-18px);
      transform: translateY(-18px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    98.61111% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(4px) scale(.95);
      transform: translateY(4px) scale(.95);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }

  .m-likeNoLogin__balloon {
    position: relative;
    text-align: left;
    background-color: #fff;
    border: 1px solid #2cb696;
    border-radius: 4px
  }

  .m-likeNoLogin__balloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #2cb696
  }

  .m-likeNoLogin__balloon--tailPosition_bottomLeft:before {
    bottom: -12px;
    left: 12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
  }

  .m-likeNoLogin__body {
    position: relative;
    padding: 16px 24px 16px 16px
  }

  .m-likeNoLogin__title {
    font-weight: 700;
    color: #2cb696;
    font-size: 14px
  }

  .m-likeNoLogin__description {
    font-weight: 400;
    color: #787c7b;
    font-size: 12px
  }

  .m-likeNoLogin__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #a8abb1
  }
 
 
  @media only screen and (min-width:769px) {
    .m-likeNoLogin__close:hover {
      color: #787c7b
    }
  }

   :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6ac51c06 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6ac51c06 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-timelineFooter {
    position: relative;
    z-index: 4;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px 0 0;
    pointer-events: none
  }

  /* ########################  start research */
  .o-timelineFooter,
  .o-timelineFooter__avatar {
    /* display: -webkit-box;   deleted by xman 2020.12.23 for list.html */
    /* display: flex; */
    -webkit-box-align: center;
    align-items: center
  }
  /* ########################   end research  */

  .o-timelineFooter__avatar {
    min-width: 0
  }

  .o-timelineFooter__icon {
    margin-right: 8px;
    pointer-events: auto
  }

  .o-timelineFooter__name {
    font-size: 14px;
    overflow: hidden;
    font-weight: 400;
    line-height: 1.5;
    color: #787c7b;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto
  }

  @media only screen and (max-width:479px) {
    .o-timelineFooter__name {
      font-size: 12px
    }
  }

  .o-timelineFooter__action {
    pointer-events: auto
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6cd605d6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6cd605d6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-timelineLimitedNote a {
    text-decoration: none
  }

  .o-timelineLimitedNote a:hover {
    text-decoration: underline
  }

  .o-timelineLimitedNote__body {
    display: inline;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 12px
  }

  .o-timelineLimitedNote__body+.o-timelineLimitedNote__body {
    margin-top: 8px
  }

  .o-timelineLimitedNote__text {
    display: inline;
    margin-left: -.2em;
    letter-spacing: .04em
  }

  .o-timelineLimitedNote__text:first-child {
    margin-left: 0
  }

  .o-timelineLimitedNote__link {
    display: -webkit-box;
    display: flex;
    color: #787c7b;
    letter-spacing: .04em
  }
  
  @media only screen and (min-width:769px) {
    .o-timelineLimitedNote__link:hover {
      color: #222
    }
  }

  .o-timelineLimitedNote__link--inline {
    display: inline-block
  }

  .o-timelineLimitedNote__aside {
    display: inline;
    margin-left: -.2em;
    letter-spacing: .04em
  }

  .o-timelineLimitedNote__aside:first-child {
    margin-left: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-a2975b58 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-a2975b58 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-timelineNotificationMessages {
    font-size: 12px;
    color: #787c7b
  }

  .o-timelineNotificationMessages a {
    text-decoration: none
  }

  .o-timelineNotificationMessages a:hover {
    text-decoration: underline
  }

  .o-timelineNotificationMessages--cardType {
    padding-bottom: 10px;
    margin: -10px 0 15px;
    border-bottom: 1px solid #e8eceb
  }

  .o-timelineNotificationMessages--cardType,
  .o-timelineNotificationMessages--gridType,
  .o-timelineNotificationMessages--itemType {
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .o-timelineNotificationMessages__icon {
    margin-right: 8px;
    line-height: 1
  }

  .o-timelineNotificationMessages__body {
    width: 100%;
    line-height: 1.5;
    font-size: 12px;
    letter-spacing: -.4em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .o-timelineNotificationMessages__text {
    display: inline;
    margin-left: -.2em;
    letter-spacing: .04em
  }

  .o-timelineNotificationMessages__text:first-child {
    margin-left: 0
  }

  .o-timelineNotificationMessages__item {
    display: inline
  }

  .o-timelineNotificationMessages__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: #787c7b;
    letter-spacing: .04em
  }

  @media only screen and (min-width:769px) {
    .o-timelineNotificationMessages__link:hover {
      color: #222
    }
  }

  .o-timelineNotificationMessages__link--inline {
    display: inline-block
  }

  .o-timelineNotificationMessages--multi {
    display: -webkit-box;
    display: flex
  }

  .o-timelineNotificationMessages__recommnededTitle {
    display: -webkit-box;
    display: flex;
    margin-bottom: 16px;
    color: #787c7b;
    letter-spacing: .04em;
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .o-timelineNotificationMessages__recommnededTitle {
      margin-bottom: 0
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-62d239a0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-62d239a0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-timelinePinnedNote {
    font-size: 12px;
    color: #787c7b
  }

  .o-timelinePinnedNote__messageType__icon {
    margin-right: 4px
  }

  @media only screen and (max-width:479px) {
    .o-timelinePinnedNote__messageType__icon {
      margin-right: 0
    }
  }

  .o-timelinePinnedNote__iconType {
    width: 28px;
    height: 28px;
    color: #787c7b;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 50%
  }

  .o-timelinePinnedNote__iconType__icon {
    position: absolute;
    top: 6px;
    left: 6px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-55325607 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-55325607 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-gridNote {
    width: 100%;
    height: 100%
  }

  .o-gridNote__card {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    background-color: transparent
  }

  .o-gridNote__card[data-has-border=true] {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-gridNote__card[data-has-border=true] {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-gridNote__card[data-has-border=true]:hover {
      border: 1px solid #ccc
    }

    .o-gridNote__card[data-has-border=true]:hover:before {
      display: none
    }
  }

  .o-gridNote__card[data-has-border=true] .o-gridNote__eyecatchInner,
  .o-gridNote__card[data-has-border=true] .o-gridNote__eyecatchInner--sound {
    border-radius: 3px 3px 0 0
  }

  .o-gridNote__card[data-has-border=true] .o-gridNote__body {
    padding: 16px 16px 8px
  }

  .o-gridNote__card[data-has-border=true] .o-gridNote__footer {
    padding: 0 16px 16px;
    margin-top: auto
  }

  .o-gridNote__card[data-has-border=true] .o-gridNote__magazineAdd {
    margin: 0 16px 16px
  }

  @media only screen and (min-width:769px) {

    .o-gridNote__card:hover .o-gridNote__eyecatchImage,
    .o-gridNote__card:hover .o-gridNote__eyecatchInner {
      opacity: .5;
      -webkit-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out
    }
  }

  .o-gridNote__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block
  }

  .o-gridNote__eyecatchInner--sound {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px
  }

  .o-gridNote__eyecatchInner--sound:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    content: ""
  }

  .o-gridNote__eyecatchInner--sound .o-gridNote__eyecatchImage {
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-gridNote__eyecatchInner--sound .o-gridNote__eyecatchImage,
  .o-gridNote__eyecatchInner--sound .o-gridNote__eyecatchSound {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
  }

  .o-gridNote__eyecatchInner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px
  }

  .o-gridNote__eyecatchInner:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%;
    content: ""
  }

  .o-gridNote__eyecatchInner--image:before {
    padding-bottom: 95%
  }

  .o-gridNote__eyecatchInner--movie {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .o-gridNote__eyecatchInner img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-gridNote__eyecatchInner img.o-gridNote__userIcon {
    width: 80px;
    height: 80px;
    margin: auto;
    border: 4px solid #fff;
    border-radius: 50%
  }

  .o-gridNote__eyecatchMovie {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%
  }

  .o-gridNote__imageCount {
    font-size: 12px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 1;
    padding: 2px 4px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: rgba(34, 34, 34, .7);
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-gridNote__imageCount {
      font-size: 10px;
      right: 0;
      bottom: 0;
      border-radius: 4px 0 0 0
    }
  }

  .o-gridNote__pinned {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1
  }

  .o-gridNote__body {
    position: relative;
    padding: 16px 0 0
  }

  .o-gridNote__body:last-child {
    padding-bottom: 16px
  }

  .o-gridNote__notification {
    position: relative;
    z-index: 3;
    margin-bottom: 8px
  }

  .o-gridNote__notification .o-timelineNotificationMessages__recommnededTitle {
    margin-bottom: 0
  }

  .o-gridNote__status {
    margin-top: 8px
  }

  .o-gridNote__footer {
    position: relative;
    z-index: 3;
    padding: 0;
    pointer-events: none
  }

  .o-gridNote__magazineAdd {
    position: relative;
    z-index: 3;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
  }

  .o-gridNote__magazineAdd:empty {
    display: none
  }

  .o-gridNote__magazineAdd--position_top {
    padding-top: 0;
    margin-top: 0;
    border-top: none
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-765876c6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

 
  @keyframes loadingAnimation-data-v-765876c6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-topicRecommendNotes__item {
    position: relative;
    box-sizing: border-box;
    width: 100%
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5a0314c9 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5a0314c9 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-contestLightsCard {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 4px
  }

  .m-contestLightsCard[data-color=red] .m-contestLightsCard__title {
    background-color: #ff8c6e
  }

  .m-contestLightsCard[data-color=red] .m-contestLightsCard__title:before {
    border-color: hsla(0, 0%, 100%, .6)
  }

  .m-contestLightsCard[data-color=green] .m-contestLightsCard__title {
    color: #005155;
    background-color: #99e1d7
  }

  .m-contestLightsCard[data-color=green] .m-contestLightsCard__title:before {
    border-color: rgba(0, 81, 85, .2)
  }

  .m-contestLightsCard[data-color=blue] .m-contestLightsCard__title {
    background-color: #5dc0d5
  }

  .m-contestLightsCard[data-color=blue] .m-contestLightsCard__title:before {
    border-color: hsla(0, 0%, 100%, .6)
  }

  .m-contestLightsCard[data-color=yellow] .m-contestLightsCard__title {
    color: #6d3f00;
    background-color: #ffc23c
  }

  .m-contestLightsCard[data-color=yellow] .m-contestLightsCard__title:before {
    border-color: rgba(109, 63, 0, .2)
  }

  .m-contestLightsCard[data-less-info=true] .m-contestLightsCard__title {
    width: 100%
  }

  .m-contestLightsCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    cursor: pointer
  }

  .m-contestLightsCard__container {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-contestLightsCard__container {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-contestLightsCard__container:hover {
      border-color: #ccc
    }
  }

  .m-contestLightsCard__title {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 68%;
    padding: 4px 8px 4px 40px;
    color: #fff;
    background-color: #787c7b
  }

  .m-contestLightsCard__title,
  .m-contestLightsCard__title:before {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-contestLightsCard__title:before {
    position: absolute;
    top: 50%;
    left: 8px;
    -webkit-box-align: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    font-size: 20px;
    line-height: 1;
    content: "#"
  }

  .m-contestLightsCard__titleMain {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    font-weight: 700
  }

  .m-contestLightsCard__sponsor {
    font-size: 10px;
    font-weight: 700
  }

  .m-contestLightsCard__detail {
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-contestLightsCard__postCount {
    padding-bottom: 2px;
    line-height: 1;
    text-align: center;
    border-bottom: 1px solid #222
  }

  .m-contestLightsCard__postCountLink {
    font-weight: 700;
    color: #222;
    font-size: 12px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-f5be7d3a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-f5be7d3a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-contestsCard {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-contestsCard {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-contestsCard:hover {
      border-color: #ccc
    }
  }

  .m-contestsCard[data-less-info=true] .m-contestsCard__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-contestsCard[data-less-info=true] .m-contestsCard__period {
    margin-top: 0;
    font-size: 12px
  }

  .m-contestsCard--large {
    overflow: hidden
  }

  .m-contestsCard--large .m-contestsCard__container {
    display: inline;
    min-height: 0
  }

  .m-contestsCard--large .m-contestsCard__banner {
    width: 100%;
    border-radius: 0
  }

  .m-contestsCard--large .m-contestsCard__detail {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px 24px
  }

  @media only screen and (max-width:479px) {
    .m-contestsCard--large .m-contestsCard__detail {
      padding: 8px 16px
    }
  }

  .m-contestsCard--large .m-contestsCard__postCount {
    z-index: 1
  }

  .m-contestsCard--large .m-contestsCard__period {
    font-size: 12px;
    margin-top: 0;
    line-height: 1
  }

  .m-contestsCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    cursor: pointer
  }

  .m-contestsCard__container {
    display: -webkit-box;
    display: flex
  }

  .m-contestsCard__banner {
    position: relative;
    width: 68%;
    overflow: hidden;
    border-radius: 3px 0 0 3px
  }

  .m-contestsCard__banner:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 33.33333%;
    content: ""
  }

  .m-contestsCard__bannerImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
  }

  .m-contestsCard__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-contestsCard__postCount {
    padding-bottom: 2px;
    line-height: 1;
    text-align: center;
    border-bottom: 1px solid #222
  }

  .m-contestsCard__postCountLink {
    font-weight: 700;
    color: #222;
    font-size: 12px
  }

  .m-contestsCard__period {
    margin-top: 8px;
    font-size: 10px;
    color: #787c7b;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-60905224 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-60905224 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-odaiCard {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-odaiCard {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-odaiCard:hover {
      border-color: #ccc
    }
  }

  .m-odaiCard[data-color=red] .m-odaiCard__title {
    color: #ff5732
  }

  .m-odaiCard[data-color=green] .m-odaiCard__title {
    color: #5ac8b8
  }

  .m-odaiCard[data-color=blue] .m-odaiCard__title {
    color: #4f9aa8
  }

  .m-odaiCard[data-color=yellow] .m-odaiCard__title {
    color: #f68229
  }

  .m-odaiCard[data-less-info=true] .m-odaiCard__title {
    width: 100%
  }

  .m-odaiCard__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block
  }

  .m-odaiCard__container {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    min-height: 56px
  }

  .m-odaiCard__title {
    position: relative;
    width: 68%;
    padding: 4px 0 4px 40px
  }

  .m-odaiCard__title:before {
    position: absolute;
    top: 50%;
    left: 8px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    font-size: 20px;
    line-height: 1;
    content: "#"
  }

  .m-odaiCard__titleMain {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    font-weight: 700
  }

  .m-odaiCard__sponsor {
    font-size: 10px;
    font-weight: 700
  }

  .m-odaiCard__detail {
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
  }

  .m-odaiCard__postCount {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap
  }

  .m-odaiCard__postCountLink {
    padding-bottom: 2px;
    font-weight: 700;
    color: #222;
    border-bottom: 1px solid #222;
    font-size: 12px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-2e7959fb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2e7959fb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-sidebarContests {
    position: relative;
    width: 100%
  }

  .o-sidebarContests__item+.o-sidebarContests__item {
    margin-top: 40px
  }

  .o-sidebarContests__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
  }

  .o-sidebarContests__header__title {
    font-size: 16px;
    font-weight: 700
  }

  .o-sidebarContests__header__readAll {
    font-size: 12px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-sidebarContests__header__readAll:hover {
      color: #222
    }
  }

  .o-sidebarContests__listItem {
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-52091c14 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-52091c14 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-sidebarEventCalendar__image {
    width: 100%;
    height: auto;
    vertical-align: top;
    border-radius: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3e0cacf0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3e0cacf0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-sidebarNotice {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-sidebarNotice {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-sidebarNotice:hover {
      border-color: #ccc
    }
  }

  @media only screen and (max-width:479px) {
    .o-sidebarNotice {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-align: center;
      align-items: center;
      padding: 8px;
      margin: 16px
    }
  }

  .o-sidebarNotice__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3
  }

  .o-sidebarNotice__thumb {
    width: 100%
  }

  @media only screen and (max-width:479px) {
    .o-sidebarNotice__thumb {
      -webkit-box-flex: 0;
      flex: 0 0 auto;
      width: 112px
    }
  }

  .o-sidebarNotice__thumbInner {
    overflow: hidden
  }

  @media only screen and (max-width:479px) {
    .o-sidebarNotice__thumbInner {
      border-radius: 4px
    }
  }

  .o-sidebarNotice__thumbImage {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: top
  }

  .o-sidebarNotice__movie {
    width: 100%
  }

  @media only screen and (max-width:479px) {
    .o-sidebarNotice__movie {
      width: 112px;
      overflow: hidden;
      border-radius: 4px
    }
  }

  .o-sidebarNotice__movieInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .o-sidebarNotice__movieIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }

  .o-sidebarNotice__body {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
    padding: 16px
  }

  @media only screen and (max-width:479px) {
    .o-sidebarNotice__body {
      padding: 0 0 0 16px
    }
  }

  .o-sidebarNotice__aside {
    margin-bottom: 8px
  }

  .o-sidebarNotice__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 16px;
    font-weight: 700
  }

  @media only screen and (max-width:479px) {
    .o-sidebarNotice__text {
      -webkit-box-flex: 1;
      flex: 1;
      font-size: 14px;
      -webkit-line-clamp: 3
    }
  }

  .o-sidebarNotice__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 32px;
    height: 32px;
    padding: 4px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .4);
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .o-sidebarNotice__close {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-sidebarNotice__close:hover {
      color: #fff;
      background-color: rgba(34, 34, 34, .5)
    }
  }

  @media only screen and (max-width:479px) {
    .o-sidebarNotice__close {
      top: 4px;
      right: 4px;
      color: #a8abb1;
      background-color: #fff
    }
  }

  .o-sidebarNotice__closeIcon {
    pointer-events: none;
    cursor: pointer
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-80e3f710 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-80e3f710 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-sidebarPickupNotes {
    position: relative;
    width: 100%
  }

  .o-sidebarPickupNotes__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .o-sidebarPickupNotes__header__title {
    font-size: 16px;
    font-weight: 700
  }

  .o-sidebarPickupNotes__header__readAll {
    font-size: 12px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-sidebarPickupNotes__header__readAll:hover {
      color: #222
    }
  }

  .o-sidebarPickupNotes__noteListItem {
    padding: 16px 0;
    border-bottom: 1px solid #f2f2f2
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-bb650804 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-bb650804 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-contestListItem {
    position: relative;
    width: 100%;
    padding-bottom: 16px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2
  }

  @media only screen and (min-width:769px) {
    .m-contestListItem:hover:before {
      position: absolute;
      top: -8px;
      right: -8px;
      bottom: 8px;
      left: -8px;
      z-index: -1;
      display: block;
      content: "";
      background-color: #f7f9f9;
      border-radius: 4px
    }
  }

  .m-contestListItem__title {
    font-size: 18px;
    display: block;
    width: 100%;
    padding-bottom: 4px;
    font-weight: 700
  }

  .m-contestListItem__bannerContainer {
    position: relative;
    height: 0;
    padding-bottom: 33.33333%;
    overflow: hidden;
    border-radius: 4px
  }

  .m-contestListItem__banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }

  .m-contestListItem__description {
    font-size: 12px;
    display: block;
    width: 100%;
    color: #787c7b
  }

  .m-contestListItem__bottom {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-top: 8px
  }

  .m-contestListItem__link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%
  }

  .m-contestListItem__button {
    z-index: 2
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-10460218 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-10460218 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-sidebarThemes {
    position: relative;
    width: 100%
  }

  .o-sidebarThemes__item+.o-sidebarThemes__item {
    margin-top: 40px
  }

  .o-sidebarThemes__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
  }

  .o-sidebarThemes__header__title {
    font-size: 16px;
    font-weight: 700
  }

  .o-sidebarThemes__header__readAll {
    font-size: 12px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-sidebarThemes__header__readAll:hover {
      color: #222
    }
  }

  .o-sidebarThemes__listItem {
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5d5ecc70 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5d5ecc70 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-sidebarOfficialAccounts {
    display: block;
    padding: 16px;
    cursor: pointer;
    background-color: #5ac8b8;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/follow_official_acounts.304fa01.png);
    background-repeat: no-repeat;
    background-position: top 16px right 16px;
    background-size: 100px 100px;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-sidebarOfficialAccounts:hover .o-sidebarOfficialAccounts__action {
      background-color: #228d74;
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-sidebarOfficialAccounts__header {
    position: relative
  }

  .o-sidebarOfficialAccounts__title {
    -webkit-box-flex: 1;
    flex: 1;
    height: 100px;
    font-size: 16px
  }

  .o-sidebarOfficialAccounts__action,
  .o-sidebarOfficialAccounts__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 700;
    color: #fff
  }

  .o-sidebarOfficialAccounts__action {
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    background-color: #2cb696;
    border-radius: 4px;
    font-size: 12px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3b7cf6bb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3b7cf6bb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-sidebarSmallLinks__item {
    font-size: 12px
  }

  .m-sidebarSmallLinks__item+.m-sidebarSmallLinks__item {
    margin-left: 8px
  }

  .m-sidebarSmallLinks__link {
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .m-sidebarSmallLinks__link {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-sidebarSmallLinks__link:hover {
      color: #222
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-ea7568ae {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-ea7568ae {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-hashtagContestCard__header {
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px
  }

  .m-hashtagContestCard__header,
  .m-hashtagContestCard__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .m-hashtagContestCard__title {
    -webkit-box-flex: 1;
    flex: 1;
    flex-wrap: wrap
  }

  .m-hashtagContestCard__titleBody {
    font-size: 32px;
    font-weight: 700
  }

  .m-hashtagContestCard__titleBody:before {
    display: inline-block;
    content: "#"
  }

  .m-hashtagContestCard__titleLabel {
    margin-left: 8px
  }

  .m-hashtagContestCard__action {
    padding-left: 16px
  }

  .m-hashtagContestCard__actionItem {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .m-hashtagContestCard__actionItem:hover {
      color: #787c7b
    }
  }

  .m-hashtagContestCard__body,
  .m-hashtagContestCard__info {
    width: 100%
  }

  .m-hashtagContestCard__banner {
    width: 290px;
    margin-bottom: 8px
  }

  @media only screen and (max-width:479px) {
    .m-hashtagContestCard__banner {
      width: 100%
    }
  }

  .m-hashtagContestCard__image {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4px
  }

  .m-hashtagContestCard__imageBody {
    width: 100%;
    height: auto;
    vertical-align: top
  }

  .m-hashtagContestCard__message {
    margin-bottom: 16px;
    margin-left: 4px;
    font-size: 14px
  }

  .m-hashtagContestCard__messageMore {
    font-weight: 700;
    text-decoration: underline
  }

  .m-hashtagContestCard__regulation {
    margin-bottom: 16px;
    font-size: 12px;
    white-space: pre-line;
    -webkit-animation: contestRegulationAnimation-data-v-ea7568ae .2s cubic-bezier(1, 0, 0, 1);
    animation: contestRegulationAnimation-data-v-ea7568ae .2s cubic-bezier(1, 0, 0, 1)
  }

  @-webkit-keyframes contestRegulationAnimation-data-v-ea7568ae {
    0% {
      height: 0;
      opacity: 0
    }

    to {
      height: auto;
      opacity: 1
    }
  }

  @keyframes contestRegulationAnimation-data-v-ea7568ae {
    0% {
      height: 0;
      opacity: 0
    }

    to {
      height: auto;
      opacity: 1
    }
  }

  .m-hashtagContestCard__button {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-183e756a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-183e756a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-timelineHashtag__head {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 24px
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__head {
      margin: 0 16px
    }
  }

  .o-timelineHashtag__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    align-items: center
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__title {
      flex-wrap: wrap
    }
  }

  .o-timelineHashtag__titleLabel {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    word-break: break-all
  }

  .o-timelineHashtag__titleLabel:before {
    display: inline-block;
    content: "#"
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__titleLabel {
      width: 100%;
      font-size: 18px
    }
  }

  .o-timelineHashtag__titleLabel[data-has-contest=true] {
    font-size: 32px
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__titleLabel[data-has-contest=true] {
      font-size: 24px
    }
  }

  .o-timelineHashtag__tag {
    margin-left: 16px
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__tag {
      margin-top: 8px;
      margin-left: 0
    }
  }

  .o-timelineHashtag__rss {
    flex-shrink: 0;
    margin-left: 16px;
    color: #a8abb1
  }

  .o-timelineHashtag__num {
    margin-left: 16px;
    color: #787c7b;
    white-space: nowrap;
    font-size: 14px
  }

  @media only screen and (max-width:359px) {
    .o-timelineHashtag__num {
      margin-top: 8px;
      margin-left: 0;
      text-align: center
    }
  }

  .o-timelineHashtag__related {
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__related {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      margin-top: 8px;
      margin-bottom: 0;
      overflow: auto;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch
    }

    .o-timelineHashtag__related::-webkit-scrollbar {
      display: none
    }
  }

  .o-timelineHashtag__relatedTitle {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__relatedTitle {
      padding-right: 16px;
      padding-left: 16px;
      margin-bottom: 0;
      line-height: 1
    }
  }

  .o-timelineHashtag__relatedBody {
    display: -webkit-inline-box;
    display: inline-flex;
    flex-wrap: wrap
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__relatedBody {
      flex-wrap: nowrap;
      padding-right: 16px
    }
  }

  .o-timelineHashtag__relatedItem {
    margin-right: 4px;
    margin-bottom: 4px
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__relatedItem+.o-timelineHashtag__relatedItem {
      margin-right: 0;
      margin-left: 4px
    }
  }

  .o-timelineHashtag__contest {
    -webkit-box-flex: 0;
    flex: 0;
    margin-bottom: 32px
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__contest {
      padding-right: 16px;
      padding-left: 16px;
      margin-bottom: 24px
    }
  }

  .o-timelineHashtag__contestItem+.o-timelineHashtag__contestItem {
    margin-top: 8px
  }

  .o-timelineHashtag__contestImage {
    width: 100%;
    height: 100%
  }

  .o-timelineHashtag__nav {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  @media only screen and (max-width:479px) {
    .o-timelineHashtag__nav {
      padding: 8px 16px;
      background-color: #fff;
      border-top: 1px solid #f2f2f2;
      border-bottom: 1px solid #f2f2f2
    }
  }

  @media only screen and (max-width:359px) {
    .o-timelineHashtag__nav {
      display: block
    }
  }

  @media only screen and (max-width:359px) {
    .o-timelineHashtag__sort {
      -webkit-box-pack: center;
      justify-content: center
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0a581698 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0a581698 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-tabMenu__menu {
    display: -webkit-box;
    display: flex
  }

  .m-tabMenu__item {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border-bottom: 2px solid transparent
  }

  .m-tabMenu__item.is--active {
    border-bottom: 2px solid #222
  }

  .m-tabMenu__item.is--active .m-tabMenu__link {
    color: #222
  }

  .m-tabMenu__item.is--separate {
    position: relative;
    margin-left: 16px
  }

  .m-tabMenu__item.is--separate:before {
    position: absolute;
    top: 50%;
    left: -8px;
    display: block;
    width: 1px;
    height: 24px;
    content: "";
    background-color: #e6e6e6;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .m-tabMenu__link {
    display: block;
    padding: 16px;
    color: #a8abb1;
    white-space: nowrap
  }

  @media only screen and (min-width:769px) {
    .m-tabMenu__link:hover {
      color: #222
    }
  }

  @media only screen and (max-width:479px) {
    .m-tabMenu__link {
      padding: 12px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5bae35de {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5bae35de {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-userPromoteCard {
    width: 100%;
    padding: 16px;
    background-color: #f7f9f9;
    border-radius: 4px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-userPromoteCard {
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-pack: justify;
      justify-content: space-between
    }
  }

  @media only screen and (max-width:479px) {
    .m-userPromoteCard {
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      -webkit-box-pack: justify;
      justify-content: space-between
    }
  }

  .m-userPromoteCard__header {
    position: relative;
    display: -webkit-box;
    display: flex
  }

  .m-userPromoteCard__headIcon {
    height: 56px;
    margin-right: 8px;
    background-color: #f7f9f9
  }

  .m-userPromoteCard__title {
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 16px;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px
  }

  .m-userPromoteCard__close {
    position: absolute;
    top: -8px;
    right: -8px;
    color: #a8abb1
  }

  .m-userPromoteCard__description {
    font-size: 14px;
    color: #787c7b
  }

  @media only screen and (max-width:768px) {
    .m-userPromoteCard__description {
      -webkit-box-flex: 1;
      flex: 1
    }
  }

  @media only screen and (max-width:479px) {
    .m-userPromoteCard__description {
      font-size: 12px
    }
  }

  .m-userPromoteCard__body {
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0871202c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0871202c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-profilePromoteCard__item,
  .m-profilePromoteCard__textarea {
    margin-bottom: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-cc824f40 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-cc824f40 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-SettingProfileImageUserPromoteCard__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px
  }

  .m-SettingProfileImageUserPromoteCard__item:last-child {
    margin-bottom: 0
  }

  .m-SettingProfileImageUserPromoteCard__avatarSetting {
    position: relative;
    height: 68px;
    padding: 4px;
    cursor: pointer;
    border: 2px dotted #2cb696;
    border-radius: 50%
  }

  .m-SettingProfileImageUserPromoteCard__avatarSettingOverlay {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    background-color: rgba(34, 34, 34, .5);
    border-radius: 50%
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-654864d3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-654864d3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-welcomeBeginnerUserPromoteCard__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 16px
  }

  .m-welcomeBeginnerUserPromoteCard__item:last-child {
    margin-bottom: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4c24baae {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4c24baae {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-userPromote {
      position: relative;
      margin-bottom: 32px
    }
  }

  @media only screen and (max-width:479px) {
    .o-userPromote {
      position: relative
    }
  }

  .o-userPromote.is-tabletSp .o-userPromote__item {
    min-width: 290px
  }

  @media only screen and (max-width:768px) {
    .o-userPromote__body {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      padding: 8px
    }
  }

  .o-userPromote__item {
    display: -webkit-box;
    display: flex;
    margin-bottom: 16px
  }

  .o-userPromote__item:last-child {
    margin-bottom: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7e3cbf08 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7e3cbf08 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-categoryList__heading {
    margin-bottom: 16px;
    font-weight: 700
  }

  @media only screen and (max-width:479px) {
    .m-categoryList__heading {
      margin-bottom: 8px
    }
  }

  .m-categoryList__item {
    padding: 4px 0;
    border-bottom: 1px solid #f2f2f2
  }

  .m-categoryList__item:last-child {
    border-bottom: 0
  }

  .m-categoryList__itemLink {
    position: relative;
    display: block;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-categoryList__itemLink:hover:after {
      position: absolute;
      top: 0;
      right: -8px;
      bottom: 0;
      left: -8px;
      z-index: -1;
      content: "";
      background-color: #f7f9f9;
      border-radius: 4px
    }
  }

  .m-categoryList__itemLink.active {
    color: #2cb696
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-b966649c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-b966649c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-notificationListItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    padding: 16px
  }

  @media only screen and (min-width:769px) {
    .m-notificationListItem:hover {
      background-color: #f7f9f9
    }
  }

  .m-notificationListItem--webview .m-notificationListItem__date {
    position: absolute;
    top: 0;
    right: 16px;
    margin-top: 16px
  }

  @media only screen and (max-width:479px) {
    .m-notificationListItem--webview .m-notificationListItem__date {
      position: static;
      top: auto;
      right: auto;
      margin-top: 8px
    }
  }

  .m-notificationListItem--webview .m-notificationListItem__body {
    margin-right: 48px
  }

  @media only screen and (max-width:479px) {
    .m-notificationListItem--webview .m-notificationListItem__body {
      margin-right: 0
    }
  }

  .m-notificationListItem__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
  }

  .m-notificationListItem__featured {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 0;
    flex: 0 0 32px;
    height: 100%
  }

  .m-notificationListItem__featuredLink {
    display: block
  }

  .m-notificationListItem__featuredIcon {
    width: 32px;
    height: 32px;
    -o-object-fit: cover;
    object-fit: cover;
    background-color: transparent;
    border-radius: 4px
  }

  .m-notificationListItem__actionUser {
    display: -webkit-box;
    display: flex;
    margin-bottom: 4px
  }

  .m-notificationListItem__actionUserItem {
    position: relative;
    z-index: 3
  }

  .m-notificationListItem__actionUserItem+.m-notificationListItem__actionUserItem {
    margin-left: 4px
  }

  .m-notificationListItem__body {
    margin-left: 16px;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .m-notificationListItem__message {
    font-size: 12px;
    line-height: 1.5;
    color: #222;
    word-break: break-all
  }

  @media only screen and (max-width:479px) {
    .m-notificationListItem__message {
      font-size: 14px
    }
  }

  .m-notificationListItem__message a {
    position: relative;
    z-index: 3;
    font-weight: 700;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .m-notificationListItem__message a:hover {
      text-decoration: none
    }
  }

  .m-notificationListItem__date {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1;
    color: #a8abb1
  }

  .m-notificationListItem .welcomSub {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.5;
    color: #787c7b
  }

  @media only screen and (max-width:479px) {
    .m-notificationListItem .welcomSub {
      font-size: 14px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5e53fa46 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5e53fa46 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-notificationList {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch
  }

  .m-notificationList__item {
    display: -webkit-box;
    display: flex;
    padding: 16px
  }

  .m-notificationList__item+.m-notificationList__item {
    border-top: 1px solid #f2f2f2
  }

  .m-notificationList__item--empty {
    color: #787c7b;
    white-space: nowrap;
    font-size: 14px
  }

  .loading,
  .m-notificationList__item--empty,
  .m-notificationList__item--loading {
    -webkit-box-pack: center;
    justify-content: center
  }

  .loading {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%
  }

  .loading__item {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    margin-left: 4px;
    background-color: #222;
    border-radius: 8px;
    opacity: .3
  }

  .loading__item:first-child {
    -webkit-animation: loadingAnimation-data-v-5e53fa46 2s ease-in-out infinite;
    animation: loadingAnimation-data-v-5e53fa46 2s ease-in-out infinite
  }

  .loading__item:nth-child(2) {
    -webkit-animation: loadingAnimation-data-v-5e53fa46 2s ease-in-out 666ms infinite;
    animation: loadingAnimation-data-v-5e53fa46 2s ease-in-out 666ms infinite
  }

  .loading__item:nth-child(3) {
    -webkit-animation: loadingAnimation-data-v-5e53fa46 2s ease-in-out 1.3s infinite;
    animation: loadingAnimation-data-v-5e53fa46 2s ease-in-out 1.3s infinite
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-07113d55 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-07113d55 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-pulldown {
    position: relative
  }

  .m-pulldown__body {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 1000;
    min-width: 180px;
    overflow: auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(34, 34, 34, .25), 0 0 1px rgba(34, 34, 34, .35);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-overflow-scrolling: touch
  }

  .m-pulldown__body:before {
    content: ""
  }

  @media only screen and (max-width:479px) {
    .m-pulldown__body {
      position: fixed;
      top: 48px;
      left: 0;
      width: 100%;
      height: calc(100vh - 48px);
      height: calc(var(--ih, 1vh)*100 - 48px);
      border-radius: 0;
      -webkit-transform: translate(0);
      transform: translate(0)
    }

    .m-pulldown__body:before {
      display: none
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-38c36389 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-38c36389 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .p-draftNoteList {
    border-top: 1px solid #f2f2f2
  }

  @media only screen and (max-width:479px) {
    .p-draftNoteList {
      padding-bottom: 32px
    }
  }

  .p-draftNoteList__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 32px 32px 8px
  }

  .p-draftNoteList__caption {
    font-size: 12px;
    font-weight: 700;
    color: #222
  }

  .p-draftNoteList__noteList {
    font-size: 12px;
    text-align: right
  }

  .p-draftNoteList__noteList>a {
    color: #2cb696
  }

  @media only screen and (min-width:769px) {
    .p-draftNoteList__noteList>a:hover {
      color: #2cb696
    }
  }

  .p-draftNoteList__body {
    padding-bottom: 16px
  }

  .p-draftNoteList__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 16px 32px;
    color: #787c7b;
    text-align: left
  }

  @media only screen and (min-width:769px) {
    .p-draftNoteList__link:hover {
      color: #222;
      background-color: #f7f9f9
    }
  }

  @media only screen and (max-width:479px) {
    .p-draftNoteList__link {
      padding: 8px 32px
    }
  }

  .p-draftNoteList__title {
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 300px;
    overflow: hidden;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px
  }

  @media only screen and (min-width:769px) {
    .p-draftNoteList__title:hover {
      color: #222
    }
  }

  .p-draftNoteList__date {
    padding-left: 16px;
    color: #a8abb1;
    font-size: 12px;
    white-space: nowrap
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-8499e516 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-8499e516 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  li {
    list-style: none
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-187effa5 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-187effa5 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (min-width:769px) {
    .o-kaizenNoticeNavbar {
      cursor: pointer
    }

    .o-kaizenNoticeNavbar:hover {
      background-color: #f7f9f9
    }
  }

  .o-kaizenNoticeNavbar .o-kaizenNotice__container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-e5ac770c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e5ac770c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-actionItemsField {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-actionItemsField__actionItemButton {
    position: relative;
    margin-left: 16px
  }

  .o-actionItemsField__actionItem {
    margin-left: 16px;
    color: #a8abb1;
    white-space: nowrap
  }

  @media only screen and (min-width:769px) {
    .o-actionItemsField__actionItem {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-actionItemsField__actionItem:hover {
      color: #787c7b
    }
  }

  .o-actionItemsField__followIcon {
    margin-right: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-a5db5360 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-a5db5360 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorMenu {
    width: 100%;
    background-color: #fff
  }

  .o-creatorMenu--bottomBorder,
  .o-creatorMenu--topic {
    border-bottom: 1px solid #e6e6e6
  }

  .o-creatorMenu--topic {
    margin-top: -1px
  }

  .o-creatorMenu--topic .o-creatorMenu__inner {
    max-width: none;
    padding: 0 24px 0 8px;
    border-top: none;
    border-bottom: none
  }

  @media only screen and (max-width:479px) {
    .o-creatorMenu--topic .o-creatorMenu__inner {
      padding: 0 16px 0 0
    }
  }

  .o-creatorMenu__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: top;
    align-items: top;
    max-width: 940px;
    margin: 0 auto;
    border-top: 1px solid #f2f2f2
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-creatorMenu__inner {
      width: 100%;
      padding: 0 0 0 8px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorMenu__inner {
      width: 100%;
      padding: 0 0 0 8px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorMenu__inner {
      width: 100%
    }
  }

  .o-creatorMenu__nav {
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
  }

  .o-creatorMenu__nav::-webkit-scrollbar {
    display: none
  }

  .o-creatorMenu__nav:before {
    position: absolute;
    top: 2px;
    right: 0;
    z-index: 1;
    width: 32px;
    height: 98%;
    content: "";
    background: -webkit-linear-gradient(right, #fff 50%, hsla(0, 0%, 100%, 0));
    background: linear-gradient(270deg, #fff 50%, hsla(0, 0%, 100%, 0))
  }

  @media only screen and (max-width:768px) {
    .o-creatorMenu__nav:before {
      display: none
    }
  }

  .o-creatorMenu__navBody {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .o-creatorMenu__navBody::-webkit-scrollbar {
    display: none
  }

  .o-creatorMenu__navItem {
    white-space: nowrap
  }

  @media only screen and (max-width:479px) {
    .o-creatorMenu__navItem:first-child {
      margin-left: 8px
    }
  }

  .o-creatorMenu__navItem:last-child {
    padding-right: 32px
  }

  .o-creatorMenu__navLink {
    position: relative;
    display: block;
    padding: 24px 16px;
    font-size: 14px;
    line-height: 1
  }

  @media only screen and (max-width:479px) {
    .o-creatorMenu__navLink {
      padding: 16px 8px;
      font-size: 12px
    }
  }

  @media only screen and (min-width:769px) {
    .o-creatorMenu__navLink:hover:before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      content: "";
      background-color: #222
    }
  }

  .o-creatorMenu__navLink.is-active {
    font-weight: 700
  }

  .o-creatorMenu__navLink.is-active:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #222
  }

  .o-creatorMenu__option {
    display: none
  }

  @media only screen and (min-width:769px) {
    .o-creatorMenu__option {
      display: block
    }
  }

  .o-creatorMenu__optionLink {
    position: relative;
    display: block;
    padding: 24px 16px;
    font-size: 14px;
    line-height: 1
  }

  @media only screen and (max-width:479px) {
    .o-creatorMenu__optionLink {
      padding: 16px;
      font-size: 12px
    }
  }

  @media only screen and (min-width:769px) {
    .o-creatorMenu__optionLink:hover:before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      content: "";
      background-color: #222
    }
  }

  .o-creatorMenu__optionLink.is-active {
    font-weight: 700
  }

  .o-creatorMenu__optionLink.is-active:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #222
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-51e1adc6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-51e1adc6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-followRecommend__title {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-followRecommend__title {
      margin-left: 128px
    }
  }

  .o-followRecommend__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-followRecommend__body {
      width: calc(100% + 48px);
      margin-left: -24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-followRecommend__body {
      width: calc(100% + 32px);
      margin-left: -16px
    }
  }

  .o-followRecommend__body:after {
    display: block;
    padding-left: 1px;
    content: ""
  }

  .o-followRecommend__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    width: 20%
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-followRecommend__item {
      width: 160px;
      min-width: 160px
    }
  }

  @media only screen and (max-width:479px) {
    .o-followRecommend__item {
      width: 160px;
      min-width: 160px
    }
  }

  .o-followRecommend__item+.o-followRecommend__item {
    margin-left: 8px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-followRecommend__item:first-child {
      margin-left: 152px
    }
  }

  @media only screen and (max-width:479px) {
    .o-followRecommend__item:first-child {
      margin-left: 16px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-followRecommend__item:last-child {
      margin-right: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-followRecommend__item:last-child {
      margin-right: 16px
    }
  }


  /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
  .pswp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    outline: none
  }

  .pswp * {
    box-sizing: border-box
  }

  .pswp img {
    max-width: none
  }

  .pswp--animate_opacity {
    opacity: .001;
    will-change: opacity;
    -webkit-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
    transition: opacity 333ms cubic-bezier(.4, 0, .22, 1)
  }

  .pswp--open {
    display: block
  }

  .pswp--zoom-allowed .pswp__img {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in
  }

  .pswp--zoomed-in .pswp__img {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab
  }

  .pswp--dragging .pswp__img {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing
  }

  .pswp__bg {
    background: #000;
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden
  }

  .pswp__bg,
  .pswp__scroll-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
  }

  .pswp__scroll-wrap {
    overflow: hidden
  }

  .pswp__container,
  .pswp__zoom-wrap {
    touch-action: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
  }

  .pswp__container,
  .pswp__img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
  }

  .pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transition: -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1);
    transition: -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1);
    transition: transform 333ms cubic-bezier(.4, 0, .22, 1);
    transition: transform 333ms cubic-bezier(.4, 0, .22, 1), -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1)
  }

  .pswp__bg {
    will-change: opacity;
    -webkit-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
    transition: opacity 333ms cubic-bezier(.4, 0, .22, 1)
  }

  .pswp--animated-in .pswp__bg,
  .pswp--animated-in .pswp__zoom-wrap {
    -webkit-transition: none;
    transition: none
  }

  .pswp__container,
  .pswp__zoom-wrap {
    -webkit-backface-visibility: hidden
  }

  .pswp__item {
    right: 0;
    bottom: 0;
    overflow: hidden
  }

  .pswp__img,
  .pswp__item {
    position: absolute;
    left: 0;
    top: 0
  }

  .pswp__img {
    width: auto;
    height: auto
  }

  .pswp__img--placeholder {
    -webkit-backface-visibility: hidden
  }

  .pswp__img--placeholder--blank {
    background: #222
  }

  .pswp--ie .pswp__img {
    width: 100% !important;
    height: auto !important;
    left: 0;
    top: 0
  }

  .pswp__error-msg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    margin-top: -8px;
    color: #ccc
  }

  .pswp__error-msg a {
    color: #ccc;
    text-decoration: underline
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-764a4404 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-764a4404 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .pswp {
    pointer-events: auto
  }

  .pswp [data-shape=round] .pswp__img {
    border-radius: 50%
  }

  .pswp .pswp__img,
  .pswp__bg {
    background-color: #fff
  }

  @media only screen and (min-width:769px) {
    .pswp__container {
      top: -22px
    }
  }

  .pswp__top-bar {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    padding: 16px
  }

  .pswp__button {
    display: block;
    width: 40px;
    height: 40px;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none
  }

  @media only screen and (min-width:769px) {
    .pswp__button {
      -webkit-transition: color .2s;
      transition: color .2s
    }
  }

  .pswp__button:focus,
  .pswp__button:hover {
    opacity: 1
  }

  .pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0
  }

  .pswp__button--close {
    z-index: 1;
    color: #a8abb1;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .pswp__button--close {
      -webkit-transition: color .2s;
      transition: color .2s
    }

    .pswp__button--close:hover {
      color: #787c7b
    }
  }

  .pswp__button--arrow--left {
    position: absolute;
    top: 50%;
    right: auto;
    left: 16px;
    margin-top: -16px;
    color: #a8abb1;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .pswp__button--arrow--left {
      -webkit-transition: color .2s;
      transition: color .2s
    }

    .pswp__button--arrow--left:hover {
      color: #787c7b
    }
  }

  @media only screen and (max-width:479px) {
    .pswp__button--arrow--left {
      display: none
    }
  }

  .pswp__button--arrow--right {
    position: absolute;
    top: 50%;
    right: 16px;
    left: auto;
    margin-top: -16px;
    color: #a8abb1;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .pswp__button--arrow--right {
      -webkit-transition: color .2s;
      transition: color .2s
    }

    .pswp__button--arrow--right:hover {
      color: #787c7b
    }
  }

  @media only screen and (max-width:479px) {
    .pswp__button--arrow--right {
      display: none
    }
  }

  .pswp__buttonIcon {
    pointer-events: none
  }

  .pswp__img {
    background-color: #fff
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-31b0bbb7 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-31b0bbb7 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-profileBiography {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
  }

  .m-profileBiography a {
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .m-profileBiography a:hover {
      text-decoration: none
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-e613d2ca {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e613d2ca {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-creatorSocialLinks {
    display: -webkit-box;
    display: flex
  }

  .m-creatorSocialLinks__item {
    margin-right: 8px;
    color: #a8abb1
  }

  @media only screen and (max-width:479px) {
    .m-creatorSocialLinks__item {
      margin-right: 0
    }

    .m-creatorSocialLinks__item+.m-creatorSocialLinks__item {
      margin-left: 8px
    }
  }

  @media only screen and (min-width:769px) {
    .m-creatorSocialLinks__item {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-creatorSocialLinks__item:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-91800000 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-91800000 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-profileStatus__status {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 128px
  }

  @media only screen and (max-width:479px) {
    .m-profileStatus__status {
      -webkit-box-pack: justify;
      justify-content: space-between;
      padding-left: 0
    }
  }

  .m-profileStatus__follow {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    white-space: nowrap
  }

  .m-profileStatus__follow:after {
    font-size: 14px;
    margin-right: 8px;
    color: #787c7b;
    /*content: "・"*/
  }

  @media only screen and (max-width:479px) {
    .m-profileStatus__follow:after {
      display: none
    }
  }

  .m-profileStatus__followLink {
    margin-right: 8px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .m-profileStatus__followLink .m-profileStatus__followLabel {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-profileStatus__followLink .m-profileStatus__followLabel:hover {
      color: #222
    }
  }

  .m-profileStatus__followCount {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222
  }

  @media only screen and (max-width:479px) {
    .m-profileStatus__followCount {
      font-size: 14px
    }
  }

  .m-profileStatus__followLabel {
    font-size: 14px;
    line-height: 1.5;
    color: #787c7b
  }

  @media only screen and (max-width:479px) {
    .m-profileStatus__followLabel {
      font-size: 12px
    }
  }

  .m-profileStatus__onlyVisibleToYou {
    display: inline-block;
    padding: 4px 8px;
    margin-left: 8px;
    font-weight: 400;
    color: #a8abb1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 10px
  }

  .m-profileStatus__social {
    margin-top: 8px;
    margin-bottom: 8px
  }

  .m-profileStatus__social:empty {
    display: none
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-347e956a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-347e956a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorProfile {
    background-color: #fff
  }

  @media only screen and (min-width:769px) {
    .o-creatorProfile--topic {
      display: none
    }
  }

  .o-creatorProfile--topic .o-creatorProfile__profile {
    padding-top: 0;
    margin-bottom: 0
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile--topic .o-creatorProfile__content {
      padding-bottom: 0
    }
  }

  .o-creatorProfile__header {
    padding-top: 16.875%
  }

  .o-creatorProfile__header,
  .o-creatorProfile__headerNewstyle {
    position: relative;
    width: 100%;
    max-height: 700px;
    overflow: hidden
  }

  .o-creatorProfile__headerNewstyle {
    height: 0;
    padding-top: 16.9%
  }

  .o-creatorProfile__headerImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
  }

  .o-creatorProfile__content {
    max-width: 940px;
    padding: 32px 0;
    margin: 0 auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-creatorProfile__content {
      padding-right: 16px;
      padding-left: 16px
    }
  }

  @media only screen and (max-width:768px) {
    .o-creatorProfile__content {
      width: 100%
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfile__content {
      padding-right: 24px;
      padding-left: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__content {
      padding: 16px
    }
  }

  .o-creatorProfile__content--none_header {
    padding-top: 48px;
    padding-bottom: 48px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfile__content--none_header {
      padding-top: 32px;
      padding-bottom: 32px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__content--none_header {
      padding-top: 16px;
      padding-bottom: 16px
    }
  }

  .o-creatorProfile__contentInner,
  .o-creatorProfile__profile {
    position: relative;
    width: 100%
  }

  .o-creatorProfile__profile {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-left: 128px;
    margin-bottom: 8px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__profile {
      padding-top: 80px;
      padding-left: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__action {
      position: absolute;
      top: 24px;
      right: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__action--topic {
      position: static;
      top: auto;
      right: auto
    }
  }

  .o-creatorProfile__biography {
    padding-left: 128px;
    margin-bottom: 8px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__biography {
      padding-left: 0
    }
  }

  .o-creatorProfile__recommend {
    width: 100%;
    padding-left: 128px;
    margin-top: 32px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfile__recommend {
      padding-left: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__recommend {
      padding-left: 0
    }
  }

  .o-creatorProfile__recommend-enter-active,
  .o-creatorProfile__recommend-leave-active {
    max-height: 500px;
    opacity: 1;
    -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;
    transition: max-height .3s ease-in, opacity .3s ease-in
  }

  .o-creatorProfile__recommend-enter,
  .o-creatorProfile__recommend-leave-to {
    max-height: 0;
    overflow: hidden;
    opacity: 0
  }

  .o-creatorProfile__onboarding {
    margin-top: 32px
  }

  .o-creatorProfile__onboarding:empty {
    display: none
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__onboarding {
      margin: 0 -16px
    }
  }

  .o-creatorProfile__avatar {
    position: absolute;
    top: -18px;
    left: 0;
    width: 104px;
    height: 104px;
    cursor: pointer
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-creatorProfile__avatar {
      top: -8px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfile__avatar {
      top: -8px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__avatar {
      top: 0;
      width: 72px;
      height: 72px
    }
  }

  .o-creatorProfile__name {
    font-weight: 700;
    line-height: 1.5;
    word-break: break-all;
    font-size: 22px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__name {
      font-size: 16px
    }
  }

  .o-creatorProfile__nameLabel {
    display: inline;
    vertical-align: middle
  }

  .o-creatorProfile__official {
    display: inline-block;
    max-height: 16px;
    vertical-align: middle
  }

  .o-creatorProfile__follower {
    display: inline-block;
    padding: 4px 8px;
    margin-left: 8px;
    font-weight: 400;
    color: #a8abb1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 10px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__follower {
      padding: 2px 8px
    }
  }

  .o-creatorProfile__onlyVisibleToYou {
    display: inline-block;
    padding: 4px 8px;
    margin-left: 128px;
    font-weight: 400;
    color: #a8abb1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f7f9f9;
    border-radius: 4px;
    font-size: 10px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__onlyVisibleToYou {
      padding: 2px 8px;
      margin-left: 0
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-33a2d172 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-33a2d172 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorProfileNourlname {
    background-color: #fff
  }

  .o-creatorProfileNourlname__content {
    max-width: 940px;
    padding: 32px 0;
    margin: 0 auto
  }

  @media only screen and (max-width:768px) {
    .o-creatorProfileNourlname__content {
      width: 100%
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfileNourlname__content {
      padding: 32px 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__content {
      padding: 16px
    }
  }

  .o-creatorProfileNourlname__content--none_header {
    padding-top: 48px;
    padding-bottom: 48px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfileNourlname__content--none_header {
      padding-top: 32px;
      padding-bottom: 32px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__content--none_header {
      padding-top: 16px;
      padding-bottom: 16px
    }
  }

  .o-creatorProfileNourlname__contentInner {
    position: relative;
    width: 100%
  }

  .o-creatorProfileNourlname__profile {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-left: 128px;
    margin-bottom: 8px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__profile {
      padding-top: 80px;
      padding-left: 0
    }
  }

  .o-creatorProfileNourlname__avatar {
    position: absolute;
    top: -18px;
    left: 0;
    width: 104px;
    height: 104px;
    cursor: pointer
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-creatorProfileNourlname__avatar {
      top: -8px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfileNourlname__avatar {
      top: -8px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__avatar {
      top: 0;
      width: 72px;
      height: 72px
    }
  }

  .o-creatorProfileNourlname__name {
    font-weight: 700;
    line-height: 1.5;
    word-break: break-all;
    font-size: 22px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__name {
      font-size: 16px
    }
  }

  .o-creatorProfileNourlname__nameLabel {
    display: inline;
    vertical-align: middle
  }

  .o-creatorProfileNourlname__official {
    display: inline;
    color: #2cb696;
    vertical-align: middle
  }

  .o-creatorProfileNourlname__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__action {
      position: absolute;
      top: 20px;
      right: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__action--none_header {
      top: -16px
    }
  }

  .o-creatorProfileNourlname__actionItem {
    position: relative;
    margin-left: 16px;
    color: #a8abb1;
    white-space: nowrap
  }

  @media only screen and (min-width:769px) {
    .o-creatorProfileNourlname__actionItem {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorProfileNourlname__actionItem:hover {
      color: #787c7b
    }
  }

  .o-creatorProfileNourlname__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .5);
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .o-creatorProfileNourlname__overlay {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-creatorProfileNourlname__overlay:hover {
      background-color: rgba(34, 34, 34, .8)
    }
  }

  .o-creatorProfileNourlname__nickname {
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    padding-left: 128px;
    margin-bottom: 8px
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__nickname {
      padding-top: 56px;
      padding-left: 0
    }
  }

  .o-creatorProfileNourlname__description {
    font-size: 14px;
    padding-left: 128px;
    margin-bottom: 16px;
    font-weight: 400;
    line-height: 1.5
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfileNourlname__description {
      padding-left: 0;
      margin-bottom: 8px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3e536ef2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3e536ef2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .t-creator {
    position: relative
  }

  .t-creator--background {
    background-color: #f7f9f9
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-creator--background {
      background-color: #fff
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-creator--background {
      background-color: #fff
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-12b4c512 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-12b4c512 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .p-creator--background {
    background-color: #f7f9f9
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-26be1ac8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-26be1ac8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-addMagazine__icon {
    color: #a8abb1;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .o-addMagazine__icon {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-addMagazine__icon:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-49213f55 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-49213f55 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-shareBalloon {
    position: absolute;
    bottom: 56px;
    width: 90%;
    margin: 0 5%
  }

  .m-shareBalloon.mobile {
    bottom: 60px;
    width: 201px;
    margin: 0
  }

  .m-shareBalloon.mobile .m-shareBalloon__balloon:before {
    left: 76px
  }

  .m-shareBalloon__wrapper {
    visibility: hidden;
    opacity: 0;
    -webkit-transform-origin: 0 bottom;
    transform-origin: 0 bottom
  }

  .m-shareBalloon__wrapper.is-shown {
    -webkit-animation: shareBalloon-data-v-49213f55 9s 0ms;
    animation: shareBalloon-data-v-49213f55 9s 0ms
  }

  @-webkit-keyframes shareBalloon-data-v-49213f55 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    2% {
      opacity: 0;
      -webkit-transform: translateY(16px);
      transform: translateY(16px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    3% {
      -webkit-transform: translateY(16px);
      transform: translateY(16px)
    }

    3% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    5% {
      -webkit-transform: translateY(6px);
      transform: translateY(6px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    6% {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    91.66667% {
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    94.44444% {
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    97.22222% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(20px) scale(.95);
      transform: translateY(20px) scale(.95);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }

  @keyframes shareBalloon-data-v-49213f55 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    2% {
      opacity: 0;
      -webkit-transform: translateY(16px);
      transform: translateY(16px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    3% {
      -webkit-transform: translateY(16px);
      transform: translateY(16px)
    }

    3% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    5% {
      -webkit-transform: translateY(6px);
      transform: translateY(6px);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }

    6% {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    91.66667% {
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }

    94.44444% {
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    97.22222% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }

    to {
      opacity: 0;
      -webkit-transform: translateY(20px) scale(.95);
      transform: translateY(20px) scale(.95);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }

  .m-shareBalloon__balloon {
    position: relative;
    color: #fff;
    text-align: left;
    background-color: #2cb696;
    border: 1px solid #2cb696;
    border-radius: 4px
  }

  .m-shareBalloon__balloon:before {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #2cb696;
    box-shadow: 1px 1px 0 0 #2cb696
  }

  .m-shareBalloon__balloon--tailPosition_bottom:before {
    bottom: -12px;
    left: 50%;
    -webkit-transform: translate(-6px, -6px) rotate(45deg);
    transform: translate(-6px, -6px) rotate(45deg)
  }

  .m-shareBalloon__body {
    position: relative;
    padding: 16px
  }

  .m-shareBalloon__message {
    font-weight: 700;
    font-size: 12px
  }

  .m-shareBalloon__close {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #e6e6e6
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-419b8b18 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-419b8b18 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-socialPlugin {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: -16px
  }

  .m-socialPlugin__item {
    color: #a8abb1;
    text-align: center;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .m-socialPlugin__item {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-socialPlugin__item:hover {
      color: #787c7b
    }
  }

  @media only screen and (min-width:769px) {
    .m-socialPlugin__item--copy:hover {
      color: #8d9199
    }
  }

  .m-socialPlugin__item--twitter {
    color: #55acee
  }

  @media only screen and (min-width:769px) {
    .m-socialPlugin__item--twitter:hover {
      color: #2795e9
    }
  }

  .m-socialPlugin__item--facebook {
    color: #1877f2
  }

  @media only screen and (min-width:769px) {
    .m-socialPlugin__item--facebook:hover {
      color: #0b5fcc
    }
  }

  .m-socialPlugin__item--line {
    color: #06c755
  }

  @media only screen and (min-width:769px) {
    .m-socialPlugin__item--line:hover {
      color: #059540
    }
  }

  .m-socialPlugin__item--post {
    color: #2cb696
  }

  @media only screen and (min-width:769px) {
    .m-socialPlugin__item--post:hover {
      color: #228d74
    }
  }

  .m-socialPlugin__link {
    display: block;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    line-height: 56px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-689c5df1 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-689c5df1 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-socialShare__icon {
    color: #a8abb1;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .o-socialShare__icon {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-socialShare__icon:hover {
      color: #787c7b
    }
  }

  .o-socialShare__itemIcon {
    margin-right: 8px
  }

  .o-socialShare__link {
    display: -webkit-box;
    display: flex;
    justify-items: center;
    padding: 8px 16px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-socialShare__link:hover {
      color: #222;
      background-color: #f7f9f9
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0120f54c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0120f54c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-recommendNote__actionsIcon {
    position: relative;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .m-recommendNote__actionsIcon {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-recommendNote__actionsIcon:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-333ac373 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-333ac373 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-adminMenu__flag {
    color: #a8abb1
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-a24f4c2a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-a24f4c2a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-actionControl {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-actionControl {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-actionControl {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-actionControl__item {
    margin-right: 32px
  }

  .o-actionControl__item--social {
    margin-right: 0;
    margin-left: auto;
    font-weight: 700
  }

  @media only screen and (max-width:479px) {
    .o-actionControl__item--social {
      display: none
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-42013b27 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-42013b27 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-warningMessage {
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    background-color: #f7f9f9;
    border-radius: 4px
  }

  .m-warningMessage,
  .m-warningMessage__body,
  .m-warningMessage__image {
    display: -webkit-box;
    display: flex
  }

  .m-warningMessage__image {
    flex-shrink: 1;
    -webkit-box-align: center;
    align-items: center;
    padding-right: 10px
  }

  .m-warningMessage__content {
    -webkit-box-flex: 1;
    flex-grow: 1
  }

  .m-warningMessage__title {
    font-size: 14px;
    font-weight: 700
  }

  .m-warningMessage__icon {
    display: inline-block;
    color: #f95;
    vertical-align: middle
  }

  .m-warningMessage__message {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all
  }

  .m-warningMessage__action {
    margin-left: 16px
  }

  @media only screen and (max-width:479px) {
    .m-warningMessage__action {
      margin-top: 8px;
      margin-left: 0
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-00d65900 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-00d65900 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-articleTopNotices__message {
    margin-top: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-articleTopNotices__message:first-child {
      margin: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-articleTopNotices__message {
      display: block
    }

    .o-articleTopNotices__message:first-child {
      margin: 0
    }
  }

  .o-articleTopNotices__onboarding {
    margin-top: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-articleTopNotices__onboarding {
      margin: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .o-articleTopNotices__onboarding {
      margin: 16px
    }
  }

  .o-articleTopNotices__spoilerImage {
    width: 70px
  }

  @media only screen and (max-width:479px) {
    .o-articleTopNotices__spoilerImage {
      width: 56px
    }
  }

  .o-articleTopNotices__description a {
    text-decoration: underline
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7b161205 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7b161205 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-bar {
    padding: 32px 8px;
    margin-bottom: 32px;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .m-bar {
      padding: 16px
    }
  }

  .m-bar--type_caution {
    color: #fff;
    background-color: #f95
  }

  .m-bar--type_alert {
    color: #fff;
    background-color: #ed4956
  }

  @media only screen and (max-width:479px) {
    .m-bar--type_alert {
      text-align: left
    }
  }

  .m-bar--type_draft {
    color: #222;
    background-color: #f2f2f2
  }

  .m-bar__title {
    padding-bottom: 8px;
    font-size: 14px
  }

  .m-bar__title:empty {
    display: none
  }

  .m-bar__text {
    font-size: 14px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-60b199c2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-60b199c2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-commentArea__alertLabel {
    font-size: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
    line-height: 1.5;
    color: #787c7b;
    border-top: 1px solid #f2f2f2
  }

  .o-commentArea__alertLabel--noborder {
    border-top: none
  }

  .o-commentArea__alertLink {
    font-size: 14px;
    line-height: 1.5;
    color: #2cb696;
    color: var(--customPrimaryColor)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-167f7f92 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-167f7f92 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-commentArea__container {
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-commentArea__container {
      width: auto;
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__container {
      width: auto;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-commentArea__title {
    font-size: 14px;
    margin-top: 32px;
    margin-bottom: 16px;
    font-weight: 700
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__title {
      margin-top: 16px
    }
  }

  .o-commentArea__more {
    margin-top: 16px;
    margin-bottom: 16px
  }

  .o-commentArea__name {
    width: auto;
    padding-right: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .o-commentArea__nameLink {
    font-size: 14px;
    font-weight: 700;
    color: #222
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__nameLink {
      font-size: 12px
    }
  }

  .o-commentArea__status {
    display: -webkit-box;
    display: flex
  }

  .o-commentArea__date,
  .o-commentArea__likeCount {
    font-size: 12px;
    display: block;
    line-height: 1;
    color: #787c7b
  }

  .o-commentArea__likeCount:before {
    margin-right: 4px;
    margin-left: 4px;
    content: "・"
  }

  .o-commentArea__likeLink {
    margin-left: 4px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-commentArea__likeLink:hover {
      color: #222;
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-commentArea__message {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #222
  }

  .o-commentArea__message a {
    color: #787c7b;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .o-commentArea__message a:hover {
      text-decoration: none
    }
  }

  .o-commentArea__item {
    position: relative;
    padding-bottom: 24px;
    padding-left: 48px
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__item {
      padding-bottom: 16px;
      padding-left: 48px
    }
  }

  .o-commentArea__item--edit .o-commentArea__input {
    padding-left: 0
  }

  .o-commentArea__action {
    position: absolute;
    top: 8px;
    right: 0;
    display: -webkit-box;
    display: flex
  }

  .o-commentArea__actionPopover {
    position: relative
  }

  .o-commentArea__actionIcon {
    margin-left: 16px;
    color: #a8abb1;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .o-commentArea__actionIcon {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-commentArea__actionIcon:hover {
      color: #787c7b
    }
  }

  .o-commentArea__actionIcon.is-disabled {
    pointer-events: none;
    cursor: auto;
    opacity: .5
  }

  .o-commentArea__actionIcon--like.is-active {
    color: #ea3f60
  }

  .o-commentArea__avatar {
    position: absolute;
    top: 4px;
    left: 0;
    display: block;
    border-radius: 50%
  }

  .o-commentArea__add {
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid #e6e6e6
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__add {
      padding-top: 16px;
      padding-bottom: 16px
    }
  }

  .o-commentArea__add.is-empty {
    border: none
  }

  .o-commentArea__input {
    position: relative;
    box-sizing: border-box;
    padding-left: 48px;
    -webkit-transition: padding-bottom .15s ease-in-out;
    transition: padding-bottom .15s ease-in-out
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__input {
      padding-left: 48px
    }
  }

  .o-commentArea__input.is-active {
    padding-bottom: 48px
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__input.is-active {
      padding-bottom: 40px
    }
  }

  .o-commentArea__inputAvatar {
    position: absolute;
    top: 4px;
    left: 0
  }

  .o-commentArea__inputMessage {
    height: 32px;
    min-height: 32px;
    margin-top: 8px;
    resize: none;
    font-size: 14px
  }

  .o-commentArea__inputAction {
    display: -webkit-box;
    display: flex;
    margin-top: 8px
  }

  .o-commentArea__inputAction.is-active {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out
  }

  .o-commentArea__inputAction--edit {
    position: static;
    bottom: auto;
    left: auto;
    pointer-events: auto;
    opacity: 1
  }

  .o-commentArea__inputButton {
    width: 100px
  }

  .o-commentArea__inputButton+.o-commentArea__inputButton {
    margin-left: 8px
  }

  .o-commentArea__inputButton.is-disabled {
    pointer-events: none
  }

  .o-commentArea__inputError {
    margin-top: 8px;
    color: #ed4956;
    font-size: 14px
  }

  .o-commentArea__alertLabel {
    font-size: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
    line-height: 1.5;
    color: #787c7b;
    border-top: 1px solid #f2f2f2
  }

  .o-commentArea__alertLabel--noborder {
    border-top: none
  }

  .o-commentArea__alertLink {
    font-size: 14px;
    line-height: 1.5;
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  .slide-enter-active,
  .slide-leave-active {
    -webkit-transition: padding-top .3s ease-out, padding-bottom .3s ease-out;
    transition: padding-top .3s ease-out, padding-bottom .3s ease-out
  }

  .slide-enter-active>* {
    -webkit-transition: line-height .1s ease-out, opacity .1s linear .1s, visibility .1s linear .1s;
    transition: line-height .1s ease-out, opacity .1s linear .1s, visibility .1s linear .1s
  }

  .slide-leave-active>* {
    -webkit-transition: line-height .1s ease-out, opacity .1s linear, visibility .1s linear;
    transition: line-height .1s ease-out, opacity .1s linear, visibility .1s linear
  }

  .slide-enter,
  .slide-leave-to {
    padding-top: 0;
    padding-bottom: 0
  }

  .slide-enter>*,
  .slide-leave-to>* {
    line-height: 0;
    visibility: hidden;
    opacity: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-2f6f3fb6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2f6f3fb6 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-commentArea__item {
    position: relative;
    padding-bottom: 24px;
    padding-left: 48px
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__item {
      padding-bottom: 16px;
      padding-left: 48px
    }
  }

  .o-commentArea__item--edit .o-commentArea__input {
    padding-left: 0
  }

  .o-commentArea__item--edit .o-commentArea__inputMessage {
    padding: 8px;
    margin-top: 8px;
    border: 1px solid #f2f2f2
  }

  .o-commentArea__more {
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: center
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-c91d2fdc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-c91d2fdc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-commentArea__avatar {
    position: absolute;
    top: 4px;
    left: 0;
    display: block;
    border-radius: 50%
  }

  .o-commentArea__add {
    box-sizing: border-box;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid #e6e6e6
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__add {
      padding-top: 16px;
      padding-bottom: 16px
    }
  }

  .o-commentArea__add.is-empty {
    border: none
  }

  .o-commentArea__input {
    position: relative;
    padding-left: 48px;
    -webkit-transition: padding-bottom .15s ease-in-out;
    transition: padding-bottom .15s ease-in-out
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__input {
      padding-left: 48px
    }
  }

  .o-commentArea__input.is-active {
    padding-bottom: 48px
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__input.is-active {
      padding-bottom: 40px
    }
  }

  .o-commentArea__inputAvatar {
    position: absolute;
    top: 0;
    left: 0
  }

  .o-commentArea__inputMessage:not(:root) {
    width: 100%;
    height: 32px;
    min-height: 32px;
    margin-top: -4px;
    resize: none;
    border: 1px solid transparent
  }

  .o-commentArea__inputAction {
    position: absolute;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: flex;
    margin-top: 8px;
    opacity: 0
  }

  .o-commentArea__inputAction.is-active {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out
  }

  .o-commentArea__inputAction--edit {
    position: static;
    bottom: auto;
    left: auto;
    pointer-events: auto;
    opacity: 1
  }

  .o-commentArea__inputButton {
    width: 100px
  }

  .o-commentArea__inputButton+.o-commentArea__inputButton {
    margin-left: 8px
  }

  .o-commentArea__inputButton.is-disabled {
    pointer-events: none
  }

  .o-commentArea__inputError {
    margin-top: 8px;
    color: #ed4956;
    font-size: 14px
  }

  .o-commentArea__alertLabel {
    font-size: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
    line-height: 1.5;
    color: #787c7b;
    border-top: 1px solid #f2f2f2
  }

  .o-commentArea__alertLabel--noborder {
    border-top: none
  }

  .o-commentArea__alertLink {
    font-size: 14px;
    line-height: 1.5;
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  .o-commentArea__webview {
    margin-top: 16px;
    margin-bottom: 16px
  }

  .o-commentArea__webviewButton {
    display: block;
    width: calc(100% - 32px) !important;
    margin: auto;
    outline: none
  }

  .slide-enter-active,
  .slide-leave-active {
    -webkit-transition: padding-top .3s ease-out, padding-bottom .3s ease-out;
    transition: padding-top .3s ease-out, padding-bottom .3s ease-out
  }

  .slide-enter-active>* {
    -webkit-transition: line-height .1s ease-out, opacity .1s linear .1s, visibility .1s linear .1s;
    transition: line-height .1s ease-out, opacity .1s linear .1s, visibility .1s linear .1s
  }

  .slide-leave-active>* {
    -webkit-transition: line-height .1s ease-out, opacity .1s linear, visibility .1s linear;
    transition: line-height .1s ease-out, opacity .1s linear, visibility .1s linear
  }

  .slide-enter,
  .slide-leave-to {
    padding-top: 0;
    padding-bottom: 0
  }

  .slide-enter>*,
  .slide-leave-to>* {
    line-height: 0;
    visibility: hidden;
    opacity: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5f73e06f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5f73e06f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-commentAreaHeader {
    width: 100%;
    padding: 8px 0;
    margin: 8px auto;
    font-weight: 700;
    text-align: center;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    font-size: 14px
  }

  .o-commentAreaHeader::marker {
    color: transparent
  }

  .o-commentAreaHeader::-webkit-details-marker {
    display: none
  }

  @media only screen and (max-width:479px) {
    .o-commentAreaHeader {
      margin-top: 16px
    }
  }

  .o-commentAreaHeader[data-webview=true] {
    outline: none
  }

  .o-commentAreaHeader .a-icon {
    vertical-align: middle
  }

  .o-commentAreaHeader .dim {
    color: #a8abb1
  }

  .o-commentAreaHeader__label {
    display: inline-block;
    -webkit-box-align: center;
    align-items: center;
    line-height: 1;
    color: #a8abb1
  }

  .o-commentAreaHeader__labelIcon {
    margin-right: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-d898f50c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-d898f50c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-commentArea__container {
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-commentArea__container {
      width: auto;
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-commentArea__container {
      width: auto;
      margin-right: 16px;
      margin-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6802a922 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6802a922 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .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
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-b4a10240 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-b4a10240 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorProfile {
    display: -webkit-box;
    display: flex
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorProfile {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile {
      margin-bottom: 16px;
    }
  }

  .o-creatorProfile__body {
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 16px
  }

  .o-creatorProfile__header {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-bottom: 8px
  }

  .o-creatorProfile__name {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    word-break: break-all
  }

  .o-creatorProfile__social {
    margin-right: 8px
  }

  .o-creatorProfile__description {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start
  }

  .o-creatorProfile__introduction {
    -webkit-box-flex: 1;
    flex: 1
  }

  .o-creatorProfile__profile {
    margin-bottom: 8px;
    font-size: 14px;
    word-break: break-all
  }

  @media only screen and (max-width:479px) {
    .o-creatorProfile__profile {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 12px
    }
  }

  .o-creatorProfile__profile:empty {
    margin-bottom: 0
  }

  .o-creatorProfile__profile a {
    text-decoration: underline
  }

  .o-creatorProfile__aside {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start
  }

  .o-creatorProfile__follow {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-left: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-621285af {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-621285af {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-hashtags {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
  }

  .o-hashtags__item {
    margin-right: 8px;
    margin-bottom: 8px
  }

  .o-hashtags__item a {
    font-size: 14px;
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    line-height: 1.5;
    color: #787c7b;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #f7f9f9;
    border-radius: 4px
  }

  .o-hashtags__item a:active,
  .o-hashtags__item a:hover {
    outline: none
  }

  @media only screen and (min-width:769px) {
    .o-hashtags__item a {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-hashtags__item a:hover {
      background-color: #f2f2f2
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5335a276 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5335a276 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-mediaItemWithNotes {
    position: relative;
    width: 100%;
    margin: 0 6px 6px 0;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-mediaItemWithNotes {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-mediaItemWithNotes:hover {
      border: 1px solid #ccc
    }
  }

  .o-mediaItemWithNotes--size_medium .o-mediaItemWithNotes__cover {
    position: relative;
    top: 0;
    right: 0;
    width: 100%
  }

  .o-mediaItemWithNotes--size_medium .o-mediaItemWithNotes__coverInner {
    width: 100%;
    height: 0;
    padding-bottom: 16.875%;
    border-radius: 3px 3px 0 0
  }

  .o-mediaItemWithNotes--size_medium .o-mediaItemWithNotes__title {
    padding-right: 0
  }

  .o-mediaItemWithNotes:after,
  .o-mediaItemWithNotes:before {
    position: absolute;
    content: "";
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .o-mediaItemWithNotes:before {
    top: 2px;
    right: -4px;
    bottom: -4px;
    left: 2px;
    z-index: -1
  }

  .o-mediaItemWithNotes:after {
    top: 6px;
    right: -7px;
    bottom: -7px;
    left: 6px;
    z-index: -2
  }

  .o-mediaItemWithNotes__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }

  .o-mediaItemWithNotes__body {
    padding: 16px;
    overflow: hidden
  }

  .o-mediaItemWithNotes__cover {
    position: absolute;
    top: 16px;
    right: 16px;
    pointer-events: none
  }

  .o-mediaItemWithNotes__coverImg {
    max-width: 80px;
    max-height: 45px;
    vertical-align: top
  }

  .o-mediaItemWithNotes__title {
    display: -webkit-box;
    padding-right: 96px;
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 700;
    font-size: 16px;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    letter-spacing: .06em
  }

  .o-mediaItemWithNotes__status {
    display: -webkit-box;
    display: flex;
    margin-bottom: 8px
  }

  .o-mediaItemWithNotes__statusItem {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 12px
  }

  .o-mediaItemWithNotes__statusItem+.o-mediaItemWithNotes__statusItem {
    margin-left: 8px
  }

  .o-mediaItemWithNotes__statusItem--articleNum {
    font-weight: 700
  }

  .o-mediaItemWithNotes__statusItem--price {
    color: #2cb696
  }

  .o-mediaItemWithNotes__statusIcon {
    margin-right: 4px
  }

  .o-mediaItemWithNotes__articles {
    position: relative;
    width: auto;
    margin-left: 8px
  }

  .o-mediaItemWithNotes__articles:before {
    position: absolute;
    top: 0;
    bottom: 8px;
    left: 0;
    content: "";
    border: solid #ccc;
    border-width: 0 1px 0 0
  }

  .o-mediaItemWithNotes__articlesItem {
    position: relative;
    width: 100%;
    font-size: 12px;
    text-indent: 16px
  }

  .o-mediaItemWithNotes__articlesItem+.o-mediaItemWithNotes__articlesItem {
    margin-top: 4px
  }

  .o-mediaItemWithNotes__articlesItem:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    content: "";
    border: solid #ccc;
    border-width: 1px 0 0
  }

  .o-mediaItemWithNotes__articlesLink {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-mediaItemWithNotes__articlesLink {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-mediaItemWithNotes__articlesLink:hover {
      color: #222
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5ffa1df3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5ffa1df3 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineHaving__title {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-magazineHaving__title {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-magazineHaving__title {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-magazineHaving__content {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    align-items: stretch;
    padding-bottom: 8px;
    overflow-x: auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-magazineHaving__content {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-magazineHaving__content {
      padding-bottom: 0;
      -webkit-overflow-scrolling: touch
    }

    .o-magazineHaving__content:after {
      display: block;
      padding-left: 16px;
      content: ""
    }
  }

  .o-magazineHaving__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    width: 280px;
    min-width: 280px
  }

  .o-magazineHaving__item+.o-magazineHaving__item {
    margin-left: 16px
  }

  @media only screen and (max-width:479px) {
    .o-magazineHaving__item {
      margin-left: 16px
    }

    .o-magazineHaving__item:only-child {
      width: 100%
    }
  }

  .o-magazineHaving__more {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 264px;
    height: 100%;
    cursor: pointer;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 12px
  }

  @media only screen and (min-width:769px) {
    .o-magazineHaving__more {
      -webkit-transition: border-color .2s cubic-bezier(1, 0, 0, 1);
      transition: border-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-magazineHaving__more:hover {
      border-color: #ccc
    }
  }

  .o-magazineHaving__moreLabel {
    font-weight: 700
  }

  .o-magazineHaving__loading {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 250px;
    height: 100%
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .a-button {
    display: inline-block;
    display: -webkit-inline-box;
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    font-weight: 700;
    line-height: 1;
    color: #787c7b;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    touch-action: manipulation;
    cursor: pointer;
    background: #fff;
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
  }

  .a-button,
  .a-button .a-button__inner {
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .a-button .a-button__inner {
    font-size: 14px;
    display: -webkit-box;
    display: flex
  }

  .a-button[data-type=none] {
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .a-button[data-type=none] {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=none]:hover {
      color: #222
    }
  }

  .a-button[data-type=disabled] {
    color: hsla(0, 0%, 100%, .5);
    background-color: #ccc
  }

  @media only screen and (min-width:769px) {
    .a-button[data-type=disabled] {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=disabled]:hover {
      background-color: #b3b3b3
    }
  }

  .a-button[data-type=basic] {
    color: #222;
    border: 1px solid #e6e6e6
  }

  @media only screen and (min-width:769px) {
    .a-button[data-type=basic] {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=basic]:hover {
      border: 1px solid #a8abb1
    }
  }

  .a-button[data-type=primary] {
    color: #fff;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
  }

  @media only screen and (min-width:769px) {
    .a-button[data-type=primary] {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=primary]:hover {
      background-color: #228d74;
      background-color: var(--customPrimaryDarkenColor)
    }
  }

  .a-button[data-type=secondary] {
    color: #2cb696;
    color: var(--customPrimaryColor);
    border: 1px solid #2cb696;
    border: 1px solid var(--customPrimaryColor)
  }

  @media only screen and (min-width:769px) {
    .a-button[data-type=secondary] {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=secondary]:hover {
      color: #2cb696;
      color: var(--customPrimaryColor);
      border-color: #228d74;
      border-color: var(--customPrimaryDarkenColor)
    }
  }

  .a-button[data-type=danger] {
    color: #fff;
    background-color: #ed4956
  }

  @media only screen and (min-width:769px) {
    .a-button[data-type=danger] {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=danger]:hover {
      background-color: #e81b2b
    }
  }

  .a-button[data-type=twitter] {
    color: #fff;
    background-color: #55acee
  }

  @media only screen and (min-width:769px) {
    .a-button[data-type=twitter] {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=twitter]:hover {
      background-color: #2795e9
    }
  }

  .a-button[data-type=facebook] {
    color: #fff;
    background-color: #1877f2
  }

  @media only screen and (min-width:769px) {
    .a-button[data-type=facebook] {
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }

    .a-button[data-type=facebook]:hover {
      background-color: #0b5fcc
    }
  }

  .a-button[data-size=small] {
    min-height: 32px
  }

  @media only screen and (max-width:479px) {
    .a-button[data-size=small] {
      padding-right: 12px;
      padding-left: 12px
    }
  }

  .a-button[data-size=small] .a-button__inner {
    font-size: 12px
  }

  .a-button[data-size=large] {
    min-height: 48px
  }

  .a-button[data-size=large] .a-button__inner {
    font-size: 16px
  }

  .a-button[data-width=fit] {
    width: 100%
  }

  .a-button[data-width=square] {
    width: 32px
  }

  .a-button[data-disable-focus=false]:active,
  .a-button[data-disable-focus=false]:hover,
  .a-button[data-disable-focus=true]:focus {
    outline: none
  }

  .a-button:disabled {
    color: hsla(0, 0%, 100%, .5);
    cursor: not-allowed;
    background-color: #ccc;
    border: none;
    -webkit-transition: none;
    transition: none
  }

  @media only screen and (min-width:769px) {
    .a-button:disabled:hover {
      color: hsla(0, 0%, 100%, .5);
      background-color: #ccc;
      border: none
    }
  }

  .a-button--icon {
    padding-right: 0;
    padding-left: 0
  }

  .a-button--icon .a-button__icon {
    margin-right: 0
  }


  .c-button {
    visibility: hidden
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7c777006 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7c777006 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-noteContentHeader {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 40px
  }

  .o-noteContentHeader__statusItem {
    margin-left: 16px
  }

  .o-noteContentHeader__label,
  .o-noteContentHeader__price {
    font-weight: 700;
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3e198622 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3e198622 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-noteContentHeader {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
  }

  .o-noteContentHeader__avatar {
    margin-right: 8px
  }

  .o-noteContentHeader__info {
    -webkit-box-flex: 1;
    flex: 1;
    line-height: 1.5;
    font-size: 12px
  }

  .o-noteContentHeader__name {
    word-break: break-all
  }

  .o-noteContentHeader__date {
    color: #a8abb1
  }

  .o-noteContentHeader__dateSlot:after {
    content: " "
  }

  .o-noteContentHeader__action {
    font-size: 12px;
    line-height: 1.5;
    color: #a8abb1
  }

  .o-noteContentHeader__actionFollow {
    text-decoration: underline
  }

  .o-noteContentHeader__actionFollow--following {
    text-decoration: none
  }

  .o-noteContentHeader__status {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-noteContentHeader__label,
  .o-noteContentHeader__price {
    font-weight: 700;
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px
  }

  .o-noteContentHeader__more {
    margin-left: 16px;
    color: #a8abb1;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .o-noteContentHeader__more {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-noteContentHeader__more:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-62dbfa36 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-62dbfa36 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-noteEyecatch {
    position: relative
  }

  .o-noteEyecatch__image {
    width: 100%;
    height: auto;
    vertical-align: top
  }

  .o-noteEyecatch__copyright {
    margin-top: 8px;
    font-style: italic;
    line-height: 1;
    color: #787c7b;
    text-align: right;
    font-size: 12px
  }

  @media only screen and (max-width:479px) {
    .o-noteEyecatch__copyright {
      margin-right: 8px;
      margin-left: 8px
    }
  }

  .o-noteEyecatch__copyrightName {
    font-weight: 700
  }

  .o-noteEyecatch__delete {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(34, 34, 34, .2);
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .o-noteEyecatch__delete:hover {
      background-color: rgba(34, 34, 34, .5);
      -webkit-transition: background-color .2s cubic-bezier(1, 0, 0, 1);
      transition: background-color .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-noteEyecatch__block {
    padding-left: 8px;
    font-style: normal;
    color: #787c7b;
    text-decoration: underline
  }

  @media only screen and (min-width:769px) {
    .o-noteEyecatch__block:hover {
      color: #222
    }
  }

  .o-noteEyecatch__help {
    line-height: 16px;
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-noteEyecatch__help:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-42d138ce {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-42d138ce {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-tableOfContents {
    padding: 16px;
    margin: 36px 0;
    background-color: #f7f9f9
  }

  .o-tableOfContents__title {
    font-size: 14px;
    position: relative;
    padding-left: 16px;
    margin: 0;
    font-weight: 700;
    color: #787c7b
  }

  .o-tableOfContents__title:hover {
    color: #444;
    cursor: pointer
  }

  .o-tableOfContents__title.is-open .o-tableOfContents__dropdown {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  .o-tableOfContents__dropdown {
    position: absolute;
    top: -1px;
    left: -8px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
  }

  .o-tableOfContents__body {
    margin: 0
  }

  .o-tableOfContents__list {
    padding-left: 0;
    margin: 0;
    list-style: none
  }

  .o-tableOfContents__item {
    padding: 8px 0;
    font-size: 14px;
    list-style-type: none;
    border-top: 1px solid #e6e6e6
  }

  @media only screen and (max-width:479px) {
    .o-tableOfContents__item {
      padding: 8px 0;
      font-size: 14px
    }
  }

  .o-tableOfContents__item:first-child {
    padding-top: 20px;
    border-top: none
  }

  .o-tableOfContents__item:hover {
    color: #444
  }

  .o-tableOfContents__link {
    display: block;
    color: #787c7b;
    text-decoration: none !important;
    cursor: pointer
  }

  .o-tableOfContents__more {
    margin-top: 8px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-db27d890 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-db27d890 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallLineSeparator {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 40px 0;
    text-align: center;
    border-top: 1px dashed #ccc
  }

  .m-paywallLineSeparator__label {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    padding: 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    line-height: 1;
    color: #787c7b;
    white-space: nowrap;
    background: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .m-paywallLineSeparator__label {
      font-size: 12px
    }
  }

  @media only screen and (max-width:359px) {
    .m-paywallLineSeparator__label {
      font-size: 10px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-f3076884 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-f3076884 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-winContestBadge__badge {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #eca726;
    font-size: 14px
  }

  @media only screen and (min-width:769px) {
    .o-winContestBadge__badge {
      cursor: pointer
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-10152cdb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-10152cdb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-shareSheet {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 0 0 0 16px;
    color: #fff;
    border-radius: 4px;
    box-shadow: 2px 4px 8px rgba(34, 34, 34, .2);
    -webkit-transform: translate(-50%, calc(-100% - 12px));
    transform: translate(-50%, calc(-100% - 12px));
    -webkit-transform: translate(calc(-50% + var(--shareSheetOffsetX, 0px)), calc(-100% - 12px));
    transform: translate(calc(-50% + var(--shareSheetOffsetX, 0px)), calc(-100% - 12px))
  }

  .m-shareSheet,
  .m-shareSheet:after {
    position: absolute;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
  }

  .m-shareSheet:after {
    right: 50%;
    right: calc(50% + var(--shareSheetOffsetX, 0px));
    bottom: 0;
    z-index: -1;
    width: 8px;
    height: 8px;
    pointer-events: none;
    content: "";
    -webkit-transform: rotate(45deg) translate(50%);
    transform: rotate(45deg) translate(50%)
  }

  .m-shareSheet__title {
    font-size: 12px;
    margin-right: 8px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap
  }

  .m-shareSheet__item {
    padding: 8px;
    background-color: #2cb696;
    background-color: var(--customPrimaryColor)
  }

  .m-shareSheet__item:last-child {
    border-radius: 0 4px 4px 0
  }

  @media only screen and (min-width:769px) {
    .m-shareSheet__item:hover {
      background-color: #228d74;
      background-color: var(--customPrimaryDarkenColor)
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3c6b5eaa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3c6b5eaa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-noteContentText--device_windows .o-noteContentText__body,
  .o-noteContentText--device_windows .o-noteContentText__body .note-editor-placeholder:after,
  .o-noteContentText--device_windows .o-noteContentText__title,
  .o-noteContentText--device_windows .o-noteContentText__title .note-editor-placeholder:after {
    font-family: YakuHanJPs, Segoe UI, Arial, メイリオ, Meiryo, sans-serif
  }

  .o-noteContentText--font_sansserif .o-noteContentText__body,
  .o-noteContentText--font_sansserif .o-noteContentText__body .note-editor-placeholder:after,
  .o-noteContentText--font_sansserif .o-noteContentText__title,
  .o-noteContentText--font_sansserif .o-noteContentText__title .note-editor-placeholder:after {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif
  }

  .o-noteContentText__title {
    min-height: 1em;
    margin-top: 72px;
    margin-bottom: 18px;
    font-family: Hiragino Mincho ProN, ヒラギノ明朝 Pro W6, Hiragino Mincho Pro, HGS明朝E, Yu Mincho, YuMincho, ＭＳ Ｐ明朝, serif;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    pointer-events: auto;
    font-size: 32px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentText__title {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__title {
      font-size: 24px;
      margin: 30px 16px 15px
    }
  }

  .o-noteContentText__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-bottom: 20px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentText__status {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__status {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentText__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
  }

  .o-noteContentText__likeIcon {
    position: absolute;
    font-size: 16px
  }

  .o-noteContentText__likeCount {
    padding-left: 20px
  }

  .o-noteContentText__author {
    width: 100%;
    margin-bottom: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentText__author {
      width: calc(100% - 80px);
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__author {
      width: calc(100% - 32px);
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentText__body {
    font-family: Hiragino Mincho ProN, ヒラギノ明朝 Pro W6, Hiragino Mincho Pro, HGS明朝E, Yu Mincho, YuMincho, ＭＳ Ｐ明朝, serif;
    color: #222;
    pointer-events: auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentText__body {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentText__body b {
    font-weight: 700
  }

  .o-noteContentText__body pre,
  .o-noteContentText__body pre[data-name=preCode] {
    padding: 36px;
    margin-top: 36px;
    margin-bottom: 36px;
    font-family: note monospace, SFMono-Regular, Consolas, Menlo, Courier, monospace;
    line-height: 18px;
    color: #fff;
    white-space: pre-wrap;
    background-color: #282c34;
    font-size: 12px
  }

  @media only screen and (max-width:479px) {

    .o-noteContentText__body pre,
    .o-noteContentText__body pre[data-name=preCode] {
      padding: 24px;
      margin: 32px -16px
    }
  }

  .o-noteContentText__body code,
  .o-noteContentText__body code[data-name=code] {
    display: block;
    overflow-x: auto;
    font-family: note monospace, SFMono-Regular, Consolas, Menlo, Courier, monospace;
    line-height: 18px;
    color: #fff;
    word-wrap: normal;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    font-size: 12px
  }

  .o-noteContentText__body code::-webkit-scrollbar,
  .o-noteContentText__body code[data-name=code]::-webkit-scrollbar {
    display: none
  }

  .o-noteContentText__body blockquote,
  .o-noteContentText__body figure,
  .o-noteContentText__body h2,
  .o-noteContentText__body h3,
  .o-noteContentText__body p,
  .o-noteContentText__body ul li {
    margin-top: 36px;
    margin-bottom: 36px
  }

  @media only screen and (max-width:479px) {

    .o-noteContentText__body blockquote,
    .o-noteContentText__body figure,
    .o-noteContentText__body h2,
    .o-noteContentText__body h3,
    .o-noteContentText__body p,
    .o-noteContentText__body ul li {
      margin-top: 30px;
      margin-bottom: 30px
    }
  }

  .o-noteContentText__body a {
    text-decoration: underline;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .o-noteContentText__body a:hover {
      color: #222;
      text-decoration: none
    }
  }

  .o-noteContentText__body img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 1px rgba(34, 34, 34, .3)
  }

  .o-noteContentText__body img.is-slide {
    cursor: -webkit-zoom-in;
    cursor: zoom-in
  }

  .o-noteContentText__body h2,
  .o-noteContentText__body h3 {
    font-size: 24px;
    margin-top: 50px;
    margin-bottom: -18px;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  @media only screen and (max-width:479px) {

    .o-noteContentText__body h2,
    .o-noteContentText__body h3 {
      font-size: 20px;
      margin-top: 36px;
      margin-bottom: -20px
    }
  }

  .o-noteContentText__body p,
  .o-noteContentText__body ul li {
    font-size: 18px;
    line-height: 36px
  }

  @media only screen and (max-width:479px) {

    .o-noteContentText__body p,
    .o-noteContentText__body ul li {
      font-size: 16px;
      line-height: 30px
    }
  }

  .o-noteContentText__body blockquote {
    font-size: 16px;
    padding: 25px 36px;
    line-height: 36px;
    background-color: #f7f9f9
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body blockquote {
      font-size: 14px;
      padding: 18px 24px;
      line-height: 30px
    }
  }

  .o-noteContentText__body blockquote>* {
    margin-top: 0;
    margin-bottom: 0
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body blockquote>* {
      font-size: 14px
    }
  }

  .o-noteContentText__body .widget-cover {
    width: 100% !important;
    cursor: pointer
  }

  .o-noteContentText__body .widget-cover>* {
    pointer-events: none
  }

  .o-noteContentText__body .widget-cover:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
    border: 1px solid transparent;
    border-radius: 4px;
    opacity: 0
  }

  @media only screen and (min-width:769px) {
    .o-noteContentText__body .widget-cover:hover:before {
      opacity: 1
    }
  }

  .o-noteContentText__body .widget-cover.is-selected:before {
    background-color: rgba(#2cb696, .3);
    background-color: rgba(var(--customPrimaryColor), .3);
    border-color: #2cb696;
    border-color: var(--customPrimaryColor);
    opacity: 1
  }

  .o-noteContentText__body [embedded-service] {
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    border-radius: 4px
  }

  .o-noteContentText__body [embedded-service] ::-moz-selection {
    background-color: transparent
  }

  .o-noteContentText__body [embedded-service] ::selection {
    background-color: transparent
  }

  .o-noteContentText__body [embedded-service=googlemap] {
    position: relative;
    width: 100% !important;
    height: 0;
    padding-bottom: 75%;
    border: 1px solid #f2f2f2
  }

  .o-noteContentText__body [embedded-service=googlemap] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
  }

  .o-noteContentText__body [embedded-service=gist] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .o-noteContentText__body [embedded-service=gist]::-webkit-scrollbar {
    display: none
  }

  .o-noteContentText__body [embedded-service=googleform] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .o-noteContentText__body [embedded-service=googleform]::-webkit-scrollbar {
    display: none
  }

  .o-noteContentText__body [embedded-service=itunes] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .o-noteContentText__body [embedded-service=itunes]::-webkit-scrollbar {
    display: none
  }

  .o-noteContentText__body [embedded-service=apple-music] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .o-noteContentText__body [embedded-service=apple-music]::-webkit-scrollbar {
    display: none
  }

  .o-noteContentText__body [embedded-service=slideshare] {
    width: 100%
  }

  .o-noteContentText__body [embedded-service=slideshare] iframe {
    overflow: hidden;
    vertical-align: top;
    border-radius: 4px
  }

  .o-noteContentText__body [embedded-service=speakerdeck] {
    width: 100%
  }

  .o-noteContentText__body [embedded-service=speakerdeck] iframe {
    overflow: hidden;
    vertical-align: top;
    border-radius: 4px
  }

  .o-noteContentText__body [embedded-service=note] {
    width: 100%;
    max-width: auto;
    margin-right: auto;
    margin-left: auto
  }

  .o-noteContentText__body [embedded-service=note] iframe {
    display: block !important;
    width: 100% !important;
    max-width: auto !important;
    margin: 0 auto !important
  }

  .o-noteContentText__body [embedded-service=twitter] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto
  }

  .o-noteContentText__body [embedded-service=twitter] .twitter-tweet {
    margin-top: 0 !important;
    margin-right: auto;
    margin-bottom: 0 !important;
    margin-left: auto
  }

  .o-noteContentText__body [embedded-service=twitterProfile] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #ccd6dd;
    border-radius: 15px
  }

  .o-noteContentText__body [embedded-service=instagram] {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .o-noteContentText__body [embedded-service=instagram]::-webkit-scrollbar {
    display: none
  }

  .o-noteContentText__body [embedded-service=instagram] iframe {
    display: block;
    width: 100% !important;
    max-width: 500px !important;
    height: 590px;
    padding: 8px;
    margin: 0 auto !important;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  .o-noteContentText__body [embedded-service=tiktok] {
    width: 100%;
    max-width: 340px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=tiktok] {
      position: relative;
      width: 100%;
      max-width: none;
      height: 0;
      padding-bottom: 205.29412% !important
    }
  }

  .o-noteContentText__body [embedded-service=tiktok] span div {
    position: static !important;
    left: auto !important;
    max-width: none !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important
  }

  .o-noteContentText__body [embedded-service=tiktok] iframe {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block;
    width: 340px !important;
    height: 700px !important;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=tiktok] iframe {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important
    }
  }

  .o-noteContentText__body [embedded-service=tiktok-web] {
    width: 100%;
    max-width: 340px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=tiktok-web] {
      position: relative;
      width: 100%;
      max-width: none
    }
  }

  .o-noteContentText__body [embedded-service=tiktok-web] blockquote {
    padding: 0;
    margin: 0;
    background-color: transparent
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=tiktok-web] blockquote {
      padding: 0
    }
  }

  .o-noteContentText__body [embedded-service=tiktok-web] span div {
    position: static !important;
    left: auto !important;
    max-width: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important
  }

  .o-noteContentText__body [embedded-service=tiktok-web] iframe {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block;
    width: 340px !important;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=tiktok-web] iframe {
      width: 100% !important
    }
  }

  .o-noteContentText__body [embedded-service=soundcloud] {
    width: 100% !important;
    border: 1px solid #f2f2f2
  }

  .o-noteContentText__body [embedded-service=niconico] {
    position: relative;
    width: 100% !important;
    height: 0;
    padding-bottom: 56.25%;
    border: 1px solid #f2f2f2
  }

  .o-noteContentText__body [embedded-service=niconico] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
  }

  .o-noteContentText__body [embedded-service=spotify] div {
    max-width: none !important
  }

  .o-noteContentText__body [embedded-service=youtube] {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    border: 1px solid #f2f2f2
  }

  .o-noteContentText__body [embedded-service=youtube] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
  }

  .o-noteContentText__body [embedded-service=vimeo] {
    position: relative;
    width: 100% !important;
    border: 1px solid #f2f2f2
  }

  .o-noteContentText__body [embedded-service=vimeo] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=note-slide] {
      position: relative;
      height: auto
    }

    .o-noteContentText__body [embedded-service=note-slide]:after {
      display: block;
      padding-top: calc(75% + 92px);
      content: ""
    }
  }

  .o-noteContentText__body [embedded-service=note-slide] iframe {
    height: 455px;
    border: none
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=note-slide] iframe {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%
    }
  }

  .o-noteContentText__body [embedded-service=external-article] a {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 24px;
    text-decoration: none
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] a {
      padding: 16px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] a:first-child {
    width: 100%
  }

  .o-noteContentText__body [embedded-service=external-article] a:nth-child(2) {
    -webkit-box-flex: 0;
    flex: 0;
    min-width: 220px;
    padding: 0;
    background-position: 50%;
    background-size: cover;
    border-left: 1px solid #f2f2f2
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] a:nth-child(2) {
      min-width: 120px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    word-break: break-all;
    font-size: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] strong {
      font-size: 14px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] em {
    display: block;
    margin-bottom: 4px;
    line-height: 1.5;
    color: #787c7b;
    font-size: 12px
  }

  .o-noteContentText__body [embedded-service=external-article] em:nth-child(3) {
    margin-bottom: 0;
    color: #222
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget {
    display: table;
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget:hover {
      border: 1px solid #a8abb1;
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget>a {
    display: table-cell;
    padding: 16px;
    vertical-align: middle
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget-title {
      max-height: 2.8em;
      font-size: 14px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-description {
    display: -webkit-box;
    max-height: 3em;
    overflow: hidden;
    color: #787c7b;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-image {
    width: 225px;
    height: 150px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    border-left: 1px solid #e8eceb;
    border-radius: 0 3px 3px 0
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget-image {
      width: 120px;
      height: 120px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping {
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column
    }

    .o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping>a:first-child {
      -webkit-box-ordinal-group: 3;
      order: 2
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-image {
    display: -webkit-box;
    display: flex;
    width: 225px;
    height: 225px;
    padding: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-image {
      -webkit-box-ordinal-group: 2;
      order: 1;
      width: 100%;
      height: 190px;
      padding: 16px 16px 0;
      border: none
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget--type_shopping .external-article-widget-disclaimer {
    text-decoration: underline
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-productImage {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-price {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -webkit-box-pack: start;
    justify-content: flex-start;
    margin-top: 16px;
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget-price {
      display: block;
      margin-top: 8px;
      margin-bottom: 8px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-button .a-button__inner {
    margin-top: 8px;
    margin-bottom: 8px;
    white-space: normal
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-regularprice,
  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-saleprice {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    font-weight: 700;
    line-height: 1;
    color: #222;
    font-size: 16px
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-saleprice+.external-article-widget-regularprice {
    padding-left: 8px;
    font-weight: 400;
    color: #787c7b;
    text-decoration: line-through;
    font-size: 12px
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-currency {
    padding-left: 2px;
    font-size: 12px
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-update {
    margin-left: 8px;
    line-height: 1;
    color: #787c7b;
    font-size: 10px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .external-article-widget-update {
      display: block;
      margin-top: 4px;
      margin-left: 0
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .external-article-widget-url+.external-article-widget-button {
    margin-top: 16px
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget:hover {
      border: 1px solid #a8abb1;
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__link {
    display: block !important;
    width: 100%;
    padding: 0 !important
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__header {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 52.3%;
    overflow: hidden
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__img {
    width: 100% !important;
    height: 100% !important;
    border: none;
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__body {
    display: block;
    padding: 16px
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__title {
    display: block;
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__title {
      font-size: 14px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__description {
    display: block;
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .o-noteContentText__body [embedded-service=external-article] .summary-large-image-widget__url {
    display: block;
    font-size: 10px;
    font-style: normal;
    line-height: 1.5
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__link {
    display: grid;
    grid-template-areas: "detail aside""status aside";
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr 190px;
    padding: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__link {
      grid-template-areas: "detail aside""status status";
      grid-template-rows: 1fr auto;
      grid-template-columns: 1fr 140px
    }
  }

  @media only screen and (max-width:359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__link {
      grid-template-columns: 1fr 132px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    grid-area: detail;
    -webkit-box-pack: center;
    justify-content: center;
    padding-right: 16px
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__domain {
    margin-bottom: 4px;
    color: #787c7b;
    font-size: 10px
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__title {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__title {
      font-size: 14px;
      -webkit-line-clamp: 3
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__property {
    display: -webkit-box;
    display: flex
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__property {
      display: block
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__owner {
    display: -webkit-box;
    font-size: 12px;
    margin-right: 16px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__owner {
      display: block;
      margin-right: 0;
      word-break: break-all
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__category {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: #787c7b;
    white-space: nowrap;
    font-size: 12px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__category {
      margin-top: 4px;
      white-space: normal
    }
  }

  @media only screen and (max-width:359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__category {
      font-size: 10px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__categoryIcon {
    margin-right: 4px
  }

  @media only screen and (max-width:359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__categoryIcon {
      margin-right: 0
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__aside {
    grid-area: aside
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__thumbImg {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__thumbImg {
      margin-bottom: 8px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__status {
    grid-area: status;
    padding: 8px 16px 0 0
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__status {
      padding: 16px 0 0
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__statusList {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__statusListItem {
    margin-top: 0;
    margin-right: 16px;
    margin-bottom: 0;
    line-height: 1
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__statusListItem--timeleft {
    margin-right: 0;
    margin-left: auto
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__currentAmount {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 0;
    line-height: 1;
    color: #222;
    font-size: 14px
  }

  @media only screen and (max-width:359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__currentAmount {
      font-size: 12px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__supporters {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 14px
  }

  @media only screen and (max-width:359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__supporters {
      font-size: 12px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__supportersIcon {
    margin-right: 4px
  }

  @media only screen and (max-width:359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__supportersIcon {
      margin-right: 0
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__timeleft {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: #787c7b;
    font-size: 12px
  }

  @media only screen and (max-width:359px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__timeleft {
      font-size: 10px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__timeleftIcon {
    margin-right: 4px
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__complateRate {
    position: relative;
    margin-top: 8px
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__complateRate:after {
    position: absolute;
    top: 2px;
    left: 4px;
    z-index: 1;
    font-weight: 700;
    color: #fff;
    content: attr(title);
    font-size: 10px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__complateRate {
      height: 16px;
      margin-right: -16px;
      margin-bottom: -14px;
      margin-left: -16px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    height: 16px;
    overflow: hidden;
    border: none;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value] {
      border-radius: 0 0 3px 3px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-bar {
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    background-color: #f2f2f2;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-bar {
      border-radius: 0 0 3px 3px
    }
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-webkit-progress-value {
    -webkit-appearance: none;
    appearance: none;
    background-color: #2cb696
  }

  .o-noteContentText__body [embedded-service=external-article] .crowdfunding-widget__progress[value]::-moz-progress-bar {
    -moz-appearance: none;
    background-color: #2cb696
  }

  .o-noteContentText__body [embedded-service=attachment] {
    border: 1px solid #e6e6e6
  }

  @media only screen and (min-width:769px) {
    .o-noteContentText__body [embedded-service=attachment]:hover {
      border: 1px solid #a8abb1;
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px;
    text-decoration: none;
    cursor: pointer
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=attachment] .file-widget__link {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column
    }
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__info {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    align-items: center;
    padding-right: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=attachment] .file-widget__info {
      width: 100%;
      padding-right: 0
    }
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__icon {
    padding-right: 16px;
    color: #a8abb1
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__data {
    -webkit-box-flex: 1;
    flex-grow: 1
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__filename {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    word-break: break-all;
    font-size: 16px
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__loading {
    font-size: 14px;
    padding: 40px 16px 16px;
    line-height: 1;
    color: #787c7b;
    text-align: center
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__loadingLabel {
    padding-top: 24px;
    background-image: url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/loading_128x128.0f89a3b.gif);
    background-repeat: no-repeat;
    background-position: 50% 10%;
    background-size: 32px
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__filesize {
    font-size: 12px;
    color: #787c7b
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__note {
    font-size: 10px;
    color: #2cb696;
    color: var(--customPrimaryColor);
    text-decoration: none
  }

  @media only screen and (min-width:769px) {
    .o-noteContentText__body [embedded-service=attachment] .file-widget__note:hover {
      color: #228d74;
      color: var(--customPrimaryDarkenColor)
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentText__body [embedded-service=attachment] .file-widget__download {
      width: 100%;
      padding-top: 16px
    }
  }

  .o-noteContentText__body [embedded-service=attachment] .file-widget__download .a-icon {
    margin-right: 8px
  }

  .o-noteContentText__body [embedded-service=hr],
  .o-noteContentText__body [embedded-service=wantedly] {
    border: 1px solid #e6e6e6
  }

  @media only screen and (min-width:769px) {

    .o-noteContentText__body [embedded-service=hr]:hover,
    .o-noteContentText__body [embedded-service=wantedly]:hover {
      border: 1px solid #a8abb1;
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget {
    width: 100%;
    text-align: left
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__link,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__link {
    display: -webkit-box;
    display: flex;
    width: 100%;
    padding: 16px;
    overflow: visible;
    text-decoration: none
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__info,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__info {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__url,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__url {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    font-size: 10px;
    font-style: normal;
    line-height: 1;
    color: #787c7b;
    text-indent: 48px
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__url:before,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__url:before {
    position: absolute;
    top: -1px;
    left: 0;
    width: 40px;
    height: 14px;
    padding: 2px 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    text-indent: 0;
    white-space: nowrap;
    content: "求人";
    background-color: #2cb696;
    background-color: var(--customPrimaryColor);
    border-radius: 7px
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__title,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__title {
    display: -webkit-box;
    width: 100%;
    max-height: 3em;
    padding-right: 16px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  @media only screen and (max-width:479px) {

    .o-noteContentText__body [embedded-service=hr] .recruitment-widget__title,
    .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__title {
      font-size: 14px
    }
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__requirements,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__requirements {
    width: 100%;
    padding-top: 8px;
    padding-right: 16px
  }

  @media only screen and (max-width:479px) {

    .o-noteContentText__body [embedded-service=hr] .recruitment-widget__requirements,
    .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__requirements {
      padding-top: 8px
    }
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__companyName,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__companyName {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__companyName:last-child,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__companyName:last-child {
    margin-bottom: 0
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__location,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__location {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__location:last-child,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__location:last-child {
    margin-bottom: 0
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__occupations,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__occupations {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #787c7b
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__occupations:last-child,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__occupations:last-child {
    margin-bottom: 0
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__employmentSystem,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__employmentSystem {
    display: block;
    font-size: 12px;
    color: #787c7b
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__aside,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__aside {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    width: 190px
  }

  @media only screen and (max-width:479px) {

    .o-noteContentText__body [embedded-service=hr] .recruitment-widget__aside,
    .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__aside {
      width: 120px
    }
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__thumbnailImg,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__thumbnailImg {
    width: 100%;
    height: 100px !important;
    border: none;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
  }

  @media only screen and (max-width:479px) {

    .o-noteContentText__body [embedded-service=hr] .recruitment-widget__thumbnailImg,
    .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__thumbnailImg {
      height: 64px !important
    }
  }

  .o-noteContentText__body [embedded-service=hr] .recruitment-widget__button,
  .o-noteContentText__body [embedded-service=wantedly] .recruitment-widget__button {
    width: 100%;
    margin-top: 16px
  }

  .o-noteContentText__body [embedded-service=alu] {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto
  }

  .o-noteContentText__body .fude-iframe-ratio-widget__wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    border-radius: 4px
  }

  .o-noteContentText__body .fude-iframe-ratio-widget__inner {
    position: static;
    left: auto;
    max-width: none;
    height: auto;
    padding-top: 0;
    padding-bottom: 0
  }

  .o-noteContentText__body .fude-iframe-ratio-widget__iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
  }

  .o-noteContentText__body .fude-iframe-ratio-widget__domain {
    text-align: right
  }

  .o-noteContentText__body .fude-iframe-ratio-widget__link {
    display: inline-block;
    padding-top: 8px;
    color: #787c7b;
    text-decoration: none;
    font-size: 12px
  }

  .o-noteContentText__body [embedded-service=oembed] {
    border-radius: 0
  }

  .o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget {
    margin: 0 auto
  }

  .o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden
  }

  .o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__inner {
    position: static;
    left: auto;
    max-width: none;
    height: auto;
    padding-top: 0;
    padding-bottom: 0
  }

  .o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
  }

  .o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__domain {
    text-align: right
  }

  .o-noteContentText__body [embedded-service=oembed] .fude-iframe-oembed-widget__link {
    display: inline-block;
    padding-top: 8px;
    color: #787c7b;
    text-decoration: none;
    font-size: 12px
  }

  .o-noteContentText__body .fb-post {
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6577b664 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6577b664 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentImage {
      margin-top: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentImage {
      margin-top: 16px
    }
  }

  .o-noteContentImage__title {
    min-height: 1em;
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 32px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentImage__title {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentImage__title {
      font-size: 24px;
      margin-right: 16px;
      margin-bottom: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentImage__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-bottom: 20px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentImage__status {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentImage__status {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentImage__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
  }

  .o-noteContentImage__likeIcon {
    position: absolute;
    font-size: 16px
  }

  .o-noteContentImage__likeCount {
    padding-left: 20px
  }

  .o-noteContentImage__author {
    width: 100%;
    margin-bottom: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentImage__author {
      width: calc(100% - 80px);
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentImage__author {
      width: calc(100% - 32px);
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentImage__item {
    margin-bottom: 40px;
    text-align: center
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentImage__item {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentImage__item {
      margin-right: 16px;
      margin-bottom: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentImage__itemLink {
    display: inline-block;
    vertical-align: top
  }

  .o-noteContentImage__itemImage {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    pointer-events: auto
  }

  .o-noteContentImage__itemCaption {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 14px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentImage__itemCaption {
      margin-top: 8px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentImage__paywallLine {
      margin-right: 16px;
      margin-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-30d9f42f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-30d9f42f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .tl-movie-limited {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    background: #f8f9fa url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/movie_limited.2393ca0.png) no-repeat center 75px;
    border: 1px solid #f8f9fa
  }

  @media only screen and (-webkit-min-device-pixel-ratio:2) {
    .tl-movie-limited {
      background: #f8f9fa url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/movie_limited.2393ca0.png) no-repeat center 75px;
      background-size: 80px 99px
    }
  }

  .tl-movie-limited.page {
    height: 340px;
    background-position: center 90px;
    border: 1px solid #f8f9fa
  }

  .tl-movie-limited>p {
    margin-top: 200px;
    font-size: 14px;
    color: #bdc3c7;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .tl-movie-limited {
      max-height: 170px;
      background: #f8f9fa url(https://d291vdycu0ht11.cloudfront.net/nuxt/production/img/movie_limited.2393ca0.png) no-repeat center 25px;
      background-size: 60px 74px
    }

    .tl-movie-limited>p {
      margin-top: 115px;
      font-size: 12px
    }

    .tl-movie-limited.page {
      max-height: 190px;
      background-position: center 35px;
      border: 1px solid #f8f9fa
    }

    .tl-movie-limited.page>p {
      margin-top: 125px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-97907b02 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-97907b02 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentMovie {
      margin-top: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentMovie {
      margin-top: 16px
    }
  }

  .o-noteContentMovie__title {
    min-height: 1em;
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 32px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentMovie__title {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentMovie__title {
      font-size: 24px;
      margin-right: 16px;
      margin-bottom: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentMovie__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-bottom: 20px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentMovie__status {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentMovie__status {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentMovie__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
  }

  .o-noteContentMovie__likeIcon {
    position: absolute;
    font-size: 16px
  }

  .o-noteContentMovie__likeCount {
    padding-left: 20px
  }

  .o-noteContentMovie__author {
    width: 100%;
    margin-bottom: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentMovie__author {
      width: calc(100% - 80px);
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentMovie__author {
      width: calc(100% - 32px);
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentMovie__body {
    margin-bottom: 40px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentMovie__body {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentMovie__body {
      margin-right: 16px;
      margin-bottom: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentMovie__movie {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 40px;
    overflow: hidden
  }

  @media only screen and (max-width:479px) {
    .o-noteContentMovie__movie {
      margin-bottom: 24px
    }
  }

  .o-noteContentMovie__movieIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }

  .o-noteContentMovie__caption {
    font-size: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-ee38320e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-ee38320e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .mejs-container {
    position: relative;
    font-family: Helvetica, Arial;
    text-align: left;
    text-indent: 0;
    vertical-align: top;
    background: none
  }

  .mejs-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: none !important;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOzEo46UAAAAA1JREFUeAFjGFRgFAAAAZAAAZqGe0YAAAAASUVORK5CYII=);
    background: rgba(0, 0, 0, .7);
    background: -webkit-linear-gradient(rgba(50, 50, 50, .7), rgba(0, 0, 0, .7));
    background: linear-gradient(rgba(50, 50, 50, .7), rgba(0, 0, 0, .7))
  }

  .mejs-controls .mejs-playpause-button {
    width: 30px;
    height: 30px;
    padding: 7px;
    cursor: pointer;
    background-color: #444;
    border-radius: 50%
  }

  .mejs-controls div {
    display: block;
    float: left;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    font-family: Helvetica, Arial;
    font-size: 11px;
    line-height: 11px;
    color: #fff;
    list-style-type: none;
    background-image: none;
    border: 0
  }

  .mejs-button button {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 7px;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAQAAADdCbXSAAAAQElEQVR42mNgGAVI4P/+//Z45f///4/OwlCAzxDiDMBjCPEG4DCENAMO/Hcg3wAsmok3AIdm4gzAo5koA0YsAACTiYd5TASq7wAAAABJRU5ErkJggg==) no-repeat;
    background-size: 32px 16px;
    border: 0
  }

  .mejs-play button {
    background-position: 0 0
  }

  .mejs-pause button {
    background-position: -16px 0
  }

  .mejs-controls .mejs-time-rail {
    width: 200px;
    padding: 0;
    direction: ltr
  }

  .mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 12px 10px;
    background: #333;
    background: rgba(50, 50, 50, .8);
    background: -webkit-linear-gradient(rgba(30, 30, 30, .8), rgba(60, 60, 60, .8));
    background: linear-gradient(rgba(30, 30, 30, .8), rgba(60, 60, 60, .8));
    background: #e1e5e7
  }

  .mejs-controls .mejs-time-rail span {
    position: absolute;
    display: block;
    width: 180px;
    height: 6px;
    cursor: pointer
  }

  .mejs-controls .mejs-time-rail .mejs-time-current {
    width: 0;
    background: #fff;
    background: hsla(0, 0%, 100%, .8);
    background: -webkit-linear-gradient(hsla(0, 0%, 100%, .9), hsla(0, 0%, 78.4%, .8));
    background: linear-gradient(hsla(0, 0%, 100%, .9), hsla(0, 0%, 78.4%, .8));
    background: #cacbcc
  }

  .mejs-controls .mejs-time {
    box-sizing: content-box;
    display: block;
    width: auto;
    height: 17px;
    padding: 6px 0 0;
    overflow: hidden;
    color: #fff;
    text-align: center
  }

  .mejs-controls .mejs-time span {
    display: block;
    float: left;
    width: auto;
    margin: 1px 2px 0 0;
    font-size: 11px;
    line-height: 15px;
    color: #a1a6a9
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7ef453b4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7ef453b4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (max-width:479px) {
    .o-soundDownload {
      text-align: center
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-19be751c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-19be751c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-noteContentSound {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentSound {
      margin-top: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentSound {
      display: block;
      margin-top: 16px
    }
  }

  .o-noteContentSound__author {
    width: 100%;
    margin-bottom: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentSound__author {
      width: calc(100% - 80px);
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentSound__author {
      width: calc(100% - 32px);
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentSound__cover {
    width: 45%;
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentSound__cover {
      width: auto;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentSound__coverImage {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: auto
  }

  .o-noteContentSound__coverImage--lightbox {
    cursor: pointer
  }

  .o-noteContentSound__body {
    width: 55%;
    padding-left: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentSound__body {
      width: auto;
      padding-left: 0;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentSound__title {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 700
  }

  .o-noteContentSound__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 12px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentSound__status {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  .o-noteContentSound__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
  }

  .o-noteContentSound__likeIcon {
    position: absolute;
    font-size: 16px
  }

  .o-noteContentSound__likeCount {
    padding-left: 20px
  }

  .o-noteContentSound__name {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 14px
  }

  .o-noteContentSound__player {
    margin-top: 16px;
    margin-bottom: 16px;
    pointer-events: auto
  }

  .o-noteContentSound__playerHowler {
    pointer-events: auto
  }

  .o-noteContentSound__playerCaption {
    margin-top: 16px;
    font-size: 14px;
    color: #787c7b
  }

  .o-noteContentSound__download {
    margin-top: 16px;
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentSound__download {
      text-align: center
    }
  }

  .o-noteContentSound__description {
    margin-top: 16px;
    margin-bottom: 16px;
    line-height: 1.5;
    font-size: 14px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-663ddb68 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-663ddb68 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-noteContentTalk {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentTalk {
      margin-top: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentTalk {
      margin-top: 16px
    }
  }

  .o-noteContentTalk__author {
    width: 100%;
    margin-bottom: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentTalk__author {
      width: calc(100% - 80px);
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentTalk__author {
      width: calc(100% - 32px);
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentTalk__body {
    position: relative;
    width: 100%;
    padding: 32px;
    margin-top: 8px;
    border: 2px solid #e6e6e6
  }

  .o-noteContentTalk__body:before {
    position: absolute;
    top: -8px;
    left: 8px;
    width: 12px;
    height: 12px;
    content: "";
    background-color: #fff;
    border-right: 2px solid #e6e6e6;
    border-bottom: 2px solid #e6e6e6;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentTalk__body {
      padding: 24px;
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentTalk__body {
      padding: 16px;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentTalk__body.is-limited,
  .o-noteContentTalk__body.is-limited:before {
    background-color: #f7f9f9
  }

  .o-noteContentTalk__body.is-limited p {
    color: #787c7b;
    font-size: 14px;
    text-align: center
  }

  .o-noteContentTalk__text {
    word-break: break-word;
    font-size: 16px
  }

  @media only screen and (max-width:479px) {
    .o-noteContentTalk__text {
      font-size: 14px
    }
  }

  .o-noteContentTalk__text a {
    text-decoration: underline
  }

  .o-noteContentTalk__image {
    margin-top: 16px;
    pointer-events: auto
  }

  .o-noteContentTalk__image img {
    max-width: 100%;
    height: auto;
    vertical-align: top
  }

  .o-noteContentTalk__status {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-noteContentTalk__status {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-noteContentTalk__status {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-noteContentTalk__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    color: #ea3f60;
    font-size: 14px
  }

  .o-noteContentTalk__likeIcon {
    position: absolute;
    font-size: 16px
  }

  .o-noteContentTalk__likeCount {
    padding-left: 20px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5d836b68 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5d836b68 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-otherReccomend {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-otherReccomend {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-otherReccomend__title {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700
  }

  .o-otherReccomend__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  @media only screen and (max-width:479px) {
    .o-otherReccomend__body {
      display: block
    }
  }

  .o-otherReccomend__item {
    width: calc(50% - 8px);
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .o-otherReccomend__item {
      width: auto;
      margin-bottom: 8px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6562e791 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6562e791 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallHeader__title {
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center
  }

  .m-paywallHeader__title:after {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: -12px;
    content: "";
    border-top: 1px dashed #a8abb1
  }

  .m-paywallHeader__titleInner {
    display: inline-block;
    padding-right: 8px;
    padding-left: 8px;
    margin-top: -8px;
    background-color: #fff
  }

  .m-paywallHeader__warning {
    margin-bottom: 8px;
    text-align: center
  }

  .m-paywallHeader__login {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-18741a3c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-18741a3c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallContentNote {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
  }

  .m-paywallContentNote__itemDetail {
    -webkit-box-flex: 1;
    flex: 1
  }

  .m-paywallContentNote__itemTitle {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .06em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .m-paywallContentNote__itemPrice {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1;
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  .m-paywallContentNote__itemDescription {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    font-size: 14px
  }

  .m-paywallContentNote__itemName {
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all
  }

  .m-paywallContentNote__itemImage {
    width: 56px;
    margin-left: 16px;
    overflow: hidden
  }

  .m-paywallContentNote__itemImageSrc {
    display: block;
    width: auto;
    width: 56px;
    height: 56px;
    vertical-align: top;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-71330882 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-71330882 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-paywallContentItem {
    width: 100%
  }

  .o-paywallContentItem+.o-paywallContentItem {
    margin-top: 24px
  }

  @media only screen and (max-width:479px) {
    .o-paywallContentItem+.o-paywallContentItem {
      margin-top: 16px
    }
  }

  .o-paywallContentItem__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .o-paywallContentItem__inner {
      padding: 16px
    }
  }

  .o-paywallContentItem__itemAction {
    width: 100%;
    margin-top: 16px
  }

  .o-paywallContentItem__itemReview {
    margin-top: 8px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-14514b30 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-14514b30 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallPriorSale__item {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .m-paywallPriorSale__item+.m-paywallPriorSale__item {
    margin-top: 24px
  }

  @media only screen and (max-width:479px) {
    .m-paywallPriorSale__item+.m-paywallPriorSale__item {
      margin-top: 16px
    }
  }

  .m-paywallPriorSale__limit {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 8px 24px;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 1px solid #f2f2f2
  }

  @media only screen and (max-width:479px) {
    .m-paywallPriorSale__limit {
      padding: 8px 16px
    }
  }

  .m-paywallPriorSale__limitTitle {
    font-size: 14px;
    font-weight: 700
  }

  .m-paywallPriorSale__limitCount {
    font-size: 14px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start;
    white-space: nowrap
  }

  .m-paywallPriorSale__limitNum {
    font-weight: 700;
    font-size: 16px
  }

  .m-paywallPriorSale__limitDivider {
    margin-right: 4px;
    margin-left: 4px
  }

  .m-paywallPriorSale__itemInner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    margin-right: auto;
    margin-left: auto
  }

  .m-paywallPriorSale__itemAction {
    width: 100%;
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-752d76e2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-752d76e2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallSimplePaidNote {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .m-paywallSimplePaidNote+.m-paywallSimplePaidNote {
    margin-top: 24px
  }

  @media only screen and (max-width:479px) {
    .m-paywallSimplePaidNote+.m-paywallSimplePaidNote {
      margin-top: 16px
    }
  }

  .m-paywallSimplePaidNote__action {
    width: 100%;
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-384473ce {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-384473ce {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallMessage {
    background-color: #f7f9f9;
    border-bottom: 1px solid #f2f2f2
  }

  .m-paywallMessage__inner {
    position: relative;
    max-width: 480px;
    padding: 16px 24px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .m-paywallMessage__inner {
      padding: 16px
    }
  }

  .m-paywallMessage__inner:before {
    position: absolute;
    bottom: 0;
    left: 24px;
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    background-color: #f7f9f9;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom
  }

  @media only screen and (max-width:479px) {
    .m-paywallMessage__inner:before {
      left: 16px
    }
  }

  .m-paywallMessage__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-paywallMessage__author {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 16px
  }

  @media only screen and (max-width:479px) {
    .m-paywallMessage__author {
      margin-right: 8px
    }
  }

  .m-paywallMessage__content {
    width: 100%;
    font-size: 12px;
    color: #787c7b
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-67da4394 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-67da4394 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallContentMagazine {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
  }

  .m-paywallContentMagazine__itemDetail {
    -webkit-box-flex: 1;
    flex: 1
  }

  .m-paywallContentMagazine__itemTitle {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .06em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .m-paywallContentMagazine__itemPrice {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1;
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  .m-paywallContentMagazine__itemImage {
    width: 80px;
    margin-left: 16px;
    overflow: hidden
  }

  .m-paywallContentMagazine__itemImage a {
    display: block;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  .m-paywallContentMagazine__itemImage img {
    width: auto;
    width: 80px;
    height: 40px;
    vertical-align: top;
    -o-object-fit: cover;
    object-fit: cover
  }

  .m-paywallContentMagazine__itemDescription {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    font-size: 14px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-74c05ca2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-74c05ca2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallMagazineBuy {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .m-paywallMagazineBuy+.m-paywallMagazineBuy {
    margin-top: 24px
  }

  @media only screen and (max-width:479px) {
    .m-paywallMagazineBuy+.m-paywallMagazineBuy {
      margin-top: 16px
    }
  }

  .m-paywallMagazineBuy__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .m-paywallMagazineBuy__inner {
      padding: 16px
    }
  }

  .m-paywallMagazineBuy__action {
    width: 100%;
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-31a7ef3e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-31a7ef3e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallMagazineSubsc__item {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .m-paywallMagazineSubsc__item+.m-paywallMagazineSubsc__item {
    margin-top: 24px
  }

  @media only screen and (max-width:479px) {
    .m-paywallMagazineSubsc__item+.m-paywallMagazineSubsc__item {
      margin-top: 16px
    }
  }

  .m-paywallMagazineSubsc__itemInner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .m-paywallMagazineSubsc__itemInner {
      padding: 16px
    }
  }

  .m-paywallMagazineSubsc__itemAction {
    width: 100%;
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0ddebb51 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0ddebb51 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-paywall {
    margin: 40px 0 56px
  }

  @media only screen and (max-width:479px) {
    .o-paywall {
      margin: 32px 0
    }
  }

  .o-paywall__message {
    font-size: 14px;
    margin-top: 32px;
    margin-bottom: 8px;
    line-height: 1.5;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-paywall__message {
      margin-top: 24px
    }
  }

  .o-paywall__item+.o-paywall__item {
    margin-top: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-paywall__item {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-paywall__item {
      margin-right: 16px;
      margin-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-c8f63c3e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-c8f63c3e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallLimitedNoteMagazine {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .m-paywallLimitedNoteMagazine+.m-paywallLimitedNoteMagazine {
    margin-top: 24px
  }

  @media only screen and (max-width:479px) {
    .m-paywallLimitedNoteMagazine+.m-paywallLimitedNoteMagazine {
      margin-top: 16px
    }
  }

  .m-paywallLimitedNoteMagazine__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .m-paywallLimitedNoteMagazine__inner {
      padding: 16px
    }
  }

  .m-paywallLimitedNoteMagazine__action {
    width: 100%;
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-194dd8dd {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-194dd8dd {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paywallMagazineNote {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .m-paywallMagazineNote+.m-paywallMagazineNote {
    margin-top: 24px
  }

  @media only screen and (max-width:479px) {
    .m-paywallMagazineNote+.m-paywallMagazineNote {
      margin-top: 16px
    }
  }

  .m-paywallMagazineNote__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    padding: 24px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .m-paywallMagazineNote__inner {
      padding: 16px
    }
  }

  .m-paywallMagazineNote__action {
    width: 100%;
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-a5ad47c0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-a5ad47c0 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-paywallMagazine {
    margin: 40px 0 56px
  }

  @media only screen and (max-width:479px) {
    .o-paywallMagazine {
      margin: 32px 0
    }
  }

  .o-paywallMagazine__message {
    font-size: 14px;
    margin-top: 32px;
    margin-bottom: 8px;
    line-height: 1.5;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-paywallMagazine__message {
      margin-top: 24px
    }
  }

  .o-paywallMagazine__item+.o-paywallMagazine__item {
    margin-top: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-paywallMagazine__item {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-paywallMagazine__item {
      margin-right: 16px;
      margin-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-33c449e4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-33c449e4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-relatedNote__title {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-relatedNote__title {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-relatedNote__title {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-relatedNote__body {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-relatedNote__body {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-relatedNote__item {
    padding: 8px 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-31693612 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-31693612 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-shareBooster {
    position: fixed;
    bottom: 0;
    z-index: 8;
    width: 100%;
    margin-bottom: 28px;
    -webkit-transition: padding-bottom .2s ease-out;
    transition: padding-bottom .2s ease-out;
    padding-bottom: env(safe-area-inset-bottom);
    pointer-events: none
  }

  .o-shareBooster__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 16px;
    margin-left: 16px;
    pointer-events: none
  }

  .o-shareBooster__item {
    margin-right: 16px;
    pointer-events: auto
  }

  .o-shareBooster__item--type_twitter .o-shareBooster__link {
    background-color: #55acee
  }

  .o-shareBooster__item--type_hatena .o-shareBooster__link {
    background-color: #00a4df
  }

  .o-shareBooster__item--type_line .o-shareBooster__link {
    background-color: #06c755
  }

  .o-shareBooster__item--type_share .o-shareBooster__link {
    color: #a8abb1;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  .o-shareBooster__item--suki {
    margin-right: 0;
    margin-bottom: 8px;
    margin-left: auto
  }

  .o-shareBooster__item--suki .o-shareBooster__link {
    width: 48px;
    height: 48px;
    color: #ea3f60;
    background-color: #fff;
    border: 2px solid #ea3f60;
    border-radius: 48px
  }

  .o-shareBooster__icon--share {
    margin-right: 2px
  }

  .o-shareBooster__link {
    display: block;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 40px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3c66f3e8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3c66f3e8 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-shareBooster {
    position: fixed;
    bottom: 0;
    border-top: 1px solid #f2f2f2;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    -webkit-transform: translateY(110%);
    transform: translateY(110%)
  }

  .o-shareBooster,
  .o-shareBooster:before {
    left: 0;
    width: 100%;
    background-color: #fff
  }

  .o-shareBooster:before {
    position: absolute;
    bottom: -10px;
    z-index: -1;
    display: block;
    height: 100%;
    content: ""
  }

  @media only screen and (max-width:479px) {
    .o-shareBooster {
      display: none
    }
  }

  .o-shareBooster[focus-within] {
    z-index: 10;
    -webkit-transition: all .4s cubic-bezier(1, 0, 0, 1);
    transition: all .4s cubic-bezier(1, 0, 0, 1);
    -webkit-transform: translate(0);
    transform: translate(0)
  }

  .o-shareBooster:focus-within {
    z-index: 10;
    -webkit-transition: all .4s cubic-bezier(1, 0, 0, 1);
    transition: all .4s cubic-bezier(1, 0, 0, 1);
    -webkit-transform: translate(0);
    transform: translate(0)
  }

  .o-shareBooster.is--active {
    z-index: 10;
    -webkit-transition: all .4s cubic-bezier(1, 0, 0, 1);
    transition: all .4s cubic-bezier(1, 0, 0, 1);
    -webkit-transform: translate(0);
    transform: translate(0)
  }

  .o-shareBooster__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 620px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-shareBooster__inner {
      width: auto;
      padding-right: 16px;
      padding-left: 16px
    }
  }

  .o-shareBooster__note {
    margin-left: -16px
  }

  .o-shareBooster__note,
  .o-shareBooster__share {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .o-shareBooster__share {
    margin-right: -16px
  }

  .o-shareBooster__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    line-height: 56px;
    color: #a8abb1;
    text-align: center;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .o-shareBooster__item {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-shareBooster__item:hover {
      color: #787c7b
    }
  }

  .o-shareBooster__item--suki {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: auto;
    padding-right: 16px;
    padding-left: 16px
  }

  .o-shareBooster__like {
    display: inline-block;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #2cb696;
    color: var(--customPrimaryColor);
    vertical-align: top
  }

  @media only screen and (min-width:769px) {
    .o-shareBooster__like {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }
  }

  .o-shareBooster__count {
    display: inline-block;
    margin-left: 4px;
    font-weight: 400;
    color: #ea3f60;
    vertical-align: middle;
    font-size: 14px
  }

  @media only screen and (min-width:769px) {
    .o-shareBooster__count:hover {
      text-decoration: underline
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-b7b74b22 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-b7b74b22 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-sliblingNote {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-sliblingNote:before {
    position: absolute;
    top: 16px;
    left: 50%;
    display: block;
    width: 1px;
    height: calc(100% - 32px);
    content: "";
    background-color: #f2f2f2
  }

  .o-sliblingNote__prev {
    -webkit-box-flex: 1;
    flex: 1;
    width: 50%;
    font-size: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-sliblingNote__prev {
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-sliblingNote__prev {
      padding-left: 8px;
      font-size: 14px
    }
  }

  .o-sliblingNote__next {
    -webkit-box-flex: 1;
    flex: 1;
    width: 50%;
    text-align: right;
    font-size: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-sliblingNote__next {
      margin-right: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-sliblingNote__next {
      padding-right: 8px;
      font-size: 14px
    }
  }

  .o-sliblingNote__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 24px 0
  }

  @media only screen and (max-width:479px) {
    .o-sliblingNote__link {
      padding: 16px 0
    }
  }

  .o-sliblingNote__label {
    display: -webkit-box;
    -webkit-box-flex: 1;
    flex: 1;
    padding-right: 16px;
    padding-left: 16px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  @media only screen and (max-width:479px) {
    .o-sliblingNote__label {
      display: block;
      padding-right: 8px;
      padding-left: 8px;
      text-overflow: ellipsis;
      white-space: nowrap
    }
  }

  .o-sliblingNote__icon {
    width: 24px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-e957b19a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e957b19a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-supportAppeal {
    padding: 16px;
    background-color: #f7f9f9
  }

  .o-supportAppeal__title {
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-size: 12px
  }

  .o-supportAppeal__body {
    display: -webkit-box;
    display: flex
  }

  .o-supportAppeal__img {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 16px
  }

  .o-supportAppeal__contents {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 24px 24px 16px;
    background: #fff;
    border-radius: 12px
  }

  @media only screen and (max-width:479px) {
    .o-supportAppeal__contents {
      padding: 16px
    }
  }

  .o-supportAppeal__message {
    width: 100%;
    margin-bottom: 24px;
    line-height: 1.5;
    white-space: pre-line;
    font-size: 14px
  }

  .o-supportAppeal__message a {
    color: #2cb696;
    color: var(--customPrimaryColor);
    word-break: break-all;
    word-wrap: break-word
  }

  @media only screen and (min-width:769px) {
    .o-supportAppeal__message a:hover {
      color: #228d74;
      color: var(--customPrimaryDarkenColor)
    }
  }

  .o-supportAppeal__button {
    width: 100%
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-caa26286 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-caa26286 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-thanksMessage {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 24px;
    background-color: #f7f9f9;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-thanksMessage {
      display: block;
      padding: 16px;
      border-radius: 0
    }
  }

  .o-thanksMessage__title {
    -webkit-box-flex: 1;
    flex: 1;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    word-break: break-all
  }

  .o-thanksMessage__title+.o-thanksMessage__action {
    -webkit-box-flex: 0;
    flex: 0 0 230px;
    margin-left: 16px
  }

  @media only screen and (max-width:479px) {
    .o-thanksMessage__title+.o-thanksMessage__action {
      margin-top: 16px;
      margin-left: 0
    }
  }

  .o-thanksMessage__action {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 0;
    flex: 0 0 360px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-thanksMessage__action:hover {
      opacity: .8
    }
  }

  .o-thanksMessage__actionLink {
    display: -webkit-box;
    display: flex;
    width: 100%;
    padding: 0 40px 0 16px
  }

  .o-thanksMessage__actionBody {
    margin-top: 16px;
    margin-bottom: 16px
  }

  .o-thanksMessage__actionTitle {
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 14px;
    word-break: break-all
  }

  .o-thanksMessage__actionDescription {
    color: #fff;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 12px;
    word-break: break-all
  }

  .o-thanksMessage__actionArrow {
    position: absolute;
    top: 50%;
    right: 8px;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-2d2bea3f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2d2bea3f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .p-article__body {
    width: 620px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:768px) {
    .p-article__body {
      width: auto
    }
  }

  .p-article__content {
    margin-top: 48px;
    margin-bottom: 48px
  }

  @media only screen and (max-width:768px) {
    .p-article__content {
      margin-top: 0
    }
  }

  @media only screen and (max-width:479px) {
    .p-article__content {
      margin-bottom: 32px
    }
  }

  .p-article__paywall {
    margin-top: 48px;
    margin-bottom: 48px
  }

  @media only screen and (max-width:479px) {
    .p-article__paywall {
      margin-top: 32px;
      margin-bottom: 32px
    }
  }

  @media print {
    .p-article__paywall {
      display: none
    }
  }

  .p-article__contest {
    margin-top: 48px;
    margin-bottom: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .p-article__contest {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .p-article__contest {
      margin-top: 32px;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media print {
    .p-article__contest {
      display: none
    }
  }

  .p-article__hashtags {
    margin-top: 16px;
    margin-bottom: 48px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .p-article__hashtags {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .p-article__hashtags {
      margin-right: 16px;
      margin-bottom: 32px;
      margin-left: 16px
    }
  }

  @media print {
    .p-article__hashtags {
      display: none
    }
  }

  .p-article__review {
    margin-top: 16px;
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .p-article__review {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media print {
    .p-article__review {
      display: none
    }
  }

  .p-article__support {
    margin-top: 16px;
    margin-bottom: 32px
  }

  @media only screen and (max-width:479px) {
    .p-article__support {
      margin-bottom: 24px
    }
  }

  @media print {
    .p-article__support {
      display: none
    }
  }

  .p-article__action {
    margin-top: 32px;
    margin-bottom: 32px
  }

  @media only screen and (max-width:479px) {
    .p-article__action {
      margin-top: 24px;
      margin-bottom: 24px
    }
  }

  @media print {
    .p-article__action {
      display: none
    }
  }

  .p-article__creator {
    margin-top: 32px;
    margin-bottom: 32px
  }

  @media only screen and (max-width:479px) {
    .p-article__creator {
      margin-top: 24px;
      margin-bottom: 24px
    }
  }

  @media print {
    .p-article__creator {
      display: none
    }
  }

  .p-article__related {
    padding-top: 32px;
    margin-top: 32px;
    margin-bottom: 32px;
    border-top: 1px solid #f2f2f2
  }

  .p-article__related:empty {
    display: none
  }

  @media only screen and (max-width:479px) {
    .p-article__related {
      margin-top: 24px;
      margin-bottom: 24px
    }
  }

  @media print {
    .p-article__related {
      display: none
    }
  }

  .p-article__sibling {
    margin-top: 32px;
    margin-bottom: 32px;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2
  }

  .p-article__sibling:empty {
    display: none
  }

  @media only screen and (max-width:479px) {
    .p-article__sibling {
      margin-top: 24px;
      margin-bottom: 24px
    }
  }

  @media print {
    .p-article__sibling {
      display: none
    }
  }

  .p-article__magazineHaving {
    margin-top: 32px;
    margin-bottom: 32px
  }

  @media only screen and (max-width:479px) {
    .p-article__magazineHaving {
      margin-top: 24px;
      margin-bottom: 24px
    }
  }

  @media print {
    .p-article__magazineHaving {
      display: none
    }
  }

  .p-article__reservedDate {
    padding-right: 4px;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 700
  }

  .p-article__comment {
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6
  }

  @media print {
    .p-article__comment {
      display: none
    }
  }

  .p-article__commentInner {
    width: 620px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:768px) {
    .p-article__commentInner {
      width: auto
    }
  }

  .p-article__recommend {
    padding: 24px 0;
    background-color: #f7f9f9
  }

  @media print {
    .p-article__recommend {
      display: none
    }
  }

  .p-article__recommendInner {
    width: 620px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (max-width:768px) {
    .p-article__recommendInner {
      width: auto
    }
  }

  @media print {
    .p-article__share {
      display: none
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-070bb154 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-070bb154 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-r18Confirmation {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .o-r18Confirmation__body {
    max-width: 500px;
    padding: 40px 0
  }

  @media only screen and (max-width:479px) {
    .o-r18Confirmation__body {
      padding: 40px 16px 8px
    }
  }

  .o-r18Confirmation__content {
    text-align: center
  }

  .o-r18Confirmation__image {
    display: block;
    margin: 0 auto 32px
  }

  .o-r18Confirmation__title {
    font-size: 18px;
    margin-bottom: 24px;
    font-weight: 700
  }

  .o-r18Confirmation__titleLine {
    display: inline-block
  }

  .o-r18Confirmation__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
  }

  @media only screen and (max-width:479px) {
    .o-r18Confirmation__action {
      display: block
    }
  }

  .o-r18Confirmation__button {
    margin: 16px
  }

  @media only screen and (max-width:479px) {
    .o-r18Confirmation__button {
      margin: 16px 0
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1d5ff666 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1d5ff666 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .loading {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 620px;
    min-height: 60vh;
    padding: 48px 0;
    margin: 0 auto
  }

  @media only screen and (max-width:768px) {
    .loading {
      width: auto
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-30cd7c4a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-30cd7c4a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-archiveList {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-archiveList {
      margin: 32px 24px 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-archiveList {
      margin: 32px 24px 0
    }
  }

  @media only screen and (max-width:479px) {
    .m-archiveList {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .m-archiveList__section {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .m-archiveList__section+.m-archiveList__section {
    margin-top: 16px
  }

  .m-archiveList__header {
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px
  }

  .m-archiveList__headerLink {
    display: block;
    padding: 8px 16px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .m-archiveList__headerLink {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-archiveList__headerLink:hover {
      color: #222;
      background-color: #f7f9f9
    }
  }

  .m-archiveList__item {
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    font-size: 16px
  }

  .m-archiveList__item:last-child {
    border-bottom: none
  }

  .m-archiveList__link {
    display: block;
    padding: 16px;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .m-archiveList__link {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-archiveList__link:hover {
      color: #222;
      background-color: #f7f9f9
    }
  }

  .m-archiveList__count {
    position: absolute;
    top: 50%;
    right: 16px;
    color: #787c7b;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4e3f300f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4e3f300f {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-basicEmptyContent {
    padding: 24px
  }

  .m-basicEmptyContent__title {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center
  }

  .m-basicEmptyContent__description {
    font-size: 14px;
    color: #787c7b;
    text-align: center
  }

  .m-basicEmptyContent__image {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-right: auto;
    margin-bottom: 16px;
    margin-left: auto;
    background-color: transparent
  }

  .m-basicEmptyContent__icon {
    display: block;
    margin: 0 auto;
    color: #a8abb1
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6497ab1e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6497ab1e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-empty__title--disabled {
    color: #a8abb1
  }

  .o-empty__descriptionIcon {
    margin-right: 4px;
    margin-left: 4px;
    vertical-align: text-bottom
  }

  .o-empty__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 24px
  }

  .o-empty__action--vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    max-width: 300px;
    margin-right: auto;
    margin-left: auto
  }

  .o-empty__action--vertical .o-empty__button {
    margin: 0
  }

  .o-empty__action--vertical .o-empty__button+.o-empty__button {
    margin-top: 16px
  }

  .o-empty__button {
    margin: 0 8px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1a482803 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1a482803 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-circle-summary {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-circle-summary {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-align: center;
      align-items: center
    }
  }

  @media only screen and (max-width:768px) {
    .m-circle-summary {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-align: center;
      align-items: center
    }
  }

  .m-circle-summary__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
  }

  .m-circle-summary__card {
    position: relative;
    width: 100%;
    margin: 0 auto 16px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-circle-summary__card {
      width: 112px;
      margin-bottom: 0
    }
  }

  @media only screen and (max-width:768px) {
    .m-circle-summary__card {
      width: 112px;
      margin-bottom: 0
    }
  }

  .m-circle-summary__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .m-circle-summary__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-circle-summary__body {
      -webkit-box-flex: 1;
      flex: 1;
      margin-left: 16px
    }
  }

  @media only screen and (max-width:768px) {
    .m-circle-summary__body {
      -webkit-box-flex: 1;
      flex: 1;
      margin-left: 16px
    }
  }

  .m-circle-summary__statusLabel {
    position: absolute;
    top: 8px;
    right: 8px
  }

  .m-circle-summary__title {
    font-weight: 700;
    font-size: 14px
  }

  .m-circle-summary__description {
    margin-bottom: 8px;
    word-break: break-all;
    font-size: 12px
  }

  .m-circle-summary__benefitlist {
    -webkit-box-flex: 1;
    flex: 1;
    margin-bottom: 16px;
    color: #787c7b
  }

  @media only screen and (max-width:768px) {
    .m-circle-summary__benefitlist {
      display: none
    }
  }

  .m-circle-summary__benefitlist:empty {
    margin-bottom: 0
  }

  .m-circle-summary__benefitlistItem {
    box-sizing: border-box;
    padding: 0 0 0 1em;
    text-indent: -1em;
    word-break: break-all;
    font-size: 12px
  }

  .m-circle-summary__benefitlistItem:before {
    content: "・"
  }

  .m-circle-summary__button {
    position: relative;
    pointer-events: auto
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-3127ab64 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-3127ab64 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circle-card {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-circle-card {
      display: -webkit-box;
      display: flex;
      background-color: transparent;
      border: none;
      -webkit-overflow-scrolling: touch
    }
  }

  @media only screen and (max-width:768px) {
    .o-circle-card {
      display: -webkit-box;
      display: flex;
      background-color: transparent;
      border: none;
      -webkit-overflow-scrolling: touch
    }
  }

  .o-circle-card__head {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px 16px 0
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-circle-card__head {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .o-circle-card__head {
      display: none
    }
  }

  .o-circle-card__title {
    margin-right: 8px;
    font-weight: 700;
    font-size: 16px
  }

  .o-circle-card__help {
    color: #a8abb1
  }

  @media only screen and (min-width:769px) {
    .o-circle-card__help {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circle-card__help:hover {
      color: #787c7b
    }
  }

  .o-circle-card__item {
    padding: 16px 0;
    margin: 0 16px
  }

  @media only screen and (min-width:769px) {
    .o-circle-card__item:not(:last-child) {
      border-bottom: 1px solid #e6e6e6
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-circle-card__item {
      display: -webkit-box;
      display: flex;
      min-width: 290px;
      padding: 16px;
      margin: 0 8px 0 0;
      background: #fff;
      border: 1px solid #e6e6e6;
      border-radius: 4px
    }

    .o-circle-card__item:not(:last-child) {
      padding: 16px
    }

    .o-circle-card__item:last-child {
      margin-right: 0
    }
  }

  @media only screen and (max-width:768px) {
    .o-circle-card__item {
      display: -webkit-box;
      display: flex;
      min-width: 290px;
      padding: 16px;
      margin: 0 8px 0 0;
      background: #fff;
      border: 1px solid #e6e6e6;
      border-radius: 4px
    }

    .o-circle-card__item:last-child {
      margin-right: 0
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-de1258fc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-de1258fc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-customLink {
    position: relative;
    display: -webkit-box;
    display: flex;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-customLink:hover {
      opacity: .8
    }
  }

  .o-customLink__link {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    padding: 0 40px 0 16px
  }

  .o-customLink__body {
    margin-top: 16px;
    margin-bottom: 16px
  }

  .o-customLink__title {
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .o-customLink__description {
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .o-customLink__arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-60e6e622 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-60e6e622 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-storeItem {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-storeItem {
      -webkit-transition: border .2s cubic-bezier(1, 0, 0, 1);
      transition: border .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-storeItem:hover {
      border: 1px solid #ccc
    }
  }

  .m-storeItem__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2
  }

  .m-storeItem__thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .m-storeItem__thumb {
      padding-bottom: 70%
    }
  }

  .m-storeItem__thumbImg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
  }

  .m-storeItem__detail {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
  }

  .m-storeItem__title {
    max-height: 72px;
    font-weight: 700
  }

  .m-storeItem__description,
  .m-storeItem__title {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
  }

  .m-storeItem__description {
    -webkit-box-flex: 1;
    flex: 1;
    max-height: 54px;
    color: #787c7b;
    font-size: 12px
  }

  .m-storeItem__description:last-child {
    margin-bottom: 0
  }

  .m-storeItem__aside {
    margin-top: auto
  }

  .m-storeItem__price {
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 12px
  }

  .m-storeItem__storeName {
    display: -webkit-box;
    overflow: hidden;
    color: #787c7b;
    font-size: 10px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
  }

  .m-storeItem[data-size=small] {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center
  }

  .m-storeItem[data-size=small] .m-storeItem__thumb {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 72px;
    padding-bottom: 72px;
    margin-bottom: 0
  }

  .m-storeItem[data-size=small] .m-storeItem__detail {
    margin-left: 16px
  }

  .m-storeItem[data-size=small] .m-storeItem__title {
    max-height: 42px;
    margin-bottom: 0;
    font-size: 14px;
    -webkit-line-clamp: 2
  }

  .m-storeItem[data-size=small] .m-storeItem__description {
    display: none
  }

  .m-storeItem[data-size=small] .m-storeItem__price {
    margin-bottom: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6c401198 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6c401198 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-rightColumn__list {
    margin-bottom: 32px
  }

  .o-rightColumn__listItem {
    width: 100%
  }

  .o-rightColumn__listItem+.o-rightColumn__listItem {
    margin-top: 16px
  }

  .o-rightColumn__widgetList {
    margin-bottom: 16px
  }

  @media only screen and (max-width:768px) {
    .o-rightColumn__widgetList {
      width: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }
  }

  @media only screen and (max-width:768px) {
    .o-rightColumn__widgetBody {
      display: -webkit-box;
      display: flex;
      flex-wrap: nowrap;
      -webkit-box-align: stretch;
      align-items: stretch;
      padding: 0 30px 30px
    }
  }

  @media only screen and (max-width:479px) {
    .o-rightColumn__widgetBody {
      padding: 10px
    }
  }

  .o-rightColumn__moreBtn {
    margin-top: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-15974672 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-15974672 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contentHome {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 940px;
    margin: 0 auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentHome {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column
    }
  }

  .o-contentHome__main {
    width: 100%;
    max-width: 610px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contentHome__main {
      -webkit-box-ordinal-group: 3;
      order: 2;
      max-width: none
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentHome__main {
      -webkit-box-ordinal-group: 3;
      order: 2;
      max-width: none
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentHome__main {
      max-width: none
    }
  }

  .o-contentHome__aside {
    width: 280px;
    margin-left: auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contentHome__aside {
      display: none;
      -webkit-box-ordinal-group: 2;
      order: 1;
      width: 100%
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentHome__aside {
      display: none;
      -webkit-box-ordinal-group: 2;
      order: 1;
      width: 100%
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentHome__aside {
      display: none;
      -webkit-box-ordinal-group: 2;
      order: 1;
      width: 100%
    }
  }

  .o-contentHome__list {
    margin-bottom: 32px
  }

  .o-contentHome__list:empty {
    display: none
  }

  .o-contentHome__listItem {
    width: 100%
  }

  .o-contentHome__listItem+.o-contentHome__listItem {
    margin-top: 16px
  }

  .o-contentHome__emptyKaizenNotice {
    max-width: 400px;
    padding: 24px;
    margin: auto
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-57a7c2cf {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-57a7c2cf {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contentArchive {
    width: 100%;
    max-width: 610px;
    margin: 0 auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentArchive {
      width: auto;
      max-width: none
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentArchive {
      width: auto;
      max-width: none
    }
  }

  .o-contentArchive__select {
    max-width: none;
    padding-bottom: 16px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contentArchive__select {
      margin: 32px 24px 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentArchive__select {
      margin: 32px 24px 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentArchive__select {
      padding-right: 16px;
      padding-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-65ed11aa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-65ed11aa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-paginate__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-paginate__item {
    -webkit-box-align: center;
    align-items: center;
    min-width: 31px;
    height: 32px;
    padding-bottom: 1px;
    margin-right: 4px;
    margin-left: 4px
  }

  .m-paginate__item.active>a {
    color: #2cb696;
    color: var(--customPrimaryColor);
    border-color: #2cb696;
    border-color: var(--customPrimaryColor)
  }

  .m-paginate__item.prev {
    color: #ccc
  }

  .m-paginate__item.prev>a {
    padding: 4px;
    border-color: transparent
  }

  .m-paginate__item.prev:hover {
    color: #787c7b
  }

  .m-paginate__item.next {
    color: #ccc
  }

  .m-paginate__item.next>a {
    padding: 4px;
    border-color: transparent
  }

  .m-paginate__item.next:hover {
    color: #787c7b
  }

  .m-paginate__item>a {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-right: 8px;
    padding-left: 8px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 32px;
    font-size: 14px
  }

  @media only screen and (min-width:769px) {
    .m-paginate__item>a:hover {
      color: #2cb696;
      color: var(--customPrimaryColor)
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-37bb7f93 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-37bb7f93 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contentFollow {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 620px;
    margin: 0 auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contentFollow {
      margin: 32px auto
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentFollow {
      margin: 32px auto
    }
  }

  .o-contentFollow__userList {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentFollow__userList {
      margin-right: 40px;
      margin-left: 40px
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentFollow__userList {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-contentFollow__item+.o-contentFollow__item {
    border-top: 1px solid #f2f2f2
  }

  .o-contentFollow__pagenate {
    margin-top: 24px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-059aa838 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-059aa838 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contentStore {
    width: 100%;
    max-width: 940px;
    margin: 0 auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentStore {
      width: auto
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentStore {
      width: auto;
      margin: 16px
    }
  }

  .o-contentStore__body {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contentStore__body {
      padding: 32px 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentStore__body {
      margin: 32px 24px
    }
  }

  .o-contentStore__item {
    display: -webkit-box;
    display: flex;
    width: calc(33.333% - 16px);
    margin-bottom: 24px
  }

  @media only screen and (min-width:769px) {
    .o-contentStore__item:nth-child(3n+2):last-child {
      margin-right: calc(33.333% + 8px)
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentStore__item {
      width: calc(50% - 12px)
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentStore__item {
      width: 100%;
      margin-bottom: 16px
    }
  }

  .o-contentStore__empty {
    margin-right: auto;
    margin-left: auto
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-04baf233 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-04baf233 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-magazineCreateCard {
    position: relative;
    width: 100%;
    min-height: 170px
  }

  .o-magazineCreateCard__button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 3px
  }

  @media only screen and (min-width:769px) {
    .o-magazineCreateCard__button {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-magazineCreateCard__button:hover {
      border: 1px solid #ccc
    }
  }

  .o-magazineCreateCard__icon {
    margin-bottom: 8px;
    color: #a8abb1
  }

  .o-magazineCreateCard__label {
    display: block;
    font-weight: 700;
    color: #a8abb1;
    text-align: center;
    font-size: 14px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-848b5a7c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-848b5a7c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contentMagazine {
    max-width: 940px;
    margin: 0 auto
  }

  .o-contentMagazine__list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contentMagazine__list {
      margin: 32px 24px 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentMagazine__list {
      margin: 32px 24px 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentMagazine__list {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      padding: 0 16px
    }
  }

  .o-contentMagazine__card {
    display: -webkit-box;
    display: flex;
    width: calc(50% - 8px);
    margin-bottom: 16px
  }

  @media only screen and (max-width:479px) {
    .o-contentMagazine__card {
      width: 100%;
      margin-bottom: 0
    }

    .o-contentMagazine__card+.o-contentMagazine__card {
      margin-top: 16px
    }
  }

  .o-contentMagazine__more {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 300px;
    padding-top: 24px;
    margin: 0 auto
  }

  @media only screen and (max-width:479px) {
    .o-contentMagazine__more {
      width: auto;
      padding: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-b146aa00 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-b146aa00 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-multipleImages {
    position: relative
  }

  .m-multipleImages:before {
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    content: ""
  }

  .m-multipleImages__multipleImagesContainer {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 100%
  }

  .m-multipleImages__multipleImages {
    display: -webkit-box;
    display: flex;
    flex-basis: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin-right: 4px
  }

  .m-multipleImages__multipleImages:last-child {
    margin-right: 0
  }

  .m-multipleImages__imageContainer {
    position: relative;
    height: 100%;
    margin-bottom: 4px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
  }

  .m-multipleImages__imageContainer:last-child {
    margin-bottom: 0
  }

  .m-multipleImages__imageContainer[data-view-only=true] {
    cursor: pointer
  }

  .m-multipleImages__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
  }

  .m-multipleImages__imageDeleteButton {
    position: absolute;
    top: 8px;
    right: 8px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #fff;
    cursor: pointer;
    background-color: #222;
    border-radius: 50%;
    opacity: .7
  }

  @media only screen and (min-width:769px) {
    .m-multipleImages__imageDeleteButton {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-multipleImages__imageDeleteButton:hover {
      opacity: 1
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-048bb43a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-048bb43a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-privacySettings {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    max-width: 200px;
    padding: 8px;
    margin-right: auto;
    cursor: pointer;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .m-privacySettings {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-privacySettings:hover {
      border-color: #ccc
    }
  }

  @media only screen and (max-width:359px) {
    .m-privacySettings {
      max-width: 156px
    }
  }

  .m-privacySettings__currentSetting {
    margin-left: 4px;
    font-size: 14px
  }

  @media only screen and (max-width:359px) {
    .m-privacySettings__currentSetting {
      font-size: 12px
    }
  }

  .m-privacySettings__dropdownIcon {
    justify-self: flex-end;
    margin-left: auto
  }

  .m-privacySettings__selector {
    position: absolute;
    top: 38px;
    left: -1px;
    z-index: 1;
    width: calc(100% + 30px);
    padding: 16px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 0 4px 4px 4px
  }

  .m-privacySettings__kindSelector {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%
  }

  .m-privacySettings__kindSelector+.m-privacySettings__kindSelector {
    margin-top: 16px
  }

  .m-privacySettings__itemText {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 0 8px
  }

  .m-privacySettings__itemName {
    font-weight: 700;
    font-size: 12px
  }

  .m-privacySettings__itemDescription {
    color: #787c7b;
    font-size: 10px
  }

  .m-privacySettings__itemInput {
    width: 24px;
    height: 24px
  }

  .m-privacySettings__itemInput--check {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-privacySettings__itemInputCheck {
    align-self: center;
    justify-self: center
  }

  .m-privacySettings__planSelector {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    padding-left: 8px;
    margin-top: 8px
  }

  .m-privacySettings__planSelector:first-child {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #e6e6e6
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-530dd1d4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-530dd1d4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circlePostEditor {
    box-sizing: border-box;
    padding: 24px;
    margin-bottom: 24px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .o-circlePostEditor[data-mode=edit] {
    padding: 16px;
    border-width: 1px;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-circlePostEditor {
      padding: 16px;
      margin-bottom: 8px;
      border-width: 0 0 1px;
      border-radius: 0
    }
  }

  .o-circlePostEditor__inputTitle:not(:root) {
    height: 36px;
    padding: 0;
    margin-bottom: 8px;
    font-weight: 700;
    resize: none;
    border-color: transparent;
    font-size: 24px
  }

  .o-circlePostEditor__inputTitle:not(:root):focus,
  .o-circlePostEditor__inputTitle:not(:root):not(:disabled):hover {
    border-color: transparent
  }

  .o-circlePostEditor__inputBody:not(:root) {
    padding: 0;
    margin-bottom: 8px;
    resize: none;
    border-color: transparent
  }

  .o-circlePostEditor__inputBody:not(:root):focus {
    border-color: transparent
  }

  .o-circlePostEditor__imageLoading,
  .o-circlePostEditor__images {
    margin-bottom: 16px
  }

  .o-circlePostEditor__images:empty {
    margin-bottom: 0
  }

  .o-circlePostEditor__footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin-top: 40px
  }

  @media only screen and (max-width:479px) {
    .o-circlePostEditor__footer {
      flex-wrap: wrap;
      margin-top: 24px
    }
  }

  .o-circlePostEditor__buttons {
    display: -webkit-box;
    display: flex;
    margin-left: 16px
  }

  @media only screen and (max-width:479px) {
    .o-circlePostEditor__buttons {
      margin-top: 16px
    }
  }

  .o-circlePostEditor__imageUpload {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 16px;
    color: #fff;
    cursor: pointer;
    background-color: #a8abb1;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .o-circlePostEditor__imageUpload {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circlePostEditor__imageUpload:hover {
      background-color: #787c7b
    }
  }

  .o-circlePostEditor__cancel {
    margin-right: 8px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-948c1808 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-948c1808 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleReplyEditor {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #e6e6e6
  }

  .o-circleReplyEditor[data-mode=edit] {
    padding-top: 0;
    margin-top: 0;
    border-top-color: transparent
  }

  .o-circleReplyEditor__creatorIcon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 50%
  }

  [data-mode=edit] .o-circleReplyEditor__creatorIcon {
    display: none
  }

  .o-circleReplyEditor__textarea:not(:root) {
    resize: none;
    border-color: transparent
  }

  .o-circleReplyEditor__textarea:not(:root):focus {
    border-color: transparent
  }

  .o-circleReplyEditor__lower,
  .o-circleReplyEditor__upper {
    display: -webkit-box;
    display: flex
  }

  .o-circleReplyEditor__lower {
    -webkit-box-pack: end;
    justify-content: flex-end
  }

  .o-circleReplyEditor__imageLoading,
  .o-circleReplyEditor__images {
    margin-bottom: 16px
  }

  .o-circleReplyEditor__images:empty {
    margin-bottom: 0
  }

  .o-circleReplyEditor__imageUpload {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 16px;
    color: #fff;
    cursor: pointer;
    background-color: #a8abb1;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .o-circleReplyEditor__imageUpload {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circleReplyEditor__imageUpload:hover {
      background-color: #787c7b
    }
  }

  .o-circleReplyEditor__cancel {
    margin-right: 16px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-97833a9c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-97833a9c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleBoardViewMore {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .o-circleBoardViewMore__loading {
    margin: 8px 0
  }

  .o-circleBoardViewMore__label {
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px;
    cursor: pointer
  }

  .o-circleBoardViewMore__label:hover {
    text-decoration: underline
  }

  .o-circleBoardViewMore__numbers {
    font-size: 12px;
    color: #a8abb1
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-37e2ea2b {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-37e2ea2b {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleBoardCreator {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  .o-circleBoardCreator__icon {
    margin-right: 8px
  }

  .o-circleBoardCreator__iconImg {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%
  }

  .o-circleBoardCreator__info {
    font-size: 12px
  }

  .o-circleBoardCreator__creatorName {
    display: block;
    word-break: break-all
  }

  .o-circleBoardCreator__infoSub {
    display: -webkit-box;
    display: flex;
    color: #787c7b
  }

  .o-circleBoardCreator__date {
    display: block;
    margin-right: 8px
  }

  .o-circleBoardCreator__date[data-has-link=true]:hover {
    text-decoration: underline
  }

  .o-circleBoardCreator__permission[data-is-author=true]:hover {
    text-decoration: underline;
    cursor: pointer
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-a03e4e9c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-a03e4e9c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleCommentItem {
    margin-top: 24px
  }

  .o-circleCommentItem__creatorInfo {
    margin-bottom: 8px
  }

  .o-circleCommentItem__main {
    box-sizing: border-box;
    padding-left: 40px
  }

  .o-circleCommentItem__body {
    margin-bottom: 8px;
    font-size: 14px;
    white-space: pre-line
  }

  .o-circleCommentItem__body a {
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  @media only screen and (min-width:769px) {
    .o-circleCommentItem__body a {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circleCommentItem__body a:hover {
      color: #228d74;
      color: var(--customPrimaryDarkenColor)
    }
  }

  .o-circleCommentItem__readMore {
    margin-bottom: 8px;
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px;
    cursor: pointer
  }

  .o-circleCommentItem__image {
    width: 100%;
    max-height: 400px;
    margin-bottom: 8px;
    -o-object-fit: contain;
    object-fit: contain;
    cursor: pointer
  }

  .o-circleCommentItem__viewmore {
    padding-top: 16px;
    margin-top: 24px;
    border-top: 1px solid #e6e6e6
  }

  .o-circleCommentItem__viewmore:empty {
    padding-top: 0;
    margin-top: 0;
    border-top: none
  }

  .o-circleCommentItem__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start
  }

  .o-circleCommentItem__actionItem {
    margin-right: 16px
  }

  .o-circleCommentItem__actionItem:empty {
    margin-right: 0
  }

  .o-circleCommentItem__actionItem--more {
    margin-right: 0;
    margin-left: auto
  }

  .o-circleCommentItem__reply {
    color: #787c7b;
    font-size: 14px;
    cursor: pointer
  }

  .o-circleCommentItem__reply:hover {
    text-decoration: underline
  }

  .o-circleCommentItem__more {
    color: #a8abb1
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7983e6be {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7983e6be {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-viewComments {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-top: 16px
  }

  .o-viewComments__label {
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px;
    cursor: pointer
  }

  .o-viewComments__label:hover {
    text-decoration: underline
  }

  .o-viewComments__count {
    font-size: 12px;
    color: #a8abb1
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-315cc840 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-315cc840 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleBlurPost {
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  .o-circleBlurPost__title {
    padding: 16px;
    font-weight: 700;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 3px 3px 0 0;
    font-size: 24px
  }

  .o-circleBlurPost__content {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 160px;
    background-color: #f7f9f9;
    border-radius: 0 0 3px 3px
  }

  .o-circleBlurPost__contentText {
    color: #a8abb1;
    text-align: center;
    white-space: pre-wrap;
    font-size: 14px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7ac7db14 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7ac7db14 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circlePost:not(:last-child) {
    margin-bottom: 24px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-circlePost:not(:last-child) {
      margin-bottom: 16px
    }
  }

  @media only screen and (max-width:768px) {
    .o-circlePost:not(:last-child) {
      margin-bottom: 8px
    }
  }

  .o-circlePost__post {
    box-sizing: border-box;
    padding: 24px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-circlePost__post {
      padding: 16px;
      border-width: 0 0 1px;
      border-radius: 0
    }
  }

  .o-circlePost__title {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 700
  }

  .o-circlePost__creatorinfo {
    margin-bottom: 8px
  }

  .o-circlePost__body {
    margin-bottom: 8px;
    font-size: 14px;
    white-space: pre-line
  }

  .o-circlePost__body a {
    color: #2cb696;
    color: var(--customPrimaryColor)
  }

  @media only screen and (min-width:769px) {
    .o-circlePost__body a {
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circlePost__body a:hover {
      color: #228d74;
      color: var(--customPrimaryDarkenColor)
    }
  }

  .o-circlePost__readMore {
    margin-bottom: 8px;
    color: #2cb696;
    color: var(--customPrimaryColor);
    font-size: 14px;
    cursor: pointer
  }

  .o-circlePost__image {
    width: 100%;
    margin-bottom: 8px
  }

  .o-circlePost__action {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start
  }

  .o-circlePost__actionItem {
    margin-right: 16px
  }

  .o-circlePost__actionItem--more {
    margin-right: 0;
    margin-left: auto
  }

  .o-circlePost__reply {
    color: #787c7b;
    font-size: 14px;
    cursor: pointer
  }

  .o-circlePost__reply:hover {
    text-decoration: underline
  }

  .o-circlePost__more {
    color: #a8abb1
  }

  .o-circlePost__comments {
    margin-top: 24px;
    border-top: 1px solid #e6e6e6
  }

  .o-circlePost__comments[data-empty=true] {
    margin-top: 0;
    border-top: none
  }

  .o-circlePost__commentsViewmore {
    padding-top: 16px
  }

  .o-circlePost__commentsViewmore:empty {
    padding-top: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5e28d583 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5e28d583 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleMember__pinnedPostMessage {
    margin-bottom: 8px;
    font-size: 12px;
    color: #787c7b
  }

  @media only screen and (max-width:479px) {
    .o-circleMember__pinnedPostMessage {
      padding: 16px 8px 0;
      margin-bottom: 4px
    }
  }

  .o-circleMember__pinnedPostIcon {
    margin-right: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-07df729e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-07df729e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-timelineNoteCard__pinned {
    height: 16px;
    margin-top: -24px;
    margin-bottom: 8px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-440f660a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-440f660a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleDefault {
    width: 100%;
    max-width: 940px;
    margin: 0 auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-circleDefault {
      padding: 32px 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault {
      padding: 16px
    }
  }

  .o-circleDefault__showMemberPage {
    display: block;
    width: 280px;
    margin: 0 0 16px auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-circleDefault__showMemberPage {
      width: 100%
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-circleDefault__showMemberPage {
      width: 100%
    }
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__showMemberPage {
      width: 100%;
      margin-top: 8px;
      margin-bottom: 24px
    }
  }

  .o-circleDefault__summary {
    padding: 48px 80px;
    margin-bottom: 40px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-circleDefault__summary {
      margin-bottom: 32px
    }
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__summary {
      padding: 24px 16px;
      margin-bottom: 24px
    }
  }

  .o-circleDefault__summaryTitle {
    margin-bottom: 40px;
    font-size: 24px;
    font-weight: 700;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__summaryTitle {
      margin-bottom: 24px
    }
  }

  .o-circleDefault__summaryDescription {
    white-space: pre-line;
    font-size: 16px
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__summaryDescription {
      font-size: 14px
    }
  }

  .o-circleDefault__summaryAvatarList {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 32px
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__summaryAvatarList {
      margin-top: 24px
    }
  }

  .o-circleDefault__intro {
    margin-bottom: 40px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-circleDefault__intro {
      margin-bottom: 32px
    }
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__intro {
      margin-bottom: 24px
    }
  }

  .o-circleDefault__section {
    margin-bottom: 40px
  }

  .o-circleDefault__section:last-child {
    margin-bottom: 0
  }

  .o-circleDefault__sectionTitle {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    text-align: center
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__sectionTitle {
      font-size: 18px
    }
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__relatedArticle {
      overflow: hidden;
      border: 1px solid #e6e6e6;
      border-radius: 4px
    }
  }

  .o-circleDefault__planList {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
  }

  .o-circleDefault__planItem {
    display: -webkit-box;
    display: flex;
    width: calc(33.333% - 16px);
    padding: 16px;
    margin-bottom: 24px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .o-circleDefault__planItem:only-child {
      margin-right: auto;
      margin-left: auto
    }

    .o-circleDefault__planItem:nth-child(3n+2):last-child {
      margin-right: calc(33.333% + 8px)
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-circleDefault__planItem {
      width: calc(50% - 8px);
      margin-bottom: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .o-circleDefault__planItem {
      width: 100%;
      margin-bottom: 16px
    }
  }

  .o-circleDefault__circleDetail {
    width: 100%;
    max-width: 608px;
    margin: 0 auto
  }

  .o-circleDefault__blurPost {
    margin-bottom: 40px
  }

  .o-circleDefault__more {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
  }

  .o-circleDefault__moreButton {
    width: 300px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-72b6282a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-72b6282a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contentCircle {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 940px;
    margin: 0 auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentCircle {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      width: auto;
      padding: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentCircle {
      width: auto;
      background-color: #f7f9f9
    }
  }

  .o-contentCircle__main {
    width: 100%;
    max-width: 610px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contentCircle__main {
      -webkit-box-ordinal-group: 3;
      order: 2;
      max-width: none
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentCircle__main {
      -webkit-box-ordinal-group: 3;
      order: 2;
      max-width: none
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentCircle__main {
      max-width: none
    }
  }

  .o-contentCircle__onboarding {
    margin-bottom: 16px
  }

  .o-contentCircle__onboarding:empty {
    display: none
  }

  @media only screen and (max-width:479px) {
    .o-contentCircle__onboarding {
      margin-bottom: 0
    }
  }

  .o-contentCircle__aside {
    width: 280px;
    margin-left: auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contentCircle__aside {
      display: none;
      -webkit-box-ordinal-group: 2;
      order: 1;
      width: 100%
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contentCircle__aside {
      display: none;
      -webkit-box-ordinal-group: 2;
      order: 1;
      width: 100%
    }
  }

  @media only screen and (max-width:479px) {
    .o-contentCircle__aside {
      display: none;
      -webkit-box-ordinal-group: 2;
      order: 1;
      width: 100%
    }
  }

  .o-contentCircle__benefits {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (max-width:768px) {
    .o-contentCircle__benefits {
      display: -webkit-box;
      display: flex;
      background-color: transparent;
      border: none;
      -webkit-overflow-scrolling: touch
    }

    .o-contentCircle__benefits:after {
      padding-left: 16px;
      content: ""
    }
  }

  .o-contentCircle__benefitsTitle {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 18px
  }

  @media only screen and (max-width:768px) {
    .o-contentCircle__benefitsTitle {
      display: none
    }
  }

  .o-contentCircle__benefitsItem:not(:last-child) {
    margin-bottom: 8px
  }

  .o-contentCircle__benefitsLink {
    color: #2cb696;
    color: var(--customPrimaryColor);
    text-decoration: underline
  }

  .o-contentCircle__buttonsItem,
  .o-contentCircle__planList {
    margin-bottom: 16px
  }

  .o-contentCircle__members {
    padding: 16px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
  }

  @media only screen and (max-width:768px) {
    .o-contentCircle__members {
      display: -webkit-box;
      display: flex;
      background-color: transparent;
      border: none;
      -webkit-overflow-scrolling: touch
    }

    .o-contentCircle__members:after {
      padding-left: 16px;
      content: ""
    }
  }

  .o-contentCircle__membersTitle {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 18px
  }

  @media only screen and (max-width:768px) {
    .o-contentCircle__membersTitle {
      display: none
    }
  }

  .o-contentCircle__emptyKaizenNotice {
    max-width: 400px;
    padding: 24px;
    margin: auto
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-62809e71 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-62809e71 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-creatorContent {
    padding: 40px 0
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-creatorContent {
      padding: 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-creatorContent {
      padding: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-creatorContent {
      padding: 0
    }
  }

  .o-creatorContent--topic {
    padding: 0
  }

  @media only screen and (max-width:479px) {
    .o-creatorContent__magazine {
      padding: 16px 0 0
    }
  }

  @media only screen and (max-width:479px) {

    .o-creatorContent__archive,
    .o-creatorContent__follow {
      padding: 16px 0 24px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-28d409ab {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-28d409ab {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-largeNotice {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 280px;
    padding: 0 40px;
    overflow: hidden;
    background-color: #41c9b4;
    border-radius: 8px
  }

  @media only screen and (min-width:769px) {
    .o-largeNotice:hover .o-largeNotice__about {
      background-color: hsla(0, 0%, 100%, .8);
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-largeNotice {
      height: 240px;
      min-height: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-largeNotice {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      height: auto;
      min-height: 0;
      padding: 0 16px 16px
    }

    .o-largeNotice:after {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 200px;
      content: "";
      background: -webkit-linear-gradient(top, rgba(65, 201, 180, 0) 50%, #41c9b4 80%);
      background: linear-gradient(180deg, rgba(65, 201, 180, 0) 50%, #41c9b4 80%)
    }
  }

  .o-largeNotice__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2
  }

  .o-largeNotice__main {
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start
  }

  @media only screen and (max-width:479px) {
    .o-largeNotice__main {
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-ordinal-group: 3;
      order: 2
    }
  }

  .o-largeNotice__messageArea {
    display: block;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px #41c9b4;
    font-size: 24px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-largeNotice__messageArea {
      font-size: 18px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-largeNotice__messageArea {
      font-size: 18px
    }
  }

  @media only screen and (max-width:479px) {
    .o-largeNotice__messageArea {
      font-size: 18px;
      margin-bottom: 8px
    }
  }

  .o-largeNotice__image {
    position: absolute;
    right: 10%;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 100% center;
    object-position: 100% center
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-largeNotice__image {
      top: 0;
      right: 0;
      width: 498px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-largeNotice__image {
      top: 0;
      right: 0;
      width: 426px;
      height: 240px
    }
  }

  @media only screen and (max-width:479px) {
    .o-largeNotice__image {
      position: static;
      -webkit-box-ordinal-group: 2;
      order: 1;
      height: 160px;
      margin-bottom: -48px;
      -o-object-position: center center;
      object-position: center center
    }
  }

  .o-largeNotice__about {
    display: -webkit-box;
    display: flex;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #41c9b4;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50px
  }

  @media only screen and (max-width:479px) {
    .o-largeNotice__about {
      padding: 4px 16px;
      font-size: 12px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1508c1a4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1508c1a4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-indexItem {
    position: relative;
    box-sizing: border-box;
    width: 100%
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-indexItem[data-size=medium] {
      max-width: 300px
    }
  }

  .m-indexItem__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%
  }

  .m-indexItem__card {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4%/7.1%;
    box-shadow: 0 2px 4px 0 rgba(34, 34, 34, .2)
  }

  .m-indexItem__cardInner {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .m-indexItem__cardImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #787c7b;
    -o-object-fit: cover;
    object-fit: cover
  }

  .m-indexItem__title {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
  }

  [data-size=large] .m-indexItem__title {
    font-size: 20px
  }

  [data-size=medium] .m-indexItem__title {
    font-size: 16px
  }

  .m-indexItem__creator {
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  [data-size=large] .m-indexItem__creator {
    font-size: 14px
  }

  [data-size=medium] .m-indexItem__creator {
    font-size: 12px
  }

  .m-indexItem__description {
    display: -webkit-box;
    -webkit-box-flex: 1;
    flex: 1;
    overflow: hidden;
    color: #787c7b;
    -webkit-box-orient: vertical
  }

  [data-size=large] .m-indexItem__description {
    font-size: 14px;
    -webkit-line-clamp: 2
  }

  [data-size=medium] .m-indexItem__description {
    font-size: 12px;
    -webkit-line-clamp: 3
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1626d842 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1626d842 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-circleIndex {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 32px
  }

  .o-circleIndex__main {
    width: calc(100% - 312px);
    max-width: calc(100% - 312px);
    margin-right: 32px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-circleIndex__main {
      width: 100%;
      max-width: none;
      margin-right: 0
    }
  }

  @media only screen and (max-width:768px) {
    .o-circleIndex__main {
      width: 100%;
      max-width: none;
      margin-right: 0
    }
  }

  .o-circleIndex__item {
    margin-bottom: 32px
  }

  .o-circleIndex__aside {
    width: 280px
  }

  @media only screen and (max-width:768px) {
    .o-circleIndex__aside {
      width: 100%;
      max-width: none;
      margin-bottom: 32px
    }
  }

  .o-circleIndex__updatedContents {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e6e6e6
  }

  .o-circleIndex__updatedContents:empty {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-circleIndex__updatedContents {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .o-circleIndex__updatedContents {
      display: none
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-circleIndex__option {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .o-circleIndex__option {
      display: none
    }
  }

  .o-circleIndex__optionItem+.o-circleIndex__optionItem {
    margin-top: 16px
  }

  .o-circleIndex__pinnedNoteLink {
    width: 100%
  }

  .o-circleIndex__pinnedNoteImage {
    width: 100%;
    border-radius: 4px
  }

  .o-circleIndex__faqLink {
    display: -webkit-box;
    display: flex;
    font-weight: 700;
    color: #787c7b;
    font-size: 12px
  }

  @media only screen and (min-width:769px) {
    .o-circleIndex__faqLink {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .o-circleIndex__faqLink:hover {
      color: #222
    }
  }

  .o-circleIndex__faqIcon {
    margin-right: 4px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7289895e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7289895e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .t-indexPage {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .t-indexPage--withCategory {
    padding: 0 24px 0 8px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-indexPage--withCategory {
      display: block;
      padding: 0;
      margin: 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-indexPage--withCategory {
      display: block;
      padding: 0;
      margin: 0
    }
  }

  @media only screen and (max-width:479px) {
    .t-indexPage--withCategory {
      display: block;
      padding: 0;
      margin: 0
    }
  }

  @media only screen and (min-width:769px) {
    .t-indexPage__categoryMenu {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 232px;
      height: 100%;
      max-height: 100vh;
      padding-top: 24px;
      padding-right: 16px;
      padding-bottom: 24px;
      margin-right: 24px;
      overflow-y: auto
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-indexPage__categoryMenu {
      position: static;
      top: auto;
      width: 100%;
      height: 50px;
      padding: 16px 0 0;
      overflow: visible;
      background-color: #fff
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-indexPage__categoryMenu {
      width: 100%;
      height: 50px;
      padding-top: 16px;
      background-color: #fff
    }
  }

  @media only screen and (max-width:479px) {
    .t-indexPage__categoryMenu {
      width: 100%;
      height: 50px;
      padding-top: 16px;
      background-color: #fff
    }
  }

  .t-indexPage__body {
    -webkit-box-flex: 1;
    flex: 1;
    padding-top: 24px;
    overflow-x: hidden
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-indexPage__body {
      width: 100%;
      padding-top: 16px
    }
  }

  @media only screen and (max-width:768px) {
    .t-indexPage__body {
      width: 100%;
      padding-top: 16px
    }
  }

  .t-indexPage__header {
    width: 940px;
    margin-bottom: 32px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-indexPage__header {
      width: 100%;
      margin-bottom: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-indexPage__header {
      width: 100%;
      margin-bottom: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .t-indexPage__header {
      width: 100%;
      margin-bottom: 0
    }
  }

  .t-indexPage__updatedContents {
    width: 100%;
    max-width: 940px;
    margin-bottom: 16px
  }

  @media only screen and (min-width:769px) {
    .t-indexPage__updatedContents {
      display: none
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-indexPage__updatedContents {
      padding-left: 16px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-indexPage__updatedContents {
      padding-left: 16px
    }
  }

  .t-indexPage__hero {
    width: 100%
  }

  .t-indexPage__main {
    width: 100%;
    max-width: 1920px;
    padding: 0 24px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-indexPage__main {
      padding: 0;
      overflow: hidden
    }
  }

  @media only screen and (max-width:768px) {
    .t-indexPage__main {
      padding: 0;
      overflow: hidden
    }
  }

  .t-indexPage__onboarding {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 32px
  }

  .t-indexPage__onboarding:empty {
    margin: 0
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-indexPage__onboarding {
      width: auto;
      max-width: none;
      margin: 0 16px 16px
    }
  }

  @media only screen and (max-width:768px) {
    .t-indexPage__onboarding {
      width: auto;
      max-width: none;
      margin: 0 16px 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4b7e6efb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4b7e6efb {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .p-circleIndex__notice {
    margin: 0 24px 56px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .p-circleIndex__notice {
      margin-right: 16px;
      margin-bottom: 32px;
      margin-left: 16px
    }
  }

  @media only screen and (max-width:768px) {
    .p-circleIndex__notice {
      margin-right: 16px;
      margin-bottom: 32px;
      margin-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-contests {
    width: 100%;
    max-width: 940px;
    margin: 0 auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-contests {
      width: auto;
      max-width: none;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contests {
      width: auto;
      max-width: none;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .o-contests {
      width: 100%
    }
  }

  .o-contests__column {
    margin: 24px auto
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contests__column {
      margin-right: 16px;
      margin-bottom: 48px;
      margin-left: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .o-contests__column {
      margin-right: 16px;
      margin-bottom: 32px;
      margin-left: 16px
    }
  }

  .o-contests__column--contest .o-contests__item {
    width: calc(50% - 8px)
  }

  @media only screen and (max-width:479px) {
    .o-contests__column--contest .o-contests__item {
      width: 100%
    }
  }

  .o-contests__columnTitle {
    -webkit-box-align: center;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #222
  }

  .o-contests__columnTitle,
  .o-contests__itemBox {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
  }

  .o-contests__itemBox {
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    align-items: stretch
  }

  .o-contests__itemBox:after {
    width: calc(33.333% - 8px);
    content: ""
  }

  .o-contests__item {
    width: calc(33.333% - 8px);
    margin-bottom: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-contests__item {
      width: calc(50% - 8px);
      margin-bottom: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .o-contests__item {
      width: 100%;
      margin-bottom: 8px
    }

    .o-contests__item:last-child {
      margin-bottom: 0
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-2a724efc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2a724efc {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .p-contests {
    padding-top: 24px;
    background: #f7f9f9
  }

  .p-contests__menu {
    width: 100%;
    max-width: 940px;
    margin-right: auto;
    margin-left: auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .p-contests__menu {
      width: 620px;
      max-width: none;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .p-contests__menu {
      width: 620px;
      max-width: none;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .p-contests__menu {
      width: auto;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .p-contests__notice {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 32px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .p-contests__notice {
      width: auto;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media only screen and (max-width:768px) {
    .p-contests__notice {
      width: auto;
      margin-right: 16px;
      margin-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-e220bcce {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e220bcce {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-menu {
    display: -webkit-box;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
  }

  .o-menu::-webkit-scrollbar {
    display: none
  }

  @media only screen and (max-width:479px) {
    .o-menu__item:first-child {
      padding-left: 8px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-fa72c480 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-fa72c480 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-setting {
    margin-left: 8px
  }

  .o-setting__icon {
    color: #a8abb1
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6816fbe5 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6816fbe5 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-navbar--liquid .o-navbar__header {
    width: 100%
  }

  @media only screen and (max-width:479px) {
    .o-navbar--liquid .o-navbar__header {
      padding-right: 16px;
      padding-left: 16px
    }
  }

  .o-navbar__header {
    padding-right: 24px;
    padding-left: 24px;
    margin: 24px auto 16px
  }

  @media only screen and (max-width:479px) {
    .o-navbar__header {
      padding-right: 16px;
      padding-left: 16px;
      margin-top: 16px
    }
  }

  .o-navbar__headerBreadcrumb {
    margin-bottom: 8px
  }

  .o-navbar__headerContent {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
  }

  @media only screen and (max-width:479px) {
    .o-navbar__headerContent {
      -webkit-box-pack: justify;
      justify-content: space-between
    }
  }

  .o-navbar__headerTitle {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  @media only screen and (max-width:479px) {
    .o-navbar__headerTitle {
      -webkit-box-flex: 1;
      flex: 1
    }
  }

  .o-navbar__headerFollow {
    margin-left: 16px
  }

  .o-navbar__headerSettings {
    margin-left: 8px
  }

  .o-navbar__body {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 0 24px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6
  }

  .o-navbar__body--type_official {
    border-bottom: 1px solid #f2f2f2
  }

  @media only screen and (min-width:769px) {
    .o-navbar__body--type_official {
      padding: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-navbar__body--type_official {
      padding: 0
    }
  }

  .o-navbar__body--type_normal {
    margin-top: -1px
  }

  @media only screen and (max-width:479px) {
    .o-navbar__body--type_normal {
      padding: 0
    }
  }

  .o-navbar__inner {
    display: -webkit-box;
    display: flex;
    width: 100%;
    max-width: 1920px;
    padding: 0 24px 0 8px;
    margin: 0 auto 0 0
  }

  @media only screen and (max-width:479px) {
    .o-navbar__inner {
      padding: 0
    }
  }

  .o-navbar__side {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 8px;
    margin-left: auto
  }

  @media only screen and (max-width:479px) {
    .o-navbar__side {
      padding-right: 16px
    }
  }

  .o-navbar__side:before {
    position: absolute;
    top: 0;
    left: -16px;
    display: block;
    width: 16px;
    height: 100%;
    content: "";
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff)
  }

  .o-navbar__breadcrumb {
    margin: 16px 0 8px
  }

  @media only screen and (max-width:479px) {
    .o-navbar__breadcrumb {
      padding-left: 16px
    }
  }

  .o-navbar__breadcrumbContainer {
    display: -webkit-box;
    display: flex;
    width: 100%;
    max-width: 940px;
    margin: 16px auto 0
  }

  @media only screen and (max-width:479px) {
    .o-navbar__breadcrumbContainer {
      padding-right: 16px;
      padding-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-865e95a2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-865e95a2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-privateBar {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    background-color: #f95
  }

  .m-privateBar__text {
    margin-right: 16px;
    font-size: 14px;
    color: #fff
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-09f36641 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-09f36641 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-empty {
    padding: 32px;
    text-align: center;
    background-color: #f7f9f9;
    border: 1px solid #f2f2f2;
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .m-empty {
      padding: 16px;
      text-align: left
    }
  }

  .m-empty__title {
    font-size: 14px;
    font-weight: 700;
    color: #787c7b
  }

  @media only screen and (max-width:479px) {
    .m-empty__title {
      font-size: 12px
    }
  }

  .m-empty__description {
    margin-top: 8px;
    color: #787c7b;
    font-size: 12px
  }

  @media only screen and (max-width:479px) {
    .m-empty__description {
      font-size: 10px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-98abb194 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-98abb194 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-mainCarousel {
    position: relative;
    width: 100%;
    margin-bottom: 16px
  }

  .swiper-container {
    width: 100%
  }

  .swiper-slide {
    display: -webkit-box;
    display: flex;
    width: 80%;
    max-width: 520px;
    height: auto;
    padding: 0 8px;
    opacity: .4
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-slide {
      width: calc(100% - 64px)
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .swiper-slide {
      width: calc(100% - 64px)
    }
  }

  @media only screen and (max-width:479px) {
    .swiper-slide {
      width: calc(100% - 64px);
      padding: 0 4px
    }
  }

  .swiper-slide-next {
    -webkit-transition: opacity .2s ease-in .1s;
    transition: opacity .2s ease-in .1s
  }

  @media only screen and (max-width:479px) {
    .swiper-slide-next {
      opacity: 1
    }

    .swiper-slide-next .m-pickupCircles__body {
      opacity: 0
    }
  }

  .swiper-slide-prev {
    -webkit-transition: opacity .2s ease-in .1s;
    transition: opacity .2s ease-in .1s
  }

  @media only screen and (max-width:479px) {
    .swiper-slide-prev {
      opacity: 1
    }

    .swiper-slide-prev .m-pickupCircles__body {
      opacity: 0
    }
  }

  .swiper-slide-active {
    opacity: 1;
    -webkit-transition: opacity .2s ease-in .1s;
    transition: opacity .2s ease-in .1s
  }

  @media only screen and (max-width:479px) {
    .swiper-slide-active .m-pickupCircles__body {
      opacity: 1
    }
  }

  .swiper-prev {
    position: absolute;
    left: 0;
    padding: 8px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-prev {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-prev:hover {
      color: #787c7b
    }
  }

  .swiper-next {
    position: absolute;
    right: 0;
    padding: 8px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 50%
  }

  @media only screen and (min-width:769px) {
    .swiper-next {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .swiper-next:hover {
      color: #787c7b
    }
  }

  .swiper-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 940px;
    min-height: 40px;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .swiper-nav {
      display: none
    }
  }

  @media only screen and (max-width:768px) {
    .swiper-nav {
      display: none
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-385aff6c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-385aff6c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-carouselItem {
    width: 100%;
    overflow: hidden;
    border-radius: 4px
  }

  .m-carouselItem,
  .m-carouselItem__cover {
    position: relative
  }

  .m-carouselItem__cover:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%;
    content: ""
  }

  .m-carouselItem__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }

  .m-carouselItem__body,
  .m-carouselItem__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }

  .m-carouselItem__body {
    z-index: 3;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: calc(100% - 32px);
    padding: 16px;
    background: -webkit-linear-gradient(bottom, rgba(34, 34, 34, .4), rgba(34, 34, 34, 0));
    background: linear-gradient(0deg, rgba(34, 34, 34, .4), rgba(34, 34, 34, 0))
  }

  .m-carouselItem__title {
    display: -webkit-box;
    font-size: 20px;
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 5px rgba(34, 34, 34, .5);
    letter-spacing: .06em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  @media only screen and (max-width:479px) {
    .m-carouselItem__title {
      font-size: 16px
    }
  }

  .m-carouselItem__status {
    display: -webkit-box;
    display: flex
  }

  .m-carouselItem__suki {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    font-size: 12px;
    margin-right: 16px;
    color: #fff;
    text-shadow: 0 0 5px rgba(34, 34, 34, .5)
  }

  .m-carouselItem__author {
    display: flex;
    display: -webkit-box;
    -webkit-box-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
  }

  .m-carouselItem__authorName {
    font-size: 12px;
    color: #fff;
    text-shadow: 0 0 5px rgba(34, 34, 34, .5)
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-0cff4946 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-0cff4946 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-mediaNoteForMobile {
    width: 100%;
    height: 100%
  }

  .o-mediaNoteForMobile__main {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    cursor: pointer;
    background-color: transparent
  }

  @media only screen and (min-width:769px) {
    .o-mediaNoteForMobile__main:hover:before {
      position: absolute;
      top: -12px;
      right: -12px;
      bottom: -12px;
      left: -12px;
      z-index: -1;
      z-index: 0;
      display: block;
      pointer-events: none;
      content: "";
      background-color: #f7f9f9;
      border-radius: 4px
    }
  }

  .o-mediaNoteForMobile__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block
  }

  .o-mediaNoteForMobile__eyecatch {
    -webkit-box-ordinal-group: 3;
    order: 2;
    width: 106px;
    margin-left: 16px
  }

  .o-mediaNoteForMobile__eyecatchInner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px
  }

  .o-mediaNoteForMobile__eyecatchInner:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%;
    content: ""
  }

  .o-mediaNoteForMobile__eyecatchInner--movie {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
  }

  .o-mediaNoteForMobile__eyecatchInner img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }

  .o-mediaNoteForMobile__eyecatchInner img.o-mediaNoteForMobile__userIcon {
    width: 80px;
    height: 80px;
    margin: auto;
    border: 4px solid #fff;
    border-radius: 50%
  }

  .o-mediaNoteForMobile__eyecatchMovie {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%
  }

  .o-mediaNoteForMobile__imageCount {
    font-size: 12px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 1;
    padding: 2px 4px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: rgba(34, 34, 34, .7);
    border-radius: 4px
  }

  @media only screen and (max-width:479px) {
    .o-mediaNoteForMobile__imageCount {
      font-size: 10px;
      right: 0;
      bottom: 0;
      border-radius: 4px 0 0 0
    }
  }

  .o-mediaNoteForMobile__pinned {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1
  }

  .o-mediaNoteForMobile__body {
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-ordinal-group: 2;
    order: 1
  }

  .o-mediaNoteForMobile__footer {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-ordinal-group: 4;
    order: 3;
    width: 100%;
    padding: 0;
    margin-top: 8px;
    pointer-events: none
  }

  .o-mediaNoteForMobile__status {
    padding-right: 16px;
    overflow: hidden
  }

  .o-mediaNoteForMobile__message {
    position: relative;
    z-index: 3;
    -webkit-box-ordinal-group: 5;
    order: 4;
    width: 100%;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f2f2f2
  }

  .o-mediaNoteForMobile__message:empty {
    display: none
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-43478e56 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-43478e56 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-contentNote {
    width: 100%
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-04fc9bed {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-04fc9bed {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-basicList--type_custom_links,
  .m-basicList--type_oembed {
    width: 100%
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--1column .m-basicList__item {
      padding: 0 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--1column .m-basicList__item {
      padding: 0 24px
    }
  }

  @media only screen and (max-width:479px) {
    .m-basicList--1column .m-basicList__item {
      padding: 0 16px
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--2column {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      justify-content: space-between
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--2column {
      padding: 0 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--2column {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      justify-content: space-between;
      padding: 0 24px
    }
  }

  @media only screen and (max-width:479px) {
    .m-basicList--2column {
      padding: 0 16px
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--2column .m-basicList__item {
      width: calc(50% - 8px)
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--2column .m-basicList__item {
      width: calc(50% - 8px)
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--2column .m-basicList__item {
      width: calc(50% - 8px)
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--3column {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      justify-content: space-between
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--3column {
      padding: 0 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--3column {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      justify-content: space-between;
      padding: 0 24px
    }
  }

  @media only screen and (max-width:479px) {
    .m-basicList--3column {
      padding: 0 16px
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--3column .m-basicList__item {
      width: calc(33.33333% - 8px)
    }

    .m-basicList--3column .m-basicList__item:nth-child(3n+2):last-child {
      margin-right: calc(33.33333% + 4px);
      margin-left: auto
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--3column .m-basicList__item {
      width: calc(33.33333% - 8px)
    }

    .m-basicList--3column .m-basicList__item:nth-child(3n+2):last-child {
      margin-right: calc(33.33333% + 4px);
      margin-left: auto
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--3column .m-basicList__item {
      width: calc(33.33333% - 8px)
    }

    .m-basicList--3column .m-basicList__item:nth-child(3n+2):last-child {
      margin-right: calc(33.33333% + 4px);
      margin-left: auto
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--liquid {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-align: strech;
      align-items: strech;
      -webkit-box-pack: start;
      justify-content: flex-start;
      margin-right: -12px;
      margin-left: -12px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--liquid {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-align: strech;
      align-items: strech;
      -webkit-box-pack: start;
      justify-content: flex-start;
      margin-right: -8px;
      margin-left: -8px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--liquid {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-align: strech;
      align-items: strech;
      -webkit-box-pack: start;
      justify-content: flex-start
    }
  }

  @media only screen and (max-width:479px) {
    .m-basicList--liquid {
      padding-right: 16px;
      padding-left: 16px
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--liquid .m-basicList__item {
      display: -webkit-box;
      display: flex;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-box-pack: center;
      justify-content: center;
      width: 100%;
      min-width: 240px;
      margin-bottom: 24px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--liquid .m-basicList__item {
      display: -webkit-box;
      display: flex;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-box-pack: center;
      justify-content: center;
      width: 100%;
      min-width: 240px;
      margin-bottom: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--liquid .m-basicList__item {
      display: -webkit-box;
      display: flex;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-box-pack: center;
      justify-content: center;
      width: 100%;
      min-width: 240px;
      margin-bottom: 24px
    }
  }

  @media only screen and (min-width:769px) {

    .m-basicList--liquid:after,
    .m-basicList--liquid:before {
      display: -webkit-box;
      display: flex;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-box-pack: center;
      justify-content: center;
      width: 100%;
      min-width: 240px;
      height: 0;
      content: ""
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {

    .m-basicList--liquid:after,
    .m-basicList--liquid:before {
      display: -webkit-box;
      display: flex;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-box-pack: center;
      justify-content: center;
      width: 100%;
      min-width: 232px;
      height: 0;
      content: ""
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {

    .m-basicList--liquid:after,
    .m-basicList--liquid:before {
      display: -webkit-box;
      display: flex;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-box-pack: center;
      justify-content: center;
      width: 100%;
      min-width: 232px;
      height: 0;
      content: ""
    }
  }

  @media only screen and (max-width:479px) {

    .m-basicList--liquid:after,
    .m-basicList--liquid:before {
      display: none
    }
  }

  .m-basicList--liquid:before {
    -webkit-box-ordinal-group: 2;
    order: 1
  }

  .m-basicList--liquid .m-basicList__itemContent {
    width: calc(100% - 24px)
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--liquid .m-basicList__itemContent {
      width: calc(100% - 16px)
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--liquid .m-basicList__itemContent {
      width: calc(100% - 16px)
    }
  }

  @media only screen and (max-width:479px) {
    .m-basicList--liquid .m-basicList__itemContent {
      width: 100%
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--liquid_side_column {
      max-width: 260px;
      padding: 0
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--liquid_side_column {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      padding: 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--liquid_side_column {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      padding: 0
    }
  }

  .m-basicList--liquid_side_column .m-basicList__item {
    width: 100%
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--liquid_side_column .m-basicList__item {
      min-width: 240px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--liquid_side_column .m-basicList__item {
      min-width: 240px
    }
  }

  @media only screen and (max-width:479px) {
    .m-basicList--liquid_side_column .m-basicList__item {
      width: 240px;
      margin-right: 16px
    }

    .m-basicList--liquid_side_column .m-basicList__item:empty {
      width: 0;
      margin-right: 0
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--type_notes .m-basicList__item {
      margin-bottom: 40px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--type_notes .m-basicList__item {
      margin-bottom: 40px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--type_notes .m-basicList__item {
      margin-bottom: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .m-basicList--type_notes .m-basicList__item {
      margin-bottom: 24px
    }
  }

  @media only screen and (min-width:769px) {
    .m-basicList--type_notesSmall .m-basicList__item {
      margin-bottom: 32px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-basicList--type_notesSmall .m-basicList__item {
      margin-bottom: 32px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-basicList--type_notesSmall .m-basicList__item {
      margin-bottom: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .m-basicList--type_notesSmall .m-basicList__item {
      margin-bottom: 16px
    }
  }

  @media only screen and (min-width:769px) {

    .m-basicList--type_notes.m-basicList--2column .m-basicList__item,
    .m-basicList--type_notesSmall.m-basicList--2column .m-basicList__item {
      width: calc(50% - 16px)
    }
  }

  @media only screen and (min-width:769px) {

    .m-basicList--type_notes.m-basicList--3column .m-basicList__item,
    .m-basicList--type_notesSmall.m-basicList--3column .m-basicList__item {
      width: calc(33.33333% - 16px)
    }
  }

  .m-basicList__item {
    display: -webkit-box;
    display: flex;
    margin-bottom: 16px
  }

  .m-basicList__item:empty {
    margin: 0
  }

  .m-basicList__customLink {
    margin-bottom: 16px
  }

  .m-basicList__itemContent {
    display: -webkit-box;
    display: flex;
    width: 100%
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6058d656 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6058d656 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-topicSetting {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: 8px
  }

  .m-topicSetting__icon {
    margin-left: 8px;
    color: #a8abb1;
    pointer-events: auto;
    cursor: pointer
  }

  @media only screen and (min-width:769px) {
    .m-topicSetting__icon {
      -webkit-transition: color .2s cubic-bezier(1, 0, 0, 1);
      transition: color .2s cubic-bezier(1, 0, 0, 1)
    }

    .m-topicSetting__icon:hover {
      color: #787c7b
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-652d8948 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-652d8948 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-horizontalScrollItem {
    display: -webkit-box;
    display: flex;
    width: 100%;
    margin-bottom: 16px
  }

  .m-horizontalScrollItem:empty {
    margin: 0
  }

  .m-horizontalScrollItem .m-horizontalScrollItem__content {
    display: -webkit-box;
    display: flex;
    width: 100%
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-1adc5dfa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-1adc5dfa {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-horizontalScrollSection .swiper-container-free-mode .swiper-slide {
    width: 220px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5b6875db {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5b6875db {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-sectionBody {
    width: 100%
  }

  .m-sectionBody--liquid .m-sectionBody__header {
    max-width: 100%
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-sectionBody--liquid .m-sectionBody__header {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-sectionBody--liquid .m-sectionBody__header {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-sectionBody--liquid .m-sectionBody__main {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-sectionBody--liquid .m-sectionBody__main {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .m-sectionBody--liquid .m-sectionBody__main {
      width: auto
    }
  }

  @media only screen and (min-width:769px) {
    .m-sectionBody--sideSection .m-sectionBody__more {
      max-width: 200px;
      margin-left: 0
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-sectionBody--sideSection .m-sectionBody__more {
      max-width: 300px;
      margin-left: auto
    }
  }

  .m-sectionBody--liquid.m-sectionBody--sideSection .m-sectionBody__more {
    max-width: 200px;
    margin-top: 16px;
    margin-left: 0
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-sectionBody--liquid.m-sectionBody--sideSection .m-sectionBody__more {
      max-width: 300px;
      margin-top: 0;
      margin-left: auto
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-sectionBody--liquid.m-sectionBody--sideSection .m-sectionBody__more {
      max-width: 300px;
      margin-top: 0;
      margin-left: auto
    }
  }

  @media only screen and (max-width:479px) {
    .m-sectionBody--liquid.m-sectionBody--sideSection .m-sectionBody__more {
      max-width: 300px;
      margin-top: 0;
      margin-left: auto
    }
  }

  .m-sectionBody__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-right: auto;
    margin-bottom: 16px;
    margin-left: auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-sectionBody__header {
      width: auto;
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-sectionBody__header {
      width: auto;
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .m-sectionBody__header {
      width: auto;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .m-sectionBody__header:empty {
    margin: 0
  }

  .m-sectionBody__title {
    font-size: 16px;
    font-weight: 700
  }

  .m-sectionBody__side {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: auto
  }

  .m-sectionBody__more {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    max-width: 300px;
    margin: 16px auto 40px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-sectionBody__more {
      margin-top: 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-sectionBody__more {
      margin-top: 0
    }
  }

  @media only screen and (max-width:479px) {
    .m-sectionBody__more {
      margin-top: 0
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-sectionBody__main {
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-sectionBody__main {
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }
  }

  @media only screen and (max-width:479px) {
    .m-sectionBody__main {
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }
  }

  .m-sectionBody__empty--carouselSection {
    max-width: 940px;
    margin: auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .m-sectionBody__empty {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-sectionBody__empty {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .m-sectionBody__empty {
      margin-right: 16px;
      margin-left: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-231dd549 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-231dd549 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-basicColumnList {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 940px;
    margin: 32px auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-basicColumnList {
      display: block
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-basicColumnList {
      display: block
    }
  }

  @media only screen and (max-width:479px) {
    .o-basicColumnList {
      display: block;
      margin: 24px auto
    }
  }

  .o-basicColumnList__main {
    width: 100%;
    margin-bottom: 32px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-basicColumnList__main {
      max-width: none
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-basicColumnList__main {
      max-width: none
    }
  }

  @media only screen and (max-width:479px) {
    .o-basicColumnList__main {
      max-width: none;
      margin-bottom: 24px
    }
  }

  .o-basicColumnList__item+.o-basicColumnList__item {
    margin-top: 32px
  }

  @media only screen and (max-width:479px) {
    .o-basicColumnList__item+.o-basicColumnList__item {
      margin-top: 24px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4abd5214 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4abd5214 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .swiper-wrapper {
      padding: 0 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .swiper-wrapper {
      padding: 0 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .swiper-wrapper {
      padding: 0 16px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .m-carouselGroup__header {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-carouselColumnMulti .m-horizontalScrollSection .m-carouselGroup__header {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-carouselColumnMulti .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
      right: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-carouselColumnMulti .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
      right: 24px
    }
  }

  .o-carouselColumnMulti__hero {
    margin: 32px auto
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti__hero {
      margin: 24px auto
    }
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti__hero .m-carouselGroup__header {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-carouselColumnMulti__hero .m-horizontalScrollSection .swiper-nav {
    right: 24px
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti__hero .m-horizontalScrollSection .swiper-nav {
      right: 16px
    }
  }

  .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
    right: 0
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
      right: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
      right: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
      right: 16px
    }
  }

  .o-carouselColumnMulti__hero .m-sectionBody {
    max-width: 940px;
    margin: auto
  }

  .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--carouselSection {
    max-width: none
  }

  @media only screen and (min-width:769px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--carouselSection .m-sectionBody__header {
      padding: 0 24px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-carouselColumnMulti__hero .m-sectionBody.m-sectionBody--carouselSection .m-sectionBody__header {
      padding: 0
    }
  }

  .o-carouselColumnMulti__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 940px;
    margin: 32px auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-carouselColumnMulti__body {
      display: block
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-carouselColumnMulti__body {
      display: block
    }
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti__body {
      display: block;
      margin: 24px auto
    }
  }

  .o-carouselColumnMulti__main {
    -webkit-box-flex: 1;
    flex: 1 1 610px;
    min-width: 610px;
    margin-bottom: 32px
  }

  .o-carouselColumnMulti__main:empty {
    display: none
  }

  .o-carouselColumnMulti__main:empty+.o-carouselColumnMulti__side {
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    margin-left: 0
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-carouselColumnMulti__main {
      min-width: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti__main {
      min-width: 0;
      margin-bottom: 24px
    }
  }

  .o-carouselColumnMulti__side {
    -webkit-box-flex: 0;
    flex: 0 0 260px;
    min-width: 260px;
    margin-bottom: 32px;
    margin-left: 56px
  }

  .o-carouselColumnMulti__side:empty {
    display: none
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-carouselColumnMulti__side {
      min-width: 0;
      margin-left: 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-carouselColumnMulti__side {
      min-width: 0;
      margin-left: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti__side {
      min-width: 0;
      margin-bottom: 24px;
      margin-left: 0
    }
  }

  .o-carouselColumnMulti__item+.o-carouselColumnMulti__item {
    margin-top: 32px
  }

  @media only screen and (max-width:479px) {
    .o-carouselColumnMulti__item+.o-carouselColumnMulti__item {
      margin-top: 24px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4d157bb4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4d157bb4 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-liquidColumnMulti {
    max-width: 1920px;
    margin: 0 auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .swiper-wrapper {
      padding: 0 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .swiper-wrapper {
      padding: 0 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .swiper-wrapper {
      padding: 0 16px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .m-carouselGroup__header {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-liquidColumnMulti .m-horizontalScrollSection .m-carouselGroup__header {
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-liquidColumnMulti .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
      right: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-liquidColumnMulti .m-sectionBody.m-sectionBody--horizontal .swiper-nav {
      right: 24px
    }
  }

  .o-liquidColumnMulti__hero {
    margin: 32px auto
  }

  @media only screen and (max-width:479px) {
    .o-liquidColumnMulti__hero {
      margin: 24px auto
    }
  }

  .o-liquidColumnMulti__hero .m-carouselGroup__header {
    margin-right: 24px;
    margin-left: 24px
  }

  @media only screen and (max-width:479px) {
    .o-liquidColumnMulti__hero .m-carouselGroup__header {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-liquidColumnMulti__hero .m-horizontalScrollSection .swiper-nav {
    right: 24px
  }

  @media only screen and (max-width:479px) {
    .o-liquidColumnMulti__hero .m-horizontalScrollSection .swiper-nav {
      right: 16px
    }
  }

  .o-liquidColumnMulti__hero .m-horizontalScrollSection .swiper-wrapper {
    padding: 0 24px
  }

  @media only screen and (max-width:479px) {
    .o-liquidColumnMulti__hero .m-horizontalScrollSection .swiper-wrapper {
      padding: 0 16px
    }
  }

  @media only screen and (min-width:769px) {

    .o-liquidColumnMulti__hero .m-sectionBody.m-sectionBody--carouselSection .m-sectionBody__header,
    .o-liquidColumnMulti__hero .m-sectionBody .m-sectionBody__header,
    .o-liquidColumnMulti__hero .m-sectionBody .m-sectionBody__main {
      width: auto;
      margin-right: 24px;
      margin-left: 24px
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-liquidColumnMulti__hero .m-sectionBody .m-sectionBody__main {
      width: auto;
      margin-right: 0;
      margin-left: 0
    }
  }

  .o-liquidColumnMulti__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    max-width: 1920px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
    margin: 32px auto 0
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-liquidColumnMulti__body {
      display: block;
      padding: 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-liquidColumnMulti__body {
      display: block;
      padding: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-liquidColumnMulti__body {
      display: block;
      padding: 0;
      margin: 24px auto
    }
  }

  .o-liquidColumnMulti__main {
    -webkit-box-flex: 1;
    flex: 1 1 100%;
    margin-top: 0;
    overflow: hidden
  }

  .o-liquidColumnMulti__main:empty {
    display: none
  }

  .o-liquidColumnMulti__main:empty+.o-liquidColumnMulti__side {
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    margin-left: 0
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-liquidColumnMulti__main {
      margin-right: 0;
      margin-left: 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-liquidColumnMulti__main {
      margin-right: 0;
      margin-left: 0
    }
  }

  @media only screen and (max-width:768px) {
    .o-liquidColumnMulti__main {
      margin-bottom: 24px
    }
  }

  .o-liquidColumnMulti__side {
    -webkit-box-flex: 0;
    flex: 0 0 260px;
    min-width: 260px;
    margin-left: 56px
  }

  .o-liquidColumnMulti__side:empty {
    display: none
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-liquidColumnMulti__side {
      -webkit-box-flex: 0;
      flex: none;
      width: 100%;
      max-width: none;
      margin-left: 0
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-liquidColumnMulti__side {
      -webkit-box-flex: 0;
      flex: none;
      width: 100%;
      max-width: none;
      margin-left: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-liquidColumnMulti__side {
      -webkit-box-flex: 0;
      flex: none;
      width: 100%;
      max-width: none;
      margin-bottom: 24px;
      margin-left: 0
    }
  }

  .o-liquidColumnMulti__item+.o-liquidColumnMulti__item {
    margin-top: 32px
  }

  @media only screen and (max-width:479px) {
    .o-liquidColumnMulti__item+.o-liquidColumnMulti__item {
      margin-top: 24px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6ba23b4e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6ba23b4e {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .p-page--categoryMenu {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 0 24px 0 8px;
    margin: 0 auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .p-page--categoryMenu {
      display: block;
      padding: 0
    }
  }

  @media only screen and (max-width:768px) {
    .p-page--categoryMenu {
      display: block;
      padding: 0
    }
  }

  @media only screen and (min-width:769px) {
    .p-page--categoryMenu .p-page__categoryMenu {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 192px;
      height: 100%;
      max-height: 100vh;
      padding-top: 24px;
      padding-right: 16px;
      padding-bottom: 24px;
      margin-right: 24px;
      overflow-y: auto
    }
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .p-page--categoryMenu .p-page__categoryMenu {
      position: static;
      top: auto;
      width: 100%;
      padding: 0;
      margin-top: 16px;
      overflow-y: visible
    }
  }

  @media only screen and (max-width:768px) {
    .p-page--categoryMenu .p-page__categoryMenu {
      width: 100%;
      height: 50px;
      margin-top: 16px
    }
  }

  .p-page--categoryMenu .p-page__main {
    -webkit-box-flex: 1;
    flex: 1;
    overflow-x: hidden
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .p-page--categoryMenu .p-page__main {
      width: 100%
    }
  }

  @media only screen and (max-width:768px) {
    .p-page--categoryMenu .p-page__main {
      width: 100%
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-045b326a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-045b326a {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-categoryMenuSection__category {
    display: -webkit-box;
    display: flex;
    padding-bottom: 8px
  }

  @media only screen and (max-width:479px) {
    .m-categoryMenuSection__category {
      display: block
    }
  }

  .m-categoryMenuSection__title {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 120px;
    font-size: 14px;
    font-weight: 700
  }

  @media only screen and (max-width:479px) {
    .m-categoryMenuSection__title {
      font-size: 12px;
      width: 95px
    }
  }

  .m-categoryMenuSection__subcategory {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    flex-wrap: wrap
  }

  @media only screen and (max-width:479px) {
    .m-categoryMenuSection__subcategory {
      margin-bottom: 8px
    }
  }

  .m-categoryMenuSection__item {
    margin-right: 16px;
    margin-bottom: 8px;
    color: #787c7b;
    font-size: 14px
  }

  @media only screen and (min-width:769px) {
    .m-categoryMenuSection__item:hover {
      color: #222
    }
  }

  @media only screen and (max-width:479px) {
    .m-categoryMenuSection__item {
      margin-top: 4px;
      margin-right: 16px;
      margin-bottom: 0
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-4d096d29 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-4d096d29 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-noteCardCategory__content {
    position: relative;
    width: calc(100% - 24px);
    height: 100%;
    cursor: pointer;
    background-color: #fff
  }

  .m-noteCardCategory__content[data-has-border=true] {
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    -webkit-transition: border-color .2s cubic-bezier(1, 0, 0, 1);
    transition: border-color .2s cubic-bezier(1, 0, 0, 1)
  }

  .m-noteCardCategory__content[data-has-border=true]:hover {
    border: 1px solid #e6e6e6
  }

  .m-noteCardCategory__content[data-has-border=true] .m-noteCardCategory__container {
    padding-right: 16px;
    padding-left: 16px
  }

  .m-noteCardCategory__content[data-has-border=true] .m-noteCardCategory__eyecatch {
    margin-right: -16px;
    margin-left: -16px;
    border-radius: 4px 4px 0 0
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .m-noteCardCategory__content {
      width: 100%
    }
  }

  @media only screen and (max-width:479px) {
    .m-noteCardCategory__content {
      width: 100%
    }
  }

  .m-noteCardCategory__container {
    padding: 0 0 56px
  }

  .m-noteCardCategory__eyecatch {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px
  }

  .m-noteCardCategory__eyecatch:before {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%;
    content: ""
  }

  .m-noteCardCategory__eyecatchImage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }

  .m-noteCardCategory__header {
    margin: 16px auto 8px
  }

  .m-noteCardCategory__title {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1;
    font-size: 18px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .m-noteCardCategory__sound {
    position: relative;
    z-index: 2;
    padding-right: 96px;
    margin-top: 8px;
    margin-bottom: 16px
  }

  .m-noteCardCategory__sound--fit {
    padding-right: 0
  }

  .m-noteCardCategory__soundCaption {
    margin: 5px 0 10px;
    color: #787c7b;
    text-align: center;
    font-size: 11px
  }

  .m-noteCardCategory__status {
    display: -webkit-box;
    display: flex
  }

  .m-noteCardCategory__comment,
  .m-noteCardCategory__like {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-right: 16px;
    line-height: 1;
    font-size: 12px
  }

  .m-noteCardCategory__commentCount,
  .m-noteCardCategory__likeCount {
    padding-left: 2px
  }

  .m-noteCardCategory__like {
    color: #ea3f60
  }

  .m-noteCardCategory__comment {
    color: #a8abb1
  }

  .m-noteCardCategory__footer {
    position: absolute;
    bottom: 0;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: calc(100% - 32px);
    padding-top: 16px;
    padding-bottom: 16px
  }

  .m-noteCardCategory__author {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    align-items: center;
    min-width: 0
  }

  .m-noteCardCategory__authorAvatar {
    margin-right: 8px
  }

  .m-noteCardCategory__authorName {
    width: calc(100% - 32px);
    overflow: hidden;
    color: #787c7b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px
  }

  .m-noteCardCategory__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-5c9cd944 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-5c9cd944 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @media only screen and (max-width:479px) {
    .o-categoryList__item+.o-categoryList__item {
      padding-top: 16px
    }
  }

  .o-categoryList__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-categoryList__header {
      padding-right: 24px;
      padding-left: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .o-categoryList__header {
      padding-right: 16px;
      padding-bottom: 8px;
      padding-left: 16px
    }
  }

  .o-categoryList__title {
    display: block;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px
  }

  @media only screen and (max-width:479px) {
    .o-categoryList__title {
      font-size: 20px
    }
  }

  .o-categoryList__more {
    font-size: 12px;
    font-weight: 400;
    color: #787c7b
  }

  @media only screen and (min-width:769px) {
    .o-categoryList__more:hover {
      color: #222
    }
  }

  .o-categoryList__content {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    justify-content: flex-start;
    margin-right: -12px;
    margin-left: -12px
  }

  .o-categoryList__content:after,
  .o-categoryList__content:before {
    display: block;
    -webkit-box-flex: 1;
    flex: 1;
    width: 100%;
    min-width: 272px;
    height: 0;
    content: ""
  }

  @media only screen and (min-width:768px) and (max-width:940px) {

    .o-categoryList__content:after,
    .o-categoryList__content:before {
      display: none
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {

    .o-categoryList__content:after,
    .o-categoryList__content:before {
      display: none
    }
  }

  .o-categoryList__content:before {
    -webkit-box-ordinal-group: 2;
    order: 1
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-categoryList__content {
      flex-wrap: nowrap;
      padding-right: 24px;
      padding-left: 24px;
      margin-right: 0;
      margin-left: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }
  }

  @media only screen and (max-width:479px) {
    .o-categoryList__content {
      flex-wrap: nowrap;
      padding-right: 16px;
      padding-left: 16px;
      margin-right: 0;
      margin-left: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }
  }

  .o-categoryList__article {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    min-width: 272px;
    margin-bottom: 40px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-categoryList__article {
      -webkit-box-flex: 0;
      flex: 0 0 auto;
      width: 33.333333%;
      min-width: 0;
      margin-bottom: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .o-categoryList__article {
      -webkit-box-flex: 0;
      flex: 0 0 auto;
      width: 260px;
      min-width: 0;
      padding-right: 24px;
      margin-bottom: 0
    }
  }

  @media only screen and (max-width:479px) {
    .o-categoryList__article {
      -webkit-box-flex: 0;
      flex: 0 0 auto;
      width: 220px;
      min-width: 0;
      padding-right: 16px;
      margin-bottom: 0
    }
  }

  .o-categoryList__article:empty {
    margin-bottom: 0
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-e60a6e9c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-e60a6e9c {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .t-categoryTop {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 0 24px;
    margin: 0 auto
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-categoryTop {
      display: block;
      padding: 0
    }
  }

  @media only screen and (max-width:768px) {
    .t-categoryTop {
      display: block;
      padding: 0
    }
  }

  .t-categoryTop__sideBar {
    width: 160px;
    margin-top: 24px;
    margin-right: 24px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-categoryTop__sideBar {
      width: 100%;
      height: 50px;
      margin-top: 16px;
      margin-right: 0
    }
  }

  @media only screen and (max-width:768px) {
    .t-categoryTop__sideBar {
      width: 100%;
      height: 50px;
      margin-top: 16px;
      margin-right: 0
    }
  }

  .t-categoryTop__wrapper {
    -webkit-box-flex: 1;
    flex: 1;
    overflow-x: hidden
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-categoryTop__wrapper {
      width: 100%
    }
  }

  @media only screen and (max-width:768px) {
    .t-categoryTop__wrapper {
      width: 100%
    }
  }

  .t-categoryTop__header {
    padding-right: 24px;
    padding-left: 24px;
    margin: 24px auto
  }

  @media only screen and (max-width:479px) {
    .t-categoryTop__header {
      padding-right: 16px;
      padding-left: 16px;
      margin-top: 16px;
      margin-bottom: 16px
    }
  }

  .t-categoryTop__breadcrumb {
    margin-bottom: 8px
  }

  .t-categoryTop__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
    word-break: break-all;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
  }

  .t-categoryTop__follow {
    padding-bottom: 24px;
    margin-bottom: 40px;
    border-bottom: 1px solid #f2f2f2
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-categoryTop__follow {
      margin-bottom: 24px
    }
  }

  @media only screen and (max-width:479px) {
    .t-categoryTop__follow {
      padding-bottom: 8px;
      margin-bottom: 16px
    }
  }

  .t-categoryTop__body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    max-width: 1920px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
    margin: 32px auto 0
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .t-categoryTop__body {
      padding-right: 24px;
      padding-left: 24px
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-categoryTop__body {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      flex-direction: column-reverse;
      padding-right: 0;
      padding-left: 0
    }
  }

  @media only screen and (max-width:479px) {
    .t-categoryTop__body {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      flex-direction: column-reverse;
      padding: 0;
      margin: 16px auto
    }
  }

  .t-categoryTop__main {
    -webkit-box-flex: 1;
    flex: 1 1 100%;
    margin-top: 0;
    overflow: hidden
  }

  .t-categoryTop__side {
    -webkit-box-flex: 0;
    flex: 0 0 260px;
    min-width: 260px;
    margin-left: 56px
  }

  .t-categoryTop__side:empty {
    display: none
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-categoryTop__side {
      -webkit-box-flex: 1;
      flex: 1;
      padding-bottom: 16px;
      margin-bottom: 24px;
      margin-left: 0;
      border-bottom: 1px solid #f2f2f2
    }
  }

  @media only screen and (max-width:479px) {
    .t-categoryTop__side {
      -webkit-box-flex: 1;
      flex: 1;
      padding-bottom: 8px;
      margin-bottom: 16px;
      margin-left: 0;
      border-bottom: 1px solid #f2f2f2
    }
  }

  .t-categoryTop__list {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #f2f2f2
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .t-categoryTop__list {
      padding-right: 24px;
      padding-bottom: 8px;
      padding-left: 24px;
      margin-bottom: 16px
    }
  }

  @media only screen and (max-width:479px) {
    .t-categoryTop__list {
      padding-right: 16px;
      padding-bottom: 8px;
      padding-left: 16px;
      margin-bottom: 16px
    }
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-7c59fd18 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-7c59fd18 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .o-basicLayoutContent {
    padding-top: 40px;
    padding-bottom: 40px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .o-basicLayoutContent {
      margin-right: 16px;
      margin-left: 16px
    }
  }

  @media only screen and (max-width:768px) {
    .o-basicLayoutContent {
      padding-top: 32px;
      padding-bottom: 32px;
      margin-right: 16px;
      margin-left: 16px
    }
  }

  .o-basicLayoutContent__inner {
    width: 100%;
    max-width: 940px;
    margin: 0 auto
  }

  .o-basicLayoutContent__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 16px
  }

  .o-basicLayoutContent__title {
    display: block;
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  @media only screen and (max-width:768px) {
    .o-basicLayoutContent__title {
      font-size: 18px
    }
  }

  .o-basicLayoutContent[data-title-border=bottom] .o-basicLayoutContent__header {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, .05)
  }

  .o-basicLayoutContent__paginate {
    margin-top: 40px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-6f69d0c2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-6f69d0c2 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .m-prevNextPaginate__paging {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
  }

  .m-prevNextPaginate__pagingItem {
    margin: 0 8px
  }


  :root {
    --noteGreen: #2cb696;
    --noteDarkenGreen: #228d74;
    --customPrimaryColor: #2cb696;
    --customPrimaryDarkenColor: #228d74;
    --z-index-modal: 9999;
    --z-index-coast: 10000
  }

  @-webkit-keyframes loadingAnimation-data-v-2d8041a9 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  @keyframes loadingAnimation-data-v-2d8041a9 {
    0% {
      opacity: 1
    }

    to {
      opacity: .3
    }
  }

  .p-hashtag {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 48px 0
  }

  @media only screen and (max-width:479px) {
    .p-hashtag {
      -webkit-box-pack: start;
      justify-content: flex-start
    }
  }

  .p-hashtag__item {
    width: calc(25% - 8px);
    padding: 8px;
    margin-bottom: 8px;
    color: #787c7b;
    font-size: 14px
  }

  @media only screen and (min-width:768px) and (max-width:940px) {
    .p-hashtag__item {
      width: calc(33.33% - 8px)
    }
  }

  @media only screen and (min-width:480px) and (max-width:768px) {
    .p-hashtag__item {
      width: calc(33.33% - 8px)
    }
  }

  @media only screen and (max-width:479px) {
    .p-hashtag__item {
      width: auto;
      margin-bottom: 0
    }
  }

  .p-hashtag__itemBody {
    display: inline-block
  }

  .p-hashtag__link {
    display: block;
    padding: 4px 8px;
    word-break: break-all;
    background: #fff;
    border-radius: 4px
  }

  @media only screen and (min-width:769px) {
    .p-hashtag__link {
      color: #787c7b;
      -webkit-transition: all .2s cubic-bezier(1, 0, 0, 1);
      transition: all .2s cubic-bezier(1, 0, 0, 1)
    }

    .p-hashtag__link:hover {
      color: #222
    }
  }