@font-face {
    font-family: "icon-editor";
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-editor-90675f5f6d3cd083ccb94bf05bbe55bbff0662f457c2b452ab25003ef10aa742.woff) format("woff"), url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-editor-f3cf32c0ce47ae3ce3b4e67ada5d44d780476d008f194856e2c214d51439d78a.ttf) format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "pen";
    src: url("../src/font/fontello.eot?370dad08");
    src: url("../src/font/fontello.eot?370dad08#iefix") format("embedded-opentype"), url("../src/font/fontello.woff?370dad08") format("woff"), url("../src/font/fontello.ttf?370dad08") format("truetype"), url("../src/font/fontello.svg?370dad08#fontello") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format("woff")
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff")
}

@font-face {
    font-family: "note monospace";
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/notemonospace-7a349d4565a6bc8e899a5e80fb85f3051f9d1e410e1240788bcc86f8c425bbe4.woff) format("woff"), url(https://d2l930y2yx77uc.cloudfront.net/assets/notemonospace-e0139a94ee2a4b900e17a8a6131280d88e2b8719e347403a041a9ab6ac22c535.ttf) format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "icon";
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-4d21f25102074995be7604509fa9d8b878ebfcbbddd0c34dcc2636d911d2cf60.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-4d21f25102074995be7604509fa9d8b878ebfcbbddd0c34dcc2636d911d2cf60.eot?#iefix) format("eot"), url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-43da33b894538f8d1fa7d0bd26a9e443c60128f4f0f9c5d72987483bacb2320f.woff) format("woff"), url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-3763ab737299dd87cf5028b4bee6c4ec19464893cb286c3657fcc8a74ab7109a.ttf) format("truetype"), url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-68d04e0b6e0750a631aecaec484ddac8e71f1246e756552874bad0d584c886ce.svg#icon) format("svg")
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body.ns-note {
    overflow-x: hidden;
    color: #222222;
    height: 100%;
    margin: 0;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-kerning: normal;
    font-kerning: normal
}

.preview-page {
    pointer-events: none
}

.preview-page .note-body,
.preview-page .note-name,
.preview-page .popeye-modal,
.preview-page .p-cautionBar {
    pointer-events: auto
}

@font-face {
    .ns-note {
        font-family: 'FontAwesome';
        src: url("https://d2l930y2yx77uc.cloudfront.net/assets/fontawesome-webfont-7bfcab6db99d5cfbf1705ca0536ddc78585432cc5fa41bbd7ad0f009033b2979.eot");
        src: url("https://d2l930y2yx77uc.cloudfront.net/assets/fontawesome-webfont-7bfcab6db99d5cfbf1705ca0536ddc78585432cc5fa41bbd7ad0f009033b2979.eot?#iefix") format("embedded-opentype"), url("https://d2l930y2yx77uc.cloudfront.net/assets/fontawesome-webfont-2adefcbc041e7d18fcf2d417879dc5a09997aa64d675b7a3c4b6ce33da13f3fe.woff2") format("woff2"), url("https://d2l930y2yx77uc.cloudfront.net/assets/fontawesome-webfont-ba0c59deb5450f5cb41b3f93609ee2d0d995415877ddfa223e8a8a7533474f07.woff") format("woff"), url("https://d2l930y2yx77uc.cloudfront.net/assets/fontawesome-webfont-aa58f33f239a0fb02f5c7a6c45c043d7a9ac9a093335806694ecd6d4edc0d6a8.ttf") format("truetype"), url("https://d2l930y2yx77uc.cloudfront.net/assets/fontawesome-webfont-ad6157926c1622ba4e1d03d478f1541368524bfc46f51e42fe0d945f7ef323e4.svg#fontawesomeregular") format("svg");
        font-weight: normal;
        font-style: normal
    }
}

.ns-note .fa,
.ns-note .fude-menu .fude-icon,
.ns-note .fude-image-menu .fude-icon,
.ns-note .fude-figure-menu .fude-icon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ns-note .fa-lg {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%
}

.ns-note .fa-2x {
    font-size: 2em
}

.ns-note .fa-3x {
    font-size: 3em
}

.ns-note .fa-4x {
    font-size: 4em
}

.ns-note .fa-5x {
    font-size: 5em
}

.ns-note .fa-fw {
    width: 1.28571429em;
    text-align: center
}

.ns-note .fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none
}

.ns-note .fa-ul>li {
    position: relative
}

.ns-note .fa-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: 0.14285714em;
    text-align: center
}

.ns-note .fa-li.fa-lg {
    left: -1.85714286em
}

.ns-note .fa-border {
    padding: .2em .25em .15em;
    border: solid 0.08em #eeeeee;
    border-radius: .1em
}

.ns-note .fa-pull-left {
    float: left
}

.ns-note .fa-pull-right {
    float: right
}

.ns-note .fa.fa-pull-left,
.ns-note .fude-menu .fa-pull-left.fude-icon,
.ns-note .fude-image-menu .fa-pull-left.fude-icon,
.ns-note .fude-figure-menu .fa-pull-left.fude-icon {
    margin-right: .3em
}

.ns-note .fa.fa-pull-right,
.ns-note .fude-menu .fa-pull-right.fude-icon,
.ns-note .fude-image-menu .fa-pull-right.fude-icon,
.ns-note .fude-figure-menu .fa-pull-right.fude-icon {
    margin-left: .3em
}

.ns-note .pull-right {
    float: right
}

.ns-note .pull-left {
    float: left
}

.ns-note .fa.pull-left,
.ns-note .fude-menu .pull-left.fude-icon,
.ns-note .fude-image-menu .pull-left.fude-icon,
.ns-note .fude-figure-menu .pull-left.fude-icon {
    margin-right: .3em
}

.ns-note .fa.pull-right,
.ns-note .fude-menu .pull-right.fude-icon,
.ns-note .fude-image-menu .pull-right.fude-icon,
.ns-note .fude-figure-menu .pull-right.fude-icon {
    margin-left: .3em
}

.ns-note .fa-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear
}

.ns-note .fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8)
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.ns-note .fa-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.ns-note .fa-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.ns-note .fa-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.ns-note .fa-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.ns-note .fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1)
}

.ns-note :root .fa-rotate-90,
.ns-note :root .fa-rotate-180,
.ns-note :root .fa-rotate-270,
.ns-note :root .fa-flip-horizontal,
.ns-note :root .fa-flip-vertical {
    -webkit-filter: none;
    filter: none
}

.ns-note .fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle
}

.ns-note .fa-stack-1x,
.ns-note .fa-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center
}

.ns-note .fa-stack-1x {
    line-height: inherit
}

.ns-note .fa-stack-2x {
    font-size: 2em
}

.ns-note .fa-inverse {
    color: #ffffff
}

.ns-note .fa-glass:before {
    content: "\f000"
}

.ns-note .fa-music:before {
    content: "\f001"
}

.ns-note .fa-search:before {
    content: "\f002"
}

.ns-note .fa-envelope-o:before {
    content: "\f003"
}

.ns-note .fa-heart:before {
    content: "\f004"
}

.ns-note .fa-star:before {
    content: "\f005"
}

.ns-note .fa-star-o:before {
    content: "\f006"
}

.ns-note .fa-user:before {
    content: "\f007"
}

.ns-note .fa-film:before {
    content: "\f008"
}

.ns-note .fa-th-large:before {
    content: "\f009"
}

.ns-note .fa-th:before {
    content: "\f00a"
}

.ns-note .fa-th-list:before {
    content: "\f00b"
}

.ns-note .fa-check:before {
    content: "\f00c"
}

.ns-note .fa-remove:before,
.ns-note .fa-close:before,
.ns-note .fa-times:before {
    content: "\f00d"
}

.ns-note .fa-search-plus:before {
    content: "\f00e"
}

.ns-note .fa-search-minus:before {
    content: "\f010"
}

.ns-note .fa-power-off:before {
    content: "\f011"
}

.ns-note .fa-signal:before {
    content: "\f012"
}

.ns-note .fa-gear:before,
.ns-note .fa-cog:before {
    content: "\f013"
}

.ns-note .fa-trash-o:before {
    content: "\f014"
}

.ns-note .fa-home:before {
    content: "\f015"
}

.ns-note .fa-file-o:before {
    content: "\f016"
}

.ns-note .fa-clock-o:before {
    content: "\f017"
}

.ns-note .fa-road:before {
    content: "\f018"
}

.ns-note .fa-download:before {
    content: "\f019"
}

.ns-note .fa-arrow-circle-o-down:before {
    content: "\f01a"
}

.ns-note .fa-arrow-circle-o-up:before {
    content: "\f01b"
}

.ns-note .fa-inbox:before {
    content: "\f01c"
}

.ns-note .fa-play-circle-o:before {
    content: "\f01d"
}

.ns-note .fa-rotate-right:before,
.ns-note .fa-repeat:before {
    content: "\f01e"
}

.ns-note .fa-refresh:before {
    content: "\f021"
}

.ns-note .fa-list-alt:before {
    content: "\f022"
}

.ns-note .fa-lock:before {
    content: "\f023"
}

.ns-note .fa-flag:before {
    content: "\f024"
}

.ns-note .fa-headphones:before {
    content: "\f025"
}

.ns-note .fa-volume-off:before {
    content: "\f026"
}

.ns-note .fa-volume-down:before {
    content: "\f027"
}

.ns-note .fa-volume-up:before {
    content: "\f028"
}

.ns-note .fa-qrcode:before {
    content: "\f029"
}

.ns-note .fa-barcode:before {
    content: "\f02a"
}

.ns-note .fa-tag:before {
    content: "\f02b"
}

.ns-note .fa-tags:before {
    content: "\f02c"
}

.ns-note .fa-book:before {
    content: "\f02d"
}

.ns-note .fa-bookmark:before {
    content: "\f02e"
}

.ns-note .fa-print:before {
    content: "\f02f"
}

.ns-note .fa-camera:before {
    content: "\f030"
}

.ns-note .fa-font:before {
    content: "\f031"
}

.ns-note .fa-bold:before,
.ns-note .fude-menu .fude-icon-bold:before {
    content: "\f032"
}

.ns-note .fa-italic:before,
.ns-note .fude-menu .fude-icon-italic:before {
    content: "\f033"
}

.ns-note .fa-text-height:before {
    content: "\f034"
}

.ns-note .fa-text-width:before {
    content: "\f035"
}

.ns-note .fa-align-left:before {
    content: "\f036"
}

.ns-note .fa-align-center:before {
    content: "\f037"
}

.ns-note .fa-align-right:before {
    content: "\f038"
}

.ns-note .fa-align-justify:before {
    content: "\f039"
}

.ns-note .fa-list:before {
    content: "\f03a"
}

.ns-note .fa-dedent:before,
.ns-note .fa-outdent:before,
.ns-note .fude-menu .fude-icon-outdent:before {
    content: "\f03b"
}

.ns-note .fa-indent:before,
.ns-note .fude-menu .fude-icon-indent:before {
    content: "\f03c"
}

.ns-note .fa-video-camera:before {
    content: "\f03d"
}

.ns-note .fa-photo:before,
.ns-note .fa-image:before,
.ns-note .fa-picture-o:before {
    content: "\f03e"
}

.ns-note .fa-pencil:before {
    content: "\f040"
}

.ns-note .fa-map-marker:before {
    content: "\f041"
}

.ns-note .fa-adjust:before {
    content: "\f042"
}

.ns-note .fa-tint:before {
    content: "\f043"
}

.ns-note .fa-edit:before,
.ns-note .fa-pencil-square-o:before {
    content: "\f044"
}

.ns-note .fa-share-square-o:before {
    content: "\f045"
}

.ns-note .fa-check-square-o:before {
    content: "\f046"
}

.ns-note .fa-arrows:before {
    content: "\f047"
}

.ns-note .fa-step-backward:before {
    content: "\f048"
}

.ns-note .fa-fast-backward:before {
    content: "\f049"
}

.ns-note .fa-backward:before {
    content: "\f04a"
}

.ns-note .fa-play:before {
    content: "\f04b"
}

.ns-note .fa-pause:before {
    content: "\f04c"
}

.ns-note .fa-stop:before {
    content: "\f04d"
}

.ns-note .fa-forward:before {
    content: "\f04e"
}

.ns-note .fa-fast-forward:before {
    content: "\f050"
}

.ns-note .fa-step-forward:before {
    content: "\f051"
}

.ns-note .fa-eject:before {
    content: "\f052"
}

.ns-note .fa-chevron-left:before {
    content: "\f053"
}

.ns-note .fa-chevron-right:before {
    content: "\f054"
}

.ns-note .fa-plus-circle:before {
    content: "\f055"
}

.ns-note .fa-minus-circle:before {
    content: "\f056"
}

.ns-note .fa-times-circle:before {
    content: "\f057"
}

.ns-note .fa-check-circle:before {
    content: "\f058"
}

.ns-note .fa-question-circle:before {
    content: "\f059"
}

.ns-note .fa-info-circle:before {
    content: "\f05a"
}

.ns-note .fa-crosshairs:before {
    content: "\f05b"
}

.ns-note .fa-times-circle-o:before {
    content: "\f05c"
}

.ns-note .fa-check-circle-o:before {
    content: "\f05d"
}

.ns-note .fa-ban:before {
    content: "\f05e"
}

.ns-note .fa-arrow-left:before {
    content: "\f060"
}

.ns-note .fa-arrow-right:before {
    content: "\f061"
}

.ns-note .fa-arrow-up:before {
    content: "\f062"
}

.ns-note .fa-arrow-down:before {
    content: "\f063"
}

.ns-note .fa-mail-forward:before,
.ns-note .fa-share:before {
    content: "\f064"
}

.ns-note .fa-expand:before {
    content: "\f065"
}

.ns-note .fa-compress:before {
    content: "\f066"
}

.ns-note .fa-plus:before {
    content: "\f067"
}

.ns-note .fa-minus:before {
    content: "\f068"
}

.ns-note .fa-asterisk:before {
    content: "\f069"
}

.ns-note .fa-exclamation-circle:before {
    content: "\f06a"
}

.ns-note .fa-gift:before {
    content: "\f06b"
}

.ns-note .fa-leaf:before {
    content: "\f06c"
}

.ns-note .fa-fire:before {
    content: "\f06d"
}

.ns-note .fa-eye:before {
    content: "\f06e"
}

.ns-note .fa-eye-slash:before {
    content: "\f070"
}

.ns-note .fa-warning:before,
.ns-note .fa-exclamation-triangle:before {
    content: "\f071"
}

.ns-note .fa-plane:before {
    content: "\f072"
}

.ns-note .fa-calendar:before {
    content: "\f073"
}

.ns-note .fa-random:before {
    content: "\f074"
}

.ns-note .fa-comment:before {
    content: "\f075"
}

.ns-note .fa-magnet:before {
    content: "\f076"
}

.ns-note .fa-chevron-up:before {
    content: "\f077"
}

.ns-note .fa-chevron-down:before {
    content: "\f078"
}

.ns-note .fa-retweet:before {
    content: "\f079"
}

.ns-note .fa-shopping-cart:before {
    content: "\f07a"
}

.ns-note .fa-folder:before {
    content: "\f07b"
}

.ns-note .fa-folder-open:before {
    content: "\f07c"
}

.ns-note .fa-arrows-v:before {
    content: "\f07d"
}

.ns-note .fa-arrows-h:before {
    content: "\f07e"
}

.ns-note .fa-bar-chart-o:before,
.ns-note .fa-bar-chart:before {
    content: "\f080"
}

.ns-note .fa-twitter-square:before {
    content: "\f081"
}

.ns-note .fa-facebook-square:before {
    content: "\f082"
}

.ns-note .fa-camera-retro:before {
    content: "\f083"
}

.ns-note .fa-key:before {
    content: "\f084"
}

.ns-note .fa-gears:before,
.ns-note .fa-cogs:before {
    content: "\f085"
}

.ns-note .fa-comments:before {
    content: "\f086"
}

.ns-note .fa-thumbs-o-up:before {
    content: "\f087"
}

.ns-note .fa-thumbs-o-down:before {
    content: "\f088"
}

.ns-note .fa-star-half:before {
    content: "\f089"
}

.ns-note .fa-heart-o:before {
    content: "\f08a"
}

.ns-note .fa-sign-out:before {
    content: "\f08b"
}

.ns-note .fa-linkedin-square:before {
    content: "\f08c"
}

.ns-note .fa-thumb-tack:before {
    content: "\f08d"
}

.ns-note .fa-external-link:before {
    content: "\f08e"
}

.ns-note .fa-sign-in:before {
    content: "\f090"
}

.ns-note .fa-trophy:before {
    content: "\f091"
}

.ns-note .fa-github-square:before {
    content: "\f092"
}

.ns-note .fa-upload:before {
    content: "\f093"
}

.ns-note .fa-lemon-o:before {
    content: "\f094"
}

.ns-note .fa-phone:before {
    content: "\f095"
}

.ns-note .fa-square-o:before {
    content: "\f096"
}

.ns-note .fa-bookmark-o:before {
    content: "\f097"
}

.ns-note .fa-phone-square:before {
    content: "\f098"
}

.ns-note .fa-twitter:before {
    content: "\f099"
}

.ns-note .fa-facebook-f:before,
.ns-note .fa-facebook:before {
    content: "\f09a"
}

.ns-note .fa-github:before {
    content: "\f09b"
}

.ns-note .fa-unlock:before {
    content: "\f09c"
}

.ns-note .fa-credit-card:before {
    content: "\f09d"
}

.ns-note .fa-feed:before,
.ns-note .fa-rss:before {
    content: "\f09e"
}

.ns-note .fa-hdd-o:before {
    content: "\f0a0"
}

.ns-note .fa-bullhorn:before {
    content: "\f0a1"
}

.ns-note .fa-bell:before {
    content: "\f0f3"
}

.ns-note .fa-certificate:before {
    content: "\f0a3"
}

.ns-note .fa-hand-o-right:before {
    content: "\f0a4"
}

.ns-note .fa-hand-o-left:before {
    content: "\f0a5"
}

.ns-note .fa-hand-o-up:before {
    content: "\f0a6"
}

.ns-note .fa-hand-o-down:before {
    content: "\f0a7"
}

.ns-note .fa-arrow-circle-left:before {
    content: "\f0a8"
}

.ns-note .fa-arrow-circle-right:before {
    content: "\f0a9"
}

.ns-note .fa-arrow-circle-up:before {
    content: "\f0aa"
}

.ns-note .fa-arrow-circle-down:before {
    content: "\f0ab"
}

.ns-note .fa-globe:before {
    content: "\f0ac"
}

.ns-note .fa-wrench:before {
    content: "\f0ad"
}

.ns-note .fa-tasks:before {
    content: "\f0ae"
}

.ns-note .fa-filter:before {
    content: "\f0b0"
}

.ns-note .fa-briefcase:before {
    content: "\f0b1"
}

.ns-note .fa-arrows-alt:before {
    content: "\f0b2"
}

.ns-note .fa-group:before,
.ns-note .fa-users:before {
    content: "\f0c0"
}

.ns-note .fa-chain:before,
.ns-note .fa-link:before,
.ns-note .fude-menu .fude-icon-createlink:before,
.ns-note .fude-image-menu .fude-icon-createlink:before,
.ns-note .fude-image-menu .fude-icon-delete:before,
.ns-note .fude-image-menu .fude-icon-changesize-big:before,
.ns-note .fude-image-menu .fude-icon-changesize-small:before {
    content: "\f0c1"
}

.ns-note .fa-cloud:before {
    content: "\f0c2"
}

.ns-note .fa-flask:before {
    content: "\f0c3"
}

.ns-note .fa-cut:before,
.ns-note .fa-scissors:before {
    content: "\f0c4"
}

.ns-note .fa-copy:before,
.ns-note .fa-files-o:before {
    content: "\f0c5"
}

.ns-note .fa-paperclip:before {
    content: "\f0c6"
}

.ns-note .fa-save:before,
.ns-note .fa-floppy-o:before {
    content: "\f0c7"
}

.ns-note .fa-square:before {
    content: "\f0c8"
}

.ns-note .fa-navicon:before,
.ns-note .fa-reorder:before,
.ns-note .fa-bars:before {
    content: "\f0c9"
}

.ns-note .fa-list-ul:before,
.ns-note .fude-menu .fude-icon-insertunorderedlist:before {
    content: "\f0ca"
}

.ns-note .fa-list-ol:before,
.ns-note .fude-menu .fude-icon-insertorderedlist:before {
    content: "\f0cb"
}

.ns-note .fa-strikethrough:before {
    content: "\f0cc"
}

.ns-note .fa-underline:before,
.ns-note .fude-menu .fude-icon-underline:before {
    content: "\f0cd"
}

.ns-note .fa-table:before {
    content: "\f0ce"
}

.ns-note .fa-magic:before {
    content: "\f0d0"
}

.ns-note .fa-truck:before {
    content: "\f0d1"
}

.ns-note .fa-pinterest:before {
    content: "\f0d2"
}

.ns-note .fa-pinterest-square:before {
    content: "\f0d3"
}

.ns-note .fa-google-plus-square:before {
    content: "\f0d4"
}

.ns-note .fa-google-plus:before {
    content: "\f0d5"
}

.ns-note .fa-money:before {
    content: "\f0d6"
}

.ns-note .fa-caret-down:before {
    content: "\f0d7"
}

.ns-note .fa-caret-up:before {
    content: "\f0d8"
}

.ns-note .fa-caret-left:before {
    content: "\f0d9"
}

.ns-note .fa-caret-right:before {
    content: "\f0da"
}

.ns-note .fa-columns:before {
    content: "\f0db"
}

.ns-note .fa-unsorted:before,
.ns-note .fa-sort:before {
    content: "\f0dc"
}

.ns-note .fa-sort-down:before,
.ns-note .fa-sort-desc:before {
    content: "\f0dd"
}

.ns-note .fa-sort-up:before,
.ns-note .fa-sort-asc:before {
    content: "\f0de"
}

.ns-note .fa-envelope:before {
    content: "\f0e0"
}

.ns-note .fa-linkedin:before {
    content: "\f0e1"
}

.ns-note .fa-rotate-left:before,
.ns-note .fa-undo:before {
    content: "\f0e2"
}

.ns-note .fa-legal:before,
.ns-note .fa-gavel:before {
    content: "\f0e3"
}

.ns-note .fa-dashboard:before,
.ns-note .fa-tachometer:before {
    content: "\f0e4"
}

.ns-note .fa-comment-o:before {
    content: "\f0e5"
}

.ns-note .fa-comments-o:before {
    content: "\f0e6"
}

.ns-note .fa-flash:before,
.ns-note .fa-bolt:before {
    content: "\f0e7"
}

.ns-note .fa-sitemap:before {
    content: "\f0e8"
}

.ns-note .fa-umbrella:before {
    content: "\f0e9"
}

.ns-note .fa-paste:before,
.ns-note .fa-clipboard:before {
    content: "\f0ea"
}

.ns-note .fa-lightbulb-o:before {
    content: "\f0eb"
}

.ns-note .fa-exchange:before {
    content: "\f0ec"
}

.ns-note .fa-cloud-download:before {
    content: "\f0ed"
}

.ns-note .fa-cloud-upload:before {
    content: "\f0ee"
}

.ns-note .fa-user-md:before {
    content: "\f0f0"
}

.ns-note .fa-stethoscope:before {
    content: "\f0f1"
}

.ns-note .fa-suitcase:before {
    content: "\f0f2"
}

.ns-note .fa-bell-o:before {
    content: "\f0a2"
}

.ns-note .fa-coffee:before {
    content: "\f0f4"
}

.ns-note .fa-cutlery:before {
    content: "\f0f5"
}

.ns-note .fa-file-text-o:before {
    content: "\f0f6"
}

.ns-note .fa-building-o:before {
    content: "\f0f7"
}

.ns-note .fa-hospital-o:before {
    content: "\f0f8"
}

.ns-note .fa-ambulance:before {
    content: "\f0f9"
}

.ns-note .fa-medkit:before {
    content: "\f0fa"
}

.ns-note .fa-fighter-jet:before {
    content: "\f0fb"
}

.ns-note .fa-beer:before {
    content: "\f0fc"
}

.ns-note .fa-h-square:before {
    content: "\f0fd"
}

.ns-note .fa-plus-square:before {
    content: "\f0fe"
}

.ns-note .fa-angle-double-left:before {
    content: "\f100"
}

.ns-note .fa-angle-double-right:before {
    content: "\f101"
}

.ns-note .fa-angle-double-up:before {
    content: "\f102"
}

.ns-note .fa-angle-double-down:before {
    content: "\f103"
}

.ns-note .fa-angle-left:before {
    content: "\f104"
}

.ns-note .fa-angle-right:before {
    content: "\f105"
}

.ns-note .fa-angle-up:before {
    content: "\f106"
}

.ns-note .fa-angle-down:before {
    content: "\f107"
}

.ns-note .fa-desktop:before {
    content: "\f108"
}

.ns-note .fa-laptop:before {
    content: "\f109"
}

.ns-note .fa-tablet:before {
    content: "\f10a"
}

.ns-note .fa-mobile-phone:before,
.ns-note .fa-mobile:before {
    content: "\f10b"
}

.ns-note .fa-circle-o:before {
    content: "\f10c"
}

.ns-note .fa-quote-left:before {
    content: "\f10d"
}

.ns-note .fa-quote-right:before,
.ns-note .fude-menu .fude-icon-blockquote:before {
    content: "\f10e"
}

.ns-note .fa-spinner:before {
    content: "\f110"
}

.ns-note .fa-circle:before {
    content: "\f111"
}

.ns-note .fa-mail-reply:before,
.ns-note .fa-reply:before {
    content: "\f112"
}

.ns-note .fa-github-alt:before {
    content: "\f113"
}

.ns-note .fa-folder-o:before {
    content: "\f114"
}

.ns-note .fa-folder-open-o:before {
    content: "\f115"
}

.ns-note .fa-smile-o:before {
    content: "\f118"
}

.ns-note .fa-frown-o:before {
    content: "\f119"
}

.ns-note .fa-meh-o:before {
    content: "\f11a"
}

.ns-note .fa-gamepad:before {
    content: "\f11b"
}

.ns-note .fa-keyboard-o:before {
    content: "\f11c"
}

.ns-note .fa-flag-o:before {
    content: "\f11d"
}

.ns-note .fa-flag-checkered:before {
    content: "\f11e"
}

.ns-note .fa-terminal:before {
    content: "\f120"
}

.ns-note .fa-code:before {
    content: "\f121"
}

.ns-note .fa-mail-reply-all:before,
.ns-note .fa-reply-all:before {
    content: "\f122"
}

.ns-note .fa-star-half-empty:before,
.ns-note .fa-star-half-full:before,
.ns-note .fa-star-half-o:before {
    content: "\f123"
}

.ns-note .fa-location-arrow:before {
    content: "\f124"
}

.ns-note .fa-crop:before {
    content: "\f125"
}

.ns-note .fa-code-fork:before {
    content: "\f126"
}

.ns-note .fa-unlink:before,
.ns-note .fa-chain-broken:before {
    content: "\f127"
}

.ns-note .fa-question:before {
    content: "\f128"
}

.ns-note .fa-info:before {
    content: "\f129"
}

.ns-note .fa-exclamation:before {
    content: "\f12a"
}

.ns-note .fa-superscript:before {
    content: "\f12b"
}

.ns-note .fa-subscript:before {
    content: "\f12c"
}

.ns-note .fa-eraser:before {
    content: "\f12d"
}

.ns-note .fa-puzzle-piece:before {
    content: "\f12e"
}

.ns-note .fa-microphone:before {
    content: "\f130"
}

.ns-note .fa-microphone-slash:before {
    content: "\f131"
}

.ns-note .fa-shield:before {
    content: "\f132"
}

.ns-note .fa-calendar-o:before {
    content: "\f133"
}

.ns-note .fa-fire-extinguisher:before {
    content: "\f134"
}

.ns-note .fa-rocket:before {
    content: "\f135"
}

.ns-note .fa-maxcdn:before {
    content: "\f136"
}

.ns-note .fa-chevron-circle-left:before {
    content: "\f137"
}

.ns-note .fa-chevron-circle-right:before {
    content: "\f138"
}

.ns-note .fa-chevron-circle-up:before {
    content: "\f139"
}

.ns-note .fa-chevron-circle-down:before {
    content: "\f13a"
}

.ns-note .fa-html5:before {
    content: "\f13b"
}

.ns-note .fa-css3:before {
    content: "\f13c"
}

.ns-note .fa-anchor:before {
    content: "\f13d"
}

.ns-note .fa-unlock-alt:before {
    content: "\f13e"
}

.ns-note .fa-bullseye:before {
    content: "\f140"
}

.ns-note .fa-ellipsis-h:before {
    content: "\f141"
}

.ns-note .fa-ellipsis-v:before {
    content: "\f142"
}

.ns-note .fa-rss-square:before {
    content: "\f143"
}

.ns-note .fa-play-circle:before {
    content: "\f144"
}

.ns-note .fa-ticket:before {
    content: "\f145"
}

.ns-note .fa-minus-square:before {
    content: "\f146"
}

.ns-note .fa-minus-square-o:before {
    content: "\f147"
}

.ns-note .fa-level-up:before {
    content: "\f148"
}

.ns-note .fa-level-down:before {
    content: "\f149"
}

.ns-note .fa-check-square:before {
    content: "\f14a"
}

.ns-note .fa-pencil-square:before {
    content: "\f14b"
}

.ns-note .fa-external-link-square:before {
    content: "\f14c"
}

.ns-note .fa-share-square:before {
    content: "\f14d"
}

.ns-note .fa-compass:before {
    content: "\f14e"
}

.ns-note .fa-toggle-down:before,
.ns-note .fa-caret-square-o-down:before {
    content: "\f150"
}

.ns-note .fa-toggle-up:before,
.ns-note .fa-caret-square-o-up:before {
    content: "\f151"
}

.ns-note .fa-toggle-right:before,
.ns-note .fa-caret-square-o-right:before {
    content: "\f152"
}

.ns-note .fa-euro:before,
.ns-note .fa-eur:before {
    content: "\f153"
}

.ns-note .fa-gbp:before {
    content: "\f154"
}

.ns-note .fa-dollar:before,
.ns-note .fa-usd:before {
    content: "\f155"
}

.ns-note .fa-rupee:before,
.ns-note .fa-inr:before {
    content: "\f156"
}

.ns-note .fa-cny:before,
.ns-note .fa-rmb:before,
.ns-note .fa-yen:before,
.ns-note .fa-jpy:before {
    content: "\f157"
}

.ns-note .fa-ruble:before,
.ns-note .fa-rouble:before,
.ns-note .fa-rub:before {
    content: "\f158"
}

.ns-note .fa-won:before,
.ns-note .fa-krw:before {
    content: "\f159"
}

.ns-note .fa-bitcoin:before,
.ns-note .fa-btc:before {
    content: "\f15a"
}

.ns-note .fa-file:before {
    content: "\f15b"
}

.ns-note .fa-file-text:before {
    content: "\f15c"
}

.ns-note .fa-sort-alpha-asc:before {
    content: "\f15d"
}

.ns-note .fa-sort-alpha-desc:before {
    content: "\f15e"
}

.ns-note .fa-sort-amount-asc:before {
    content: "\f160"
}

.ns-note .fa-sort-amount-desc:before {
    content: "\f161"
}

.ns-note .fa-sort-numeric-asc:before {
    content: "\f162"
}

.ns-note .fa-sort-numeric-desc:before {
    content: "\f163"
}

.ns-note .fa-thumbs-up:before {
    content: "\f164"
}

.ns-note .fa-thumbs-down:before {
    content: "\f165"
}

.ns-note .fa-youtube-square:before {
    content: "\f166"
}

.ns-note .fa-youtube:before {
    content: "\f167"
}

.ns-note .fa-xing:before {
    content: "\f168"
}

.ns-note .fa-xing-square:before {
    content: "\f169"
}

.ns-note .fa-youtube-play:before {
    content: "\f16a"
}

.ns-note .fa-dropbox:before {
    content: "\f16b"
}

.ns-note .fa-stack-overflow:before {
    content: "\f16c"
}

.ns-note .fa-instagram:before {
    content: "\f16d"
}

.ns-note .fa-flickr:before {
    content: "\f16e"
}

.ns-note .fa-adn:before {
    content: "\f170"
}

.ns-note .fa-bitbucket:before {
    content: "\f171"
}

.ns-note .fa-bitbucket-square:before {
    content: "\f172"
}

.ns-note .fa-tumblr:before {
    content: "\f173"
}

.ns-note .fa-tumblr-square:before {
    content: "\f174"
}

.ns-note .fa-long-arrow-down:before {
    content: "\f175"
}

.ns-note .fa-long-arrow-up:before {
    content: "\f176"
}

.ns-note .fa-long-arrow-left:before {
    content: "\f177"
}

.ns-note .fa-long-arrow-right:before {
    content: "\f178"
}

.ns-note .fa-apple:before {
    content: "\f179"
}

.ns-note .fa-windows:before {
    content: "\f17a"
}

.ns-note .fa-android:before {
    content: "\f17b"
}

.ns-note .fa-linux:before {
    content: "\f17c"
}

.ns-note .fa-dribbble:before {
    content: "\f17d"
}

.ns-note .fa-skype:before {
    content: "\f17e"
}

.ns-note .fa-foursquare:before {
    content: "\f180"
}

.ns-note .fa-trello:before {
    content: "\f181"
}

.ns-note .fa-female:before {
    content: "\f182"
}

.ns-note .fa-male:before {
    content: "\f183"
}

.ns-note .fa-gittip:before,
.ns-note .fa-gratipay:before {
    content: "\f184"
}

.ns-note .fa-sun-o:before {
    content: "\f185"
}

.ns-note .fa-moon-o:before {
    content: "\f186"
}

.ns-note .fa-archive:before {
    content: "\f187"
}

.ns-note .fa-bug:before {
    content: "\f188"
}

.ns-note .fa-vk:before {
    content: "\f189"
}

.ns-note .fa-weibo:before {
    content: "\f18a"
}

.ns-note .fa-renren:before {
    content: "\f18b"
}

.ns-note .fa-pagelines:before {
    content: "\f18c"
}

.ns-note .fa-stack-exchange:before {
    content: "\f18d"
}

.ns-note .fa-arrow-circle-o-right:before {
    content: "\f18e"
}

.ns-note .fa-arrow-circle-o-left:before {
    content: "\f190"
}

.ns-note .fa-toggle-left:before,
.ns-note .fa-caret-square-o-left:before {
    content: "\f191"
}

.ns-note .fa-dot-circle-o:before {
    content: "\f192"
}

.ns-note .fa-wheelchair:before {
    content: "\f193"
}

.ns-note .fa-vimeo-square:before {
    content: "\f194"
}

.ns-note .fa-turkish-lira:before,
.ns-note .fa-try:before {
    content: "\f195"
}

.ns-note .fa-plus-square-o:before {
    content: "\f196"
}

.ns-note .fa-space-shuttle:before {
    content: "\f197"
}

.ns-note .fa-slack:before {
    content: "\f198"
}

.ns-note .fa-envelope-square:before {
    content: "\f199"
}

.ns-note .fa-wordpress:before {
    content: "\f19a"
}

.ns-note .fa-openid:before {
    content: "\f19b"
}

.ns-note .fa-institution:before,
.ns-note .fa-bank:before,
.ns-note .fa-university:before {
    content: "\f19c"
}

.ns-note .fa-mortar-board:before,
.ns-note .fa-graduation-cap:before {
    content: "\f19d"
}

.ns-note .fa-yahoo:before {
    content: "\f19e"
}

.ns-note .fa-google:before {
    content: "\f1a0"
}

.ns-note .fa-reddit:before {
    content: "\f1a1"
}

.ns-note .fa-reddit-square:before {
    content: "\f1a2"
}

.ns-note .fa-stumbleupon-circle:before {
    content: "\f1a3"
}

.ns-note .fa-stumbleupon:before {
    content: "\f1a4"
}

.ns-note .fa-delicious:before {
    content: "\f1a5"
}

.ns-note .fa-digg:before {
    content: "\f1a6"
}

.ns-note .fa-pied-piper-pp:before {
    content: "\f1a7"
}

.ns-note .fa-pied-piper-alt:before {
    content: "\f1a8"
}

.ns-note .fa-drupal:before {
    content: "\f1a9"
}

.ns-note .fa-joomla:before {
    content: "\f1aa"
}

.ns-note .fa-language:before {
    content: "\f1ab"
}

.ns-note .fa-fax:before {
    content: "\f1ac"
}

.ns-note .fa-building:before {
    content: "\f1ad"
}

.ns-note .fa-child:before {
    content: "\f1ae"
}

.ns-note .fa-paw:before {
    content: "\f1b0"
}

.ns-note .fa-spoon:before {
    content: "\f1b1"
}

.ns-note .fa-cube:before {
    content: "\f1b2"
}

.ns-note .fa-cubes:before {
    content: "\f1b3"
}

.ns-note .fa-behance:before {
    content: "\f1b4"
}

.ns-note .fa-behance-square:before {
    content: "\f1b5"
}

.ns-note .fa-steam:before {
    content: "\f1b6"
}

.ns-note .fa-steam-square:before {
    content: "\f1b7"
}

.ns-note .fa-recycle:before {
    content: "\f1b8"
}

.ns-note .fa-automobile:before,
.ns-note .fa-car:before {
    content: "\f1b9"
}

.ns-note .fa-cab:before,
.ns-note .fa-taxi:before {
    content: "\f1ba"
}

.ns-note .fa-tree:before {
    content: "\f1bb"
}

.ns-note .fa-spotify:before {
    content: "\f1bc"
}

.ns-note .fa-deviantart:before {
    content: "\f1bd"
}

.ns-note .fa-soundcloud:before {
    content: "\f1be"
}

.ns-note .fa-database:before {
    content: "\f1c0"
}

.ns-note .fa-file-pdf-o:before {
    content: "\f1c1"
}

.ns-note .fa-file-word-o:before {
    content: "\f1c2"
}

.ns-note .fa-file-excel-o:before {
    content: "\f1c3"
}

.ns-note .fa-file-powerpoint-o:before {
    content: "\f1c4"
}

.ns-note .fa-file-photo-o:before,
.ns-note .fa-file-picture-o:before,
.ns-note .fa-file-image-o:before {
    content: "\f1c5"
}

.ns-note .fa-file-zip-o:before,
.ns-note .fa-file-archive-o:before {
    content: "\f1c6"
}

.ns-note .fa-file-sound-o:before,
.ns-note .fa-file-audio-o:before {
    content: "\f1c7"
}

.ns-note .fa-file-movie-o:before,
.ns-note .fa-file-video-o:before {
    content: "\f1c8"
}

.ns-note .fa-file-code-o:before {
    content: "\f1c9"
}

.ns-note .fa-vine:before {
    content: "\f1ca"
}

.ns-note .fa-codepen:before {
    content: "\f1cb"
}

.ns-note .fa-jsfiddle:before {
    content: "\f1cc"
}

.ns-note .fa-life-bouy:before,
.ns-note .fa-life-buoy:before,
.ns-note .fa-life-saver:before,
.ns-note .fa-support:before,
.ns-note .fa-life-ring:before {
    content: "\f1cd"
}

.ns-note .fa-circle-o-notch:before {
    content: "\f1ce"
}

.ns-note .fa-ra:before,
.ns-note .fa-resistance:before,
.ns-note .fa-rebel:before {
    content: "\f1d0"
}

.ns-note .fa-ge:before,
.ns-note .fa-empire:before {
    content: "\f1d1"
}

.ns-note .fa-git-square:before {
    content: "\f1d2"
}

.ns-note .fa-git:before {
    content: "\f1d3"
}

.ns-note .fa-y-combinator-square:before,
.ns-note .fa-yc-square:before,
.ns-note .fa-hacker-news:before {
    content: "\f1d4"
}

.ns-note .fa-tencent-weibo:before {
    content: "\f1d5"
}

.ns-note .fa-qq:before {
    content: "\f1d6"
}

.ns-note .fa-wechat:before,
.ns-note .fa-weixin:before {
    content: "\f1d7"
}

.ns-note .fa-send:before,
.ns-note .fa-paper-plane:before {
    content: "\f1d8"
}

.ns-note .fa-send-o:before,
.ns-note .fa-paper-plane-o:before {
    content: "\f1d9"
}

.ns-note .fa-history:before {
    content: "\f1da"
}

.ns-note .fa-circle-thin:before {
    content: "\f1db"
}

.ns-note .fa-header:before {
    content: "\f1dc"
}

.ns-note .fa-paragraph:before {
    content: "\f1dd"
}

.ns-note .fa-sliders:before {
    content: "\f1de"
}

.ns-note .fa-share-alt:before {
    content: "\f1e0"
}

.ns-note .fa-share-alt-square:before {
    content: "\f1e1"
}

.ns-note .fa-bomb:before {
    content: "\f1e2"
}

.ns-note .fa-soccer-ball-o:before,
.ns-note .fa-futbol-o:before {
    content: "\f1e3"
}

.ns-note .fa-tty:before {
    content: "\f1e4"
}

.ns-note .fa-binoculars:before {
    content: "\f1e5"
}

.ns-note .fa-plug:before {
    content: "\f1e6"
}

.ns-note .fa-slideshare:before {
    content: "\f1e7"
}

.ns-note .fa-twitch:before {
    content: "\f1e8"
}

.ns-note .fa-yelp:before {
    content: "\f1e9"
}

.ns-note .fa-newspaper-o:before {
    content: "\f1ea"
}

.ns-note .fa-wifi:before {
    content: "\f1eb"
}

.ns-note .fa-calculator:before {
    content: "\f1ec"
}

.ns-note .fa-paypal:before {
    content: "\f1ed"
}

.ns-note .fa-google-wallet:before {
    content: "\f1ee"
}

.ns-note .fa-cc-visa:before {
    content: "\f1f0"
}

.ns-note .fa-cc-mastercard:before {
    content: "\f1f1"
}

.ns-note .fa-cc-discover:before {
    content: "\f1f2"
}

.ns-note .fa-cc-amex:before {
    content: "\f1f3"
}

.ns-note .fa-cc-paypal:before {
    content: "\f1f4"
}

.ns-note .fa-cc-stripe:before {
    content: "\f1f5"
}

.ns-note .fa-bell-slash:before {
    content: "\f1f6"
}

.ns-note .fa-bell-slash-o:before {
    content: "\f1f7"
}

.ns-note .fa-trash:before {
    content: "\f1f8"
}

.ns-note .fa-copyright:before {
    content: "\f1f9"
}

.ns-note .fa-at:before {
    content: "\f1fa"
}

.ns-note .fa-eyedropper:before {
    content: "\f1fb"
}

.ns-note .fa-paint-brush:before {
    content: "\f1fc"
}

.ns-note .fa-birthday-cake:before {
    content: "\f1fd"
}

.ns-note .fa-area-chart:before {
    content: "\f1fe"
}

.ns-note .fa-pie-chart:before {
    content: "\f200"
}

.ns-note .fa-line-chart:before {
    content: "\f201"
}

.ns-note .fa-lastfm:before {
    content: "\f202"
}

.ns-note .fa-lastfm-square:before {
    content: "\f203"
}

.ns-note .fa-toggle-off:before {
    content: "\f204"
}

.ns-note .fa-toggle-on:before {
    content: "\f205"
}

.ns-note .fa-bicycle:before {
    content: "\f206"
}

.ns-note .fa-bus:before {
    content: "\f207"
}

.ns-note .fa-ioxhost:before {
    content: "\f208"
}

.ns-note .fa-angellist:before {
    content: "\f209"
}

.ns-note .fa-cc:before {
    content: "\f20a"
}

.ns-note .fa-shekel:before,
.ns-note .fa-sheqel:before,
.ns-note .fa-ils:before {
    content: "\f20b"
}

.ns-note .fa-meanpath:before {
    content: "\f20c"
}

.ns-note .fa-buysellads:before {
    content: "\f20d"
}

.ns-note .fa-connectdevelop:before {
    content: "\f20e"
}

.ns-note .fa-dashcube:before {
    content: "\f210"
}

.ns-note .fa-forumbee:before {
    content: "\f211"
}

.ns-note .fa-leanpub:before {
    content: "\f212"
}

.ns-note .fa-sellsy:before {
    content: "\f213"
}

.ns-note .fa-shirtsinbulk:before {
    content: "\f214"
}

.ns-note .fa-simplybuilt:before {
    content: "\f215"
}

.ns-note .fa-skyatlas:before {
    content: "\f216"
}

.ns-note .fa-cart-plus:before {
    content: "\f217"
}

.ns-note .fa-cart-arrow-down:before {
    content: "\f218"
}

.ns-note .fa-diamond:before {
    content: "\f219"
}

.ns-note .fa-ship:before {
    content: "\f21a"
}

.ns-note .fa-user-secret:before {
    content: "\f21b"
}

.ns-note .fa-motorcycle:before {
    content: "\f21c"
}

.ns-note .fa-street-view:before {
    content: "\f21d"
}

.ns-note .fa-heartbeat:before {
    content: "\f21e"
}

.ns-note .fa-venus:before {
    content: "\f221"
}

.ns-note .fa-mars:before {
    content: "\f222"
}

.ns-note .fa-mercury:before {
    content: "\f223"
}

.ns-note .fa-intersex:before,
.ns-note .fa-transgender:before {
    content: "\f224"
}

.ns-note .fa-transgender-alt:before {
    content: "\f225"
}

.ns-note .fa-venus-double:before {
    content: "\f226"
}

.ns-note .fa-mars-double:before {
    content: "\f227"
}

.ns-note .fa-venus-mars:before {
    content: "\f228"
}

.ns-note .fa-mars-stroke:before {
    content: "\f229"
}

.ns-note .fa-mars-stroke-v:before {
    content: "\f22a"
}

.ns-note .fa-mars-stroke-h:before {
    content: "\f22b"
}

.ns-note .fa-neuter:before {
    content: "\f22c"
}

.ns-note .fa-genderless:before {
    content: "\f22d"
}

.ns-note .fa-facebook-official:before {
    content: "\f230"
}

.ns-note .fa-pinterest-p:before {
    content: "\f231"
}

.ns-note .fa-whatsapp:before {
    content: "\f232"
}

.ns-note .fa-server:before {
    content: "\f233"
}

.ns-note .fa-user-plus:before {
    content: "\f234"
}

.ns-note .fa-user-times:before {
    content: "\f235"
}

.ns-note .fa-hotel:before,
.ns-note .fa-bed:before {
    content: "\f236"
}

.ns-note .fa-viacoin:before {
    content: "\f237"
}

.ns-note .fa-train:before {
    content: "\f238"
}

.ns-note .fa-subway:before {
    content: "\f239"
}

.ns-note .fa-medium:before {
    content: "\f23a"
}

.ns-note .fa-yc:before,
.ns-note .fa-y-combinator:before {
    content: "\f23b"
}

.ns-note .fa-optin-monster:before {
    content: "\f23c"
}

.ns-note .fa-opencart:before {
    content: "\f23d"
}

.ns-note .fa-expeditedssl:before {
    content: "\f23e"
}

.ns-note .fa-battery-4:before,
.ns-note .fa-battery:before,
.ns-note .fa-battery-full:before {
    content: "\f240"
}

.ns-note .fa-battery-3:before,
.ns-note .fa-battery-three-quarters:before {
    content: "\f241"
}

.ns-note .fa-battery-2:before,
.ns-note .fa-battery-half:before {
    content: "\f242"
}

.ns-note .fa-battery-1:before,
.ns-note .fa-battery-quarter:before {
    content: "\f243"
}

.ns-note .fa-battery-0:before,
.ns-note .fa-battery-empty:before {
    content: "\f244"
}

.ns-note .fa-mouse-pointer:before {
    content: "\f245"
}

.ns-note .fa-i-cursor:before {
    content: "\f246"
}

.ns-note .fa-object-group:before {
    content: "\f247"
}

.ns-note .fa-object-ungroup:before {
    content: "\f248"
}

.ns-note .fa-sticky-note:before {
    content: "\f249"
}

.ns-note .fa-sticky-note-o:before {
    content: "\f24a"
}

.ns-note .fa-cc-jcb:before {
    content: "\f24b"
}

.ns-note .fa-cc-diners-club:before {
    content: "\f24c"
}

.ns-note .fa-clone:before {
    content: "\f24d"
}

.ns-note .fa-balance-scale:before {
    content: "\f24e"
}

.ns-note .fa-hourglass-o:before {
    content: "\f250"
}

.ns-note .fa-hourglass-1:before,
.ns-note .fa-hourglass-start:before {
    content: "\f251"
}

.ns-note .fa-hourglass-2:before,
.ns-note .fa-hourglass-half:before {
    content: "\f252"
}

.ns-note .fa-hourglass-3:before,
.ns-note .fa-hourglass-end:before {
    content: "\f253"
}

.ns-note .fa-hourglass:before {
    content: "\f254"
}

.ns-note .fa-hand-grab-o:before,
.ns-note .fa-hand-rock-o:before {
    content: "\f255"
}

.ns-note .fa-hand-stop-o:before,
.ns-note .fa-hand-paper-o:before {
    content: "\f256"
}

.ns-note .fa-hand-scissors-o:before {
    content: "\f257"
}

.ns-note .fa-hand-lizard-o:before {
    content: "\f258"
}

.ns-note .fa-hand-spock-o:before {
    content: "\f259"
}

.ns-note .fa-hand-pointer-o:before {
    content: "\f25a"
}

.ns-note .fa-hand-peace-o:before {
    content: "\f25b"
}

.ns-note .fa-trademark:before {
    content: "\f25c"
}

.ns-note .fa-registered:before {
    content: "\f25d"
}

.ns-note .fa-creative-commons:before {
    content: "\f25e"
}

.ns-note .fa-gg:before {
    content: "\f260"
}

.ns-note .fa-gg-circle:before {
    content: "\f261"
}

.ns-note .fa-tripadvisor:before {
    content: "\f262"
}

.ns-note .fa-odnoklassniki:before {
    content: "\f263"
}

.ns-note .fa-odnoklassniki-square:before {
    content: "\f264"
}

.ns-note .fa-get-pocket:before {
    content: "\f265"
}

.ns-note .fa-wikipedia-w:before {
    content: "\f266"
}

.ns-note .fa-safari:before {
    content: "\f267"
}

.ns-note .fa-chrome:before {
    content: "\f268"
}

.ns-note .fa-firefox:before {
    content: "\f269"
}

.ns-note .fa-opera:before {
    content: "\f26a"
}

.ns-note .fa-internet-explorer:before {
    content: "\f26b"
}

.ns-note .fa-tv:before,
.ns-note .fa-television:before {
    content: "\f26c"
}

.ns-note .fa-contao:before {
    content: "\f26d"
}

.ns-note .fa-500px:before {
    content: "\f26e"
}

.ns-note .fa-amazon:before {
    content: "\f270"
}

.ns-note .fa-calendar-plus-o:before {
    content: "\f271"
}

.ns-note .fa-calendar-minus-o:before {
    content: "\f272"
}

.ns-note .fa-calendar-times-o:before {
    content: "\f273"
}

.ns-note .fa-calendar-check-o:before {
    content: "\f274"
}

.ns-note .fa-industry:before {
    content: "\f275"
}

.ns-note .fa-map-pin:before {
    content: "\f276"
}

.ns-note .fa-map-signs:before {
    content: "\f277"
}

.ns-note .fa-map-o:before {
    content: "\f278"
}

.ns-note .fa-map:before {
    content: "\f279"
}

.ns-note .fa-commenting:before {
    content: "\f27a"
}

.ns-note .fa-commenting-o:before {
    content: "\f27b"
}

.ns-note .fa-houzz:before {
    content: "\f27c"
}

.ns-note .fa-vimeo:before {
    content: "\f27d"
}

.ns-note .fa-black-tie:before {
    content: "\f27e"
}

.ns-note .fa-fonticons:before {
    content: "\f280"
}

.ns-note .fa-reddit-alien:before {
    content: "\f281"
}

.ns-note .fa-edge:before {
    content: "\f282"
}

.ns-note .fa-credit-card-alt:before {
    content: "\f283"
}

.ns-note .fa-codiepie:before {
    content: "\f284"
}

.ns-note .fa-modx:before {
    content: "\f285"
}

.ns-note .fa-fort-awesome:before {
    content: "\f286"
}

.ns-note .fa-usb:before {
    content: "\f287"
}

.ns-note .fa-product-hunt:before {
    content: "\f288"
}

.ns-note .fa-mixcloud:before {
    content: "\f289"
}

.ns-note .fa-scribd:before {
    content: "\f28a"
}

.ns-note .fa-pause-circle:before {
    content: "\f28b"
}

.ns-note .fa-pause-circle-o:before {
    content: "\f28c"
}

.ns-note .fa-stop-circle:before {
    content: "\f28d"
}

.ns-note .fa-stop-circle-o:before {
    content: "\f28e"
}

.ns-note .fa-shopping-bag:before {
    content: "\f290"
}

.ns-note .fa-shopping-basket:before {
    content: "\f291"
}

.ns-note .fa-hashtag:before {
    content: "\f292"
}

.ns-note .fa-bluetooth:before {
    content: "\f293"
}

.ns-note .fa-bluetooth-b:before {
    content: "\f294"
}

.ns-note .fa-percent:before {
    content: "\f295"
}

.ns-note .fa-gitlab:before {
    content: "\f296"
}

.ns-note .fa-wpbeginner:before {
    content: "\f297"
}

.ns-note .fa-wpforms:before {
    content: "\f298"
}

.ns-note .fa-envira:before {
    content: "\f299"
}

.ns-note .fa-universal-access:before {
    content: "\f29a"
}

.ns-note .fa-wheelchair-alt:before {
    content: "\f29b"
}

.ns-note .fa-question-circle-o:before {
    content: "\f29c"
}

.ns-note .fa-blind:before {
    content: "\f29d"
}

.ns-note .fa-audio-description:before {
    content: "\f29e"
}

.ns-note .fa-volume-control-phone:before {
    content: "\f2a0"
}

.ns-note .fa-braille:before {
    content: "\f2a1"
}

.ns-note .fa-assistive-listening-systems:before {
    content: "\f2a2"
}

.ns-note .fa-asl-interpreting:before,
.ns-note .fa-american-sign-language-interpreting:before {
    content: "\f2a3"
}

.ns-note .fa-deafness:before,
.ns-note .fa-hard-of-hearing:before,
.ns-note .fa-deaf:before {
    content: "\f2a4"
}

.ns-note .fa-glide:before {
    content: "\f2a5"
}

.ns-note .fa-glide-g:before {
    content: "\f2a6"
}

.ns-note .fa-signing:before,
.ns-note .fa-sign-language:before {
    content: "\f2a7"
}

.ns-note .fa-low-vision:before {
    content: "\f2a8"
}

.ns-note .fa-viadeo:before {
    content: "\f2a9"
}

.ns-note .fa-viadeo-square:before {
    content: "\f2aa"
}

.ns-note .fa-snapchat:before {
    content: "\f2ab"
}

.ns-note .fa-snapchat-ghost:before {
    content: "\f2ac"
}

.ns-note .fa-snapchat-square:before {
    content: "\f2ad"
}

.ns-note .fa-pied-piper:before {
    content: "\f2ae"
}

.ns-note .fa-first-order:before {
    content: "\f2b0"
}

.ns-note .fa-yoast:before {
    content: "\f2b1"
}

.ns-note .fa-themeisle:before {
    content: "\f2b2"
}

.ns-note .fa-google-plus-circle:before,
.ns-note .fa-google-plus-official:before {
    content: "\f2b3"
}

.ns-note .fa-fa:before,
.ns-note .fa-font-awesome:before {
    content: "\f2b4"
}

.ns-note .fa-handshake-o:before {
    content: "\f2b5"
}

.ns-note .fa-envelope-open:before {
    content: "\f2b6"
}

.ns-note .fa-envelope-open-o:before {
    content: "\f2b7"
}

.ns-note .fa-linode:before {
    content: "\f2b8"
}

.ns-note .fa-address-book:before {
    content: "\f2b9"
}

.ns-note .fa-address-book-o:before {
    content: "\f2ba"
}

.ns-note .fa-vcard:before,
.ns-note .fa-address-card:before {
    content: "\f2bb"
}

.ns-note .fa-vcard-o:before,
.ns-note .fa-address-card-o:before {
    content: "\f2bc"
}

.ns-note .fa-user-circle:before {
    content: "\f2bd"
}

.ns-note .fa-user-circle-o:before {
    content: "\f2be"
}

.ns-note .fa-user-o:before {
    content: "\f2c0"
}

.ns-note .fa-id-badge:before {
    content: "\f2c1"
}

.ns-note .fa-drivers-license:before,
.ns-note .fa-id-card:before {
    content: "\f2c2"
}

.ns-note .fa-drivers-license-o:before,
.ns-note .fa-id-card-o:before {
    content: "\f2c3"
}

.ns-note .fa-quora:before {
    content: "\f2c4"
}

.ns-note .fa-free-code-camp:before {
    content: "\f2c5"
}

.ns-note .fa-telegram:before {
    content: "\f2c6"
}

.ns-note .fa-thermometer-4:before,
.ns-note .fa-thermometer:before,
.ns-note .fa-thermometer-full:before {
    content: "\f2c7"
}

.ns-note .fa-thermometer-3:before,
.ns-note .fa-thermometer-three-quarters:before {
    content: "\f2c8"
}

.ns-note .fa-thermometer-2:before,
.ns-note .fa-thermometer-half:before {
    content: "\f2c9"
}

.ns-note .fa-thermometer-1:before,
.ns-note .fa-thermometer-quarter:before {
    content: "\f2ca"
}

.ns-note .fa-thermometer-0:before,
.ns-note .fa-thermometer-empty:before {
    content: "\f2cb"
}

.ns-note .fa-shower:before {
    content: "\f2cc"
}

.ns-note .fa-bathtub:before,
.ns-note .fa-s15:before,
.ns-note .fa-bath:before {
    content: "\f2cd"
}

.ns-note .fa-podcast:before {
    content: "\f2ce"
}

.ns-note .fa-window-maximize:before {
    content: "\f2d0"
}

.ns-note .fa-window-minimize:before {
    content: "\f2d1"
}

.ns-note .fa-window-restore:before {
    content: "\f2d2"
}

.ns-note .fa-times-rectangle:before,
.ns-note .fa-window-close:before {
    content: "\f2d3"
}

.ns-note .fa-times-rectangle-o:before,
.ns-note .fa-window-close-o:before {
    content: "\f2d4"
}

.ns-note .fa-bandcamp:before {
    content: "\f2d5"
}

.ns-note .fa-grav:before {
    content: "\f2d6"
}

.ns-note .fa-etsy:before {
    content: "\f2d7"
}

.ns-note .fa-imdb:before {
    content: "\f2d8"
}

.ns-note .fa-ravelry:before {
    content: "\f2d9"
}

.ns-note .fa-eercast:before {
    content: "\f2da"
}

.ns-note .fa-microchip:before {
    content: "\f2db"
}

.ns-note .fa-snowflake-o:before {
    content: "\f2dc"
}

.ns-note .fa-superpowers:before {
    content: "\f2dd"
}

.ns-note .fa-wpexplorer:before {
    content: "\f2de"
}

.ns-note .fa-meetup:before {
    content: "\f2e0"
}

.ns-note .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.ns-note .sr-only-focusable:active,
.ns-note .sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}

.ns-note .fude-menu {
    background: #222;
    position: absolute;
    opacity: 1;
    padding: 0 10px;
    border-radius: 3px
}

.ns-note .fude-menu .fude-icon {
    font-size: 18px;
    color: #fff;
    width: 30px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-fude-menu-0057ee176b09fa4d86d45d46db8529c355e4ae781f805ef14dea95c313f6f734.png) no-repeat;
    text-indent: -9999px
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .fude-menu .fude-icon {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-fude-menu_retina-f33f2a291e75a9f220969a8bc402887b44489b65a18ddaf5093d696ce2ed8a85.png) no-repeat;
        background-size: 330px 80px
    }
}

.ns-note .fude-menu .fude-icon:hover {
    color: #999
}

.ns-note .fude-menu .fude-icon-blockquote {
    background-position: -300px 0px
}

.ns-note .fude-menu .fude-icon-blockquote:hover {
    background-position: -300px -40px
}

.ns-note .fude-menu .fude-icon-blockquote.active {
    background-position: -300px -40px
}

.ns-note .fude-menu .fude-icon-h3 {
    background-position: 0px 0px
}

.ns-note .fude-menu .fude-icon-h3:hover {
    background-position: 0px -40px
}

.ns-note .fude-menu .fude-icon-h3.active {
    background-position: 0px -40px
}

.ns-note .fude-menu .fude-icon-p {
    background-position: -30px 0px
}

.ns-note .fude-menu .fude-icon-p:hover {
    background-position: -30px -40px
}

.ns-note .fude-menu .fude-icon-p.active {
    background-position: -30px -40px
}

.ns-note .fude-menu .fude-icon-bold {
    background-position: -60px 0px
}

.ns-note .fude-menu .fude-icon-bold:hover {
    background-position: -60px -40px
}

.ns-note .fude-menu .fude-icon-bold.active {
    background-position: -60px -40px
}

.ns-note .fude-menu .fude-icon-justifyleft {
    background-position: -90px 0px
}

.ns-note .fude-menu .fude-icon-justifyleft:hover {
    background-position: -90px -40px
}

.ns-note .fude-menu .fude-icon-justifyleft.active {
    background-position: -90px -40px
}

.ns-note .fude-menu .fude-icon-justifycenter {
    background-position: -120px 0px
}

.ns-note .fude-menu .fude-icon-justifycenter:hover {
    background-position: -120px -40px
}

.ns-note .fude-menu .fude-icon-justifycenter.active {
    background-position: -120px -40px
}

.ns-note .fude-menu .fude-icon-justifyright {
    background-position: -150px 0px
}

.ns-note .fude-menu .fude-icon-justifyright:hover {
    background-position: -150px -40px
}

.ns-note .fude-menu .fude-icon-justifyright.active {
    background-position: -150px -40px
}

.ns-note .fude-menu .fude-icon-createlink {
    background-position: -180px 0px
}

.ns-note .fude-menu .fude-icon-createlink:hover {
    background-position: -180px -40px
}

.ns-note .fude-menu .fude-icon-createlink.active {
    background-position: -180px -40px
}

.ns-note .fude-menu .fude-link-input {
    display: none;
    position: absolute;
    left: 0;
    top: 0
}

.ns-note .fude-menu .fude-input:focus {
    outline: none
}

.ns-note .fude-menu .fude-link-input-field {
    background: #333;
    border: none;
    color: #fff;
    display: inline-block;
    font-family: arial, sans-serif;
    padding: 10px;
    width: 190px;
    height: 40px;
    border-radius: 3px;
    outline: none
}

.ns-note .fude-menu .fude-link-input-close {
    background: #333;
    color: #fff;
    display: inline-block;
    float: right;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 3px
}

.ns-note .fude-menu .fude-link-input-close .fude-icon-transform180Y {
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg)
}

.ns-note .fude-menu .fude-link-input-close .fa-chain-broken:hover {
    color: #18b6a5
}

.ns-note .fude-image-menu {
    background: #222;
    position: absolute;
    opacity: 1;
    padding: 0 10px;
    border-radius: 3px
}

.ns-note .fude-image-menu .fude-icon {
    font-size: 18px;
    color: #fff;
    width: 30px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-fude-menu-0057ee176b09fa4d86d45d46db8529c355e4ae781f805ef14dea95c313f6f734.png) no-repeat;
    text-indent: -9999px
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .fude-image-menu .fude-icon {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-fude-menu_retina-f33f2a291e75a9f220969a8bc402887b44489b65a18ddaf5093d696ce2ed8a85.png) no-repeat;
        background-size: 330px 80px
    }
}

.ns-note .fude-image-menu .fude-icon:hover {
    color: #999
}

.ns-note .fude-image-menu .fude-icon-createlink {
    background-position: -180px 0px
}

.ns-note .fude-image-menu .fude-icon-createlink:hover {
    background-position: -180px -40px
}

.ns-note .fude-image-menu .fude-icon-createlink.active {
    background-position: -180px -40px
}

.ns-note .fude-image-menu .fude-icon-delete {
    background-position: -210px 0px
}

.ns-note .fude-image-menu .fude-icon-delete:hover {
    background-position: -210px -40px
}

.ns-note .fude-image-menu .fude-icon-delete.active {
    background-position: -210px -40px
}

.ns-note .fude-image-menu .fude-icon-changesize-big {
    background-position: -240px 0px
}

.ns-note .fude-image-menu .fude-icon-changesize-big:hover {
    background-position: -240px -40px
}

.ns-note .fude-image-menu .fude-icon-changesize-big.active {
    background-position: -240px -40px
}

.ns-note .fude-image-menu .fude-icon-changesize-small {
    background-position: -270px 0px
}

.ns-note .fude-image-menu .fude-icon-changesize-small:hover {
    background-position: -270px -40px
}

.ns-note .fude-image-menu .fude-icon-changesize-small.active {
    background-position: -270px -40px
}

.ns-note .fude-image-menu .fude-image-link-input {
    display: none;
    position: absolute;
    left: -50px;
    top: 0
}

.ns-note .fude-image-menu .fude-image-link-input-field {
    background: #333;
    border: none;
    color: #fff;
    display: inline-block;
    font-family: arial, sans-serif;
    padding: 10px;
    width: 190px;
    height: 40px;
    border-radius: 3px;
    outline: none
}

.ns-note .fude-image-menu .fude-image-link-input-close {
    position: absolute;
    background: #333;
    color: #fff;
    display: inline-block;
    float: right;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 3px
}

.ns-note .fude-image-menu .fude-image-link-input-close .fude-icon-transform180Y {
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg)
}

.ns-note .fude-image-menu .fude-image-link-input-close .fa-chain-broken:hover {
    color: #18b6a5
}

.ns-note .fude-figure-menu {
    background: #222;
    position: absolute;
    opacity: 1;
    padding: 0 10px;
    border-radius: 3px;
    height: 40px
}

.ns-note .fude-figure-menu .fude-icon {
    font-size: 18px;
    color: #fff;
    width: 30px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-fude-menu-0057ee176b09fa4d86d45d46db8529c355e4ae781f805ef14dea95c313f6f734.png) no-repeat;
    text-indent: -9999px
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .fude-figure-menu .fude-icon {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-fude-menu_retina-f33f2a291e75a9f220969a8bc402887b44489b65a18ddaf5093d696ce2ed8a85.png) no-repeat;
        background-size: 330px 80px
    }
}

.ns-note .fude-figure-menu .fude-icon:hover {
    color: #999
}

.ns-note .fude-figure-menu .fude-icon-delete {
    background-position: -210px 0px
}

.ns-note .fude-figure-menu .fude-icon-delete:hover {
    background-position: -210px -40px
}

.ns-note .fude-figure-menu .fude-icon-delete.active {
    background-position: -210px -40px
}

.ns-note #fude-uploadbtn {
    margin-top: 5px
}

.ns-note #fude-uploadbtn .btn-plus {
    width: 21px;
    height: 21px;
    background: #222;
    text-indent: -9999px;
    cursor: pointer;
    border-radius: 20px;
    display: block
}

.ns-note #fude-uploadbtn .btn-plus .icon-plus {
    position: relative;
    left: 7px;
    top: 7px;
    display: block
}

.ns-note #fude-uploadbtn .btn-plus .icon-plus:before,
.ns-note #fude-uploadbtn .btn-plus .icon-plus:after {
    content: '';
    height: 1px;
    width: 7px;
    display: block;
    background: #FFF;
    position: absolute;
    top: 3px;
    left: 0px
}

.ns-note #fude-uploadbtn .btn-plus .icon-plus:after {
    height: 7px;
    width: 1px;
    top: 0;
    left: 3px
}

.ns-note #fude-uploadbtn .bg-line {
    width: 620px;
    height: 1px;
    background: #222;
    display: block;
    position: absolute;
    left: 20px;
    top: 10px;
    opacity: 0
}

.ns-note #fude-uploadbtn:hover .btn-plus {
    width: 27px;
    height: 27px;
    margin-left: -3px;
    margin-top: -3px
}

.ns-note #fude-uploadbtn:hover .btn-plus .icon-plus {
    left: 10px;
    top: 10px
}

.ns-note #fude-uploadbtn:hover .bg-line {
    opacity: 1
}

.ns-note #fude-uploadbtn:hover .guide-txt {
    opacity: 1
}

.ns-note #fude-uploadbtn:hover .tooltip-arrow {
    opacity: 1
}

.ns-note #fude-uploadbtn .guide-txt {
    opacity: 0;
    width: 90px;
    padding: 6px 8px;
    color: #fff;
    background-color: #222;
    position: absolute;
    border-radius: 4px;
    left: -100px;
    top: -10px;
    font-size: 12px;
    text-align: center;
    line-height: 1.3
}

.ns-note #fude-uploadbtn .tooltip-arrow {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: 6px;
    left: -10px;
    border-width: 5px 0px 5px 5px;
    border-left-color: #222
}

.ns-note .fude-img-overlay.is-selected {
    border: 3px #41c9b4 solid
}

.ns-note .fude-iframe-container {
    display: block;
    margin: auto;
    max-width: 100%;
    width: 500px
}

.ns-note .fude-iframe-container-note>iframe {
    display: block !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important
}

.ns-note .fude-iframe-container-youtube,
.ns-note .fude-iframe-container-vimeo,
.ns-note .fude-iframe-container-niconico {
    width: 100%;
    padding-bottom: 56.25% !important;
    height: 0px
}

.ns-note .fude-iframe-container-youtube .widget-cover,
.ns-note .fude-iframe-container-vimeo .widget-cover,
.ns-note .fude-iframe-container-niconico .widget-cover {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0px;
    overflow: hidden
}

.ns-note .fude-iframe-container-youtube iframe,
.ns-note .fude-iframe-container-vimeo iframe,
.ns-note .fude-iframe-container-niconico iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ns-note .fude-iframe-container-youtube div,
.ns-note .fude-iframe-container-vimeo div {
    padding-bottom: 56.25% !important
}

.ns-note .fude-iframe-container-gist {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.ns-note .fude-iframe-container-googleform {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.ns-note .fude-iframe-container-tiktok span div {
    max-width: initial !important;
    left: auto !important;
    height: auto !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    position: static !important
}

@media only screen and (max-width: 479px) {
    .ns-note .fude-iframe-container-tiktok span div {
        width: 100% !important;
        padding-bottom: 240% !important;
        height: 0px !important;
        position: relative !important
    }
}

.ns-note .fude-iframe-container-tiktok iframe {
    width: 340px !important;
    height: 818px !important;
    display: block;
    top: auto !important;
    left: auto !important;
    position: relative !important
}

@media only screen and (max-width: 479px) {
    .ns-note .fude-iframe-container-tiktok iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important
    }
}

.ns-note .fude-iframe-container-googlemap {
    width: 100%;
    padding-bottom: calc(75%) !important;
    height: 0px
}

.ns-note .fude-iframe-container-googlemap .widget-cover {
    width: 100%;
    padding-bottom: calc(75%) !important;
    height: 0px;
    overflow: hidden
}

.ns-note .fude-iframe-container-googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ns-note .fude-iframe-container-slideshare {
    width: 100%;
    padding-bottom: calc(75% + 44px) !important;
    height: 0px
}

.ns-note .fude-iframe-container-slideshare .widget-cover {
    width: 100%;
    padding-bottom: calc(75% + 44px) !important;
    height: 0px;
    overflow: hidden
}

.ns-note .fude-iframe-container-slideshare iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ns-note .fude-iframe-container-alu {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto
}

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

.ns-note .fude-iframe-ratio-widget__inner {
    position: static;
    left: auto;
    max-width: initial;
    height: auto;
    padding-top: 0;
    padding-bottom: 0
}

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

.ns-note .fude-iframe-ratio-widget__domain {
    text-align: right
}

.ns-note .fude-iframe-ratio-widget__link {
    display: inline-block;
    padding-top: 10px;
    font-size: 12px;
    text-decoration: none;
    color: #787c7b
}

.ns-note *[data-placeholder][data-placeholder-show=true]:not(:focus):before {
    content: attr(data-placeholder);
    float: left;
    margin-left: 2px;
    color: #b3b3b3
}

.ns-note [contenteditable=true] img:hover {
    border-color: rgba(0, 0, 0, 0.2)
}

.ns-note [contenteditable=true] img.is-selected {
    border-color: #2cb696
}

.ns-note [contenteditable=true] .widget-cover>* {
    pointer-events: none
}

.ns-note [contenteditable=true] .fude-iframe-container-speakerdeck .widget-cover.is-selected::before {
    border-radius: 6px
}

.ns-note [contenteditable=true] .fude-iframe-container-instagram .widget-cover {
    max-width: 500px
}

.ns-note [contenteditable=true] .fude-iframe-container-slideshare .widget-cover.is-selected::before {
    border-radius: 0
}

.ns-note .note-toolbar-arrow-under:after,
.ns-note .note-toolbar-arrow-over:before {
    position: absolute;
    left: 50%;
    display: block;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    content: ""
}

.ns-note .note-toolbar-arrow-under:after {
    border-width: 8px 8px 0 8px
}

.ns-note .note-toolbar-arrow-over:before {
    top: -8px;
    border-width: 0 8px 8px 8px
}

.ns-note .note-editor-toolbar,
.ns-note .note-editor-anchor-preview {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    visibility: hidden;
    font-size: 16px;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}

.ns-note .note-editor-toolbar ul,
.ns-note .note-editor-anchor-preview ul {
    margin: 0;
    padding: 0
}

.ns-note .note-editor-toolbar li,
.ns-note .note-editor-anchor-preview li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle
}

.ns-note .note-editor-toolbar li button,
.ns-note .note-editor-anchor-preview li button {
    display: block;
    margin: 0;
    padding: 15px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.33;
    text-decoration: none;
    box-sizing: border-box
}

.ns-note .note-editor-anchor-preview i {
    display: inline-block;
    margin: 5px 5px 5px 10px;
    text-decoration: underline;
    font-style: normal;
    cursor: pointer
}

.ns-note .note-editor-toolbar-active,
.ns-note .note-editor-anchor-preview-active {
    visibility: visible
}

.ns-note .stalker-toolbar {
    -webkit-animation: pop-upwards 160ms forwards linear;
    animation: pop-upwards 160ms forwards linear;
    -webkit-transition: top .075s ease-out, left .075s ease-out;
    transition: top .075s ease-out, left .075s ease-out
}

.ns-note .note-editor-action-bold {
    font-weight: bolder
}

.ns-note .note-editor-toolbar-form-anchor {
    display: none
}

.ns-note .note-editor-toolbar-form-anchor input,
.ns-note .note-editor-toolbar-form-anchor a {
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}

.ns-note .note-editor-toolbar-form-anchor .note-editor-toolbar-anchor-input,
.ns-note .note-editor-toolbar-form-anchor label {
    height: auto !important;
    margin: 0 25px 0 0;
    padding: 6px;
    border: none;
    font-size: 14px;
    box-sizing: border-box
}

.ns-note .note-editor-toolbar-form-anchor .note-editor-toolbar-anchor-input:focus,
.ns-note .note-editor-toolbar-form-anchor label:focus {
    outline: 0;
    border: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

.ns-note .note-editor-toolbar-form-anchor label {
    display: block
}

.ns-note .note-editor-toolbar-form-anchor a {
    display: inline-block;
    margin: 0 10px;
    text-decoration: none;
    font-weight: bolder;
    font-size: 24px
}

.ns-note .note-editor-toolbar-form-anchor#note-editor-toolbar-form-anchor1 {
    position: relative;
    padding: 6px 0
}

.ns-note .note-editor-toolbar-form-anchor#note-editor-toolbar-form-anchor1 .note-editor-toobar-anchor-close {
    position: absolute;
    top: -1px;
    right: -5px;
    font-size: 24px;
    background: #222
}

.ns-note .note-editor-placeholder {
    position: relative
}

.ns-note .note-editor-placeholder:after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-placeholder) !important;
    float: left;
    margin-left: 2px;
    color: #b3b3b3
}

.ns-note .note-toolbar-arrow-under:after {
    border-color: #242424 transparent transparent transparent
}

.ns-note .note-toolbar-arrow-over:before {
    border-color: transparent transparent #242424 transparent
}

.ns-note .note-editor-toolbar {
    border: 1px solid #000;
    background-color: #242424;
    background: -webkit-linear-gradient(bottom, #242424, rgba(36, 36, 36, 0.75));
    background: linear-gradient(bottom, #242424, rgba(36, 36, 36, 0.75));
    -webkit-transition: top .075s ease-out, left .075s ease-out;
    transition: top .075s ease-out, left .075s ease-out
}

.ns-note .note-editor-toolbar li button {
    height: 50px;
    border: 0;
    background-color: #242424;
    color: #fff;
    background: -webkit-linear-gradient(bottom, #242424, rgba(36, 36, 36, 0.89));
    background: linear-gradient(bottom, #242424, rgba(36, 36, 36, 0.89));
    -webkit-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}

.ns-note .note-editor-toolbar li button:hover {
    background-color: #000;
    color: yellow
}

.ns-note .note-editor-toolbar li .note-editor-button-first {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px
}

.ns-note .note-editor-toolbar li .note-editor-button-last {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.ns-note .note-editor-toolbar li .note-editor-button-active {
    background-color: #000;
    color: #fff;
    background: -webkit-linear-gradient(bottom, #242424, rgba(0, 0, 0, 0.89));
    background: linear-gradient(bottom, #242424, rgba(0, 0, 0, 0.89))
}

.ns-note .note-editor-toolbar-form-anchor {
    background: #242424;
    color: #999;
    border-radius: 5px
}

.ns-note .note-editor-toolbar-form-anchor .note-editor-toolbar-anchor-input {
    background: #242424;
    color: #ccc;
    box-sizing: border-box
}

.ns-note .note-editor-toolbar-form-anchor a {
    color: #fff
}

.ns-note .note-editor-toolbar-anchor-preview {
    background: #242424;
    color: #fff;
    border-radius: 5px
}

.ns-note .note-editor-placeholder:after {
    color: #b3b3b1
}

.ns-note .ng-drawer-no-scroll {
    position: static;
    overflow: hidden;
    height: 100%
}

.ns-note .ng-drawer-bg {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 47px) !important;
    display: none;
    opacity: 0;
    z-index: 100;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.4, 0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.4, 0.95)
}

.ns-note .ng-drawer-bg.active {
    display: block;
    opacity: 1
}

.ns-note .ng-drawer {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.4, 0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.4, 0.95);
    top: 47px;
    background-color: #fff;
    overflow: auto;
    z-index: 110;
    width: 280px;
    word-break: break-all;
    word-wrap: break-word;
    height: calc(100% - 47px) !important
}

.ns-note .ng-drawer.ng-drawer-left {
    left: 0;
    box-shadow: 1px 0 3px rgba(50, 50, 50, 0.5);
    -webkit-transform: translateZ(0px) translateX(-285px) translateY(0px);
    transform: translateZ(0px) translateX(-285px) translateY(0px)
}

.ns-note .ng-drawer.ng-drawer-right {
    right: 0;
    box-shadow: -1px 0 3px rgba(50, 50, 50, 0.5);
    -webkit-transform: translateZ(0px) translateX(255px) translateY(0px);
    transform: translateZ(0px) translateX(255px) translateY(0px)
}

.ns-note .ng-drawer.ng-drawer-left.active,
.ns-note .ng-drawer.ng-drawer-right.active {
    -webkit-transform: translateZ(0px) translateX(0px) translateY(0px);
    transform: translateZ(0px) translateX(0px) translateY(0px)
}

@-webkit-keyframes loadingAnimationSpin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes loadingAnimationSpin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.ns-note html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

.ns-note body {
    margin: 0
}

.ns-note h1,
.ns-note h2,
.ns-note h3,
.ns-note h4,
.ns-note h5,
.ns-note h6 {
    margin: 0;
    font-size: 1em
}

.ns-note p,
.ns-note blockquote,
.ns-note dl,
.ns-note dt,
.ns-note dd,
.ns-note ul,
.ns-note ol,
.ns-note li,
.ns-note form {
    font-size: 10px
}

.ns-note p,
.ns-note blockquote,
.ns-note dl,
.ns-note dd,
.ns-note figure {
    margin: 0
}

.ns-note hr {
    box-sizing: content-box;
    height: auto;
    color: inherit
}

.ns-note pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: monospace, sans-serif
}

.ns-note ol,
.ns-note ul {
    margin: 0;
    padding: 0
}

.ns-note li {
    list-style: none
}

.ns-note a:focus {
    outline: thin dotted
}

.ns-note a:hover,
.ns-note a:active {
    outline: 0
}

.ns-note br {
    *letter-spacing: 0
}

.ns-note img {
    border: 0;
    vertical-align: top;
    -ms-interpolation-mode: bicubic
}

.ns-note table {
    border-spacing: 0;
    border-collapse: collapse
}

.ns-note caption {
    padding: 0;
    text-align: left
}

.ns-note th,
.ns-note td {
    padding: 0;
    vertical-align: baseline;
    text-align: left
}

.ns-note form {
    margin: 0
}

.ns-note fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.ns-note legend {
    border: 0;
    *margin-left: -7px
}

.ns-note input,
.ns-note button,
.ns-note select,
.ns-note textarea {
    margin: 0;
    color: inherit;
    font-size: 1em;
    font-family: inherit
}

.ns-note input,
.ns-note button {
    vertical-align: inherit;
    line-height: normal;
    *vertical-align: middle
}

.ns-note input::-moz-focus-inner,
.ns-note button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.ns-note input[type="search"] {
    box-sizing: content-box;
    -webkit-appearance: textfield
}

.ns-note input[type="search"]:focus {
    outline-offset: -2px
}

.ns-note input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

.ns-note input[type="checkbox"],
.ns-note input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

.ns-note input[type="submit"],
.ns-note input[type="reset"],
.ns-note input[type="button"],
.ns-note button {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible
}

.ns-note textarea {
    overflow: auto;
    vertical-align: top;
    *font-family: sans-serif
}

.ns-note p,
.ns-note blockquote,
.ns-note dl,
.ns-note dt,
.ns-note dd,
.ns-note ul,
.ns-note ol,
.ns-note li,
.ns-note form {
    font-size: 12px
}

.ns-note a,
.ns-note a:focus {
    overflow: hidden;
    outline: none
}

.ns-note a {
    color: #222222;
    text-decoration: none;
    cursor: pointer
}

.ns-note *,
.ns-note *:before,
.ns-note *:after {
    box-sizing: border-box !important
}

.ns-note .grid-3 {
    width: 33.333333333%
}

.ns-note .grid-4 {
    width: 25%
}

.ns-note .grid-5 {
    width: 20%
}

.ns-note .w500 {
    width: 500px
}

.ns-note .w200 {
    width: 200px
}

.ns-note .w100 {
    width: 100px
}

.ns-note .w65per {
    width: 65%
}

.ns-note .w68per {
    width: 68%
}

.ns-note .offset-large {
    margin-left: 60px
}

.ns-note .offset {
    margin-left: 50px
}

.ns-note .offset-small {
    margin-left: 40px
}

.ns-note .row:before,
.ns-note .row:after,
.ns-note .clearfix:before,
.ns-note .btn-group:before,
.ns-note .modal-window__sns:before,
.ns-note .get-urlname>ul:before,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label:before,
.ns-note .mag-top__button-group:before,
.ns-note .clearfix:after,
.ns-note .btn-group:after,
.ns-note .modal-window__sns:after,
.ns-note .get-urlname>ul:after,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label:after,
.ns-note .mag-top__button-group:after {
    display: table;
    content: ""
}

.ns-note .row:after,
.ns-note .clearfix:after,
.ns-note .btn-group:after,
.ns-note .modal-window__sns:after,
.ns-note .get-urlname>ul:after,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label:after,
.ns-note .mag-top__button-group:after {
    clear: both
}

.ns-note .fl-left {
    float: left
}

.ns-note .fl-center {
    float: none;
    margin-left: auto;
    margin-right: auto
}

.ns-note .fl-right {
    float: right
}

.ns-note .clear {
    clear: both
}

.ns-note .inline-wrap {
    font-size: 0
}

.ns-note .inline-child {
    display: inline-block !important;
    letter-spacing: normal;
    vertical-align: middle
}

.ns-note .inline-child.ng-enter,
.ns-note .inline-child.ng-leave,
.ns-note .inline-child.ng-enter-active,
.ns-note .inline-child.ng-leave-active {
    -webkit-transition: none;
    transition: none
}

.ns-note .inline-space-h .inline-child:first-child {
    margin-left: 0
}

.ns-note .inline-space-h .inline-child {
    margin-left: 5px
}

.ns-note .inline-space-1 .inline-child:first-child {
    margin-left: 0
}

.ns-note .inline-space-1 .inline-child {
    margin-left: 10px
}

.ns-note .inline {
    display: inline
}

.ns-note .inline-block {
    display: inline-block
}

.ns-note .block {
    display: block !important
}

.ns-note .table-cell {
    display: table-cell
}

.ns-note .inner-h {
    padding: 5px
}

.ns-note .inner-1 {
    padding: 10px
}

.ns-note .inner-1h {
    padding: 15px
}

.ns-note .inner-2 {
    padding: 20px
}

.ns-note .inner-2h {
    padding: 25px
}

.ns-note .inner-3 {
    padding: 30px
}

.ns-note .inner-3h {
    padding: 35px
}

.ns-note .inner-4 {
    padding: 40px
}

.ns-note .inner-side-h {
    padding-left: 5px;
    padding-right: 5px
}

.ns-note .inner-side-1 {
    padding-left: 10px;
    padding-right: 10px
}

.ns-note .inner-side-2 {
    padding-left: 20px;
    padding-right: 20px
}

.ns-note .inner-side-3 {
    padding-left: 30px;
    padding-right: 30px
}

.ns-note .inner-side-1per {
    padding-left: 10%;
    padding-right: 10%
}

.ns-note .inner-vertical-h {
    padding-top: 5px;
    padding-bottom: 5px
}

.ns-note .inner-vertical-1 {
    padding-top: 10px;
    padding-bottom: 10px
}

.ns-note .inner-vertical-1h {
    padding-top: 15px;
    padding-bottom: 15px
}

.ns-note .inner-vertical-2 {
    padding-top: 20px;
    padding-bottom: 20px
}

.ns-note .inner-vertical-4 {
    padding-top: 40px;
    padding-bottom: 40px
}

.ns-note .inner-top-h {
    padding-top: 5px
}

.ns-note .inner-top-1 {
    padding-top: 10px
}

.ns-note .inner-top-2 {
    padding-top: 20px
}

.ns-note .inner-top-3 {
    padding-top: 30px
}

.ns-note .inner-top-4 {
    padding-top: 40px
}

.ns-note .inner-top-5 {
    padding-top: 50px
}

.ns-note .inner-top-6 {
    padding-top: 60px
}

.ns-note .inner-right-1 {
    padding-right: 10px
}

.ns-note .inner-right-1h {
    padding-right: 15px
}

.ns-note .inner-right-2 {
    padding-right: 20px
}

.ns-note .inner-left-1 {
    padding-left: 10px
}

.ns-note .inner-left-1h {
    padding-left: 15px
}

.ns-note .inner-left-2 {
    padding-right: 20px
}

.ns-note .inner-bottom-h {
    padding-bottom: 5px
}

.ns-note .inner-bottom-1 {
    padding-bottom: 10px
}

.ns-note .inner-bottom-1h {
    padding-bottom: 15px
}

.ns-note .inner-bottom-2 {
    padding-bottom: 20px
}

.ns-note .inner-bottom-3 {
    padding-bottom: 30px
}

.ns-note .inner-bottom-4 {
    padding-bottom: 40px
}

.ns-note .inner-bottom-5 {
    padding-bottom: 50px
}

.ns-note .inner-bottom-6 {
    padding-bottom: 60px
}

.ns-note .inner-ts-1 {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px
}

.ns-note .inner-ts-2 {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px
}

.ns-note .inner-bs-2 {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px
}

.ns-note .space-reset {
    margin: 0 !important;
    padding: 0 !important
}

.ns-note .space-top-h {
    margin-top: 5px
}

.ns-note .space-top-1 {
    margin-top: 10px
}

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

.ns-note .space-top-2 {
    margin-top: 20px
}

.ns-note .space-top-2h {
    margin-top: 25px
}

.ns-note .space-top-3 {
    margin-top: 30px
}

.ns-note .space-top-3 {
    margin-top: 30px
}

.ns-note .space-top-3h {
    margin-top: 35px
}

.ns-note .space-top-4 {
    margin-top: 40px
}

.ns-note .space-top-4h {
    margin-top: 45px
}

.ns-note .space-top-5 {
    margin-top: 50px
}

.ns-note .space-top-5h {
    margin-top: 55px
}

.ns-note .space-top-6 {
    margin-top: 60px
}

.ns-note .space-top-minus-h {
    margin-top: -5px
}

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

.ns-note .space-top-minus-2 {
    margin-top: -20px
}

.ns-note .space-top-minus-6 {
    margin-top: -60px
}

.ns-note .space-bottom-h {
    margin-bottom: 5px
}

.ns-note .space-bottom-1 {
    margin-bottom: 10px
}

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

.ns-note .space-bottom-2 {
    margin-bottom: 20px
}

.ns-note .space-bottom-2h {
    margin-bottom: 25px
}

.ns-note .space-bottom-2-title {
    margin-bottom: 4px
}

.ns-note .space-bottom-2-description {
    margin-bottom: 4px;
    color: #787c7b
}

.ns-note .space-bottom-3 {
    margin-bottom: 30px
}

.ns-note .space-bottom-3 {
    margin-bottom: 30px
}

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

.ns-note .space-bottom-4 {
    margin-bottom: 40px
}

.ns-note .space-bottom-4h {
    margin-bottom: 45px
}

.ns-note .space-bottom-5 {
    margin-bottom: 50px
}

.ns-note .space-bottom-6 {
    margin-bottom: 60px
}

.ns-note .space-right-h {
    margin-right: 5px
}

.ns-note .space-right-1 {
    margin-right: 10px
}

.ns-note .space-right-1h {
    margin-right: 15px
}

.ns-note .space-right-2 {
    margin-right: 20px
}

.ns-note .space-right-3 {
    margin-right: 30px
}

.ns-note .space-right-3h {
    margin-right: 35px
}

.ns-note .space-left-minus-3px {
    margin-left: -3px
}

.ns-note .space-left-minus-h {
    margin-left: -5px
}

.ns-note .space-left-h {
    margin-left: 5px
}

.ns-note .space-left-1 {
    margin-left: 10px
}

.ns-note .space-left-1h {
    margin-left: 15px
}

.ns-note .space-left-2 {
    margin-left: 20px
}

.ns-note .space-left-3 {
    margin-left: 30px
}

.ns-note .space-left-4 {
    margin-left: 40px
}

.ns-note .space-left-profile {
    margin-left: 11px
}

.ns-note .space-1 {
    margin: 10px
}

.ns-note .space-2 {
    margin: 20px
}

.ns-note .space-side-h {
    margin-left: 5px;
    margin-right: 5px
}

.ns-note .space-side-1 {
    margin-left: 10px;
    margin-right: 10px
}

.ns-note .bg-grey,
.ns-note .mod-modal .navi-modal {
    background-color: #f8f9fa
}

.ns-note .bg-dgrey {
    background-color: #bdc3c7
}

.ns-note .bg-black {
    background-color: #222222;
    color: #fff
}

.ns-note .bg-white {
    background-color: #fff
}

.ns-note .bg-green {
    background-color: #41C9B4
}

.ns-note .bg-red {
    background-color: #ff0000
}

.ns-note .bg-orange {
    background-color: #f5a600
}

.ns-note .bg-lgreen,
.ns-note .register__alert {
    background-color: #f0fbf9
}

.ns-note .bg-lblue {
    background-color: #f1f9fd
}

.ns-note .bg-activation {
    background-color: #41C9B4
}

.ns-note .border-full {
    border: 1px solid #e1e5e7
}

.ns-note .border-full-2 {
    border: 2px solid #e1e5e7
}

.ns-note .border-full-3 {
    border: 3px solid #e1e5e7
}

.ns-note .border-top {
    border-top: 1px solid #e1e5e7
}

.ns-note .border-right {
    border-right: 1px solid #e1e5e7
}

.ns-note .border-left {
    border-left: 1px solid #e1e5e7
}

.ns-note .border-bottom {
    border-bottom: 1px solid #e1e5e7
}

.ns-note .border-blue {
    border: 1px solid #41C9B4
}

.ns-note .border-bottom-dot {
    border-bottom: 1px dashed #e1e5e7
}

.ns-note .border-shadow {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px
}

.ns-note .border-top-shadow {
    border-top: 1px solid #e1e5e7
}

.ns-note .border-bottom-shadow {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px 0px
}

.ns-note .border-shadow-modal {
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 5px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 5px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 5px 0px
}

.ns-note .border-with-shadow-modal {
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 5px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 5px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 5px 0px;
    border: 1px solid #e1e5e7;
    border-bottom: none
}

.ns-note .border-reset {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important
}

.ns-note hr {
    border: 0;
    border-bottom: 1px solid #e1e5e7
}

.ns-note .mask.circle {
    border-radius: 50% !important
}

.ns-note .show-pc {
    display: inline-block
}

.ns-note .show-sp {
    display: none
}

@media screen and (max-width: 480px) {
    .ns-note .sp-float-no {
        float: none
    }

    .ns-note .sp-grid-3 {
        width: 33.333333333%
    }

    .ns-note .sp-space-reset {
        margin: 0 !important;
        padding: 0 !important;
        display: block
    }

    .ns-note .sp-space-top-minus-h {
        margin-top: -5px
    }

    .ns-note .sp-space-top-1 {
        margin-top: 10px
    }

    .ns-note .sp-usernav-space-right {
        margin-right: 7px
    }

    .ns-note .sp-space-right-1 {
        margin-right: 10px
    }

    .ns-note .sp-space-bottom-1 {
        margin-bottom: 10px
    }

    .ns-note .sp-space-bottom-1h {
        margin-bottom: 15px
    }

    .ns-note .sp-space-bottom-2 {
        margin-bottom: 20px
    }

    .ns-note .inner-1h.v-sp {
        padding: 10px
    }

    .ns-note .inner-2.v-sp {
        padding: 10px
    }

    .ns-note .inner-4.v-sp {
        padding: 20px
    }

    .ns-note .inner-side-2.v-sp {
        padding-left: 10px;
        padding-right: 10px
    }

    .ns-note .inner-bs-2.v-sp {
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px
    }

    .ns-note .inner-bottom-h.v-sp {
        padding-bottom: 10px
    }

    .ns-note .sp-inner-side-reset {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .ns-note .sp-inner-1 {
        padding: 10px !important
    }

    .ns-note .sp-inner-top-h {
        padding-top: 5px !important
    }

    .ns-note .sp-inner-top-1 {
        padding-top: 10px !important
    }

    .ns-note .sp-inner-bottom-2 {
        padding-bottom: 20px !important
    }

    .ns-note .sp-inner-vertical-1 {
        padding-top: 10px;
        padding-bottom: 10px
    }

    .ns-note .sp-inner-vertical-2 {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .ns-note .sp-inner-side-1 {
        padding-left: 10px;
        padding-right: 10px
    }

    .ns-note .sp-border-top-shadow {
        box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 0px 0px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 0px 0px;
        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 0px 0px
    }

    .ns-note .sp-block {
        display: block
    }

    .ns-note .unit .icon-large.fl-left.sp {
        margin-left: -20px
    }

    .ns-note .show-pc {
        display: none
    }

    .ns-note .show-sp {
        display: inline-block
    }

    .ns-note .sp-w20per {
        width: 20% !important
    }

    .ns-note .sp-w80per {
        width: 80% !important
    }

    .ns-note .sp-none {
        display: none
    }
}

.ns-note .h-xlarge {
    font-size: 32px !important
}

.ns-note .h-large {
    font-size: 25px !important
}

.ns-note .h-medium {
    font-size: 20px !important
}

.ns-note .serif {
    font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif
}

.ns-note .sansserif {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, Helvetica, sans-serif
}

.ns-note .txt-number {
    font-family: Helvetica, Arial, sans-serif
}

.ns-note .wf {
    font-family: 'Roboto', sans-serif
}

.ns-note .txt-xlarge {
    font-size: 18px !important
}

.ns-note .txt-large {
    font-size: 16px !important
}

.ns-note .txt-tall {
    font-size: 14px !important
}

.ns-note .txt-medium {
    font-size: 13px !important
}

.ns-note .txt-small {
    font-size: 12px !important
}

.ns-note .txt-xsmall {
    font-size: 11px !important
}

.ns-note .txt-xxsmall {
    font-size: 10px !important
}

@media screen and (max-width: 767px) {
    .ns-note .txt-medium {
        font-size: 12px !important
    }

    .ns-note .sp-txt-bold {
        font-weight: bold
    }
}

.ns-note .txt-grey,
.ns-note .mod-note-hashtags .hashtags,
.ns-note .mod-note-hashtags .hashtags a,
.ns-note .note-info__other,
.ns-note .pager__label {
    color: #898D8C
}

.ns-note .txt-dgrey {
    color: #777
}

.ns-note .txt-black {
    color: #222222
}

.ns-note .txt-black a {
    color: #222222
}

.ns-note .txt-white {
    color: #fff
}

.ns-note .txt-green {
    color: #41C9B4
}

.ns-note .txt-blue {
    color: #71c2e8
}

.ns-note .txt-yellow {
    color: #f4d02b
}

.ns-note .txt-red {
    color: #ff0000
}

.ns-note .txt-like {
    color: #EA3F60
}

.ns-note .txt-bold {
    font-weight: bold
}

.ns-note .txt-normal {
    font-weight: normal
}

.ns-note .lh-2 {
    line-height: 2
}

.ns-note .lh-1 {
    line-height: 1
}

.ns-note .lh-1-2 {
    line-height: 1.2
}

.ns-note .lh-1-3 {
    line-height: 1.3
}

.ns-note .lh-1-4 {
    line-height: 1.4
}

.ns-note .lh40px {
    line-height: 40px
}

.ns-note .lh35px {
    line-height: 35px
}

.ns-note .lh30px {
    line-height: 30px
}

.ns-note a.hover-black:hover {
    color: #222;
    text-decoration: none
}

.ns-note a.current {
    color: #222
}

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

.ns-note .txt-right {
    text-align: right !important
}

.ns-note .txt-left {
    text-align: left !important
}

.ns-note .v-align-m {
    vertical-align: middle
}

.ns-note .v-align-t {
    vertical-align: top
}

.ns-note .txt-cut {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis
}

.ns-note .txt-offset-top {
    margin-top: -1px
}

.ns-note .txt-link {
    color: #898D8C;
    cursor: pointer
}

.ns-note .txt-link:hover {
    text-decoration: underline
}

.ns-note .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis
}

.ns-note .txt-link-hover:hover {
    text-decoration: underline
}

.ns-note .indent {
    margin-left: 1em
}

.ns-note button {
    font-family: inherit;
    font-size: 100%;
    border: none;
    padding: 0
}

.ns-note .btn {
    border-radius: 4px !important;
    text-align: center;
    position: relative;
    display: block;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #D9D9D9;
    color: #222222;
    font-size: 12px;
    height: 25px;
    width: 90px;
    line-height: 25px
}

.ns-note .btn:hover {
    border: 1px solid #bdc3c7;
    color: #222222;
    text-decoration: none !important
}

.ns-note .btn a {
    display: block;
    color: #222222
}

.ns-note .btn a:hover {
    text-decoration: none !important
}

.ns-note button.btn {
    line-height: 1 !important
}

.ns-note .btn-low {
    color: #222222;
    background-color: #ffffff
}

.ns-note .btn-low:hover {
    color: #222222;
    background-color: #ffffff;
    text-decoration: none !important
}

.ns-note .btn-grey {
    color: #222222;
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa
}

.ns-note .btn-grey:hover {
    color: #222222;
    border: 1px solid #d9e0e2
}

.ns-note .btn-disable {
    color: #bdc3c7;
    background-color: #f8f9fa;
    border: 1px solid #e1e5e7;
    cursor: default
}

.ns-note .btn-disable:hover {
    color: #bdc3c7;
    background-color: #f8f9fa;
    border: 1px solid #e1e5e7
}

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

.ns-note .btn-high:hover {
    color: #fff;
    border: 1px solid #2cb696;
    text-decoration: none !important
}

.ns-note .btn-t-high {
    color: #2cb696
}

.ns-note .btn-cakes {
    color: #FFF;
    background-color: #feda15;
    border-color: #feda15
}

.ns-note .btn-cakes a {
    color: #FFF
}

.ns-note .btn-cakes:hover {
    background-color: #feda15;
    border-color: #feda15;
    color: #FFF;
    text-decoration: none !important
}

.ns-note .btn-black {
    border: none;
    background-color: #444444;
    color: #fff
}

.ns-note .btn-black:hover {
    border: none;
    background-color: #444444;
    color: #fff
}

.ns-note .btn-multiline {
    width: 220px;
    height: auto;
    line-height: 1.5;
    padding: 8px 0
}

.ns-note .btn-facebook {
    color: #FFF;
    background-color: #3b5998;
    border-color: #3b5998
}

.ns-note .btn-facebook a {
    color: #FFF
}

.ns-note .btn-facebook:hover {
    border-color: #3b5998;
    color: #FFF;
    text-decoration: none !important
}

.ns-note .btn-twitter {
    color: #FFF;
    background-color: #00acee;
    border-color: #00acee
}

.ns-note .btn-twitter a {
    color: #FFF
}

.ns-note .btn-twitter:hover {
    border-color: #00acee;
    color: #FFF
}

.ns-note .btn-edit {
    border: 1px solid #fff;
    background-color: #fff;
    color: #222222
}

.ns-note .btn-edit:hover {
    border: 1px solid #bdc3c7
}

.ns-note .btn-write {
    border: 1px;
    border-style: solid;
    border-color: #d9e0e2;
    background-color: #f8f9fa
}

.ns-note .btn-write:hover {
    border-style: slid;
    border-color: #bdc3c7
}

.ns-note .btn-flat {
    display: block;
    text-align: center
}

.ns-note .btn-xsmall {
    width: 68px;
    height: 25px;
    line-height: 25px
}

.ns-note .btn-small {
    width: 80px;
    height: 31px;
    line-height: 31px
}

@media only screen and (max-width: 480px) {
    .ns-note .btn-small.sp {
        width: 40px !important
    }
}

.ns-note .btn-medium-small {
    width: 100px;
    height: 31px;
    line-height: 31px
}

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

.ns-note .btn-large {
    width: 150px;
    height: 35px;
    line-height: 35px
}

.ns-note .btn-xlarge {
    width: 240px;
    height: 40px;
    line-height: 40px
}

.ns-note .btn-form {
    width: 160px;
    height: 30px;
    line-height: 30px
}

.ns-note .btn-form input {
    margin-top: -3px;
    padding: 0 5px !important
}

.ns-note .btn-full {
    width: 100%;
    height: 35px;
    line-height: 35px
}

.ns-note .btn-tall {
    height: 39px;
    line-height: 39px;
    font-size: 13px
}

.ns-note .btn-taller {
    height: 45px !important;
    line-height: 45px !important;
    font-size: 13px
}

.ns-note .btn-tallest {
    min-height: 50px;
    height: auto;
    line-height: 50px
}

.ns-note .btn-tallest.is-active {
    border: 2px solid #2cb696
}

.ns-note .btn-square {
    width: 30px;
    height: 30px;
    line-height: 30px
}

.ns-note .btn-circle {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50% !important
}

.ns-note .btn-circle .icon-reload {
    background-position: -1px -391px
}

.ns-note .btn-more {
    width: 300px;
    height: 35px;
    line-height: 35px
}

@media only screen and (max-width: 480px) {
    .ns-note .btn-more {
        width: 100%
    }
}

@media screen and (max-width: 767px) {
    .ns-note .btn-small {
        width: 80px;
        height: 31px;
        line-height: 31px
    }

    .ns-note .btn-medium-small {
        width: 100px;
        height: 31px;
        line-height: 31px
    }

    .ns-note .btn-medium {
        width: 100px;
        height: 31px;
        line-height: 31px
    }

    .ns-note .btn-form {
        width: 150px;
        height: 31px;
        line-height: 31px
    }

    .ns-note .btn-large {
        width: 160px;
        height: 31px;
        line-height: 31px
    }

    .ns-note .btn-xlarge {
        width: 240px;
        height: 35px;
        line-height: 35px
    }

    .ns-note .btn-full {
        width: 100%;
        height: 35px;
        line-height: 35px
    }

    .ns-note .btn-tall {
        height: 35px;
        line-height: 35px;
        font-size: 14px
    }

    .ns-note .btn-tallest {
        min-height: 60px;
        height: auto;
        line-height: 60px
    }

    .ns-note .btn-tallest.is-active {
        border: 2px solid #bdc3c7
    }
}

.ns-note .pointer {
    cursor: pointer
}

.ns-note .drag {
    cursor: move
}

.ns-note .cursor-default {
    cursor: default !important
}

.ns-note .inactive {
    cursor: default
}

.ns-note .inactive:hover {
    border: 1px solid #d9e0e2
}

.ns-note .square {
    height: 16px;
    position: absolute;
    background-color: #bdc3c7;
    display: block
}

.ns-note .squre-posi {
    top: 50%;
    left: 30px;
    margin-top: -8px
}

.ns-note .square.cross {
    width: 4px
}

.ns-note .cross:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color: #bdc3c7
}

.ns-note .square--white {
    height: 12px;
    position: absolute;
    background-color: #fff;
    display: block
}

.ns-note .square--white.cross--white {
    width: 2px
}

.ns-note .cross--white:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color: #fff
}

.ns-note .btn-switch {
    width: 34px;
    height: 18px;
    border-radius: 100px !important;
    background-color: #bdc3c7;
    display: block;
    position: relative
}

.ns-note .btn-switch span.on-off {
    width: 14px;
    height: 14px;
    border-radius: 100px !important;
    background-color: #fff;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px
}

.ns-note .btn-switch.is-active {
    background-color: #2cb696
}

.ns-note .btn-switch.is-active span {
    left: 18px
}

.ns-note .no-underline:hover {
    text-decoration: none
}

.ns-note .no-underline a.no-underline {
    text-decoration: none
}

.ns-note .btn-bd-2 {
    border-width: 2px
}

.ns-note .btn-bd-2:hover {
    border-width: 2px
}

.ns-note .w-half {
    width: 50%
}

.ns-note .btn-check {
    border-radius: 4px !important;
    background-color: #f8f9fa;
    display: block;
    position: relative;
    height: 40px;
    line-height: 40px;
    padding-left: 35px
}

.ns-note .btn-check .icon-small {
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -10px
}

.ns-note .btn-check.is-active {
    color: #222222
}

.ns-note .btn-check.is-active .icon-small-check {
    background-position: -20px -40px
}

.ns-note .btn-mail-signup {
    background-color: #2cb696;
    border: 2px #2cb696 solid;
    color: #fff;
    position: relative
}

.ns-note .btn-mail-signup:hover {
    color: #fff;
    border: 2px #2cb696 solid
}

.ns-note .btn-mail-signup.is-active {
    background-color: #fff;
    color: #2cb696
}

.ns-note .btn-mail-signup:before {
    content: "";
    border: 5px solid transparent;
    border-top: 7px solid #2cb696;
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -4px
}

.ns-note .btn-mail {
    border-width: 2px
}

.ns-note .btn-mail:hover {
    border-width: 2px
}

.ns-note .btn-mail.is-active {
    border-color: #2cb696
}

.ns-note .btn-mail.is-active .icon-small-mail {
    background-position: -20px -200px
}

.ns-note .price-btn {
    display: block;
    text-align: center;
    position: relative
}

.ns-note .price-btn .icon-mini-edit {
    position: absolute;
    top: 3px;
    right: 4px
}

.ns-note .charge {
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #ffffff
}

.ns-note .charge:hover {
    color: #fff;
    border: 1px solid #2cb696;
    text-decoration: none !important
}

.ns-note .free {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #ffffff
}

.ns-note .free:hover {
    color: #fff;
    border: 1px solid #bdc3c7;
    text-decoration: none !important
}

.ns-note .label-draft {
    display: block;
    text-align: center;
    position: relative;
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #ffffff;
    height: 24px;
    width: 85px;
    line-height: 23px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    font-size: 12px
}

.ns-note .icon-back {
    width: 30px;
    height: 30px;
    display: block;
    background-color: #ccc;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_back-4a718ce5d95b1bb2add586e7f814c6f516dfd38989e14a7029402181c303f6f6.png) no-repeat;
    background-size: 30px 30px;
    background-position: 0px 0px
}

.ns-note .btn.btn-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

.ns-note .btn.btn-on-img.button-after,
.ns-note .btn.btn-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .btn.btn-on-img.btn-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .btn.btn-on-img.btn-high.button-after,
.ns-note .btn.btn-on-img.btn-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

.ns-note .button.button-on-img.button-after,
.ns-note .button.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button.button-on-img.button-high.button-after,
.ns-note .button.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button.is-disable {
    color: #bdc3c7;
    background-color: #f8f9fa;
    border: 1px solid #e1e5e7;
    cursor: default
}

.ns-note .button.is-disable:hover {
    color: #bdc3c7;
    background-color: #f8f9fa;
    border: 1px solid #e1e5e7
}

.ns-note .button-xxsmall {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-xxsmall:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-xxsmall.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-xxsmall.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

.ns-note .button-xxsmall.button-on-img.button-after,
.ns-note .button-xxsmall.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-xxsmall.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-xxsmall.button-on-img.button-high.button-after,
.ns-note .button-xxsmall.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-xxsmall.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-xxsmall.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-xsmall {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 11px;
    width: 68px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-xsmall:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-xsmall.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-xsmall.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

.ns-note .button-xsmall.button-on-img.button-after,
.ns-note .button-xsmall.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-xsmall.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-xsmall.button-on-img.button-high.button-after,
.ns-note .button-xsmall.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-xsmall.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 11px;
    width: 68px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-xsmall.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-xsmall.button--disabled {
    background: #e1e5e7;
    border: 1px solid #e1e5e7;
    color: #fff;
    cursor: default
}

.ns-note .button-small {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    width: 80px;
    height: 26px;
    line-height: 25px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-small:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-small.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-small.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    font-size: 12px;
    width: 80px;
    height: 30px;
    line-height: 27px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

@media only screen and (max-width: 480px) {
    .ns-note .button-small.button-on-img {
        width: 80px;
        height: auto;
        padding: 0.4em 0;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-small.button-on-img {
        width: 80px;
        height: auto;
        padding: 0.4em 0;
        line-height: normal
    }
}

.ns-note .button-small.button-on-img.button-after,
.ns-note .button-small.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-small.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    font-size: 12px;
    width: 80px;
    height: 30px;
    line-height: 27px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .button-small.button-on-img.button-high {
        width: 80px;
        height: auto;
        padding: 0.4em 0;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-small.button-on-img.button-high {
        width: 80px;
        height: auto;
        padding: 0.4em 0;
        line-height: normal
    }
}

.ns-note .button-small.button-on-img.button-high.button-after,
.ns-note .button-small.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-small.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    width: 80px;
    height: 26px;
    line-height: 25px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-small.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-medium {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 140px;
    height: 34px;
    line-height: 30px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-medium:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-medium.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-medium.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    width: 140px;
    height: 34px;
    line-height: 30px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

@media only screen and (max-width: 480px) {
    .ns-note .button-medium.button-on-img {
        width: 140px;
        height: auto;
        padding: 0.5em 0;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-medium.button-on-img {
        width: 140px;
        height: auto;
        padding: 0.6em 0;
        line-height: normal
    }
}

.ns-note .button-medium.button-on-img.button-after,
.ns-note .button-medium.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-medium.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    width: 140px;
    height: 34px;
    line-height: 30px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .button-medium.button-on-img.button-high {
        width: 140px;
        height: auto;
        padding: 0.5em 0;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-medium.button-on-img.button-high {
        width: 140px;
        height: auto;
        padding: 0.6em 0;
        line-height: normal
    }
}

.ns-note .button-medium.button-on-img.button-high.button-after,
.ns-note .button-medium.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-medium.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 140px;
    height: 34px;
    line-height: 30px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-medium.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-large {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 180px;
    height: 34px;
    line-height: 32px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-large:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-large.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-large.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    width: 180px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

@media only screen and (max-width: 480px) {
    .ns-note .button-large.button-on-img {
        width: 180px;
        height: auto;
        padding: 0.5em 0;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-large.button-on-img {
        width: 180px;
        height: auto;
        padding: 0.6em 0;
        line-height: normal
    }
}

.ns-note .button-large.button-on-img.button-after,
.ns-note .button-large.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-large.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    width: 180px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .button-large.button-on-img.button-high {
        width: 180px;
        height: auto;
        padding: 0.5em 0;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-large.button-on-img.button-high {
        width: 180px;
        height: auto;
        padding: 0.6em 0;
        line-height: normal
    }
}

.ns-note .button-large.button-on-img.button-high.button-after,
.ns-note .button-large.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-large.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 180px;
    height: 34px;
    line-height: 32px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-large.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-xlarge {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 220px;
    height: 38px;
    line-height: 36px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-xlarge:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-xlarge.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-xlarge.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    width: 220px;
    height: 38px;
    line-height: 36px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

@media only screen and (max-width: 480px) {
    .ns-note .button-xlarge.button-on-img {
        width: 220px;
        height: auto;
        padding: 0.5em 0;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-xlarge.button-on-img {
        width: 220px;
        height: auto;
        padding: 0.6em 0;
        line-height: normal
    }
}

.ns-note .button-xlarge.button-on-img.button-after,
.ns-note .button-xlarge.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-xlarge.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    width: 220px;
    height: 38px;
    line-height: 36px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .button-xlarge.button-on-img.button-high {
        width: 220px;
        height: auto;
        padding: 0.5em 0;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-xlarge.button-on-img.button-high {
        width: 220px;
        height: auto;
        padding: 0.6em 0;
        line-height: normal
    }
}

.ns-note .button-xlarge.button-on-img.button-high.button-after,
.ns-note .button-xlarge.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-xlarge.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 220px;
    height: 38px;
    line-height: 36px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-xlarge.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-xxlarge {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-xxlarge:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-xxlarge.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-xxlarge.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

.ns-note .button-xxlarge.button-on-img.button-after,
.ns-note .button-xxlarge.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-xxlarge.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-xxlarge.button-on-img.button-high.button-after,
.ns-note .button-xxlarge.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-xxlarge.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-xxlarge.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-full {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 100%;
    height: 50px;
    line-height: 48px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-full:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-full.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-full.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

.ns-note .button-full.button-on-img.button-after,
.ns-note .button-full.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-full.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-full.button-on-img.button-high.button-after,
.ns-note .button-full.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-full.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 100%;
    height: 50px;
    line-height: 48px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-full.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-full.button-txtbig {
    font-size: 16px !important;
    font-weight: bold
}

.ns-note .button-relative--small {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-relative--small:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--small.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--small.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

.ns-note .button-relative--small.button-on-img.button-after,
.ns-note .button-relative--small.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-relative--small.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-relative--small.button-on-img.button-high.button-after,
.ns-note .button-relative--small.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-relative--small.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-relative--small.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-relative--medium {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-relative--medium:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--medium.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--medium.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-relative--medium.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-relative--large {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-relative--large:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--large.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--large.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-relative--large.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-relative--modal {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    height: 30px;
    line-height: 28px;
    min-width: 100px;
    display: inline-block !important;
    padding: 0 10px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-relative--modal.block {
    display: block !important
}

@media only screen and (max-width: 480px) {
    .ns-note .button-relative--modal {
        font-weight: bold;
        min-width: 60px
    }
}

.ns-note .button-relative--modal:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--modal.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--modal.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    height: 30px;
    line-height: 28px;
    min-width: 100px;
    display: inline-block !important;
    padding: 0 10px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-relative--modal.button-high.block {
    display: block !important
}

@media only screen and (max-width: 480px) {
    .ns-note .button-relative--modal.button-high {
        font-weight: bold;
        min-width: 60px
    }
}

.ns-note .button-relative--modal.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-modal {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-modal:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-modal.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-modal.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-modal.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-modal.is-disable {
    color: #ffffff;
    border-color: #ccc;
    background-color: #ccc;
    pointer-events: none
}

.ns-note .button-modal-link {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid transparent;
    background-color: transparent;
    color: #222
}

.ns-note .button-paywall {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    width: 130px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .button-paywall {
        font-size: 11px;
        width: 120px
    }
}

.ns-note .button-paywall:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-paywall.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-paywall.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    width: 130px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .button-paywall.button-high {
        font-size: 11px;
        width: 120px
    }
}

.ns-note .button-paywall.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-relative--small {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    height: 26px;
    line-height: 25px;
    display: inline-block !important;
    padding: 0 10px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-relative--small.block {
    display: block !important
}

.ns-note .button-relative--small:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--small.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--small.button-on-img {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    font-size: 12px;
    height: 30px;
    line-height: 29px;
    display: inline-block !important;
    padding: 0 10px;
    border: 2px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5)
}

.ns-note .button-relative--small.button-on-img.block {
    display: block !important
}

@media only screen and (max-width: 480px) {
    .ns-note .button-relative--small.button-on-img {
        height: auto;
        padding: 0.4em 10px;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-relative--small.button-on-img {
        height: auto;
        padding: 0.4em 10px;
        line-height: normal
    }
}

.ns-note .button-relative--small.button-on-img.button-after,
.ns-note .button-relative--small.button-on-img.btn-after {
    border: 2px solid #2cb696;
    color: #249f80;
    background-color: #fff;
    font-weight: bold
}

.ns-note .button-relative--small.button-on-img.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    font-size: 12px;
    height: 30px;
    line-height: 29px;
    display: inline-block !important;
    padding: 0 10px;
    border: 2px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-relative--small.button-on-img.button-high.block {
    display: block !important
}

@media only screen and (max-width: 480px) {
    .ns-note .button-relative--small.button-on-img.button-high {
        height: auto;
        padding: 0.4em 10px;
        line-height: normal
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .button-relative--small.button-on-img.button-high {
        height: auto;
        padding: 0.4em 10px;
        line-height: normal
    }
}

.ns-note .button-relative--small.button-on-img.button-high.button-after,
.ns-note .button-relative--small.button-on-img.button-high.btn-after {
    border: 2px solid #bdc3c7;
    background-color: #bdc3c7
}

.ns-note .button-relative--small.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 12px;
    height: 26px;
    line-height: 25px;
    display: inline-block !important;
    padding: 0 10px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-relative--small.button-high.block {
    display: block !important
}

.ns-note .button-relative--small.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-header-login-link {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 14px;
    width: auto;
    height: 30px;
    line-height: 28px;
    display: inline-block;
    border: 1px solid transparent;
    background-color: transparent;
    color: #249f80;
    font-weight: bold
}

.ns-note .button-only-icon {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    font-size: 11px;
    width: 35px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-only-icon:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-only-icon.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--medium {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    height: 34px;
    line-height: 32px;
    min-width: 100px;
    display: inline-block !important;
    padding: 0 10px;
    border: 1px solid #D9D9D9;
    color: #222222;
    background-color: #fff
}

.ns-note .button-relative--medium.block {
    display: block !important
}

.ns-note .button-relative--medium:hover {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--medium.button-after {
    border: 1px solid #2cb696;
    color: #249f80
}

.ns-note .button-relative--medium.button-high {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    height: 34px;
    line-height: 32px;
    min-width: 100px;
    display: inline-block !important;
    padding: 0 10px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

.ns-note .button-relative--medium.button-high.block {
    display: block !important
}

.ns-note .button-relative--medium.button-high.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-circle {
    position: relative;
    border-radius: 100% !important;
    background: #222;
    display: block
}

.ns-note .button-circle--medium {
    width: 36px;
    height: 36px
}

.ns-note .button-circle__posi {
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -1px
}

.ns-note .button-top-signup {
    border-radius: 4px !important;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    -webkit-transition: none;
    transition: none;
    width: 310px;
    height: 62px;
    line-height: 60px;
    border-radius: 100px !important;
    display: inline-block;
    font-size: 18px;
    border: 1px solid #2cb696;
    background-color: #2cb696;
    color: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .button-top-signup {
        width: 260px;
        height: 50px;
        line-height: 48px;
        font-weight: bold;
        font-size: 17px
    }
}

.ns-note .button-top-signup.button-after {
    border: 1px solid #bdc3c7;
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .button-top-signup:hover {
    background-color: #66d3c2;
    border-color: #66d3c2
}

@media only screen and (max-width: 480px) {
    .ns-note .button-top-signup {
        -webkit-transition: none 0 none;
        transition: none 0 none
    }

    .ns-note .button-top-signup:hover {
        background-color: #2cb696;
        border-color: #2cb696
    }
}

.ns-note .button-follow .button-large {
    position: relative
}

.ns-note .button-follow .button-large .icon-15 {
    position: absolute;
    top: 50%;
    left: 35px;
    margin-top: -8.5px
}

.ns-note .button-follow .button-large .txt {
    font-weight: bold;
    margin-left: 10px
}

.ns-note .button-follow .button-medium {
    position: relative
}

.ns-note .button-follow .button-medium .icon-15 {
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -8.5px
}

.ns-note .button-follow .button-medium .txt {
    font-weight: bold;
    margin-left: 10px
}

.ns-note .button-follow .button-small {
    position: relative;
    width: 94px !important;
    margin-left: -7px
}

.ns-note .button-follow .button-small .icon-10 {
    position: absolute;
    top: 50%;
    left: 8px;
    margin-top: -5px
}

.ns-note .button-follow .button-small .txt {
    font-weight: bold;
    margin-left: 12px
}

.ns-note .button--processing {
    opacity: 0.5;
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=$t)";
    cursor: default !important
}

.ns-note .btn-group .btn {
    float: left
}

.ns-note .btn-group-box .btn {
    border-radius: 0 !important;
    width: auto;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    padding: 0 15px
}

.ns-note .btn-group-box .btn:hover {
    position: relative;
    z-index: 100;
    background-color: #f8f9fa
}

.ns-note .btn-group-box .btn.is-active {
    background-color: #bdc3c7
}

.ns-note .btn-group-box .btn:first-child:not(:last-child) {
    border-right: none !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important
}

.ns-note .btn-group-box .btn:nth-child(2):not(:last-child),
.ns-note .btn-group-box .btn:nth-child(3):not(:last-child) {
    border-right: none !important
}

.ns-note .btn-group-box .btn:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important
}

.ns-note .button-group .button {
    height: 32px;
    line-height: 30px;
    border-radius: 0 !important;
    border-color: #e6e6e6;
    color: #787c7b;
    padding: 0 16px;
    font-size: 14px
}

.ns-note .button-group .button:hover {
    position: relative;
    z-index: 100;
    color: #222222
}

.ns-note .button-group>li {
    display: inline-block
}

.ns-note .button-group>li:first-child:not(:last-child)>.button {
    border-right: none !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important
}

.ns-note .button-group>li:nth-child(2):not(:last-child)>.button,
.ns-note .button-group>li:nth-child(3):not(:last-child)>.button {
    border-right: none !important
}

.ns-note .button-group>li:last-child>.button {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important
}

.ns-note .button-group .is--active {
    background-color: #e6e6e6;
    color: #222222
}

.ns-note .button-group .is--active:hover {
    background-color: #e6e6e6;
    color: #222222;
    cursor: default
}

.ns-note .button-group.button-group--full {
    width: 100%
}

.ns-note .button-group.button-group--full>li {
    width: 50%
}

.ns-note .button-group.button-group--full>li .button {
    width: 100%;
    padding: 0
}

.ns-note .button-mag {
    display: inline-block;
    padding: 4px 6px;
    text-align: center;
    line-height: 1;
    background: #fff;
    border: 1px solid #fff;
    color: #222222;
    cursor: pointer;
    font-size: 11px;
    border-radius: 4px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .button-mag {
        font-weight: bold
    }
}

.ns-note .button-mag.button--high {
    background: #2cb696;
    border: 1px solid #2cb696;
    color: #fff
}

.ns-note .button-mag.button--white {
    background: transparent;
    border: 1px solid #fff;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2)
}

.ns-note .button-mag.button--followed {
    background: #fff;
    border: 1px solid #2cb696;
    color: #2cb696
}

.ns-note .button-mag.button--followed.is-checked {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .button-mag.button--followed.is-checked .icon-10-check {
    margin: 0 3px 0 0
}

.ns-note .button-mag.button--purchased {
    background: #bdc3c7;
    border: 1px solid #bdc3c7;
    color: #fff;
    cursor: default
}

.ns-note .button-mag.button--subscribed {
    background: #fff;
    border: 1px solid #2cb696;
    color: #2cb696
}

.ns-note .button-mag.button-mag--top {
    padding: 8px 14px;
    font-size: 13px;
    border-width: 2px
}

@media only screen and (max-width: 480px) {
    .ns-note .button-mag.button-mag--top {
        padding: 6px 10px
    }
}

.ns-note .button-mag.button-mag--subscribable-top {
    padding: 8px
}

@media only screen and (max-width: 480px) {
    .ns-note .button-mag.button-mag--subscribable-top {
        padding: 8px 2px;
        font-size: 11px
    }
}

.ns-note .c-button {
    display: inline-block;
    vertical-align: bottom;
    padding: 8px;
    text-align: center;
    line-height: 1;
    background: #fff;
    border: 1px solid #D9D9D9;
    color: #222222;
    cursor: pointer;
    font-size: 12px;
    min-width: 80px;
    border-radius: 4px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button {
        font-weight: bold
    }
}

.ns-note .c-button.c-button--textLink {
    background: none;
    border: none;
    color: #222222
}

.ns-note .c-button.c-button--textLink:hover {
    color: #222222;
    background: none;
    border: none
}

.ns-note .c-button.c-button--high,
.ns-note .c-button.c-button--myMenu-premium,
.ns-note .c-button.c-button--staticPage-cv,
.ns-note .c-button.c-button--staticPage-subscription {
    background: #2cb696;
    border: 1px solid #2cb696;
    color: #fff;
    font-weight: bold
}

.ns-note .c-button.c-button--high:hover,
.ns-note .c-button.c-button--myMenu-premium:hover,
.ns-note .c-button.c-button--staticPage-cv:hover,
.ns-note .c-button.c-button--staticPage-subscription:hover {
    background: #27aa8a;
    border: 1px solid #27aa8a
}

.ns-note .c-button.c-button--white {
    background: #fff;
    border: 1px solid #fff;
    color: #2cb696;
    font-weight: bold
}

.ns-note .c-button.c-button--followed {
    background: #fff;
    border: 1px solid #2cb696;
    color: #2cb696
}

.ns-note .c-button.c-button--followed.is-checked {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .c-button.c-button--followed.is-checked .icon-10-check {
    margin: 0 3px 0 0
}

.ns-note .c-button.c-button--purchased {
    background: #bdc3c7;
    border: 1px solid #bdc3c7;
    color: #fff;
    cursor: default
}

.ns-note .c-button.c-button--disabled {
    background: #e1e5e7;
    border: 1px solid #e1e5e7;
    color: #fff;
    cursor: default
}

.ns-note .c-button.c-button--disabled:hover {
    background: #e1e5e7;
    border: 1px solid #e1e5e7
}

.ns-note .c-button.c-button--subscribed {
    background: #fff;
    border: 1px solid #2cb696;
    color: #2cb696
}

.ns-note .c-button.c-button-mag--top {
    padding: 8px 14px;
    font-size: 13px;
    border-width: 2px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button.c-button-mag--top {
        padding: 6px 10px
    }
}

.ns-note .c-button.c-button-mag--subscribable-top {
    padding: 8px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button.c-button-mag--subscribable-top {
        padding: 6px;
        font-size: 12px
    }
}

.ns-note .c-button.c-button--full {
    width: 100%
}

.ns-note .c-button.c-button--has-cakes-account {
    padding: 6px 8px
}

.ns-note .c-button.c-button--top-register {
    height: 50px;
    line-height: 48px;
    padding: 0;
    font-size: 16px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button.c-button--top-register {
        height: 34px;
        line-height: 32px;
        font-size: 14px
    }
}

.ns-note .c-button.c-button--twitter {
    position: relative;
    color: #FFF;
    background-color: #00acee;
    border-color: #00acee;
    height: 45px;
    line-height: 45px;
    padding: 0;
    font-size: 14px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button.c-button--twitter {
        height: 34px;
        line-height: 32px;
        font-size: 12px
    }
}

.ns-note .c-button.c-button--facebook {
    position: relative;
    color: #FFF;
    background-color: #3b5998;
    border-color: #3b5998;
    height: 45px;
    line-height: 45px;
    padding: 0;
    font-size: 14px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button.c-button--facebook {
        height: 34px;
        line-height: 32px;
        font-size: 12px
    }
}

.ns-note .c-button.c-button--navBar {
    min-width: 60px;
    height: 30px;
    font-size: 12px;
    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0
}

.ns-note .c-button.c-button--myMenu-premium {
    width: 100%;
    padding: 10px 0
}

.ns-note .c-button.c-button--staticPage-cv {
    width: 300px;
    padding: 18px 0;
    font-size: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button.c-button--staticPage-cv {
        width: 100%
    }
}

.ns-note .c-button.c-button--staticPage-subscription {
    width: 100%;
    padding: 15px 0;
    font-size: 13px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button.c-button--staticPage-subscription {
        width: 100%
    }
}

.ns-note .c-button.c-button--check {
    padding: 12px 0;
    border-width: 2px;
    color: #aaa
}

.ns-note .c-button.c-button--check:hover {
    border-color: #2cb696
}

.ns-note .c-button.c-button--check.is--active {
    color: #2cb696;
    border-color: #2cb696;
    font-weight: bold
}

.ns-note .c-button.c-button--check .check-text {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-box-pack: center;
    -o-box-pack: center;
    box-pack: center;
    height: 1.5em
}

@media only screen and (max-width: 480px) {
    .ns-note .c-button.c-button--check .check-text.check-text--pay {
        margin-left: 0
    }
}

.ns-note .c-button.c-button--user {
    padding: 4px 6px;
    font-size: 12px
}

.ns-note .c-button.c-button--user .c-button__in-user .eyecatch {
    margin-right: 3px
}

.ns-note .c-button.c-button--user .c-button__in-user span {
    margin-right: 5px
}

.ns-note .c-button.c-button--user .c-button__in-user span:last-child {
    margin-right: 3px;
    font: 16px Arial, sans-serif;
    color: #a1a6a9;
    margin-top: 1px
}

.ns-note .icon-xlarge,
.ns-note .icon,
.ns-note .icon-small,
.ns-note .icon-mini {
    display: block
}

.ns-note .icon-xlarge {
    width: 50px;
    height: 50px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_50-bea65d073fa91bc21413ea0b647ddc382ac81d1ca882a6cfc0e8b289885d9c9c.png) no-repeat
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-xlarge {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_50_retina-7de440e3f6e3e3888fcdf2b38892181a5b601a58dda29796052fff4ac8c8a394.png) no-repeat;
        background-size: 150px 100px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-xlarge {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_50_retina-7de440e3f6e3e3888fcdf2b38892181a5b601a58dda29796052fff4ac8c8a394.png) no-repeat;
        background-size: 150px 100px
    }
}

.ns-note .icon-large {
    width: 40px;
    height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40-d6c66b1221a033ca1e4c8ec8877c9d96b6c8dd707819e1cb52d8bd4e117dc31d.png) no-repeat
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-large {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_retina-c4bbe536835f332304e6aaef35a106099a1397fdd5e16977a2a635c1c0b6cbdc.png) no-repeat;
        background-size: 80px 160px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-large {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_retina-c4bbe536835f332304e6aaef35a106099a1397fdd5e16977a2a635c1c0b6cbdc.png) no-repeat;
        background-size: 80px 160px
    }
}

.ns-note .icon {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30-d603f8acddd0fd4fc63ae912fd0bb500b81452b0a203cdf32e2b4866045bbb62.png) no-repeat;
    -webkit-transition: none;
    transition: none
}

@media only screen and (max-width: 480px) {
    .ns-note .icon {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_retina-9bd5e552e213fff69600f9e434b8e8ba8bdb7b765b032992041fe4a24d6bd97a.png) no-repeat;
        background-size: 60px 420px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_retina-9bd5e552e213fff69600f9e434b8e8ba8bdb7b765b032992041fe4a24d6bd97a.png) no-repeat;
        background-size: 60px 420px
    }
}

.ns-note .icon-small {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20-357ed76004750e30230ca586c768a5315b007b722dc28b112e7443e3c17473be.png) no-repeat;
    -webkit-transition: none;
    transition: none
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-small {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_retina-e3075e17355905d46a3a194c438d95fdca8bcbb76f17979840d3e1fa29e7edb3.png) no-repeat;
        background-size: 40px 400px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-small {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_retina-e3075e17355905d46a3a194c438d95fdca8bcbb76f17979840d3e1fa29e7edb3.png) no-repeat;
        background-size: 40px 400px
    }
}

.ns-note .icon-mini {
    width: 14px;
    height: 14px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_14-a254404ddb12fb75f31cd0e84351f842dc57670200fc9bfab86797ddf33f1a4b.png) no-repeat
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-mini {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_14_retina-6a17be5307bd1a9acb9a8d95cd44b8d2df398e3d8ac7d69f8978fb2504b83179.png) no-repeat;
        background-size: 28px 140px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-mini {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_14_retina-6a17be5307bd1a9acb9a8d95cd44b8d2df398e3d8ac7d69f8978fb2504b83179.png) no-repeat;
        background-size: 28px 140px
    }
}

.ns-note .icon-inline {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-inline {
        margin-top: 0
    }
}

.ns-note .icon-mini.icon-inline {
    margin-right: 1px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-mini.icon-inline {
        margin-top: -2px
    }
}

.ns-note .icon-small.icon-inline {
    margin-right: 3px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-small.icon-inline {
        margin-right: 2px;
        margin-top: -3px
    }
}

.ns-note .icon-xlarge-cover-upload {
    position: relative;
    background-position: -50px 0px
}

.ns-note .icon-xlarge-cover-upload:hover {
    background-position: -100px 0px
}

.ns-note .icon-xlarge-cover-upload.active {
    background-position: -100px 0px
}

.ns-note .icon-xlarge-cover-upload.after-uploading {
    background-position: 0px 0px
}

.ns-note .icon-xlarge-cover-upload.after-uploading:hover {
    background-position: -100px 0px
}

.ns-note .icon-xlarge-soundnote-cover-upload {
    background-position: 0px -50px
}

.ns-note .icon-large-play {
    background-position: 0px 0px
}

.ns-note .icon-large-play:hover {
    background-position: -40px 0px
}

.ns-note .icon-large-pause {
    background-position: 0px -40px
}

.ns-note .icon-large-pause:hover {
    background-position: -40px -40px
}

.ns-note .icon-large-play-circle {
    background-position: 0px -80px
}

.ns-note .icon-large-play-circle:hover {
    background-position: -40px -80px
}

.ns-note .icon-large-pause-circle {
    background-position: 0px -120px
}

.ns-note .icon-large-pause-circle:hover {
    background-position: -40px -120px
}

.ns-note .icon-notelist {
    background-position: 0px 0px
}

.ns-note .icon-notelist:hover {
    background-position: -30px 0px
}

.ns-note .icon-notelist.active {
    background-position: -30px 0px
}

.ns-note .icon-bell {
    background-position: 0px -30px
}

.ns-note .icon-bell:hover {
    background-position: 0px -30px;
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .icon-bell.active {
    background-position: -30px -30px
}

.ns-note .icon-setting {
    background-position: 0px -60px
}

.ns-note .icon-setting:hover {
    background-position: 0px -60px;
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .icon-setting.active {
    background-position: -30px -60px
}

.ns-note .icon-profile {
    background-position: 0px -90px
}

.ns-note .icon-profile:hover {
    background-position: -30px -90px
}

.ns-note .icon-facebook {
    background-position: 0px -120px
}

.ns-note .icon-facebook:hover {
    background-position: -30px -120px
}

.ns-note .icon-twitter {
    background-position: 0px -150px
}

.ns-note .icon-twitter:hover {
    background-position: -30px -150px
}

.ns-note .icon-home {
    background-position: 0px -180px
}

.ns-note .icon-home:hover {
    background-position: -30px -180px
}

.ns-note .icon-check {
    background-position: 0px -210px
}

.ns-note .icon-img {
    background-position: 0px -240px
}

.ns-note .icon-img:hover {
    background-position: -30px -240px
}

.ns-note .icon-edit {
    background-position: 0px -270px
}

.ns-note .icon-edit:hover {
    background-position: -30px -270px
}

.ns-note .overlay .icon-edit {
    position: absolute;
    top: 0;
    right: 2px
}

.ns-note .overlay:hover .icon-edit {
    background-position: -30px -270px
}

.ns-note .icon-db-view {
    background-position: 0px -300px
}

.ns-note .icon-db-comment {
    background-position: 0px -330px
}

.ns-note .icon-db-favorite {
    background-position: 0px -360px
}

.ns-note .icon-reload {
    background-position: 0px -390px
}

.ns-note .icon-small-facebook {
    background-position: 0px 0px
}

.ns-note .icon-small-twitter {
    background-position: 0px -20px
}

.ns-note .icon-small-check {
    background-position: -1000px -40px
}

.ns-note .icon-small-check.is-active {
    background-position: -20px -40px
}

.ns-note .icon-small-comment {
    background-position: 0px -60px
}

.ns-note .icon-small-share {
    background-position: 0px -80px
}

.ns-note .icon-small-favorite {
    background-position: 0px -100px
}

.ns-note .icon-small-favorite.is-active {
    background-position: -20px -100px
}

.ns-note .icon-small-upmost {
    background-position: 0px -120px
}

.ns-note .icon-small-upmost:hover {
    background-position: -20px -120px
}

.ns-note .icon-small-up {
    background-position: 0px -140px
}

.ns-note .icon-small-up:hover {
    background-position: -20px -140px
}

.ns-note .icon-small-down {
    background-position: 0px -160px
}

.ns-note .icon-small-down:hover {
    background-position: -20px -160px
}

.ns-note .icon-small-close {
    background-position: 0px -180px
}

.ns-note .icon-small-close:hover {
    background-position: -20px -180px
}

.ns-note .icon-small-mail {
    background-position: 0px -200px
}

.ns-note .icon-small-mail.is-active {
    background-position: -20px -200px
}

.ns-note .icon-small-db-view {
    background-position: 0px -220px
}

.ns-note .icon-small-db-comment {
    background-position: 0px -240px
}

.ns-note .icon-small-db-favorite {
    background-position: 0px -260px
}

.ns-note .icon-small-cakes {
    background-position: 0px -280px
}

.ns-note .icon-small-question {
    background-position: 0px -300px;
    background-color: #e1e5e7;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px
}

.ns-note .icon-small-drag {
    background-position: 0px -320px
}

.ns-note .icon-small-drag:hover {
    background-position: -20px -320px
}

.ns-note .icon-small-delete {
    background-position: 0px -340px
}

.ns-note .icon-small-delete:hover {
    background-position: -20px -340px
}

.ns-note .icon-small-edit {
    background-position: 0px -360px
}

.ns-note .icon-small-edit:hover {
    background-position: -20px -360px
}

.ns-note .icon-small-lock {
    background-position: 0px -380px
}

.ns-note .icon-mini-edit {
    background-position: 0px 0px
}

.ns-note .icon-mini-favorite {
    background-position: 0px -14px
}

.ns-note .icon-mini-favorite.is-active {
    background-position: -14px -14px
}

.ns-note .icon-mini-comment {
    background-position: 0px -28px
}

.ns-note .icon-mini-close {
    background-position: 0px -42px
}

.ns-note .icon-mini-close:hover {
    background-position: -14px -42px
}

.ns-note .icon-mini-lock-black {
    background-position: 0px -56px
}

.ns-note .icon-mini-lock-grey {
    background-position: 0px -70px
}

.ns-note .icon-mini-add {
    background-position: 0px -84px
}

.ns-note .icon-mini-sort {
    background-position: 0px -98px
}

.ns-note .icon-mini-fb {
    background-position: 0px -112px
}

.ns-note .icon-mini-tw {
    background-position: 0px -126px
}

.ns-note .btn .icon-small,
.ns-note .c-button .icon-small {
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -10px
}

.ns-note .btn .icon-position-l-1,
.ns-note .c-button .icon-position-l-1 {
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -10px
}

.ns-note .btn .icon-wrap,
.ns-note .c-button .icon-wrap {
    position: relative;
    display: block
}

.ns-note .close {
    position: absolute;
    top: 0px;
    right: 0px
}

.ns-note .blt {
    margin-right: 2px
}

.ns-note .icon-circle-30,
.ns-note .icon-circle-24,
.ns-note .icon-circle-20,
.ns-note .icon-circle-14 {
    border-radius: 50% !important;
    background-color: #fff;
    cursor: pointer
}

.ns-note .icon-circle-30.bg-black,
.ns-note .icon-circle-24.bg-black,
.ns-note .icon-circle-20.bg-black,
.ns-note .icon-circle-14.bg-black {
    background-color: #444444
}

.ns-note .icon-circle-30.bg-black:hover,
.ns-note .icon-circle-24.bg-black:hover,
.ns-note .icon-circle-20.bg-black:hover,
.ns-note .icon-circle-14.bg-black:hover {
    background-color: #686868
}

.ns-note .icon-circle-30.bg-black.no-hover:hover,
.ns-note .icon-circle-24.bg-black.no-hover:hover,
.ns-note .icon-circle-20.bg-black.no-hover:hover,
.ns-note .icon-circle-14.bg-black.no-hover:hover {
    background-color: #444444
}

.ns-note .icon-circle-30.bg-black-alpha,
.ns-note .icon-circle-24.bg-black-alpha,
.ns-note .icon-circle-20.bg-black-alpha,
.ns-note .icon-circle-14.bg-black-alpha {
    background-color: rgba(0, 0, 0, 0.8)
}

.ns-note .icon-circle-30.bg-grey,
.ns-note .mod-modal .icon-circle-30.navi-modal,
.ns-note .icon-circle-24.bg-grey,
.ns-note .mod-modal .icon-circle-24.navi-modal,
.ns-note .icon-circle-20.bg-grey,
.ns-note .mod-modal .icon-circle-20.navi-modal,
.ns-note .icon-circle-14.bg-grey,
.ns-note .mod-modal .icon-circle-14.navi-modal {
    background-color: #bdc3c7
}

.ns-note .icon-circle-30.bg-lgrey,
.ns-note .icon-circle-24.bg-lgrey,
.ns-note .icon-circle-20.bg-lgrey,
.ns-note .icon-circle-14.bg-lgrey {
    background-color: #d9e0e2
}

.ns-note .icon-circle-30.bg-fb,
.ns-note .icon-circle-24.bg-fb,
.ns-note .icon-circle-20.bg-fb,
.ns-note .icon-circle-14.bg-fb {
    background-color: #3b5998
}

.ns-note .icon-circle-30.bg-tw,
.ns-note .icon-circle-24.bg-tw,
.ns-note .icon-circle-20.bg-tw,
.ns-note .icon-circle-14.bg-tw {
    background-color: #00acee
}

.ns-note .icon-circle-30.bg-green,
.ns-note .icon-circle-24.bg-green,
.ns-note .icon-circle-20.bg-green,
.ns-note .icon-circle-14.bg-green {
    background-color: #41C9B4
}

.ns-note .upper-left {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100
}

.ns-note .upper-right {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100
}

.ns-note .upper-right-pickup-mag-1 {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100
}

.ns-note .upper-left-h {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 100
}

.ns-note .upper-left-1 {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100
}

.ns-note .upper-right-h {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100
}

.ns-note .upper-right-1 {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100
}

.ns-note .upper-left-negative {
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 100
}

.ns-note .upper-right-negative {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 100
}

.ns-note .title-wrap .upper-right-negative {
    top: -11px;
    right: -11px
}

.ns-note .title-wrap .upper-left-negative {
    top: -11px;
    left: -11px
}

.ns-note .icon-circle-30 {
    width: 30px;
    height: 30px
}

.ns-note .icon-circle-24 {
    width: 24px;
    height: 24px
}

.ns-note .icon-circle-20 {
    width: 20px;
    height: 20px
}

.ns-note .icon-circle_14 {
    width: 14px;
    height: 14px
}

.ns-note .icon-circle-30 .icon-small {
    margin: 5px
}

.ns-note .icon-circle-30 .icon-small.icon-small-delete:hover {
    background-position: 0px -340px
}

.ns-note .icon-circle-24.upper-right-negative {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 100
}

.ns-note .icon-circle-24 .icon-small {
    margin: 2px
}

.ns-note .icon-40 {
    width: 40px;
    height: 40px;
    display: block
}

.ns-note .icon-40.icon-40-sound-play {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_sound-play_retina-61e7e791c3a8a980fe1ca848c610ad8993743a4d0f2a4167015e42569e7a91b2.png) no-repeat;
    background-size: 40px 40px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-40.icon-40-sound-play {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_sound-play_retina-61e7e791c3a8a980fe1ca848c610ad8993743a4d0f2a4167015e42569e7a91b2.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-40.icon-40-sound-play {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_sound-play_retina-61e7e791c3a8a980fe1ca848c610ad8993743a4d0f2a4167015e42569e7a91b2.png) no-repeat
    }
}

.ns-note .icon-40.icon-40-movie-play {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_movie-play_retina-afb15f70c6887cdf08fcf47fc6029ff1ba8ce89338862fef93da72338ff5cb74.png) no-repeat;
    background-size: 40px 40px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-40.icon-40-movie-play {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_movie-play_retina-afb15f70c6887cdf08fcf47fc6029ff1ba8ce89338862fef93da72338ff5cb74.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-40.icon-40-movie-play {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_movie-play_retina-afb15f70c6887cdf08fcf47fc6029ff1ba8ce89338862fef93da72338ff5cb74.png) no-repeat
    }
}

.ns-note .icon-40.icon-40-invite {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_invite_retina-34c284d2bd7cfe27373b02a3804a505d0781e8f4b1ef873b88acf4bd525dd8ec.png) no-repeat;
    background-size: 40px 40px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-40.icon-40-invite {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_invite_retina-34c284d2bd7cfe27373b02a3804a505d0781e8f4b1ef873b88acf4bd525dd8ec.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-40.icon-40-invite {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_40_invite_retina-34c284d2bd7cfe27373b02a3804a505d0781e8f4b1ef873b88acf4bd525dd8ec.png) no-repeat
    }
}

.ns-note .icon-30 {
    width: 30px;
    height: 30px;
    display: block
}

.ns-note .icon-30.icon-30-plus {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_plus-6ed693348a6eacf513d2933348cdd9804534528153cf7d1944cdaceb13d8aeb1.png) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-plus {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_plus_retina-8b5f9cbc4ba3fc9b72380119b04c60b353ea48b31403c391056c5fd082cd969b.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-plus {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_plus_retina-8b5f9cbc4ba3fc9b72380119b04c60b353ea48b31403c391056c5fd082cd969b.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-share {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_share-dda76224a9f2383ed6633a23e15b0d644df0e1ab0ffb9820209e5b97c6839934.png) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-share {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_share_retina-1a19c76c55af37e61c002f9dd7108985de46955716f751229edc2e26767c89e1.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-share {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_share_retina-1a19c76c55af37e61c002f9dd7108985de46955716f751229edc2e26767c89e1.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-share:hover {
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .icon-30.icon-30-tl-list {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_tl-list-8a0a8655b25ba7f0f577d2ae25504e7218e74542033c000b9d4a14290ff35a51.png) no-repeat;
    background-size: 30px 60px !important;
    background-position: 0px 0px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-tl-list {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_tl-list_retina-bb75b69cdd4121e8449607a8f5f5706ed8497895a525bdb9be9c820afa18cec6.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-tl-list {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_tl-list_retina-bb75b69cdd4121e8449607a8f5f5706ed8497895a525bdb9be9c820afa18cec6.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-tl-list.is-active {
    background-position: 0px -30px
}

.ns-note .icon-30.icon-30-tl-list-toc {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_tl-list_toc-6ed751d9664ee80912038f127106fe7d928d4b4815fe041a781650c4b77eb7fd.png) no-repeat;
    background-size: 30px 60px !important;
    background-position: 0px 0px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-tl-list-toc {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_tl-list_toc_retina-241ca0d38841825dd90f55dcec04b6da46a86cef5bce2173ab5740727a7f29c4.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-tl-list-toc {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_tl-list_toc_retina-241ca0d38841825dd90f55dcec04b6da46a86cef5bce2173ab5740727a7f29c4.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-tl-list-toc.is-active {
    background-position: 0px -30px
}

.ns-note .icon-30.icon-30-edit {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_edit-da91a6155a625af64d56fcbb186b0aede9418136178ef8e69a928eb3e626c0f1.png) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-edit {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_edit_retina-e726b5c70d74568038e41b414df263458a7e66f24ea4745482af35dfbdff15dc.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-edit {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_edit_retina-e726b5c70d74568038e41b414df263458a7e66f24ea4745482af35dfbdff15dc.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-edit:hover {
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .icon-30.icon-30-camera {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_camera-d6adb732b5baeed963ffe22609eae48991a4b67cacdc53a3225aec3d519d8fb3.png) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-camera {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_camera_retina-da732efe11118fa95096e9aab2a555b55e523b07cb3c74f9a71dd0080730daf4.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-camera {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_camera_retina-da732efe11118fa95096e9aab2a555b55e523b07cb3c74f9a71dd0080730daf4.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-camera:hover {
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .icon-30.icon-30-search {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_search-6aee52cdd343c9eef474a494e9fc7f86eedc4665f5772c58464c8517269edc1b.png) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-search {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_search_retina-38585464f8b40c2d8d06832225bbcdbd0d0816495b18cb53a810b71757807180.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-search {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_search_retina-38585464f8b40c2d8d06832225bbcdbd0d0816495b18cb53a810b71757807180.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-search--sp {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_search_sp-c2bac759897dca9a30ad57e9165f98a508c8ade9aabe78fa69f79497c48a850a.png) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-search--sp {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_search_sp_retina-020f7c2d89c3bdeb1ba1b9f18a5bebfbac86c16df1361dbcfd3a70f9e3d52336.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-search--sp {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_search_sp_retina-020f7c2d89c3bdeb1ba1b9f18a5bebfbac86c16df1361dbcfd3a70f9e3d52336.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-home {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_home-58cd792163dbe94b8ca6c46662676ed887af196144a052033784a3e17471d88c.png) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-home {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_home_retina-cbb56ce60441fcd60781afd4541455a6fff7008f209241cfa7a170751b8ada0f.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-home {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_home_retina-cbb56ce60441fcd60781afd4541455a6fff7008f209241cfa7a170751b8ada0f.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-home:hover {
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .icon-30.icon-30-dots {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_dots-df48ca15b76a798e698e9edfbd1046d4a46e903413dec2c8912aeedb4a3da533.png) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-30.icon-30-dots {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_dots_retina-bc9cf134d06cbbc9ab6a82ff5292feb5aaf859ff626e1b5c6088e936d050d12c.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-30.icon-30-dots {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_30_dots_retina-bc9cf134d06cbbc9ab6a82ff5292feb5aaf859ff626e1b5c6088e936d050d12c.png) no-repeat
    }
}

.ns-note .icon-30.icon-30-dots:hover {
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .icon-20 {
    width: 20px;
    height: 20px;
    display: block
}

.ns-note .icon-20.icon-20-share {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share-d601c3b6315345dae48b636e819d3c03adfe0784dc95886e9022a62f0104f75f.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-share {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_retina-75c328f37bff2604df794a0a0eadfc260192e1cdb3244ee9691463db2f30b96d.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-share {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_retina-75c328f37bff2604df794a0a0eadfc260192e1cdb3244ee9691463db2f30b96d.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-plus {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_plus-f647669d75b52d26154802b2a441e545dc81c4886fac3ec81acada369541015d.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-plus {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_plus_retina-cdb4d6f0df1a8d5bd9e0025b345e2584d2ac379e5a24b50868bea7a376da4c65.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-plus {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_plus_retina-cdb4d6f0df1a8d5bd9e0025b345e2584d2ac379e5a24b50868bea7a376da4c65.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-facebook-white {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_facebook_white-f184083e981a34ec744785f1942b63687c832eff0df04e9fba844aaf6232d8b7.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-facebook-white {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_facebook_white_retina-feb7664de73454c97ba71237ef10b4e862962a7999931dd59541fafc02651866.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-facebook-white {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_facebook_white_retina-feb7664de73454c97ba71237ef10b4e862962a7999931dd59541fafc02651866.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-twitter-white {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_twitter_white-cf1ff9db9b45fc49202a3b1d9ed2eb64660ca04d6e6b2b91b1b5e4ab46684bda.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-twitter-white {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_twitter_white_retina-727807d61e9bcd9abcf90a4490d8dcecf12036b95956c6693a2d91e55a613ffb.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-twitter-white {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_twitter_white_retina-727807d61e9bcd9abcf90a4490d8dcecf12036b95956c6693a2d91e55a613ffb.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-pay {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_pay-b3879dea24b51199124e29ee6170a1cb0160fd9779877172d6f985235d196d0a.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-pay {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_pay_retina-cf107569b354832f978ebd14e223799c75b5db6e852f8ca315bd78fa5d554d5b.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-pay {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_pay_retina-cf107569b354832f978ebd14e223799c75b5db6e852f8ca315bd78fa5d554d5b.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-send {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_send-61c2efd1285792a395090ce9211be5fd6f2f292f25141f69d9d9edf2b6ae6ec2.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-send {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_send_retina-026124c35eec9250d50ce82f70f61ca4aabb6cb5162d2954b2c840a591dcae0b.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-send {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_send_retina-026124c35eec9250d50ce82f70f61ca4aabb6cb5162d2954b2c840a591dcae0b.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-check {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_check-0a536f29ef6242554b5274867437139881169c4b60c2d92e22336c3907b32ed2.png) no-repeat;
    background-size: 20px 40px !important;
    background-position: 0px 0px
}

.ns-note .icon-20.icon-20-check.is--active {
    background-position: 0px -20px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-check {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_check_retina-a183319ccc0521f6a17b3d89b8f46f6dd7c2a11bcf5cc147096eb8d7d80d3bfe.png) no-repeat;
        background-size: 20px 40px !important;
        background-position: 0px 0px
    }

    .ns-note .icon-20.icon-20-check.is--active {
        background-position: 0px -20px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-check {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_check_retina-a183319ccc0521f6a17b3d89b8f46f6dd7c2a11bcf5cc147096eb8d7d80d3bfe.png) no-repeat;
        background-size: 20px 40px !important;
        background-position: 0px 0px
    }

    .ns-note .icon-20.icon-20-check.is--active {
        background-position: 0px -20px
    }
}

.ns-note .icon-20.icon-20-down-arrow {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_down-arrow-42f1a13efe51d1bc08e523e5fa5995ecdec0c00f3f3f85bbd001abb2abd013ac.png) no-repeat;
    background-size: 20px 40px !important;
    background-position: 0px 0px
}

.ns-note .icon-20.icon-20-down-arrow.is--active {
    background-position: 0px -20px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-down-arrow {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_down-arrow_retina-2b3ff7ebb74b5baa0d0f2962b40a1e6fe1ac705ba39c9b421545f58d56a5d89e.png) no-repeat;
        background-size: 20px 40px !important;
        background-position: 0px 0px
    }

    .ns-note .icon-20.icon-20-down-arrow.is--active {
        background-position: 0px -20px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-down-arrow {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_down-arrow_retina-2b3ff7ebb74b5baa0d0f2962b40a1e6fe1ac705ba39c9b421545f58d56a5d89e.png) no-repeat;
        background-size: 20px 40px !important;
        background-position: 0px 0px
    }

    .ns-note .icon-20.icon-20-down-arrow.is--active {
        background-position: 0px -20px
    }
}

.ns-note .icon-20.icon-20-mag-lock {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_mag-lock-c9f91a93838278fa05d470491ffb29732303f8eceabcd4db3ef445c5557ba906.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-mag-lock {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_mag-lock_retina-a177d7c9ea4f2b30a018f9a92791cb91d4f6777142f1f081897ef66e48908b7a.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-mag-lock {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_mag-lock_retina-a177d7c9ea4f2b30a018f9a92791cb91d4f6777142f1f081897ef66e48908b7a.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-mag-pay {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_mag-pay-54c20f285920734e345c40b704ad125abb7e1250046a395b799ed593e4ebd485.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-mag-pay {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_mag-pay_retina-3be04006541295e1656e1545363b1517723096085b869277895d8e78fb7f4d6f.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-mag-pay {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_mag-pay_retina-3be04006541295e1656e1545363b1517723096085b869277895d8e78fb7f4d6f.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-share-facebook {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_facebook-52aa2b5d2344abbc017b7d09e868da9f1db3405841264e1f64423d4268d86a36.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-share-facebook {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_facebook_retina-76d885c108b1d13a919d0aa69dcd34f5c2560b7fd4ca204842a9a5588e269273.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-share-facebook {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_facebook_retina-76d885c108b1d13a919d0aa69dcd34f5c2560b7fd4ca204842a9a5588e269273.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-share-twitter {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_twitter-b5ede14e0208a49feeb2d1e9984c0b49fe4904c19c1412aa581ca480af5207cb.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-share-twitter {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_twitter_retina-254c8d90d66abd3ca0366b1f7e87220dc07139f6c166dadd5709313acf11f600.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-share-twitter {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_twitter_retina-254c8d90d66abd3ca0366b1f7e87220dc07139f6c166dadd5709313acf11f600.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-share-hatena {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_hatena-7c271ab2bcc0b8a8893d35aaeff12d8d8507444391ed6659f8d5595e46b75f69.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-share-hatena {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_hatena_retina-3b809d9c15e6bb986a7788f518c28d272dce43a51115df0be39e566cf62822cb.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-share-hatena {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_hatena_retina-3b809d9c15e6bb986a7788f518c28d272dce43a51115df0be39e566cf62822cb.png) no-repeat
    }
}

.ns-note .icon-20.icon-20-share-embed {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_embed-07b944b40f60803ecd140579c2a82d7cecc46bead06616990b8613c8afa8e962.png) no-repeat;
    background-size: 20px 20px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-20.icon-20-share-embed {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_embed_retina-4ef54a27a1802705958d56c5cf5ba96985635d4c792ce8044465dd8c34119b5e.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-20.icon-20-share-embed {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_share_embed_retina-4ef54a27a1802705958d56c5cf5ba96985635d4c792ce8044465dd8c34119b5e.png) no-repeat
    }
}

.ns-note .icon-15 {
    width: 15px;
    height: 15px;
    display: block
}

.ns-note .icon-15.icon-15-check {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_15_check-e725083fc49ccb4f9eba9116f67218a884b85795086d1ba6f689aba64bd2098b.png) no-repeat;
    background-size: 15px 30px !important;
    background-position: 0px 0px
}

.ns-note .icon-15.icon-15-check.is--active {
    background-position: 0px -15px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-15.icon-15-check {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_15_check_retina-c09c1313aecc391aca329e953d2fdd4e31616fcdd40506966c2532156dec4a22.png) no-repeat;
        background-size: 15px 30px !important;
        background-position: 0px 0px
    }

    .ns-note .icon-15.icon-15-check.is--active {
        background-position: 0px -15px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-15.icon-15-check {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_15_check_retina-c09c1313aecc391aca329e953d2fdd4e31616fcdd40506966c2532156dec4a22.png) no-repeat;
        background-size: 15px 30px !important;
        background-position: 0px 0px
    }

    .ns-note .icon-15.icon-15-check.is--active {
        background-position: 0px -15px
    }
}

.ns-note .icon-15.icon-15-delete {
    background-size: 15px 15px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-15.icon-15-delete {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_15_delete_retina-a413fd28a218b62f075ae26389d218f32b1c771894d2977fd8acc461a1685f81.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-15.icon-15-delete {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_15_delete_retina-a413fd28a218b62f075ae26389d218f32b1c771894d2977fd8acc461a1685f81.png) no-repeat
    }
}

.ns-note .icon-14 {
    width: 14px;
    height: 14px;
    display: block
}

.ns-note .icon-14.icon-14-close {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_actions_14-9bb599055bf7fe52658520da5d1ed7d8f1498c4becba215ee56a0aa5aa6807e5.png) no-repeat;
    background-size: 28px 14px !important;
    background-position: -14px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-14.icon-14-close {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_actions_14-9bb599055bf7fe52658520da5d1ed7d8f1498c4becba215ee56a0aa5aa6807e5.png) no-repeat;
        background-position: -14px 0
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-14.icon-14-close {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_actions_14-9bb599055bf7fe52658520da5d1ed7d8f1498c4becba215ee56a0aa5aa6807e5.png) no-repeat;
        background-position: -14px 0
    }
}

.ns-note .icon-10 {
    width: 10px;
    height: 10px;
    display: block
}

.ns-note .icon-10.icon-10-delete {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_delete-ff7776c23584c8c6de1b36d22167b4df27505cc7c78eb4ba819f62e7d8f96f12.png) no-repeat;
    background-size: 10px 10px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-10.icon-10-delete {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_delete_retina-e7fb3bd48ed2060534d4c74525566cf4b6f8178f62039a929937c7ac2491bd3f.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-10.icon-10-delete {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_delete_retina-e7fb3bd48ed2060534d4c74525566cf4b6f8178f62039a929937c7ac2491bd3f.png) no-repeat
    }
}

.ns-note .icon-10.icon-10-check {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_check-98848910481136b5dc00545bf1879e4a0191b2f58a7b97eef227bfa13d5f19e5.png) no-repeat;
    background-size: 10px 10px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-10.icon-10-check {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_check_retina-87a7325da5b1f73dcc35aa748eae1e8b9a60beb0c51958938502ba7ca26b79c6.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-10.icon-10-check {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_check_retina-87a7325da5b1f73dcc35aa748eae1e8b9a60beb0c51958938502ba7ca26b79c6.png) no-repeat
    }
}

.ns-note .icon-10.icon-10-support {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_support-16d184e076394a61cac67733bbcc7a48992ff8c8b7eb0b67d93eb4483aeb7ca6.png) no-repeat;
    background-size: 10px 10px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-10.icon-10-support {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_support_retina-df2284ae052a922a7f4d23d78a572c8423058470c3bce7edb2730e28b21ef5ae.png) no-repeat
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-10.icon-10-support {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_10_support_retina-df2284ae052a922a7f4d23d78a572c8423058470c3bce7edb2730e28b21ef5ae.png) no-repeat
    }
}

.ns-note .is--active>.icon-15-check {
    background-position: 0px -15px
}

.ns-note .icon-inline-block {
    display: inline-block !important;
    margin-right: 3px
}

.ns-note .icon-share {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon/icon_share-58241b199443a8ed1349bf28ac6775b6b6b3a2089d4f59c56587eae73368eac4.svg) no-repeat;
    background-size: 30px 30px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-share {
        width: 24px;
        height: 24px;
        background-size: 24px 24px !important
    }
}

.ns-note .eyecatch {
    display: block
}

.ns-note .eyecatch img {
    width: 100%
}

.ns-note .eyecatch.eyecatch-full {
    width: 100%;
    height: 100%
}

.ns-note .eyecatch.eyecatch-xlarge {
    width: 110px;
    height: 110px
}

.ns-note .eyecatch.eyecatch-large {
    width: 70px;
    height: 70px
}

.ns-note .eyecatch.eyecatch-medium-large {
    width: 60px;
    height: 60px
}

.ns-note .eyecatch.eyecatch-medium {
    width: 40px;
    height: 40px
}

.ns-note .eyecatch.eyecatch-small {
    width: 30px;
    height: 30px
}

.ns-note .eyecatch.eyecatch-xsmall {
    width: 20px;
    height: 20px
}

@media screen and (max-width: 767px) {
    .ns-note .sp-textnote-profile {
        width: 100% !important;
        max-width: 100px;
        padding-right: 10px
    }
}

.ns-note .eyecatch-inline {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px
}

.ns-note .eyecatch-xsmall-inline {
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px
}

.ns-note .bor-right {
    border-right: 1px solid
}

.ns-note .c-lgrey {
    color: #e1e5e7
}

.ns-note .label {
    display: inline;
    padding: 3px 5px;
    font-size: 11px;
    line-height: 1.2
}

.ns-note .unpublished {
    background-color: #f8f9fa;
    color: #bdc3c7
}

.ns-note .table {
    width: 100%;
    border-collapse: collapse
}

.ns-note .table th,
.ns-note .table td {
    vertical-align: middle;
    padding: 10px 5px;
    border-top: 1px solid #f7f7f7;
    font-size: 12px
}

.ns-note .table tr:first-child th,
.ns-note .table tr:first-child td {
    border-top: none
}

.ns-note .table tr.border-dot th,
.ns-note .table tr.border-dot td {
    border-top: 1px dashed #e1e5e7
}

.ns-note .table thead th,
.ns-note .table thead td {
    background: #f8f9fa;
    border-bottom: none;
    padding: 5px 10px
}

.ns-note .table-2col {
    width: 48%
}

.ns-note .table-2col tbody {
    width: 100%
}

.ns-note .table-2col th {
    border-bottom: 1px solid #d9e0e2;
    padding: 5px 0
}

.ns-note .table-2col td {
    vertical-align: middle;
    padding: 5px 0px;
    font-size: 13px
}

.ns-note .table-2col td:nth-child(1) {
    width: 60%
}

.ns-note .table-2col td:nth-child(2),
.ns-note .table-2col td:nth-child(3) {
    width: 20%;
    text-align: right
}

.ns-note .table-2col tr:first-child td {
    padding: 15px 0px 5px 0
}

.ns-note .table .cell-1,
.ns-note .table-2col .cell-1 {
    width: 10%
}

.ns-note .table .cell-1h,
.ns-note .table-2col .cell-1h {
    width: 15%
}

.ns-note .table .cell-2,
.ns-note .table-2col .cell-2 {
    width: 20%
}

.ns-note .table .cell-2h,
.ns-note .table-2col .cell-2h {
    width: 25%
}

.ns-note .table .cell-3,
.ns-note .table-2col .cell-3 {
    width: 30%
}

.ns-note .table .cell-3h,
.ns-note .table-2col .cell-3h {
    width: 35%
}

.ns-note .table .cell-4,
.ns-note .table-2col .cell-4 {
    width: 40%
}

.ns-note .table .cell-5,
.ns-note .table-2col .cell-5 {
    width: 50%
}

.ns-note .table .cell-6,
.ns-note .table-2col .cell-6 {
    width: 60%
}

.ns-note .table .cell-7,
.ns-note .table-2col .cell-7 {
    width: 70%
}

.ns-note .table .cell-8,
.ns-note .table-2col .cell-8 {
    width: 80%
}

.ns-note .table .cell-9,
.ns-note .table-2col .cell-9 {
    width: 90%
}

.ns-note .ph-table tbody tr {
    border-bottom: 1px solid #e1e5e7
}

.ns-note .ph-table tbody:last-child tr {
    border-bottom: none
}

.ns-note canvas {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor
}

.ns-note i {
    font-style: normal
}

.ns-note form {
    font: 13px / 18px;
    clear: both
}

.ns-note form * {
    margin: 0
}

.ns-note label,
.ns-note .alt-label {
    display: block;
    margin-bottom: 15px;
    overflow: hidden
}

.ns-note .label-group {
    display: block;
    margin-bottom: 18px;
    overflow: hidden
}

.ns-note .label-group label {
    margin-bottom: 9px;
    color: #222222
}

.ns-note select {
    display: inherit;
    height: 31px;
    padding: 4px;
    width: 210px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle
}

.ns-note select[multiple],
.ns-note select[size] {
    display: inherit;
    height: 31px;
    padding: 4px;
    width: 210px;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #e1e5e7
}

.ns-note input[type="text"],
.ns-note input[type="password"],
.ns-note input[type="email"],
.ns-note input[type="number"],
.ns-note input[type="search"],
.ns-note input[type="date"] {
    display: inherit;
    height: 31px;
    padding: 5px 10px;
    width: 210px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    vertical-align: middle;
    border-radius: 4px
}

.ns-note input.short[type="text"],
.ns-note input.short[type="password"],
.ns-note input.short[type="email"],
.ns-note input.short[type="number"],
.ns-note input.short[type="search"],
.ns-note input.short[type="date"] {
    height: 30px !important
}

.ns-note input[type="text"],
.ns-note input[type="password"],
.ns-note input[type="email"],
.ns-note input[type="number"],
.ns-note input[type="search"] {
    background-color: #fff;
    border: 1px solid #e1e5e7
}

.ns-note input.username {
    margin-bottom: 0 !important
}

.ns-note input.username[type="text"],
.ns-note input.username[type="password"],
.ns-note input.username[type="email"],
.ns-note input.username[type="number"],
.ns-note input.username[type="search"],
.ns-note input.username[type="date"] {
    width: 130px !important;
    padding-left: 5px;
    padding-right: 5px
}

.ns-note input[type="radio"],
.ns-note input[type="checkbox"] {
    margin: 1px 2px 0 0;
    vertical-align: text-top
}

.ns-note input[type="number"] {
    width: 60px
}

.ns-note input[type="date"] {
    background-color: #fff;
    border: 1px solid #e1e5e7
}

.ns-note button:focus {
    outline: 0
}

.ns-note textarea {
    box-sizing: content-box;
    vertical-align: middle;
    display: inherit;
    font-size: 11px;
    height: auto;
    min-height: 60px;
    width: 240px;
    padding: 4px;
    background-color: #fff;
    border: 1px solid #e1e5e7;
    border-radius: 4px
}

.ns-note textarea:focus {
    border-color: #3BC49D;
    outline: 0
}

.ns-note input[type="text"]:focus,
.ns-note input[type="password"]:focus,
.ns-note input[type="email"]:focus,
.ns-note input[type="number"]:focus,
.ns-note input[type="search"]:focus,
.ns-note input[type="date"]:focus {
    border-color: #3BC49D;
    outline: 0
}

.ns-note input[type="submit"],
.ns-note input[type="reset"],
.ns-note input[type="button"],
.ns-note input[type="radio"],
.ns-note input[type="checkbox"] {
    width: auto
}

.ns-note input[type="file"] {
    height: 28px;
    line-height: 28px
}

.ns-note ::-webkit-input-placeholder {
    color: #bdc3c7
}

.ns-note :-ms-input-placeholder {
    color: #bdc3c7
}

.ns-note input:-moz-placeholder {
    color: #bdc3c7;
    opacity: 1
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .ns-note select {
        border-top: 1px solid #e1e5e7;
        border-right: 1px solid #e1e5e7;
        border-left: 1px solid #e1e5e7;
        border-bottom: 1px solid #e1e5e7;
        color: #444
    }
}

.ns-note select[multiple],
.ns-note select[size] {
    height: auto
}

.ns-note form .message {
    font-size: 12px;
    clear: both;
    display: block
}

.ns-note input.xsmall[type="text"],
.ns-note input.xsmall[type="password"],
.ns-note input.xsmall[type="email"],
.ns-note input.xsmall[type="number"],
.ns-note input.xsmall[type="search"],
.ns-note input.xsmall[type="date"] {
    height: 31px;
    width: 70px !important
}

.ns-note input.small[type="text"],
.ns-note input.small[type="password"],
.ns-note input.small[type="email"],
.ns-note input.small[type="number"],
.ns-note input.small[type="search"],
.ns-note input.small[type="date"] {
    height: 31px;
    width: 140px
}

.ns-note input.medium[type="text"],
.ns-note input.medium[type="password"],
.ns-note input.medium[type="email"],
.ns-note input.medium[type="number"],
.ns-note input.medium[type="search"],
.ns-note input.medium[type="date"] {
    height: 31px;
    width: 280px
}

.ns-note input.large[type="text"],
.ns-note input.large[type="password"],
.ns-note input.large[type="email"],
.ns-note input.large[type="number"],
.ns-note input.large[type="search"],
.ns-note input.large[type="date"] {
    height: 31px;
    width: 420px
}

.ns-note input.full[type="text"],
.ns-note input.full[type="password"],
.ns-note input.full[type="email"],
.ns-note input.full[type="number"],
.ns-note input.full[type="search"],
.ns-note input.full[type="date"],
.ns-note input.full[type="url"] {
    height: 31px;
    width: 100%
}

.ns-note textarea.large {
    height: 124px;
    width: 420px
}

.ns-note textarea.full {
    width: 100%;
    height: 93px;
    padding: 10px
}

.ns-note select.xsmall {
    width: 80px
}

.ns-note select.small {
    width: 100px
}

.ns-note .form-horizontal label>div:first-child,
.ns-note .form-horizontal .label-group>div:first-child {
    width: 130px;
    text-align: right;
    margin-right: 10px
}

.ns-note .form-horizontal label>div:first-child,
.ns-note .form-horizontal .label-group>div:first-child,
.ns-note .form-horizontal .message {
    line-height: 31px
}

.ns-note .form-horizontal label>div:first-child {
    font-weight: bold
}

.ns-note .form-horizontal label>div {
    width: 120px;
    margin-right: 10px
}

.ns-note .form-horizontal .label-group label,
.ns-note .form-horizontal .inline label,
.ns-note .form-horizontal label>div:first-child,
.ns-note .form-horizontal .label-group>div:first-child,
.ns-note .form-horizontal .message {
    float: left
}

.ns-note .form-horizontal label input,
.ns-note .form-horizontal label select,
.ns-note .form-horizontal label textarea {
    float: left
}

.ns-note .form-horizontal label.short div {
    width: 80px !important
}

.ns-note .form-horizontal label.short .error-message {
    margin-left: 60px
}

.ns-note .form-horizontal .error-message {
    display: block;
    clear: both;
    line-height: inherit;
    margin-left: 140px;
    padding-top: 5px;
    color: #ff0000
}

.ns-note .form-horizontal .message {
    margin-left: 10px;
    clear: none
}

.ns-note .form-horizontal select {
    height: 35px;
    line-height: 35px
}

.ns-note .form-horizontal .labels label {
    display: inline-block;
    vertical-align: top
}

.ns-note .form-horizontal .labels label select+span {
    line-height: 35px
}

.ns-note .form-stacked label>div,
.ns-note .form-stacked .alt-label>div {
    font-size: 13px
}

.ns-note .form-stacked label>div:first-child,
.ns-note .form-stacked .alt-label>div:first-child {
    font-weight: bold;
    margin-bottom: 5px
}

.ns-note .form-stacked .error-message {
    color: #ff0000;
    margin-top: 5px
}

.ns-note .form-stacked .password-message {
    margin-top: 5px
}

.ns-note .form-stacked .password-message-error {
    color: #ff0000
}

.ns-note .form-stacked .password-message-warn {
    color: #FF9955
}

.ns-note .form-stacked .password-message-notice {
    color: #787C7B
}

.ns-note .form-stacked .password-message-info {
    color: #2CB696
}

.ns-note .form-stacked input[type="text"],
.ns-note .form-stacked input[type="password"],
.ns-note .form-stacked input[type="email"],
.ns-note .form-stacked input[type="number"],
.ns-note .form-stacked input[type="search"],
.ns-note .form-stacked input[type="date"] {
    width: 100%
}

.ns-note .form-stacked input.small {
    width: 120px
}

.ns-note .form-stacked textarea {
    width: 100%
}

.ns-note .form-stacked select {
    width: 60%
}

.ns-note .form-stacked select.xsmall {
    width: 70px
}

.ns-note .form-stacked select.small {
    width: 100px
}

.ns-note .form-stacked select.full {
    width: 100%
}

.ns-note .form-stacked .select-txt {
    line-height: 28px
}

.ns-note .form-credit input.small {
    width: 70px
}

.ns-note .form-credit select.xsmall {
    width: 50px
}

.ns-note .form-credit select.small {
    width: 70px
}

.ns-note .error-message {
    color: #ff0000
}

.ns-note .error-login {
    text-align: center;
    display: block;
    margin-bottom: 20px
}

.ns-note label.inline,
.ns-note .alt-label.inline {
    display: inline
}

.ns-note input.inline[type="text"],
.ns-note input.inline[type="password"],
.ns-note input.inline[type="email"],
.ns-note input.inline[type="number"],
.ns-note input.inline[type="search"],
.ns-note input.inline[type="date"] {
    display: inline
}

.ns-note input.tall[type="text"],
.ns-note input.tall[type="password"],
.ns-note input.tall[type="email"],
.ns-note input.tall[type="number"],
.ns-note input.tall[type="search"],
.ns-note input.tall[type="date"] {
    height: 38px;
    font-size: 13px
}

.ns-note input[type="text"],
.ns-note input[type="password"],
.ns-note input[type="email"],
.ns-note input[type="number"],
.ns-note input[type="search"],
.ns-note input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.ns-note input[type=number]::-webkit-inner-spin-button,
.ns-note input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.ns-note input[type=number] {
    -moz-appearance: textfield
}

.ns-note textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.ns-note select {
    -webkit-appearance: pop-up-menu;
    -moz-appearance: pop-up-menu;
    appearance: pop-up-menu;
    background: #fff;
    border: 1px solid #e1e5e7
}

@media screen and (max-width: 768px) {
    .ns-note select {
        -webkit-appearance: pop-up-menu;
        -moz-appearance: pop-up-menu;
        appearance: pop-up-menu;
        background: #fff;
        border: 1px solid #d9e0e2
    }
}

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

    .ns-note input[type="text"],
    .ns-note input[type="password"],
    .ns-note input[type="email"],
    .ns-note input[type="number"],
    .ns-note input[type="search"],
    .ns-note input[type="date"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .ns-note textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .ns-note select {
        -webkit-appearance: pop-up-menu;
        -moz-appearance: pop-up-menu;
        appearance: pop-up-menu;
        background: #fff;
        border: 1px solid #d9e0e2
    }

    .ns-note .form-horizontal label>div:first-child,
    .ns-note .form-horizontal .label-group>div:first-child {
        width: 100%;
        text-align: left;
        margin-right: 0px
    }

    .ns-note .form-horizontal label>div:first-child,
    .ns-note .form-horizontal .label-group>div:first-child,
    .ns-note .form-horizontal .message {
        line-height: 1
    }

    .ns-note .form-horizontal label>div:first-child {
        font-weight: bold
    }

    .ns-note .form-horizontal label>div {
        width: auto;
        margin-right: 0px
    }

    .ns-note .form-horizontal .label-group label,
    .ns-note .form-horizontal .inline label,
    .ns-note .form-horizontal label>div:first-child,
    .ns-note .form-horizontal .label-group>div:first-child,
    .ns-note .form-horizontal .message {
        float: none
    }

    .ns-note .form-horizontal label input,
    .ns-note .form-horizontal label select,
    .ns-note .form-horizontal label textarea {
        float: none
    }

    .ns-note .form-horizontal label.short div {
        width: auto !important
    }

    .ns-note .form-horizontal label.short .error-message {
        margin-left: 0px
    }

    .ns-note .form-horizontal label.fl-left {
        float: none
    }

    .ns-note .form-horizontal .error-message {
        margin-left: 0px;
        padding-top: 5px;
        color: #ff0000
    }

    .ns-note .form-horizontal .message {
        margin-left: 0px
    }

    .ns-note .form-horizontal .labels label {
        display: block
    }

    .ns-note .form-horizontal .labels label select+span {
        line-height: 1
    }

    .ns-note input[type="text"],
    .ns-note input[type="password"],
    .ns-note input[type="email"],
    .ns-note input[type="number"],
    .ns-note input[type="search"],
    .ns-note input[type="date"] {
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -ms-border-radius: 2px;
        border: 1px solid #d9e0e2;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none
    }

    .ns-note textarea {
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -ms-border-radius: 2px;
        border: 1px solid #d9e0e2;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none
    }

    .ns-note input[type="text"]:focus,
    .ns-note input[type="password"]:focus,
    .ns-note input[type="email"]:focus,
    .ns-note input[type="number"]:focus,
    .ns-note input[type="search"]:focus,
    .ns-note input[type="date"]:focus {
        border: 1px solid #e1e5e7
    }

    .ns-note textarea:focus {
        border: 1px solid #e1e5e7
    }

    .ns-note input[type="text"],
    .ns-note input[type="password"],
    .ns-note input[type="email"],
    .ns-note input[type="number"],
    .ns-note input[type="search"],
    .ns-note input[type="date"] {
        outline: none
    }

    .ns-note textarea,
    .ns-note select {
        outline: none
    }
}

.ns-note .player {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px
}

.ns-note input[type="range"].custom {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #e1e5e7;
    border: 0;
    width: 390px;
    height: 3px
}

.ns-note input[type="range"].custom::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #000;
    text-align: center;
    width: 3px;
    height: 13px;
    cursor: pointer;
    box-sizing: border-box
}

.ns-note input[type="range"].custom::-webkit-slider-thumb:hover {
    background-color: #777
}

.ns-note input[type="range"].custom:active::-webkit-slider-thumb {
    background-color: #777
}

.ns-note input[type="range"].custom:focus {
    outline: none
}

.ns-note .bg-tp {
    background: transparent
}

.ns-note .txtbox.full {
    width: 100%
}

.ns-note .txtbox.comment {
    font-size: 11px
}

.ns-note textarea.comment {
    height: 30px;
    min-height: 30px !important;
    padding-top: 6px;
    resize: none
}

.ns-note .textarea-full {
    width: 100%
}

.ns-note input.textarea-full {
    width: 100%
}

.ns-note .input-width-half {
    width: 50%
}

.ns-note input.input-height-3 {
    height: 30px
}

.ns-note input.input-height-2 {
    height: 20px
}

.ns-note input.w50 {
    width: 50px
}

.ns-note .textarea-talk {
    height: 45px;
    min-height: 45px;
    resize: none
}

.ns-note .pwdInput {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.ns-note .pwdInput input {
    padding-right: 30px
}

.ns-note .pwdInput button.viewBtn {
    position: absolute;
    top: 7px;
    right: 7px;
    border: 0;
    background: 0
}

.ns-note .pwdInput button.viewBtn img {
    width: 16px
}

.ns-note .pwdInputWithConfirm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .pwdInputWithConfirm__inputForm {
    margin-right: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.ns-note .pwdInputWithConfirm__inputForm label {
    overflow: visible;
    width: 100%
}

.ns-note .pwdInputWithConfirm__eye {
    margin-top: 30px
}

.ns-note .pwdInputWithConfirm__eye button.viewBtn {
    border: 0;
    background: 0
}

.ns-note .pwdInputWithConfirm__eye button.viewBtn img {
    width: 16px
}

.ns-note .notice {
    width: 24px;
    height: 16px;
    display: block;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
    position: absolute;
    top: -33px;
    right: -8px
}

.ns-note .dropdown {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    z-index: 120
}

.ns-note .dropdown li .dropdown-link {
    display: block;
    padding: 5px 5px 3px 5px;
    width: 281px
}

.ns-note .dropdown:before {
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px);
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: #fff;
    position: absolute;
    right: 8px;
    top: -13px;
    background: #fff;
    box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.8)
}

.ns-note .dropdown.setting {
    padding: 8px;
    width: 200px;
    right: 0px;
    top: 7px;
    display: none;
    background-color: rgba(255, 255, 255, 0.98)
}

.ns-note .dropdown.setting li:last-child {
    border-bottom: none
}

.ns-note .dropdown.activity {
    width: 300px;
    right: 0px;
    top: 7px;
    display: none
}

.ns-note .dropdown.activity li>div {
    border-bottom: 1px solid #d9e0e2
}

.ns-note .dropdown.activity .dropdown-scroll {
    min-height: 70px;
    max-height: 35em;
    overflow-y: auto
}

@media only screen and (max-width: 480px) {
    .ns-note .dropdown.activity .dropdown-scroll {
        max-height: 32em
    }
}

.ns-note .dropdown.activity .radius-bottom-3 {
    border-radius: 0px 0px 3px 3px;
    -webkit-border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px
}

.ns-note .dropdown .dropdown-scroll .dropdown-link .dropdown-l {
    float: left;
    width: 34px;
    border: none
}

.ns-note .dropdown .dropdown-scroll .dropdown-link .dropdown-r {
    float: right;
    width: 236px;
    border: none
}

.ns-note .dropdown .dropdown-scroll .dropdown-link .dropdown-r .txt-date {
    color: #898D8C;
    font-size: 11px !important;
    margin-top: 1px
}

@media only screen and (max-width: 480px) {
    .ns-note .dropdown.activity {
        top: 6px;
        right: -5px
    }

    .ns-note .dropdown.activity:before {
        top: -13px;
        right: 13px
    }
}

.ns-note .or {
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    position: absolute;
    top: -22px;
    left: 50%;
    margin-left: -22px
}

.ns-note .or-skin {
    background-color: #fff;
    border-radius: 100px;
    border: 1px solid #d9e0e2;
    font-size: 11px;
    color: #bdc3c7
}

.ns-note .axis text {
    font-size: 11px
}

.ns-note .d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    border-radius: 2px
}

.ns-note .signup-with-oauth {
    margin-top: 20px
}

.ns-note .signup-with-oauth ul {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .signup-with-oauth ul li {
    width: 100%
}

.ns-note .signup-with-oauth ul li:nth-child(2) {
    margin-left: 10px
}

.ns-note .signup-with-oauth .btn-facebook .icon-small,
.ns-note .signup-with-oauth .c-button--facebook .icon-small,
.ns-note .signup-with-oauth .c-button--twitter .icon-small {
    left: 10px !important
}

.ns-note .post-image {
    width: 100%
}

.ns-note .post-image .upload-img {
    width: auto;
    height: auto;
    text-align: center;
    margin-top: 15px
}

.ns-note .post-image .upload-img img {
    width: auto;
    height: auto;
    max-width: 438px;
    max-height: 170px
}

.ns-note .upload {
    border: 2px dashed #e1e5e7;
    background-color: #fff;
    cursor: pointer
}

.ns-note .upload.magazine-cover {
    width: 180px;
    height: 240px;
    margin: 0 auto;
    padding: 85px 0 0 0;
    color: #bdc3c7
}

.ns-note .upload.magazine-cover:hover {
    border: 2px dashed #e1e5e7 !important
}

@media only screen and (min-width: 769px) {
    .ns-note .upload:hover {
        border: 2px dashed #bdc3c7 !important
    }
}

.ns-note .upload.file-drag-over {
    border: 2px dashed #41C9B4
}

.ns-note .change-image-nav {
    position: absolute;
    top: 10px;
    right: 10px
}

.ns-note .change-image-nav li {
    float: left;
    margin-left: 3px;
    cursor: pointer
}

.ns-note .corner-label {
    width: 0;
    height: 0;
    border: 26px solid transparent;
    border-top-color: #41C9B4;
    border-left-color: #41C9B4;
    position: absolute;
    left: 0;
    top: 0
}

.ns-note .corner-label-r {
    width: 0;
    height: 0;
    border: 26px solid transparent;
    border-top-color: #41C9B4;
    border-right-color: #41C9B4;
    position: absolute;
    right: 0;
    top: 0
}

.ns-note .transform-45 {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.ns-note .transform-minus45 {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.ns-note .txt-cover {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 11px;
    left: 0
}

.ns-note .txt-sell {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 11px;
    right: 5px
}

@media screen and (max-width: 767px) {
    .ns-note .post-image {
        width: 100%;
        height: auto
    }

    .ns-note .post-image .upload-img img {
        max-width: 200px
    }
}

.ns-note .note-edit .border-shadow {
    box-shadow: none;
    -webkit-box-shadow: none
}

.ns-note .talk-wrap {
    border: 2px solid #e1e5e7
}

.ns-note .talk-wrap .talk-balloon {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #e1e5e7;
    position: absolute
}

.ns-note .talk-wrap .talk-balloon:before {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    position: absolute
}

.ns-note .talk-wrap .talk-balloon.talk-balloon-posi {
    left: 4px;
    top: -20px
}

.ns-note .talk-wrap .talk-balloon.talk-balloon-posi:before {
    top: -7px;
    left: -10px
}

.ns-note .talk-wrap.is--limited {
    background-color: #f8f9fa
}

.ns-note .talk-wrap.is--limited .talk-balloon:before {
    border-bottom-color: #f8f9fa
}

.ns-note .talk-wrap.is--limited p {
    text-align: center;
    color: #898D8C !important
}

.ns-note .timeline-talk .talk-wrap .talk-img img {
    display: block;
    max-width: 100%;
    text-align: center;
    margin: 0 auto
}

.ns-note .timeline-talk .talk-wrap .talk-txt+.talk-img {
    margin-top: 10px
}

@media screen and (max-width: 767px) {
    .ns-note .timeline-talk .talk-wrap .talk-img img {
        width: 100%
    }
}

.ns-note .timeline-image {
    width: 100%
}

.ns-note .timeline-image img {
    width: 100%
}

@media screen and (max-width: 767px) {
    .ns-note .timeline-image {
        width: 100%
    }
}

.ns-note .timeline-image-list .items {
    float: left;
    width: 59px;
    height: 59px
}

.ns-note .timeline-image-list .items img {
    width: 100%;
    height: auto
}

.ns-note .image-data {
    width: 57px;
    height: 59px;
    background-color: #f8f9fa;
    text-align: center
}

@media screen and (max-width: 767px) {
    .ns-note .timeline-image-list {
        text-align: center
    }

    .ns-note .timeline-image-list .image-thumb:nth-child(6),
    .ns-note .timeline-image-list .image-thumb:nth-child(7),
    .ns-note .timeline-image-list .image-thumb:nth-child(8),
    .ns-note .timeline-image-list .image-thumb:nth-child(9) {
        display: none
    }

    .ns-note .timeline-image-list .items {
        width: 45px;
        height: 45px
    }

    .ns-note .image-data {
        width: 45px;
        height: 45px
    }

    .ns-note .image-data .space-top-1 {
        margin-top: 3px
    }
}

.ns-note .arrow-down {
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #777;
    margin-top: 2px
}

.ns-note .arrow-right {
    width: 0;
    height: 0;
    float: left;
    border: 6px solid transparent;
    border-left-color: #222;
    margin-top: -1px
}

.ns-note .arrow-right:hover {
    border-left-color: #bdc3c7
}

.ns-note .arrow-right::before {
    content: '';
    position: relative;
    top: -6px;
    left: -8px;
    width: 0;
    height: 0;
    float: left;
    border: 6px solid transparent;
    border-left-color: #fff
}

.ns-note .arrow-left {
    width: 0;
    height: 0;
    float: right;
    border: 6px solid transparent;
    border-right-color: #222;
    margin-top: -1px
}

.ns-note .arrow-left:hover {
    border-right-color: #bdc3c7
}

.ns-note .arrow-left::before {
    content: '';
    position: relative;
    top: -6px;
    right: -8px;
    width: 0;
    height: 0;
    float: right;
    border: 6px solid transparent;
    border-right-color: #fff
}

.ns-note .arrow-l:before {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    left: 0px;
    width: 10px;
    height: 10px;
    background: #000
}

.ns-note .arrow-l:after {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    left: 4px;
    width: 10px;
    height: 10px;
    background: #fff
}

.ns-note .arrow-wrap {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px
}

@media only screen and (max-width: 480px) {
    .ns-note .arrow-wrap {
        top: -3px
    }
}

.ns-note .salesmanage.arrow-l {
    position: absolute;
    top: 10px;
    left: 10px
}

.ns-note .mod-modal .scroll-wrap {
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-modal .scroll-wrap {
        max-height: 360px
    }
}

.ns-note .like-list li {
    border-bottom: 1px solid #d9e0e2;
    padding: 10px
}

.ns-note .like-list li .follow-img {
    float: left;
    width: 40px;
    margin-right: 10px
}

.ns-note .like-list li .follow-img__badge {
    color: #eca726;
    width: 24px;
    float: left;
    margin-right: 8px
}

.ns-note .like-list li .follow-profile {
    float: left;
    width: 200px
}

.ns-note .like-list li .follow-profile span {
    display: block
}

.ns-note .like-list li .follow-profile__badge {
    position: relative;
    top: 3px
}

.ns-note .like-list li .follow-btn {
    float: right;
    width: 80px;
    margin-top: 4px
}

.ns-note .like-list li:last-child {
    border-bottom: none
}

.ns-note .like-list__other {
    padding: 16px;
    font-size: 14px;
    color: #898D8C
}

@media screen and (max-width: 767px) {
    .ns-note .like-list li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .ns-note .like-list li .follow-img {
        float: none
    }

    .ns-note .like-list li .follow-profile {
        float: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-right: 10px
    }
}

.ns-note .video-wrap {
    position: relative;
    padding-bottom: 50%;
    padding-top: 69px;
    overflow: hidden
}

.ns-note .video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ns-note .vimeo {
    width: 960px;
    height: 540px;
    margin: 0 0 0 -290px
}

.ns-note .label-list {
    position: absolute;
    top: 20px;
    right: 20px
}

.ns-note .label-list .label-item {
    color: #fff;
    width: 44px;
    height: 20px;
    text-align: center;
    line-height: 21px;
    font-size: 11px;
    border-radius: 2px;
    float: right;
    margin-left: 5px
}

@media screen and (max-width: 767px) {
    .ns-note .label-list {
        position: absolute;
        top: 10px;
        right: 10px
    }

    .ns-note .label-list .label-item {
        color: #fff;
        width: 34px;
        height: 15px;
        text-align: center;
        line-height: 16px;
        font-size: 10px;
        border-radius: 2px;
        float: right;
        margin-left: 5px
    }
}

.ns-note .note-edit {
    width: 580px;
    background: #fff;
    margin-left: -90px
}

@media only screen and (max-width: 480px) {
    .ns-note .note-edit {
        width: auto;
        margin-left: 0
    }
}

.ns-note .soundnote-edit {
    width: 580px;
    background: #fff;
    margin-left: -90px
}

@media only screen and (max-width: 480px) {
    .ns-note .soundnote-edit {
        width: auto;
        margin-left: 0
    }
}

.ns-note .movienote-edit {
    width: 580px;
    background: #fff;
    margin-left: -90px
}

@media only screen and (max-width: 480px) {
    .ns-note .movienote-edit {
        width: auto;
        margin-left: 0
    }
}

.ns-note .activation {
    width: 100%;
    line-height: 1;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2)
}

.ns-note .activation a:hover {
    text-decoration: underline
}

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

@media only screen and (max-width: 480px) {
    .ns-note .activation.activation--detail {
        margin-top: 0
    }
}

.ns-note .activation-bar-show .activation-bar-show__link>a {
    color: #fff;
    text-decoration: underline
}

.ns-note .activation-bar-show .activation-bar-show__link>a:hover {
    text-decoration: none
}

.ns-note .header-info {
    width: 100%;
    line-height: 1;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    position: relative
}

.ns-note .header-info .icon-10-delete {
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -5px
}

@media only screen and (max-width: 480px) {
    .ns-note .header-info {
        text-align: left;
        font-size: 12px;
        line-height: 1.4;
        padding: 8px 25px 8px 10px
    }

    .ns-note .header-info .txt-info {
        font-weight: normal
    }

    .ns-note .header-info .icon-10-delete {
        right: 10px;
        top: 11px;
        margin-top: 0
    }
}

.ns-note .separator_pay_free {
    -webkit-tap-highlight-color: transparent
}

.ns-note .paywall-line-next {
    width: 620px;
    padding: 6px !important;
    margin-bottom: 1.9rem;
    background: #fff;
    color: #ccc;
    border: 2px dashed #e1e5e7;
    -webkit-tap-highlight-color: transparent
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .paywall-line-next {
        width: 100%
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .paywall-line-next {
        width: 100%
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .paywall-line-next {
        cursor: pointer
    }

    .ns-note .paywall-line-next:hover {
        border: 2px dashed #bdc3c7
    }

    .ns-note .paywall-line-next:hover span {
        color: #222222 !important
    }
}

.ns-note .paywall-line-next .txt-medium {
    margin-top: 2px;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, Helvetica, sans-serif !important
}

.ns-note .note-paypart p {
    cursor: pointer
}

.ns-note .note .note-body .paywall-line {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 8px !important;
    background: #222222;
    color: #fff
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .note .note-body .paywall-line {
        width: 100%
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .note .note-body .paywall-line {
        width: 100%
    }
}

.ns-note .note .note-body .paywall-line__text {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-size: 14px;
    line-height: 1
}

@media only screen and (max-width: 480px) {
    .ns-note .note .note-body .paywall-line__text {
        font-size: 12px
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .note .note-body .paywall-line__text {
        font-size: 10px
    }
}

.ns-note .note .note-body .paywall-line__lineReset {
    margin-left: 8px;
    padding: 4px;
    color: #ffffff
}

@media only screen and (min-width: 769px) {
    .ns-note .note .note-body .paywall-line__lineReset {
        cursor: pointer
    }

    .ns-note .note .note-body .paywall-line__lineReset:hover {
        opacity: .8
    }
}

.ns-note .note-wrapper {
    margin-bottom: 72px
}

@media only screen and (max-width: 480px) {
    .ns-note .note-wrapper {
        margin-bottom: 56px;
        margin-top: 20px
    }
}

.ns-note .note .talknote-viewer .talk-img img {
    display: block;
    max-width: 580px;
    text-align: center;
    margin: 0 auto;
    cursor: pointer
}

.ns-note .note .talknote-viewer .note-name+.talk-img {
    margin-top: 15px
}

.ns-note .note .talknote-viewer .note-name {
    margin-top: 0
}

.ns-note .note .talknote-viewer .note-name p {
    font-size: 13px !important;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif !important
}

@media only screen and (max-width: 480px) {
    .ns-note .note .talknote-viewer .note-name p {
        font-size: 15px !important
    }
}

@media screen and (max-width: 767px) {
    .ns-note .note .talknote-viewer .talk-img img {
        max-width: 100%
    }

    .ns-note .note .talknote-viewer .note-name+.talk-img {
        margin-top: 10px
    }
}

.ns-note .ph-th {
    padding: 8px 10px 6px 10px
}

.ns-note .mod-author-date .eyecatch {
    width: 40px;
    height: 40px
}

.ns-note .box,
.ns-note .box-light,
.ns-note .box-narrow,
.ns-note .units-timeline,
.ns-note .mod-magazine-cover,
.ns-note .mag-list .mag-list__cover-img img,
.ns-note .tl-limited,
.ns-note .mod-mag-info,
.ns-note .mod-mag-table-of-contents>ul>li,
.ns-note .register-container {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 0px
}

.ns-note .mag-list {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none
}

.ns-note #modal-fancybox-inline,
.ns-note #modal-fancybox-inline-banktransferfee {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px
}

.ns-note .modal-window {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 1px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 1px
}

.ns-note .bd-full,
.ns-note .mod-modal-mag.mag-sort ul li.ui-sortable-helper,
.ns-note #modal-fancybox-inline,
.ns-note #modal-fancybox-inline-banktransferfee,
.ns-note .mod-mag-included,
.ns-note .advanced-setting,
.ns-note .advanced-setting .advanced-setting__mag,
.ns-note .user-select .user-select__selectedArea,
.ns-note .user-select .user-select__dropdown {
    border: 1px solid #e1e5e7
}

.ns-note .modal-window__body--bd,
.ns-note .modal-window__border-box {
    border: 2px solid #e1e5e7
}

.ns-note .signup-with-oauth,
.ns-note .bd-t,
.ns-note .mod-form-note .action-area,
.ns-note .mod-index-of-notes,
.ns-note .mod-salesmanage .table thead th.type-heading--th:before,
.ns-note .mod-salesmanage .table thead td.type-heading--th:before,
.ns-note .modal-window__table,
.ns-note .modal-window__foot,
.ns-note .modal-window__foot--close,
.ns-note .pager,
.ns-note .support-message-confirm,
.ns-note .register__login,
.ns-note .advanced-setting .advanced-setting__open,
.ns-note .premium .premium__featureList,
.ns-note .salesDetail-settings,
.ns-note .settings .settings__nav,
.ns-note .mag-salesList,
.ns-note .mag-salesList .mag-salesList__head {
    border-top: 1px solid #e1e5e7
}

.ns-note .mod-modal-mag.mag-sort ul li .sort-nav,
.ns-note .pager__prev a {
    border-right: 1px solid #e1e5e7
}

.ns-note .bd-b,
.ns-note .follow-list .users,
.ns-note .mod-modal-mag-list .add-mag-list li.mags,
.ns-note .mod-modal-mag ul li,
.ns-note .mod-modal-mag .title,
.ns-note .tl-limited,
.ns-note .mod-mag-info,
.ns-note .mod-mag-recommend ul li,
.ns-note .modal-window__head--title-grey,
.ns-note .modal-window__head--title,
.ns-note .pager,
.ns-note .premium .premium__featureList>li,
.ns-note .settings .settings__body--magMembers .settings__navBar,
.ns-note .userList>li,
.ns-note .userList--select>li,
.ns-note .purchaseList>ul>li {
    border-bottom: 1px solid #e1e5e7
}

.ns-note .border-radius-top {
    -webkit-border-top-left-radius: 3px !important;
    -webkit-border-top-right-radius: 3px !important;
    -webkit-border-bottom-left-radius: 0 !important;
    -webkit-border-bottom-right-radius: 0 !important;
    -moz-border-top-left-radius: 3px !important;
    -moz-border-top-right-radius: 3px !important;
    -moz-border-bottom-left-radius: 0 !important;
    -moz-border-bottom-right-radius: 0 !important;
    -ms-border-top-left-radius: 3px !important;
    -ms-border-top-right-radius: 3px !important;
    -ms-border-bottom-left-radius: 0 !important;
    -ms-border-bottom-right-radius: 0 !important;
    -o-border-top-left-radius: 3px !important;
    -o-border-top-right-radius: 3px !important;
    -o-border-bottom-left-radius: 0 !important;
    -o-border-bottom-right-radius: 0 !important;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.ns-note .border-radius-bottom {
    -webkit-border-top-left-radius: 0 !important;
    -webkit-border-top-right-radius: 0 !important;
    -webkit-border-bottom-left-radius: 3px !important;
    -webkit-border-bottom-right-radius: 3px !important;
    -moz-border-top-left-radius: 0 !important;
    -moz-border-top-right-radius: 0 !important;
    -moz-border-bottom-left-radius: 3px !important;
    -moz-border-bottom-right-radius: 3px !important;
    -ms-border-top-left-radius: 0 !important;
    -ms-border-top-right-radius: 0 !important;
    -ms-border-bottom-left-radius: 3px !important;
    -ms-border-bottom-right-radius: 3px !important;
    -o-border-top-left-radius: 0 !important;
    -o-border-top-right-radius: 0 !important;
    -o-border-bottom-left-radius: 3px !important;
    -o-border-bottom-right-radius: 3px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 3px !important
}

.ns-note .border-radius-none {
    border-radius: 0 !important
}

.ns-note .bg-ulgrey,
.ns-note .mod-form-note .action-area,
.ns-note .mod-form-note .up-images,
.ns-note .modal-window__head--title-grey,
.ns-note .modal-window__body--grey,
.ns-note .modal-window__foot,
.ns-note .modal-window__foot--close,
.ns-note .modal-window__total-amount,
.ns-note .modal-window__sns,
.ns-note .support-note,
.ns-note .get-urlname__input,
.ns-note .advanced-setting,
.ns-note .subscription-payment,
.ns-note .mag-salesList .mag-salesList__head {
    background-color: #f8f9fa
}

.ns-note .units-timeline .inner-timeline .note-description,
.ns-note .mod-talknote .wrap .txt,
.ns-note .mod-txtnote .txt {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.01em
}

.ns-note .mod-recommend .title-wrap .title,
.ns-note .mod-mag-included .area-data .txt,
.ns-note .mod-mag-included .area-data .name {
    font-weight: bold
}

.ns-note .get-urlname__input>p:first-child {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}

.ns-note .txt-eng {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}

.ns-note .footer ul {
    text-align: center
}

.ns-note .txt-supplementary {
    font-size: 11px;
    color: #777
}

.ns-note .txt-required {
    font-size: 11px;
    color: #ff0000;
    margin-left: 5px
}

.ns-note .header-new .header-new__inner,
.ns-note .header,
.ns-note .mod-form-note,
.ns-note .mod-form-note .action-area,
.ns-note .mod-image-set .thumb-list,
.ns-note .mod-author-date,
.ns-note .mod-note-actions,
.ns-note .mod-note-actions.is--limited,
.ns-note .mod-social-btns,
.ns-note .mod-note-page-actions .inner,
.ns-note .follow-list .users,
.ns-note .mod-recommend .title-wrap,
.ns-note .mod-recommend ul,
.ns-note .mod-recommend ul li,
.ns-note .period-nav,
.ns-note .stats-count,
.ns-note .mod-modal .navi-modal,
.ns-note .mod-credit .form-credit,
.ns-note .mod-credit .form-credit .form-credit-first,
.ns-note .mod-credit .form-credit .form-credit-second,
.ns-note .mag-list,
.ns-note .mod-modal-mag ul li,
.ns-note .mod-modal-mag.mag-sort ul li,
.ns-note .mod-mag-recommend ul li,
.ns-note .mod-mag-table-of-contents>ul>li .inner,
.ns-note .modal-window__body,
.ns-note .modal-window__body--paddingWide,
.ns-note .modal-window__mag-wrap,
.ns-note .modal-window__mag-data,
.ns-note .modal-window__foot,
.ns-note .modal-window__foot--close,
.ns-note .note-info,
.ns-note .note-info__mag,
.ns-note .thx-message__body,
.ns-note .hashtag-list,
.ns-note .app-install-promotion__body,
.ns-note .app-install-post-note,
.ns-note .tdn-units .tdn-mod-count,
.ns-note .tdn-tabmenu,
.ns-note .mag-top__data,
.ns-note .content-top,
.ns-note .c-gridGroup {
    *zoom: 1
}

.ns-note .header-new .header-new__inner:after,
.ns-note .header:after,
.ns-note .mod-form-note:after,
.ns-note .mod-form-note .action-area:after,
.ns-note .mod-image-set .thumb-list:after,
.ns-note .mod-author-date:after,
.ns-note .mod-note-actions:after,
.ns-note .mod-note-actions.is--limited:after,
.ns-note .mod-social-btns:after,
.ns-note .mod-note-page-actions .inner:after,
.ns-note .follow-list .users:after,
.ns-note .mod-recommend .title-wrap:after,
.ns-note .mod-recommend ul:after,
.ns-note .mod-recommend ul li:after,
.ns-note .period-nav:after,
.ns-note .stats-count:after,
.ns-note .mod-modal .navi-modal:after,
.ns-note .mod-credit .form-credit:after,
.ns-note .mod-credit .form-credit .form-credit-first:after,
.ns-note .mod-credit .form-credit .form-credit-second:after,
.ns-note .mag-list:after,
.ns-note .mod-modal-mag ul li:after,
.ns-note .mod-modal-mag.mag-sort ul li:after,
.ns-note .mod-mag-recommend ul li:after,
.ns-note .mod-mag-table-of-contents>ul>li .inner:after,
.ns-note .modal-window__body:after,
.ns-note .modal-window__body--paddingWide:after,
.ns-note .modal-window__mag-wrap:after,
.ns-note .modal-window__mag-data:after,
.ns-note .modal-window__foot:after,
.ns-note .modal-window__foot--close:after,
.ns-note .note-info:after,
.ns-note .note-info__mag:after,
.ns-note .thx-message__body:after,
.ns-note .hashtag-list:after,
.ns-note .app-install-promotion__body:after,
.ns-note .app-install-post-note:after,
.ns-note .tdn-units .tdn-mod-count:after,
.ns-note .tdn-tabmenu:after,
.ns-note .mag-top__data:after,
.ns-note .content-top:after,
.ns-note .c-gridGroup:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: "."
}

.ns-note .header-new .tab-menu,
.ns-note .mod-operation-page-head .tab-menu,
.ns-note .p-settings .tab-menu,
.ns-note .mod-note-hashtags,
.ns-note .mod-like-count,
.ns-note .mod-share-actions,
.ns-note .banner-social-apps>ul,
.ns-note .footer ul,
.ns-note .mod-magazine-cover .data-wrap .area-data .mag-author,
.ns-note .mod-modal-mag-list .add-mag-list li.mags,
.ns-note .mod-mag-table-of-contents>ul>li .inner .info,
.ns-note .get-urlname__input,
.ns-note .hashtag-recommend-group>ul {
    font-size: 0
}

.ns-note .header-new .tab-menu .tabs,
.ns-note .mod-operation-page-head .tab-menu .tabs,
.ns-note .p-settings .tab-menu .tabs,
.ns-note .mod-note-hashtags .hashtags,
.ns-note .mod-like-count .eyecatch,
.ns-note .mod-like-count .count,
.ns-note .mod-share-actions .icon-btn,
.ns-note .mod-share-actions .count,
.ns-note .tdn-units .tdn-mod-count li,
.ns-note .tdn-sortmenu li {
    font-size: 13px;
    letter-spacing: 0em;
    display: inline-block !important;
    vertical-align: middle;
    line-height: 1
}

.ns-note .banner-social-apps>ul>li,
.ns-note .footer ul li,
.ns-note .mod-magazine-cover .data-wrap .area-data .mag-author .user-eyecatch,
.ns-note .mod-magazine-cover .data-wrap .area-data .mag-author .user-name,
.ns-note .mod-modal-mag-list .add-mag-list li.mags .mag-eyecatch,
.ns-note .mod-modal-mag-list .add-mag-list li.mags .mag-title,
.ns-note .mod-mag-table-of-contents>ul>li .inner .info .author,
.ns-note .mod-mag-table-of-contents>ul>li .inner .info .date,
.ns-note .mod-mag-table-of-contents .icn-talk,
.ns-note .mod-mag-table-of-contents .icn-image,
.ns-note .mod-mag-table-of-contents .icn-text,
.ns-note .mod-mag-table-of-contents .icn-sound,
.ns-note .mod-mag-table-of-contents .icn-movie,
.ns-note .ltd-tl-actions,
.ns-note .ltd-tl-actions__item,
.ns-note .ltd-tl-actions__item>span,
.ns-note .mod-like-btn,
.ns-note .support-checkbox-btn>input,
.ns-note .support-checkbox-btn>label,
.ns-note .support-note__p,
.ns-note .support-note__button,
.ns-note .get-urlname__input>p,
.ns-note .hashtag-recommend-group>ul>li {
    display: inline-block !important;
    letter-spacing: normal;
    vertical-align: middle
}

.ns-note .header-new .header-new__inner,
.ns-note .header {
    margin-left: auto;
    margin-right: auto
}

.ns-note .header .account-menu .icn {
    background-color: #444444;
    border-radius: 50% !important
}

.ns-note .stats-count .counts .num,
.ns-note .powerdby-note>p,
.ns-note .sns-button-twitter-balloon,
.ns-note .p-action__count {
    font-family: Helvetica, Arial, sans-serif
}

.ns-note img.fit {
    width: 100%;
    height: auto
}

.ns-note img.limit {
    max-width: 100%;
    height: auto
}

.ns-note .tooltip-inner {
    min-width: 4em
}

.ns-note .space-1 {
    margin: 10px
}

.ns-note .space-t-h {
    margin-top: 5px
}

.ns-note .space-t-1 {
    margin-top: 10px
}

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

.ns-note .space-t-2 {
    margin-top: 20px
}

.ns-note .space-t-3 {
    margin-top: 30px
}

.ns-note .space-t-3h {
    margin-top: 35px
}

.ns-note .space-t-4 {
    margin-top: 40px
}

.ns-note .space-t-5 {
    margin-top: 50px
}

.ns-note .space-t-minus-2 {
    margin-top: -20px
}

.ns-note .space-l-h,
.ns-note .mod-share-actions .count {
    margin-left: 5px
}

.ns-note .space-l-1 {
    margin-left: 10px
}

.ns-note .space-l-1h {
    margin-left: 15px
}

.ns-note .space-l-5 {
    margin-left: 50px
}

.ns-note .space-l-auto {
    margin-left: auto
}

.ns-note .space-r-h,
.ns-note .mod-like-count .eyecatch {
    margin-right: 5px
}

.ns-note .space-r-7px {
    margin-right: 7px
}

.ns-note .space-r-1 {
    margin-right: 10px
}

.ns-note .space-r-1h {
    margin-right: 15px
}

.ns-note .space-r-2 {
    margin-right: 20px
}

.ns-note .space-b-h {
    margin-bottom: 5px
}

.ns-note .space-b-1 {
    margin-bottom: 10px
}

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

.ns-note .space-b-2 {
    margin-bottom: 20px
}

.ns-note .space-b-2h {
    margin-bottom: 25px
}

.ns-note .space-b-3 {
    margin-bottom: 30px
}

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

.ns-note .space-b-4 {
    margin-bottom: 40px
}

.ns-note .space-b-4h {
    margin-bottom: 45px
}

.ns-note .space-lrb-1 {
    margin: 0 10px 10px 10px
}

.ns-note .space-l-pc10-sp5 {
    margin-left: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .space-l-pc10-sp5 {
        margin-left: 5px
    }
}

.ns-note .space-t-tlEditText {
    display: inline-block;
    margin-top: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .space-t-tlEditText {
        margin-top: 10px
    }
}

.ns-note .space--under-header {
    margin-top: 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .space--under-header {
        margin-top: 10px
    }
}

.ns-note .container,
.ns-note .mod-mag-table-of-contents>ul,
.ns-note .hashtag-list {
    width: 580px;
    margin-left: auto;
    margin-right: auto
}

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

    .ns-note .container.mag-top-container,
    .ns-note .mod-mag-table-of-contents>ul.mag-top-container,
    .ns-note .mag-top-container.hashtag-list {
        width: 100%;
        margin-top: -10px
    }
}

.ns-note .container.mag-top-container .button-group,
.ns-note .mod-mag-table-of-contents>ul.mag-top-container .button-group,
.ns-note .mag-top-container.hashtag-list .button-group {
    height: 30px
}

.ns-note .note-container {
    width: 620px;
    margin-left: auto;
    margin-right: auto
}

.ns-note .unit {
    position: relative
}

.ns-note .container-full {
    width: 100%
}

.ns-note .centering {
    margin-left: auto;
    margin-right: auto
}

.ns-note .container-narrow {
    width: 360px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .note-container {
        width: 90%
    }
}

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

    .ns-note .container,
    .ns-note .mod-mag-table-of-contents>ul,
    .ns-note .hashtag-list {
        width: 94%
    }

    .ns-note .container-full {
        width: 100%
    }

    .ns-note .container-narrow {
        width: 94%;
        max-width: 360px
    }

    .ns-note .note-container {
        width: 90%
    }
}

.ns-note .box {
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: #FFF
}

@media only screen and (max-width: 480px) {
    .ns-note .box {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px
    }
}

.ns-note .box-light {
    position: relative;
    background-color: #FFF
}

.ns-note .box-narrow {
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: #FFF;
    width: 360px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 480px) {
    .ns-note .box-narrow {
        width: 94%;
        max-width: 360px;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 20px;
        padding-left: 10px
    }
}

.ns-note .button-group,
.ns-note .c-button.c-button--user .c-button__in-user,
.ns-note .horizontal-box,
.ns-note .mag-top__usersList,
.ns-note .settings .settings__body--magMembers .settings__navBar,
.ns-note .settings .settings__body--magMembers .settings__navBar>li:last-child,
.ns-note .mag-dataList dl,
.ns-note .mag-salesList>ul>li>dl,
.ns-note .linkList,
.ns-note .userList>li,
.ns-note .userList--select>li,
.ns-note .userList>li .userList__rate,
.ns-note .userList--select>li .userList__rate,
.ns-note .userList--select>li>a,
.ns-note .user-select .user-select__selectedArea,
.ns-note .to-list,
.ns-note .actions-right,
.ns-note .link__circleIcon>a,
.ns-note .purchaseList .purchaseList__head,
.ns-note .purchaseList .purchaseList__title {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .horizontal-box.horizontal-box--alignStart,
.ns-note .mag-dataList>li:first-child>dl,
.ns-note .mag-dataList dl,
.ns-note .to-list,
.ns-note .purchaseList .purchaseList__title {
    -webkit-box-align: flex-start;
    -ms-box-align: flex-start;
    -o-box-align: flex-start;
    box-align: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.ns-note .horizontal-box.horizontal-box--justifyCenter,
.ns-note .linkList {
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .horizontal-box.horizontal-box--wrap,
.ns-note .user-select .user-select__selectedArea,
.ns-note .to-list {
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap
}

.ns-note .txt-xxxxl {
    font-size: 30px
}

.ns-note .txt-xxxl {
    font-size: 24px
}

.ns-note .txt-xxl {
    font-size: 20px
}

.ns-note .txt-xl,
.ns-note .mod-note-user-profile .area-data .name {
    font-size: 17px
}

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

    .ns-note .txt-xl.sp,
    .ns-note .mod-note-user-profile .area-data .sp.name {
        font-size: 14px
    }
}

.ns-note .txt-l {
    font-size: 15px
}

.ns-note .txt-m {
    font-size: 13px
}

.ns-note .txt-s {
    font-size: 12px
}

.ns-note .txt-xs,
.ns-note .empty-area>p {
    font-size: 11px
}

.ns-note .txt-xxs {
    font-size: 10px
}

.ns-note .link-green,
.ns-note .link-green--underline,
.ns-note .modal-window__head--payment .head-link,
.ns-note .advanced-setting .advanced-setting__mag-list .advanced-setting__new-mag,
.ns-note .userList>li .userList__invite,
.ns-note .userList--select>li .userList__invite,
.ns-note .userList>li .userList__link,
.ns-note .userList--select>li .userList__link,
.ns-note .userList__addMember,
.ns-note .userList__footLink {
    color: #249f80 !important;
    text-decoration: none
}

.ns-note .link-green:hover,
.ns-note .link-green--underline:hover,
.ns-note .modal-window__head--payment .head-link:hover,
.ns-note .advanced-setting .advanced-setting__mag-list .advanced-setting__new-mag:hover,
.ns-note .userList>li .userList__invite:hover,
.ns-note .userList--select>li .userList__invite:hover,
.ns-note .userList>li .userList__link:hover,
.ns-note .userList--select>li .userList__link:hover,
.ns-note .userList__addMember:hover,
.ns-note .userList__footLink:hover {
    text-decoration: underline
}

.ns-note .link-green--underline {
    text-decoration: underline
}

.ns-note .link-green--underline:hover {
    text-decoration: none
}

.ns-note .link-draft {
    font-size: 14px;
    color: #41C9B4 !important;
    text-decoration: none !important
}

.ns-note .link-draft:hover {
    text-decoration: underline !important
}

.ns-note .link-white {
    color: #fff !important
}

.ns-note .link-white.underline {
    text-decoration: underline
}

.ns-note .link-white.underline:hover {
    text-decoration: none !important
}

.ns-note .link-primary {
    display: inline-block;
    font-size: 14px;
    color: #41C9B4 !important;
    padding: 0.15em;
    border-bottom: 1px solid #41C9B4;
    text-decoration: none !important
}

.ns-note .link-primary:hover {
    border-bottom: 1px solid transparent
}

.ns-note .link-grey {
    color: #898D8C !important;
    text-decoration: none
}

.ns-note .link-grey:hover {
    text-decoration: underline
}

.ns-note .hover-grey:hover {
    color: #898D8C !important
}

.ns-note .txt-grey,
.ns-note .mod-note-hashtags .hashtags,
.ns-note .mod-note-hashtags .hashtags a,
.ns-note .note-info__other,
.ns-note .pager__label {
    color: #898D8C
}

.ns-note .txt-grey a,
.ns-note .mod-note-hashtags .hashtags a,
.ns-note .note-info__other a,
.ns-note .pager__label a {
    color: #898D8C
}

.ns-note .txt-grey a:hover,
.ns-note .mod-note-hashtags .hashtags a:hover,
.ns-note .note-info__other a:hover,
.ns-note .pager__label a:hover {
    color: #bdc3c7
}

.ns-note .txt-dGrey {
    color: #777
}

.ns-note .break-word {
    word-break: break-all;
    word-wrap: break-word
}

.ns-note .txt-lgrey {
    color: #ccc
}

.ns-note .char-limit,
.ns-note .userList>li .userList__name>a,
.ns-note .userList--select>li .userList__name>a,
.ns-note .userList>li .userList__name p,
.ns-note .userList--select>li .userList__name p,
.ns-note .userList>li .userList__name>span,
.ns-note .userList--select>li .userList__name>span,
.ns-note .userList--select .userList__name>p,
.ns-note .userList--select .userList__name>span,
.ns-note .purchaseList .purchaseList__title>p:first-child,
.ns-note .purchaseList .purchaseList__user {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ns-note .display-onlyPc {
    display: block
}

@media only screen and (max-width: 480px) {
    .ns-note .display-onlyPc {
        display: none
    }
}

.ns-note .display-onlySp {
    display: none
}

@media only screen and (max-width: 480px) {
    .ns-note .display-onlySp {
        display: block
    }
}

.ns-note .header-bg {
    height: 88px
}

.ns-note .header-bg.header-bg--detail {
    height: 48px
}

@media only screen and (max-width: 700px) {
    .ns-note .header-bg {
        display: none;
        height: 48px
    }
}

.ns-note .header-new {
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 120
}

@media only screen and (max-width: 700px) {
    .ns-note .header-new {
        margin-bottom: 0px;
        height: 48px;
        border-bottom: 1px solid #e1e5e7
    }
}

.ns-note .header-new.header-new--detail,
.ns-note .header-new.header-new--edit {
    height: 48px
}

.ns-note .header-new .header-new__inner {
    height: 48px;
    position: relative;
    padding: 0 20px;
    background-color: #ffffff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2)
}

@media only screen and (max-width: 700px) {
    .ns-note .header-new .header-new__inner {
        padding: 0 8px
    }
}

.ns-note .header-new .header-new__inner.header-new--innerDetail {
    border-bottom: none;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2)
}

.ns-note .header-new__actionItem {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    letter-spacing: normal;
    vertical-align: middle;
    -webkit-transition: none;
    transition: none
}

.ns-note .header-new__actionItem.ng-enter,
.ns-note .header-new__actionItem.ng-leave,
.ns-note .header-new__actionItem.ng-enter-active,
.ns-note .header-new__actionItem.ng-leave-active {
    -webkit-transition: none;
    transition: none
}

.ns-note .header-new__actionItem:first-child {
    margin-left: 0
}

.ns-note .header-new__actionItem--draft button {
    width: 98px
}

.ns-note .header-new__actionItem--draft button.ng-enter,
.ns-note .header-new__actionItem--draft button.ng-leave,
.ns-note .header-new__actionItem--draft button.ng-enter-active,
.ns-note .header-new__actionItem--draft button.ng-leave-active {
    -webkit-transition: none;
    transition: none
}

.ns-note .header-new__actionIcon {
    width: 30px;
    height: 30px;
    padding: 3px;
    color: #A8ABB1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .header-new__actionIcon:hover {
        color: #787C7B
    }
}

.ns-note .header-new .previewButtonArea {
    position: absolute !important;
    top: 8px;
    left: 20px
}

.ns-note .header-new .logo {
    width: 70px;
    height: 20px;
    margin-top: 13px;
    position: absolute;
    left: 50%;
    margin-left: -32px;
    background: url(/upload/HtmlPart/logo.png) no-repeat center;
    background-size: cover;
    /*background-size: 64px 20px*/
}

@media only screen and (max-width: 480px) {
    .ns-note .header-new .logo {
        left: 8px;
        margin-left: 0
    }
}

.ns-note .header-new .logo a {
    display: block;
    text-indent: -9999px;
    width: 64px;
    height: 20px
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .header-new .logo {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/logo_retina-9c22c0bbe0a86ce2f343288c049fd7335efbccc3876de4133b14dce0a7990d0d.png) no-repeat center;
        background-size: 64px 20px
    }
}

.ns-note .header-new .tab-menu {
    position: absolute;
    left: 110px;
    top: 0px
}

.ns-note .header-new .tab-menu .tabs {
    font-weight: bold;
    text-align: center;
    margin-right: 10px
}

.ns-note .header-new .tab-menu .tabs a {
    font-size: 12px;
    display: block;
    height: 48px;
    padding: 18px 4px 0 4px
}

.ns-note .header-new .tab-menu .tabs a.is-active {
    border-bottom: 2px solid #222222
}

.ns-note .header-new .tab-menu .tabs a:hover {
    border-bottom: 2px solid #222222;
    color: #222222
}

@media only screen and (max-width: 700px) {
    .ns-note .header-new .tab-menu {
        display: none
    }
}

.ns-note .header-new .logo--newyear {
    float: left;
    width: 64px;
    height: 20px;
    margin-top: 15px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/images/logo_newyear_2015.png) no-repeat center;
    background-size: 64px 20px
}

.ns-note .header-new .logo--newyear a {
    display: block;
    text-indent: -9999px;
    width: 64px;
    height: 20px
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .header-new .logo--newyear {
        background: url(https://d2l930y2yx77uc.cloudfront.net/images/logo_newyear_2015_retina.png) no-repeat center;
        background-size: 64px 20px
    }
}

.ns-note .header-new .account-menu {
    float: right;
    padding-top: 8px
}

.ns-note .header-new .account-menu .icn {
    width: 30px;
    height: 30px;
    margin-left: 15px
}

.ns-note .header-new .account-menu .icn--random {
    margin-left: 15px
}

.ns-note .header-new .account-menu .icn--setting,
.ns-note .header-new .account-menu .icn--bell {
    margin-left: 8px
}

.ns-note .header-new .account-menu .icn--eyecatch {
    margin-left: 17px
}

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

    .ns-note .header-new .account-menu .icn--random,
    .ns-note .header-new .account-menu .icn--setting,
    .ns-note .header-new .account-menu .icn--eyecatch {
        display: none !important
    }
}

.ns-note .header-new .search-open-btn {
    float: right;
    padding-top: 8px;
    cursor: pointer
}

.ns-note .header-new .btn-login {
    float: right;
    margin-top: 8px;
    margin-left: 10px
}

@media only screen and (max-width: 700px) {
    .ns-note .header-new .btn-login {
        float: left;
        width: 100%;
        margin-left: 0
    }

    .ns-note .header-new .btn-login li:first-child {
        display: none !important
    }

    .ns-note .header-new .btn-login li:nth-child(2) {
        float: right
    }
}

.ns-note .header-new .header-announce {
    float: left;
    font-weight: bold;
    line-height: 50px;
    margin-left: 20px
}

@media only screen and (max-width: 700px) {
    .ns-note .header-new .header-announce {
        display: none !important
    }
}

.ns-note .header-new__nav {
    width: 100%;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.98);
    position: fixed;
    top: 48px;
    z-index: 110;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2)
}

@media only screen and (max-width: 700px) {
    .ns-note .header-new__nav {
        position: static;
        border-top: none
    }
}

.ns-note .header-new__nav>ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    justify-content: center;
    width: 580px;
    height: 40px;
    margin: 0 auto
}

.ns-note .header-new__nav>ul>li {
    text-align: center;
    margin: 0 17px
}

.ns-note .header-new__nav>ul>li>a {
    font-size: 12px;
    color: #222;
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    border-bottom: 2px solid transparent
}

.ns-note .header-new__nav>ul>li>a.is-active {
    color: #222;
    border-bottom: 2px solid #222;
    font-weight: bold
}

.ns-note .header-new__nav>ul>li>a:hover {
    color: #222;
    border-bottom: 2px solid #222
}

.ns-note .header-new__nav>ul>li.header-nav__category {
    position: relative;
    display: none
}

.ns-note .header-new__nav>ul>li.header-nav__category>a:hover {
    border-color: transparent
}

@media only screen and (max-width: 700px) {
    .ns-note .header-new__nav>ul {
        width: 100%
    }

    .ns-note .header-new__nav>ul>li {
        display: none;
        margin: 0
    }

    .ns-note .header-new__nav>ul>li.header-nav__tl,
    .ns-note .header-new__nav>ul>li.header-nav__recommend,
    .ns-note .header-new__nav>ul>li.header-nav__category {
        width: 7em;
        display: block
    }

    .ns-note .header-new__nav>ul>li.header-nav__tl>a,
    .ns-note .header-new__nav>ul>li.header-nav__recommend>a,
    .ns-note .header-new__nav>ul>li.header-nav__category>a {
        display: inline-block;
        text-align: center;
        line-height: 40px
    }
}

.ns-note .header {
    position: relative;
    min-height: 90px;
    z-index: 999;
    width: 90%;
    min-width: 580px
}

.ns-note .header .logo {
    width: 80px;
    height: 25px;
    background: url(/upload/HtmlPart/logo.png) no-repeat center;
    background-size: cover;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -40px
}

.ns-note .header .logo a {
    display: block;
    text-indent: -9999px
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .header .logo {
        background: url(/upload/HtmlPart/logo.png) no-repeat center;
        background-size: cover;
        /*background-size: 80px 25px*/
    }
}

.ns-note .header .current-user,
.ns-note .header .account-menu {
    padding-top: 30px
}

.ns-note .header .current-user {
    float: left
}

.ns-note .header .current-user.random-btn {
    margin-left: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .header .current-user.random-btn {
        margin-left: 5px
    }
}

.ns-note .header .account-menu {
    float: right
}

.ns-note .header .account-menu .icn {
    width: 30px;
    height: 30px;
    margin-left: 10px
}

.ns-note .header .account-menu .btn-small {
    margin-left: 10px
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .header {
        width: 94%
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .header {
        width: 94%;
        min-width: 94%;
        min-height: 70px
    }

    .ns-note .header .account-menu .icn {
        width: 30px;
        height: 30px;
        margin-left: 5px
    }

    .ns-note .header .account-menu .btn-small {
        margin-left: 5px
    }

    .ns-note .header .current-user,
    .ns-note .header .account-menu {
        padding-top: 20px
    }
}

.ns-note .sp-login-area {
    display: none
}

@media only screen and (max-width: 480px) {
    .ns-note .sp-login-area {
        background-color: #444444;
        padding: 10px 10px;
        text-align: center;
        display: block
    }

    .ns-note .sp-login-area .btn {
        height: 28px;
        line-height: 28px;
        margin: 0 5px
    }

    .ns-note .sp-login-area .btn-signup {
        width: 140px
    }

    .ns-note .sp-login-area .btn-login {
        width: 140px;
        border: 1px solid #fff;
        background-color: #444444;
        color: #FFF
    }

    .ns-note .sp-login-area .btn-login:hover {
        border: 1px solid #fff
    }
}

.ns-note .mod-balloon {
    position: absolute;
    z-index: 80;
    top: 30px;
    right: -10px;
    padding: 5px;
    width: 80px;
    text-align: center;
    font-size: 12px;
    background-color: #fff;
    line-height: 1;
    border-radius: 2px !important;
    border: 2px solid #444444
}

.ns-note .mod-balloon:before {
    content: "";
    border: 8px solid transparent;
    border-bottom: 8px solid #444444;
    position: absolute;
    right: 12px;
    top: -16px
}

.ns-note .c-popover {
    font-size: 12px;
    position: absolute;
    z-index: 80;
    width: 170px;
    text-align: center;
    line-height: 1;
    font-weight: normal;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    padding: 14px
}

.ns-note .c-popover.is-top:before {
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px);
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: #fff;
    position: absolute;
    right: 20px;
    top: -13px;
    background: #fff;
    box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.8)
}

.ns-note .c-popover.is-bottom:before {
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px);
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: #fff;
    position: absolute;
    left: 75px;
    bottom: -13px;
    background: #fff;
    box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.8)
}

.ns-note .c-popover ul {
    text-align: left
}

.ns-note .c-popover ul li {
    line-height: 1;
    padding-bottom: 10px
}

.ns-note .c-popover ul li>a {
    color: #222222;
    display: block
}

.ns-note .c-popover ul li:last-child {
    padding-bottom: 0
}

@media only screen and (max-width: 480px) {
    .ns-note .c-popover ul li a {
        font-size: 12px
    }
}

.ns-note .c-popover.is-timeline {
    left: -72px;
    bottom: 30px
}

.ns-note .c-popover.is-mag {
    right: -11px;
    top: 40px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-popover.is-mag {
        right: -14px;
        top: 36px
    }
}

.ns-note .c-popover.is-category {
    right: 15px;
    top: 46px;
    width: 250px;
    padding: 21px 14px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-popover.is-category {
        width: 160px
    }
}

.ns-note .c-popover.is-category>ul>li {
    padding-bottom: 8px
}

.ns-note .c-popover.is-category>ul>li>a {
    font-size: 14px;
    padding: 10px
}

.ns-note .c-popover.is-category>ul>li:last-child {
    padding-bottom: 0
}

.ns-note .c-popover.is-magMember {
    right: -12px;
    top: 5px
}

.ns-note .open-share-btn {
    position: relative;
    cursor: pointer;
    max-height: 30px
}

@media only screen and (max-width: 480px) {
    .ns-note .open-share-btn {
        max-height: 24px
    }
}

.ns-note .image-upload {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer
}

.ns-note .image-upload input[type="file"] {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: 10;
    cursor: pointer
}

.ns-note .mod-operation-page-head,
.ns-note .p-settings {
    margin-bottom: 16px
}

.ns-note .mod-operation-page-head .section-title,
.ns-note .p-settings .section-title {
    font-size: 24px;
    text-align: center;
    font-weight: normal;
    line-height: 1;
    padding: 40px 0
}

.ns-note .mod-operation-page-head .section-title.multiline,
.ns-note .p-settings .section-title.multiline {
    line-height: 1.5
}

.ns-note .mod-operation-page-head .tab-menu,
.ns-note .p-settings .tab-menu {
    text-align: center;
    padding-bottom: 8px
}

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

    .ns-note .mod-operation-page-head .tab-menu,
    .ns-note .p-settings .tab-menu {
        text-align: left;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 8px
    }
}

.ns-note .mod-operation-page-head .tab-menu .tabs,
.ns-note .p-settings .tab-menu .tabs {
    line-height: 1.2;
    font-weight: bold;
    font-size: 14px !important
}

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

    .ns-note .mod-operation-page-head .tab-menu .tabs,
    .ns-note .p-settings .tab-menu .tabs {
        font-size: 12px !important
    }
}

.ns-note .mod-operation-page-head .tab-menu .tabs a,
.ns-note .p-settings .tab-menu .tabs a {
    display: block;
    padding: 8px;
    color: #787c7b;
    white-space: nowrap
}

.ns-note .mod-operation-page-head .tab-menu .tabs a.current,
.ns-note .p-settings .tab-menu .tabs a.current {
    color: #2CB696
}

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

    .ns-note .mod-operation-page-head .tab-menu .tabs a:hover,
    .ns-note .p-settings .tab-menu .tabs a:hover {
        color: #222222
    }
}

.ns-note .mod-operation-page-head .tab-menu .tabs .tabs__item,
.ns-note .p-settings .tab-menu .tabs .tabs__item {
    display: block;
    font-weight: normal;
    padding: 8px;
    color: #ccc;
    white-space: nowrap;
    cursor: not-allowed
}

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

    .ns-note .mod-operation-page-head .tab-menu .tabs .tabs__item,
    .ns-note .p-settings .tab-menu .tabs .tabs__item {
        padding: 8px 4px;
        text-align: center
    }
}

.ns-note img.eyecatch-frame {
    -ms-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 1px 0px;
    -o-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 1px 0px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 1px 0px;
    border: 4px solid #fff;
    background-color: #FFF
}

.ns-note .mod-operation-page .container-operation {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-operation-page .container-operation {
        width: auto;
        padding: 20px
    }
}

.ns-note .mod-operation-page .container-operation--large {
    width: 100%;
    max-width: 480px
}

.ns-note .mod-operation-page .container-operation .grey-box {
    background-color: #f8f9fa;
    margin-bottom: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-operation-page .container-operation .grey-box {
        width: 100%
    }
}

.ns-note .mod-operation-page .container-operation .grey-box p {
    padding: 10px
}

.ns-note .mod-operation-page .container-operation .grey-box ol {
    padding: 10px;
    list-style-type: decimal
}

.ns-note .mod-operation-page .container-operation .grey-box ol li {
    list-style-type: inherit;
    margin-left: 16px;
    margin-bottom: 4px
}

.ns-note .mod-operation-page .container-operation .grey-box ol li:last-child {
    margin-bottom: 0
}

.ns-note .mod-form-note-wrap {
    margin-bottom: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-form-note-wrap {
        margin-bottom: 10px
    }
}

.ns-note .mod-form-note {
    background-color: #FFF
}

.ns-note .mod-form-note textarea {
    width: 100%
}

.ns-note .mod-form-note .inner {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px
}

.ns-note .mod-form-note .action-area {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px
}

.ns-note .mod-form-note .textarea-short {
    height: 20px;
    min-height: 20px;
    padding-top: 5px;
    padding-bottom: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-form-note .inner {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px
    }

    .ns-note .mod-form-note .action-area {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px
    }
}

.ns-note .mod-form-note .upload-img-btn {
    width: 180px
}

.ns-note .mod-form-note .list-up-images .up-images:first-child {
    border: 1px solid #41C9B4
}

.ns-note .mod-form-note .list-up-images .up-images {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px
}

.ns-note .mod-form-note .up-images {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    width: 100%
}

.ns-note .mod-form-note .up-images .img {
    width: auto;
    height: auto;
    text-align: center;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px
}

.ns-note .mod-form-note .up-images .img img {
    width: auto;
    height: auto;
    max-width: 438px;
    max-height: 170px
}

.ns-note .mod-form-note .up-images input[type="text"] {
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px
}

.ns-note .mod-form-note .up-images .change-image-nav {
    position: absolute;
    top: 5px;
    right: 5px
}

.ns-note .mod-form-note .up-images .change-image-nav li {
    float: left;
    margin-left: 3px;
    cursor: pointer
}

.ns-note .mod-form-note .corner-label {
    width: 0;
    height: 0;
    border: 26px solid transparent;
    border-top-color: #41C9B4;
    border-left-color: #41C9B4;
    position: absolute;
    left: 0;
    top: 0
}

.ns-note .mod-form-note .transform-minus45 {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.ns-note .mod-form-note .txt-cover {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 11px;
    left: 0
}

.ns-note .mod-form-note .upload {
    border: 2px dashed #e1e5e7;
    background-color: #fff;
    cursor: pointer
}

.ns-note .mod-form-note .upload.file-drag-over {
    border: 2px dashed #41C9B4
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-form-note .space-b-2 {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px
    }

    .ns-note .mod-form-note .list-up-images .up-images {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px
    }

    .ns-note .mod-form-note .up-images {
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        width: 100%;
        height: auto
    }

    .ns-note .mod-form-note .up-images .img img {
        max-width: 200px
    }

    .ns-note .mod-form-note .up-images input[type="text"] {
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px
    }
}

.ns-note .units-timeline {
    background-color: #FFF;
    margin-bottom: 15px
}

.ns-note .units-timeline .inner-timeline {
    padding-top: 20px;
    padding-right: 25px;
    padding-bottom: 20px;
    padding-left: 25px
}

.ns-note .units-timeline .inner-timeline .note-title {
    font-size: 20px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 19px;
    margin-left: 0px
}

.ns-note .units-timeline .inner-timeline .note-eyecatch {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 25px;
    margin-left: 0px
}

@media only screen and (max-width: 480px) {
    .ns-note .units-timeline {
        margin-bottom: 10px
    }

    .ns-note .units-timeline .inner-timeline {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px
    }

    .ns-note .units-timeline .inner-timeline .note-title {
        font-size: 20px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px
    }

    .ns-note .units-timeline .inner-timeline .note-eyecatch {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 15px;
        margin-left: 0px
    }
}

.ns-note .mod-talknote .wrap {
    border: 2px solid #e1e5e7;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px
}

.ns-note .mod-talknote .wrap .txt {
    display: inline
}

.ns-note .mod-talknote .wrap .inline+.img {
    margin-top: 15px
}

.ns-note .mod-talknote .wrap .balloon {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #e1e5e7;
    position: absolute
}

.ns-note .mod-talknote .wrap .balloon:before {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    position: absolute
}

.ns-note .mod-talknote .wrap .balloon.balloon-posi {
    top: -20px;
    left: 8px
}

.ns-note .mod-talknote .wrap .balloon.balloon-posi:before {
    top: -7px;
    left: -10px
}

.ns-note .mod-talknote .wrap.is--limited {
    background-color: #f8f9fa
}

.ns-note .mod-talknote .wrap.is--limited .balloon:before {
    border-bottom-color: #f8f9fa
}

.ns-note .mod-talknote .wrap.is--limited p {
    text-align: center;
    color: #898D8C
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-talknote .wrap {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px
    }

    .ns-note .mod-talknote .wrap .txt+.img {
        margin-top: 10px
    }
}

.ns-note .mod-txtnote .txt {
    font-size: 14px
}

.ns-note .mod-movienote .note-description {
    margin-top: 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-movienote .note-description {
        margin-top: 10px
    }
}

.ns-note .mod-image-set .cover-image {
    width: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px
}

.ns-note .mod-image-set .thumb-list .image-thumb {
    float: left;
    width: 58px;
    height: 58px;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 0px
}

.ns-note .mod-image-set .thumb-list .image-data {
    width: 54px;
    height: 58px;
    background-color: #f8f9fa;
    text-align: center;
    padding: 5px
}

.ns-note .mod-image-set .thumb-list .image-data .count,
.ns-note .mod-image-set .thumb-list .image-data .txt {
    line-height: 1
}

.ns-note .mod-image-set .thumb-list .image-data .count {
    display: block;
    background-color: #FFF;
    font-size: 17px;
    padding: 7px 0 0px 0;
    color: #bdc3c7
}

.ns-note .mod-image-set .thumb-list .image-data .txt {
    display: block;
    background-color: #FFF;
    font-size: 10px;
    padding: 0px 0 8px 0;
    color: #bdc3c7
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-image-set .cover-image {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 5px;
        margin-left: 0px
    }

    .ns-note .mod-image-set .thumb-list .items:nth-child(7) .image-thumb,
    .ns-note .mod-image-set .thumb-list .items:nth-child(8) .image-thumb,
    .ns-note .mod-image-set .thumb-list .items:nth-child(9) .image-thumb {
        display: none
    }

    .ns-note .mod-image-set .thumb-list .image-thumb {
        width: 43px;
        height: 43px;
        margin-top: 0px;
        margin-right: 5px;
        margin-bottom: 0px;
        margin-left: 0px
    }

    .ns-note .mod-image-set .thumb-list .image-data {
        width: 40px;
        height: 43px;
        padding: 3px
    }

    .ns-note .mod-image-set .thumb-list .image-data .count {
        font-size: 15px;
        padding: 3px 0 0px 0
    }

    .ns-note .mod-image-set .thumb-list .image-data .txt {
        font-size: 8px;
        padding: 0px 0 4px 0
    }
}

.ns-note .mod-author-date {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 16px;
    margin-left: 0px
}

.ns-note .mod-author-date .eyecatch {
    float: left
}

.ns-note .mod-author-date .data {
    display: inline-block;
    line-height: 1.2;
    padding-top: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-author-date {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 11px;
        margin-left: 0px
    }
}

.ns-note .mod-note-status {
    position: absolute;
    top: 20px;
    right: 20px
}

.ns-note .mod-note-status .labels {
    color: #fff;
    min-width: 44px;
    padding-left: 8px;
    padding-right: 8px;
    height: 20px;
    text-align: center;
    line-height: 21px;
    font-size: 11px;
    border-radius: 2px;
    float: right;
    margin-left: 5px
}

.ns-note .mod-note-status .labels a {
    color: #fff
}

.ns-note .mod-note-status .labels a:hover {
    color: #fff
}

.ns-note .mod-note-status.detail {
    top: 0px;
    right: 0px
}

.ns-note .mod-note-status.detail .price-btn {
    height: 24px;
    line-height: 23px;
    padding-right: 10px;
    width: 85px
}

.ns-note .mod-note-status.detail .price-btn.no-icn {
    padding-right: 0;
    width: 70px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-note-status {
        top: 10px;
        right: 10px
    }

    .ns-note .mod-note-status .labels {
        padding-left: 4px;
        padding-right: 4px;
        min-width: 34px;
        height: 17px;
        line-height: 18px;
        font-size: 10px;
        border-radius: 2px
    }

    .ns-note .mod-note-status.detail {
        top: 0px;
        right: 0px
    }

    .ns-note .mod-note-status.detail .labels {
        width: auto;
        min-width: 34px
    }
}

.ns-note .mod-note-hashtags {
    margin-top: 10px
}

.ns-note .mod-note-hashtags .hashtags {
    margin-right: 10px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ns-note .mod-note-hashtags .hashtags a:hover {
    color: #41C9B4
}

.ns-note .mod-note-hashtags .hashtags__icon {
    top: 3px;
    position: relative
}

.ns-note .fude-content .mod-note-hashtags {
    margin-bottom: 30px;
    margin-top: 0
}

.ns-note .fude-content .mod-note-hashtags .hashtags {
    margin-right: 5px;
    margin-top: 5px;
    font-size: 12px;
    max-width: 100%
}

.ns-note .fude-content .mod-note-hashtags .hashtags.is-winner a {
    color: #eca726 !important;
    border: 1px solid #eca726 !important
}

@media only screen and (min-width: 769px) {
    .ns-note .fude-content .mod-note-hashtags .hashtags.is-winner a:hover {
        border: 1px solid #cd8c12 !important
    }
}

.ns-note .fude-content .mod-note-hashtags .hashtags a {
    height: 25px;
    line-height: 23px;
    color: #898D8C;
    background: #F2F4F4;
    border-radius: 4px !important;
    padding: 0 8px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.ns-note .fude-content .mod-note-hashtags .hashtags a:hover {
    color: #898D8C;
    background: #EAECEC
}

@media only screen and (max-width: 480px) {
    .ns-note .fude-content .mod-note-hashtags {
        margin-bottom: 15px;
        margin-top: 0
    }

    .ns-note .fude-content .mod-note-hashtags .hashtags {
        margin-top: 0;
        margin-bottom: 5px
    }
}

.ns-note .mod-note-actions {
    padding-top: 0px;
    padding-right: 25px;
    padding-bottom: 20px;
    padding-left: 25px
}

.ns-note .mod-note-actions .mod-like-btn {
    float: left
}

.ns-note .mod-note-actions .mod-like-count {
    float: left;
    margin: 6px 0 0 10px;
    height: 20px
}

.ns-note .mod-note-actions .mod-addtomag-btn,
.ns-note .mod-note-actions .mod-share-btn,
.ns-note .mod-note-actions .mod-share-actions {
    float: right;
    height: 20px;
    margin-top: 2px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-note-actions {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px
    }

    .ns-note .mod-note-actions .mod-like-count {
        margin: 6px 0 0 5px
    }

    .ns-note .mod-note-actions .mod-like-count.tl .like-list {
        display: none
    }
}

.ns-note .mod-note-actions.note-view {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px
}

.ns-note .mod-note-actions.note-view .mod-like-count-sp {
    display: none
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-note-actions.note-view {
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 15px;
        margin-left: 0px
    }

    .ns-note .mod-note-actions.note-view .mod-like-count {
        clear: both;
        margin: 10px 0 0 0
    }

    .ns-note .mod-note-actions.note-view .mod-like-count-sp {
        float: left;
        display: block;
        margin: 6px 0 0 5px
    }

    .ns-note .mod-note-actions.note-view .mod-like-count-sp .count {
        font-size: 13px;
        font-weight: bold;
        vertical-align: top;
        line-height: 22px
    }
}

.ns-note .mod-note-actions.is--limited {
    margin-top: 0px;
    margin-right: 25px;
    margin-bottom: 0px;
    margin-left: 25px;
    padding-bottom: 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-note-actions.is--limited {
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 0px;
        margin-left: 10px;
        padding-bottom: 10px
    }
}

.ns-note .mod-like-count .eyecatch,
.ns-note .mod-like-count .count {
    vertical-align: top
}

.ns-note .mod-like-count .count {
    font-size: 11px;
    line-height: 22px
}

.ns-note .mod-like-count .count.mode-sp {
    display: none !important
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-like-count .count {
        font-size: 13px;
        font-weight: bold
    }

    .ns-note .mod-like-count .count.mode-pc {
        display: none !important
    }

    .ns-note .mod-like-count .count.mode-sp {
        display: inline-block !important
    }

    .ns-note .mod-like-count .like-list .eyecatch {
        display: none !important
    }

    .ns-note .mod-like-count .like-list .eyecatch:nth-child(-n+4) {
        display: inline-block !important
    }
}

.ns-note .mod-share-actions {
    position: relative
}

.ns-note .mod-share-actions .icon-btn,
.ns-note .mod-share-actions .count {
    vertical-align: top
}

.ns-note .mod-share-actions .icon-btn {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 10px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_group_share_retina-8b4b4c6d8357e6a2653c59e2e5e254602d9e42d809e5188fe48a7108f0c8f281.png) no-repeat;
    background-size: 20px 80px;
    margin-left: 10px
}

.ns-note .mod-share-actions .icon-btn.fb {
    background-position: 0px 0px;
    background-color: #3b5998
}

.ns-note .mod-share-actions .icon-btn.tw {
    background-position: 0px -20px;
    background-color: #00acee
}

.ns-note .mod-share-actions .icon-btn.other {
    background-position: 0px -40px;
    background-color: #e1e5e7;
    position: relative
}

.ns-note .mod-share-actions .icon-btn.other .futon {
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ns-note .mod-share-actions .count {
    font-size: 11px;
    line-height: 22px;
    color: #bdc3c7
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-share-actions .icon-btn {
        margin-left: 8px
    }
}

.ns-note .mod-like-btn .mode-btn .btn {
    width: 68px;
    height: auto;
    line-height: 20px;
    padding: 5px 0 4px 0;
    text-indent: 15px;
    color: #bdc3c7;
    -ms-box-sizing: content-box !important;
    box-sizing: content-box !important
}

.ns-note .mod-like-btn .mode-btn .btn.is-active {
    color: #222222;
    font-weight: bold
}

.ns-note .mod-like-btn .mode-btn .btn.is-active .icon-like {
    background-position: -30px 0px
}

.ns-note .mod-like-btn .mode-btn .icon-like {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_like_big_retina-2291e6c8c0aef93e5644cf7c52f63eb9a5944230ddec28ee6b46d8ee80b44f1f.png) no-repeat;
    background-size: 60px 30px;
    background-position: 0px 0px
}

.ns-note .mod-like-btn .mode-txt .icon-actions {
    width: 18px;
    height: 18px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_actions-f321f4d14f85f46706c1d846c4fdbf627c69334ae93f43f1d58dee172748eb36.png) no-repeat;
    margin-right: 1px
}

.ns-note .mod-like-btn .mode-txt .icon-actions.icon-like {
    background-position: -1px -41px
}

.ns-note .mod-like-btn .mode-txt .icon-actions.icon-like.is-active {
    background-position: -21px -41px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-like-btn .mode-txt .icon-actions {
        width: 20px;
        height: 20px;
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_actions_retina-b4102740896dd71b1ddb2234878cbb6a3047f16bd425f7c23b407cc4b0b3588a.png) no-repeat !important;
        background-size: 40px 60px !important
    }

    .ns-note .mod-like-btn .mode-txt .icon-actions.icon-like {
        margin-top: -4px !important;
        background-position: 0px -40px !important
    }

    .ns-note .mod-like-btn .mode-txt .icon-actions.icon-like.is-active {
        background-position: -20px -40px !important
    }
}

.ns-note .mod-like-btn.v-btn .mode-txt {
    display: none
}

.ns-note .mod-like-btn.v-txt .mode-btn {
    display: none
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-like-btn .mode-btn .btn {
        width: 63px
    }
}

.ns-note .mod-share-btn,
.ns-note .mod-addtomag-btn {
    padding-top: 5px
}

.ns-note .mod-share-btn a,
.ns-note .mod-addtomag-btn a {
    display: block
}

.ns-note .mod-social-btns {
    position: relative;
    margin-bottom: 15px
}

.ns-note .mod-social-btns .report {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 21px;
    line-height: 20px;
    color: #BDC3CC
}

.ns-note .mod-social-btns .report:hover {
    color: #222222
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-social-btns .report {
        position: static;
        height: 21px;
        line-height: 20px;
        margin-top: 6px
    }
}

.ns-note .mod-note-page-actions {
    position: relative;
    width: 100%
}

.ns-note .mod-note-page-actions .inner {
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px
}

.ns-note .follow-list .users {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px
}

.ns-note .follow-list .users .user-eyecatch {
    float: left;
    width: 50px
}

.ns-note .follow-list .users .user-body {
    float: left;
    width: 350px
}

.ns-note .follow-list .users .user-body .id {
    font-size: 11px
}

.ns-note .follow-list .users .user-body .icon-official-user {
    width: 12px;
    height: 16px;
    display: inline-block;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_official_user-75950407e10be54cce086deb131ca9605e3f074f3ca906e5d039937a07d589ed.png);
    background-repeat: no-repeat;
    background-position: top;
    vertical-align: middle
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .follow-list .users .user-body .icon-official-user {
        background-size: 12px 14px;
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_official_user_retina-693c9fc2ba4d0a7b1347ecd55698c9b9543f0a024dee1792f2be5a744fa0827b.png)
    }
}

.ns-note .follow-list .users .user-action {
    float: right;
    width: 80px
}

.ns-note .follow-list .users:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0
}

@media only screen and (max-width: 480px) {
    .ns-note .follow-list .users {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 10px;
        padding-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px
    }

    .ns-note .follow-list .users .profile {
        display: none
    }

    .ns-note .follow-list .users .user-body {
        float: left;
        width: 150px
    }

    .ns-note .follow-list .users .user-body .id {
        display: block
    }

    .ns-note .follow-list .users .user-body .icon-official-user {
        background-size: 12px 14px;
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_official_user_retina-693c9fc2ba4d0a7b1347ecd55698c9b9543f0a024dee1792f2be5a744fa0827b.png)
    }

    .ns-note .follow-list .users .user-action {
        float: right;
        width: 80px
    }
}

.ns-note .mod-recommend {
    position: relative
}

.ns-note .mod-recommend .btn-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_actions_14-9bb599055bf7fe52658520da5d1ed7d8f1498c4becba215ee56a0aa5aa6807e5.png);
    background-size: 28px 14px !important;
    width: 14px;
    height: 14px;
    display: block;
    text-indent: -9999px;
    background-position: -14px 0px
}

.ns-note .mod-recommend .title-wrap {
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 7px;
    padding-left: 12px
}

.ns-note .mod-recommend .title-wrap .title {
    float: left;
    font-size: 13px
}

.ns-note .mod-recommend ul li {
    float: left;
    width: 50%;
    border-top: 1px solid #e1e5e7;
    border-right: 1px solid #e1e5e7;
    padding: 10px
}

.ns-note .mod-recommend ul li:nth-child(even) {
    border-right: none
}

.ns-note .mod-recommend ul li .eyecatch {
    float: left;
    width: 40px;
    margin-right: 6px
}

.ns-note .mod-recommend ul li .txt {
    float: left;
    width: 150px;
    line-height: 1.2;
    margin-top: 3px
}

.ns-note .mod-recommend ul li .txt .nickname {
    font-size: 12px;
    font-weight: bold;
    display: block;
    margin-bottom: 3px
}

.ns-note .mod-recommend ul li .txt .urlname {
    font-size: 11px;
    color: #898D8C
}

.ns-note .mod-recommend ul li .follow {
    float: right;
    width: 68px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-recommend ul li {
        float: none;
        clear: both;
        width: 100%;
        border-right: none;
        padding: 10px;
        display: -webkit-box;
        display: -moz-box
    }

    .ns-note .mod-recommend ul li .eyecatch {
        float: none;
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        margin-right: 6px
    }

    .ns-note .mod-recommend ul li .txt {
        float: none;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        margin-right: 10px
    }

    .ns-note .mod-recommend ul li .follow {
        float: none;
        width: auto;
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3
    }
}

.ns-note .not-found {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 240px;
    margin-bottom: 100px
}

.ns-note .not-found .logo-l {
    width: 216px;
    height: 53px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/logo-a6ee226715054a6bd6fff3251e508942ac349d16aa1957d90465d8d554cacc77.svg) no-repeat;
    background-size: 216px 53px;
    margin: 0 auto 60px auto
}

.ns-note .not-found .title {
    margin-bottom: 24px;
    font-size: 28px;
    font-weight: bold
}

.ns-note .not-found .txt {
    font-size: 20px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 40px;
    margin-left: 0px;
    color: #777;
    font-weight: bold
}

@media only screen and (max-width: 480px) {
    .ns-note .not-found {
        padding: 16px
    }

    .ns-note .not-found .txt {
        font-size: 16px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 25px;
        margin-left: 0px
    }

    .ns-note .not-found .txt br {
        display: none
    }
}

.ns-note .period-nav {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
    margin-left: 0px
}

.ns-note .period-nav ul {
    float: left
}

@media only screen and (max-width: 480px) {
    .ns-note .period-nav ul {
        float: none;
        text-align: center
    }
}

.ns-note .period-nav .period-date-nav {
    float: right
}

@media only screen and (max-width: 480px) {
    .ns-note .period-nav .period-date-nav {
        clear: both;
        float: none;
        text-align: center
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .period-nav {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px
    }

    .ns-note .period-nav ul.btn-group-box {
        float: none;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px
    }

    .ns-note .period-nav ul.btn-group-box .btn {
        width: 25% !important
    }
}

.ns-note .stats-count {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px
}

.ns-note .stats-count .counts {
    width: 32%;
    padding-top: 12px;
    padding-right: 0px;
    padding-bottom: 12px;
    padding-left: 0px;
    border-radius: 4px !important
}

.ns-note .stats-count .counts .num,
.ns-note .stats-count .counts .name {
    display: block;
    line-height: 1
}

.ns-note .stats-count .counts .num {
    font-size: 42px
}

.ns-note .stats-count .counts .name {
    font-size: 12px
}

.ns-note .stats-count .spacer {
    display: block;
    width: 2%;
    height: 1px
}

@media only screen and (max-width: 480px) {
    .ns-note .stats-count {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px
    }

    .ns-note .stats-count .counts .num {
        font-size: 21px
    }

    .ns-note .stats-count .counts .name {
        font-size: 11px
    }
}

.ns-note .post-soundnote .sound-ui {
    min-height: 30px
}

.ns-note .post-soundnote .cover-image {
    cursor: pointer;
    position: relative;
    float: left;
    width: 130px;
    height: 130px;
    vertical-align: middle
}

.ns-note .post-soundnote .cover-image .icon-xlarge {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px
}

.ns-note .post-soundnote .post-form {
    float: right;
    width: 390px
}

.ns-note .post-soundnote .post-form .mod-sound-player-post {
    position: relative;
    width: 390px
}

.ns-note .post-soundnote .post-form .mod-sound-player-post .sound-ui {
    width: 360px
}

.ns-note .post-soundnote .post-form .mod-sound-player-post .icon-small {
    position: absolute;
    top: 5px;
    right: 0px;
    cursor: pointer
}

.ns-note .dl-check {
    float: right;
    line-height: 30px
}

.ns-note .mod-note-user-profile {
    width: 100%;
    margin-top: 60px;
    margin-bottom: 40px
}

.ns-note .mod-note-user-profile .area-eyecatch,
.ns-note .mod-note-user-profile .area-data {
    vertical-align: top
}

.ns-note .mod-note-user-profile .area-eyecatch {
    width: 130px
}

.ns-note .mod-note-user-profile .area-eyecatch .eyecatch {
    width: 110px;
    height: 110px
}

.ns-note .mod-note-user-profile .area-data .name {
    font-weight: bold;
    line-height: 1;
    margin-bottom: 8px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-note-user-profile {
        margin-top: 30px;
        margin-bottom: 30px
    }

    .ns-note .mod-note-user-profile .area-eyecatch {
        width: 90px
    }

    .ns-note .mod-note-user-profile .area-eyecatch .eyecatch {
        width: 80px;
        height: 80px
    }

    .ns-note .mod-note-user-profile .area-data .name {
        font-size: 13px;
        margin-bottom: 5px
    }
}

.ns-note .note .imagenote-viewer .image-note-pictures {
    margin-bottom: 40px
}

.ns-note .note .imagenote-viewer .image-note-pictures img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto !important
}

.ns-note .note .imagenote-viewer .image-note-pictures .img-caption {
    display: block;
    font-size: 13px !important;
    text-align: center;
    margin-top: 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .note .imagenote-viewer .image-note-pictures {
        margin-bottom: 20px
    }

    .ns-note .note .imagenote-viewer .image-note-pictures .img-caption {
        margin-top: 10px
    }
}

.ns-note .note .imagenote-viewer .body-paywall-line-separator {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 40px 0;
    text-align: center;
    border-top: 1px dashed #787c7b;
    height: 1px
}

.ns-note .note .imagenote-viewer .body-paywall-line-separator p {
    display: inline-block;
    padding: 0 8px;
    color: #787c7b;
    background: #ffffff;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.ns-note .note .imagenote-viewer .body-paywall-line-separator p br {
    display: none
}

@media only screen and (max-width: 480px) {
    .ns-note .note .imagenote-viewer .body-paywall-line-separator p {
        line-height: 1.5
    }

    .ns-note .note .imagenote-viewer .body-paywall-line-separator p br {
        display: inline
    }
}

.ns-note .mod-note-paywall {
    text-align: center;
    padding: 20px;
    margin-top: 35px;
    margin-bottom: 35px;
    border: 4px solid #e1e5e7
}

.ns-note .mod-note-paywall .txt {
    font-size: 15px;
    margin-bottom: 10px
}

.ns-note .mod-note-paywall .price {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px
}

.ns-note .mod-note-paywall .remaining-count {
    font-size: 12px;
    margin-top: 10px
}

.ns-note .mod-note-paywall .description {
    margin-bottom: 7px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-note-paywall {
        padding: 20px 0 10px 0;
        margin-bottom: 20px
    }

    .ns-note .mod-note-paywall .txt {
        font-size: 13px;
        padding: 0 10px
    }

    .ns-note .mod-note-paywall .txt br {
        display: none
    }
}

.ns-note .note-bottom-area {
    margin-top: 10px
}

.ns-note .mod-index-of-notes {
    padding: 15px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-index-of-notes {
        padding: 15px 0
    }
}

.ns-note .mod-index-of-notes .mod-title {
    font-size: 12px;
    line-height: 1;
    margin-bottom: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-index-of-notes .mod-title {
        font-size: 11px;
        line-height: 1;
        margin-bottom: 12px
    }
}

.ns-note .mod-index-of-notes>ul>li:first-child {
    margin-top: 0
}

.ns-note .mod-index-of-notes>ul>li:before {
    content: "";
    display: inline-block;
    border: 3px solid transparent;
    border-left-color: #222222;
    position: absolute;
    left: 6px;
    top: 50%;
    margin-top: -4px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-index-of-notes>ul>li:before {
        left: 4px;
        margin-top: -3px
    }
}

.ns-note .mod-index-of-notes>ul>li {
    position: relative;
    margin-top: 5px;
    padding-left: 18px
}

.ns-note .mod-index-of-notes>ul>li .title {
    font-weight: bold;
    width: 100%;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-index-of-notes>ul>li {
        padding-left: 15px
    }

    .ns-note .mod-index-of-notes>ul>li .title {
        font-size: 13px
    }
}

.ns-note .banner-social-apps {
    margin-top: 30px
}

@media only screen and (max-width: 480px) {
    .ns-note .banner-social-apps {
        margin-top: 20px
    }
}

.ns-note .banner-social-apps>ul {
    text-align: center
}

.ns-note .banner-social-apps>ul>li {
    width: 40px;
    height: 40px;
    margin: 0 5px
}

.ns-note .banner-social-apps>ul>li a {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/btn_share_tw_fb-776e50140db76109a2da56e5f911b0f00ff7c2bfcc9814c037e5e666a45fe605.png);
    background-repeat: no-repeat
}

.ns-note .banner-social-apps>ul>li.banner-social-apps__btn_tw a {
    background-position: 0 0
}

.ns-note .banner-social-apps>ul>li.banner-social-apps__btn_fb a {
    background-position: -40px 0
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .banner-social-apps>ul>li a {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/btn_share_tw_fb_retina-975d09652799bb12f40a2b2d7bf9aeaadc957643f6d3f153d385e6f31fc6bec9.png);
        background-size: 80px 40px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .banner-social-apps>ul>li a {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/btn_share_tw_fb_retina-975d09652799bb12f40a2b2d7bf9aeaadc957643f6d3f153d385e6f31fc6bec9.png);
        background-size: 80px 40px
    }
}

.ns-note .note .movienote-viewer .video-wrap {
    margin-bottom: 40px
}

.ns-note .note .movienote-viewer .note-description {
    font-size: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .note .movienote-viewer .video-wrap {
        margin-bottom: 20px
    }

    .ns-note .note .movienote-viewer .note-description {
        font-size: 15px !important;
        line-height: 1.7 !important
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .note .mod-sound-player.show .note-description {
        font-size: 15px !important;
        margin-top: 20px !important;
        line-height: 1.7 !important
    }
}

.ns-note .footer {
    padding: 15px 0 40px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .footer {
        padding: 10px 0 20px 0
    }
}

.ns-note .footer ul {
    margin: 20px 0 25px 0
}

.ns-note .footer ul br {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .footer ul br {
        display: inline
    }
}

.ns-note .footer ul li {
    margin-right: 15px;
    font-size: 11px
}

.ns-note .footer ul li:last-child {
    margin-right: 0
}

.ns-note .footer ul li a {
    color: #898D8C
}

@media only screen and (max-width: 768px) {
    .ns-note .footer ul li {
        margin-bottom: 10px
    }
}

.ns-note .footer .logo-cakes {
    width: 80px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/footer_cakes_logo-b2262586be8f0209335fb082ce8404133e5b4b731a934ab9e79fb0076c0d31c1.png);
    background-repeat: no-repeat
}

.ns-note .footer .logo-cakes a {
    width: 80px;
    height: 40px;
    display: block;
    text-indent: -9999px
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .footer .logo-cakes {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/footer_cakes_logo_retina-c856de0700a7e87a1df067bb89eb00b872e830a3b780ddcc75043e8d162e21ff.png);
        background-size: 80px 40px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .footer .logo-cakes {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/footer_cakes_logo_retina-c856de0700a7e87a1df067bb89eb00b872e830a3b780ddcc75043e8d162e21ff.png);
        background-size: 80px 40px
    }
}

.ns-note .powerdby-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: -10px
}

.ns-note .powerdby-note>p {
    margin-right: 4px;
    font-size: 10px;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    color: #a1a6a9
}

.ns-note .powerdby-note__logo {
    width: 54px;
    height: 14px;
    overflow: hidden;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/logo_powerdby_note-506ef29e8596121ac1b6039dd8114f8eaccd397fb008bcf8c8fabc0c481eccb5.svg);
    background-repeat: no-repeat
}

.ns-note .powerdby-note__logo a {
    width: 54px;
    height: 14px;
    display: block
}

.ns-note .mod-message-area {
    padding: 40px;
    background-color: #f8f9fa;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px
}

.ns-note .mod-message-area .ttl {
    font-size: 15px;
    font-weight: bold
}

.ns-note .mod-message-area .cap {
    margin-top: 20px
}

.ns-note .mod-message-area .txt {
    color: #777
}

.ns-note .note .movienote-viewer .video-wrap {
    margin-bottom: 40px
}

.ns-note .note .movienote-viewer .note-description {
    font-size: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .note .movienote-viewer .video-wrap {
        margin-bottom: 20px
    }
}

.ns-note .img-specified {
    width: 480px;
    height: 294px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/img_specified_capture-ba478b222f8eb6a1c3c946eb2fcdf2ff094991c572af066f2b2092652182ba77.png);
    background-repeat: no-repeat;
    background-size: 480px 294px;
    margin: 0 auto 20px auto
}

@media only screen and (max-width: 480px) {
    .ns-note .img-specified {
        width: 260px;
        height: 159px;
        background-size: 260px 159px;
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/img_specified_capture_retina-529be9a16403f5cac701c13c0fd39854c13033b21912ec52aaa585541522a22c.png)
    }
}

.ns-note .mod-static-page .list {
    padding-left: 15px;
    position: relative
}

.ns-note .mod-static-page .list .number {
    position: absolute;
    left: 0;
    top: 0
}

.ns-note .mod-static-page .list.double-digits {
    padding-left: 20px
}

.ns-note .mod-modal .navi-modal {
    border-bottom: 1px solid #e1e5e7;
    height: 40px;
    position: relative
}

.ns-note .mod-modal .navi-modal .title {
    font-size: 15px;
    line-height: 40px;
    padding-left: 10px;
    font-weight: bold;
    color: #777
}

.ns-note .mod-modal .navi-modal .close {
    position: absolute;
    right: 10px;
    top: 12px
}

.ns-note .mod-modal .navi-modal__more {
    padding: 16px
}

.ns-note .mod-modal .limited-title {
    font-size: 13px;
    color: #41C9B4;
    text-align: center;
    font-weight: bold;
    background-color: #eff9f7;
    padding: 10px 0 8px 0;
    border-bottom: 1px solid #e1e5e7
}

.ns-note .mod-credit {
    min-height: 224px;
    background-color: #f8f9fa;
    border-radius: 10px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 0px;
    padding-top: 20px;
    margin-bottom: 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-credit {
        min-height: 100%;
        margin-bottom: 15px
    }
}

.ns-note .mod-credit .img-creditcard-wrap {
    background-color: #e8ebec;
    padding: 7px 0
}

.ns-note .mod-credit .img-creditcard-wrap .img-creditcard {
    width: 290px;
    height: 30px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/img_creditcard-400de2a717e978ffc8a4f5d9972ba69a9a0d2a89efdaadb1c329fd20ffd09c8b.png);
    background-repeat: no-repeat;
    background-size: 290px 30px;
    margin: 0 auto
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-credit .img-creditcard-wrap .img-creditcard {
        width: 260px;
        height: 27px;
        background-size: 260px 27px
    }
}

.ns-note .mod-credit .form-credit {
    padding-top: 15px;
    padding-right: 20px;
    padding-bottom: 25px;
    padding-left: 20px
}

.ns-note .mod-credit .form-credit h3 {
    font-weight: bold;
    margin-bottom: 5px
}

.ns-note .mod-credit .form-credit .form-credit-first {
    margin-bottom: 12px
}

.ns-note .mod-credit .form-credit .form-credit-first .card-number {
    float: left;
    width: 155px;
    margin-right: 15px
}

.ns-note .mod-credit .form-credit .form-credit-first .expiry-date {
    float: left;
    width: 140px
}

.ns-note .mod-credit .form-credit .form-credit-second .card-name {
    float: left;
    width: 192px;
    margin-right: 15px
}

.ns-note .mod-credit .form-credit .form-credit-second .cv-code {
    float: left;
    width: 110px
}

.ns-note .mod-credit .form-credit .credit-info {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 40px
}

.ns-note .mod-credit .form-credit .credit-info .card-number {
    margin-right: 60px
}

.ns-note .mod-credit .form-credit .credit-info .inline-child {
    margin-bottom: 20px
}

.ns-note .mod-credit .form-credit .credit-info h3 {
    margin-bottom: 3px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-credit .form-credit {
        padding-top: 15px;
        padding-right: 10px;
        padding-bottom: 15px;
        padding-left: 10px
    }

    .ns-note .mod-credit .form-credit .form-credit-first {
        *zoom: 1;
        margin-bottom: 10px
    }

    .ns-note .mod-credit .form-credit .form-credit-first:after {
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
        content: "."
    }

    .ns-note .mod-credit .form-credit .form-credit-first .card-number {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px
    }

    .ns-note .mod-credit .form-credit .form-credit-first .expiry-date {
        float: none;
        width: auto
    }

    .ns-note .mod-credit .form-credit .form-credit-second {
        *zoom: 1
    }

    .ns-note .mod-credit .form-credit .form-credit-second:after {
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
        content: "."
    }

    .ns-note .mod-credit .form-credit .form-credit-second .card-name {
        float: auto;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px
    }

    .ns-note .mod-credit .form-credit .form-credit-second .cv-code {
        float: left;
        width: 100%
    }

    .ns-note .mod-credit .form-credit .credit-info {
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 30px
    }

    .ns-note .mod-credit .form-credit .credit-info .card-number {
        margin-right: 40px
    }
}

.ns-note .img-creditcard.img-modal {
    width: 298px;
    height: 30px;
    background-size: 298px 30px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/img_creditcard-400de2a717e978ffc8a4f5d9972ba69a9a0d2a89efdaadb1c329fd20ffd09c8b.png);
    background-repeat: no-repeat;
    margin: auto;
    margin-bottom: 15px
}

.ns-note .img-creditcard.img-modal.ec {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/img_creditcard_2-20b105cd50c3afb19452f8bf17df76a8067cf83619c8bd58f2e2002f0c956470.png)
}

@media only screen and (max-width: 480px) {
    .ns-note .img-creditcard.img-modal {
        width: 100%;
        background-size: 278px 28px
    }
}

.ns-note .mod-magazine-cover {
    position: relative;
    margin-bottom: 15px
}

.ns-note .mod-magazine-cover .wallpaper {
    height: 580px
}

.ns-note .mod-magazine-cover .wallpaper .image {
    height: 580px;
    background-repeat: no-repeat;
    background-position: center !important;
    background-size: cover !important
}

.ns-note .mod-magazine-cover .data-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 580px
}

.ns-note .mod-magazine-cover .data-wrap .area-data {
    position: relative;
    margin: 50px 50px 0 50px;
    padding: 25px 20px;
    border: 4px solid #fff;
    box-sizing: border-box !important;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff
}

.ns-note .mod-magazine-cover .data-wrap .area-data .mag-title {
    font-size: 32px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased
}

.ns-note .mod-magazine-cover .data-wrap .area-data .mag-description {
    font-size: 14px;
    margin-top: 17px
}

.ns-note .mod-magazine-cover .data-wrap .area-data .mag-author {
    margin-top: 20px;
    display: block;
    color: #fff
}

.ns-note .mod-magazine-cover .data-wrap .area-data .mag-author .user-eyecatch,
.ns-note .mod-magazine-cover .data-wrap .area-data .mag-author .user-name {
    font-size: 12px;
    vertical-align: middle
}

.ns-note .mod-magazine-cover .data-wrap .area-data .mag-author .user-eyecatch img {
    border: 2px solid #fff;
    background-color: #FFF
}

.ns-note .mod-magazine-cover .data-wrap .area-data .mag-author .user-name {
    margin-left: 5px
}

.ns-note .mod-magazine-cover .data-wrap .area-data .mag-status {
    margin-top: 15px
}

.ns-note .mod-magazine-cover .data-wrap .area-data .mag-status a,
.ns-note .mod-magazine-cover .data-wrap .area-data .mag-status span {
    color: #fff;
    font-weight: normal
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-magazine-cover .data-wrap .area-data .mag-status {
        margin-top: 10px;
        font-size: 11px
    }
}

.ns-note .mod-magazine-cover .data-wrap .area-action {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 100% !important
}

.ns-note .mod-magazine-cover .data-wrap .area-action .button,
.ns-note .mod-magazine-cover .data-wrap .area-action .button-large {
    margin-bottom: 10px
}

.ns-note .mod-magazine-cover .data-wrap .area-action .edit-delete {
    width: 210px;
    margin: 0 auto
}

.ns-note .mod-magazine-cover .data-wrap .area-action .edit-delete .button {
    width: 100px;
    height: 34px;
    line-height: 32px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-magazine-cover .data-wrap .area-action {
        bottom: 40px
    }

    .ns-note .mod-magazine-cover .data-wrap .area-action .edit-delete {
        width: 170px;
        margin: 0 auto
    }

    .ns-note .mod-magazine-cover .data-wrap .area-action .edit-delete .button {
        width: 80px;
        height: 34px;
        line-height: 31px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-magazine-cover {
        font-weight: bold;
        height: 400px
    }

    .ns-note .mod-magazine-cover .wallpaper {
        height: 400px
    }

    .ns-note .mod-magazine-cover .wallpaper .image {
        height: 400px
    }

    .ns-note .mod-magazine-cover .data-wrap {
        height: 400px
    }

    .ns-note .mod-magazine-cover .data-wrap .area-data {
        margin: 15px 15px 0 15px;
        padding: 15px 10px;
        border: 4px solid #fff
    }

    .ns-note .mod-magazine-cover .data-wrap .area-data .mag-title {
        font-size: 24px
    }

    .ns-note .mod-magazine-cover .data-wrap .area-data .mag-description {
        font-size: 12px;
        margin-top: 10px
    }

    .ns-note .mod-magazine-cover .data-wrap .area-data .mag-author {
        font-size: 0;
        margin-top: 10px
    }
}

.ns-note .mag-list {
    height: 240px;
    margin-bottom: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-list {
        height: 100%;
        margin-bottom: 0
    }
}

.ns-note .mag-list>li,
.ns-note .mag-list .mag-list__cover,
.ns-note .mag-list .mag-list__cover-img,
.ns-note .mag-list .mag-list__cover-img img,
.ns-note .mag-list .mag-list__gradient,
.ns-note .mag-list .mag-list__overlay,
.ns-note .mag-list .mag-list__body {
    width: 180px;
    height: 100%
}

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

    .ns-note .mag-list>li,
    .ns-note .mag-list .mag-list__cover,
    .ns-note .mag-list .mag-list__cover-img,
    .ns-note .mag-list .mag-list__cover-img img,
    .ns-note .mag-list .mag-list__gradient,
    .ns-note .mag-list .mag-list__overlay,
    .ns-note .mag-list .mag-list__body {
        width: 100%;
        height: 100%
    }
}

.ns-note .mag-list .mag-list__cover-img img {
    width: 180px;
    height: 100%
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-list .mag-list__cover-img img {
        width: 100%;
        height: auto
    }
}

.ns-note .mag-list>li {
    position: relative;
    float: left;
    margin: 0 20px 20px 0
}

.ns-note .mag-list>li:nth-child(3n) {
    margin: 0 0 20px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-list>li {
        width: 50%;
        padding: 0 2px;
        margin: 0 0 10px 0
    }

    .ns-note .mag-list>li:nth-child(odd) {
        margin: 0 0 8px -2px
    }

    .ns-note .mag-list>li:nth-child(even) {
        float: right;
        margin: 0 -2px 8px 0
    }
}

.ns-note .mag-list .mag-list__cover,
.ns-note .mag-list .mag-list__overlay,
.ns-note .mag-list .mag-list__body {
    top: 0;
    left: 0
}

.ns-note .mag-list .mag-list__cover {
    position: absolute
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-list .mag-list__cover {
        position: relative
    }
}

.ns-note .mag-list .mag-list__overlay {
    position: absolute;
    z-index: 50;
    background: #000;
    opacity: 0.3;
    -khtml-opacity: 0.3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .mag-list .mag-list__body {
    position: absolute;
    width: 100%;
    z-index: 60;
    color: #fff;
    font-weight: bold
}

.ns-note .mag-list .mag-list__mark {
    position: absolute;
    top: 10px;
    left: 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2)
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-list .mag-list__mark {
        top: 8px;
        left: 8px
    }
}

.ns-note .mag-list .mag-list__mark>li {
    font-size: 11px;
    font-weight: normal
}

.ns-note .mag-list .mag-list__elem-bottom {
    position: absolute;
    left: 15px;
    bottom: 25px;
    padding: 0 15px 0 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-list .mag-list__elem-bottom {
        left: 10px;
        bottom: 15px;
        padding: 0 10px 0 0
    }
}

.ns-note .mag-list .mag-list__elem-bottom>a {
    color: #fff
}

.ns-note .mag-list .mag-list__title>p {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 3px;
    word-wrap: break-word;
    word-break: break-all;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2)
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-list .mag-list__title>p {
        font-size: 13px
    }
}

.ns-note .mag-list .mag-list__txt>p {
    font-size: 11px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2)
}

.ns-note .mag-list .mag-list__button-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 80
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-list .mag-list__button-wrapper {
        top: 8px;
        right: 8px
    }
}

.ns-note .mag-list .mag-list__cover.count-max .icon-30 {
    display: none
}

.ns-note .mag-list .mag-list__cover.count-max .image {
    opacity: 0.5
}

.ns-note .mag-list .mag-list__cover.count-max .new-mag {
    margin: -15px 0 0 0
}

.ns-note .mag-list .mag-list__cover .new-mag {
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin: -30px 0 0 0
}

.ns-note .mag-list .mag-list__cover .new-mag .txt {
    text-align: center
}

.ns-note .mag-list textarea {
    width: 100%
}

.ns-note .mag-list__subscription {
    *zoom: 1
}

.ns-note .mag-list__subscription:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: "."
}

.ns-note .mag-list__subscription .mag-list__subscription-price {
    float: left
}

.ns-note .mag-list__subscription .mag-list__subscription-price>span.price {
    font-weight: bold;
    color: #222222;
    margin-right: 7px
}

.ns-note .mag-list__subscription .mag-list__subscription-delete {
    float: right
}

.ns-note .mag-list__subscription-term {
    float: none;
    clear: both;
    border: 1px solid #ff0000;
    color: #ff0000;
    padding: 3px;
    text-align: center;
    margin-bottom: 15px
}

.ns-note .mag-list__link {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: flex-start;
    -ms-box-align: flex-start;
    -o-box-align: flex-start;
    box-align: flex-start;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-top: 15px;
    color: #777
}

.ns-note .mag-list__link>li:nth-child(2) {
    margin-left: auto
}

.ns-note .pickup-mag__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    background: transparent
}

.ns-note .mag-edit {
    position: relative;
    width: 180px;
    height: 240px;
    margin: 0 auto
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-edit {
        width: 150px;
        height: 100%
    }
}

.ns-note .mag-edit .mag-list__elem-bottom {
    left: 11px;
    bottom: 11px;
    padding: 0 11px 0 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-edit .mag-list__elem-bottom {
        left: 4px;
        bottom: 4px;
        padding: 0 4px 0 0
    }
}

.ns-note .mag-edit .mag-list__cover-img {
    width: 100%;
    height: 240px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-edit .mag-list__cover-img {
        width: 100%;
        height: 195px
    }
}

.ns-note .mag-edit .mag-list__title.title-edit textarea {
    font-weight: bold;
    font-size: 14px;
    line-height: 1.4;
    padding: 0;
    word-wrap: break-word;
    word-break: break-all;
    border: none;
    background: none;
    resize: none;
    overflow: hidden;
    height: 66px;
    word-wrap: break-word
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-edit .mag-list__title.title-edit textarea {
        height: 62px;
        font-size: 13px;
        padding: 4px 2px
    }
}

.ns-note .mag-edit .mag-list__title.title-edit textarea::-webkit-input-placeholder {
    color: #fff;
    opacity: 0.8
}

.ns-note .mag-edit .mag-list__title.title-edit textarea:-moz-placeholder,
.ns-note .mag-edit .mag-list__title.title-edit textarea::-moz-placeholder {
    color: #fff;
    opacity: 0.8
}

.ns-note .mag-edit .mag-list__title.title-edit textarea:focus::-webkit-input-placeholder {
    color: transparent
}

.ns-note .mag-edit .mag-list__title.title-edit textarea:focus:-moz-placeholder,
.ns-note .mag-edit .mag-list__title.title-edit textarea:focus::-moz-placeholder {
    color: transparent
}

.ns-note .mag-edit .area-btn-image {
    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: -48px;
    z-index: 90
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-edit .area-btn-image {
        top: 60px;
        margin-left: -44px
    }
}

.ns-note .mag-edit__disabled {
    position: absolute;
    top: 0px;
    left: -100px;
    width: 580px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.55)
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-edit__disabled {
        left: 0;
        width: 100%
    }
}

.ns-note .icon-circle-30.lock {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    background-color: #fff;
    cursor: default;
    position: absolute;
    top: -17px;
    left: -17px;
    z-index: 70
}

.ns-note .icon-circle-30.lock .icon-small {
    margin: 5px
}

.ns-note .icon-circle-30.lock .icon-small.icon-small-delete:hover {
    background-position: 0px -340px
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-circle-30.lock {
        width: 20px;
        height: 20px;
        top: -11px;
        left: -11px
    }

    .ns-note .icon-circle-30.lock .icon-small {
        margin: 3px;
        width: 14px;
        height: 14px;
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_14-a254404ddb12fb75f31cd0e84351f842dc57670200fc9bfab86797ddf33f1a4b.png) no-repeat
    }
}

@media only screen and (max-width: 480px) and (max-width: 480px) {
    .ns-note .icon-circle-30.lock .icon-small {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_14_retina-6a17be5307bd1a9acb9a8d95cd44b8d2df398e3d8ac7d69f8978fb2504b83179.png) no-repeat;
        background-size: 28px 140px
    }
}

@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .icon-circle-30.lock .icon-small {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_14_retina-6a17be5307bd1a9acb9a8d95cd44b8d2df398e3d8ac7d69f8978fb2504b83179.png) no-repeat;
        background-size: 28px 140px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .icon-circle-30.lock .icon-small.icon-small-lock {
        background-position: 0px -56px
    }
}

.ns-note .icon-circle-30.list.lock {
    width: 20px;
    height: 20px;
    top: -11px;
    left: -11px
}

.ns-note .icon-circle-30.list.lock .icon-mini {
    margin: 3px
}

.ns-note .mod-modal-mag-list .add-mag-list {
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

.ns-note .mod-modal-mag-list .add-mag-list li.mags {
    position: relative;
    padding: 10px
}

.ns-note .mod-modal-mag-list .add-mag-list li.mags .mag-eyecatch {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    position: relative
}

.ns-note .mod-modal-mag-list .add-mag-list li.mags .mag-eyecatch .lock {
    position: absolute;
    top: -5px;
    left: -5px
}

.ns-note .mod-modal-mag-list .add-mag-list li.mags .mag-eyecatch .pay {
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: default
}

.ns-note .mod-modal-mag-list .add-mag-list li.mags .mag-title {
    font-weight: bold;
    width: 210px
}

.ns-note .mod-modal-mag-list .add-mag-list li.mags .btn,
.ns-note .mod-modal-mag-list .add-mag-list li.mags .button-xsmall {
    position: absolute;
    right: 10px;
    top: 22px
}

.ns-note .mod-modal-mag-list .add-mag-list .mag-new {
    border-bottom: none;
    padding: 15px 10px
}

.ns-note .mod-modal-mag-list .add-mag-list .mag-new.edit {
    padding: 12px 10px
}

.ns-note .mod-modal-mag-list .add-mag-list .mag-new.edit .btn {
    width: 50px
}

.ns-note .mod-modal-mag-list .add-mag-list .mag-new.edit input[type="text"] {
    width: 75%;
    height: 26px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-modal-mag-list .add-mag-list {
        max-height: 340px
    }

    .ns-note .mod-modal-mag-list .add-mag-list li.mags {
        padding: 5px
    }

    .ns-note .mod-modal-mag-list .add-mag-list li.mags .mag-eyecatch {
        margin-right: 5px
    }

    .ns-note .mod-modal-mag-list .add-mag-list li.mags .mag-title {
        width: 160px
    }

    .ns-note .mod-modal-mag-list .add-mag-list li.mags .btn,
    .ns-note .mod-modal-mag-list .add-mag-list li.mags .button-xsmall {
        right: 5px
    }

    .ns-note .mod-modal-mag-list .add-mag-list .mag-new.edit input[type="text"] {
        width: 70%;
        height: 26px
    }
}

.ns-note .mod-modal-mag {
    position: relative
}

.ns-note .mod-modal-mag .list-wrap {
    height: 440px;
    overflow-y: auto;
    overflow-x: hidden
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-modal-mag .list-wrap {
        height: 320px
    }
}

.ns-note .mod-modal-mag ul {
    padding-bottom: 0
}

.ns-note .mod-modal-mag ul li {
    position: relative
}

.ns-note .mod-modal-mag ul li .image {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    position: relative
}

.ns-note .mod-modal-mag ul li .txt {
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    line-height: 1.3
}

.ns-note .mod-modal-mag ul li p span {
    font-size: 11px;
    color: #898D8C
}

.ns-note .mod-modal-mag ul li p span:first-child {
    margin-right: 5px
}

.ns-note .mod-modal-mag .title {
    padding-top: 12px;
    padding-right: 0px;
    padding-bottom: 12px;
    padding-left: 0px;
    position: relative
}

.ns-note .mod-modal-mag .title h2 {
    font-size: 16px;
    line-height: 1.2;
    text-align: center
}

.ns-note .mod-modal-mag .title .modal-mag-title-link {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 11px
}

.ns-note .mod-modal-mag .title .modal-mag-title-link .blt {
    margin: -3px 3px 0 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-modal-mag .title .modal-mag-title-link {
        top: 12px;
        right: 12px
    }

    .ns-note .mod-modal-mag .title .modal-mag-title-link .blt {
        margin: 1px 3px 0 0
    }
}

.ns-note .mod-modal-mag.mag-select ul li a {
    display: block;
    padding: 10px;
    background-color: #fff
}

.ns-note .mod-modal-mag.mag-select ul li a:hover {
    background-color: #f8f9fa
}

.ns-note .mod-modal-mag.mag-select ul li a.mag-new-link:hover {
    background-color: #fff
}

.ns-note .mod-modal-mag.mag-select ul li .txt {
    width: 270px;
    font-weight: bold;
    padding-right: 10px
}

.ns-note .mod-modal-mag.mag-select ul li.mag-new {
    border-bottom: none
}

.ns-note .mod-modal-mag.mag-select ul li.mag-new a.icon-small {
    background-color: transparent
}

.ns-note .mod-modal-mag.mag-select ul li.mag-new a.icon-small:hover {
    background-color: transparent
}

.ns-note .mod-modal-mag.mag-select ul li.mag-new.edit {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px
}

.ns-note .mod-modal-mag.mag-select ul li.mag-new.edit .btn {
    width: 50px
}

.ns-note .mod-modal-mag.mag-select ul li.mag-new.edit input[type="text"] {
    width: 255px;
    height: 25px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-modal-mag.mag-select ul li .txt {
        width: 204px
    }

    .ns-note .mod-modal-mag.mag-select ul li.mag-new {
        height: 80px;
        border-bottom: none
    }

    .ns-note .mod-modal-mag.mag-select ul li.mag-new a.icon-small {
        background-color: transparent
    }

    .ns-note .mod-modal-mag.mag-select ul li.mag-new a.icon-small:hover {
        background-color: transparent
    }

    .ns-note .mod-modal-mag.mag-select ul li.mag-new.edit {
        padding-top: 15px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px
    }

    .ns-note .mod-modal-mag.mag-select ul li.mag-new.edit .btn {
        height: 30px;
        line-height: 30px
    }

    .ns-note .mod-modal-mag.mag-select ul li.mag-new.edit input[type="text"] {
        width: 190px;
        height: 30px
    }
}

.ns-note .mod-modal-mag.mag-sort ul {
    background: #e1e5e7
}

.ns-note .mod-modal-mag.mag-sort ul li {
    position: relative;
    background: #fff
}

.ns-note .mod-modal-mag.mag-sort ul li .sort-nav {
    float: left;
    width: 30px
}

.ns-note .mod-modal-mag.mag-sort ul li .sort-nav a {
    width: 30px;
    height: 30px;
    padding: 5px 0 0 4px;
    display: block
}

.ns-note .mod-modal-mag.mag-sort ul li .sort-nav a:hover .icon-small-up {
    background-position: -20px -140px
}

.ns-note .mod-modal-mag.mag-sort ul li .sort-nav a:hover .icon-small-down {
    background-position: -20px -160px
}

.ns-note .mod-modal-mag.mag-sort ul li .sort-nav a:hover .icon-small-drag {
    background-position: -20px -320px
}

.ns-note .mod-modal-mag.mag-sort ul li .txt {
    float: left;
    width: 252px;
    display: block;
    font-weight: bold;
    line-height: 1.3
}

.ns-note .mod-modal-mag.mag-sort ul li .close-nav {
    position: absolute;
    top: 11px;
    right: 10px;
    font-size: 11px
}

.ns-note .mod-modal-mag.mag-sort ul li .close-nav .txt-return {
    margin-top: -1px
}

.ns-note .mod-modal-mag.mag-sort ul li .note-data {
    float: left;
    width: 332px;
    padding: 10px
}

.ns-note .mod-modal-mag.mag-sort ul li .note-data .info {
    line-height: 1.2;
    margin-bottom: 6px
}

.ns-note .mod-modal-mag.mag-sort ul li.ui-sortable-helper {
    width: 380px !important;
    background: #f8f9fa
}

.ns-note .mod-modal-mag.mag-sort .deleted {
    background-color: #f8f9fa;
    box-sizing: border-box
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-modal-mag.mag-sort ul li {
        *zoom: 1
    }

    .ns-note .mod-modal-mag.mag-sort ul li:after {
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
        content: "."
    }

    .ns-note .mod-modal-mag.mag-sort ul li .sort-nav {
        width: 35px
    }

    .ns-note .mod-modal-mag.mag-sort ul li .sort-nav a {
        width: 35px;
        height: 45px;
        padding: 12px 0 0 7px
    }

    .ns-note .mod-modal-mag.mag-sort ul li .sort-nav a.drag {
        display: none
    }

    .ns-note .mod-modal-mag.mag-sort ul li .sort-nav a:first-child {
        border-bottom: 1px solid #e1e5e7
    }

    .ns-note .mod-modal-mag.mag-sort ul li .close-nav {
        font-size: 10px;
        width: 30px;
        height: 30px
    }

    .ns-note .mod-modal-mag.mag-sort ul li .close-nav .icon-10-delete {
        float: right
    }

    .ns-note .mod-modal-mag.mag-sort ul li .close-nav .txt-return {
        text-align: right
    }

    .ns-note .mod-modal-mag.mag-sort ul li .note-data {
        width: 248px
    }

    .ns-note .mod-modal-mag.mag-sort ul li .note-data p.info span {
        font-size: 10px
    }

    .ns-note .mod-modal-mag.mag-sort ul li .txt {
        float: left;
        width: 168px
    }
}

.ns-note .tl-limited {
    background: #f8f9fa;
    padding: 7px 25px 6px 25px
}

@media only screen and (max-width: 480px) {
    .ns-note .tl-limited {
        padding: 5px 10px 4px 10px
    }
}

.ns-note .tl-limited>dl {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: flex-start;
    -ms-box-align: flex-start;
    -o-box-align: flex-start;
    box-align: flex-start;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    color: #777;
    font-size: 12px
}

.ns-note .tl-limited>dl>dt {
    font-weight: bold
}

.ns-note .tl-limited>dl>dd {
    margin-left: auto
}

.ns-note .tl-limited>dl>dd .tl-limited__number {
    color: #222222;
    font-weight: bold;
    margin-left: 3px
}

.ns-note .tl-limited .slash {
    padding: 0 3px
}

.ns-note .mod-mag-info {
    background: #f8f9fa
}

.ns-note .mod-mag-info .inner-mag-info {
    padding: 7px 25px 6px 25px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-info .inner-mag-info {
        padding: 5px 10px 4px 10px
    }
}

.ns-note .mod-mag-recommend ul li {
    padding: 10px 20px
}

.ns-note .mod-mag-recommend ul li .image {
    float: left;
    width: 60px;
    height: 60px;
    background: #efefef;
    margin-right: 10px
}

.ns-note .mod-mag-recommend ul li .txt {
    float: left;
    width: 390px;
    font-size: 15px;
    font-weight: bold
}

.ns-note .mod-mag-recommend ul li .follow {
    float: right;
    width: 68px
}

.ns-note .mod-mag-recommend ul li:last-child {
    border-bottom: none
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-recommend ul li {
        padding: 10px;
        display: -webkit-box;
        display: -moz-box
    }

    .ns-note .mod-mag-recommend ul li .image {
        float: none;
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1
    }

    .ns-note .mod-mag-recommend ul li .txt {
        float: none;
        font-size: 13px;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        margin-right: 10px
    }

    .ns-note .mod-mag-recommend ul li .follow {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3
    }
}

.ns-note .thumb-talk,
.ns-note .thumb-image,
.ns-note .thumb-text,
.ns-note .thumb-sound,
.ns-note .thumb-movie {
    width: 50px;
    height: 50px;
    display: block;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
    background-size: 50px 250px
}

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

    .ns-note .thumb-talk,
    .ns-note .thumb-image,
    .ns-note .thumb-text,
    .ns-note .thumb-sound,
    .ns-note .thumb-movie {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
        background-size: 50px 250px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

    .ns-note .thumb-talk,
    .ns-note .thumb-image,
    .ns-note .thumb-text,
    .ns-note .thumb-sound,
    .ns-note .thumb-movie {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
        background-size: 50px 250px
    }
}

.ns-note .thumb-talk {
    background-position: 0px 0px
}

.ns-note .thumb-image {
    background-position: 0px -50px
}

.ns-note .thumb-text {
    background-position: 0px -100px
}

.ns-note .thumb-sound {
    background-position: 0px -150px
}

.ns-note .thumb-movie {
    background-position: 0px -200px
}

.ns-note .thumb-talk--80,
.ns-note .thumb-image--80,
.ns-note .thumb-text--80,
.ns-note .thumb-sound--80,
.ns-note .thumb-movie--80 {
    width: 80px;
    height: 80px;
    display: block;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
    background-size: 80px 400px
}

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

    .ns-note .thumb-talk--80,
    .ns-note .thumb-image--80,
    .ns-note .thumb-text--80,
    .ns-note .thumb-sound--80,
    .ns-note .thumb-movie--80 {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
        background-size: 80px 400px
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

    .ns-note .thumb-talk--80,
    .ns-note .thumb-image--80,
    .ns-note .thumb-text--80,
    .ns-note .thumb-sound--80,
    .ns-note .thumb-movie--80 {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
        background-size: 80px 400px
    }
}

.ns-note .thumb-talk--80 {
    background-position: 0px 0px
}

.ns-note .thumb-image--80 {
    background-position: 0px -80px
}

.ns-note .thumb-text--80 {
    background-position: 0px -160px
}

.ns-note .thumb-sound--80 {
    background-position: 0px -240px
}

.ns-note .thumb-movie--80 {
    background-position: 0px -320px
}

.ns-note .thumb-talk-toc,
.ns-note .thumb-image-toc,
.ns-note .thumb-text-toc,
.ns-note .thumb-sound-toc,
.ns-note .thumb-movie-toc {
    width: 60px;
    height: 60px;
    display: block;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
    background-size: 60px 300px
}

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

    .ns-note .thumb-talk-toc,
    .ns-note .thumb-image-toc,
    .ns-note .thumb-text-toc,
    .ns-note .thumb-sound-toc,
    .ns-note .thumb-movie-toc {
        width: 50px;
        height: 50px;
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
        background-size: 50px 250px
    }
}

.ns-note .thumb-talk-toc {
    background-position: 0px 0px
}

.ns-note .thumb-image-toc {
    background-position: 0px -60px
}

@media only screen and (max-width: 480px) {
    .ns-note .thumb-image-toc {
        background-position: 0px -50px
    }
}

.ns-note .thumb-text-toc {
    background-position: 0px -120px
}

@media only screen and (max-width: 480px) {
    .ns-note .thumb-text-toc {
        background-position: 0px -100px
    }
}

.ns-note .thumb-sound-toc {
    background-position: 0px -180px
}

@media only screen and (max-width: 480px) {
    .ns-note .thumb-sound-toc {
        background-position: 0px -150px
    }
}

.ns-note .thumb-movie-toc {
    background-position: 0px -240px
}

@media only screen and (max-width: 480px) {
    .ns-note .thumb-movie-toc {
        background-position: 0px -200px
    }
}

.ns-note .thumb-talk-buybox,
.ns-note .thumb-image-buybox,
.ns-note .thumb-text-buybox,
.ns-note .thumb-sound-buybox,
.ns-note .thumb-movie-buybox {
    width: 60px;
    height: 60px;
    display: block;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/thumb_note-6ac37d0d2acd0b1d2ccff9e3d1c734da37dcd1513772d466524ed91157521af0.png) no-repeat;
    background-size: 60px 300px
}

.ns-note .thumb-talk-buybox {
    background-position: 0px 0px
}

.ns-note .thumb-image-buybox {
    background-position: 0px -60px
}

.ns-note .thumb-text-buybox {
    background-position: 0px -120px
}

.ns-note .thumb-sound-buybox {
    background-position: 0px -180px
}

.ns-note .thumb-movie-buybox {
    background-position: 0px -240px
}

.ns-note ul.sub-navbar {
    margin-bottom: 15px;
    background: #fff;
    border: 1px solid #E8ECEB;
    border-radius: 4px
}

.ns-note ul.sub-navbar li {
    position: relative;
    margin-top: -1px;
    border-bottom: 1px solid #E8ECEB
}

.ns-note ul.sub-navbar li:last-child {
    border-bottom: none
}

.ns-note ul.sub-navbar li a {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 13px
}

.ns-note ul.sub-navbar li .drop-arrow-btn {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -15px;
    cursor: pointer
}

.ns-note ul.sub-navbar li .drop-arrow-btn .down-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 50%;
    top: 50%;
    margin-top: 1px;
    margin-left: -5px
}

.ns-note ul.sub-navbar li .drop-arrow-btn .down-arrow:after {
    border: 5px solid transparent;
    border-top-color: #444444;
    border-top: 8px solid;
    content: ""
}

.ns-note ul.sub-navbar li .drop-arrow-btn .up-arrow {
    width: 10px;
    height: 10px;
    position: absolute;
    top: -50%;
    margin-top: 9px
}

.ns-note ul.sub-navbar li .drop-arrow-btn .up-arrow:after {
    border: 5px solid transparent;
    border-bottom-color: #444444;
    border-bottom: 8px solid;
    content: ""
}

@media only screen and (max-width: 480px) {
    .ns-note ul.sub-navbar {
        margin-bottom: 10px
    }

    .ns-note ul.sub-navbar li a {
        padding-left: 10px
    }

    .ns-note ul.sub-navbar li .drop-arrow-btn {
        right: 5px
    }
}

.ns-note .mod-salesmanage h2 {
    font-size: 20px;
    text-align: center;
    font-weight: normal;
    margin-bottom: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-salesmanage h2 {
        font-size: 17px;
        margin-bottom: 10px;
        margin-top: 5px;
        padding: 0 30px
    }
}

.ns-note .mod-salesmanage h2 .date {
    font-size: 12px;
    display: block
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-salesmanage h2.term-title {
        font-size: 15px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-salesmanage .date br {
        display: none
    }
}

.ns-note .mod-salesmanage .sales-box {
    margin-bottom: 25px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-salesmanage .sales-box {
        margin-bottom: 20px
    }
}

.ns-note .mod-salesmanage .bg-green {
    background-color: #41C9B4;
    color: #fff !important
}

.ns-note .mod-salesmanage .bg-green .btn {
    width: 45px;
    height: 24px;
    line-height: 25px;
    color: #41C9B4 !important;
    background: #fff;
    border: none;
    margin-right: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-salesmanage .bg-green .btn {
        line-height: 24px;
        margin-right: 5px
    }
}

.ns-note .mod-salesmanage .bg-green .btn:hover {
    border: none
}

.ns-note .mod-salesmanage .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5px
}

.ns-note .mod-salesmanage .table:last-child {
    margin-bottom: 0
}

.ns-note .mod-salesmanage .table th,
.ns-note .mod-salesmanage .table td {
    vertical-align: middle;
    padding: 10px 5px;
    border-top: 1px solid #f7f7f7;
    font-size: 12px
}

.ns-note .mod-salesmanage .table th.aligh-right,
.ns-note .mod-salesmanage .table td.aligh-right {
    text-align: right
}

.ns-note .mod-salesmanage .table tr:first-child th,
.ns-note .mod-salesmanage .table tr:first-child td {
    border-top: none
}

.ns-note .mod-salesmanage .table thead th,
.ns-note .mod-salesmanage .table thead td,
.ns-note .mod-salesmanage .table tbody th,
.ns-note .mod-salesmanage .table tbody td {
    border-bottom: none;
    padding: 5px 10px
}

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

    .ns-note .mod-salesmanage .table thead th,
    .ns-note .mod-salesmanage .table thead td,
    .ns-note .mod-salesmanage .table tbody th,
    .ns-note .mod-salesmanage .table tbody td {
        font-size: 11px;
        padding: 5px 5px
    }
}

.ns-note .mod-salesmanage .table thead th,
.ns-note .mod-salesmanage .table thead td {
    background: #f8f9fa
}

.ns-note .mod-salesmanage .table thead th.type-heading--th,
.ns-note .mod-salesmanage .table thead td.type-heading--th {
    font-size: 16px;
    background: transparent;
    padding: 0 0 10px 0;
    position: relative;
    margin-bottom: 10px
}

.ns-note .mod-salesmanage .table thead th.type-heading--th:before,
.ns-note .mod-salesmanage .table thead td.type-heading--th:before {
    content: "";
    display: block;
    border-top: solid 1px #e1e5e7;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: 1;
    margin-top: -6px
}

.ns-note .mod-salesmanage .table thead th.type-heading--th span,
.ns-note .mod-salesmanage .table thead td.type-heading--th span {
    background: #fff;
    padding: 0 10px 0 0;
    position: relative;
    z-index: 5
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-salesmanage .table.not-transfer .cell-2h {
        width: 33%
    }

    .ns-note .mod-salesmanage .table.not-transfer .cell-2h .space-l-1 {
        margin: 0
    }

    .ns-note .mod-salesmanage .table.not-transfer .cell-2h .space-r-1 {
        margin: 0
    }

    .ns-note .mod-salesmanage .table.not-transfer .cell-5 {
        width: 34%
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-salesmanage .table.sp-table-colum-5 th:nth-child(1) {
        width: 45px
    }

    .ns-note .mod-salesmanage .table.sp-table-colum-5 th:nth-child(2) {
        width: 70px
    }

    .ns-note .mod-salesmanage .table.sp-table-colum-5 th:nth-child(3) {
        width: 45px
    }

    .ns-note .mod-salesmanage .table.sp-table-colum-5 th:nth-child(4) {
        width: 40px
    }

    .ns-note .mod-salesmanage .table.sp-table-colum-5 th:nth-child(5) {
        width: 30px
    }
}

.ns-note .mod-salesmanage__attention {
    text-align: center;
    margin-bottom: 8px;
    color: #787c7b
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-salesmanage__attention {
        text-align: left
    }
}

.ns-note .mod-salesmanage__csvDownload {
    margin-top: 16px;
    margin-bottom: 32px;
    text-align: right
}

.ns-note .sales-data {
    padding: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .sales-data {
        padding: 5px
    }
}

.ns-note #modal-fancybox-inline,
.ns-note #modal-fancybox-inline-banktransferfee {
    width: 380px;
    background: #fff
}

.ns-note #modal-fancybox-inline .h-space-modal,
.ns-note #modal-fancybox-inline-banktransferfee .h-space-modal {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 35px;
    margin-left: 0px
}

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

    .ns-note #modal-fancybox-inline,
    .ns-note #modal-fancybox-inline-banktransferfee {
        width: 265px
    }

    .ns-note #modal-fancybox-inline .h-space-modal,
    .ns-note #modal-fancybox-inline-banktransferfee .h-space-modal {
        margin-top: 15px;
        margin-right: 0px;
        margin-bottom: 20px;
        margin-left: 0px
    }
}

.ns-note .loading-animation {
    width: 32px;
    height: 11px;
    margin: 40px auto;
    background-size: 32px 11px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/loading_32x32-bd379c404f16f2ec72c794f17b9eac6e4123ca2d0bcb8e5e2926c757b037aa52.gif)
}

@media only screen and (max-width: 480px) {
    .ns-note .loading-animation {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/loading_64x64-a06ed3f691d7613089dc3d781ae0a55e94be7a18ba624355447034ca9caba54b.gif)
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .loading-animation {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/loading_64x64-a06ed3f691d7613089dc3d781ae0a55e94be7a18ba624355447034ca9caba54b.gif)
    }
}

.ns-note .mod-mag-included {
    width: 100%;
    padding: 20px;
    margin-top: 60px;
    margin-bottom: 40px
}

.ns-note .mod-mag-included .image,
.ns-note .mod-mag-included .area-data {
    vertical-align: top
}

.ns-note .mod-mag-included .image {
    width: 110px
}

.ns-note .mod-mag-included .image a {
    width: 90px;
    display: block
}

.ns-note .mod-mag-included .image a img {
    width: 100%
}

.ns-note .mod-mag-included .area-data .txt {
    font-size: 12px;
    color: #898D8C;
    margin-bottom: 7px
}

.ns-note .mod-mag-included .area-data .txt a {
    color: #898D8C
}

.ns-note .mod-mag-included .area-data .txt a:hover {
    color: #41C9B4
}

.ns-note .mod-mag-included .area-data .name {
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 8px
}

.ns-note .mod-mag-included .area-data .button-medium,
.ns-note .mod-mag-included .area-data .button-small {
    margin-top: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-included {
        padding: 10px;
        margin-top: 30px;
        margin-bottom: 30px
    }

    .ns-note .mod-mag-included .image {
        width: 80px
    }

    .ns-note .mod-mag-included .image a {
        width: 70px;
        display: block
    }

    .ns-note .mod-mag-included .image a img {
        width: 100%
    }

    .ns-note .mod-mag-included .area-data .txt {
        font-size: 11px;
        margin-bottom: 3px
    }

    .ns-note .mod-mag-included .area-data .name {
        font-size: 13px;
        margin-bottom: 5px
    }

    .ns-note .mod-mag-included .area-data .button-medium {
        width: 120px;
        font-size: 11px;
        margin-top: 5px
    }
}

.ns-note .mod-mag-included-wrap {
    margin: 20px 45px 0 45px;
    background: #e8ebec
}

.ns-note .mod-mag-included-wrap>p {
    padding: 15px 15px 5px 15px
}

.ns-note .mod-mag-included-wrap ul.mod-mag-included {
    border: none;
    padding: 1px;
    margin: 0
}

.ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner {
    background: #fff;
    padding: 15px;
    margin-bottom: 10px
}

.ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner .image {
    width: 105px
}

.ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner .image a {
    width: 90px
}

.ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner .area-data .name {
    font-size: 13px;
    margin: 10px 0 5px 0
}

.ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner .area-data .description {
    font-size: 12px;
    line-height: 1.4
}

.ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner:last-child {
    margin-bottom: 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-included-wrap {
        margin: 10px 10px 0 10px
    }

    .ns-note .mod-mag-included-wrap>p {
        font-size: 11px
    }

    .ns-note .mod-mag-included-wrap ul.mod-mag-included {
        padding: 1px
    }

    .ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner {
        padding: 10px;
        margin-bottom: 5px
    }

    .ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner .area-data .name {
        font-size: 13px;
        margin: 0 0 5px 0
    }

    .ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner .image {
        width: 80px
    }

    .ns-note .mod-mag-included-wrap ul.mod-mag-included li.inner .image a {
        width: 70px
    }
}

.ns-note .mod-mag-table-of-contents>ul>li {
    background-color: #FFF;
    margin-bottom: 10px;
    position: relative
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-table-of-contents>ul>li {
        margin-bottom: 5px
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner {
        padding: 5px !important
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner .mod-note-status {
        top: 5px !important;
        right: 5px !important
    }
}

.ns-note .mod-mag-table-of-contents>ul>li .inner {
    padding: 10px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .image {
    float: left;
    width: 60px;
    height: 60px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .image img {
    width: 60px;
    height: 60px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .info {
    margin-left: 70px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .info .author {
    margin-right: 5px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .info .author a {
    font-size: 11px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .info .date a {
    font-size: 11px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .info .mod-note-status {
    top: 10px;
    right: 10px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .info .title {
    margin-top: 5px
}

.ns-note .mod-mag-table-of-contents>ul>li .inner .info .title a {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-table-of-contents>ul>li .inner .image {
        width: 50px;
        height: 50px
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner .image img {
        width: 50px;
        height: 50px
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner .info {
        margin-left: 60px
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner .info .author a {
        font-size: 10px
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner .info .date a {
        font-size: 10px
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner .info .date .time {
        display: none
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner .info .title {
        line-height: 1.2;
        margin-top: 3px
    }

    .ns-note .mod-mag-table-of-contents>ul>li .inner .info .title a {
        font-size: 11px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-table-of-contents>p {
        font-size: 11px;
        padding: 15px 10px
    }

    .ns-note .mod-mag-table-of-contents .mod-mag-included {
        padding: 0 15px 15px 15px
    }
}

.ns-note .mod-mag-table-of-contents .icn-talk,
.ns-note .mod-mag-table-of-contents .icn-image,
.ns-note .mod-mag-table-of-contents .icn-text,
.ns-note .mod-mag-table-of-contents .icn-sound,
.ns-note .mod-mag-table-of-contents .icn-movie {
    width: 20px;
    height: 20px;
    display: block;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_group_note_post-6cfe1f0b1973f5d57375f71cd0840597e290f488318c49f67eec1576d7ca67f8.png) no-repeat;
    background-size: 100px 20px;
    margin-right: 5px
}

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

    .ns-note .mod-mag-table-of-contents .icn-talk,
    .ns-note .mod-mag-table-of-contents .icn-image,
    .ns-note .mod-mag-table-of-contents .icn-text,
    .ns-note .mod-mag-table-of-contents .icn-sound,
    .ns-note .mod-mag-table-of-contents .icn-movie {
        width: 15px;
        height: 15px;
        background-size: 75px 15px
    }
}

.ns-note .mod-mag-table-of-contents .icn-talk {
    background-position: 0 0
}

.ns-note .mod-mag-table-of-contents .icn-text {
    background-position: -40px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-table-of-contents .icn-text {
        background-position: -30px 0
    }
}

.ns-note .mod-mag-table-of-contents .icn-image {
    background-position: -20px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-table-of-contents .icn-image {
        background-position: -15px 0
    }
}

.ns-note .mod-mag-table-of-contents .icn-sound {
    background-position: -60px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-table-of-contents .icn-sound {
        background-position: -45px 0
    }
}

.ns-note .mod-mag-table-of-contents .icn-movie {
    background-position: -80px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-mag-table-of-contents .icn-movie {
        background-position: -60px 0
    }
}

.ns-note .button-group .button .icon-30-tl-list,
.ns-note .button-group .button .icon-30-tl-list-toc {
    margin-top: -1px
}

.ns-note .button-group .button:hover .icon-30-tl-list,
.ns-note .button-group .button:hover .icon-30-tl-list-toc {
    background-position: 0px 0px
}

.ns-note .button-group .is--active .icon-30-tl-list,
.ns-note .button-group .is--active .icon-30-tl-list-toc {
    background-position: 0px -30px
}

.ns-note .button-group .is--active:hover .icon-30-tl-list,
.ns-note .button-group .is--active:hover .icon-30-tl-list-toc {
    background-position: 0px -30px
}

.ns-note .button-group.button-group--recommend {
    margin-top: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .button-group.button-group--recommend {
        margin-top: 10px
    }
}

.ns-note .button-group.button-group--recommend-sp-login {
    margin-top: 0
}

.ns-note .mod-pay-free-form {
    width: 60%
}

.ns-note .mod-pay-free-form .pay-free-button {
    position: relative;
    width: 50%;
    height: 40px;
    line-height: 38px
}

.ns-note .mod-pay-free-form .pay-free-button .icon-15 {
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -8px
}

.ns-note .mod-pay-free-form .pay-free-button .icon-15-check {
    display: none
}

.ns-note .mod-pay-free-form .pay-free-button.is-active {
    font-weight: bold;
    background-color: #f8f9fa
}

.ns-note .mod-pay-free-form .pay-free-button.is-active .icon-15-check {
    display: block
}

.ns-note .mod-pay-free-form .pay-free-form {
    position: relative
}

.ns-note .mod-pay-free-form .pay-free-form table {
    width: 100%;
    background-color: #f8f9fa;
    border: 1px solid #e1e5e7
}

.ns-note .mod-pay-free-form .pay-free-form table th,
.ns-note .mod-pay-free-form .pay-free-form table td {
    padding: 8px 0 8px 8px
}

.ns-note .mod-pay-free-form .pay-free-form table tr:nth-child(3) th,
.ns-note .mod-pay-free-form .pay-free-form table tr:nth-child(3) td {
    padding-top: 0
}

.ns-note .mod-pay-free-form .pay-free-form table tr:first-child {
    border-bottom: 1px solid #e1e5e7
}

.ns-note .mod-pay-free-form .pay-free-form table th {
    width: 40%
}

.ns-note .mod-pay-free-form .pay-free-form table td {
    width: 60%
}

.ns-note .mod-pay-free-form .pay-free-form table input[type="text"],
.ns-note .mod-pay-free-form .pay-free-form table select {
    width: 80%;
    white-space: nowrap
}

.ns-note .mod-pay-free-form .pay-free-form table label {
    margin-bottom: 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mod-pay-free-form {
        width: 100%
    }

    .ns-note .mod-pay-free-form .pay-free-form table tr:nth-child(2) td label {
        margin-top: -3px
    }

    .ns-note .mod-pay-free-form .pay-free-form table th,
    .ns-note .mod-pay-free-form .pay-free-form table td {
        font-size: 11px
    }
}

.ns-note .mod-pay-free-form.full {
    width: 100%
}

.ns-note .mod-pay-free-form--textnote {
    width: 100%;
    font-size: 12px;
    margin-top: -1px
}

.ns-note .balloon,
.ns-note .balloon:before {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    position: absolute;
    z-index: 10
}

.ns-note .balloon-lgrey {
    border-bottom-color: #e1e5e7
}

.ns-note .balloon-lgrey:before {
    content: "";
    border-bottom-color: #f8f9fa
}

.ns-note .balloon__pay-free-form {
    top: -20px;
    right: 22%
}

.ns-note .balloon__pay-free-form:before {
    top: -9px;
    right: -10px
}

.ns-note .ltd-tl-actions {
    height: 31px;
    line-height: 22px
}

.ns-note .ltd-tl-actions__item {
    margin-right: 10px
}

.ns-note .ltd-tl-actions__item>span {
    color: #898D8C
}

.ns-note .ltd-tl-actions__txt {
    margin: 6px 3px 0 5px
}

.ns-note .ltd-tl-actions__num {
    font-weight: bold;
    margin: 6px 0 0 5px
}

.ns-note .ltd-tl-actions__num--com {
    margin-left: 0
}

.ns-note .mod-like-btn {
    margin-right: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .ltd-tl-actions>li:nth-child(3) {
        display: none !important
    }

    .ns-note .ltd-tl-actions .ltd-tl-actions__item {
        margin-right: 0
    }

    .ns-note .ltd-tl-actions .ltd-tl-actions__item span {
        color: #222;
        font-size: 13px
    }

    .ns-note .ltd-tl-actions .mod-like-btn {
        margin-right: 5px
    }
}

.ns-note .modal-window {
    width: 380px;
    background: #fff;
    margin: 0 auto;
    border-radius: 4px
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window {
        width: 300px
    }
}

.ns-note .modal-window__head,
.ns-note .modal-window__head--payment,
.ns-note .register__title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    padding: 25px 16px 0 16px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: bold;
    letter-spacing: 0.03em
}

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

    .ns-note .modal-window__head,
    .ns-note .modal-window__head--payment,
    .ns-note .register__title {
        font-size: 16px
    }
}

.ns-note .modal-window__headHelp {
    margin-left: 8px;
    color: #A8ABB1;
    vertical-align: text-bottom
}

@media only screen and (min-width: 769px) {
    .ns-note .modal-window__headHelp:hover {
        color: #787C7B
    }
}

.ns-note .modal-window__head--title-grey {
    font-size: 20px;
    padding: 15px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__head--title-grey {
        font-size: 16px;
        padding: 10px 0
    }
}

.ns-note .modal-window__head--title {
    padding: 25px 0
}

.ns-note .modal-window__head--payment {
    padding-bottom: 0
}

.ns-note .modal-window__head--payment .head-link {
    display: block;
    font-size: 12px;
    font-weight: normal
}

.ns-note .modal-window__body {
    margin: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__body {
        margin: 10px
    }
}

.ns-note .modal-window__body--paddingWide {
    margin: 30px
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__body--paddingWide {
        margin: 20px
    }
}

.ns-note .modal-window__body--bd {
    padding: 10px
}

.ns-note .modal-window__body--size_small {
    padding: 10px
}

.ns-note .modal-window__body--narrow {
    padding: 0 20px
}

.ns-note .modal-window__body--grey {
    padding: 20px
}

.ns-note .modal-window__body--txt {
    font-size: 14px;
    text-align: center;
    padding: 12px 0 15px 0
}

.ns-note .modal-window__body--txt a {
    color: #249f80
}

.ns-note .modal-window__body--errorTxt {
    font-size: 13px;
    text-align: center;
    padding: 12px 15px 15px;
    margin: 0
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__body--errorTxt {
        margin: 0
    }
}

.ns-note .modal-window__body--errorTxt a {
    color: #249f80
}

.ns-note .modal-window__body--buttonList {
    width: 100%;
    padding: 12px 0 0 0
}

.ns-note .modal-window__body--buttonListItem {
    width: 100%;
    margin-bottom: 8px
}

.ns-note .modal-window__body--buttonListItem:last-child {
    margin-bottom: 0
}

.ns-note .modal-window__txt-box {
    font-size: 13px;
    text-align: center
}

.ns-note .modal-window__mag-cover {
    float: left;
    width: 95px
}

.ns-note .modal-window__mag-cover img {
    width: 80px
}

.ns-note .modal-window__mag-cover.modal-window__mag-cover--size_small {
    width: 64px
}

.ns-note .modal-window__mag-cover.modal-window__mag-cover--size_small img {
    width: 48px
}

.ns-note .cover-img .cover-img__note-logo {
    width: 80px;
    height: 80px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/default/default_note_logo-100a27d592505c50c29b032c0554570c955f312b8937727c8777fd87b3068c71.png);
    background-size: 80px 80px
}

.ns-note .modal-window__mag-data {
    margin-left: 95px
}

.ns-note .modal-window__mag-data>p {
    line-height: 1.2
}

.ns-note .modal-window__mag-data.modal-window__mag-data--size_small {
    margin-left: 64px
}

.ns-note .modal-window__mag-data .paywall__count {
    margin-top: 8px;
    color: #787c7b;
    line-height: 1.5
}

.ns-note .modal-window__mag-data .paywall__countWarning {
    color: #F95
}

.ns-note .modal-window__mag-data .paywall__countText {
    padding-left: 4px
}

.ns-note .modal-window__mag-data .paywall__countDivider {
    padding-left: 4px;
    padding-right: 4px
}

.ns-note .modal-window__mag-name {
    padding: 10px 0 5px 0;
    font-size: 14px;
    font-weight: bold
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__mag-name {
        font-size: 13px
    }
}

.ns-note .modal-window__mag-author {
    padding-bottom: 10px
}

.ns-note .modal-window__mag-price,
.ns-note .modal-window__mag-option {
    font-weight: bold;
    font-size: 13px
}

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

    .ns-note .modal-window__mag-price,
    .ns-note .modal-window__mag-option {
        font-size: 12px
    }
}

.ns-note .modal-window__mag-option {
    padding-top: 5px
}

.ns-note .modal-window__mag-coupon {
    padding-top: 7px
}

.ns-note .modal-window__table {
    clear: both;
    margin-top: 10px;
    padding-top: 10px
}

.ns-note .modal-window__table table {
    width: 100%
}

.ns-note .modal-window__table table tr th,
.ns-note .modal-window__table table tr td {
    font-size: 12px;
    font-weight: normal;
    padding: 2px 0
}

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

    .ns-note .modal-window__table table tr th,
    .ns-note .modal-window__table table tr td {
        font-size: 11px
    }
}

.ns-note .modal-window__table table tr td {
    text-align: right
}

.ns-note .modal-window__table.table--no-bd {
    margin-top: 0;
    padding-top: 0;
    border: none
}

.ns-note .modal-window__table.table--support-amount {
    padding-top: 5px
}

.ns-note .modal-window__caption {
    background-color: #f8f9fa;
    font-size: 11px;
    padding: 7px;
    margin-top: 10px;
    color: #777
}

.ns-note .modal-window__border-box {
    padding: 10px;
    text-align: left
}

.ns-note .modal-window__foot,
.ns-note .modal-window__foot--close {
    padding: 10px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px
}

.ns-note .modal-window__foot ul>li,
.ns-note .modal-window__foot--close ul>li {
    float: right
}

.ns-note .modal-window__foot ul>li:first-child,
.ns-note .modal-window__foot--close ul>li:first-child {
    float: left
}

.ns-note .modal-window__foot--center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .modal-window__foot--center ul>li {
    float: none
}

.ns-note .modal-window__foot--button {
    margin-top: 16px
}

.ns-note .modal-window__foot--buttonList {
    padding: 16px 8px 0px 8px
}

.ns-note .modal-window__foot--close {
    text-align: center
}

.ns-note .modal-window__error {
    color: #ff0000;
    text-align: center;
    margin-bottom: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__error {
        margin-bottom: 10px
    }
}

.ns-note .modal-window__total-amount {
    padding: 5px 10px;
    margin: 5px -10px -10px -10px
}

.ns-note .modal-window__total-amount th,
.ns-note .modal-window__total-amount td {
    font-weight: bold !important
}

.ns-note .modal-window__sns {
    padding: 10px
}

.ns-note .modal-window__btn-facebook,
.ns-note .modal-window__btn-twitter {
    width: 48.5%
}

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

    .ns-note .modal-window__btn-facebook .icon-small,
    .ns-note .modal-window__btn-twitter .icon-small {
        left: 10px
    }
}

.ns-note .modal-window__btn-facebook {
    float: left
}

.ns-note .modal-window__btn-twitter {
    float: right
}

.ns-note .sns-btn-txt {
    font-size: 12px;
    margin-left: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .sns-btn-txt {
        margin-left: 15px
    }
}

.ns-note .modal-window__register {
    padding: 30px
}

.ns-note .modal-window__register .modal-window__head,
.ns-note .modal-window__register .modal-window__head--payment,
.ns-note .modal-window__register .register__title {
    line-height: 1.4
}

.ns-note .modal-window__register .modal-window__foot,
.ns-note .modal-window__register .modal-window__foot--close {
    background-color: #fff;
    border: none
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__register {
        padding: 0px
    }
}

.ns-note .modal-window__textLink {
    font-size: 12px;
    font-weight: normal;
    color: #3BC49D
}

.ns-note .modal-window__subtitle {
    font-weight: bold;
    margin-bottom: 5px
}

.ns-note .modal-window__secondContents {
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #e1e5e7
}

.ns-note .modal-window__secondContentsHeadline {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
    text-align: center
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__secondContentsHeadline {
        font-size: 16px
    }
}

.ns-note .modal-window--split>.modal-window__head,
.ns-note .modal-window--split>.modal-window__head--payment,
.ns-note .modal-window--split>.register__title {
    padding: 30px 0 0 0;
    font-size: 16px
}

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

    .ns-note .modal-window--split>.modal-window__head,
    .ns-note .modal-window--split>.modal-window__head--payment,
    .ns-note .modal-window--split>.register__title {
        font-size: 14px
    }
}

.ns-note .modal-window--split>.modal-window__body {
    margin: 0 50px;
    padding: 15px 0 30px 0
}

.ns-note .modal-window--split>.modal-window__body.modal-window__body--split {
    border-bottom: 1px solid #e1e5e7
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window--split>.modal-window__body {
        padding: 15px 0 30px 0
    }
}

.ns-note .modal-window--split>.modal-window__body>.renewal-c-button--primaryFull {
    font-size: 14px
}

.ns-note .modal-contents ol,
.ns-note .modal-contents ul {
    text-align: left
}

.ns-note .modal-contents>p {
    text-align: center
}

.ns-note .modal-contents .modal-contents__orderNum {
    font-size: 16px;
    text-align: center
}

.ns-note .modal-contents .modal-contents__alertText {
    color: #ED4956;
    font-weight: bold;
    text-align: center
}

.ns-note .modal-contents .modal-contents__points {
    background: #f8f9fa;
    border: 1px solid #e1e5e7;
    padding: 10px;
    text-align: left
}

.ns-note .modal-contents .modal-contents__points.modal-contents__points--scroll {
    height: 150px;
    overflow-y: scroll;
    border-right: none
}

.ns-note .modal-contents ol>li {
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.4
}

.ns-note .modal-contents ol>li:last-child {
    margin-bottom: 0
}

.ns-note .modal-contents ul {
    margin-top: 5px
}

.ns-note .modal-contents ul>li {
    font-weight: normal;
    line-height: 1.8
}

.ns-note .modal-contents .modal-contents__img {
    display: block;
    margin: 0 auto
}

.ns-note .modal-contents .modal-contents__premiumHeading {
    font-weight: bold;
    margin-bottom: 5px
}

.ns-note .modal-contents .modal-contents__premiumText {
    color: #777
}

.ns-note .modal-contents.modal-contents--errorPremium {
    background: #f8f9fa;
    border: 1px solid #e1e5e7;
    padding: 15px 8px;
    background: #f8f9fa url(https://d2l930y2yx77uc.cloudfront.net/assets/bg_pattern_grey-df1490bdac933ffc990f656f4bb730844de1d4c00680d02f0acb51cd5a56a02f.svg) no-repeat;
    background-position: center;
    background-size: 650px
}

.ns-note .button--draft {
    float: right;
    margin-right: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .button--draft {
        margin-right: 5px
    }
}

.ns-note .modal-window__head--registration {
    padding: 25px 0;
    border-bottom: 1px solid #efefef;
    border-radius: 4px 4px 0 0;
    background: #F7F9F9
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__head--registration {
        padding: 20px 0
    }
}

.ns-note .modal-window__head--registration h2 {
    letter-spacing: 0;
    line-height: 1.4
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__head--registration h2 {
        font-size: 14px
    }
}

.ns-note .modal-window__head--registration a {
    display: block;
    margin-top: 15px;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    color: #41C9B4
}

.ns-note .modal-window__body--noUrl {
    margin: 30px 30px 20px 30px
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__body--noUrl {
        margin: 20px 20px 10px 20px
    }
}

.ns-note .modal-window__foot--noUrl {
    padding: 0 30px;
    border-top: none;
    background: transparent
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__foot--noUrl {
        padding: 0 20px
    }
}

.ns-note .noUrlModal__formLabel {
    font-size: 13px;
    font-weight: bold
}

@media only screen and (max-width: 480px) {
    .ns-note .noUrlModal__formLabel {
        font-size: 12px
    }
}

.ns-note .noUrlModal__formLabel>span {
    font-weight: normal
}

@media only screen and (max-width: 480px) {
    .ns-note .noUrlModal__formLabel>span {
        font-size: 11px
    }
}

.ns-note .noUrlModal__input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #e1e5e7;
    border-radius: 4px;
    -webkit-transition: .1s background-color, .1s border-color, .1s color, .1s fill;
    transition: .1s background-color, .1s border-color, .1s color, .1s fill
}

@media only screen and (max-width: 480px) {
    .ns-note .noUrlModal__input {
        font-size: 12px
    }
}

.ns-note .noUrlModal__input.is-focus {
    border: 1px solid #3BC49D
}

.ns-note .noUrlModal__input>p {
    max-width: 100px
}

.ns-note .noUrlModal__input>input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 5px;
    border: none
}

.ns-note .noUrlModal__input>input:focus {
    border: none
}

.ns-note .noUrlModal__Annotation>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: top;
    -ms-flex-align: top;
    align-items: top;
    font-size: 11px;
    color: #777;
    margin-bottom: 3px
}

.ns-note .noUrlModal__Annotation>li:last-child {
    margin-bottom: 0
}

.ns-note .noUrlModal__textLink {
    padding: 0 30px 30px 30px;
    text-align: center
}

@media only screen and (max-width: 480px) {
    .ns-note .noUrlModal__textLink {
        padding: 0 20px 20px 20px
    }
}

.ns-note .noUrlModal__textLink>a {
    display: inline-block;
    font-size: 12px;
    color: #41C9B4
}

.ns-note .coupon-form {
    margin-top: 7px
}

.ns-note .coupon-form .coupon-form__wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .coupon-form .coupon-form__input {
    width: 100%;
    max-height: 26px;
    padding: 5px !important;
    font-size: 12px
}

.ns-note .coupon-form .coupon-form__link {
    width: 3em;
    text-align: center;
    margin-left: 0.5em;
    margin-right: 0.5em;
    font-size: 12px
}

.ns-note .coupon-form .coupon-form__error {
    font-size: 11px;
    margin-top: 5px;
    color: #ff0000
}

.ns-note .tl-movie-limited {
    display: block;
    width: 100%;
    height: 300px;
    border: 1px solid #f8f9fa;
    background: #f8f9fa url(https://d2l930y2yx77uc.cloudfront.net/assets/img_movie_limited-1188b692077da5500f9f04d924da342a40f78081418314b74d7815c37e92982a.png) no-repeat center 75px;
    position: relative
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .tl-movie-limited {
        background: #f8f9fa url(https://d2l930y2yx77uc.cloudfront.net/assets/img_movie_limited_retina-ce864bc88a574ef02fa80897d17e3147c99ff535d87c288fd5bca01f7c4a1410.png) no-repeat center 75px;
        background-size: 80px 99px
    }
}

.ns-note .tl-movie-limited.page {
    height: 340px;
    border: 1px solid #f8f9fa;
    background-position: center 90px
}

.ns-note .tl-movie-limited>p {
    text-align: center;
    font-size: 14px;
    margin-top: 200px;
    color: #bdc3c7
}

@media only screen and (max-width: 480px) {
    .ns-note .tl-movie-limited {
        max-height: 170px;
        background: #f8f9fa url(https://d2l930y2yx77uc.cloudfront.net/assets/img_movie_limited_retina-ce864bc88a574ef02fa80897d17e3147c99ff535d87c288fd5bca01f7c4a1410.png) no-repeat center 25px;
        background-size: 60px 74px
    }

    .ns-note .tl-movie-limited.page {
        border: 1px solid #f8f9fa;
        max-height: 190px;
        background-position: center 35px
    }

    .ns-note .tl-movie-limited.page>p {
        margin-top: 125px
    }

    .ns-note .tl-movie-limited>p {
        font-size: 12px;
        margin-top: 115px
    }
}

.ns-note .note-info {
    width: 100%;
    margin: 40px 0 40px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width: 480px) {
    .ns-note .note-info {
        width: 100%;
        display: block;
        margin: 24px 0 24px 0
    }
}

.ns-note .note-info__profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media only screen and (max-width: 480px) {
    .ns-note .note-info__profile {
        width: 100%;
        margin-bottom: 16px
    }
}

.ns-note .note-info__profile-l {
    width: 80px;
    margin-right: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .note-info__profile-l {
        width: 70px
    }
}

.ns-note .note-info__profile-r {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .note-info__profileFollow {
    position: relative
}

.ns-note .note-info__mag {
    margin-left: 32px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media only screen and (max-width: 480px) {
    .ns-note .note-info__mag {
        margin-left: 0
    }
}

.ns-note .note-info__mag-l {
    width: 75px;
    display: table-cell
}

@media only screen and (max-width: 480px) {
    .ns-note .note-info__mag-l {
        width: 70px
    }
}

.ns-note .note-info__mag-r {
    width: 235px;
    display: table-cell;
    vertical-align: top;
    padding-left: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .note-info__mag-r {
        width: auto;
        padding-left: 16px
    }
}

.ns-note .note-info__other {
    font-size: 11px;
    line-height: 1.3;
    margin-bottom: 7px
}

.ns-note .note-info__img {
    margin: 0 auto
}

@media only screen and (max-width: 480px) {
    .ns-note .note-info__img {
        width: 60px
    }
}

.ns-note .note-info__img img {
    width: 100%
}

@media only screen and (max-width: 480px) {
    .ns-note .note-info__mag .note-info__img {
        width: 60px
    }
}

.ns-note .note-info__head {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 5px
}

.ns-note .note-info__body {
    font-size: 12px;
    margin-bottom: 7px;
    word-break: break-all;
    word-wrap: break-word
}

.ns-note .pager {
    width: 100%;
    display: table;
    position: relative;
    margin-top: -1px
}

.ns-note .pager__division {
    position: absolute;
    width: 1px;
    left: 50%;
    top: 20px;
    background-color: #E1E5E7;
    display: block
}

@media only screen and (max-width: 480px) {
    .ns-note .pager__division {
        top: 10px
    }
}

.ns-note .pager__prev,
.ns-note .pager__next {
    display: table-cell;
    width: 50%;
    vertical-align: middle
}

.ns-note .pager__prev a,
.ns-note .pager__next a {
    line-height: 1.3;
    display: block;
    background-repeat: no-repeat;
    background-size: 20px 20px !important;
    font-size: 13px;
    margin: 15px 0;
    padding: 5px 0
}

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

    .ns-note .pager__prev a,
    .ns-note .pager__next a {
        margin: 10px 0
    }
}

.ns-note .pager__prev {
    text-align: left
}

.ns-note .pager__prev a {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_prev-7b6c608d8658d11870d79d7523ac6f8fe9f434682362582c66f255b1fd85b309.png);
    background-position: left;
    padding-left: 25px;
    padding-right: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .pager__prev a {
        padding-left: 22px;
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_prev_retina-88d2b48173eb910459a32830cb6c6434dcfae7d7c3cf68a15d60e5bd7e9bc1bd.png)
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .pager__prev a {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_prev_retina-88d2b48173eb910459a32830cb6c6434dcfae7d7c3cf68a15d60e5bd7e9bc1bd.png)
    }
}

.ns-note .pager__next {
    text-align: right
}

.ns-note .pager__next a {
    text-align: right;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_next-6d447d2beba55c860081aea1cb0dea38d0e53497c11bef7e04822e6d19d4ca3a.png);
    background-position: right;
    padding-right: 25px;
    padding-left: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .pager__next a {
        padding-right: 22px;
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_next_retina-b9fd0cf8709b5c9d756b45af1d512dc439f2629d434d81c2ddee84babda8affc.png)
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .pager__next a {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_next_retina-b9fd0cf8709b5c9d756b45af1d512dc439f2629d434d81c2ddee84babda8affc.png)
    }
}

.ns-note .pager__label {
    margin-bottom: 3px
}

@media only screen and (max-width: 480px) {
    .ns-note .pager__label {
        margin-bottom: 0
    }
}

.ns-note .pager__title {
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
    word-wrap: break-word
}

@media only screen and (max-width: 480px) {
    .ns-note .pager__title {
        font-size: 13px
    }
}

.ns-note .purchaser table {
    width: 100%;
    font-size: 12px
}

.ns-note .purchaser table tr {
    width: 100%;
    border-bottom: 1px solid #eee
}

.ns-note .purchaser table tr:last-child {
    border-bottom: none
}

.ns-note .purchaser table tr th {
    padding: 4px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (max-width: 480px) {
    .ns-note .purchaser table tr th {
        font-size: 12px
    }
}

.ns-note .purchaser table tr td {
    padding: 8px 4px
}

.ns-note .purchaser__date {
    width: 60px;
    max-width: 60px;
    vertical-align: middle
}

@media only screen and (max-width: 480px) {
    .ns-note .purchaser__date {
        width: 45px;
        max-width: 45px
    }
}

.ns-note td.purchaser__date {
    color: #787c7b
}

.ns-note td.purchaser__date P {
    font-size: 11px
}

.ns-note .purchaser__title {
    width: 270px;
    max-width: 270px;
    padding-top: 8px;
    padding-bottom: 8px
}

.ns-note .purchaser__title a {
    margin-top: 3px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (max-width: 480px) {
    .ns-note .purchaser__title {
        width: 80px;
        max-width: 80px
    }
}

.ns-note td.purchaser__title {
    font-size: 14px
}

@media only screen and (max-width: 480px) {
    .ns-note td.purchaser__title {
        font-size: 12px
    }
}

.ns-note .purchaser__price {
    width: 60px;
    max-width: 60px;
    vertical-align: middle;
    white-space: nowrap
}

@media only screen and (max-width: 480px) {
    .ns-note .purchaser__price {
        width: 45px;
        max-width: 45px
    }
}

.ns-note .purchaser__name {
    width: 120px;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle
}

@media only screen and (max-width: 480px) {
    .ns-note .purchaser__name {
        width: 50px;
        max-width: 50px;
        padding-right: 0
    }
}

.ns-note td.purchaser__name {
    font-size: 12px
}

@media only screen and (max-width: 480px) {
    .ns-note td.purchaser__name {
        padding-left: 4px;
        padding-right: 4px
    }
}

.ns-note .purchaser__messeage {
    width: 32px;
    max-width: 32px;
    text-align: center;
    vertical-align: middle
}

.ns-note .type-label {
    width: 50px;
    padding: 4px 0 3px 0;
    font-size: 10px;
    line-height: 1;
    text-align: center
}

.ns-note .type-label.type-label--grey {
    background-color: #bdc3c7;
    color: #fff
}

.ns-note .empty-area {
    padding: 30px
}

.ns-note .empty-area>p {
    text-align: center
}

@media only screen and (max-width: 480px) {
    .ns-note .empty-area {
        padding: 10px
    }
}

.ns-note .support-message-confirm {
    padding-top: 12px;
    margin-top: 10px
}

.ns-note .support-checkbox-btn>input {
    margin: -1px 5px 0 0
}

.ns-note .support-checkbox-btn>label {
    font-size: 13px;
    margin-bottom: 0;
    cursor: pointer
}

.ns-note .thx-message {
    margin-top: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .thx-message {
        margin-top: 10px
    }
}

.ns-note .thx-message__body>textarea {
    width: 100%;
    height: 90px;
    margin-bottom: 10px
}

.ns-note .thx-message__caption {
    margin-bottom: 8px;
    font-weight: bold;
    line-height: 1
}

.ns-note .thx-message__ul>li,
.ns-note .thx-message__ul--float>li {
    float: left;
    text-align: center
}

.ns-note .thx-message__ul>li>label,
.ns-note .thx-message__ul--float>li>label {
    display: inline;
    margin-bottom: 0
}

.ns-note .thx-message__ul>li:last-child,
.ns-note .thx-message__ul--float>li:last-child {
    float: right
}

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

    .ns-note .thx-message__ul>li:first-child,
    .ns-note .thx-message__ul>li:last-child,
    .ns-note .thx-message__ul--float>li:first-child,
    .ns-note .thx-message__ul--float>li:last-child {
        float: none
    }
}

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

    .ns-note .thx-message__ul>li:first-child,
    .ns-note .thx-message__ul--float>li:first-child {
        margin-bottom: 10px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .thx-message__ul--float>li:first-child {
        float: left;
        margin-bottom: 0
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .thx-message__ul--float>li:last-child {
        float: right
    }
}

.ns-note .modal-window__body--completion {
    padding: 40px 30px;
    text-align: center
}

.ns-note .modal-window__body--completion>button {
    margin: 20px auto 0 auto
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window__body--completion {
        padding: 30px
    }
}

.ns-note .modal-window__body--completion.body--completion--first-line {
    padding: 60px 30px
}

.ns-note .support-note {
    width: 100%;
    padding: 10px;
    margin-bottom: 30px
}

@media only screen and (max-width: 480px) {
    .ns-note .support-note {
        margin-bottom: 20px
    }
}

.ns-note .support-note__body {
    text-align: center
}

.ns-note .support-note__p {
    font-size: 14px;
    font-weight: bold;
    margin-right: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .support-note__p {
        font-size: 13px;
        display: block;
        margin: 0 0 5px 0
    }
}

.ns-note .support-note__button {
    width: auto;
    height: 34px
}

@media only screen and (max-width: 480px) {
    .ns-note .support-note__button {
        display: block
    }
}

.ns-note .payment-info {
    text-align: right;
    padding: 0 20px 15px 15px
}

.ns-note .payment-info a {
    margin-left: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .payment-info {
        padding: 5px 20px 15px 10px
    }
}

.ns-note .confirm-list>dt {
    font-weight: bold;
    margin-bottom: 3px
}

.ns-note .confirm-list>dd {
    margin-bottom: 20px
}

.ns-note .confirm-list>dd:last-child {
    margin-bottom: 0
}

.ns-note .hashtag-list {
    position: relative;
    margin-bottom: 24px;
    margin-top: 24px;
    min-height: 24px
}

@media only screen and (max-width: 480px) {
    .ns-note .hashtag-list__sort-nav {
        width: 100%
    }
}

.ns-note .hashtag-list__rss {
    position: absolute;
    right: 0;
    bottom: 0
}

.ns-note .hashtag-list__rss a {
    color: #A8ABB1;
    display: block;
    line-height: 1
}

@media only screen and (min-width: 769px) {
    .ns-note .hashtag-list__rss a {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .hashtag-list__rss a:hover {
        color: #222222
    }
}

.ns-note .mod-talknote a:not(.link-green),
.ns-note .mod-txtnote a:not(.link-green),
.ns-note .note-description a:not(.link-green),
.ns-note .img-caption a:not(.link-green),
.ns-note .talk-wrap a:not(.link-green) {
    color: #222;
    text-decoration: underline
}

.ns-note .mod-talknote a:not(.link-green):hover,
.ns-note .mod-txtnote a:not(.link-green):hover,
.ns-note .note-description a:not(.link-green):hover,
.ns-note .img-caption a:not(.link-green):hover,
.ns-note .talk-wrap a:not(.link-green):hover {
    color: #222;
    text-decoration: none
}

.ns-note .app-install-promotion {
    position: relative;
    padding: 10px 0
}

.ns-note .app-install-promotion__img {
    float: left;
    width: 100px;
    height: 98px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/img_app-install-promotion-560d94b5b39edc5a26fd25ee8676971d5f7ede7bd2fb8b96e8e81f1a2f6ddb3c.png);
    background-size: 100px 98px;
    background-repeat: no-repeat
}

.ns-note .app-install-promotion__body {
    width: 230px;
    margin: 30px auto 0 auto
}

.ns-note .app-install-promotion__body>h3 {
    float: left;
    font-size: 14px;
    margin: 10px 10px 0 0
}

.ns-note .app-install-post-note {
    width: 280px;
    margin: 40px auto
}

.ns-note .app-install-post-note>h3 {
    font-size: 14px;
    text-align: center
}

.ns-note .app-install-promotion__button {
    margin-top: 15px
}

.ns-note .app-install-promotion__close {
    position: absolute;
    top: 10px;
    right: 0px
}

.ns-note .get-urlname>ul {
    width: 280px;
    margin: 0 auto 20px auto
}

@media only screen and (max-width: 480px) {
    .ns-note .get-urlname>ul {
        width: 260px
    }
}

.ns-note .get-urlname li {
    float: left;
    width: 80px;
    margin-right: 20px
}

.ns-note .get-urlname li>p {
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    font-weight: bold;
    margin-top: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .get-urlname li>p {
        font-size: 11px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .get-urlname li {
        margin-right: 10px
    }
}

.ns-note .get-urlname li:last-child {
    margin-right: 0
}

.ns-note .get-urlname__input {
    padding: 10px;
    text-align: center;
    cursor: text
}

.ns-note .get-urlname__input>p:first-child {
    font-size: 17px;
    font-weight: bold;
    color: #3ba6b9;
    margin-right: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .get-urlname__input>p:first-child {
        font-size: 13px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .get-urlname__input {
        padding: 5px
    }
}

.ns-note .get-urlname__nickname>p {
    font-weight: bold;
    margin-bottom: 5px
}

.ns-note .register-container {
    width: 360px;
    background: #fff;
    margin: 0 auto;
    padding: 20px
}

.ns-note .register-container.inner-3 {
    padding: 30px
}

.ns-note .register-container .modal-window__foot,
.ns-note .register-container .modal-window__foot--close {
    background-color: #fff;
    border: none
}

@media only screen and (max-width: 480px) {
    .ns-note .register-container {
        width: 300px
    }
}

.ns-note .register__title-container {
    margin-bottom: 15px
}

.ns-note .register__title {
    font-size: 22px;
    line-height: 1.3
}

.ns-note .register__sub-title {
    font-weight: bold;
    text-align: center;
    margin: 20px 0 10px 0
}

.ns-note .register__mini-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px
}

.ns-note .register__lead {
    text-align: center
}

@media only screen and (max-width: 480px) {
    .ns-note .register__lead {
        font-size: 11px
    }
}

.ns-note .register__login {
    margin-top: 15px;
    padding: 15px
}

.ns-note .register__alert {
    text-align: center;
    padding: 10px;
    margin: 10px 0
}

.ns-note .register__mask {
    margin: 0 auto 20px auto;
    text-align: center
}

.ns-note .register__mask img {
    border-radius: 8px !important
}

.ns-note .masonry-brick {
    padding-left: 20px;
    width: 33%;
    float: left
}

.ns-note .tdn-wrapper {
    width: 1110px;
    margin: 0 auto
}

.ns-note .tdn-units {
    width: 360px;
    float: left;
    margin: 0 5px 10px 5px
}

.ns-note .tdn-units .inner-timeline {
    padding: 10px !important
}

.ns-note .tdn-units .mod-author-date {
    margin-bottom: 10px !important;
    position: relative
}

.ns-note .tdn-units .mod-author-date .icon-new-user {
    background-color: #ff0000;
    color: #fff;
    font-size: 11px;
    display: block;
    width: 40px;
    position: absolute;
    text-align: center;
    top: 23px;
    left: 50px
}

.ns-note .tdn-units .note-title {
    font-size: 18px !important;
    margin-bottom: 10px !important
}

.ns-note .tdn-units .note-eyecatch {
    margin-bottom: 10px !important
}

.ns-note .tdn-units .txt {
    font-size: 13px !important
}

.ns-note .tdn-units .sound-title {
    font-size: 13px !important;
    width: 220px !important;
    padding-right: 0 !important
}

.ns-note .tdn-units .sound-author {
    font-size: 12px !important;
    width: 220px !important;
    padding-right: 0 !important
}

.ns-note .tdn-units .tdn-mod-count {
    margin-left: -10px;
    margin-bottom: -10px;
    margin-top: 20px;
    width: 360px;
    padding: 10px;
    background-color: #f8f9fa;
    border-top: 1px solid #e1e5e7;
    line-height: 1
}

.ns-note .tdn-units .tdn-mod-count>ul {
    padding-bottom: 10px
}

.ns-note .tdn-units .tdn-mod-count li {
    color: #444444;
    font-weight: bold;
    margin-right: 10px;
    font-size: 12px
}

.ns-note .tdn-units .tdn-mod-count li span {
    font-family: helvetica;
    font-size: 18px;
    padding-left: 5px
}

.ns-note .tdn-pagenation {
    font-family: helvetica;
    text-align: center;
    margin-bottom: 20px
}

.ns-note .tdn-pagenation span {
    font-size: 30px;
    margin: 0 20px
}

.ns-note .tdn-tabmenu {
    width: 350px;
    margin: 0 auto 30px auto
}

.ns-note .tdn-tabmenu .tabs {
    float: left;
    width: 40px;
    margin: 0 5px;
    text-align: center;
    position: relative
}

.ns-note .tdn-tabmenu .tabs a {
    display: block;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: block;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_group_tdn-d5b5d221dd151cbdee8f50e5a7d14b59902d49100e57d1c2c40151725e3d5b1e.png) no-repeat
}

.ns-note .tdn-tabmenu .tabs a.icn-all {
    background-position: 0 0
}

.ns-note .tdn-tabmenu .tabs a.icn-talk {
    background-position: -40px 0
}

.ns-note .tdn-tabmenu .tabs a.icn-image {
    background-position: -80px 0
}

.ns-note .tdn-tabmenu .tabs a.icn-text {
    background-position: -120px 0
}

.ns-note .tdn-tabmenu .tabs a.icn-sound {
    background-position: -160px 0
}

.ns-note .tdn-tabmenu .tabs a.icn-movie {
    background-position: -200px 0
}

.ns-note .tdn-tabmenu .tabs a.icn-sell {
    background-position: -240px 0
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .tdn-tabmenu .tabs .icn {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_group_tdn@2x-f67ae28cc80252174a044405093d456443209ed3b8b806844538dbb5bc2a38cf.png) no-repeat;
        background-size: 280px 40px
    }
}

.ns-note .tdn-sortmenu {
    text-align: center;
    margin-bottom: 60px
}

.ns-note .tdn-sortmenu li {
    padding: 0 2px
}

.ns-note .registration-promotion__close {
    position: absolute;
    top: 10px;
    right: 10px
}

.ns-note .user-list>li {
    text-align: left;
    list-style: none;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer
}

.ns-note .user-list a {
    padding: 12px 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box
}

.ns-note .user-list a .user-list__name {
    color: #222
}

.ns-note .user-list a .user-list__url-name {
    color: #898D8C
}

.ns-note .user-list .user-list__eyecatch {
    width: 40px;
    -webkit-box-ordinal-group: 1;
    -ms-box-ordinal-group: 1;
    -o-box-ordinal-group: 1;
    box-ordinal-group: 1
}

.ns-note .user-list .user-list__body {
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-box-ordinal-group: 2;
    -ms-box-ordinal-group: 2;
    -o-box-ordinal-group: 2;
    box-ordinal-group: 2
}

.ns-note .user-list .user-list__name {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: -2px
}

.ns-note .user-list .user-list__url-name {
    font-size: 11px;
    color: #898D8C
}

.ns-note .user-search {
    border-top: 1px solid #efefef
}

.ns-note .user-search a {
    background: #fff
}

.ns-note .user-search a:hover {
    background: #efefef
}

.ns-note .post-ui {
    font-size: 12px
}

.ns-note .post-ui label {
    overflow: visible
}

.ns-note .post-ui .post-ui__wrap {
    margin: 15px 0
}

.ns-note .post-ui .post-ui__item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px
}

.ns-note .post-ui .post-ui__item:last-child {
    margin-bottom: 0
}

.ns-note .post-ui .post-ui__name {
    font-weight: bold;
    text-align: right;
    max-width: 88px;
    margin-right: 10px;
    -ms-flex-basis: 88px;
    -o-flex-basis: 88px;
    -ms-flex-preferred-size: 88px;
    flex-basis: 88px
}

@media only screen and (max-width: 480px) {
    .ns-note .post-ui .post-ui__name {
        max-width: 96px;
        -ms-flex-basis: 96px;
        -o-flex-basis: 96px;
        -ms-flex-preferred-size: 96px;
        flex-basis: 96px;
        font-size: 11px
    }
}

.ns-note .post-ui .post-ui__name--sound {
    max-width: 72px;
    -ms-flex-basis: 72px;
    -o-flex-basis: 72px;
    -ms-flex-preferred-size: 72px;
    flex-basis: 72px
}

.ns-note .post-ui .post-ui__input-full {
    width: 100% !important
}

.ns-note .post-ui .post-ui__price {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.ns-note .post-ui .post-ui__price>label {
    margin-bottom: 0
}

@media only screen and (max-width: 480px) {
    .ns-note .post-ui .post-ui__price>label:last-child {
        margin-top: 8px
    }
}

.ns-note .post-ui .post-ui__price input[type="radio"] {
    margin: 0 5px 0 0 !important;
    vertical-align: text-top !important
}

.ns-note .post-ui .post-ui__price input[type="checkbox"] {
    margin-right: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .post-ui .post-ui__price {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.ns-note .post-ui .post-ui__download {
    width: 100%
}

.ns-note .post-ui .post-ui__download>label {
    margin-bottom: 0;
    display: inline-block
}

.ns-note .post-ui .post-ui__download input[type="checkbox"] {
    margin-right: 5px
}

.ns-note .post-ui .post-ui__pay {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .post-ui .post-ui__pay-input {
    width: 80px !important;
    margin-right: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .post-ui .post-ui__pay-input {
        width: 60px !important;
        margin-right: 5px
    }
}

.ns-note .post-ui .post-ui__radio-name {
    margin-right: 10px
}

.ns-note .post-ui__check-name {
    margin-right: 4px
}

.ns-note .post-ui .post-ui__pay-area-setting {
    width: 100%;
    margin-top: -10px
}

.ns-note .post-ui .post-ui__price-height {
    height: 26px
}

.ns-note .post-ui .post-ui__photo-gallery {
    margin-top: 15px;
    padding-left: 27px
}

.ns-note .post-ui .post-ui__photo-gallery>label {
    margin-bottom: 0;
    display: inline-block;
    margin-right: 5px
}

.ns-note .post-ui .post-ui__photo-gallery input[type="checkbox"] {
    margin-right: 2px
}

.ns-note .post-ui.post-ui__pg-approve {
    padding: 17px 20px 13px
}

.ns-note .post-ui.post-ui__pg-approve label {
    margin-bottom: 4px
}

.ns-note .post-ui.post-ui__pg-approve label input {
    float: left;
    margin-top: 4px
}

.ns-note .post-ui.post-ui__pg-approve label span {
    overflow: hidden;
    display: block
}

.ns-note .post-ui__disabled {
    margin-right: 4px;
    color: #787c7b
}

.ns-note .post-ui__help {
    color: #A8ABB1;
    padding-bottom: 2px
}

.ns-note .post-ui__help:hover {
    color: #444444
}

.ns-note .advanced-setting {
    border-radius: 4px !important
}

.ns-note .advanced-setting .tags-input {
    margin: 0
}

.ns-note .advanced-setting .advanced-setting__button {
    cursor: pointer;
    position: relative;
    font-weight: bold;
    padding: 10px
}

.ns-note .advanced-setting .advanced-setting__button>p {
    margin-left: 25px
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__button>p {
        margin-left: 0;
        text-align: center
    }
}

.ns-note .advanced-setting .advanced-setting__button span {
    font-weight: normal
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__button span {
        display: none
    }
}

.ns-note .advanced-setting .advanced-setting__button .icon-20 {
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -10px
}

.ns-note .advanced-setting .advanced-setting__open {
    margin: 0 10px 15px 10px;
    padding: 15px 0 0 0
}

.ns-note .advanced-setting .advanced-setting__item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__item {
        margin-bottom: 15px;
        display: block
    }
}

.ns-note .advanced-setting .advanced-setting__item.flex-start {
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.ns-note .advanced-setting .advanced-setting__name {
    font-weight: bold;
    text-align: right;
    max-width: 92px;
    -ms-flex-basis: 92px;
    -o-flex-basis: 92px;
    -ms-flex-preferred-size: 92px;
    flex-basis: 92px;
    margin-right: 10px
}

.ns-note .advanced-setting .advanced-setting__name.name-valign__1row {
    margin-top: 10px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__name.name-valign__1row {
        max-width: 96px;
        -ms-flex-basis: 96px;
        -o-flex-basis: 96px;
        -ms-flex-preferred-size: 96px;
        flex-basis: 96px;
        margin-top: 8px !important
    }
}

.ns-note .advanced-setting .advanced-setting__name.name-valign__mag {
    margin-top: 8px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__name {
        max-width: 96px;
        -ms-flex-basis: 96px;
        -o-flex-basis: 96px;
        -ms-flex-preferred-size: 96px;
        flex-basis: 96px;
        font-size: 12px;
        white-space: nowrap;
        text-align: left;
        margin-bottom: 4px
    }
}

.ns-note .advanced-setting .advanced-setting__form-elem {
    width: 100%;
    max-width: 425px;
    line-height: 1
}

.ns-note .advanced-setting .advanced-setting__form-elem.advanced-setting__reservation-form {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 28px
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__form-elem.advanced-setting__reservation-form {
        display: -webkit-inline-block;
        display: -moz-inline-block;
        display: -ms-inline-block;
        display: -o-inline-block;
        display: inline-block;
        height: auto
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__form-elem {
        line-height: 1.2
    }
}

.ns-note .advanced-setting .advanced-setting__form-elem>label {
    margin-bottom: 0
}

.ns-note .advanced-setting .advanced-setting__form-elem>select {
    width: 50%;
    margin-right: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__form-elem>select {
        width: 100%;
        margin-right: 5px;
        display: inline-block
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__form-elem>select.advanced-setting__select-month {
        display: block
    }
}

.ns-note .advanced-setting .advanced-setting__form-elem>input[type="checkbox"] {
    margin: 1px 5px 0 0 !important;
    vertical-align: text-top !important
}

.ns-note .advanced-setting .advanced-setting__form-elem input[type="text"] {
    width: 100% !important
}

.ns-note .advanced-setting .advanced-setting__mag {
    display: block;
    width: 100%;
    border-radius: 4px !important;
    background: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__mag {
        display: block
    }
}

.ns-note .advanced-setting .advanced-setting__mag-button {
    position: relative;
    padding: 10px
}

.ns-note .advanced-setting .advanced-setting__mag-button .icon-20 {
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -10px
}

.ns-note .advanced-setting .advanced-setting__mag-button>span {
    margin-left: 15px
}

.ns-note .advanced-setting .advanced-setting__mag-list {
    max-height: 82px;
    padding: 10px 10px 0 10px;
    overflow-y: auto;
    overflow-x: hidden
}

.ns-note .advanced-setting .advanced-setting__mag-list>ul li {
    line-height: 1.3;
    margin-bottom: 8px
}

.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label {
    margin-bottom: 0
}

.ns-note .advanced-setting .advanced-setting__mag-list>ul li:last-child {
    margin-bottom: 10px
}

.ns-note .advanced-setting .advanced-setting__mag-list .advanced-setting__checkbox {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 5px
}

.ns-note .advanced-setting .advanced-setting__mag-list .advanced-setting__checkbox>input {
    margin-right: 5px;
    float: left
}

.ns-note .advanced-setting .advanced-setting__mag-list .advanced-setting__checkbox p {
    margin-left: 18px;
    line-height: 1.3;
    word-break: break-all
}

.ns-note .advanced-setting .advanced-setting__mag-list .advanced-setting__new-mag {
    cursor: pointer;
    display: inline-block
}

.ns-note .advanced-setting .advanced-setting__select-month {
    width: 110px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__select-month {
        margin: 10px 0
    }
}

.ns-note .advanced-setting .advanced-setting__select-day {
    width: 60px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__select-day {
        width: 66px !important
    }
}

.ns-note .advanced-setting .advanced-setting__select-time {
    width: 70px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .advanced-setting .advanced-setting__select-time {
        width: 76px !important
    }
}

.ns-note .advanced-setting .advanced-setting__checkbox {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 5px
}

.ns-note .advanced-setting .advanced-setting__checkbox>input {
    margin-right: 5px
}

.ns-note .advanced-setting .advanced-setting__checkbox.is-disable {
    opacity: 0.4
}

.ns-note .advanced-setting.is-textnoteModal .advanced-setting__form-elem {
    max-width: 250px
}

.ns-note .hashtag-recommend-group {
    margin-top: 16px
}

.ns-note .hashtag-recommend-group>p {
    margin-bottom: 7px
}

.ns-note .hashtag-recommend-group>ul {
    line-height: 1.3
}

.ns-note .hashtag-recommend-group>ul>li {
    margin-right: 5px;
    margin-bottom: 5px
}

.ns-note .hashtag-recommend-group>ul>li>a {
    color: #41C9B4;
    word-break: break-all
}

.ns-note .hashtag-recommend-group>ul>li>a:hover {
    text-decoration: underline
}

.ns-note .popeye-modal-container {
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 120 !important;
    -webkit-overflow-scrolling: touch
}

.ns-note .popeye-modal-container--lightbox {
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.95) !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: zoom-out;
    pointer-events: auto
}

.ns-note .popeye-modal-container--lightbox:before {
    display: none
}

.ns-note .popeye-modal-container.ng-enter {
    -webkit-animation-duration: 0.2s !important;
    animation-duration: 0.2s !important
}

.ns-note .popeye-modal-container.ng-enter .popeye-modal {
    -webkit-animation: zoom-in 0.2s linear !important;
    animation: zoom-in 0.2s linear !important
}

.ns-note .popeye-modal-container.ng-leave {
    -webkit-animation-duration: 0.2s !important;
    animation-duration: 0.2s !important
}

.ns-note .popeye-modal-container.ng-leave .popeye-modal {
    -webkit-animation: zoom-out 0.2s linear !important;
    animation: zoom-out 0.2s linear !important
}

.ns-note .popeye-modal-container.full-screen .popeye-modal {
    width: 100vw !important;
    margin-top: 0;
    margin-bottom: 0
}

.ns-note .popeye-modal-container .popeye-modal {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 !important;
    width: 380px !important;
    cursor: default
}

@media only screen and (max-width: 480px) {
    .ns-note .popeye-modal-container .popeye-modal {
        width: 300px !important
    }
}

.ns-note .popeye-modal-container .popeye-modal .popeye-close-modal {
    display: none
}

.ns-note .popeye-modal-container .popeye-modal.is-open-gallery {
    width: 100% !important
}

.ns-note .popeye-modal-container .popeye-modal--lightbox {
    width: auto;
    background-color: transparent;
    box-shadow: none;
    width: auto !important;
    position: relative
}

.ns-note .popeye-modal-container .popeye-modal__image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    margin-left: auto;
    margin-right: auto
}

.ns-note .popeye-modal-container .popeye-modal__profile {
    border-radius: 50%;
    max-width: 100%;
    width: 100%
}

.ns-note .popeye-modal-container .popeye-modal__close {
    position: fixed;
    top: 16px;
    right: 16px;
    color: #A8ABB1;
    display: block;
    padding: 16px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
    transition: all 200ms cubic-bezier(1, 0, 0, 1);
    z-index: 7
}

@media only screen and (min-width: 769px) {
    .ns-note .popeye-modal-container .popeye-modal__close {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .popeye-modal-container .popeye-modal__close:hover {
        color: #787C7B
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .popeye-modal-container .popeye-modal__close {
        top: 8px;
        right: 8px;
        padding: 8px
    }
}

.ns-note .popeye-modal-container .popeye-modal__prevArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
    transition: all 200ms cubic-bezier(1, 0, 0, 1);
    color: #A8ABB1
}

.ns-note .popeye-modal-container .popeye-modal__prevArea.is-active {
    pointer-events: auto;
    opacity: 1
}

@media only screen and (min-width: 769px) {
    .ns-note .popeye-modal-container .popeye-modal__prevArea.is-active:hover {
        color: #787C7B
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .popeye-modal-container .popeye-modal__prevArea {
        display: none
    }
}

.ns-note .popeye-modal-container .popeye-modal__prev {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
    padding: 16px
}

.ns-note .popeye-modal-container .popeye-modal__nextArea {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
    transition: all 200ms cubic-bezier(1, 0, 0, 1);
    color: #A8ABB1
}

.ns-note .popeye-modal-container .popeye-modal__nextArea.is-active {
    pointer-events: auto;
    opacity: 1
}

@media only screen and (min-width: 769px) {
    .ns-note .popeye-modal-container .popeye-modal__nextArea.is-active:hover {
        color: #787C7B
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .popeye-modal-container .popeye-modal__nextArea {
        display: none
    }
}

.ns-note .popeye-modal-container .popeye-modal__next {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
    padding: 16px
}

@media only screen and (max-width: 768px) {
    .ns-note .popeye-modal-container .popeye-modal__slideWrap {
        width: 100vw;
        overflow: hidden
    }
}

.ns-note .popeye-modal-container .popeye-modal__slideView {
    white-space: nowrap
}

@media only screen and (max-width: 768px) {
    .ns-note .popeye-modal-container .popeye-modal__slideView {
        white-space: normal
    }
}

.ns-note .popeye-modal-container .popeye-modal__slideView.is-animate {
    -webkit-transition: -webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: -webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: transform 350ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: transform 350ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1)
}

.ns-note .popeye-modal-container .popeye-modal__slideItem {
    display: none;
    vertical-align: middle
}

@media only screen and (max-width: 768px) {
    .ns-note .popeye-modal-container .popeye-modal__slideItem {
        width: 100vw;
        display: inline-block;
        margin-bottom: 16px
    }

    .ns-note .popeye-modal-container .popeye-modal__slideItem:last-child {
        margin-bottom: 0
    }
}

.ns-note .popeye-modal-container .popeye-modal__slideItem.is-active {
    display: inline-block;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 768px) {
    .ns-note .popeye-modal-container .popeye-modal__slideItem.is-active {
        display: block
    }
}

.ns-note .popeye-modal-container .popeye-modal__slideImage {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    margin-left: auto;
    margin-right: auto
}

.ns-note .popeye-modal-container .video-iframe {
    width: 90% !important;
    box-shadow: none !important;
    max-width: 800px;
    background: none !important
}

.ns-note .popeye-modal-container .commissions-banktransferfee {
    width: auto !important
}

@-webkit-keyframes zoom-in {
    0% {
        -webkit-transform: scale(0.1, 0.1) translateY(360deg);
        transform: scale(0.1, 0.1) translateY(360deg)
    }

    100% {
        -webkit-transform: scale(1, 1) translateY(0deg);
        transform: scale(1, 1) translateY(0deg)
    }
}

@keyframes zoom-in {
    0% {
        -webkit-transform: scale(0.1, 0.1) translateY(360deg);
        transform: scale(0.1, 0.1) translateY(360deg)
    }

    100% {
        -webkit-transform: scale(1, 1) translateY(0deg);
        transform: scale(1, 1) translateY(0deg)
    }
}

@-webkit-keyframes zoom-out {
    0% {
        -webkit-transform: scale(1, 1) translateY(0deg);
        transform: scale(1, 1) translateY(0deg)
    }

    100% {
        -webkit-transform: scale(3, 3) translateY(-360deg);
        transform: scale(3, 3) translateY(-360deg)
    }
}

@keyframes zoom-out {
    0% {
        -webkit-transform: scale(1, 1) translateY(0deg);
        transform: scale(1, 1) translateY(0deg)
    }

    100% {
        -webkit-transform: scale(3, 3) translateY(-360deg);
        transform: scale(3, 3) translateY(-360deg)
    }
}

.ns-note .modal-window--post {
    width: 470px;
    margin-left: -45px
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window--post {
        width: 100%;
        margin-left: 0
    }
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__name.name-valign__1row {
    margin-top: 10px !important;
    font-size: 12px
}

.ns-note .modal-window--post .advanced-setting select:last-child {
    margin-right: 0
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__item {
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window--post .advanced-setting .advanced-setting__item {
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        -o-align-items: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__item.advanced-setting__reservation {
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__item.advanced-setting__reservation .advanced-setting__form-elem.advanced-setting__reservation-form {
    display: -webkit-inline-block;
    display: -moz-inline-block;
    display: -ms-inline-block;
    display: -o-inline-block;
    display: inline-block;
    height: auto
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__item.advanced-setting__reservation .advanced-setting__form-elem>select {
    width: 100%;
    margin-right: 5px;
    display: inline-block
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__item.advanced-setting__reservation .advanced-setting__form-elem>select.advanced-setting__select-month {
    display: block
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__select-month {
    width: 150px !important;
    margin: 10px 0
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__select-day {
    width: 66px !important
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__select-time {
    width: 76px !important
}

.ns-note .modal-window--post .advanced-setting .advanced-setting__checkbox {
    vertical-align: sub
}

@media only screen and (max-width: 480px) {
    .ns-note .modal-window--post .advanced-setting .advanced-setting__checkbox {
        vertical-align: middle
    }
}

.ns-note .subscription-payment {
    padding: 10px
}

.ns-note .subscription-payment label {
    overflow: visible;
    margin-bottom: 0
}

.ns-note .subscription-payment .subscription-payment__price {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 2px
}

.ns-note .subscription-payment .subscription-payment__price .subscription-payment__price__title {
    display: block;
    font-size: 12px;
    padding-bottom: 2px;
    padding-top: 2px
}

.ns-note .subscription-payment .subscription-payment__priceNotice {
    margin-bottom: 8px;
    font-size: 12px;
    text-align: center
}

.ns-note .subscription-payment .subscription-payment__date {
    text-align: center
}

.ns-note .subscription-payment .subscription-payment__button {
    width: 100%;
    margin-bottom: 0;
    display: inline-block;
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 4px !important;
    font-size: 12px;
    font-weight: bold;
    line-height: 1
}

.ns-note .subscription-payment .subscription-payment__button:hover {
    border: 1px solid #41C9B4
}

.ns-note .subscription-payment .subscription-payment__button.is-active {
    border: 1px solid #41C9B4
}

.ns-note .subscription-payment .subscription-payment__button>label {
    cursor: pointer;
    padding: 11px
}

.ns-note .subscription-payment .subscription-payment__button>label.subscription-payment__buttonInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .subscription-payment .subscription-payment__button input[type="radio"] {
    margin: 0 2px 0 0
}

.ns-note .subscription-payment .subscription-payment__button .subscription-payment__buttonText {
    margin-left: 5px
}

.ns-note .subscription-payment .subscription-payment__button .subscription-payment__title {
    font-size: 14px
}

.ns-note .subscription-payment .subscription-payment__button .subscription-payment__buttonPeriod {
    margin-top: 5px;
    font-weight: normal
}

.ns-note .subscription-payment .subscription-payment__button .subscription-payment__firstMonthFreeText {
    line-height: 1.4
}

.ns-note .subscription-payment .subscription-payment__annotation {
    margin-top: 5px;
    font-size: 11px;
    text-align: center;
    color: #777
}

.ns-note .subscription-payment .subscription-payment__button-after {
    border-top: 1px solid #D9D9D9;
    padding: 12px 0;
    margin: 0 10px
}

.ns-note .subscription-payment .subscription-payment__button-after>label {
    margin-bottom: 12px
}

.ns-note .subscription-payment .subscription-payment__button-after>label:last-child {
    margin-bottom: 0
}

.ns-note .subscription-payment .subscription-payment__button-after>label input[type="radio"] {
    margin-left: 15px
}

.ns-note .subscription-payment .subscription-payment__button-after .carrier-label {
    width: 50%
}

.ns-note .subscription-payment .subscription-payment__button-after select.full {
    width: 100%
}

.ns-note .subscription-payment .convenience-form .convenience-form__input {
    margin-bottom: 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .subscription-payment .convenience-form .convenience-form__input p {
    width: 70px;
    -webkit-box-ordinal-group: 1;
    -ms-box-ordinal-group: 1;
    -o-box-ordinal-group: 1;
    box-ordinal-group: 1;
    padding-top: 9px
}

.ns-note .subscription-payment .convenience-form .convenience-form__input input {
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-box-ordinal-group: 2;
    -ms-box-ordinal-group: 2;
    -o-box-ordinal-group: 2;
    box-ordinal-group: 2
}

.ns-note .subscription-payment .convenience-form .convenience-form__input input[type="text"] {
    padding: 5px
}

.ns-note .subscription-payment__priceItem,
.ns-note .subscription-payment__priceSlash {
    padding: 0 2px;
    font-size: 12px;
    font-weight: normal
}

.ns-note .subscription-payment__priceSlash {
    padding: 0 1px 0 4px
}

.ns-note .subscription-payment__methods {
    margin-top: 8px;
    margin-bottom: 8px;
    position: relative
}

.ns-note .subscription-payment__methods:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 0;
    height: 0;
    margin: -2px 0 0 0;
    padding: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #222222;
    pointer-events: none
}

.ns-note .subscription-payment__methods:after {
    content: '';
    position: absolute;
    top: 0;
    right: 44px;
    width: 1px;
    height: 100%;
    padding: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    pointer-events: none
}

.ns-note .subscription-payment__methodsBody {
    width: 100%;
    height: auto;
    border: rgba(0, 0, 0, 0.05) solid 1px;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    -webkit-appearance: button
}

@media only screen and (min-width: 769px) {
    .ns-note .subscription-payment__methodsBody:hover {
        border-color: rgba(0, 0, 0, 0.2)
    }
}

.ns-note .subscription-payment__subMethods {
    margin-bottom: 8px;
    padding: 8px 16px;
    border: rgba(0, 0, 0, 0.05) solid 1px;
    border-radius: 4px;
    background-color: #ffffff
}

.ns-note .subscription-payment__subMethodsItem {
    margin-bottom: 4px
}

.ns-note .subscription-payment__subMethodsItem:last-child {
    margin-bottom: 0
}

.ns-note .subscription-payment__subMethodsItemInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .subscription-payment__subMethodsItemInput {
    margin-right: 8px
}

.ns-note .subscription-payment__subMethodsItemLabel {
    font-size: 16px;
    font-weight: bold
}

.ns-note .subscription-payment__notesItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 4px
}

.ns-note .subscription-payment__notesItem:last-child {
    margin-bottom: 0
}

.ns-note .subscription-payment__notesIcon {
    margin-right: 8px;
    color: #41c9b4
}

.ns-note .subscription-payment__notesLabel {
    color: #787c7b;
    font-weight: bold
}

.ns-note .subscription-payment__couponLimit {
    display: block;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 4px
}

.ns-note .subscription-payment__couponLimitDate {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 16px;
    font-weight: bold
}

.ns-note .subscription-payment__couponLimitDate:first-child {
    padding-left: 0
}

.ns-note .subscription-payment__afterCoupon {
    display: block;
    margin-bottom: 8px;
    color: #787c7b;
    font-size: 12px;
    font-weight: normal;
    text-align: center
}

.ns-note .mag-top,
.ns-note .mag-top__gradient,
.ns-note .mag-top__gradient-top,
.ns-note .mag-top__overlay,
.ns-note .mag-top__cover,
.ns-note .mag-top__cover-img,
.ns-note .mag-top__body {
    width: 100%;
    height: 580px
}

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

    .ns-note .mag-top,
    .ns-note .mag-top__gradient,
    .ns-note .mag-top__gradient-top,
    .ns-note .mag-top__overlay,
    .ns-note .mag-top__cover,
    .ns-note .mag-top__cover-img,
    .ns-note .mag-top__body {
        width: 100%;
        height: 420px;
        position: absolute
    }
}

.ns-note .mag-top__overlay,
.ns-note .mag-top__cover,
.ns-note .mag-top__body {
    position: absolute;
    top: 0;
    left: 0
}

.ns-note .mag-top__data {
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top__data {
        font-size: 11px;
        margin-top: 7px
    }
}

.ns-note .mag-top__data a {
    color: #fff
}

.ns-note .mag-top__data>span:last-child .vr {
    display: none;
    text-shadow: none
}

.ns-note .mag-top__button-group {
    margin: 15px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top__button-group {
        margin: 10px 0
    }
}

.ns-note .mag-top {
    position: relative;
    margin: 0 auto
}

.ns-note .mag-top .mag-top__gradient {
    position: absolute;
    z-index: 90;
    bottom: 0;
    left: 0;
    height: 300px;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.3)));
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3));
    background: linear-gradient(top, transparent, rgba(0, 0, 0, 0.3))
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__gradient {
        height: 150px
    }
}

.ns-note .mag-top .mag-top__gradient-top {
    position: absolute;
    z-index: 90;
    top: 0;
    left: 0;
    height: 100px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(transparent));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), transparent);
    background: linear-gradient(top, rgba(0, 0, 0, 0.25), transparent)
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__gradient-top {
        height: 100px
    }
}

.ns-note .mag-top .mag-top__overlay {
    z-index: 50;
    background: #000;
    opacity: 0.15;
    -khtml-opacity: 0.15;
    -moz-opacity: 0.15;
    filter: alpha(opacity=15);
    -ms-filter: "alpha(opacity=$t)"
}

.ns-note .mag-top .mag-top__cover {
    z-index: 0
}

.ns-note .mag-top .mag-top__cover .mag-top__cover-img {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat
}

.ns-note .mag-top .mag-top__body {
    z-index: 100;
    color: #fff;
    font-weight: bold
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top {
    position: relative
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__elem-top {
        padding: 20px 20px 0 20px
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .eyecatch__mag-top {
    width: 36px;
    height: 36px
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__user {
    position: absolute;
    top: 28px;
    left: 30px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2)
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__user {
        top: 20px;
        left: 20px
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__user>a {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__user>a>.user-eyecatch {
    margin-right: 8px
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__user>a>.user-eyecatch .mask {
    border: 2px solid #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__user>a>.user-eyecatch {
        margin-right: 5px
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__user .user-name {
    max-width: 250px;
    font-size: 12px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__user .user-name {
        font-size: 11px;
        max-width: 100px
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__private {
    position: absolute;
    top: 31px;
    left: 30px
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__private {
        top: 25px;
        left: 20px
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__buttons-wrap {
    position: absolute;
    top: 25px;
    right: 30px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: right
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__buttons-wrap {
        top: 20px;
        right: 20px
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__buttons {
    text-shadow: none;
    max-height: 35px
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__buttons>a {
    color: #222
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__buttons>div {
    max-height: 33px
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__elem-top .mag-top__buttons>div {
        max-height: 30px
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-top .mod-balloon-flag {
    color: #222 !important
}

.ns-note .mag-top .mag-top__body .mag-top__title>p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__title>p {
        font-size: 24px;
        margin-bottom: 5px;
        line-height: 1.3
    }
}

.ns-note .mag-top .mag-top__body .mag-top__txt>p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2)
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__txt>p {
        font-size: 12px
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-bottom {
    width: 550px;
    position: absolute;
    left: 30px;
    bottom: 40px;
    padding: 0 40px 0 0;
    font-size: 12px
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-top .mag-top__body .mag-top__elem-bottom {
        width: 300px;
        left: 20px;
        bottom: 40px;
        padding: 0 10px 0 0
    }
}

.ns-note .mag-top .mag-top__body .mag-top__elem-bottom a {
    color: #fff
}

.ns-note .mag-top .mag-top__body .vr {
    padding: 0 8px
}

.ns-note .mag-top .mag-top__body .slash {
    padding: 0 3px
}

.ns-note .mag-top__usersList {
    cursor: pointer
}

.ns-note .mag-top__usersList>li {
    margin-left: -8px;
    position: relative
}

.ns-note .mag-top__usersList>li .user-eyecatch {
    margin-right: 0
}

.ns-note .mag-top__usersList>li .user-eyecatch .mask {
    border: 2px solid #fff
}

.ns-note .mag-top__usersList>li:first-child {
    margin-left: 0
}

.ns-note .mag-top__usersList>li:nth-child(1) {
    z-index: 6
}

.ns-note .mag-top__usersList>li:nth-child(2) {
    z-index: 5
}

.ns-note .mag-top__usersList>li:nth-child(3) {
    z-index: 4
}

.ns-note .mag-top__usersList>li:nth-child(4) {
    z-index: 3
}

.ns-note .mag-top__usersList>li:nth-child(5) {
    z-index: 2
}

.ns-note .mag-top__usersList>li:nth-child(6) {
    z-index: 1
}

.ns-note .mag-top__usersList>li.mag-top__item--more {
    background-color: #f7f9f9;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
    color: #787c7b
}

.ns-note a.link__convenience-store-confirm {
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    text-align: right
}

.ns-note a.link__convenience-store-confirm:hover {
    color: #fff;
    text-decoration: underline
}

.ns-note .content-top {
    margin: 10px;
    width: 580px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 480px) {
    .ns-note .content-top {
        width: 100%
    }
}

.ns-note .c-creatorMeta {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .c-creatorMeta .c-creatorMeta__img {
    border-radius: 50% !important;
    width: 25px;
    height: 25px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-creatorMeta .c-creatorMeta__img {
        width: 17px;
        height: 17px
    }
}

.ns-note .c-creatorMeta .c-creatorMeta__name {
    font-size: 12px;
    color: #898D8C;
    margin-left: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-creatorMeta .c-creatorMeta__name {
        font-size: 11px
    }
}

.ns-note .c-post {
    display: block;
    background-color: #ffffff;
    -ms-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
    -o-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
    margin-bottom: 10px
}

.ns-note .c-post.c-post--cakes {
    border-left: #ffda01 3px solid
}

.ns-note .c-post .c-post__content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    margin-top: 10px
}

.ns-note .c-post .c-post__body {
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1
}

.ns-note .c-post .c-post__title {
    font-size: 17px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-post .c-post__title {
        font-size: 15px
    }
}

.ns-note .c-post .c-post__description>p {
    font-size: 13px;
    line-height: 1.6
}

@media only screen and (max-width: 480px) {
    .ns-note .c-post .c-post__description>p {
        font-size: 12px;
        line-height: 1.5
    }
}

.ns-note .c-post .c-post__eyecatch {
    margin-left: 10px;
    width: 140px;
    height: 140px
}

@media only screen and (max-width: 480px) {
    .ns-note .c-post .c-post__eyecatch {
        width: 75px;
        height: 75px
    }
}

.ns-note .c-post:hover {
    color: #222222
}

.ns-note .c-gridGroup .c-gridGroup__item {
    float: left;
    width: 50%
}

.ns-note .c-gridGroup .c-gridGroup__item:nth-child(odd) a {
    margin-right: 5px
}

.ns-note .c-gridGroup .c-gridGroup__item:nth-child(even) a {
    margin-left: 5px
}

.ns-note .p-post--basic {
    padding: 10px
}

.ns-note .p-post--image {
    padding: 10px;
    background-repeat: no-repeat;
    background-position: center
}

.ns-note .p-post--image img {
    width: 100%;
    height: auto
}

@media only screen and (max-width: 480px) {
    .ns-note .p-post--image {
        padding: 0;
        background: transparent
    }
}

.ns-note .p-post--image>.c-creatorMeta {
    margin-bottom: 8px
}

@media only screen and (max-width: 480px) {
    .ns-note .p-post--image>.c-creatorMeta {
        display: none
    }
}

.ns-note .p-post--image--portrait {
    background-size: 100% auto
}

.ns-note .p-post--image--landscape {
    background-size: auto 100%
}

.ns-note .p-banner-to-top {
    display: block;
    width: 580px;
    height: 160px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/banner_to-about-75ef7d5339c4e4613b988dc57c8f3960f9631962d84a1930e51d66a0b2bfbfbb.png) no-repeat;
    background-size: 580px 160px;
    margin-bottom: 10px
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ns-note .p-banner-to-top {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/banner_to-about_retina-3ab031ad061b43854357742937a5e843751a9ae8a09314601a2a38bca3789927.png) no-repeat;
        background-size: 580px 160px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .p-banner-to-top {
        width: 100%;
        height: 0;
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/banner_to-about_sp-ab92de72a2a8cae063844f2b07e43573b88a429f1bbbe89e28b979e258ef7762.png) no-repeat;
        background-size: cover;
        padding-top: 33%
    }
}

.ns-note .ng-drawer,
.ns-note .ng-drawer-bg {
    top: 47px;
    height: calc(100% - 47px) !important
}

.ns-note .ng-drawer.ng-drawer-left {
    box-shadow: none
}

.ns-note .drawer {
    display: none;
    border-top: 1px solid #e1e5e7
}

@media only screen and (max-width: 700px) {
    .ns-note .drawer {
        display: block;
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }

    .ns-note .drawer .drawer__wrap {
        height: 100vh
    }

    .ns-note .drawer .drawer__wrap .drawer__mainNav>li {
        font-weight: bold;
        border-bottom: 1px solid #e1e5e7
    }

    .ns-note .drawer .drawer__wrap .drawer__mainNav>li>a {
        font-size: 15px;
        display: block;
        padding: 12px 15px;
        color: #222
    }

    .ns-note .drawer .drawer__wrap .drawer__mainNav>li>a.c-button--high,
    .ns-note .drawer .drawer__wrap .drawer__mainNav>li>a.c-button.c-button--myMenu-premium,
    .ns-note .drawer .drawer__wrap .drawer__mainNav>li>a.c-button.c-button--staticPage-cv,
    .ns-note .drawer .drawer__wrap .drawer__mainNav>li>a.c-button.c-button--staticPage-subscription {
        color: #fff
    }

    .ns-note .drawer .drawer__wrap .drawer__mainNav>li.drawer__userWrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-box;
        display: -o-box;
        display: box;
        -webkit-box-align: center;
        -ms-box-align: center;
        -o-box-align: center;
        box-align: center;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: -ms-flexbox;
        display: flex;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 8px 15px
    }

    .ns-note .drawer .drawer__wrap .drawer__subNav {
        margin-top: 10px
    }

    .ns-note .drawer .drawer__wrap .drawer__subNav>li>a {
        font-size: 14px;
        display: block;
        padding: 10px 15px;
        color: #222
    }
}

.ns-note .drawer .drawer__user {
    margin-right: 10px
}

.ns-note .drawer .drawer__name .drawer__user-name {
    font-weight: bold;
    line-height: 1.2
}

.ns-note .drawer .drawer__name .drawer__user-name>p {
    font-size: 13px
}

.ns-note .drawer .drawer__name .drawer__url-name {
    font-weight: normal;
    line-height: 1.2
}

.ns-note .drawer .drawer__name .drawer__url-name a {
    font-size: 12px;
    color: #bdc3c7
}

.ns-note .ng-drawer-left {
    box-shadow: none
}

.ns-note .drawer-btn {
    display: none
}

@media only screen and (max-width: 700px) {
    .ns-note .drawer-btn {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 50px;
        height: 50px;
        font-size: 10px;
        text-align: center;
        cursor: pointer
    }

    .ns-note .drawer-btn .bar {
        position: absolute;
        top: 17px;
        left: 50%;
        margin-left: -9px;
        display: block;
        width: 18px;
        height: 2px;
        background: #222
    }

    .ns-note .drawer-btn .bar.middle {
        top: 23px;
        opacity: 1
    }

    .ns-note .drawer-btn .bar.bottom {
        top: 29px
    }
}

.ns-note tags-input {
    display: block
}

.ns-note tags-input *,
.ns-note tags-input *:before,
.ns-note tags-input *:after {
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.ns-note tags-input.tags-input .host {
    position: relative;
    margin-top: 0;
    margin-bottom: 0px;
    height: 100%
}

.ns-note tags-input.tags-input .host:active {
    outline: none
}

.ns-note tags-input.tags-input .tags {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding: 1px;
    overflow: hidden;
    word-wrap: break-word;
    cursor: text;
    background-color: white;
    border: 1px solid #e1e5e7;
    box-shadow: none;
    min-height: 38px;
    height: 100%
}

.ns-note tags-input.tags-input .tags.focused {
    outline: none;
    border: 1px solid #bdc3c7;
    box-shadow: none
}

.ns-note tags-input.tags-input .tags .tag-list {
    margin: 0;
    padding: 0;
    list-style-type: none
}

@media only screen and (max-width: 480px) {
    .ns-note tags-input.tags-input .tags .tag-list {
        width: 180px
    }
}

.ns-note tags-input.tags-input .tags .tag-item {
    color: #a1a6a9;
    margin: 4px 1%;
    padding: 0 18px 0 5px;
    display: inline-block;
    float: left;
    font-size: 13px;
    height: 26px;
    line-height: 25px;
    border: 1px solid #e1e5e7;
    border-radius: 4px !important;
    background: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 98%;
    position: relative
}

.ns-note tags-input.tags-input .tags .tag-item span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%
}

.ns-note tags-input.tags-input .tags .tag-item.selected {
    background: #bdc3c7;
    border: 1px solid #bdc3c7;
    color: #fff
}

.ns-note tags-input.tags-input .tags .tag-item.selected .remove-button {
    color: #fff;
    background: transparent
}

.ns-note tags-input.tags-input .tags .tag-item .remove-button {
    margin: 0 0 0 5px;
    padding: 0;
    border: none;
    background: #fff;
    vertical-align: middle;
    font: 16px Arial, sans-serif;
    color: #a1a6a9;
    position: absolute;
    top: 4px;
    right: 5px;
    display: block
}

.ns-note tags-input.tags-input .tags .tag-item .remove-button:hover,
.ns-note tags-input.tags-input .tags .tag-item .remove-button:active {
    color: #a1a6a9
}

.ns-note tags-input.tags-input .tags .input {
    border: 0;
    outline: none;
    margin: 2px;
    padding: 0;
    padding-left: 7px;
    float: left;
    height: 30px;
    font-size: 12px
}

.ns-note tags-input.tags-input .tags .input.invalid-tag {
    color: #ff0000
}

.ns-note tags-input.tags-input .tags .input::-ms-clear {
    display: none
}

.ns-note tags-input.tags-input.ng-invalid .tags {
    box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6)
}

.ns-note tags-input.tags-input .autocomplete {
    margin-top: -1px;
    position: absolute;
    padding: 0;
    z-index: 999;
    width: 100%;
    max-width: 100%;
    background-color: white;
    border: none;
    box-shadow: none
}

.ns-note tags-input.tags-input .autocomplete .suggestion-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: auto;
    overflow-y: auto;
    position: relative;
    border: 1px solid #bdc3c7
}

.ns-note tags-input.tags-input .autocomplete .suggestion-item {
    padding: 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #222;
    background-color: white;
    font-size: 12px;
    line-height: 1.5
}

.ns-note tags-input.tags-input .autocomplete .suggestion-item em {
    color: #222;
    font: normal 13px/1.5 "";
    background: #fff
}

.ns-note tags-input.tags-input .autocomplete .suggestion-item.selected {
    color: #222;
    border: none;
    background-color: #f8f9fa
}

.ns-note tags-input.tags-input .autocomplete .suggestion-item.selected em {
    color: #222;
    border: none;
    background-color: #f8f9fa;
    font-style: normal
}

.ns-note tags-input.tags-input .autocomplete .suggestion-item__hashtag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    word-break: break-all;
    white-space: normal
}

.ns-note tags-input.tags-input .autocomplete .suggestion-item__hashtagText {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-right: 8px
}

.ns-note tags-input.tags-input .autocomplete .suggestion-item__hashtagCount {
    color: #787c7b;
    text-align: right;
    white-space: nowrap
}

.ns-note .sns-button-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .sns-button-list>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 24px;
    margin-right: 10px
}

.ns-note .sns-button-list>li:last-child {
    margin-right: 0
}

.ns-note .sns-button-twitter-balloon {
    position: relative;
    background: #fff;
    margin-left: 5px;
    min-width: 12px;
    height: 20px;
    padding: 4px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #bbb;
    border-radius: 3px;
    color: #222
}

.ns-note .sns-button-twitter-balloon:before {
    content: "";
    border: 4px solid transparent;
    border-right: 4px solid #bbb;
    position: absolute;
    left: -8px;
    top: 5px
}

.ns-note .sns-button-twitter-balloon:after {
    content: "";
    border: 4px solid transparent;
    border-right: 4px solid #fff;
    position: absolute;
    left: -7px;
    top: 5px
}

.ns-note .sns-button-twitter-balloon a:hover {
    color: inherit
}

.ns-note .paywall {
    text-align: center;
    margin: 35px 0;
    padding: 20px 80px;
    border: 3px solid #e1e5e7
}

@media only screen and (max-width: 700px) {
    .ns-note .paywall {
        padding: 20px 15px
    }
}

.ns-note .paywall .paywall__head {
    margin-bottom: 30px
}

@media only screen and (max-width: 700px) {
    .ns-note .paywall .paywall__head {
        margin-bottom: 0
    }
}

.ns-note .paywall .paywall__text {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 3px
}

@media only screen and (max-width: 700px) {
    .ns-note .paywall .paywall__text {
        font-size: 16px
    }
}

.ns-note .paywall .paywall__textNotLogin {
    font-size: 13px
}

.ns-note .paywall .paywall__count {
    font-size: 12px;
    color: #787c7b
}

.ns-note .paywall .paywall__countWarning {
    color: #F95
}

.ns-note .paywall .paywall__countText {
    padding-left: 4px
}

.ns-note .paywall .paywall__countDivider {
    padding-left: 4px;
    padding-right: 4px
}

.ns-note .paywall .paywall__guideText {
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    margin-top: 25px
}

@media only screen and (max-width: 700px) {
    .ns-note .paywall .paywall__guideText {
        margin-top: 0;
        margin-bottom: 10px
    }
}

.ns-note .paywall .paywall__guideText:before {
    content: "";
    display: block;
    border-top: solid 1px #efefef;
    width: 100%;
    height: 1px;
    position: relative;
    top: 50%;
    z-index: 1;
    margin-bottom: 10px
}

@media only screen and (max-width: 700px) {
    .ns-note .paywall .paywall__guideText:before {
        border: none;
        height: 0;
        position: static
    }
}

.ns-note .paywall .paywall__guideText span {
    background: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 5;
    top: -1.4em
}

.ns-note .paywall .paywall__guideText span br {
    display: none
}

@media only screen and (max-width: 700px) {
    .ns-note .paywall .paywall__guideText span {
        padding: 0;
        line-height: 1.4;
        top: 0
    }

    .ns-note .paywall .paywall__guideText span br {
        display: block
    }
}

.ns-note .paywall .paywall__orBorder {
    position: relative;
    border-top: solid 1px #e1e5e7;
    margin-top: 40px;
    margin-bottom: 50px
}

@media only screen and (max-width: 700px) {
    .ns-note .paywall .paywall__orBorder {
        margin-top: 30px;
        margin-bottom: 30px
    }
}

.ns-note .paywall .paywall__or {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    font-size: 11px;
    font-weight: bold;
    width: 50px;
    height: 40px;
    line-height: 40px;
    color: #aaa;
    border-radius: 100%;
    background: #fff
}

.ns-note .clearfix,
.ns-note .btn-group,
.ns-note .modal-window__sns,
.ns-note .get-urlname>ul,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label,
.ns-note .mag-top__button-group {
    *zoom: 1
}

.ns-note .clearfix:after,
.ns-note .btn-group:after,
.ns-note .modal-window__sns:after,
.ns-note .get-urlname>ul:after,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label:after,
.ns-note .mag-top__button-group:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: "."
}

.ns-note .clearfix.contentLoading,
.ns-note .contentLoading.btn-group,
.ns-note .contentLoading.modal-window__sns,
.ns-note .get-urlname>ul.contentLoading,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label.contentLoading,
.ns-note .contentLoading.mag-top__button-group {
    min-height: 100vh
}

.ns-note .buyBox {
    border-radius: 4px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    border: 1px solid #efefef;
    background: #f8f9fa;
    text-align: left;
    margin-bottom: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

.ns-note .buyBox:last-child {
    margin-bottom: 0
}

.ns-note .buyBox.is--limited {
    display: -webkit-block;
    display: -moz-block;
    display: -ms-block;
    display: -o-block;
    display: block
}

.ns-note .buyBox .limitedArea {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px;
    margin-bottom: 10px
}

.ns-note .buyBox .limitedArea .limitedArea__title {
    font-size: 15px;
    font-weight: bold;
    color: #41C9B4
}

@media only screen and (max-width: 700px) {
    .ns-note .buyBox .limitedArea .limitedArea__title {
        font-size: 13px
    }
}

.ns-note .buyBox .limitedArea .limitedArea__number {
    font-size: 12px;
    color: #777;
    margin-left: auto;
    text-align: right
}

.ns-note .buyBox .limitedArea .limitedArea__number .limitedNumber {
    font-size: 15px;
    font-weight: bold;
    color: #222222;
    padding-left: 3px
}

@media only screen and (max-width: 700px) {
    .ns-note .buyBox .limitedArea .limitedArea__number .limitedNumber {
        font-size: 13px
    }
}

.ns-note .buyBox .limitedArea .limitedArea__number .slash {
    padding: 0 3px
}

.ns-note .buyBox .buyBox__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.ns-note .buyBox .buyBox__name {
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (max-width: 700px) {
    .ns-note .buyBox .buyBox__name {
        max-width: 170px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

.ns-note .buyBox .buyBox__nick-name {
    font-size: 12px;
    line-height: 1;
    margin-bottom: 7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ns-note .buyBox .buyBox__name,
.ns-note .buyBox .buyBox__nick-name {
    max-width: 200px
}

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

    .ns-note .buyBox .buyBox__name,
    .ns-note .buyBox .buyBox__nick-name {
        max-width: 100%
    }
}

.ns-note .buyBox .buyBox__info {
    margin-right: auto
}

@media only screen and (max-width: 700px) {
    .ns-note .buyBox .buyBox__info {
        width: calc(100% - 72px);
        margin-top: 5px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

.ns-note .buyBox .buyBox__review {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 16px;
    padding-top: 8px;
    width: 100%
}

.ns-note .buyBox .buyBox__img {
    width: 72px;
    height: 60px
}

.ns-note .buyBox .buyBox__img img {
    width: 60px
}

.ns-note .buyBox .buyBox__img.buyBox__img--mag {
    height: 80px
}

.ns-note .buyBox .buyBox__price {
    font-size: 12px;
    font-weight: bold;
    line-height: 1
}

.ns-note .buyBox .buyBox__button {
    margin-left: auto;
    position: absolute;
    right: 0;
    top: 0
}

@media only screen and (max-width: 700px) {
    .ns-note .buyBox .buyBox__button {
        position: static;
        top: auto;
        right: auto;
        clear: both;
        border: none;
        padding: 0;
        margin-left: 0;
        width: 100%;
        margin-top: 8px
    }
}

.ns-note .buyBox paywall-message {
    display: block;
    width: 100%
}

.ns-note .paywall--abTest {
    padding: 30px 80px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #efefef
}

@media only screen and (max-width: 480px) {
    .ns-note .paywall--abTest {
        padding: 20px
    }
}

.ns-note .paywall--abTest .paywall__head {
    margin-bottom: 15px
}

@media only screen and (max-width: 700px) {
    .ns-note .paywall--abTest .paywall__head {
        margin-bottom: 15px
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .paywall--abTest .paywall__head {
        margin-bottom: 10px
    }
}

.ns-note .paywall--abTest .paywall__count {
    color: #777
}

.ns-note .paywall--abTest .abTest__buttonText {
    font-size: 16px;
    margin-bottom: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .paywall--abTest .abTest__buttonText {
        font-size: 15px;
        margin-bottom: 3px
    }
}

.ns-note .paywall--abTest .abTest__buttonPrice {
    font-size: 13px
}

@media only screen and (max-width: 480px) {
    .ns-note .paywall--abTest .abTest__buttonPrice {
        font-size: 12px
    }
}

.ns-note .p-banner a {
    display: block;
    width: 580px;
    height: 200px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/banner_manga-contest_timeline-c4c7c2d1a080711583019269c8eeb88ccee74f3e3010a10fa92e94cc32f73e33.jpg) no-repeat;
    background-size: 580px 200px;
    margin: 0 auto 10px auto
}

@media only screen and (max-width: 480px) {
    .ns-note .p-banner a {
        width: 100%;
        height: 0;
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/banner_manga-contest_timeline-c4c7c2d1a080711583019269c8eeb88ccee74f3e3010a10fa92e94cc32f73e33.jpg) no-repeat;
        background-size: cover;
        padding-top: 34.5%
    }
}

.ns-note .p-banner.p-banner--tl {
    margin: 0 auto 15px auto
}

@media only screen and (max-width: 480px) {
    .ns-note .p-banner.p-banner--tl {
        width: 94%;
        margin: 0 auto 10px auto
    }
}

.ns-note .sub-menu {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    float: right;
    padding-top: 8px
}

.ns-note .sub-menu>li {
    margin-right: 15px;
    font-size: 11px
}

.ns-note .sub-menu>li>a {
    color: #999
}

.ns-note .sub-menu>li:last-child {
    margin-right: 0
}

.ns-note .sub-menu>li.sub-menu__bell {
    margin-right: 8px
}

@media only screen and (max-width: 700px) {
    .ns-note .sub-menu>li.sub-menu__bell {
        margin-right: 0
    }
}

.ns-note .sub-menu>li.sub-menu__home {
    margin-right: 7px
}

@media only screen and (max-width: 700px) {
    .ns-note .sub-menu .sub-menu__registration {
        display: block
    }
}

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

    .ns-note .sub-menu .sub-menu__home,
    .ns-note .sub-menu .sub-menu__settings,
    .ns-note .sub-menu .sub-menu__user,
    .ns-note .sub-menu .sub-menu__about,
    .ns-note .sub-menu .sub-menu__login {
        display: none
    }
}

.ns-note .staticPage {
    margin-top: -20px;
    background: #fff
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage {
        margin-top: -10px
    }
}

.ns-note .staticPage .staticPage__hr {
    width: 100%;
    border-top: 1px solid #f2f2f2
}

.ns-note .staticPage .staticPage__bgGrey {
    width: 100%;
    background: #f8f9fa;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2
}

.ns-note .staticPage .staticPage__bgGrey.pattern-grey {
    background: #f8f9fa url(https://d2l930y2yx77uc.cloudfront.net/assets/bg_pattern_grey-df1490bdac933ffc990f656f4bb730844de1d4c00680d02f0acb51cd5a56a02f.svg) no-repeat;
    background-position: center;
    background-size: 1200px 500px
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__bgGrey.pattern-grey {
        background-size: 800px 333px
    }
}

.ns-note .staticPage .staticPage__inner {
    width: 1000px;
    margin: 0 auto;
    padding: 80px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__inner {
        width: 100%;
        padding: 40px 20px
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .staticPage .staticPage__inner {
        width: 700px;
        padding: 50px 0
    }
}

.ns-note .staticPage .staticPage__inner>h3 {
    font-size: 22px;
    margin-bottom: 35px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__inner>h3 {
        font-size: 18px;
        margin-bottom: 20px
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .staticPage .staticPage__inner>h3 {
        margin-bottom: 20px
    }
}

.ns-note .staticPage .staticPage__inner.staticPage__inner--cv {
    padding: 55px 0
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__inner.staticPage__inner--cv {
        padding: 30px
    }
}

.ns-note .staticPage .staticPage__main {
    position: relative;
    width: 100%;
    height: 244px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/bg_fixed-page-6833ef150256c807546b1243ef4fca6c75c81b6558dd4369346a73fb2dd2bb0b.png) no-repeat;
    background-size: cover;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__main {
        height: 184px
    }
}

.ns-note .staticPage .staticPage__main.premium-main {
    background: #41C9B4 url(https://d2l930y2yx77uc.cloudfront.net/assets/bg_pattern_grey-df1490bdac933ffc990f656f4bb730844de1d4c00680d02f0acb51cd5a56a02f.svg) no-repeat;
    background-position: center;
    background-size: 1200px 500px
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__main.premium-main {
        background-size: 800px 333px
    }
}

.ns-note .staticPage .staticPage__Lead {
    font-size: 14px;
    text-align: center;
    line-height: 1.8;
    color: #777;
    padding-bottom: 50px
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__Lead {
        text-align: justify;
        padding-bottom: 40px
    }

    .ns-note .staticPage .staticPage__Lead br {
        display: none
    }
}

.ns-note .staticPage .staticPage__Lead.staticPage__Lead--large {
    font-size: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__Lead.staticPage__Lead--large {
        font-size: 14px
    }
}

.ns-note .staticPage .staticPage__annotation {
    font-size: 12px;
    color: #777;
    text-align: center
}

.ns-note .staticPage .staticPage__cv-button {
    text-align: center;
    margin: 40px 0 0 0
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__cv-button {
        margin: 30px 0 0 0
    }
}

.ns-note .staticPage .staticPage__cv-button .premium__description {
    font-size: 14px;
    margin-top: 8px;
    color: #2cb696
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__cv-button .premium__description {
        font-size: 14px
    }
}

.ns-note .staticPage .staticPage__cv-button--last {
    margin: 0
}

.ns-note .staticPage .staticPage__cv-button--last>h4 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__cv-button--last>h4 {
        font-size: 16px;
        padding-bottom: 8px
    }
}

.ns-note .staticPage .staticPage__cv-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 25px 0 0 0
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__cv-text {
        font-size: 16px
    }
}

.ns-note .staticPage .staticPage__cv-text.staticPage__cv-text--white {
    color: #fff
}

.ns-note .staticPage .staticPage__feature {
    background: #f8f9fa;
    border: 1px solid #f2f2f2;
    padding: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .staticPage .staticPage__feature {
        padding: 20px
    }
}

.ns-note .staticPage .staticPage__feature p,
.ns-note .staticPage .staticPage__feature li {
    color: #777
}

.ns-note .staticPage .staticPage__feature.staticPage__feature--premium .feature-premium .feature-premium__title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .staticPage .staticPage__feature.staticPage__feature--premium .feature-premium .feature-premium__title {
        font-size: 12px
    }
}

.ns-note .staticPage .staticPage__feature.staticPage__feature--premium .feature-premium .feature-premium__text {
    font-size: 12px;
    text-align: left;
    margin-bottom: 10px
}

.ns-note .staticPage .staticPage__feature.staticPage__feature--premium .feature-premium img {
    max-width: 250px
}

.ns-note .staticPage .flow-number {
    font-weight: bold;
    color: #222222;
    margin-right: 5px
}

.ns-note .premium .premium__featureList {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: flex-start;
    -ms-box-align: flex-start;
    -o-box-align: flex-start;
    box-align: flex-start;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__featureList {
        display: block
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .premium .premium__featureList {
        display: block
    }
}

.ns-note .premium .premium__featureList>li {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 50%;
    width: calc(50% - 30px);
    margin-right: 30px
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__featureList>li {
        display: block;
        max-width: 100%;
        width: 100%;
        padding-bottom: 30px
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .premium .premium__featureList>li {
        max-width: 100%;
        width: 100%
    }
}

.ns-note .premium .premium__featureList>li:nth-child(even) {
    margin-right: 0;
    margin-left: 30px
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__featureList>li:nth-child(even) {
        margin-right: 0;
        margin-left: 0
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .premium .premium__featureList>li:nth-child(even) {
        margin-right: 0;
        margin-left: 0
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__featureList>li .featureList__image {
        text-align: center
    }
}

.ns-note .premium .premium__featureList>li .featureList__image>img {
    width: 200px
}

.ns-note .premium .premium__featureList>li .featureList__text>h4 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 5px
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__featureList>li .featureList__text>h4 {
        font-size: 16px
    }
}

.ns-note .premium .premium__featureList>li .featureList__text>p {
    font-size: 12px;
    line-height: 1.7;
    color: #777
}

.ns-note .premium .premium__featureList>li .featureList__alignHeight {
    margin-bottom: 1em
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__featureList>li .featureList__alignHeight {
        margin-bottom: 0
    }
}

.ns-note .premium .premium__title {
    padding-top: 30px;
    font-size: 30px;
    text-align: center;
    color: #fff;
    text-shadow: none
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__title {
        padding-top: 20px
    }
}

.ns-note .premium .premium__title>span {
    display: block;
    font-size: 18px;
    letter-spacing: 0.32em;
    font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto;
    margin-top: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__title>span {
        font-size: 13px
    }
}

.ns-note .premium .premium__title .premium__logo {
    width: 210px;
    height: 58px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/premium/logo_premium-2dbb014735c6e2cb086205ee9635b35f5bb59aecaf9321a7660d90c01a2f9cbe.svg) no-repeat;
    background-size: 210px 58px;
    margin: 0 auto 7px auto
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__title .premium__logo {
        width: 150px;
        height: 41px;
        background-size: 150px 41px
    }
}

.ns-note .premium .premium__title .premium__subTitle {
    font-size: 17px;
    letter-spacing: 0.08em;
    margin-left: 0.08em;
    margin-bottom: 8px
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__title .premium__subTitle {
        font-size: 14px;
        letter-spacing: 0.05em;
        margin-left: 0.05em;
        margin-bottom: 5px
    }
}

.ns-note .premium .premium__title .premium__titleText {
    font-size: 23px;
    letter-spacing: 0.3em;
    margin-left: 0.3em;
    margin-bottom: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__title .premium__titleText {
        font-size: 19px;
        margin-bottom: 4px
    }
}

.ns-note .premium .premium__title .premium__titlePrice {
    font-size: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__title .premium__titlePrice {
        font-size: 13px
    }
}

.ns-note .premium .premium__Lead {
    font-size: 13px;
    text-align: center;
    line-height: 1.8;
    color: #777
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__Lead {
        text-align: justify
    }

    .ns-note .premium .premium__Lead br {
        display: none
    }
}

.ns-note .premium .premium__faq>li {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 25px
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .premium__faq>li {
        font-size: 13px;
        margin-bottom: 15px
    }
}

.ns-note .premium .premium__faq>li:last-child {
    margin-bottom: 0
}

.ns-note .premium .premium__faq>li>a {
    color: #222
}

.ns-note .premium .staticPage__table .premium__table {
    width: 1000px;
    margin: 0 auto
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .ns-note .premium .staticPage__table .premium__table {
        width: 100%
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .staticPage__table .premium__table {
        width: 100%
    }
}

.ns-note .premium .staticPage__table .premium__table>thead {
    background: #f8f9fa;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2
}

.ns-note .premium .staticPage__table .premium__table>thead>tr>th {
    font-size: 16px;
    font-weight: normal;
    padding: 10px 0;
    vertical-align: middle
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .staticPage__table .premium__table>thead>tr>th {
        font-size: 11px
    }
}

.ns-note .premium .staticPage__table .premium__table>tbody>tr:nth-child(even) {
    background: #f8f9fa;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2
}

.ns-note .premium .staticPage__table .premium__table>tbody>tr:last-child {
    border-bottom: 1px solid #f2f2f2
}

.ns-note .premium .staticPage__table .premium__table>tbody>tr>td {
    font-size: 14px;
    color: #777;
    padding: 10px 0;
    vertical-align: middle
}

@media only screen and (max-width: 480px) {
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>td {
        font-size: 12px
    }
}

.ns-note .premium .staticPage__table .premium__table>thead>tr>th:first-child,
.ns-note .premium .staticPage__table .premium__table>thead>tr>td:first-child,
.ns-note .premium .staticPage__table .premium__table>tbody>tr>th:first-child,
.ns-note .premium .staticPage__table .premium__table>tbody>tr>td:first-child {
    width: 40%;
    padding-left: 30px
}

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

    .ns-note .premium .staticPage__table .premium__table>thead>tr>th:first-child,
    .ns-note .premium .staticPage__table .premium__table>thead>tr>td:first-child,
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>th:first-child,
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>td:first-child {
        padding-left: 10px
    }
}

.ns-note .premium .staticPage__table .premium__table>thead>tr>th:nth-child(2),
.ns-note .premium .staticPage__table .premium__table>thead>tr>th:nth-child(3),
.ns-note .premium .staticPage__table .premium__table>thead>tr>td:nth-child(2),
.ns-note .premium .staticPage__table .premium__table>thead>tr>td:nth-child(3),
.ns-note .premium .staticPage__table .premium__table>tbody>tr>th:nth-child(2),
.ns-note .premium .staticPage__table .premium__table>tbody>tr>th:nth-child(3),
.ns-note .premium .staticPage__table .premium__table>tbody>tr>td:nth-child(2),
.ns-note .premium .staticPage__table .premium__table>tbody>tr>td:nth-child(3) {
    width: 20%;
    text-align: center
}

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

    .ns-note .premium .staticPage__table .premium__table>thead>tr>th:nth-child(2),
    .ns-note .premium .staticPage__table .premium__table>thead>tr>th:nth-child(3),
    .ns-note .premium .staticPage__table .premium__table>thead>tr>td:nth-child(2),
    .ns-note .premium .staticPage__table .premium__table>thead>tr>td:nth-child(3),
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>th:nth-child(2),
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>th:nth-child(3),
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>td:nth-child(2),
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>td:nth-child(3) {
        width: 35%
    }
}

.ns-note .premium .staticPage__table .premium__table>thead>tr>th:nth-child(3),
.ns-note .premium .staticPage__table .premium__table>thead>tr>td:nth-child(3),
.ns-note .premium .staticPage__table .premium__table>tbody>tr>th:nth-child(3),
.ns-note .premium .staticPage__table .premium__table>tbody>tr>td:nth-child(3) {
    width: 40%
}

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

    .ns-note .premium .staticPage__table .premium__table>thead>tr>th:nth-child(3),
    .ns-note .premium .staticPage__table .premium__table>thead>tr>td:nth-child(3),
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>th:nth-child(3),
    .ns-note .premium .staticPage__table .premium__table>tbody>tr>td:nth-child(3) {
        width: 25%;
        padding-right: 10px
    }
}

.ns-note .eyecatch--boxShadow {
    position: relative
}

.ns-note .eyecatch--boxShadow:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    z-index: 100
}

.ns-note .eyecatch--boxShadow:hover:before {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2)
}

.ns-note .my-menu {
    margin: 5px -8px
}

.ns-note .my-menu>li>a {
    display: block;
    padding: 6px 25px
}

.ns-note .my-menu .my-menu__separator {
    border-bottom: 1px solid #e1e5e7;
    margin: 10px 0;
    padding: 0
}

.ns-note .my-menu .my-menu__span {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: #aaa;
    margin-top: 3px
}

.ns-note .my-menu .my-menu__button {
    padding: 0 10px
}

.ns-note .subNav__separator {
    border-bottom: 1px solid #e1e5e7;
    margin: 10px 0;
    padding: 0
}

.ns-note .bg-info {
    background: #fff;
    border: 2px solid #e1e5e7;
    font-size: 12px;
    text-align: center;
    padding: 6px
}

.ns-note .bg-warning {
    background: #f8f9fa;
    font-size: 12px;
    text-align: center;
    padding: 6px;
    color: #ff0000
}

.ns-note .bg-warning.bg-warning--magNotification {
    margin: -20px -15px 20px -15px
}

@media only screen and (max-width: 480px) {
    .ns-note .bg-warning.bg-warning--magNotification {
        margin: -20px -10px 15px -10px
    }
}

.ns-note .bg-status {
    background: #f8f9fa;
    font-size: 12px;
    text-align: center;
    padding: 6px;
    color: #777
}

.ns-note .bg-status.bg-status--magEdit {
    margin: -20px -15px 20px -15px
}

@media only screen and (max-width: 480px) {
    .ns-note .bg-status.bg-status--magEdit {
        margin: -20px -10px 15px -10px
    }
}

.ns-note .bg-primary {
    background: #41C9B4;
    font-size: 12px;
    text-align: center;
    padding: 6px;
    color: #fff
}

.ns-note .agree-check {
    display: inline-block;
    font-size: 11px;
    text-align: center;
    margin: 0
}

.ns-note .agree-check>input {
    margin: 0 5px 0 0
}

.ns-note .agree-check>span {
    font-size: 11px
}

.ns-note .modal-contents__label {
    text-align: center
}

.ns-note .modal-contents__label>.agree-check {
    margin: 10px 0 0 0
}

.ns-note .buttonGroup-separate {
    width: 100%;
    max-height: 46px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ns-note .buttonGroup-separate li {
    width: 33.333333%;
    padding: 0 3px
}

.ns-note .buttonGroup-separate li>a {
    width: 100%
}

.ns-note .buttonGroup-separate li:first-child {
    padding-left: 0
}

.ns-note .buttonGroup-separate li:last-child {
    padding-right: 0
}

.ns-note .buttonGroup-separate .input-payMag {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-box-pack: center;
    -o-box-pack: center;
    box-pack: center;
    color: #222;
    font-weight: normal
}

@media only screen and (max-width: 480px) {
    .ns-note .buttonGroup-separate .input-payMag {
        font-size: 11px
    }
}

.ns-note .buttonGroup-separate .input-payMag>input[type="text"] {
    width: 50px;
    height: 20px;
    padding: 5px;
    font-size: 11px;
    margin: 0 7px
}

@media only screen and (max-width: 480px) {
    .ns-note .buttonGroup-separate .input-payMag>input[type="text"] {
        margin: 0 3px
    }
}

.ns-note .horizontal-group {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .horizontal-group>.subscription-price {
    width: 6em;
    margin-left: auto;
    text-align: right
}

.ns-note .subscription-confirm dl {
    border-bottom: 1px solid #e1e5e7;
    padding-bottom: 10px;
    margin-bottom: 10px
}

.ns-note .subscription-confirm dl>dt {
    font-weight: bold;
    margin-bottom: 5px
}

.ns-note .salesDetail-settings {
    margin-left: 84px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e1e5e7;
    border-top: none
}

.ns-note .salesDetail-settings .salesDetail-settings__label {
    font-weight: bold;
    margin: 8px 0 4px
}

.ns-note .limited-settings__value {
    margin-bottom: 8px;
    border: none
}

.ns-note .limited-settings__checkbox {
    display: -webkit-inline-block;
    display: -moz-inline-block;
    display: -ms-inline-block;
    display: -o-inline-block;
    display: inline-block;
    margin-bottom: 8px
}

.ns-note .limited-settings__checkbox label {
    margin-bottom: 0
}

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

.ns-note .limited-settings__notes {
    font-size: 11px;
    color: #777
}

.ns-note .limited-settings__count {
    width: auto
}

.ns-note .limited-settings__count .slash {
    padding: 0 3px
}

.ns-note .help .help__item {
    margin-bottom: 50px
}

.ns-note .help h2 {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 15px
}

@media only screen and (max-width: 480px) {
    .ns-note .help h2 {
        font-size: 16px
    }
}

.ns-note .help h3 {
    font-size: 12px;
    margin-bottom: 10px
}

.ns-note .help ul {
    margin-bottom: 20px
}

.ns-note .help ul>li {
    line-height: 1.3;
    margin-bottom: 10px
}

.ns-note .help ul>li:before {
    content: "・";
    color: #777
}

.ns-note .help ul>li>a {
    color: #777
}

.ns-note .help ul>li>a:hover {
    text-decoration: underline
}

.ns-note .settings .settings__header {
    position: relative;
    background: #fff;
    text-align: center;
    padding-top: 35px;
    margin-bottom: 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .settings .settings__header {
        padding-top: 25px;
        margin-bottom: 10px
    }
}

.ns-note .settings .settings__header>h1 {
    font-size: 24px;
    font-weight: normal;
    padding: 0 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (max-width: 480px) {
    .ns-note .settings .settings__header>h1 {
        font-size: 18px
    }
}

.ns-note .settings .settings__header ul.settings__magInfo {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 8px 0 20px 0
}

.ns-note .settings .settings__header ul.settings__magInfo>li {
    margin-right: 20px;
    font-size: 11px
}

.ns-note .settings .settings__header ul.settings__magInfo>li:last-child {
    margin-right: 0
}

.ns-note .settings .settings__header ul.settings__magInfo span,
.ns-note .settings .settings__header ul.settings__magInfo a {
    margin-left: 3px;
    font-size: 16px;
    font-weight: bold
}

.ns-note .settings .settings__header ul.settings__magInfo a {
    color: #3BC49D
}

.ns-note .settings .settings__header .c-button--view {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px
}

.ns-note .settings .settings__price {
    margin-top: 3px;
    color: #898D8C
}

.ns-note .settings .settings__nav {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    justify-content: center;
    width: 580px;
    height: 34px;
    margin: 0 auto
}

.ns-note .settings .settings__nav>li {
    text-align: center;
    margin: 0 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .settings .settings__nav>li {
        margin: 0 7px
    }
}

.ns-note .settings .settings__nav>li a {
    font-size: 12px;
    color: #222;
    display: table-cell;
    vertical-align: middle;
    height: 34px;
    border-bottom: 2px solid transparent
}

.ns-note .settings .settings__nav>li a.is-active {
    color: #222;
    border-bottom: 2px solid #222;
    font-weight: bold
}

.ns-note .settings .settings__nav>li a:hover {
    color: #222;
    border-bottom: 2px solid #222
}

@media only screen and (max-width: 700px) {
    .ns-note .settings .settings__nav {
        width: 100%
    }
}

.ns-note .settings .settings__body,
.ns-note .settings .settings__body--magMembers {
    background: #fff;
    padding: 40px
}

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

    .ns-note .settings .settings__body,
    .ns-note .settings .settings__body--magMembers {
        padding: 20px
    }
}

.ns-note .settings .settings__body>.mag-list,
.ns-note .settings .settings__body--magMembers>.mag-list {
    margin-bottom: 40px
}

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

    .ns-note .settings .settings__body>.mag-list,
    .ns-note .settings .settings__body--magMembers>.mag-list {
        margin-bottom: 20px
    }
}

.ns-note .settings .settings__footer {
    background: #fff;
    padding: 10px;
    border-top: 1px solid #E8ECEB
}

.ns-note .settings .settings__footer>ul>li {
    max-height: 30px
}

.ns-note .settings .settings__footer>ul>li:last-child {
    margin-left: auto
}

.ns-note .settings .settings__body--magMembers {
    padding: 0 20px 30px 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .settings .settings__body--magMembers {
        padding: 0 10px 10px 10px
    }
}

.ns-note .settings .settings__body--magMembers .settings__navBar {
    margin: 0 -20px 15px -20px;
    padding: 8px 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .settings .settings__body--magMembers .settings__navBar {
        margin: 0 -10px 15px -10px
    }
}

.ns-note .settings .settings__body--magMembers .settings__navBar>li:last-child {
    margin-left: auto
}

.ns-note .settings .settings__body--magMembers .settings__navBar>li:last-child>span:last-child {
    margin-left: 15px
}

.ns-note .settings .settings__body--magMembers .settings__navBar>li:first-child {
    margin-left: 0
}

.ns-note .settings .settings__body--magMembers .settings__navBar>li:first-child>span:first-child {
    margin-left: 0
}

.ns-note .mag-dataList {
    margin-top: 20px
}

.ns-note .mag-dataList>li {
    margin-bottom: 20px
}

.ns-note .mag-dataList>li:last-child {
    margin-bottom: 0
}

.ns-note .mag-dataList>li:first-child>dl>dt {
    margin-top: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-dataList dl {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.ns-note .mag-dataList dl>dt {
    position: relative;
    width: 120px;
    padding-right: 8px;
    font-size: 13px;
    font-weight: bold
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-dataList dl>dt {
        width: 100%;
        font-size: 12px;
        margin-bottom: 4px
    }
}

.ns-note .mag-dataList dl>dt .help-link {
    display: block;
    margin-top: 8px;
    color: #249f80;
    font-size: 12px;
    font-weight: normal
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-dataList dl>dt .help-link {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 0
    }
}

.ns-note .mag-dataList dl>dd {
    width: calc(100% - 110px)
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-dataList dl>dd {
        width: 100%
    }
}

.ns-note .mag-dataList dl>dd textarea {
    width: 100%;
    height: 80px;
    padding: 5px 10px
}

.ns-note .mag-dataList dl>dd input[type="text"] {
    width: 100%;
    height: 40px
}

.ns-note .mag-dataList dl>dd input[type="text"].small {
    width: auto;
    display: inline-block
}

.ns-note .mag-dataList dl>dd input[type="number"] {
    width: 70px;
    height: 40px;
    display: inline-block
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-dataList dl>dd input[type="number"] {
        width: 100%;
        height: auto
    }
}

.ns-note .mag-salesList {
    padding-top: 15px;
    margin-top: -10px
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-salesList {
        padding-top: 10px;
        margin-top: 0
    }
}

.ns-note .mag-salesList .mag-salesList__head {
    font-size: 11px;
    font-weight: bold;
    padding: 5px 10px;
    margin-bottom: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-salesList .mag-salesList__head {
        font-size: 10px
    }
}

.ns-note .mag-salesList>ul>li {
    margin-bottom: 12px;
    padding-left: 10px;
    padding-right: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-salesList>ul>li {
        padding-left: 5px;
        padding-right: 5px
    }
}

.ns-note .mag-salesList>ul>li:last-child {
    padding: 15px 10px 18px 10px
}

.ns-note .mag-salesList>ul>li:last-child>dl dd {
    font-weight: bold
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-salesList>ul>li:last-child {
        padding: 10px 5px
    }
}

.ns-note .mag-salesList>ul>li>dl dt {
    font-size: 12px;
    line-height: 1
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-salesList>ul>li>dl dt {
        font-size: 11px
    }
}

.ns-note .mag-salesList>ul>li>dl dd {
    margin-left: auto;
    font-size: 12px;
    line-height: 1;
    text-align: right
}

@media only screen and (max-width: 480px) {
    .ns-note .mag-salesList>ul>li>dl dd {
        font-size: 11px
    }
}

.ns-note .linkList {
    text-align: center
}

.ns-note .linkList>li>a {
    color: #41C9B4
}

.ns-note .linkList>li>a:hover {
    text-decoration: underline
}

.ns-note .linkList>li>a:after {
    content: "|";
    padding: 0 5px
}

.ns-note .linkList>li:last-child>a:after {
    content: "";
    padding: 0
}

.ns-note .u-mts {
    margin-top: 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .u-mts {
        margin-top: 10px
    }
}

.ns-note .u-mtm,
.ns-note .u-mtm--settings {
    margin-top: 30px
}

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

    .ns-note .u-mtm,
    .ns-note .u-mtm--settings {
        margin-top: 20px
    }
}

.ns-note .u-mbxs {
    margin-bottom: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .u-mbxs {
        margin-bottom: 5px
    }
}

.ns-note .userList>li,
.ns-note .userList--select>li {
    padding: 15px 0
}

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

    .ns-note .userList>li,
    .ns-note .userList--select>li {
        padding: 10px 0
    }
}

.ns-note .userList>li:first-child,
.ns-note .userList--select>li:first-child {
    padding-top: 0
}

.ns-note .userList>li .userList__img,
.ns-note .userList--select>li .userList__img {
    display: block
}

.ns-note .userList>li .userList__name,
.ns-note .userList--select>li .userList__name {
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px
}

.ns-note .userList>li .userList__name>a,
.ns-note .userList--select>li .userList__name>a,
.ns-note .userList>li .userList__name p,
.ns-note .userList--select>li .userList__name p {
    display: inline-block;
    max-width: 350px;
    line-height: 1;
    margin-bottom: 1px
}

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

    .ns-note .userList>li .userList__name>a,
    .ns-note .userList--select>li .userList__name>a,
    .ns-note .userList>li .userList__name p,
    .ns-note .userList--select>li .userList__name p {
        max-width: 180px
    }
}

.ns-note .userList>li .userList__name>span,
.ns-note .userList--select>li .userList__name>span {
    display: block;
    max-width: 350px;
    font-weight: normal;
    line-height: 1.3;
    color: #898D8C
}

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

    .ns-note .userList>li .userList__name>span,
    .ns-note .userList--select>li .userList__name>span {
        font-size: 11px;
        max-width: 180px
    }
}

.ns-note .userList>li .userList__invite,
.ns-note .userList--select>li .userList__invite {
    font-size: 12px;
    margin-left: 10px
}

.ns-note .userList>li .userList__option,
.ns-note .userList--select>li .userList__option {
    margin-left: auto
}

.ns-note .userList>li .userList__rate>input,
.ns-note .userList--select>li .userList__rate>input {
    width: 50px;
    margin: 0 7px
}

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

    .ns-note .userList>li .userList__rate>span,
    .ns-note .userList--select>li .userList__rate>span {
        font-size: 11px
    }
}

.ns-note .userList>li .userList__rate .rateValue,
.ns-note .userList--select>li .userList__rate .rateValue {
    font-size: 14px;
    font-weight: bold;
    margin: 0 7px
}

.ns-note .userList.userList--rateModal,
.ns-note .userList--rateModal.userList--select {
    margin-bottom: -15px
}

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

    .ns-note .userList.userList--rateModal,
    .ns-note .userList--rateModal.userList--select {
        margin-bottom: -10px
    }
}

.ns-note .userList.userList--rateModal>li .userList__name>p,
.ns-note .userList--rateModal.userList--select>li .userList__name>p {
    max-width: 160px
}

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

    .ns-note .userList.userList--rateModal>li .userList__name>p,
    .ns-note .userList--rateModal.userList--select>li .userList__name>p {
        max-width: 110px
    }
}

.ns-note .userList.userList--rateModal>li:last-child,
.ns-note .userList--rateModal.userList--select>li:last-child {
    border-bottom: none
}

.ns-note .userList--select {
    max-height: 200px;
    overflow-y: auto
}

.ns-note .userList--select>li {
    padding: 0
}

.ns-note .userList--select>li:last-child {
    border-bottom: none
}

.ns-note .userList--select>li>a {
    width: 100%;
    padding: 10px
}

.ns-note .userList--select>li>a:hover {
    background: #f8f9fa
}

.ns-note .userList--select .userList__img {
    display: block;
    width: 30px
}

.ns-note .userList--select .userList__name {
    width: calc(100% - 120px);
    max-width: 100%
}

.ns-note .userList--select .userList__name>p,
.ns-note .userList--select .userList__name>span {
    color: #222
}

.ns-note .userList--select .userList__label {
    width: 80px;
    font-size: 11px;
    text-align: right;
    color: #898D8C;
    margin-left: auto
}

.ns-note .user-select {
    position: relative;
    text-align: left
}

.ns-note .user-select .user-select__selectedArea {
    background: #f8f9fa;
    padding: 5px 0 0 5px;
    margin-top: -1px
}

.ns-note .user-select .user-select__selectedArea>ul>li {
    margin: 0 5px 5px 0
}

.ns-note .user-select .user-select__dropdown {
    position: absolute;
    top: 31px;
    width: 100%;
    background: #fff;
    z-index: 10;
    margin-top: -1px
}

.ns-note .userList__addMember {
    display: inline-block;
    font-size: 13px
}

.ns-note .userList__footLink {
    display: inline-block;
    margin-top: 20px;
    font-size: 12px
}

@media only screen and (max-width: 480px) {
    .ns-note .userList__footLink {
        margin-top: 10px
    }
}

.ns-note .to-list>dt {
    color: #898D8C;
    margin-right: 1em
}

.ns-note .to-list>dd {
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    -webkit-box-flex: 1;
    flex: 1
}

.ns-note .actions-right {
    margin-left: auto
}

.ns-note .link__circleIcon>a {
    font-size: 12px
}

.ns-note .link__circleIcon>a>span {
    margin-left: 5px
}

.ns-note .purchaseList>ul>li {
    padding: 15px 20px
}

@media only screen and (max-width: 480px) {
    .ns-note .purchaseList>ul>li {
        padding: 10px
    }
}

.ns-note .purchaseList .purchaseList__head {
    background: #f8f9fa;
    margin: -15px -20px 10px -20px;
    padding: 5px 20px;
    color: #777
}

@media only screen and (max-width: 480px) {
    .ns-note .purchaseList .purchaseList__head {
        margin: -10px -10px 7px -10px;
        padding: 3px 10px
    }
}

.ns-note .purchaseList .purchaseList__head>p:last-child {
    margin-left: auto
}

@media only screen and (max-width: 480px) {
    .ns-note .purchaseList .purchaseList__head>p {
        font-size: 11px
    }
}

.ns-note .purchaseList .purchaseList__title>p {
    font-size: 13px;
    font-weight: bold
}

.ns-note .purchaseList .purchaseList__title>p:last-child {
    font-size: 11px;
    font-weight: normal;
    color: #777;
    padding: 0
}

.ns-note .type-label {
    font-size: 11px;
    font-weight: normal;
    color: #777;
    padding: 0
}

.ns-note .permissionTable {
    width: 100%
}

.ns-note .permissionTable>thead {
    background: #f8f9fa;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2
}

.ns-note .permissionTable>thead>tr>th {
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    padding: 3px 0
}

.ns-note .permissionTable>thead>tr>th:first-child {
    width: 55%
}

.ns-note .permissionTable>thead>tr>th:nth-child(2) {
    width: 15%
}

.ns-note .permissionTable>thead>tr>th:nth-child(3) {
    width: 15%
}

.ns-note .permissionTable>thead>tr>th:nth-child(4) {
    width: 15%
}

@media only screen and (max-width: 480px) {
    .ns-note .permissionTable>thead>tr>th {
        font-size: 10px;
        padding: 2px 0
    }

    .ns-note .permissionTable>thead>tr>th:first-child {
        width: 47%
    }

    .ns-note .permissionTable>thead>tr>th:nth-child(2) {
        width: 19%
    }

    .ns-note .permissionTable>thead>tr>th:nth-child(3) {
        width: 15%
    }

    .ns-note .permissionTable>thead>tr>th:nth-child(4) {
        width: 19%
    }
}

.ns-note .permissionTable>tbody>tr:nth-child(even) {
    background: #f8f9fa;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2
}

.ns-note .permissionTable>tbody td {
    color: #777;
    padding: 6px 0;
    font-size: 11px;
    text-align: center;
    vertical-align: middle
}

@media only screen and (max-width: 480px) {
    .ns-note .permissionTable>tbody td {
        font-size: 11px;
        line-height: 1.3;
        padding: 6px 0
    }
}

.ns-note .permissionTable>tbody td:first-child {
    text-align: left;
    padding-left: 10px
}

@media only screen and (max-width: 480px) {
    .ns-note .permissionTable>tbody td:first-child {
        padding-left: 6px
    }
}

.ns-note .p-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    width: inherit;
    margin: 0 10px;
    padding: 10px 0 12px 0;
    border-top: 1px solid #e1e5e7
}

.ns-note .p-action>li,
.ns-note .p-action .p-action__like {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    font-size: 12px;
    line-height: 1
}

.ns-note .p-action>li:last-child {
    margin-left: auto
}

.ns-note .p-action a:hover {
    color: #a1a6a9
}

.ns-note .p-action__count {
    font-size: 14px;
    font-weight: bold
}

.ns-note .p-action__count.p-action__count--like {
    display: block;
    padding: 0 7px 0 3px
}

.ns-note .p-action__count.p-action__count--like.is-active {
    color: #EDC500
}

.ns-note .p-icon {
    display: block
}

.ns-note .p-icon--like {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon_20_like-5c5b84230af0f6e1fdb85bd350a6483a7d32a6af6900149c16a5bf1541ae5da6.svg) no-repeat;
    background-size: 20px 40px;
    background-position: 0 0
}

.ns-note .p-icon--like.is-active {
    background-position: 0 -20px
}

.ns-note .modalMoreButton {
    text-align: center;
    border-top: 1px solid #d9e0e2
}

.ns-note .modalMoreButton>a {
    display: block;
    padding: 10px;
    color: #3BC49D
}

.ns-note .modalMoreButton>a:hover {
    color: #3BC49D
}

.ns-note .pen,
.ns-note .pen-menu,
.ns-note .pen-input {
    font: 400 1.16em / 1.45 Palatino, Optima, Georgia, serif;
    color: #331
}

.ns-note .pen textarea {
    font: 400 1.16em / 1.45 Palatino, Optima, Georgia, serif;
    color: #331
}

.ns-note .pen:focus {
    outline: none
}

.ns-note .pen fieldset {
    border: 0
}

.ns-note img {
    border: 0
}

.ns-note .pen blockquote {
    padding-left: 10px;
    margin-left: -14px;
    border-left: 4px solid #1abf89
}

.ns-note .pen a {
    color: #1abf89
}

.ns-note .pen del {
    text-decoration: line-through
}

.ns-note .pen sub,
.ns-note .pen sup {
    font-size: 75%;
    position: relative;
    vertical-align: text-top\9
}

.ns-note :root .pen sub,
.ns-note :root .pen sup {
    vertical-align: baseline
}

.ns-note .pen sup {
    top: -0.5em
}

.ns-note .pen sub {
    bottom: -0.25em
}

.ns-note .pen hr {
    border: none;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 25px;
    *color: pink;
    *-webkit-filter: chroma(color=pink)
    * filter: chroma(color=pink)
    height: 10px
    *margin: -7px 0 15px
}

.ns-note .pen small {
    font-size: 0.8em;
    color: #888
}

.ns-note .pen em,
.ns-note .pen b,
.ns-note .pen strong {
    font-weight: 700
}

.ns-note .pen pre {
    white-space: pre-wrap;
    padding: 0.85em;
    background: #f8f8f8
}

.ns-note .pen p,
.ns-note .pen pre,
.ns-note .pen ul,
.ns-note .pen ol,
.ns-note .pen dl,
.ns-note .pen form,
.ns-note .pen table,
.ns-note .pen blockquote {
    margin-bottom: 16px
}

.ns-note .pen h1,
.ns-note .pen h2,
.ns-note .pen h3,
.ns-note .pen h4,
.ns-note .pen h5,
.ns-note .pen h6 {
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.2
}

.ns-note .pen h1 {
    font-size: 2em
}

.ns-note .pen h2 {
    font-size: 1.8em
}

.ns-note .pen h3 {
    font-size: 1.6em
}

.ns-note .pen h4 {
    font-size: 1.4em
}

.ns-note .pen h5,
.ns-note .pen h6 {
    font-size: 1.2em
}

.ns-note .pen ul,
.ns-note .pen ol {
    margin-left: 1.2em
}

.ns-note .pen ul {
    list-style: disc
}

.ns-note .pen-ul {
    list-style: disc
}

.ns-note .pen ol,
.ns-note .pen-ol {
    list-style: decimal
}

.ns-note .pen li ul,
.ns-note .pen li ol {
    margin: 0 2em 0 1.2em
}

.ns-note .pen-ul ul,
.ns-note .pen-ul ol {
    margin: 0 2em 0 1.2em
}

.ns-note .pen-ol ul,
.ns-note .pen-ol ol {
    margin: 0 2em 0 1.2em
}

.ns-note .pen li ul,
.ns-note .pen-ul ul,
.ns-note .pen-ol ul {
    list-style: circle
}

.ns-note .pen-menu,
.ns-note .pen-input {
    font-size: 14px;
    line-height: 1
}

.ns-note .pen-menu {
    white-space: nowrap;
    box-shadow: 1px 2px 3px -2px #222222;
    background: #333;
    background-image: -webkit-linear-gradient(top, #222, #333);
    background-image: linear-gradient(to bottom, #222, #333);
    opacity: 0.9;
    position: fixed;
    height: 36px;
    border: 1px solid #333;
    border-radius: 3px;
    display: none;
    z-index: 1000
}

.ns-note .pen-menu:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(51, 51, 51, 0);
    border-top-color: #333;
    border-width: 6px;
    left: 50%;
    margin-left: -6px
}

.ns-note .pen-icon {
    font: normal 900 16px / 40px Georgia serif;
    min-width: 20px;
    display: inline-block;
    padding: 0 10px;
    height: 36px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ns-note .pen-icon:first-of-type {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.ns-note .pen-icon:last-of-type {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.ns-note .pen-icon:hover {
    background: #000
}

.ns-note .pen-icon.active {
    color: #1abf89;
    background: #000;
    box-shadow: inset 2px 2px 4px #000
}

.ns-note .pen-input {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 36px;
    line-height: 20px;
    background: #333;
    color: #fff;
    border: none;
    text-align: center;
    display: none;
    font-family: arial, sans-serif
}

.ns-note .pen-input:focus {
    outline: none
}

.ns-note .pen-textarea {
    display: block;
    background: #f8f8f8;
    padding: 20px
}

.ns-note .pen textarea {
    font-size: 14px;
    border: none;
    background: none;
    width: 100%;
    _height: 200px;
    min-height: 200px;
    resize: none
}

.ns-note .pen-menu [class^="icon-"]:before,
.ns-note .pen-menu [class*=" icon-"]:before {
    font-family: "pen";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em
}

.ns-note .pen-menu .icon-location:before {
    content: '\e815'
}

.ns-note .pen-menu .icon-fit:before {
    content: '\e80f'
}

.ns-note .pen-menu .icon-bold:before {
    content: '\e805'
}

.ns-note .pen-menu .icon-italic:before {
    content: '\e806'
}

.ns-note .pen-menu .icon-justifyleft:before {
    content: '\e80a'
}

.ns-note .pen-menu .icon-justifycenter:before {
    content: '\e80b'
}

.ns-note .pen-menu .icon-justifyright:before {
    content: '\e80c'
}

.ns-note .pen-menu .icon-justifyfull:before {
    content: '\e80d'
}

.ns-note .pen-menu .icon-outdent:before {
    content: '\e800'
}

.ns-note .pen-menu .icon-indent:before {
    content: '\e801'
}

.ns-note .pen-menu .icon-mode:before {
    content: '\e813'
}

.ns-note .pen-menu .icon-fullscreen:before {
    content: '\e80e'
}

.ns-note .pen-menu .icon-insertunorderedlist:before {
    content: '\e802'
}

.ns-note .pen-menu .icon-insertorderedlist:before {
    content: '\e803'
}

.ns-note .pen-menu .icon-strikethrough:before {
    content: '\e807'
}

.ns-note .pen-menu .icon-underline:before {
    content: '\e804'
}

.ns-note .pen-menu .icon-blockquote:before {
    content: '\e814'
}

.ns-note .pen-menu .icon-undo:before {
    content: '\e817'
}

.ns-note .pen-menu .icon-pre:before {
    content: '\e816'
}

.ns-note .pen-menu .icon-unlink:before {
    content: '\e811'
}

.ns-note .pen-menu .icon-superscript:before {
    content: '\e808'
}

.ns-note .pen-menu .icon-subscript:before {
    content: '\e809'
}

.ns-note .pen-menu .icon-inserthorizontalrule:before {
    content: '\e818'
}

.ns-note .pen-menu .icon-pin:before {
    content: '\e812'
}

.ns-note .pen-menu .icon-createlink:before {
    content: '\e810'
}

.ns-note p,
.ns-note blockquote,
.ns-note dl,
.ns-note dt,
.ns-note dd,
.ns-note ul,
.ns-note ol,
.ns-note li,
.ns-note form {
    font-size: 12px
}

.ns-note .row:before,
.ns-note .row:after,
.ns-note .clearfix:before,
.ns-note .btn-group:before,
.ns-note .modal-window__sns:before,
.ns-note .get-urlname>ul:before,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label:before,
.ns-note .mag-top__button-group:before,
.ns-note .clearfix:after,
.ns-note .btn-group:after,
.ns-note .modal-window__sns:after,
.ns-note .get-urlname>ul:after,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label:after,
.ns-note .mag-top__button-group:after {
    display: table;
    content: ""
}

.ns-note .row:after,
.ns-note .clearfix:after,
.ns-note .btn-group:after,
.ns-note .modal-window__sns:after,
.ns-note .get-urlname>ul:after,
.ns-note .advanced-setting .advanced-setting__mag-list>ul li>label:after,
.ns-note .mag-top__button-group:after {
    clear: both
}

.ns-note .text-center {
    text-align: center
}

.ns-note .text-right {
    text-align: right
}

.ns-note .text-left {
    text-align: left
}

.ns-note .fl-l {
    float: left
}

.ns-note .fl-c {
    float: none;
    margin-left: auto;
    margin-right: auto
}

.ns-note .fl-r {
    float: right
}

.ns-note .no-sp {
    margin: 0;
    padding: 0
}

.ns-note .no-sp-b {
    margin-bottom: 0;
    padding-bottom: 0
}

.ns-note .no-sp-t {
    margin-top: 0;
    padding-top: 0
}

.ns-note .sp-b {
    margin-bottom: 2em
}

.ns-note .sp-b-s {
    margin-bottom: .470588235em;
    padding-bottom: 0
}

.ns-note .sp-top {
    padding-top: .82352941234em
}

.ns-note hr {
    margin: 2em auto;
    border: 0;
    border-top: .071428571em solid #e5e5e5;
    border-bottom: .071428571em solid #ffffff
}

.ns-note #container {
    width: 620px;
    margin: 0px auto 100px auto
}

.ns-note .wrap-posi {
    position: relative
}

.ns-note .wrap-posi .posi-t-l,
.ns-note .wrap-posi .posi-t-r {
    position: absolute
}

.ns-note .wrap-posi .posi-t-l {
    top: 0;
    left: 0
}

.ns-note .wrap-posi .posi-t-r {
    top: 0;
    right: 0
}

.ns-note img.fit {
    width: 100%;
    height: auto
}

.ns-note .row {
    width: 100%
}

.ns-note .row .fl-l {
    margin-left: 10px
}

.ns-note .row .fl-l:first-child {
    margin-left: 0 !important
}

.ns-note .inner-1 {
    padding: 10px
}

.ns-note .inner-2 {
    padding: 20px
}

.ns-note .heading {
    font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif !important
}

.ns-note .cl-blue {
    color: #2FBDB7
}

.ns-note .cl-lgrey {
    color: #AAAAAA
}

.ns-note .group-label span {
    margin-right: 5px
}

.ns-note .group-btn-vertical li {
    margin-top: 10px
}

.ns-note .group-btn-vertical li:first-child {
    margin-top: 0
}

.ns-note .group-btn-vertical .btn {
    width: 100%;
    display: block;
    height: 24px;
    line-height: 24px;
    background-color: #FFF;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    border: 1px solid #f3f3f3;
    border-bottom-color: #ccc;
    text-align: center;
    border-radius: 2px;
    box-sizing: border-box
}

.ns-note .group-btn-vertical .btn-blue {
    background-color: #2FBDB7;
    border: 1px solid #2FBDB7;
    border-bottom-color: #28A19C;
    color: #fff
}

.ns-note .area-edit h1,
.ns-note .area-edit h2,
.ns-note .area-edit h3,
.ns-note .area-edit h4,
.ns-note .area-edit h5,
.ns-note .area-edit div,
.ns-note .area-edit p,
.ns-note .area-edit ul,
.ns-note .area-edit ol,
.ns-note .area-edit table,
.ns-note .area-edit dl,
.ns-note .area-edit blockquote,
.ns-note .area-edit pre {
    color: #000 !important
}

.ns-note .area-edit div,
.ns-note .area-edit p,
.ns-note .area-edit ul,
.ns-note .area-edit ol,
.ns-note .area-edit table,
.ns-note .area-edit dl,
.ns-note .area-edit blockquote,
.ns-note .area-edit pre,
.ns-note .area-edit h1,
.ns-note .area-edit h2,
.ns-note .area-edit h3,
.ns-note .area-edit h4,
.ns-note .area-edit h5 {
    font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif !important
}

.ns-note .area-edit h1,
.ns-note .area-edit h2,
.ns-note .area-edit h3,
.ns-note .area-edit h4,
.ns-note .area-edit h5 {
    font-weight: bold !important
}

.ns-note .area-edit.post-title h1 {
    font-size: 200% !important;
    line-height: 1.5em !important;
    margin-bottom: 0.8em !important
}

.ns-note .area-edit.post-description h2 {
    font-size: 150% !important;
    line-height: 1.5em !important;
    margin-bottom: 1.4em !important
}

.ns-note .area-edit.post-content {
    position: relative
}

.ns-note .area-edit.post-content div,
.ns-note .area-edit.post-content p,
.ns-note .area-edit.post-content ul,
.ns-note .area-edit.post-content ol,
.ns-note .area-edit.post-content table,
.ns-note .area-edit.post-content dl,
.ns-note .area-edit.post-content blockquote,
.ns-note .area-edit.post-content pre,
.ns-note .area-edit.post-content h1,
.ns-note .area-edit.post-content h2,
.ns-note .area-edit.post-content h3,
.ns-note .area-edit.post-content h4,
.ns-note .area-edit.post-content h5 {
    margin-bottom: 1.9em !important
}

.ns-note .area-edit.post-content h3 {
    font-size: 125% !important;
    line-height: 1.5em !important;
    margin-bottom: 0.5em !important
}

.ns-note .area-edit.post-content div,
.ns-note .area-edit.post-content p,
.ns-note .area-edit.post-content ul,
.ns-note .area-edit.post-content ol,
.ns-note .area-edit.post-content table,
.ns-note .area-edit.post-content dl,
.ns-note .area-edit.post-content blockquote,
.ns-note .area-edit.post-content pre {
    font-size: 105% !important;
    line-height: 1.9em !important
}

.ns-note .area-edit.post-content .wrap-img {
    margin-left: auto;
    margin-right: auto
}

.ns-note .area-edit.post-content .wrap-img img {
    width: 100%;
    height: auto
}

.ns-note .area-edit.post-content .wrap-img .btn-img-edit {
    opacity: 0.2;
    margin: 10px;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background: url("../images/btn/btn_editor_img_edit.png") no-repeat
}

.ns-note .area-edit.post-content .wrap-img .btn-img-edit a {
    display: block
}

.ns-note .area-edit.post-content .wrap-img .btn-img-edit.active {
    opacity: 1
}

.ns-note .area-edit.post-content .wrap-img .btn-size {
    background-position: 0 0
}

.ns-note .area-edit.post-content .wrap-img .btn-size:hover {
    background-position: 0 -30px
}

.ns-note .area-edit.post-content .wrap-img .btn-delete {
    background-position: -30px 0
}

.ns-note .area-edit.post-content .wrap-img .btn-delete:hover {
    background-position: -30px -30px
}

.ns-note .area-edit.post-content .wrap-img.narrow {
    width: 60%
}

.ns-note .area-edit.post-content .btn-img-up-side {
    position: absolute;
    left: -68px;
    top: 152px;
    display: none
}

.ns-note .area-edit.post-content .btn-img-up-side.active {
    display: block
}

.ns-note .modal-open {
    overflow: hidden
}

.ns-note .modal {
    display: none;
    overflow: auto;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040
}

.ns-note .modal.fade .modal-dialog {
    -webkit-transform: translate(0, 5%);
    transform: translate(0, 5%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out
}

.ns-note .modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.ns-note .modal-dialog {
    position: relative;
    margin: 10px;
    z-index: 1050
}

.ns-note .modal-content {
    position: relative;
    background-color: #ffffff;
    background-clip: padding-box;
    outline: none;
    border-radius: 4px
}

.ns-note .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: #000
}

.ns-note .modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0)
}

.ns-note .modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=90)
}

.ns-note .modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    min-height: 16.428571429px
}

.ns-note .modal-header .close {
    margin-top: -2px
}

.ns-note .modal-title {
    margin: 0;
    line-height: 1.428571429
}

.ns-note .modal-body {
    position: relative;
    padding: 20px
}

.ns-note .modal-footer {
    margin-top: 15px;
    padding: 19px 20px 20px;
    text-align: right;
    border-top: 1px solid #e5e5e5
}

.ns-note .modal-footer:before,
.ns-note .modal-footer:after {
    content: " ";
    display: table
}

.ns-note .modal-footer:after {
    clear: both
}

.ns-note .modal-footer .btn+.btn {
    margin-left: 5px;
    margin-bottom: 0
}

.ns-note .modal-footer .btn-group .btn+.btn {
    margin-left: -1px
}

.ns-note .modal-footer .btn-block+.btn-block {
    margin-left: 0
}

.ns-note .modal-dialog {
    width: 380px;
    margin: 120px auto
}

@media screen and (max-width: 480px) {
    .ns-note .modal-dialog {
        width: 300px;
        margin: 10px auto
    }
}

.ns-note .tooltip {
    position: absolute;
    z-index: 1030;
    display: block;
    visibility: visible;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0)
}

.ns-note .tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100)
}

.ns-note .tooltip.top {
    margin-top: -3px;
    padding: 5px 0
}

.ns-note .tooltip.right {
    margin-left: 3px;
    padding: 0 5px
}

.ns-note .tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0
}

.ns-note .tooltip.left {
    margin-left: -3px;
    padding: 0 5px
}

.ns-note .tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #222;
    border-radius: 4px
}

.ns-note .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.ns-note .tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #222
}

.ns-note .tooltip.top-left .tooltip-arrow {
    bottom: 0;
    left: 5px;
    border-width: 5px 5px 0;
    border-top-color: #222
}

.ns-note .tooltip.top-right .tooltip-arrow {
    bottom: 0;
    right: 5px;
    border-width: 5px 5px 0;
    border-top-color: #222
}

.ns-note .tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #222
}

.ns-note .tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #222
}

.ns-note .tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #222
}

.ns-note .tooltip.bottom-left .tooltip-arrow {
    top: 0;
    left: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #222
}

.ns-note .tooltip.bottom-right .tooltip-arrow {
    top: 0;
    right: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #222
}

@-webkit-keyframes medium-editor-image-loading {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes medium-editor-image-loading {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes medium-editor-pop-upwards {
    0% {
        opacity: 0;
        -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
        transform: matrix(0.97, 0, 0, 1, 0, 12)
    }

    20% {
        opacity: .7;
        -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
        transform: matrix(0.99, 0, 0, 1, 0, 2)
    }

    40% {
        opacity: 1;
        -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
        transform: matrix(1, 0, 0, 1, 0, -1)
    }

    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

@keyframes medium-editor-pop-upwards {
    0% {
        opacity: 0;
        -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
        transform: matrix(0.97, 0, 0, 1, 0, 12)
    }

    20% {
        opacity: .7;
        -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
        transform: matrix(0.99, 0, 0, 1, 0, 2)
    }

    40% {
        opacity: 1;
        -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
        transform: matrix(1, 0, 0, 1, 0, -1)
    }

    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

.ns-note .medium-editor-anchor-preview {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    left: 0;
    line-height: 1.4;
    max-width: 280px;
    position: absolute;
    text-align: center;
    top: 0;
    word-break: break-all;
    word-wrap: break-word;
    visibility: hidden;
    z-index: 2000
}

.ns-note .medium-editor-anchor-preview a {
    color: #fff;
    display: inline-block;
    margin: 5px 5px 10px
}

.ns-note .medium-editor-anchor-preview-active {
    visibility: visible
}

.ns-note .medium-toolbar-arrow-under:after,
.ns-note .medium-toolbar-arrow-over:before {
    border-style: solid;
    content: '';
    display: block;
    height: 0;
    left: 50%;
    margin-left: -8px;
    position: absolute;
    width: 0
}

.ns-note .medium-toolbar-arrow-under:after {
    border-width: 8px 8px 0 8px
}

.ns-note .medium-toolbar-arrow-over:before {
    border-width: 0 8px 8px 8px;
    top: -8px
}

.ns-note .medium-editor-toolbar {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    left: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    z-index: 2000
}

.ns-note .medium-editor-toolbar ul {
    margin: 0;
    padding: 0
}

.ns-note .medium-editor-toolbar li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0
}

.ns-note .medium-editor-toolbar li button {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    font-size: 14px;
    line-height: 1.33;
    margin: 0;
    padding: 15px;
    text-decoration: none
}

.ns-note .medium-editor-toolbar li button:focus {
    outline: none
}

.ns-note .medium-editor-toolbar li .medium-editor-action-underline {
    text-decoration: underline
}

.ns-note .medium-editor-toolbar-active {
    visibility: visible
}

.ns-note .medium-editor-sticky-toolbar {
    position: fixed;
    top: 1px
}

.ns-note .medium-editor-relative-toolbar {
    position: relative
}

.ns-note .medium-editor-toolbar-active.medium-editor-stalker-toolbar {
    -webkit-animation: medium-editor-pop-upwards 160ms forwards linear;
    animation: medium-editor-pop-upwards 160ms forwards linear
}

.ns-note .medium-editor-action-bold {
    font-weight: bolder
}

.ns-note .medium-editor-action-italic {
    font-style: italic
}

.ns-note .medium-editor-toolbar-form {
    display: none
}

.ns-note .medium-editor-toolbar-form input,
.ns-note .medium-editor-toolbar-form a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.ns-note .medium-editor-toolbar-form .medium-editor-toolbar-form-row {
    line-height: 14px;
    margin-left: 5px;
    padding-bottom: 5px
}

.ns-note .medium-editor-toolbar-form .medium-editor-toolbar-input,
.ns-note .medium-editor-toolbar-form label {
    border: none;
    box-sizing: border-box;
    font-size: 14px;
    margin: 0;
    padding: 6px;
    width: 316px;
    display: inline-block
}

.ns-note .medium-editor-toolbar-form .medium-editor-toolbar-input:focus,
.ns-note .medium-editor-toolbar-form label:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    outline: 0
}

.ns-note .medium-editor-toolbar-form a {
    display: inline-block;
    font-size: 24px;
    font-weight: bolder;
    margin: 0 10px;
    text-decoration: none
}

.ns-note .medium-editor-toolbar-form-active {
    display: block
}

.ns-note .medium-toolbar-arrow-under:after {
    border-color: #242424 transparent transparent transparent;
    top: 50px
}

.ns-note .medium-toolbar-arrow-over:before {
    border-color: transparent transparent #242424 transparent;
    top: -8px
}

.ns-note .medium-editor-toolbar {
    background-color: #242424;
    background: -webkit-linear-gradient(top, #242424, rgba(36, 36, 36, 0.75));
    background: linear-gradient(to bottom, #242424, rgba(36, 36, 36, 0.75));
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 0 0 3px #000
}

.ns-note .medium-editor-toolbar li button {
    background-color: #242424;
    background: -webkit-linear-gradient(top, #242424, rgba(36, 36, 36, 0.89));
    background: linear-gradient(to bottom, #242424, rgba(36, 36, 36, 0.89));
    border: 0;
    border-right: 1px solid #000;
    border-left: 1px solid #333;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    color: #fff;
    height: 50px;
    min-width: 50px;
    -webkit-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}

.ns-note .medium-editor-toolbar li button:hover {
    background-color: #000;
    color: yellow
}

.ns-note .medium-editor-toolbar li .medium-editor-button-first {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px
}

.ns-note .medium-editor-toolbar li .medium-editor-button-last {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px
}

.ns-note .medium-editor-toolbar li .medium-editor-button-active {
    background-color: #000;
    background: -webkit-linear-gradient(top, #242424, rgba(0, 0, 0, 0.89));
    background: linear-gradient(to bottom, #242424, rgba(0, 0, 0, 0.89));
    color: #fff
}

.ns-note .medium-editor-toolbar-form {
    background: #242424;
    border-radius: 5px;
    color: #999
}

.ns-note .medium-editor-toolbar-form .medium-editor-toolbar-input {
    background: #242424;
    box-sizing: border-box;
    color: #ccc;
    height: 50px
}

.ns-note .medium-editor-toolbar-form a {
    color: #fff
}

.ns-note .medium-editor-toolbar-anchor-preview {
    background: #242424;
    border-radius: 5px;
    color: #fff
}

.ns-note .medium-editor-placeholder:after {
    color: #b3b3b1
}

.ns-note .note-editor-placeholder {
    position: relative
}

.ns-note .note-editor-placeholder:after {
    content: attr(data-placeholder) !important;
    position: absolute;
    left: 0;
    top: 0;
    white-space: pre;
    padding: inherit;
    color: #b3b3b1
}

.ns-note .note-editor-placeholder-relative {
    position: relative
}

.ns-note .note-editor-placeholder-relative:after {
    content: attr(data-placeholder) !important;
    position: relative;
    white-space: pre;
    padding: inherit;
    margin: inherit;
    color: #b3b3b1
}

.ns-note [class^="renewal-p-icon"],
.ns-note [class*=" renewal-p-icon"] {
    font-family: 'icon-editor' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ns-note .renewal-p-icon--editorAdd:before {
    content: "\E900"
}

.ns-note .renewal-p-icon--editorClose:before {
    content: "\E901"
}

.ns-note .renewal-p-icon--editorEmbed:before {
    content: "\E902"
}

.ns-note .renewal-p-icon--editorImage:before {
    content: "\E903"
}

.ns-note .renewal-p-icon--editorMovie:before {
    content: "\E904"
}

.ns-note .renewal-p-icon--editorInsertCode:before {
    content: "\E910"
}

.ns-note .renewal-p-icon--editorToolbarAlignCenter:before {
    content: "\E905"
}

.ns-note .renewal-p-icon--editorToolbarAlignLeft:before {
    content: "\E906"
}

.ns-note .renewal-p-icon--editorToolbarAlignRight:before {
    content: "\E907"
}

.ns-note .renewal-p-icon--editorToolbarBold:before {
    content: "\E908"
}

.ns-note .renewal-p-icon--editorToolbarCaption:before {
    content: "\E909"
}

.ns-note .renewal-p-icon--editorToolbarCompressImage:before {
    content: "\E90A"
}

.ns-note .renewal-p-icon--editorToolbarDelete:before {
    content: "\E90B"
}

.ns-note .renewal-p-icon--editorToolbarExpandImage:before {
    content: "\E90C"
}

.ns-note .renewal-p-icon--editorToolbarLink:before {
    content: "\E90D"
}

.ns-note .renewal-p-icon--editorToolbarQuotation:before {
    content: "\E90E"
}

.ns-note .renewal-p-icon--editorToolbarTitle:before {
    content: "\E90F"
}

.ns-note .renewal-p-icon--editorToolbarInsertCode:before {
    content: "\E910"
}

.ns-note a,
.ns-note button,
.ns-note input {
    -webkit-transition: 0.1s background-color, 0.1s border-color, 0.1s color, 0.1s fill;
    transition: 0.1s background-color, 0.1s border-color, 0.1s color, 0.1s fill
}

.ns-note .medium-editor-element {
    -webkit-tap-highlight-color: transparent
}

.ns-note .medium-editor-element figure .embedly-card-hug {
    width: 500px !important
}

.ns-note .medium-editor-element figure .embedly-card {
    width: 500px !important;
    margin: 0 auto 0 auto !important;
    padding: 0 !important
}

.ns-note .fude-iframe-container>div * {
    margin: 0 auto !important
}

.ns-note .fude-iframe-container-instagram iframe {
    display: block;
    height: 590px;
    padding: 8px;
    border: #e8eceb solid 1px;
    border-radius: 4px;
    overflow: hidden
}

.ns-note .fude-iframe-container-speakerdeck iframe {
    vertical-align: top;
    box-shadow: none !important;
    border: solid 1px rgba(0, 0, 0, 0.05) !important
}

.ns-note .fude-iframe-container-googlemap {
    position: relative
}

.ns-note .fude-iframe-container-googlemap iframe {
    vertical-align: top;
    border: #e8eceb solid 1px;
    border-radius: 4px;
    overflow: hidden
}

.ns-note .fude-iframe-container-slideshare {
    position: relative
}

.ns-note .fude-iframe-container-slideshare iframe {
    vertical-align: top;
    border: #e8eceb solid 1px;
    overflow: hidden
}

.ns-note .fude-iframe-container-slideshare iframe {
    border: solid 1px rgba(0, 0, 0, 0.05)
}

.ns-note .fude-iframe-container-soundcloud .widget-cover {
    width: 500px;
    border-radius: 4px;
    overflow: hidden
}

.ns-note .fude-iframe-container-soundcloud .embedly-card {
    border: solid 1px rgba(0, 0, 0, 0.05);
    border-radius: 4px
}

.ns-note .fude-iframe-container-niconico,
.ns-note .fude-iframe-container-youtube,
.ns-note .fude-iframe-container-vimeo {
    position: relative
}

.ns-note .fude-iframe-container-niconico .widget-cover,
.ns-note .fude-iframe-container-youtube .widget-cover,
.ns-note .fude-iframe-container-vimeo .widget-cover {
    overflow: hidden
}

.ns-note .fude-iframe-container-niconico .widget-cover::before,
.ns-note .fude-iframe-container-youtube .widget-cover::before,
.ns-note .fude-iframe-container-vimeo .widget-cover::before {
    border-radius: 0 !important
}

.ns-note .fude-iframe-container-niconico iframe,
.ns-note .fude-iframe-container-youtube iframe,
.ns-note .fude-iframe-container-vimeo iframe {
    border: solid 1px rgba(0, 0, 0, 0.05)
}

@media only screen and (max-width: 480px) {
    .ns-note .fude-iframe-container-note-slide {
        position: relative;
        height: auto
    }

    .ns-note .fude-iframe-container-note-slide:after {
        content: "";
        display: block;
        padding-top: calc(75% + 86px)
    }
}

.ns-note .fude-iframe-container-note-slide iframe {
    border: none;
    height: 455px
}

@media only screen and (max-width: 480px) {
    .ns-note .fude-iframe-container-note-slide iframe {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%
    }
}

.ns-note .medium-editor-hidden {
    display: none
}

.ns-note .uploading-overlay {
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    z-index: 119;
    display: inline-block;
    background-color: white;
    opacity: 0.75
}

.ns-note #note-editor-screen {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding-top: 70px
}

.is-tablet #note-editor-screen {
    padding-top: 130px
}

.is-ios #note-editor-screen {
    padding-top: 130px
}

.ns-note #note-editor-screen tool-tip {
    width: 50px
}

.ns-note .embed-toolbar {
    visibility: hidden;
    position: absolute;
    background-color: white
}

.ns-note .embed-toolbar.embed-toolbar-active {
    visibility: visible
}

.ns-note .embed-toolbar * {
    box-sizing: border-box
}

.ns-note .embed-toolbar ul {
    display: block;
    height: 36px;
    margin: 0;
    padding: 0
}

.ns-note .embed-toolbar ul li {
    float: left;
    list-style: none
}

.ns-note .embed-toolbar ul li.action button {
    margin-left: 10px
}

.ns-note .embed-toolbar button {
    display: block;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    font-size: 20px;
    text-align: center;
    line-height: 36px;
    margin: 0;
    padding: 0
}

.ns-note .embed-toolbar .button-circle {
    width: 36px;
    height: 36px;
    border-radius: 100% !important;
    background: white;
    border: 1px solid #898D8C;
    color: #898D8C
}

.ns-note .embed-toolbar .button-circle:hover {
    border: 1px solid #222;
    color: #222
}

.ns-note .embed-toolbar .embed-toolbar-newicon {
    margin-top: 6px;
    font-size: 20px;
    width: 20px;
    height: 20px
}

.ns-note .medium-editor-toolbar {
    background-color: #222;
    background: #222;
    border: 1px solid #222;
    border-radius: 4px;
    box-shadow: none;
    font-family: "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", Arial, Helvetica, sans-serif
}

.ns-note .medium-editor-toolbar li button {
    height: 50px;
    min-width: 50px;
    padding: 0;
    border: 0;
    border-right: none;
    border-left: none;
    border-left: none;
    box-shadow: none;
    font-size: 20px;
    background-color: #222;
    background: #222;
    color: #fff;
    -webkit-transition: 0.1s background-color, 0.1s border-color, 0.1s color, 0.1s fill;
    transition: 0.1s background-color, 0.1s border-color, 0.1s color, 0.1s fill
}

.ns-note .medium-editor-toolbar li button:hover {
    background: #222;
    color: #41C9B4
}

.ns-note .medium-editor-toolbar li .medium-editor-button-first {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px
}

.ns-note .medium-editor-toolbar li .medium-editor-button-last {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px
}

.ns-note .medium-editor-toolbar li .medium-editor-button-active {
    background: #222;
    color: #41C9B4
}

.ns-note .medium-toolbar-arrow-under:after {
    border-color: #222 transparent transparent transparent
}

.ns-note .medium-editor-toolbar-form {
    background: #222;
    border-radius: 4px;
    color: #898D8C
}

.ns-note .medium-editor-toolbar-form input::-webkit-input-placeholder {
    color: #898D8C
}

.ns-note .medium-editor-toolbar-form input::-moz-placeholder {
    color: #898D8C
}

.ns-note .medium-editor-toolbar-form input:-ms-input-placeholder {
    color: #898D8C
}

.ns-note .medium-editor-toolbar-form .medium-editor-toolbar-input {
    background: #222;
    color: #fff;
    padding: 15px
}

.ns-note .medium-editor-toolbar-form a {
    vertical-align: middle;
    margin: 0 15px
}

.ns-note .medium-editor-toolbar-form .medium-editor-toolbar-save {
    display: none
}

.ns-note .medium-editor-toolbar-form .medium-editor-toolbar-form-row {
    display: none
}

.ns-note .medium-editor-anchor-preview {
    font-family: "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", Arial, Helvetica, sans-serif;
    font-size: 12px;
    border-radius: 4px
}

.ns-note .medium-editor-anchor-preview a {
    margin: 10px
}

.ns-note .img-overlay {
    z-index: 999;
    background: transparent
}

.ns-note .img-overlay:hover,
.ns-note .img-overlay.is-selected {
    border: 3px #41C9B4 solid
}

.ns-note .url-form {
    position: absolute;
    background-color: white;
    visibility: hidden;
    height: 50px !important
}

.ns-note .url-form.url-form-active {
    visibility: visible
}

.ns-note .url-form * {
    box-sizing: border-box
}

.ns-note .url-form input {
    width: 100%;
    height: 50px;
    border: solid 1px #E8ECEB;
    border-radius: 4px;
    font-size: 16px;
    padding: 15px
}

.ns-note .url-form input:focus {
    border-color: #3BC49D
}

.ns-note .url-form button {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    font-size: 20px;
    text-align: center;
    margin: 0 0 0 5px;
    padding: 0;
    width: 30px;
    height: 30px;
    border: none;
    background: #fff;
    color: #41C9B4;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.ns-note .url-form button:hover {
    color: #222
}

.ns-note .medium-editor-dragover {
    width: 100%;
    height: 75px;
    border: 2px dashed #41C9B4
}

.ns-note .button-circle--large {
    width: 50px;
    height: 50px;
    padding-top: 1px;
    font-size: 28px;
    border-radius: 100% !important;
    background: white;
    border: 1px solid #898D8C;
    color: #898D8C
}

.ns-note .button-circle--large:hover {
    border: 1px solid #222;
    color: #222
}

.ns-note .note-body dl {
    padding: 0
}

.ns-note .note-body dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px
}

.ns-note .note-body dl dt:first-child {
    padding: 0
}

.ns-note .note-body dl dt>:first-child {
    margin-top: 0
}

.ns-note .note-body dl dt>:last-child {
    margin-bottom: 0
}

.ns-note .note-body dl dd {
    margin: 0 0 15px;
    padding: 0 15px
}

.ns-note .note-body dl dd>:first-child {
    margin-top: 0
}

.ns-note .note-body dl dd>:last-child {
    margin-bottom: 0
}

.ns-note .note-lead {
    margin-bottom: 30px;
    font-size: 105%;
    line-height: 1.9rem
}

@media only screen and (max-width: 480px) {
    .ns-note .note-lead {
        margin-bottom: 20px
    }
}

.ns-note .note-lead #note-lead>p {
    font-size: 105%;
    line-height: 1.9rem;
    font-family: 'Hiragino Mincho ProN', '\30D2\30E9\30AE\30CE\660E\671D   Pro W6', 'Hiragino Mincho Pro', 'HGS\660E\671D  E', '\FF2D\FF33   \FF30\660E\671D', serif
}

@media only screen and (max-width: 480px) {
    .ns-note .note-lead #note-lead>p {
        font-size: 16px !important;
        line-height: 1.6 !important
    }
}

.ns-note .note-editor-placeholder:after {
    font-family: 'Hiragino Mincho ProN', '\30D2\30E9\30AE\30CE\660E\671D   Pro W6', 'Hiragino Mincho Pro', 'HGS\660E\671D  E', '\FF2D\FF33   \FF30\660E\671D', serif
}

.ns-note .image-with-caption {
    text-align: center
}

.ns-note .image-with-caption>figcaption {
    font-size: 80%;
    font-weight: normal;
    font-family: "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", Arial, Helvetica, sans-serif;
    color: #787C7B
}

.ns-note .fude-iframe-container {
    width: 100%
}

.ns-note .fude-iframe-container>div .external-article-widget-title,
.ns-note .fude-iframe-container>div .external-article-widget-description {
    margin: 0 0 8px 0 !important
}

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

    .ns-note .fude-iframe-container>div .external-article-widget-title,
    .ns-note .fude-iframe-container>div .external-article-widget-description {
        margin: 0 0 5px 0 !important
    }
}

.ns-note .fude-iframe-container>div .external-article-widget-url,
.ns-note .fude-iframe-container>div .external-article-widget-image {
    margin: 0 !important
}

.ns-note .external-article-widget {
    width: 100%;
    display: table;
    border-collapse: separate;
    border: 1px solid #E8ECEB;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .ns-note .external-article-widget:hover {
        border: 1px solid #e6e6e6
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget--type_shopping {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.ns-note .external-article-widget--type_shopping>a:first-child {
    width: 100%
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget--type_shopping>a:first-child {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }
}

.ns-note .external-article-widget--type_shopping .external-article-widget-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 16px !important;
    margin-bottom: 16px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget--type_shopping .external-article-widget-price {
        margin-top: 8px !important;
        margin-bottom: 8px !important
    }
}

.ns-note .external-article-widget--type_shopping .external-article-widget-regularprice,
.ns-note .external-article-widget--type_shopping .external-article-widget-saleprice {
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: bold;
    line-height: 1
}

.ns-note .external-article-widget--type_shopping .external-article-widget-currency {
    padding-left: 2px;
    font-size: 12px
}

.ns-note .external-article-widget--type_shopping .external-article-widget-saleprice+.external-article-widget-regularprice {
    padding-left: 8px;
    color: #787c7b;
    font-size: 12px;
    font-weight: normal;
    text-decoration: line-through
}

.ns-note .external-article-widget--type_shopping .external-article-widget-image {
    width: 225px;
    height: 225px;
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget--type_shopping .external-article-widget-image {
        width: 100%;
        height: 190px;
        padding: 16px 16px 0 16px;
        border: none;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
}

.ns-note .external-article-widget--type_shopping .external-article-widget-productImage {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

.ns-note .external-article-widget>a {
    display: table-cell;
    vertical-align: middle;
    padding: 16px;
    text-decoration: none !important
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget>a {
        padding: 16px
    }
}

.ns-note .external-article-widget-title {
    overflow: hidden;
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget-title {
        max-height: 2.8em;
        font-size: 14px
    }
}

.ns-note .external-article-widget-description {
    overflow: hidden;
    display: block;
    max-height: 3em;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.ns-note .external-article-widget-url {
    display: block;
    font-size: 10px;
    font-style: normal;
    line-height: 1.5
}

.ns-note .external-article-widget-url+.external-article-widget-button {
    margin-top: 16px !important
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget-price {
        display: block !important
    }
}

.ns-note .external-article-widget-price .external-article-widget-update {
    margin-left: 8px !important;
    font-size: 10px;
    color: #787c7b;
    line-height: 1
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget-price .external-article-widget-update {
        display: block;
        margin-top: 4px !important;
        margin-left: 0 !important
    }
}

.ns-note .external-article-widget-disclaimer {
    text-decoration: underline
}

.ns-note .external-article-widget-image {
    display: table-cell;
    vertical-align: middle;
    width: 225px;
    height: 150px;
    border-radius: 0 3px 3px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-left: 1px solid #E8ECEB
}

@media only screen and (max-width: 480px) {
    .ns-note .external-article-widget-image {
        width: 120px;
        height: 120px
    }
}

.ns-note .note-body .recruitment-widget {
    width: 100%;
    padding: 16px;
    border: 1px solid #e8eceb;
    border-radius: 4px;
    text-align: left
}

.ns-note .note-body .recruitment-widget__link {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-decoration: none !important
}

.ns-note .note-body .recruitment-widget__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .note-body .recruitment-widget__url {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 8px !important;
    font-size: 10px !important;
    font-style: normal;
    line-height: 1;
    text-indent: 48px;
    color: #787c7b
}

.ns-note .note-body .recruitment-widget__url:before {
    content: '求人';
    position: absolute;
    top: -1px;
    left: 0;
    width: 40px;
    height: 14px;
    padding: 2px 4px;
    border-radius: 7px;
    background-color: #2cb696;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    text-indent: 0;
    line-height: 1;
    white-space: nowrap
}

.ns-note .note-body .recruitment-widget__title {
    width: 100%;
    max-height: 3em;
    padding-right: 16px;
    font-size: 1.8;
    font-weight: bold;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .recruitment-widget__title {
        max-height: 2.8em;
        font-size: 14px
    }
}

.ns-note .note-body .recruitment-widget__requirements {
    padding-top: 8px;
    padding-right: 16px;
    width: 100%
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .recruitment-widget__requirements {
        padding-top: 8px
    }
}

.ns-note .note-body .recruitment-widget__companyName {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 12px;
    font-weight: bold
}

.ns-note .note-body .recruitment-widget__companyName:last-child {
    margin-bottom: 0 !important
}

.ns-note .note-body .recruitment-widget__location {
    margin-bottom: 8px !important;
    max-height: 3em;
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.ns-note .note-body .recruitment-widget__location:last-child {
    margin-bottom: 0 !important
}

.ns-note .note-body .recruitment-widget__occupations {
    margin-bottom: 4px !important;
    color: #787c7b;
    font-size: 12px;
    display: block !important
}

.ns-note .note-body .recruitment-widget__occupations:last-child {
    margin-bottom: 0 !important
}

.ns-note .note-body .recruitment-widget__employmentSystem {
    display: block !important;
    color: #787c7b;
    font-size: 12px
}

.ns-note .note-body .recruitment-widget__aside {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 190px
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .recruitment-widget__aside {
        width: 120px !important
    }
}

.ns-note .note-body .recruitment-widget__thumbnailImg {
    width: 100%;
    height: 100px !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    border-radius: 4px;
    border: none
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .recruitment-widget__thumbnailImg {
        height: 64px !important
    }
}

.ns-note .note-body .recruitment-widget__button {
    width: 100%;
    margin-top: 16px !important
}

.ns-note .note-body .file-widget {
    padding: 16px;
    border: 1px solid #E8ECEB;
    border-radius: 4px
}

.ns-note .note-body .file-widget__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .file-widget__link {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.ns-note .note-body .file-widget__loading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px;
    color: #787c7b;
    font-size: 12px;
    text-align: center;
    z-index: 1;
    pointer-events: none
}

.ns-note .note-body .file-widget__loadingLabel {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/loading_128x128-cd88bdecb98efe11d748e45296d8dadf54a06b49c9889cbca0cd95f8f855b77f.gif);
    background-size: 32px;
    background-position: 50% 10%;
    background-repeat: no-repeat;
    padding-top: 24px
}

.ns-note .note-body .file-widget__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 16px
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .file-widget__info {
        width: 100%;
        padding-right: 0
    }
}

.ns-note .note-body .file-widget__icon {
    padding-right: 16px;
    color: #A8ABB1
}

.ns-note .note-body .file-widget__data {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.ns-note .note-body .file-widget__filename {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
    word-break: break-all
}

.ns-note .note-body .file-widget__filesize {
    margin-top: 8px !important;
    font-size: 12px;
    color: #787c7b
}

.ns-note .note-body .file-widget__note {
    font-size: 10px;
    color: #249f80;
    text-decoration: none
}

@media only screen and (min-width: 769px) {
    .ns-note .note-body .file-widget__note:hover {
        color: #209274
    }
}

.ns-note .note-body .file-widget__download {
    white-space: nowrap
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .file-widget__download {
        width: 100%;
        padding-top: 16px
    }
}

.ns-note .note-body .file-widget__download>a {
    text-decoration: none
}

.ns-note .note-body .file-widget__download .c-button__icon {
    margin-right: 8px !important;
    margin-left: 0 !important
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .file-widget__download .c-button__label {
        margin: 0 !important
    }
}

.ns-note .note-body .summary-large-image-widget {
    border-radius: 4px;
    overflow: hidden;
    width: 500px
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .summary-large-image-widget {
        width: 100%
    }
}

.ns-note .note-body .summary-large-image-widget__link {
    width: 100%;
    padding: 0;
    display: block
}

.ns-note .note-body .summary-large-image-widget__header {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 52.3%
}

.ns-note .note-body .summary-large-image-widget__cover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.ns-note .note-body .summary-large-image-widget__img {
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover
}

.ns-note .note-body .summary-large-image-widget__body {
    padding: 16px
}

.ns-note .note-body .summary-large-image-widget__title {
    overflow: hidden;
    display: block;
    font-size: 16px;
    margin-bottom: 8px !important;
    font-weight: bold;
    line-height: 1.5;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width: 480px) {
    .ns-note .note-body .summary-large-image-widget__title {
        max-height: 2.8em;
        font-size: 14px
    }
}

.ns-note .note-body .summary-large-image-widget__description {
    overflow: hidden;
    display: block;
    font-size: 12px;
    margin-bottom: 8px !important;
    font-style: normal;
    line-height: 1.5;
    color: #787c7b;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.ns-note .note-body .summary-large-image-widget__url {
    display: block;
    font-size: 10px;
    font-style: normal;
    line-height: 1.5
}

.ns-note .img-overlay.is-selected {
    border: 1px solid #3BC49D;
    border-radius: 3px
}

@media only screen and (max-width: 480px) {
    .ns-note .renewal-c-popover--selectEyecatch {
        min-width: 290px;
        height: auto !important
    }
}

.ns-note .renewal-c-popover--selectEyecatch ul {
    padding-left: 0
}

.ns-note .renewal-c-popover--selectEyecatch li {
    list-style-type: none
}

.ns-note .renewal-c-popover--selectEyecatch li:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-c-popover--selectEyecatch a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", Arial, Helvetica, sans-serif;
    text-decoration: none !important;
    padding: 16px;
    white-space: nowrap
}

@media only screen and (max-width: 480px) {
    .ns-note .renewal-c-popover--selectEyecatch a {
        white-space: normal !important
    }
}

@media only screen and (max-width: 480px) {
    .ns-note .renewal-c-popover--selectEyecatch a i {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }
}

.ns-note .renewal-c-popover--selectEyecatch:before {
    right: auto;
    left: 20px
}

.ns-note .sp-toolbar {
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 119;
    border-top: 1px solid rgba(34, 34, 34, 0.2)
}

.ns-note .sp-toolbar .default-actions {
    display: none
}

.ns-note .sp-toolbar .default-actions.is-active {
    display: block
}

.ns-note .sp-toolbar.is-ios {
    top: 48px;
    border-top: none;
    border-bottom: 1px solid rgba(34, 34, 34, 0.2);
    -webkit-transform: translate3d(0, 0, 0)
}

.ns-note .sp-toolbar.is-tablet .style-mode button,
.ns-note .sp-toolbar.is-tablet .add-mode button,
.ns-note .sp-toolbar.is-tablet .sp-toolbar__add button {
    height: 56px;
    width: 56px
}

.ns-note .sp-toolbar.is-tablet .style-mode button i,
.ns-note .sp-toolbar.is-tablet .add-mode button i,
.ns-note .sp-toolbar.is-tablet .sp-toolbar__add button i {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}

.ns-note .sp-toolbar .sp-toolbar__add {
    display: none
}

.ns-note .sp-toolbar .style-mode {
    display: block;
    width: calc(100% - 88px);
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch
}

.ns-note .sp-toolbar .style-mode.is-active {
    display: block
}

.ns-note .sp-toolbar .style-mode ul {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.ns-note .sp-toolbar .style-mode li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    pointer-events: auto
}

.ns-note .sp-toolbar .add-mode {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: absolute;
    right: 0;
    top: 0
}

.ns-note .sp-toolbar .add-mode:before {
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background-color: #222;
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.ns-note .sp-toolbar .add-mode.is-active {
    display: block
}

.ns-note .sp-toolbar .add-mode ul {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.ns-note .sp-toolbar .style-mode button,
.ns-note .sp-toolbar .add-mode button,
.ns-note .sp-toolbar__add button {
    height: 44px;
    width: 44px;
    padding: 0;
    border: 0;
    border-right: none;
    border-left: none;
    border-left: none;
    box-shadow: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 24px;
    background: #fff;
    color: rgba(34, 34, 34, 0.3);
    -webkit-transition: 0.1s background-color, 0.1s border-color, 0.1s color, 0.1s fill;
    transition: 0.1s background-color, 0.1s border-color, 0.1s color, 0.1s fill;
    pointer-events: auto
}

.ns-note .sp-toolbar .style-mode button.is-active,
.ns-note .sp-toolbar .add-mode button.is-active,
.ns-note .sp-toolbar__add button.is-active {
    color: #222
}

.ns-note .sp-toolbar .style-mode button.medium-editor-button-active,
.ns-note .sp-toolbar .add-mode button.medium-editor-button-active,
.ns-note .sp-toolbar__add button.medium-editor-button-active {
    color: #2CB696
}

.ns-note .sp-toolbar__body {
    width: 100%
}

.ns-note .sp-toolbar__add {
    position: absolute;
    right: 0;
    top: 0;
    display: none
}

.ns-note .sp-toolbar__add:before {
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background-color: #222;
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.ns-note .sp-toolbar__add button {
    color: rgba(34, 34, 34, 0.3)
}

.ns-note .sp-toolbar__add button.is-active {
    color: #222
}

.ns-note .sp-toolbar__icon--undo {
    position: relative
}

.ns-note .sp-toolbar__icon--undo:before {
    content: "";
    display: block;
    height: 75%;
    width: 1px;
    background-color: #222;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    opacity: 0.2
}

.ns-note .sp-toolbar .default-actions {
    position: relative
}

.ns-note .sp-toolbar .medium-editor-toolbar-input {
    height: 44px;
    width: calc(100% - 44px)
}

.ns-note .sp-toolbar .medium-editor-toolbar-form {
    position: relative;
    border-radius: 0px
}

.ns-note .sp-toolbar .medium-editor-toolbar-close {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    width: 44px;
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-left: 1px solid rgba(34, 34, 34, 0.2)
}

.ns-note .sp-toolbar li button:disabled {
    color: #555
}

.ns-note .sp-toolbar li .medium-editor-button-active {
    color: #41C9B2
}

@keyframes loadingAnimationSpin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.ns-note html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

.ns-note body {
    margin: 0
}

.ns-note article,
.ns-note aside,
.ns-note details,
.ns-note figcaption,
.ns-note figure,
.ns-note footer,
.ns-note header,
.ns-note hgroup,
.ns-note main,
.ns-note menu,
.ns-note nav,
.ns-note section,
.ns-note summary {
    display: block
}

.ns-note audio,
.ns-note canvas,
.ns-note progress,
.ns-note video {
    display: inline-block;
    vertical-align: baseline
}

.ns-note audio:not([controls]) {
    display: none;
    height: 0
}

.ns-note [hidden],
.ns-note template {
    display: none
}

.ns-note a {
    background-color: transparent
}

.ns-note a:active,
.ns-note a:hover {
    outline: 0
}

.ns-note abbr[title] {
    border-bottom: 1px dotted
}

.ns-note b,
.ns-note strong {
    font-weight: bold
}

.ns-note dfn {
    font-style: italic
}

.ns-note h1 {
    font-size: 2em;
    margin: 0.67em 0
}

.ns-note mark {
    background: #ff0;
    color: #000
}

.ns-note small {
    font-size: 80%
}

.ns-note sub,
.ns-note sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

.ns-note sup {
    top: -0.5em
}

.ns-note sub {
    bottom: -0.25em
}

.ns-note img {
    border: 0
}

.ns-note svg:not(:root) {
    overflow: hidden
}

.ns-note figure {
    margin: 1em 40px
}

.ns-note hr {
    box-sizing: content-box;
    height: 0
}

.ns-note pre {
    overflow: auto
}

.ns-note code,
.ns-note kbd,
.ns-note pre,
.ns-note samp {
    font-family: monospace, monospace;
    font-size: 1em
}

.ns-note button,
.ns-note input,
.ns-note optgroup,
.ns-note select,
.ns-note textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

.ns-note button {
    overflow: visible
}

.ns-note button,
.ns-note select {
    text-transform: none
}

.ns-note button,
.ns-note html input[type="button"],
.ns-note input[type="reset"],
.ns-note input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

.ns-note button[disabled],
.ns-note html input[disabled] {
    cursor: default
}

.ns-note button::-moz-focus-inner,
.ns-note input::-moz-focus-inner {
    border: 0;
    padding: 0
}

.ns-note input {
    line-height: normal
}

.ns-note input[type="checkbox"],
.ns-note input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

.ns-note input[type="number"]::-webkit-inner-spin-button,
.ns-note input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

.ns-note input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

.ns-note input[type="search"]::-webkit-search-cancel-button,
.ns-note input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

.ns-note fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

.ns-note legend {
    border: 0;
    padding: 0
}

.ns-note textarea {
    overflow: auto
}

.ns-note optgroup {
    font-weight: bold
}

.ns-note table {
    border-collapse: collapse;
    border-spacing: 0
}

.ns-note td,
.ns-note th {
    padding: 0
}

@font-face {
    .ns-note {
        font-family: "icon";
        src: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-4d21f25102074995be7604509fa9d8b878ebfcbbddd0c34dcc2636d911d2cf60.eot);
        src: url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-4d21f25102074995be7604509fa9d8b878ebfcbbddd0c34dcc2636d911d2cf60.eot?#iefix) format("eot"), url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-43da33b894538f8d1fa7d0bd26a9e443c60128f4f0f9c5d72987483bacb2320f.woff) format("woff"), url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-3763ab737299dd87cf5028b4bee6c4ec19464893cb286c3657fcc8a74ab7109a.ttf) format("truetype"), url(https://d2l930y2yx77uc.cloudfront.net/assets/icon-68d04e0b6e0750a631aecaec484ddac8e71f1246e756552874bad0d584c886ce.svg#icon) format("svg")
    }
}

.ns-note .c-icon:before {
    font-family: "icon"
}

.ns-note .c-icon--arrowback:before {
    content: "\F001"
}

.ns-note .c-icon--arrowdropdown:before {
    content: "\F002"
}

.ns-note .c-icon--arrowforward:before {
    content: "\F003"
}

.ns-note .c-icon--attachFile:before {
    content: "\F004"
}

.ns-note .c-icon--badge:before {
    content: "\F005"
}

.ns-note .c-icon--camera:before {
    content: "\F006"
}

.ns-note .c-icon--cart:before {
    content: "\F007"
}

.ns-note .c-icon--check:before {
    content: "\F008"
}

.ns-note .c-icon--close:before {
    content: "\F009"
}

.ns-note .c-icon--comment:before {
    content: "\F00A"
}

.ns-note .c-icon--commentFill:before {
    content: "\F00B"
}

.ns-note .c-icon--create:before {
    content: "\F00C"
}

.ns-note .c-icon--editorFileUpload:before {
    content: "\F00D"
}

.ns-note .c-icon--en:before {
    content: "\F00E"
}

.ns-note .c-icon--facebookFill:before {
    content: "\F00F"
}

.ns-note .c-icon--fileDownload:before {
    content: "\F010"
}

.ns-note .c-icon--flagFill:before {
    content: "\F011"
}

.ns-note .c-icon--hatenaFill:before {
    content: "\F012"
}

.ns-note .c-icon--heart:before {
    content: "\F013"
}

.ns-note .c-icon--heartFill:before {
    content: "\F014"
}

.ns-note .c-icon--help:before {
    content: "\F015"
}

.ns-note .c-icon--helpFill:before {
    content: "\F016"
}

.ns-note .c-icon--home:before {
    content: "\F017"
}

.ns-note .c-icon--image:before {
    content: "\F018"
}

.ns-note .c-icon--info:before {
    content: "\F019"
}

.ns-note .c-icon--keyboard:before {
    content: "\F01A"
}

.ns-note .c-icon--lightbulb:before {
    content: "\F01B"
}

.ns-note .c-icon--lineFill:before {
    content: "\F01C"
}

.ns-note .c-icon--magazineAdd:before {
    content: "\F01D"
}

.ns-note .c-icon--mail:before {
    content: "\F01E"
}

.ns-note .c-icon--more:before {
    content: "\F01F"
}

.ns-note .c-icon--note:before {
    content: "\F020"
}

.ns-note .c-icon--noteAdd:before {
    content: "\F021"
}

.ns-note .c-icon--notification:before {
    content: "\F022"
}

.ns-note .c-icon--person:before {
    content: "\F023"
}

.ns-note .c-icon--place:before {
    content: "\F024"
}

.ns-note .c-icon--plus:before {
    content: "\F025"
}

.ns-note .c-icon--plusCircle:before {
    content: "\F026"
}

.ns-note .c-icon--return:before {
    content: "\F027"
}

.ns-note .c-icon--rss:before {
    content: "\F028"
}

.ns-note .c-icon--satisfied:before {
    content: "\F029"
}

.ns-note .c-icon--search:before {
    content: "\F02A"
}

.ns-note .c-icon--setting:before {
    content: "\F02B"
}

.ns-note .c-icon--tag:before {
    content: "\F02C"
}

.ns-note .c-icon--time:before {
    content: "\F02D"
}

.ns-note .c-icon--twitterFill:before {
    content: "\F02E"
}

.ns-note .c-icon--undo:before {
    content: "\F02F"
}

.ns-note .c-icon--warning:before {
    content: "\F030"
}

.ns-note html {
    box-sizing: border-box
}

.ns-note a,
.ns-note li {
    -webkit-transition: all .1s 0s;
    transition: all .1s 0s
}

.ns-note *,
.ns-note *:before,
.ns-note *:after {
    box-sizing: inherit
}

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

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

.ns-note h1,
.ns-note h2,
.ns-note h3,
.ns-note h4,
.ns-note h5,
.ns-note h6 {
    font-family: inherit;
    color: inherit
}

.ns-note ul,
.ns-note ol {
    list-style-type: none
}

.ns-note table {
    width: 100%
}

.ns-note th {
    text-align: left
}

.ns-note .header-container {
    position: relative;
    z-index: 11
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-l-header {
        position: relative
    }
}

.ns-note .renewal-l-header {
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.08)
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-l-header {
        box-shadow: none
    }
}

.ns-note .l-header__nav {
    margin: 0
}

@media only screen and (max-width: 768px) {
    .ns-note .l-header__nav {
        margin: 0 auto;
        width: auto
    }
}

.ns-note .renewal-l-header__inner {
    background: #fff;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15)
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-l-header__inner {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1)
    }
}

.ns-note .renewal-l-header__global {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 64px;
    margin: 0 24px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .ns-note .renewal-l-header__global {
        width: auto
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-l-header__global {
        width: auto
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-header__global {
        width: auto;
        height: 48px;
        margin: 0 16px
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-l-header__global {
        margin: 0 8px
    }
}

.ns-note .renewal-l-header__logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-l-header__logo img {
    width: auto;
    height: auto;
    max-height: 25px
}

.ns-note .renewal-l-header__logo img.renewal-l-header__originalLogo {
    max-width: 200px;
    max-height: 40px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-header__logo img.renewal-l-header__originalLogo {
        max-width: 120px;
        max-height: 30px
    }
}

.ns-note .renewal-l-header__right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto
}

.ns-note .renewal-p-buttonSet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-p-buttonSet__item {
    margin-left: 16px;
    font-size: 0;
    cursor: pointer
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-p-buttonSet__item {
        margin-left: 8px
    }
}

.ns-note .renewal-p-buttonSet__item--notification,
.ns-note .renewal-p-buttonSet__item--mymenu {
    position: relative
}

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

    .ns-note .renewal-p-buttonSet__item--notification,
    .ns-note .renewal-p-buttonSet__item--mymenu {
        position: static
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-buttonSet__item--home {
        margin-right: 16px
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-p-buttonSet__item--home {
        margin-right: 8px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-buttonSet__item--search {
        margin-left: 0
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-p-buttonSet__item--search {
        margin-left: 0
    }
}

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

    .ns-note .renewal-p-buttonSet__item--signup,
    .ns-note .renewal-p-buttonSet__item--login {
        margin-left: 0
    }
}

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

    .ns-note .renewal-p-buttonSet__item--signup,
    .ns-note .renewal-p-buttonSet__item--login {
        margin-left: 0
    }
}

.ns-note .renewal-p-buttonSet__item:first-child {
    margin-left: 0
}

.ns-note .renewal-p-buttonSet__item a {
    overflow: visible
}

.ns-note .renewal-p-buttonSet__icon {
    color: #A8ABB1
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-buttonSet__icon:hover {
        color: #787C7B
    }
}

.ns-note .renewal-p-buttonSet__textLink {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-buttonSet__button {
        padding-right: 12px !important;
        padding-left: 12px !important
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-p-buttonSet__button {
        padding-right: 8px !important;
        padding-left: 8px !important
    }
}

.ns-note .renewal-p-buttonSet__avatar {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px
}

.ns-note .renewal-p-buttonSet__avatar:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: inherit;
    height: inherit;
    z-index: 1
}

.ns-note .renewal-p-buttonSet__avatar img {
    width: 100%;
    height: auto
}

.ns-note .renewal-p-buttonSet__postNoteButton {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 0 16px;
    border-radius: 4px;
    border: none;
    color: #ffffff;
    min-height: 32px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    background-color: #2cb696;
    font-weight: bold;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: initial;
    min-width: auto
}

.ns-note .renewal-p-buttonSet__postNoteButton.ng-enter,
.ns-note .renewal-p-buttonSet__postNoteButton.ng-leave,
.ns-note .renewal-p-buttonSet__postNoteButton.ng-enter-active,
.ns-note .renewal-p-buttonSet__postNoteButton.ng-leave-active {
    -webkit-transition: none;
    transition: none
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-buttonSet__postNoteButton {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-buttonSet__postNoteButton:hover {
        color: #ffffff;
        background-color: #27a185
    }
}

.ns-note .renewal-p-buttonSet__postNoteButton--type_square {
    width: 32px
}

.ns-note .renewal-p-buttonSet__postNoteButtonIcon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 4px;
    pointer-events: none
}

.ns-note .renewal-p-buttonSet__postNoteButtonIcon:last-child {
    margin-right: 0
}

.ns-note .renewal-p-buttonSet__postNoteButtonLabel {
    pointer-events: none;
    font-size: 12px
}

.ns-note .renewal-p-buttonSet__postPopover>a {
    color: #fff
}

.ns-note .renewal-p-buttonSet__postPopover>a span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-p-buttonSet__postPopover>a .inner {
    padding: .5em .7em
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-buttonSet__postPopover>a .inner {
        padding: .5em .4em .5em .5em
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-buttonSet__postPopover>a .inner span {
        display: none
    }
}

.ns-note .renewal-p-buttonSet__postPopover>a:hover {
    color: #fff
}

.ns-note .renewal-p-buttonSet__item--mlL {
    margin-left: 16px
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-p-buttonSet__item--mlL {
        margin-left: 8px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-buttonSet__item--cart {
        margin-left: 12px
    }
}

.ns-note .renewal-l-header__categoryNav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin: -1px auto 0 auto;
    padding-top: 1px;
    max-width: 940px;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-l-header__categoryNav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: calc(100% - 40px)
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-header__categoryNav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding: 0 20px
    }
}

.ns-note .renewal-l-header__categoryNav>ul {
    overflow: hidden
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-l-header__categoryNav>ul {
        overflow: visible
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-header__categoryNav>ul {
        overflow: visible
    }
}

.ns-note .renewal-l-header__categoryNav>ul>li {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap
}

.ns-note .renewal-l-header__categoryNav>ul>li>a {
    display: block;
    padding: 13px 11px;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    font-weight: bold;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-header__categoryNav>ul>li>a {
        padding: 10px 10px
    }
}

.ns-note .renewal-l-header__categoryNav>ul>li>a:hover {
    color: #222222;
    border-bottom: 2px solid #222222
}

.ns-note .renewal-l-header__categoryNav>ul>li>a.is-active {
    font-weight: bold;
    border-bottom: 2px solid #222222;
    color: #222222
}

.ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__categoryHashtag>a {
    margin-right: 15px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    border-bottom: none;
    border-radius: 4px;
    color: #898D8C;
    background: #f7f9f9
}

.ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__categoryHashtag>a:hover {
    border-bottom: none;
    background: #F2F4F4
}

.ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__navSeparator>a {
    margin: 0 15px 0 0;
    padding: 15px 0;
    border-left: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__help {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding-left: 16px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__help {
        position: static;
        right: auto;
        top: auto;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        background-color: transparent;
        padding-left: 0;
        padding-right: 16px
    }
}

.ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__help>a {
    padding-top: 0;
    padding-bottom: 0;
    height: 47px;
    line-height: 47px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #A8ABB1;
    font-size: 24px
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__help>a {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__help>a:hover {
        color: #222222
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__help>a {
        height: 41px;
        line-height: 41px
    }
}

.ns-note .renewal-l-header__categoryNav>ul>li.renewal-l-header__help>a.is-active {
    color: #222222
}

.ns-note .renewal-l-header__categoryNav.is-fixed {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4)
}

.ns-note .renewal-l-header__categoryNav.is-fixed>ul {
    max-width: 940px;
    margin: 0 auto
}

.ns-note .renewal-l-header__detailPagesMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin: -1px auto 0 auto;
    padding-top: 1px;
    max-width: 940px;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-l-header__detailPagesMenu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: calc(100% - 40px)
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-header__detailPagesMenu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding: 0 20px
    }
}

.ns-note .renewal-l-header__detailPagesMenu>ul>li {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap
}

.ns-note .renewal-l-header__detailPagesMenu>ul>li>a {
    display: block;
    padding: 13px 15px;
    font-size: 13px;
    border-bottom: 2px solid transparent
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-header__detailPagesMenu>ul>li>a {
        padding: 10px 10px
    }
}

.ns-note .renewal-l-header__detailPagesMenu>ul>li>a:hover {
    color: #222222;
    border-bottom: 2px solid #222222
}

.ns-note .renewal-l-header__detailPagesMenu>ul>li>a.is-active {
    font-weight: bold;
    border-bottom: 2px solid #222222;
    color: #222222
}

.ns-note .renewal-p-headerSearchSp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 47px;
    padding: 8px 10px;
    background: #fff
}

.ns-note .renewal-p-headerSearchSp__close {
    margin-left: 4px;
    padding: 4px;
    color: #A8ABB1
}

.ns-note .footer {
    position: relative;
    padding: 15px 0 40px
}

.ns-note .footer__inner {
    width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .footer__inner {
        width: 100%
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .footer__inner {
        width: 100%
    }
}

.ns-note .footer__nav {
    padding: 15px 0 20px
}

.ns-note .footer__logo {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/footer_cakes_logo-8fae3d55059c2b91f1a69ddf195e0d5b.png);
    background-size: 80px;
    background-repeat: no-repeat;
    width: 80px;
    height: 40px;
    margin: auto;
    text-indent: -9999px;
    position: relative
}

.ns-note .footer__logo a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block
}

.ns-note .footer--article {
    padding: 16px 0 104px
}

@media only screen and (max-width: 479px) {
    .ns-note .footer--article {
        padding: 15px 0 120px
    }
}

.ns-note .l-container {
    max-width: 940px;
    margin: 0 auto
}

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

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

.ns-note .l-container__body {
    margin-top: 16px;
    margin-bottom: 16px
}

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

.ns-note .l-container__title {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
    color: #222222
}

.ns-note .l-container--compact {
    width: 580px
}

@media only screen and (max-width: 768px) {
    .ns-note .l-container--compact {
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .l-container--compact {
        min-width: 580px
    }
}

.ns-note .l-container--column_1column {
    width: 610px;
    padding-top: 24px;
    padding-bottom: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

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

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

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

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

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

.ns-note .l-container--column_2column {
    padding-top: 24px;
    padding-bottom: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

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

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

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

.ns-note .l-container--column_2column .l-container__body {
    width: 610px;
    margin-top: 0;
    margin-bottom: 0
}

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

.ns-note .l-container--column_2column .l-container__sub {
    width: 280px;
    margin-top: 20px
}

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

.ns-note .renewal-l-main,
.ns-note .l-main {
    width: 580px;
    margin: 0 auto
}

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

    .ns-note .renewal-l-main,
    .ns-note .l-main {
        width: 100%
    }
}

.ns-note .renewal-l-main--timeline,
.ns-note .l-main--timeline {
    width: 620px
}

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

    .ns-note .renewal-l-main--timeline,
    .ns-note .l-main--timeline {
        width: 100%
    }
}

.ns-note .renewal-l-pageContainer {
    max-width: 940px;
    margin: 0 auto;
    padding: 40px 0
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-l-pageContainer {
        width: 100%;
        padding: 30px 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-l-pageContainer {
        min-width: 680px
    }
}

.ns-note .renewal-l-pageContainer.renewal-l-pageContainer--narrow {
    width: 700px;
    padding: 20px 0
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-l-pageContainer.renewal-l-pageContainer--narrow {
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-l-pageContainer.renewal-l-pageContainer--narrow {
        min-width: 680px
    }
}

.ns-note .renewal-l-pageContainer.renewal-l-pageContainer--2column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-l-pageContainer.renewal-l-pageContainer--2column {
        display: block
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-pageContainer.renewal-l-pageContainer--2column {
        padding: 10px 0
    }
}

.ns-note .renewal-l-pageContainer__main {
    width: 610px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-l-pageContainer__main {
        margin: 0 auto
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-pageContainer__main {
        width: 100%
    }
}

.ns-note .renewal-l-pageContainer__main--border_top {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 40px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-pageContainer__main--border_top {
        padding: 32px 15px 0
    }
}

.ns-note .renewal-l-pageContainer__main--1column {
    max-width: 940px
}

.ns-note .renewal-l-pageContainer__sub {
    margin-left: auto;
    width: 280px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-l-pageContainer__sub {
        width: 100%;
        margin-left: none
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-l-pageContainer__sub {
        width: 100%;
        margin-left: none
    }
}

.ns-note .renewal-c-article {
    width: 700px;
    margin: 40px auto 0 auto
}

.ns-note .creator-data .user-data-area {
    z-index: 0 !important
}

.ns-note .creator-data .menu-area {
    z-index: 0 !important
}

.ns-note .mag-list .mag-list__body {
    z-index: 5 !important
}

.ns-note .mag-list .mag-list__overlay {
    z-index: 0 !important
}

.ns-note .mag-list .mag-list__button-wrapper {
    z-index: 5 !important
}

.ns-note .mag-top .mag-top__body {
    z-index: 6 !important
}

.ns-note .mag-top .mag-top__overlay {
    z-index: 5 !important
}

.ns-note .mag-top .mag-top__gradient-top {
    z-index: 5 !important
}

.ns-note .mag-top .mag-top__gradient {
    z-index: 5 !important
}

.ns-note .image-upload input[type="file"] {
    z-index: 0 !important
}

.ns-note .creator-data .user-data-area .btn-upload {
    z-index: 1 !important
}

.ns-note .upper-right {
    z-index: 1 !important
}

.ns-note .mag-edit .area-btn-image {
    z-index: 6 !important
}

.ns-note .balloon {
    z-index: 1 !important
}

.ns-note .l-sidebar__item {
    margin-bottom: 48px;
    margin-top: 48px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .l-sidebar__item {
        margin-bottom: 32px;
        margin-top: 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .l-sidebar__item {
        margin-bottom: 24px;
        margin-top: 24px
    }
}

.ns-note .l-sidebar__item--border {
    padding-top: 48px;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .l-sidebar__item--border {
        padding-top: 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .l-sidebar__item--border {
        padding-top: 24px
    }
}

.ns-note .l-sidebar--position_sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 24px
}

.ns-note .l-content__item {
    margin-bottom: 48px;
    margin-top: 48px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .l-content__item {
        margin-bottom: 32px;
        margin-top: 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .l-content__item {
        margin-bottom: 24px;
        margin-top: 24px
    }
}

.ns-note .l-content__item--border {
    padding-top: 48px;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .l-content__item--border {
        padding-top: 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .l-content__item--border {
        padding-top: 24px
    }
}

.ns-note .pika-lendar td {
    vertical-align: inherit
}

.ns-note .c-avatar {
    overflow: hidden
}

.ns-note .c-avatar__img {
    width: 100%;
    height: auto
}

.ns-note .c-avatar--fit .c-avatar__img {
    overflow: hidden;
    width: 100%;
    height: auto;
    border-radius: 50%
}

.ns-note .c-avatar--border_white .c-avatar__img {
    border: #ffffff solid 1px
}

.ns-note .c-avatar--small {
    width: 30px;
    height: 30px;
    border-radius: 30px
}

.ns-note .c-avatar--middle {
    width: 40px;
    height: 40px;
    border-radius: 40px
}

.ns-note .c-avatar--large {
    width: 90px;
    height: 90px;
    border-radius: 90px
}

.ns-note .c-avatar--xlarge {
    width: 120px;
    height: 120px;
    border-radius: 120px
}

.ns-note .c-avatar--xxlarge {
    width: 160px;
    height: 160px;
    border-radius: 160px
}

.ns-note .c-avatar--boxShadow {
    display: inline-block;
    position: relative
}

.ns-note .c-avatar--boxShadow:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: inherit;
    height: inherit;
    border-radius: 100%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    z-index: 1
}

.ns-note .c-avatar--timeline {
    width: 36px;
    height: 36px;
    border-radius: 36px
}

@media only screen and (max-width: 479px) {
    .ns-note .c-avatar--timeline {
        width: 24px;
        height: 24px;
        border-radius: 24px
    }
}

.ns-note .c-avatar--creator {
    width: 110px;
    height: 110px;
    border-radius: 110px
}

@media only screen and (max-width: 479px) {
    .ns-note .c-avatar--creator {
        width: 70px;
        height: 70px;
        border-radius: 70px
    }
}

.ns-note .c-eyecatch {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 2px
}

.ns-note .c-eyecatch__img {
    width: auto;
    height: auto
}

.ns-note .c-eyecatch--middle .c-eyecatch__img {
    width: 56px;
    height: 56px
}

.ns-note .c-eyecatch--fit {
    border-radius: 0;
    border: none;
    position: relative
}

.ns-note .c-eyecatch--fit:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 41.2%
}

.ns-note .c-eyecatch--fit .c-eyecatch__img {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto
}

.ns-note .renewal-c-button--small,
.ns-note .renewal-c-button--medium,
.ns-note .renewal-c-button--large,
.ns-note .renewal-c-button--full,
.ns-note .renewal-c-button--primarySmall,
.ns-note .renewal-c-button--primaryMedium,
.ns-note .renewal-c-button--primaryLarge,
.ns-note .renewal-c-button--primaryFull,
.ns-note .renewal-c-button--secondaryXsmall,
.ns-note .renewal-c-button--secondarySmall,
.ns-note .renewal-c-button--secondaryMedium,
.ns-note .renewal-c-button--secondaryLarge,
.ns-note .renewal-c-button--secondaryFull,
.ns-note .renewal-c-button--tertiaryXsmall,
.ns-note .renewal-c-button--tertiarySmall,
.ns-note .renewal-c-button--tertiaryMedium,
.ns-note .renewal-c-button--tertiaryLarge,
.ns-note .renewal-c-button--tertiaryFull,
.ns-note .renewal-c-button--dangerXsmall,
.ns-note .renewal-c-button--dangerSmall,
.ns-note .renewal-c-button--dangerMedium,
.ns-note .renewal-c-button--dangerLarge,
.ns-note .renewal-c-button--dangerFull,
.ns-note .renewal-c-button--textXsmall,
.ns-note .renewal-c-button--textSmall,
.ns-note .renewal-c-button--textMedium,
.ns-note .renewal-c-button--textLarge,
.ns-note .renewal-c-button--textFull,
.ns-note .renewal-c-button--navBarPostNote,
.ns-note .renewal-p-galleryLayout__sortButton .p-sortNav>li>span {
    display: inline-block;
    padding: 0.7em 1em;
    border: 1px solid #e8eceb;
    border-radius: 4px;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: none;
    transition: none
}

.ns-note .renewal-c-button--small:hover,
.ns-note .renewal-c-button--medium:hover,
.ns-note .renewal-c-button--large:hover,
.ns-note .renewal-c-button--full:hover,
.ns-note .renewal-c-button--primarySmall:hover,
.ns-note .renewal-c-button--primaryMedium:hover,
.ns-note .renewal-c-button--primaryLarge:hover,
.ns-note .renewal-c-button--primaryFull:hover,
.ns-note .renewal-c-button--secondaryXsmall:hover,
.ns-note .renewal-c-button--secondarySmall:hover,
.ns-note .renewal-c-button--secondaryMedium:hover,
.ns-note .renewal-c-button--secondaryLarge:hover,
.ns-note .renewal-c-button--secondaryFull:hover,
.ns-note .renewal-c-button--tertiaryXsmall:hover,
.ns-note .renewal-c-button--tertiarySmall:hover,
.ns-note .renewal-c-button--tertiaryMedium:hover,
.ns-note .renewal-c-button--tertiaryLarge:hover,
.ns-note .renewal-c-button--tertiaryFull:hover,
.ns-note .renewal-c-button--dangerXsmall:hover,
.ns-note .renewal-c-button--dangerSmall:hover,
.ns-note .renewal-c-button--dangerMedium:hover,
.ns-note .renewal-c-button--dangerLarge:hover,
.ns-note .renewal-c-button--dangerFull:hover,
.ns-note .renewal-c-button--textXsmall:hover,
.ns-note .renewal-c-button--textSmall:hover,
.ns-note .renewal-c-button--textMedium:hover,
.ns-note .renewal-c-button--textLarge:hover,
.ns-note .renewal-c-button--textFull:hover,
.ns-note .renewal-c-button--navBarPostNote:hover,
.ns-note .renewal-p-galleryLayout__sortButton .p-sortNav>li>span:hover {
    color: inherit;
    border-color: #ddd
}

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

    .ns-note .renewal-c-button--small:hover,
    .ns-note .renewal-c-button--medium:hover,
    .ns-note .renewal-c-button--large:hover,
    .ns-note .renewal-c-button--full:hover,
    .ns-note .renewal-c-button--primarySmall:hover,
    .ns-note .renewal-c-button--primaryMedium:hover,
    .ns-note .renewal-c-button--primaryLarge:hover,
    .ns-note .renewal-c-button--primaryFull:hover,
    .ns-note .renewal-c-button--secondaryXsmall:hover,
    .ns-note .renewal-c-button--secondarySmall:hover,
    .ns-note .renewal-c-button--secondaryMedium:hover,
    .ns-note .renewal-c-button--secondaryLarge:hover,
    .ns-note .renewal-c-button--secondaryFull:hover,
    .ns-note .renewal-c-button--tertiaryXsmall:hover,
    .ns-note .renewal-c-button--tertiarySmall:hover,
    .ns-note .renewal-c-button--tertiaryMedium:hover,
    .ns-note .renewal-c-button--tertiaryLarge:hover,
    .ns-note .renewal-c-button--tertiaryFull:hover,
    .ns-note .renewal-c-button--dangerXsmall:hover,
    .ns-note .renewal-c-button--dangerSmall:hover,
    .ns-note .renewal-c-button--dangerMedium:hover,
    .ns-note .renewal-c-button--dangerLarge:hover,
    .ns-note .renewal-c-button--dangerFull:hover,
    .ns-note .renewal-c-button--textXsmall:hover,
    .ns-note .renewal-c-button--textSmall:hover,
    .ns-note .renewal-c-button--textMedium:hover,
    .ns-note .renewal-c-button--textLarge:hover,
    .ns-note .renewal-c-button--textFull:hover,
    .ns-note .renewal-c-button--navBarPostNote:hover,
    .ns-note .renewal-p-galleryLayout__sortButton .p-sortNav>li>span:hover {
        border-color: #e8eceb
    }
}

.ns-note .is-disabled.renewal-c-button--small,
.ns-note .is-disabled.renewal-c-button--medium,
.ns-note .is-disabled.renewal-c-button--large,
.ns-note .is-disabled.renewal-c-button--full,
.ns-note .is-disabled.renewal-c-button--primarySmall,
.ns-note .is-disabled.renewal-c-button--primaryMedium,
.ns-note .is-disabled.renewal-c-button--primaryLarge,
.ns-note .is-disabled.renewal-c-button--primaryFull,
.ns-note .is-disabled.renewal-c-button--secondaryXsmall,
.ns-note .is-disabled.renewal-c-button--secondarySmall,
.ns-note .is-disabled.renewal-c-button--secondaryMedium,
.ns-note .is-disabled.renewal-c-button--secondaryLarge,
.ns-note .is-disabled.renewal-c-button--secondaryFull,
.ns-note .is-disabled.renewal-c-button--tertiaryXsmall,
.ns-note .is-disabled.renewal-c-button--tertiarySmall,
.ns-note .is-disabled.renewal-c-button--tertiaryMedium,
.ns-note .is-disabled.renewal-c-button--tertiaryLarge,
.ns-note .is-disabled.renewal-c-button--tertiaryFull,
.ns-note .is-disabled.renewal-c-button--dangerXsmall,
.ns-note .is-disabled.renewal-c-button--dangerSmall,
.ns-note .is-disabled.renewal-c-button--dangerMedium,
.ns-note .is-disabled.renewal-c-button--dangerLarge,
.ns-note .is-disabled.renewal-c-button--dangerFull,
.ns-note .is-disabled.renewal-c-button--textXsmall,
.ns-note .is-disabled.renewal-c-button--textSmall,
.ns-note .is-disabled.renewal-c-button--textMedium,
.ns-note .is-disabled.renewal-c-button--textLarge,
.ns-note .is-disabled.renewal-c-button--textFull,
.ns-note .is-disabled.renewal-c-button--navBarPostNote,
.ns-note .renewal-p-galleryLayout__sortButton .p-sortNav>li>span.is-disabled {
    opacity: 1;
    pointer-events: none;
    background: #D2D2D2;
    border-color: #D2D2D2;
    color: #fff
}

.ns-note .is-active.renewal-c-button--small,
.ns-note .is-active.renewal-c-button--medium,
.ns-note .is-active.renewal-c-button--large,
.ns-note .is-active.renewal-c-button--full,
.ns-note .is-active.renewal-c-button--primarySmall,
.ns-note .is-active.renewal-c-button--primaryMedium,
.ns-note .is-active.renewal-c-button--primaryLarge,
.ns-note .is-active.renewal-c-button--primaryFull,
.ns-note .is-active.renewal-c-button--secondaryXsmall,
.ns-note .is-active.renewal-c-button--secondarySmall,
.ns-note .is-active.renewal-c-button--secondaryMedium,
.ns-note .is-active.renewal-c-button--secondaryLarge,
.ns-note .is-active.renewal-c-button--secondaryFull,
.ns-note .is-active.renewal-c-button--tertiaryXsmall,
.ns-note .is-active.renewal-c-button--tertiarySmall,
.ns-note .is-active.renewal-c-button--tertiaryMedium,
.ns-note .is-active.renewal-c-button--tertiaryLarge,
.ns-note .is-active.renewal-c-button--tertiaryFull,
.ns-note .is-active.renewal-c-button--dangerXsmall,
.ns-note .is-active.renewal-c-button--dangerSmall,
.ns-note .is-active.renewal-c-button--dangerMedium,
.ns-note .is-active.renewal-c-button--dangerLarge,
.ns-note .is-active.renewal-c-button--dangerFull,
.ns-note .is-active.renewal-c-button--textXsmall,
.ns-note .is-active.renewal-c-button--textSmall,
.ns-note .is-active.renewal-c-button--textMedium,
.ns-note .is-active.renewal-c-button--textLarge,
.ns-note .is-active.renewal-c-button--textFull,
.ns-note .is-active.renewal-c-button--navBarPostNote,
.ns-note .renewal-p-galleryLayout__sortButton .p-sortNav>li>span.is-active {
    pointer-events: auto
}

.ns-note .renewal-c-button--secondaryXsmall,
.ns-note .renewal-c-button--tertiaryXsmall,
.ns-note .renewal-c-button--dangerXsmall,
.ns-note .renewal-c-button--textXsmall {
    font-size: 11px;
    padding: 0.7em
}

.ns-note .renewal-c-button--small,
.ns-note .renewal-c-button--primarySmall,
.ns-note .renewal-c-button--secondarySmall,
.ns-note .renewal-c-button--tertiarySmall,
.ns-note .renewal-c-button--dangerSmall,
.ns-note .renewal-c-button--textSmall {
    font-size: 12px
}

.ns-note .renewal-c-button--medium,
.ns-note .renewal-c-button--primaryMedium,
.ns-note .renewal-c-button--secondaryMedium,
.ns-note .renewal-c-button--tertiaryMedium,
.ns-note .renewal-c-button--dangerMedium,
.ns-note .renewal-c-button--textMedium {
    font-size: 14px;
    padding: 0.8em 1.6em
}

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

    .ns-note .renewal-c-button--medium,
    .ns-note .renewal-c-button--primaryMedium,
    .ns-note .renewal-c-button--secondaryMedium,
    .ns-note .renewal-c-button--tertiaryMedium,
    .ns-note .renewal-c-button--dangerMedium,
    .ns-note .renewal-c-button--textMedium {
        font-size: 13px
    }
}

.ns-note .renewal-c-button--large,
.ns-note .renewal-c-button--primaryLarge,
.ns-note .renewal-c-button--secondaryLarge,
.ns-note .renewal-c-button--tertiaryLarge,
.ns-note .renewal-c-button--dangerLarge,
.ns-note .renewal-c-button--textLarge {
    font-size: 20px
}

.ns-note .renewal-c-button--full,
.ns-note .renewal-c-button--primaryFull,
.ns-note .renewal-c-button--secondaryFull,
.ns-note .renewal-c-button--tertiaryFull,
.ns-note .renewal-c-button--dangerFull,
.ns-note .renewal-c-button--textFull {
    width: 100%;
    padding: 1em
}

.ns-note .renewal-c-button--primarySmall,
.ns-note .renewal-c-button--primaryMedium,
.ns-note .renewal-c-button--primaryLarge,
.ns-note .renewal-c-button--primaryFull,
.ns-note .renewal-c-button--navBarPostNote {
    border-color: #2cb696;
    color: #fff;
    background: #2cb696;
    font-weight: bold
}

.ns-note .renewal-c-button--primarySmall:hover,
.ns-note .renewal-c-button--primaryMedium:hover,
.ns-note .renewal-c-button--primaryLarge:hover,
.ns-note .renewal-c-button--primaryFull:hover,
.ns-note .renewal-c-button--navBarPostNote:hover {
    border-color: #27aa8a;
    color: #fff;
    background: #27aa8a
}

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

    .ns-note .renewal-c-button--primarySmall:hover,
    .ns-note .renewal-c-button--primaryMedium:hover,
    .ns-note .renewal-c-button--primaryLarge:hover,
    .ns-note .renewal-c-button--primaryFull:hover,
    .ns-note .renewal-c-button--navBarPostNote:hover {
        border-color: #2cb696;
        background: #2cb696
    }
}

.ns-note .renewal-c-button--secondaryXsmall,
.ns-note .renewal-c-button--secondarySmall,
.ns-note .renewal-c-button--secondaryMedium,
.ns-note .renewal-c-button--secondaryLarge,
.ns-note .renewal-c-button--secondaryFull {
    border-color: #2cb696;
    color: #249f80
}

.ns-note .renewal-c-button--secondaryXsmall:hover,
.ns-note .renewal-c-button--secondarySmall:hover,
.ns-note .renewal-c-button--secondaryMedium:hover,
.ns-note .renewal-c-button--secondaryLarge:hover,
.ns-note .renewal-c-button--secondaryFull:hover {
    border-color: #27aa8a;
    color: #209274
}

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

    .ns-note .renewal-c-button--secondaryXsmall:hover,
    .ns-note .renewal-c-button--secondarySmall:hover,
    .ns-note .renewal-c-button--secondaryMedium:hover,
    .ns-note .renewal-c-button--secondaryLarge:hover,
    .ns-note .renewal-c-button--secondaryFull:hover {
        border-color: #2cb696;
        color: #249f80
    }
}

.ns-note .is-follow.renewal-c-button--secondaryXsmall,
.ns-note .is-follow.renewal-c-button--secondarySmall,
.ns-note .is-follow.renewal-c-button--secondaryMedium,
.ns-note .is-follow.renewal-c-button--secondaryLarge,
.ns-note .is-follow.renewal-c-button--secondaryFull {
    border-color: #2cb696;
    color: #fff;
    background: #2cb696
}

.ns-note .is-follow.renewal-c-button--secondaryXsmall:hover,
.ns-note .is-follow.renewal-c-button--secondarySmall:hover,
.ns-note .is-follow.renewal-c-button--secondaryMedium:hover,
.ns-note .is-follow.renewal-c-button--secondaryLarge:hover,
.ns-note .is-follow.renewal-c-button--secondaryFull:hover {
    border-color: #27aa8a;
    color: #fff;
    background: #27aa8a
}

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

    .ns-note .is-follow.renewal-c-button--secondaryXsmall:hover,
    .ns-note .is-follow.renewal-c-button--secondarySmall:hover,
    .ns-note .is-follow.renewal-c-button--secondaryMedium:hover,
    .ns-note .is-follow.renewal-c-button--secondaryLarge:hover,
    .ns-note .is-follow.renewal-c-button--secondaryFull:hover {
        border-color: #2cb696;
        background: #2cb696
    }
}

.ns-note .renewal-c-button--tertiaryXsmall,
.ns-note .renewal-c-button--tertiarySmall,
.ns-note .renewal-c-button--tertiaryMedium,
.ns-note .renewal-c-button--tertiaryLarge,
.ns-note .renewal-c-button--tertiaryFull {
    border-color: #F7F9F9;
    background: #F7F9F9;
    color: #222222
}

.ns-note .renewal-c-button--tertiaryXsmall:hover,
.ns-note .renewal-c-button--tertiarySmall:hover,
.ns-note .renewal-c-button--tertiaryMedium:hover,
.ns-note .renewal-c-button--tertiaryLarge:hover,
.ns-note .renewal-c-button--tertiaryFull:hover {
    border-color: #F2F4F4;
    background: #F2F4F4;
    color: #222222
}

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

    .ns-note .renewal-c-button--tertiaryXsmall:hover,
    .ns-note .renewal-c-button--tertiarySmall:hover,
    .ns-note .renewal-c-button--tertiaryMedium:hover,
    .ns-note .renewal-c-button--tertiaryLarge:hover,
    .ns-note .renewal-c-button--tertiaryFull:hover {
        border-color: #F7F9F9;
        background: #F7F9F9
    }
}

.ns-note .renewal-c-button--dangerXsmall,
.ns-note .renewal-c-button--dangerSmall,
.ns-note .renewal-c-button--dangerMedium,
.ns-note .renewal-c-button--dangerLarge,
.ns-note .renewal-c-button--dangerFull {
    border-color: #ED4956;
    background: #ED4956;
    color: #ffffff
}

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

    .ns-note .renewal-c-button--dangerXsmall:hover,
    .ns-note .renewal-c-button--dangerSmall:hover,
    .ns-note .renewal-c-button--dangerMedium:hover,
    .ns-note .renewal-c-button--dangerLarge:hover,
    .ns-note .renewal-c-button--dangerFull:hover {
        border-color: #CE353F;
        background-color: #CE353F;
        color: #ffffff
    }
}

.ns-note .renewal-c-button--textXsmall,
.ns-note .renewal-c-button--textSmall,
.ns-note .renewal-c-button--textMedium,
.ns-note .renewal-c-button--textLarge,
.ns-note .renewal-c-button--textFull {
    border-color: transparent;
    background: transparent;
    color: inherit
}

.ns-note .renewal-c-button--textXsmall:hover,
.ns-note .renewal-c-button--textSmall:hover,
.ns-note .renewal-c-button--textMedium:hover,
.ns-note .renewal-c-button--textLarge:hover,
.ns-note .renewal-c-button--textFull:hover {
    border-color: transparent;
    background: transparent;
    color: inherit
}

.ns-note .is-danger.renewal-c-button--textXsmall,
.ns-note .is-danger.renewal-c-button--textSmall,
.ns-note .is-danger.renewal-c-button--textMedium,
.ns-note .is-danger.renewal-c-button--textLarge,
.ns-note .is-danger.renewal-c-button--textFull {
    color: #ED4956
}

.ns-note .is-danger.renewal-c-button--textXsmall:hover,
.ns-note .is-danger.renewal-c-button--textSmall:hover,
.ns-note .is-danger.renewal-c-button--textMedium:hover,
.ns-note .is-danger.renewal-c-button--textLarge:hover,
.ns-note .is-danger.renewal-c-button--textFull:hover {
    color: #ED4956
}

.ns-note .renewal-c-button--white {
    border-color: #fff;
    color: #fff;
    background: transparent
}

.ns-note .renewal-c-button--white:hover {
    border-color: #fff;
    color: #fff;
    opacity: .8
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-c-button--white:hover {
        opacity: 1
    }
}

.ns-note .renewal-c-button--priceTl {
    padding: 0.5em 0.8em;
    font-size: 14px;
    font-family: Open Sans, sans-serif;
    font-weight: 400;
    cursor: default
}

.ns-note .renewal-c-button--priceTl:hover {
    border-color: #3BC49D;
    color: #3DAD88
}

.ns-note .renewal-c-button--price {
    padding: 0.5em 0.8em;
    font-size: 14px;
    font-family: Open Sans, sans-serif;
    font-weight: 400
}

.ns-note .renewal-c-button--creatorTopFollow {
    padding: 0.5em 1em
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-button--creatorTopFollow {
        padding: 3px 0.6em;
        font-size: 11px;
        font-weight: bold;
        color: #3BC49D
    }

    .ns-note .renewal-c-button--creatorTopFollow:hover {
        color: #3BC49D
    }
}

.ns-note .renewal-c-button--creatorTopFollow span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-c-button--creatorTopFollow span>i {
    margin-right: 2px
}

.ns-note .renewal-c-button--creatorTopFollowing {
    padding: 0.5em 1em
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-button--creatorTopFollowing {
        padding: 3px 1em;
        font-size: 11px;
        font-weight: bold
    }
}

.ns-note .renewal-c-button--creatorTopEdit {
    padding-left: 2em;
    padding-right: 2em
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-button--creatorTopEdit {
        padding: 0.6em 0.6em;
        font-size: 11px
    }
}

.ns-note .renewal-c-button--navBarPostNote {
    margin-left: 16px;
    padding: 0;
    font-weight: bold
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-button--navBarPostNote {
        margin-left: 16px
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-c-button--navBarPostNote {
        margin-left: 8px
    }
}

.ns-note .renewal-c-button--navBarPostNote .renewal-p-icon--postNote {
    pointer-events: none
}

.ns-note .renewal-c-button--statusLabel {
    border: none;
    background: #D2D2D2;
    color: #fff;
    pointer-events: none
}

.ns-note .renewal-c-button--abTest {
    font-weight: bold;
    background: #2687FB;
    border-color: #2687FB
}

.ns-note .renewal-c-button--abTest:hover {
    background: #2687FB;
    border-color: #2687FB
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-button--abTest {
        padding: 0.7em 0.9em
    }
}

.ns-note .c-button--type_none,
.ns-note .c-button--type_basic,
.ns-note .c-button--type_disabled,
.ns-note .c-button--type_primary,
.ns-note .c-button--type_secondary,
.ns-note .c-button--type_danger,
.ns-note .c-button--type_twitter,
.ns-note .c-button--type_facebook {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 0 16px;
    border-radius: 4px;
    border: none;
    color: inherit;
    min-height: 40px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    background: #ffffff;
    font-weight: bold;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: initial;
    min-width: auto
}

.ns-note .ng-enter.c-button--type_none,
.ns-note .ng-enter.c-button--type_basic,
.ns-note .ng-enter.c-button--type_disabled,
.ns-note .ng-enter.c-button--type_primary,
.ns-note .ng-enter.c-button--type_secondary,
.ns-note .ng-enter.c-button--type_danger,
.ns-note .ng-enter.c-button--type_twitter,
.ns-note .ng-enter.c-button--type_facebook,
.ns-note .ng-leave.c-button--type_none,
.ns-note .ng-leave.c-button--type_basic,
.ns-note .ng-leave.c-button--type_disabled,
.ns-note .ng-leave.c-button--type_primary,
.ns-note .ng-leave.c-button--type_secondary,
.ns-note .ng-leave.c-button--type_danger,
.ns-note .ng-leave.c-button--type_twitter,
.ns-note .ng-leave.c-button--type_facebook,
.ns-note .ng-enter-active.c-button--type_none,
.ns-note .ng-enter-active.c-button--type_basic,
.ns-note .ng-enter-active.c-button--type_disabled,
.ns-note .ng-enter-active.c-button--type_primary,
.ns-note .ng-enter-active.c-button--type_secondary,
.ns-note .ng-enter-active.c-button--type_danger,
.ns-note .ng-enter-active.c-button--type_twitter,
.ns-note .ng-enter-active.c-button--type_facebook,
.ns-note .ng-leave-active.c-button--type_none,
.ns-note .ng-leave-active.c-button--type_basic,
.ns-note .ng-leave-active.c-button--type_disabled,
.ns-note .ng-leave-active.c-button--type_primary,
.ns-note .ng-leave-active.c-button--type_secondary,
.ns-note .ng-leave-active.c-button--type_danger,
.ns-note .ng-leave-active.c-button--type_twitter,
.ns-note .ng-leave-active.c-button--type_facebook {
    -webkit-transition: none;
    transition: none
}

.ns-note .c-button__icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 8px
}

.ns-note .c-button__icon:last-child {
    margin-right: 0
}

.ns-note .c-button__label {
    font-size: 14px
}

.ns-note .c-button--type_none {
    color: #787c7b;
    background-color: transparent
}

@media only screen and (min-width: 769px) {
    .ns-note .c-button--type_none {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .c-button--type_none:hover {
        color: #222222
    }
}

.ns-note .c-button--type_basic {
    border: 1px solid #e6e6e6
}

@media only screen and (min-width: 769px) {
    .ns-note .c-button--type_basic {
        -webkit-transition: none;
        transition: none
    }

    .ns-note .c-button--type_basic:hover {
        border: 1px solid rgba(0, 0, 0, 0.2)
    }
}

.ns-note .c-button--type_disabled {
    color: #ffffff;
    background-color: #ccc;
    pointer-events: none
}

.ns-note .c-button--type_disabled .c-button__label {
    opacity: 0.7
}

.ns-note .c-button--type_primary {
    color: #ffffff;
    background-color: #2cb696
}

@media only screen and (min-width: 769px) {
    .ns-note .c-button--type_primary {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .c-button--type_primary:hover {
        color: #ffffff;
        background-color: #27a185
    }
}

.ns-note .c-button--type_secondary {
    border: 1px solid #41c9b4;
    color: #2CB696
}

@media only screen and (min-width: 769px) {
    .ns-note .c-button--type_secondary {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .c-button--type_secondary:hover {
        border: 1px solid #2CB696
    }
}

.ns-note .c-button--type_danger {
    color: #ffffff;
    background-color: #ED4956
}

@media only screen and (min-width: 769px) {
    .ns-note .c-button--type_danger {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .c-button--type_danger:hover {
        color: #ffffff;
        background-color: #eb3240
    }
}

.ns-note .c-button--type_twitter {
    color: #ffffff;
    background-color: #55acee;
    font-weight: bold
}

@media only screen and (min-width: 769px) {
    .ns-note .c-button--type_twitter {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .c-button--type_twitter:hover {
        background-color: #2795e9
    }
}

.ns-note .c-button--type_facebook {
    color: #ffffff;
    background-color: #1877F2;
    font-weight: bold
}

@media only screen and (min-width: 769px) {
    .ns-note .c-button--type_facebook {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .c-button--type_facebook:hover {
        background-color: #0b5fcc
    }
}

.ns-note .c-button--size_small {
    min-height: 32px
}

@media only screen and (max-width: 479px) {
    .ns-note .c-button--size_small {
        padding-left: 8px;
        padding-right: 8px
    }
}

.ns-note .c-button--size_small .c-button__label {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 12px
}

.ns-note .c-button--width_fit {
    width: 100%
}

.ns-note .c-button--icon {
    padding-left: 0;
    padding-right: 0
}

.ns-note .c-button--icon .c-button__icon {
    margin-right: 0
}

.ns-note .c-button--circle {
    padding-left: 0;
    padding-right: 0;
    min-width: 40px;
    border-radius: 50% !important
}

.ns-note .c-button--circle .c-button__icon {
    margin-right: 0
}

.ns-note .renewal-c-popover--mymenu,
.ns-note .renewal-c-popover--notification,
.ns-note .renewal-c-popover--search,
.ns-note .renewal-c-popover--postNote,
.ns-note .renewal-c-popover--creatorTopEdit,
.ns-note .renewal-c-popover--sortNavSeries,
.ns-note .renewal-c-popover--sortNav,
.ns-note .renewal-c-popover--sortNavAddFooter,
.ns-note .renewal-c-popover {
    position: absolute;
    z-index: 10;
    padding: 8px 0;
    text-align: left;
    font-weight: normal;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35)
}

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

    .ns-note .renewal-c-popover--mymenu,
    .ns-note .renewal-c-popover--notification,
    .ns-note .renewal-c-popover--search,
    .ns-note .renewal-c-popover--postNote,
    .ns-note .renewal-c-popover--creatorTopEdit,
    .ns-note .renewal-c-popover--sortNavSeries,
    .ns-note .renewal-c-popover--sortNav,
    .ns-note .renewal-c-popover--sortNavAddFooter,
    .ns-note .renewal-c-popover {
        width: 100%;
        height: 100vh;
        border-radius: 0
    }
}

.ns-note .renewal-c-popover--mymenu:before,
.ns-note .renewal-c-popover--notification:before,
.ns-note .renewal-c-popover--search:before,
.ns-note .renewal-c-popover--postNote:before,
.ns-note .renewal-c-popover--creatorTopEdit:before,
.ns-note .renewal-c-popover--sortNavSeries:before,
.ns-note .renewal-c-popover--sortNav:before,
.ns-note .renewal-c-popover--sortNavAddFooter:before,
.ns-note .renewal-c-popover:before {
    content: "";
    display: block;
    position: absolute;
    right: 8px;
    top: -13px;
    width: 14px;
    height: 14px;
    background: #fff;
    box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.8);
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

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

    .ns-note .renewal-c-popover--mymenu:before,
    .ns-note .renewal-c-popover--notification:before,
    .ns-note .renewal-c-popover--search:before,
    .ns-note .renewal-c-popover--postNote:before,
    .ns-note .renewal-c-popover--creatorTopEdit:before,
    .ns-note .renewal-c-popover--sortNavSeries:before,
    .ns-note .renewal-c-popover--sortNav:before,
    .ns-note .renewal-c-popover--sortNavAddFooter:before,
    .ns-note .renewal-c-popover:before {
        top: -10px;
        right: 30px;
        width: 8px;
        height: 8px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--noScroll {
        position: static;
        overflow: hidden;
        height: 100%
    }
}

.ns-note .renewal-c-popover--action {
    left: -70px;
    min-width: 170px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--action {
        height: auto;
        border-radius: 4px
    }
}

.ns-note .renewal-c-popover--action:before {
    left: 50%;
    margin-left: -7px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--action:before {
        margin-left: -4px
    }
}

.ns-note .renewal-c-popover__search {
    padding: 5px 15px
}

.ns-note .renewal-c-popover__item--sticker,
.ns-note .renewal-c-popover__item {
    padding: 5px 15px
}

.ns-note .renewal-c-popover__item--sticker:hover,
.ns-note .renewal-c-popover__item:hover {
    background: #f7f7f7
}

.ns-note .renewal-c-popover__item--delete a {
    color: #ED4956
}

.ns-note .renewal-c-popover__link {
    display: block
}

.ns-note .renewal-c-popover__item--sticker {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-c-popover__item--sticker>p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 120px
}

.ns-note .renewal-c-popover__item--sticker.renewal-c-popover__item--stickerEdit {
    height: 30px
}

.ns-note .renewal-c-popover__item--sticker.renewal-c-popover__item--stickerEdit>i {
    margin-right: -15px
}

.ns-note .renewal-c-popover__item--sticker.renewal-c-popover__item--stickerEdit:hover>i {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_settings-eabe793e36383bdd3e3d68d53682ba66d034f7c6e24d301b66ca50f148d27102.svg) no-repeat
}

.ns-note .renewal-c-popover__item--sticker.renewal-c-popover__item--stickerEdit:hover>i:hover {
    opacity: .7
}

.ns-note .renewal-c-popover__attention {
    color: #787c7b;
    text-align: center;
    line-height: 1.5;
    padding-bottom: 32px
}

.ns-note .renewal-c-popover--top {
    top: auto;
    bottom: 40px
}

.ns-note .renewal-c-popover--top:before {
    top: auto;
    bottom: -13px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--top:before {
        bottom: -10px
    }
}

.ns-note .renewal-c-popover--topRight {
    top: auto;
    bottom: 40px;
    left: auto;
    right: 0
}

.ns-note .renewal-c-popover--topRight:before {
    top: auto;
    bottom: -13px;
    left: auto;
    right: 10px;
    margin-left: 0;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--topRight:before {
        bottom: -10px
    }
}

.ns-note .renewal-c-popover--bottomRight {
    left: auto;
    right: 0
}

.ns-note .renewal-c-popover--bottomRight:before {
    top: -13px;
    bottom: auto;
    left: auto;
    right: 8px;
    margin-left: 0;
    -webkit-transform: rotate(-135deg) translate(-5px, -5px);
    transform: rotate(-135deg) translate(-5px, -5px)
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--bottomRight:before {
        top: -10px;
        right: 10px
    }
}

.ns-note .renewal-c-popover__separator {
    margin: 10px 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover__separator {
        margin: 8px 0
    }
}

.ns-note .renewal-c-popover--mymenu {
    z-index: 12;
    display: none;
    top: 43px;
    right: 0;
    width: 220px
}

.ns-note .renewal-c-popover--mymenu:before {
    right: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--mymenu:before {
        display: none
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-c-popover--mymenu:before {
        display: none
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--mymenu {
        top: 48px;
        right: 0;
        width: 100%;
        padding: 0 0 48px 0
    }
}

.ns-note .renewal-c-popover--notification {
    z-index: 12;
    display: none;
    top: 40px;
    left: 50%;
    right: 179px;
    width: 300px;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--notification {
        padding: 0
    }
}

.ns-note .renewal-c-popover--notification:before {
    left: 50%;
    margin-left: -7px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--notification:before {
        display: none
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-c-popover--notification:before {
        display: none
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-c-popover--notification {
        right: 197px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--notification {
        top: 48px;
        right: 0;
        width: 100%;
        padding-bottom: 48px
    }
}

.ns-note .renewal-c-popover--search {
    top: 60px;
    right: 0px;
    width: 200px
}

.ns-note .renewal-c-popover--search:before {
    right: 50%;
    margin-right: -7px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--search {
        top: 48px;
        width: 100%
    }

    .ns-note .renewal-c-popover--search:before {
        right: 120px;
        margin-right: 0
    }
}

.ns-note .renewal-c-popover--postNote {
    top: 60px;
    right: 0;
    height: auto;
    padding: 0;
    cursor: auto
}

.ns-note .renewal-c-popover--postNote:before {
    right: 46px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-c-popover--postNote {
        right: 24px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--postNote {
        top: 48px;
        min-height: 100vh
    }

    .ns-note .renewal-c-popover--postNote:before {
        display: none
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .renewal-c-popover--postNote:before {
        display: none
    }
}

.ns-note .renewal-c-popover--creatorTopEdit {
    top: 35px;
    right: 0px;
    min-width: 200px
}

.ns-note .renewal-c-popover--creatorTopEdit:before {
    display: none
}

.ns-note .renewal-c-popover--sortNavSeries,
.ns-note .renewal-c-popover--sortNav {
    overflow: auto;
    top: 30px;
    right: -10px;
    min-width: 200px;
    max-height: 300px
}

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

    .ns-note .renewal-c-popover--sortNavSeries,
    .ns-note .renewal-c-popover--sortNav {
        height: auto;
        padding-bottom: 8px
    }
}

.ns-note .renewal-c-popover--sortNavSeries:before,
.ns-note .renewal-c-popover--sortNav:before {
    right: 10px
}

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

    .ns-note .renewal-c-popover--sortNavSeries:before,
    .ns-note .renewal-c-popover--sortNav:before {
        right: 12px
    }
}

.ns-note .renewal-c-popover--sortNavSeries>ul>li:hover,
.ns-note .renewal-c-popover--sortNav>ul>li:hover {
    background: #f7f7f7
}

.ns-note .renewal-c-popover--sortNavAddFooter {
    padding: 0;
    top: 30px;
    right: -10px;
    min-width: 200px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--sortNavAddFooter {
        height: auto
    }
}

.ns-note .renewal-c-popover--sortNavAddFooter:before {
    display: none
}

.ns-note .renewal-c-popover--sortNavAddFooter>ul {
    overflow: auto;
    max-height: 300px;
    padding: 8px 0
}

.ns-note .renewal-c-popover__footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-c-popover__footer>a,
.ns-note .renewal-c-popover__footer li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 13px 15px;
    font-size: 12px;
    border-radius: 0 0 4px 4px
}

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

    .ns-note .renewal-c-popover__footer>a,
    .ns-note .renewal-c-popover__footer li {
        padding: 10px 15px
    }
}

.ns-note .renewal-c-popover__footer>a:hover,
.ns-note .renewal-c-popover__footer li:hover {
    color: #222222;
    background: #f7f7f7
}

.ns-note .renewal-c-popover--sortNavSeries {
    width: 220px
}

.ns-note .renewal-c-popover--sortNavSeries>ul>li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ns-note .hide-post-note .renewal-c-popover--mymenu {
    right: 0px
}

.ns-note .hide-post-note .renewal-c-popover--notification {
    right: 40px
}

.ns-note .renewal-c-popover--selectEyecatch {
    top: 63px;
    left: -2px
}

.ns-note .renewal-c-popover--selectEyecatch li:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-c-popover--selectEyecatch li:last-child a {
    padding-left: 14px
}

.ns-note .renewal-c-popover--selectEyecatch a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px 28px 17px 15px;
    font-size: 13px;
    white-space: nowrap
}

.ns-note .renewal-c-popover--selectEyecatch a .renewal-p-icon--eyecatchUpload {
    margin-right: 10px
}

.ns-note .renewal-c-popover--selectEyecatch a .renewal-p-icon--stockPhoto {
    margin-right: 9px
}

.ns-note .renewal-c-popover--selectEyecatch:before {
    right: auto;
    left: 20px
}

.ns-note .renewal-c-popover--labelSetting {
    left: -67.5px;
    min-width: 200px;
    padding: 0
}

.ns-note .renewal-c-popover--labelSetting>ul {
    overflow: auto;
    max-height: 300px;
    padding: 8px 0
}

.ns-note .renewal-c-popover--labelSetting>ul>li {
    cursor: pointer
}

.ns-note .renewal-c-popover--labelSetting>ul>li:hover {
    background: #f7f7f7
}

.ns-note .renewal-c-popover--labelSetting>ul>li.is-selected .p-colorItem {
    margin-left: 0
}

.ns-note .renewal-c-popover--labelSetting>ul>li.is-selected>i {
    margin-right: 4px
}

.ns-note .renewal-c-popover--labelSetting>ul>li .p-colorItem {
    margin-left: 18px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--labelSetting {
        height: auto;
        border-radius: 4px
    }
}

.ns-note .renewal-c-popover--labelSetting:before {
    left: 50%;
    margin-left: -7px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-popover--labelSetting:before {
        margin-left: -4px
    }
}

.ns-note .c-card {
    background: #ffffff;
    position: relative;
    cursor: pointer
}

@media only screen and (max-width: 479px) {
    .ns-note .c-card {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

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

.ns-note .c-card__link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2
}

.ns-note .c-card__label {
    margin-left: auto;
    font-size: 0
}

.ns-note .c-card__notification {
    position: relative;
    z-index: 4;
    display: block;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .c-card__notification {
        padding: 0 20px;
        margin-bottom: 8px
    }
}

.ns-note .c-card__body {
    position: relative;
    z-index: 3;
    pointer-events: none
}

@media only screen and (max-width: 479px) {
    .ns-note .c-card__body {
        padding: 0 20px 8px
    }
}

.ns-note .c-card__body--imageOnlyone {
    padding: 0 20px;
    margin-bottom: -1px
}

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

@media only screen and (max-width: 479px) {
    .ns-note .c-card__foot {
        margin: 0 20px;
        padding: 8px 0 0
    }
}

.ns-note .c-card__foot>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .c-card__foot>ul>li:first-child {
    margin-right: 8px
}

.ns-note .c-card__avatar {
    pointer-events: auto;
    position: relative;
    padding-left: 48px;
    width: calc(100% - 48px)
}

@media only screen and (max-width: 479px) {
    .ns-note .c-card__avatar {
        padding-left: 32px;
        width: calc(100% - 32px)
    }
}

.ns-note .c-card__avatar a {
    color: #787c7b
}

.ns-note .c-card__avatarIcon {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.ns-note .c-card__avatarName {
    font-size: 12px;
    font-weight: bold;
    line-height: 2;
    margin-bottom: -2px;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (max-width: 479px) {
    .ns-note .c-card__avatarName {
        line-height: 1.5;
        font-size: 10px
    }
}

.ns-note .c-card__avatarDate {
    font-size: 12px;
    line-height: 1.5;
    color: #787c7b;
    display: block
}

@media only screen and (max-width: 479px) {
    .ns-note .c-card__avatarDate {
        font-size: 10px
    }
}

.ns-note .c-card__action {
    pointer-events: auto
}

.ns-note .renewal-c-card {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    background: #fff
}

.ns-note .renewal-c-card__head {
    padding: 20px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-card__head {
        padding: 15px 20px
    }
}

.ns-note .renewal-c-card__head>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-c-card__head>ul>li:first-child {
    margin-right: 8px
}

.ns-note .renewal-c-card__label {
    margin-left: auto;
    font-size: 0
}

.ns-note .renewal-c-card__userName {
    font-size: 12px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ns-note .renewal-c-card__date {
    font-size: 11px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-card__date {
        font-size: 10px
    }
}

.ns-note .renewal-c-card__date>a {
    color: #787c7b
}

.ns-note .renewal-c-card__body {
    padding: 0 20px 20px
}

.ns-note .renewal-c-card__body--imageOnlyone {
    padding: 0 20px;
    margin-bottom: -1px
}

.ns-note .renewal-c-card__body--imageOnlyone .p-cardItem__hashtag,
.ns-note .renewal-c-card__body--imageOnlyone .renewal-p-cardItem__hashtag {
    margin: 15px 0 20px
}

.ns-note .renewal-c-card__foot {
    margin: 0 20px;
    padding: 12px 0 15px;
    border-top: 1px solid #e8eceb
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-c-card__foot {
        padding: 7px 0 10px
    }
}

.ns-note .renewal-c-label--smallPrimary,
.ns-note .renewal-c-label--small,
.ns-note .renewal-c-label {
    display: inline-block;
    padding: 0.7em 1em;
    border: 1px solid #e8eceb;
    border-radius: 4px;
    color: #787c7b;
    font-family: inherit;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.ns-note .renewal-c-label--smallPrimary,
.ns-note .renewal-c-label--small {
    padding: 0.2em 0.4em;
    color: #2cb696;
    border-color: #2cb696;
    font-size: 10px;
    font-weight: normal
}

.ns-note .renewal-c-label--smallPrimary {
    color: #fff;
    background: #2cb696;
    border-color: #2cb696;
    font-weight: bold
}

.ns-note .renewal-c-label--smallPrimary.is-lightBlue {
    border-color: #20a8ed;
    background: #20a8ed
}

.ns-note .renewal-c-label--smallPrimary.is-blue {
    border-color: #3e7fdd;
    background: #3e7fdd
}

.ns-note .renewal-c-label--smallPrimary.is-darkBlue {
    border-color: #32489c;
    background: #32489c
}

.ns-note .renewal-c-label--smallPrimary.is-purple {
    border-color: #8e4c9b;
    background: #8e4c9b
}

.ns-note .renewal-c-label--smallPrimary.is-pink {
    border-color: #ea687e;
    background: #ea687e
}

.ns-note .renewal-c-label--smallPrimary.is-red {
    border-color: #e5483c;
    background: #e5483c
}

.ns-note .renewal-c-label--smallPrimary.is-orange {
    border-color: #ea7424;
    background: #ea7424
}

.ns-note .renewal-c-label--smallPrimary.is-lightOrange {
    border-color: #ff8c00;
    background: #ff8c00
}

.ns-note .renewal-c-label--smallPrimary.is-yellow {
    border-color: #e5bb07;
    background: #e5bb07
}

.ns-note .renewal-c-label--smallPrimary.is-yellowGreen {
    border-color: #79bd28;
    background: #79bd28
}

.ns-note .renewal-c-label--smallPrimary.is-green {
    border-color: #24a33a;
    background: #24a33a
}

.ns-note .renewal-c-label--smallPrimary.is-darkGrey {
    border-color: #444444;
    background: #444444
}

.ns-note .c-modal--wide,
.ns-note .c-modal {
    border-radius: 4px;
    background: #fff
}

.ns-note .c-modal__header {
    position: relative;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .c-modal__header>p {
    font-size: 16px;
    font-weight: bold;
    text-align: center
}

.ns-note .c-modal__header>i {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer
}

@media only screen and (max-width: 479px) {
    .ns-note .c-modal__header {
        padding: 10px 0
    }

    .ns-note .c-modal__header>p {
        font-size: 12px
    }

    .ns-note .c-modal__header>i {
        top: 5px
    }
}

.ns-note .c-modal__hero>figure>img {
    width: 100%;
    height: auto
}

.ns-note .c-modal__body {
    padding: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .c-modal__body {
        padding: 24px
    }
}

.ns-note .c-modal__footer {
    background: #f2f4f4;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 4px 4px
}

.ns-note .c-modal__footer>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: -1px;
    padding: 10px
}

.ns-note .c-modal__footer>ul.is-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .c-modal__footer>ul>li:nth-child(2) {
    margin-left: auto
}

.ns-note .c-modal--wide {
    overflow-x: auto;
    width: 580px;
    max-height: 100vh;
    margin-left: -90px;
    background: #fff
}

@media only screen and (max-width: 479px) {
    .ns-note .c-modal--wide {
        width: auto;
        margin: auto 0
    }
}

.ns-note .c-modal--wide .c-modal__body {
    width: 100%;
    padding: 40px
}

@media only screen and (max-width: 479px) {
    .ns-note .c-modal--wide .c-modal__body {
        padding: 20px
    }
}

.ns-note .c-icon {
    vertical-align: top;
    display: inline-block;
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 1;
    position: relative
}

.ns-note .c-icon:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    vertical-align: middle;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0
}

.ns-note .c-icon--like {
    -webkit-tap-highlight-color: transparent
}

.ns-note .c-icon--like.is-animate {
    -webkit-animation: effectSuki 280ms;
    animation: effectSuki 280ms
}

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

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

    56% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

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

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

    56% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.ns-note .c-icon--heartFill {
    -webkit-tap-highlight-color: transparent
}

.ns-note .c-icon--heartFill.is-animate {
    -webkit-animation: effectSuki 280ms;
    animation: effectSuki 280ms
}

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

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

    56% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.ns-note .c-icon--size_small {
    width: 16px;
    height: 16px;
    font-size: 16px
}

.ns-note .c-tags__list {
    letter-spacing: -.4em
}

.ns-note .c-tags__item {
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    font-size: 14px;
    margin-right: 8px;
    margin-bottom: 8px
}

.ns-note .c-tags__link {
    display: block;
    color: #787c7b;
    background-color: #fff;
    padding: 4px 8px;
    line-height: 1.2;
    border-radius: 4px
}

.ns-note .c-tags__link:hover {
    color: #222222
}

.ns-note .c-tags__count {
    font-size: 14px
}

.ns-note .c-tags--large .c-tags__item {
    font-size: 16px
}

.ns-note .c-tags--large .c-tags__link {
    padding: 8px 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .c-tags--large .c-tags__link {
        padding: 4px 8px
    }
}

.ns-note .c-tags--large .c-tags__count {
    font-size: 16px
}

.ns-note .c-tags--color_gray .c-tags__link {
    background-color: #f7f9f9
}

.ns-note .c-authorInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0
}

.ns-note .c-authorInfo__body {
    vertical-align: middle
}

.ns-note .c-authorInfo__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ns-note .c-authorInfo--small .c-authorInfo__avatar {
    width: 24px;
    margin-right: 8px
}

.ns-note .c-authorInfo--small .c-authorInfo__body {
    width: calc(100% - 32px)
}

.ns-note .c-authorInfo--small .c-authorInfo__name {
    color: #787c7b;
    font-size: 11px
}

.ns-note .c-authorInfo--small .c-authorInfo__name>a {
    color: #787c7b
}

.ns-note .c-noteStatus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .c-noteStatus--articleDetail {
    margin-top: -8px;
    margin-bottom: 16px
}

.ns-note .c-noteStatus--talkDetail {
    margin-top: 8px;
    margin-bottom: 16px
}

.ns-note .c-noteStatus__like {
    position: relative;
    color: #EA3F60;
    padding-left: 16px;
    font-size: 12px;
    line-height: 1;
    margin-right: 12px
}

.ns-note .c-noteStatus__likeArticle {
    position: relative;
    color: #EA3F60;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1;
    margin-right: 12px
}

.ns-note .c-noteStatus__badge {
    position: relative;
    color: #eca726;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1;
    margin-right: 12px;
    height: 21px
}

@media only screen and (min-width: 769px) {
    .ns-note .c-noteStatus__badge {
        cursor: pointer
    }
}

.ns-note .c-noteStatus__comment {
    position: relative;
    color: #787c7b;
    padding-left: 16px;
    font-size: 12px;
    line-height: 1;
    margin-right: 16px
}

.ns-note .c-noteStatus__price {
    position: relative;
    color: #41c9b4;
    padding-left: 12px;
    font-size: 12px;
    line-height: 1;
    margin-right: 16px
}

.ns-note .c-noteStatus__num-Article {
    font-size: 14px;
    line-height: 1.5
}

.ns-note .c-noteStatus__icon {
    position: absolute;
    top: 0;
    left: 0
}

.ns-note .c-noteStatus__statusIcon {
    position: absolute;
    top: 3px;
    left: 0
}

.ns-note .c-buttonCircle {
    background-color: #fff;
    width: 56px;
    height: 56px;
    line-height: 54px;
    text-align: center;
    border-radius: 56px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 24px;
    color: #A8ABB1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .c-buttonCircle {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .c-buttonCircle:hover {
        border: 1px solid rgba(0, 0, 0, 0.2)
    }
}

.ns-note .c-buttonCircle__icon {
    display: inline-block;
    vertical-align: middle
}

.ns-note .c-buttonCircle__icon--type_suki.is-animate {
    -webkit-animation: effectSuki 280ms;
    animation: effectSuki 280ms
}

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

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

    56% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.ns-note .c-segmented--type_img .c-segmented__item,
.ns-note .c-segmented--type_img .c-segmented__link {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border: none
}

.ns-note .c-segmented__caption {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1
}

.ns-note .c-segmented__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px;
    border: 1px solid #e1e5e7;
    border-radius: 4px;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.ns-note .c-segmented__item {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 33%;
    padding: 4px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .c-segmented__item.is-active {
    border-color: #41c9b4
}

.ns-note .c-segmented__item.is-active .c-segmented__label {
    font-weight: bold;
    color: #41c9b4
}

.ns-note .c-segmented__item.is-active .c-segmented__figure {
    border-color: #41c9b4;
    color: #41c9b4;
    opacity: 1
}

.ns-note .c-segmented__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.ns-note .c-segmented__figure {
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 50%;
    opacity: .35
}

@media only screen and (max-width: 479px) {
    .ns-note .c-segmented__figure {
        width: 56px;
        height: 56px;
        padding: 7px
    }
}

.ns-note .c-segmented__img {
    width: 56px;
    height: 56px
}

@media only screen and (max-width: 479px) {
    .ns-note .c-segmented__img {
        width: 40px;
        height: 40px
    }
}

.ns-note .c-segmented__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    width: 100%;
    color: #222222;
    font-size: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width: 479px) {
    .ns-note .c-segmented__label {
        font-size: 14px
    }
}

.ns-note .c-segmented__subLabel {
    padding-top: 4px;
    padding-left: 2px;
    font-size: 12px
}

.ns-note .c-segmented__inputNum {
    display: inline-block !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    vertical-align: baseline !important;
    font-size: 14px;
    font-weight: normal
}

@media only screen and (max-width: 479px) {
    .ns-note .c-segmented__inputNum {
        width: 45px !important;
        height: 20px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 12px
    }
}

.ns-note .c-select {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    color: #222222;
    background: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-bottom: 0 !important
}

.ns-note .c-select__field {
    font-size: 14px;
    width: 100%;
    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;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

@media only screen and (max-width: 479px) {
    .ns-note .c-select__field {
        font-size: 16px
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .c-select__field:hover {
        border: 1px solid #a8abb1
    }
}

.ns-note .c-select__field:focus {
    border: 1px solid #a8abb1
}

.ns-note .c-select__field::-ms-expand {
    display: none
}

.ns-note .c-select__icon {
    position: absolute;
    top: 50%;
    right: 8px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    pointer-events: none
}

.ns-note .c-select--size_small .c-select__field {
    font-size: 12px;
    min-height: 32px;
    padding: 4px 28px 4px 12px
}

.ns-note .c-select--size_small .c-select__icon {
    right: 4px
}

.ns-note .c-loadingSpin {
    display: inline-block;
    border-color: transparent;
    border-style: solid;
    border-radius: 50%;
    border-bottom-color: #222222;
    border-left-color: #222222;
    width: 20px;
    height: 20px;
    border-width: 3px;
    -webkit-animation-name: loadingAnimationSpin;
    animation-name: loadingAnimationSpin;
    -webkit-animation-duration: 1200ms;
    animation-duration: 1200ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.ns-note .c-loadingSpin--color_white {
    border-bottom-color: #ffffff;
    border-left-color: #ffffff
}

.ns-note .c-loadingSpin--color_primary {
    border-bottom-color: #2CB696;
    border-left-color: #2CB696
}

.ns-note .c-loadingSpin--size_small {
    width: 10px;
    height: 10px;
    border-width: 2px
}

.ns-note .c-loadingSpin--size_large {
    width: 30px;
    height: 30px;
    border-width: 4px
}

.ns-note .renewal-p-icon--magLayoutList,
.ns-note .renewal-p-icon--magLayoutGrid,
.ns-note .renewal-p-icon--magLayoutFeed,
.ns-note .magSetting__layoutSelect,
.ns-note .renewal-p-icon--searchS,
.ns-note .renewal-p-icon--follow,
.ns-note .renewal-p-icon--following,
.ns-note .renewal-p-icon--notification,
.ns-note .renewal-p-icon--search,
.ns-note .renewal-p-icon--home,
.ns-note .renewal-p-icon--searchInput,
.ns-note .renewal-p-icon--like,
.ns-note .renewal-p-icon--likeSmall,
.ns-note .renewal-p-icon--likeOutlineColor,
.ns-note .renewal-p-icon--likeOutlineSmall,
.ns-note .renewal-p-icon--share,
.ns-note .renewal-p-icon--addMagazine,
.ns-note .renewal-p-icon--dots,
.ns-note .renewal-p-icon--comment,
.ns-note .renewal-p-icon--commentSmall,
.ns-note .renewal-p-icon--download,
.ns-note .renewal-p-icon--settings,
.ns-note .renewal-p-icon--facebook,
.ns-note .renewal-p-icon--twitter,
.ns-note .renewal-p-icon--facebookFill,
.ns-note .renewal-p-icon--twitterFill,
.ns-note .renewal-p-icon--close,
.ns-note .renewal-p-icon--closeBold,
.ns-note .renewal-p-icon--info,
.ns-note .renewal-p-icon--check,
.ns-note .renewal-p-icon--cart,
.ns-note .renewal-p-icon--officialAccount,
.ns-note .renewal-p-icon--addImage,
.ns-note .renewal-p-icon--delete,
.ns-note .renewal-p-icon--deleteWhite,
.ns-note .renewal-p-icon--footerBarFacebook,
.ns-note .renewal-p-icon--footerBarTwitter,
.ns-note .renewal-p-icon--footerBarHatena,
.ns-note .renewal-p-icon--footerBarLine,
.ns-note .renewal-p-icon--sharing,
.ns-note .renewal-p-icon--deleteS,
.ns-note .renewal-p-icon--light,
.ns-note .renewal-p-icon--present,
.ns-note .renewal-p-icon--lock,
.ns-note .renewal-p-icon--magPay,
.ns-note .renewal-p-icon--pin,
.ns-note .renewal-p-icon--amazon,
.ns-note .renewal-p-icon--caretDown,
.ns-note .renewal-p-icon--attention,
.ns-note .renewal-p-icon_plus_s,
.ns-note .renewal-p-icon_check_s,
.ns-note .renewal-p-icon--talknote,
.ns-note .renewal-p-icon--imagenote,
.ns-note .renewal-p-icon--textnote,
.ns-note .renewal-p-icon--soundnote,
.ns-note .renewal-p-icon--movienote,
.ns-note .renewal-p-icon--playMovie,
.ns-note .renewal-p-icon--postNote,
.ns-note .renewal-p-icon--eyecatchUpload,
.ns-note .renewal-p-icon--stockPhoto,
.ns-note .renewal-p-icon--question,
.ns-note .renewal-p-icon {
    display: block
}

.ns-note .renewal-p-icon--magLayoutList {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_mag-layout_list-6afd9379cda9b9b220c67b6520ae49e92f0694aeb1910e4b8adb5f6639ee3b95.svg) no-repeat
}

.ns-note .renewal-p-icon--magLayoutGrid {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_mag-layout_grid-7632b9d2ac3267e8ab8b445dda2b8cdbb67deead43728bc7548b9f53f9ffefbc.svg) no-repeat
}

.ns-note .renewal-p-icon--magLayoutFeed {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_mag-layout_feed-b0961f5f85a737c091394c8821cd01fa0577c0a3a7c3b00448dc85f116ce2be3.svg) no-repeat
}

.ns-note .magSetting__layoutSelect .is-active .renewal-p-icon--magLayoutList {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_mag-layout_list_active-801b35975986946ccf6d43c5f61112cb7c865e12607db5f69bf9de93d820b612.svg) no-repeat
}

.ns-note .magSetting__layoutSelect .is-active .renewal-p-icon--magLayoutGrid {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_mag-layout_grid_active-612b6ff052d40f31a267bcb6b41c80bcebf8d29d129ba3fce313d6e06b7a136a.svg) no-repeat
}

.ns-note .magSetting__layoutSelect .is-active .renewal-p-icon--magLayoutFeed {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_mag-layout_feed_active-0a15f633b6b0123245bad9507444fa8716d2e1555c729c00d074769e5e8b0a78.svg) no-repeat
}

.ns-note .renewal-p-icon--searchS {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_20_search-2ea47470360a86d0f90a5c6fd3b3c1f4f41622fc7ffa9e29a151973568930d17.svg) no-repeat
}

.ns-note .renewal-p-icon--searchS.is-active {
    background: url(https://d2l930y2yx77uc.cloudfront.net/images/renewal/icon_20_search_active.svg) no-repeat
}

.ns-note .renewal-p-icon--follow {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_follow-5c21ee8c50a863f0d8d81867776c8d209c84868e98739f981f245c0e8aa0de7a.svg) no-repeat
}

.ns-note .renewal-p-icon--following {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_following-84c509a00b4c5da1d5228082c3d8c8615890d92d030f277d37004c1e19a4561d.svg) no-repeat
}

.ns-note .renewal-p-icon--notification {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_notification-8d3ad008212d7ab5372a8c6efae717fd0f273e6f19ac92781c8eb2a0b14850d8.svg) no-repeat
}

.ns-note .renewal-p-icon--notification.is-active {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_notification_active-20424e1cb5904745befbc11c929bdb15afc4ff7847343413186646be464fa1c8.svg) no-repeat
}

.ns-note .renewal-p-icon--search {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_search-ecd6e84558c1939f3fcf34ada31bbbaac1228158c2b1fccc779c290affbe52ef.svg) no-repeat
}

.ns-note .renewal-p-icon--search.is-active {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_search_active-f0798bd86c5e3f0a02e720d52519175ba47bd673b2ea2f8611842de123d51c2d.svg) no-repeat
}

.ns-note .renewal-p-icon--home {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_home-b8068a2e70bae0cfe467d9192e4e536dc955fd176e95215d23aead4735baef72.svg) no-repeat
}

.ns-note .renewal-p-icon--searchInput {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_search-input-306e9da9e78721046980288a3096072b6f8ec178533520bc26472ef1f379d156.svg) no-repeat
}

.ns-note .renewal-p-icon--like {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like-9ace4b87a8808781ecabe06eef8dba548ce574923b514cfda30cb7d5490e459f.svg) no-repeat
}

.ns-note .renewal-p-icon--like:hover,
.ns-note .renewal-p-icon--like.is-active {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_active-6191aa37430c737fa3e75b4c6a2c49ed9306d0ae9998c4afe7a4bdcd0d405d12.svg) no-repeat
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-icon--like:hover {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like-9ace4b87a8808781ecabe06eef8dba548ce574923b514cfda30cb7d5490e459f.svg) no-repeat
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-icon--like:hover {
        background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like-9ace4b87a8808781ecabe06eef8dba548ce574923b514cfda30cb7d5490e459f.svg) no-repeat
    }
}

.ns-note .renewal-p-icon--likeSmall {
    width: 12px;
    height: 12px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_s-384ae4fe00e206d1f944ceb3c6874b07dcf2f382141722c4036f30776cbd0205.svg) no-repeat
}

.ns-note .renewal-p-icon--likeSmall.is-active {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_active_s-e3dedae1e25ec77a48d6007fca2e5d31328da733fd5b0e89274d661437951ee1.svg) no-repeat
}

.ns-note .renewal-p-icon--likeOutlineColor {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_red-3707f4df78febe3ebc7e90677528f274621943a587ab21080970caee8a26b7de.svg) no-repeat
}

.ns-note .renewal-p-icon--likeOutlineColor.is-active {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_active-6191aa37430c737fa3e75b4c6a2c49ed9306d0ae9998c4afe7a4bdcd0d405d12.svg) no-repeat
}

.ns-note .renewal-p-icon--likeOutlineSmall {
    width: 12px;
    height: 12px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_outline_s-c425f66a6a8a1b07b962fca761dd13d4849484e7c69d1497299822b83c896213.svg) no-repeat
}

.ns-note .renewal-p-icon--likeOutlineSmall.is-active {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_outline_active_s-3e318b090cdb886cbad52d73bb18f6dd345bd63a2f93b37ccc935891fc4e2651.svg) no-repeat
}

.ns-note .renewal-p-icon--share {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_share-80feb17a6dbd8c4db0a03c99ca26a9b4910cc3436d8c04d1d077c8db247de312.svg) no-repeat
}

.ns-note .renewal-p-icon--addMagazine {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_add-magazine-316e72e8051af7a26332365583af0f1a5380e8f9b8f9d0e85cc7ea395fdc57c5.svg) no-repeat
}

.ns-note .renewal-p-icon--dots {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_dots-f6c0541c648c6e979cdd902952da9a8d5f6e9f8d44c11dd81322ea4cd81a79e9.svg) no-repeat
}

.ns-note .renewal-p-icon--comment {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_comment-faa29dfedeffaa0081ebaebb20bacd4f4774ad629c1b464069450c0797407183.svg) no-repeat
}

.ns-note .renewal-p-icon--commentSmall {
    width: 12px;
    height: 12px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_comment_s-fd328f4c1f7a2760479c8a293dc0bd655f2273ee7657b4a66d136afb5689562b.svg) no-repeat
}

.ns-note .renewal-p-icon--download {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_download-a1113fda04b734f7213be2307df36b6fd54705c797292aff218ef895948298af.svg) no-repeat
}

.ns-note .renewal-p-icon--settings {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_settings-eabe793e36383bdd3e3d68d53682ba66d034f7c6e24d301b66ca50f148d27102.svg) no-repeat
}

.ns-note .renewal-p-icon--facebook {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_facebook-32c870b1687c638567ffd66d69e70680ca7724be2e6f206257cc2fb8e3b62c45.svg) no-repeat
}

.ns-note .renewal-p-icon--twitter {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_twitter-ae00e27e32af9c1290dcbc008d89873933352ffe9f264b80432ae1afe4a28ea4.svg) no-repeat
}

.ns-note .renewal-p-icon--facebookFill {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_facebook_fill-4d69d0d660469c274996a2d18f357652567a3beb27909fd5c5521ecb8f8bcca8.svg) no-repeat
}

.ns-note .renewal-p-icon--twitterFill {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_twitter_fill-56b748e9cc78a4713a8d5409338796b631353fc1fdbaca52e3055432124c0e3c.svg) no-repeat
}

.ns-note .renewal-p-icon--close {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_close-a733f9cc5e0bb84b342d7584e01bed45bb344cb33cb78b3b1935643bcb6bec6c.svg) no-repeat
}

.ns-note .renewal-p-icon--closeBold {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_close_bold-d47a3d5e5eb7a9fbf1e1bfd9f34d6815b53421e31ade96dbcee716e50cc41d65.svg) no-repeat
}

.ns-note .renewal-p-icon--info {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_info-fd2b3ef7b281c68b1b83b442d9bab6cef88b3db46c900e665aa14f71e963ec5e.svg) no-repeat
}

.ns-note .renewal-p-icon--check {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_check-11ebe2afeccd3667e4bc5565f55600e45ce4317038e552ef3377dc32d9cdb8d2.svg) no-repeat
}

.ns-note .renewal-p-icon--cart {
    width: 30px;
    height: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_cart-09550cc546af76eb6d8c2017ac12178e1bb64b3c1af4ea4b2a2a0feb5eab533c.svg) no-repeat
}

.ns-note .renewal-p-icon--officialAccount {
    width: 16px;
    height: 16px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_official_account-e83f07b868d98bdd020651029db489dc29cea6c85b75699213986cd67cae066f.svg) no-repeat
}

.ns-note .renewal-p-icon--addImage {
    width: 40px;
    height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_add-image-6f60cc6622474b684c663873a70601ad2dba969f0d985da3e56ca77af4a12a93.svg) no-repeat
}

.ns-note .renewal-p-icon--delete {
    width: 40px;
    height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_delete-fee7ee4328305b08a32e785225db929b3137ac90d18659f1820f10c65009d6e7.svg) no-repeat
}

.ns-note .renewal-p-icon--deleteWhite {
    width: 40px;
    height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_delete_white-7eadb17448dc8b764d501a15e0e706cddeca3a35619d71aa1da651133e31b11b.svg) no-repeat
}

.ns-note .renewal-p-icon--footerBarFacebook {
    width: 40px;
    height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_footer-bar_facebook-6af72129ef0e8ec64a3530c5324a0fbfb624c08e73f8795a758e2e217aad00b4.svg) no-repeat
}

.ns-note .renewal-p-icon--footerBarTwitter {
    width: 40px;
    height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_footer-bar_twitter-20d11ce657b54631b8522f119c5c0fc4190b418bead4add48f70168f1077f56c.svg) no-repeat
}

.ns-note .renewal-p-icon--footerBarHatena {
    width: 40px;
    height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_footer-bar_hatena-6273fd999c5297a069b405404bacf8264a3f96af429a715c1641fabb6d528498.svg) no-repeat
}

.ns-note .renewal-p-icon--footerBarLine {
    width: 40px;
    height: 40px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_footer-bar_line-88eb450bcb27ce060d6b0a163f9a5990dfcd8e7ff2f7d5672c73b0347901c526.svg) no-repeat
}

.ns-note .renewal-p-icon--sharing {
    width: 24px;
    height: 24px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_sharing-026c4c6bb6b2c670df5cdcd551c12e4542cd8bbc741ee38908a21646c67e294b.svg) no-repeat
}

.ns-note .renewal-p-icon--deleteS {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_delete_s-f347c048516d4b9b96cca65493e6436eba7a7607456cd1626f7d194a4e7ac6c0.svg) no-repeat
}

.ns-note .renewal-p-icon--light {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_light-5247bdba1a04b48872bf95411dc2ceefcc8442e74e9a9616773d9a49e1acf896.svg) no-repeat
}

.ns-note .renewal-p-icon--present {
    width: 20px;
    height: 20px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_present-7661a22aa35a2ef973f31d54c539886784ab8ff71278d8b782b4c1e8d910fa68.svg) no-repeat
}

.ns-note .renewal-p-icon--lock {
    width: 16px;
    height: 16px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_lock-28f8d846e51578f0dc2dd2f982efd65813a0fff148b072643ca191ea792fd5bf.svg) no-repeat
}

.ns-note .renewal-p-icon--magPay {
    width: 16px;
    height: 16px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_mag-pay-3edf827e0a60a7b48eaf6012514877ba047328e94f4b878fb57f56ff03f4229d.svg) no-repeat
}

.ns-note .renewal-p-icon--pin {
    width: 14px;
    height: 14px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_pin-e141a229d361ae9a9e434e34f21da5739176e9dc350ce58170813b13301ec29b.svg) no-repeat
}

.ns-note .renewal-p-icon--amazon {
    width: 14px;
    height: 14px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_amazon-9498b774619b8ebe019d6a7d783a3804debd591d27c01bcb596d526f4159ccfd.svg) no-repeat
}

.ns-note .renewal-p-icon--caretDown {
    width: 14px;
    height: 14px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_caretDown-b1e5c7843d5b6b540f7dea076de41a543d912cec17cb5e34bb68e915541d70f6.svg) no-repeat
}

.ns-note .renewal-p-icon--attention {
    width: 14px;
    height: 14px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_attention-db591184064db1385e2f8c8ec91a5fbd363e5a74e00cdf4dfda5235d5aa99131.svg) no-repeat
}

.ns-note .renewal-p-icon_plus_s {
    width: 14px;
    height: 14px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_plus_s-24c30cae637ad37d0034fba4265faef29370a363ad7f8aff362f7f98be452d9c.svg) no-repeat
}

.ns-note .renewal-p-icon_check_s {
    width: 14px;
    height: 14px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_check_s-b4f52b3abea50bff4dff24b14e41b4d3c5af4ac5d1ac1103648019debf79ad78.svg) no-repeat
}

.ns-note .renewal-p-icon--talknote {
    width: 60px;
    height: 60px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_talknote-0a265de3dfdd6f19b058ecb203290f6895d11220306e7d129eebad91d6215ab0.svg) no-repeat;
    background-size: 100% 100%
}

.ns-note .renewal-p-icon--imagenote {
    width: 60px;
    height: 60px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_imagenote-6cce219d21d1e58c07231d39bea7d96ec0b6d32e37f4c728a142c0ab3f8629f6.svg) no-repeat;
    background-size: 100% 100%
}

.ns-note .renewal-p-icon--textnote {
    width: 60px;
    height: 60px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_textnote-c706fc9c20e7b4a625e16d4376c0b5e9746fea0b57c7d8c9c30950a63f90bcbe.svg) no-repeat;
    background-size: 100% 100%
}

.ns-note .renewal-p-icon--textnote.is-disabled {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_textnote_disabled-1397382890e4a8744f80dd5b176a4b5a9e52bdcae49f9702847ca26511d8dce3.svg)
}

.ns-note .renewal-p-icon--soundnote {
    width: 60px;
    height: 60px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_soundnote-36a7f70fa3a811181cf53891506a24b896118899e3f6c842ae3117e91a35dd3d.svg) no-repeat;
    background-size: 100% 100%
}

.ns-note .renewal-p-icon--soundnote.is-disabled {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_soundnote_disabled-21254ab0d28bd559f904e300bcf09f4a5b2528598e724c3c3d72691ac8a51923.svg)
}

.ns-note .renewal-p-icon--movienote {
    width: 60px;
    height: 60px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_movienote-9eb419297080d9cf800ddb2551af1077ba339fb3afe543f318c611da128db577.svg) no-repeat;
    background-size: 100% 100%
}

.ns-note .renewal-p-icon--playMovie {
    width: 48px;
    height: 54px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_play_movie-6803f6cdff11a5b1f3de22cf2763739641c081306f529ce129eff14594e3044c.svg) no-repeat
}

.ns-note .renewal-p-icon--postNote {
    width: 16px;
    height: 16px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_post_note-e3a56e1d96359d5dba3264135500b5970771e55cc60ceb5206f2de6d22532831.svg) no-repeat
}

.ns-note .renewal-p-icon--eyecatchUpload {
    width: 17px;
    height: 16px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_computer-c79c66727b676a120acd0c33b7e1d811f69b8bbb1bd7d121a5bdc1f109edd9a7.svg) no-repeat
}

.ns-note .renewal-p-icon--stockPhoto {
    width: 19px;
    height: 19px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_image-10ed9ef007c7a0d7ddccb98e298998af9e05a94ade36f368b715090a0b1386b8.svg) no-repeat
}

.ns-note .renewal-p-icon--question {
    width: 14px;
    height: 14px;
    background: #2cb696;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    position: relative;
    cursor: pointer
}

.ns-note .renewal-p-icon--question:after {
    content: '?';
    color: #fff;
    pointer-events: none;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    display: block;
    line-height: 14px
}

.ns-note .renewal-p-icon--question .question-tip {
    width: 220px
}

.ns-note .renewal-p-count {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    z-index: 7;
    top: -6px;
    right: -6px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    width: auto;
    min-width: 16px;
    height: 16px;
    border-radius: 4px;
    background-color: #EA3F60;
    pointer-events: none
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList {
        overflow-y: auto;
        max-height: 100%;
        padding-top: 8px
    }

    .ns-note .renewal-p-mymenuList>li {
        font-size: 14px
    }

    .ns-note .renewal-p-mymenuList>li.renewal-p-mymenuList__item:last-child {
        padding-bottom: 44px
    }
}

.ns-note .renewal-p-mymenuList__item a {
    position: relative;
    display: block;
    padding: 6px 25px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList__item a {
        padding: 10px 25px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList__item:first-child>a {
        padding: 20px 25px 10px 25px
    }
}

.ns-note .renewal-p-mymenuList__item.renewal-p-mymenuList__item--button>a {
    padding: 0.7em 1em
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList__item.renewal-p-mymenuList__item--button>a {
        padding: 1em
    }
}

.ns-note .renewal-p-mymenuList__header {
    display: block;
    color: #787c7b;
    padding: 4px 25px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList__header {
        padding: 8px 25px
    }
}

.ns-note .renewal-p-mymenuList__probanner {
    display: block
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList__probanner {
        margin: 14px 16px;
        border-radius: 4px;
        overflow: hidden !important
    }
}

.ns-note .renewal-p-mymenuList__probannerImage {
    width: 100%;
    vertical-align: top
}

.ns-note .renewal-p-mymenuList__cart {
    float: right;
    margin-top: 4px;
    border-left: rgba(0, 0, 0, 0.05) solid 1px;
    text-align: center
}

.ns-note .renewal-p-mymenuList__cart>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-p-mymenuList__cartIcon {
    margin-left: 4px;
    margin-right: 4px;
    color: #222222 !important
}

.ns-note .renewal-p-mymenuList__span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: normal;
    color: #787c7b
}

.ns-note .renewal-p-mymenuList__item--button {
    padding: 0 10px
}

.ns-note .renewal-p-mymenuList__label {
    position: absolute;
    top: 7px;
    right: 25px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList__label {
        top: 12px
    }
}

.ns-note .renewal-p-mymenuList__onboarding {
    padding: 6px 25px
}

.ns-note .renewal-p-mymenuList__onboardingItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mymenuList__onboardingItem {
        border-top: none;
        padding-top: 0;
        margin-top: 0
    }
}

.ns-note .renewal-p-mymenuList__onboardingLink {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 8px 0 0 !important
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-mymenuList__onboardingLink:hover .c-loadingSpin__onboardingItemLabel {
        color: #787c7b
    }
}

.ns-note .renewal-p-mymenuList__onboardingIcon {
    padding-right: 8px
}

.ns-note .renewal-p-mymenuList__onboardingIconImage {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 4px
}

.ns-note .renewal-p-mymenuList__onboardingIconImage--type_twitter {
    color: #ffffff;
    background-color: #55acee
}

.ns-note .renewal-p-mymenuList__onboardingLabel {
    font-size: 12px
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-mymenuList__onboardingLabel {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList__onboardingLabel {
        font-size: 14px
    }
}

.ns-note .renewal-p-mymenuList__onboardingDescription {
    color: #787c7b;
    font-size: 10px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mymenuList__onboardingDescription {
        font-size: 12px
    }
}

.ns-note .renewal-p-mymenuList__onboardingClose {
    color: #A8ABB1;
    line-height: 1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-mymenuList__onboardingClose {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-mymenuList__onboardingClose:hover {
        color: #787C7B
    }
}

.ns-note .renewal-p-notificationList {
    max-height: 400px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-notificationList {
        max-height: 100%
    }
}

.ns-note .renewal-p-notificationList a {
    color: #222222
}

.ns-note .renewal-p-notificationList a:hover {
    color: #222222
}

.ns-note .renewal-p-notificationList__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-p-notificationList__item:last-child {
    border-bottom: none
}

.ns-note .renewal-p-notificationList__itemInner>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-notificationList__itemInner>a {
        padding: 16px
    }
}

.ns-note .renewal-p-notificationList__itemInner>a:hover {
    position: relative;
    z-index: 5;
    background: #f7f9f9
}

.ns-note .renewal-p-notificationList__link {
    text-decoration: underline
}

.ns-note .renewal-p-notificationList__link:hover {
    text-decoration: none
}

.ns-note .renewal-p-notificationList__userAvatar {
    width: 40px
}

.ns-note .renewal-p-notificationList__magazineCover {
    width: 40px
}

.ns-note .renewal-p-notificationList__magazineCover img {
    width: 30px
}

.ns-note .renewal-p-notificationList__userData {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .renewal-p-notificationList__text {
    font-size: inherit;
    word-break: break-all
}

.ns-note .renewal-p-notificationList__date {
    font-size: 11px;
    color: #787c7b
}

.ns-note .renewal-p-notificationList__noItem {
    text-align: center;
    padding: 25px 0;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-notificationList__noItem {
        padding: 25px 0 70px 0
    }
}

.ns-note .renewal-p-notificationList__moreItem>a {
    font-size: 12px;
    display: block;
    padding: 10px 0 12px 0;
    border-radius: 0 0 4px 4px;
    line-height: 1;
    text-align: center
}

.ns-note .renewal-p-postNote {
    border: 1px solid #e8eceb;
    border-radius: 3px;
    background: #fff
}

.ns-note .renewal-p-postNote>ul {
    padding: 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .renewal-p-postNote__item {
    position: relative;
    margin: 0 20px;
    text-align: center
}

.ns-note .renewal-p-postNote__item>a {
    font-size: 11px;
    color: #787c7b
}

.ns-note .renewal-p-postNote__item>a>span {
    display: block;
    margin-top: 5px
}

.ns-note .renewal-p-postNote .u-borderTop {
    border-top: 1px solid #e8eceb
}

.ns-note .renewal-p-postNote__item.active .renewal-p-postNote__triangleBorder {
    display: block
}

.ns-note .renewal-p-postNote__item .renewal-p-postNote__triangleBorder {
    display: none;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #e8eceb;
    position: absolute;
    left: 50%;
    bottom: -20px;
    margin-left: -8px
}

.ns-note .renewal-p-postNote__item .renewal-p-postNote__triangleBorder:before {
    content: "";
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #fff;
    position: absolute;
    top: -6px;
    left: -8px
}

.ns-note .p-cardItem:before,
.ns-note .p-cardItem:after {
    content: " ";
    display: table
}

.ns-note .p-cardItem:after {
    clear: both
}

.ns-note .p-cardItem__eyecatch {
    margin: 0 0 8px 16px;
    float: right;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    width: 104px;
    height: 104px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cardItem__eyecatch {
        width: 56px;
        height: 56px
    }
}

.ns-note .p-cardItem__eyecatch img {
    width: 100%
}

.ns-note .p-cardItem__eyecatch.is-first {
    float: none;
    border: none;
    height: auto;
    width: auto;
    margin-left: 0;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cardItem__eyecatch.is-first {
        border-radius: 0;
        margin-top: -20px;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 20px
    }
}

.ns-note .p-cardItem__eyecatch.is-first img {
    width: 100%;
    height: auto
}

.ns-note .p-cardItem__eyecatch.is-home {
    float: none;
    border: none;
    height: auto;
    width: auto;
    margin-left: 0;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cardItem__eyecatch.is-home {
        border-radius: 4px;
        margin-top: 0px;
        margin-left: -8px;
        margin-right: -8px;
        margin-bottom: 16px
    }
}

.ns-note .p-cardItem__eyecatch.is-home img {
    width: 100%;
    height: auto
}

.ns-note .p-cardItem__eyecatch--talk.is-home {
    position: relative
}

.ns-note .p-cardItem__eyecatch--talk.is-home:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%
}

.ns-note .p-cardItem__eyecatch--talk.is-home img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

.ns-note .p-cardItem__eyecatch--image.is-first {
    position: relative
}

.ns-note .p-cardItem__eyecatch--image.is-first:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%
}

.ns-note .p-cardItem__eyecatch--image.is-first img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 320px;
    -o-object-fit: cover;
    object-fit: cover
}

.ns-note .p-cardItem__eyecatch--image.is-home {
    position: relative
}

.ns-note .p-cardItem__eyecatch--image.is-home:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.34375%
}

.ns-note .p-cardItem__eyecatch--image.is-home img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 320px;
    -o-object-fit: cover;
    object-fit: cover
}

.ns-note .p-cardItem__eyecatch--movie {
    position: relative;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%
}

.ns-note .p-cardItem__eyecatch--movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ns-note .p-cardItem__imageCount {
    font-size: 12px;
    color: #ffffff;
    border-radius: 4px;
    background-color: rgba(34, 34, 34, 0.7);
    padding: 2px 4px;
    line-height: 1;
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 1;
    font-weight: bold
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cardItem__imageCount {
        font-size: 10px;
        bottom: 0;
        right: 0;
        border-radius: 4px 0 0 0
    }
}

.ns-note .p-cardItem__title {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.04em;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cardItem__title {
        font-size: 16px
    }
}

.ns-note .p-cardItem__status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-cardItem__statusItem {
    position: relative;
    padding-left: 20px;
    margin-right: 16px
}

.ns-note .p-cardItem__statusItem--like {
    color: #EA3F60
}

.ns-note .p-cardItem__statusItem--comment {
    color: #787c7b
}

.ns-note .p-cardItem__statusItem--price {
    color: #41c9b4
}

.ns-note .p-cardItem__statusIcon {
    position: absolute;
    top: 3px;
    left: 0
}

.ns-note .p-cardItem__statusLabel {
    font-size: 14px;
    line-height: 1.5
}

.ns-note .p-cardItem__player {
    padding-right: 120px;
    margin-top: 16px;
    margin-bottom: 16px;
    position: relative;
    pointer-events: auto
}

.ns-note .p-cardItem__player .caption {
    margin-top: 8px
}

.ns-note .p-cardItem__message {
    font-size: 12px;
    line-height: 1.5;
    padding-bottom: 8px;
    margin-bottom: 16px;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cardItem__message {
        padding-bottom: 12px;
        margin-bottom: 0px
    }
}

.ns-note .p-cardItem__description {
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cardItem__description {
        margin-bottom: 8px;
        font-size: 12px
    }
}

.ns-note .renewal-p-cardItem__eyecatch {
    margin: 0 -20px 20px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-cardItem__eyecatch {
        margin: 0 -21px 15px
    }
}

.ns-note .renewal-p-cardItem__eyecatch img {
    width: 100%
}

.ns-note .renewal-p-cardItem__eyecatch--image {
    margin: 0 -20px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-cardItem__eyecatch--image {
        margin: 0 -21px
    }
}

.ns-note .renewal-p-cardItem__eyecatch--movie {
    position: relative;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%
}

.ns-note .renewal-p-cardItem__eyecatch--movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ns-note .renewal-p-cardItem__talknoteImg img {
    width: 100%;
    border-radius: 5px
}

.ns-note .renewal-p-cardItem__imageList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    width: calc(100% + 42px);
    margin: 0 0 0 -21px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-cardItem__imageList {
        margin: 0 0 0 -21px
    }
}

.ns-note .renewal-p-cardItem__imageList>li {
    position: relative;
    margin-right: 1px
}

.ns-note .renewal-p-cardItem__imageList>li:first-child,
.ns-note .renewal-p-cardItem__imageList>li:last-child {
    margin-right: 0
}

.ns-note .renewal-p-cardItem__imageList>li a img {
    width: 63.3888888889px;
    height: 63.3888888889px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-cardItem__imageList>li a img {
        width: 14vw;
        height: 14vw
    }
}

.ns-note .renewal-p-cardItem__imageList.sss {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ns-note .renewal-p-cardItem__imageList.sss>li {
    margin-right: 0
}

.ns-note .renewal-p-cardItem__imageSeparator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    border-top: 1px solid #fff
}

.ns-note .renewal-p-cardItem__soundNote .sound-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ns-note .renewal-p-cardItem__title {
    margin-bottom: 13px;
    font-size: 20px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.04em;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-cardItem__title {
        margin-bottom: 10px
    }
}

.ns-note .renewal-p-cardItem__description {
    font-size: 14px;
    line-height: 1.8
}

.ns-note .p-cardItem__description {
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cardItem__description {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 8px
    }
}

.ns-note .renewal-p-cardItem__more {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #249f80
}

.ns-note .renewal-p-cardItem__more:hover {
    color: #249f80
}

.ns-note .renewal-p-cardItem__hashtag {
    margin-top: 15px
}

.ns-note .renewal-p-cardItem__hashtag>li {
    display: inline-block;
    margin-right: 10px
}

.ns-note .renewal-p-cardItem__hashtag>li:last-child {
    margin-right: 0
}

.ns-note .renewal-p-cardItem__hashtag a {
    font-size: 12px;
    color: #249f80
}

.ns-note .renewal-p-cardItem__hashtag a:hover {
    color: #249f80
}

.ns-note .renewal-p-cardNotification {
    color: #787c7b;
    margin: 0 0 16px;
    font-size: 12px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-cardNotification {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 12px
    }
}

.ns-note .renewal-p-cardNotification content-link {
    display: inline-block
}

.ns-note .renewal-p-cardNotification a {
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-cardNotification a:hover {
        text-decoration: underline
    }
}

.ns-note .renewal-p-timelineLimited {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.ns-note .renewal-p-timelineLimited dd {
    margin-left: auto
}

.ns-note .renewal-p-timelineLimited__mr {
    margin-right: 3px
}

.ns-note .renewal-p-timelineLimited__number {
    font-size: 13px;
    font-family: Open Sans, sans-serif;
    font-weight: 400
}

.ns-note .renewal-p-timelineLimited__slash {
    padding: 0 3px
}

.ns-note .renewal-p-action>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-p-action>ul>li {
    position: relative;
    margin-right: 35px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-action>ul>li {
        margin-right: 25px
    }
}

.ns-note .renewal-p-action>ul>li>a {
    cursor: pointer
}

.ns-note .renewal-p-action .tooltip {
    z-index: 1
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-action .tooltip {
        display: none !important
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-action .tooltip {
        display: none !important
    }
}

.ns-note .renewal-p-action__icon {
    display: inline-block;
    vertical-align: middle
}

.ns-note .renewal-p-action__like {
    cursor: pointer
}

.ns-note .renewal-p-action__like.is-active>.renewal-p-action__icon>.renewal-p-icon--like {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_active-6191aa37430c737fa3e75b4c6a2c49ed9306d0ae9998c4afe7a4bdcd0d405d12.svg) no-repeat
}

.ns-note .renewal-p-action__like.is-active>.renewal-p-action__count,
.ns-note .renewal-p-action__like.is-active .p-action__count {
    color: #EA3F60
}

.ns-note .renewal-p-action__count {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 0 5px 5px;
    font-family: Open Sans, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #787c7b
}

.ns-note .renewal-p-action__count:hover {
    color: #787c7b
}

.ns-note .renewal-p-action__comment {
    margin-right: 0 !important;
    margin-left: auto
}

.ns-note .renewal-p-action__comment>a,
.ns-note .renewal-p-action__comment>*>a {
    font-size: 12px;
    color: #249f80
}

.ns-note .renewal-p-action__comment>a:hover,
.ns-note .renewal-p-action__comment>*>a:hover {
    color: #249f80
}

.ns-note .renewal-p-action__social {
    margin-right: 0 !important;
    margin-left: auto
}

.ns-note .renewal-p-action__admin {
    cursor: pointer;
    color: #A8ABB1
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-action__admin {
        margin-left: 8px
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-action__admin .c-icon {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-action__admin .c-icon:hover {
        color: #787C7B
    }
}

.ns-note .renewal-p-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff
}

.ns-note .renewal-p-overlay--avatarCreator {
    width: 110px;
    height: 110px;
    border-radius: 110px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-overlay--avatarCreator {
        width: 70px;
        height: 70px
    }
}

.ns-note .renewal-p-overlay--imagenote {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 63.3888888889px;
    height: 63.3888888889px;
    font-family: Open Sans, sans-serif
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-overlay--imagenote {
        width: 14vw;
        height: 14vw
    }
}

.ns-note .renewal-p-overlay--imagenote span {
    display: block;
    text-align: center;
    font-weight: 400;
    line-height: 1.1
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-overlay--imagenote span {
        font-weight: 400
    }
}

.ns-note .renewal-p-overlay--imagenote span:first-child {
    margin-bottom: 2px;
    font-size: 18px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-overlay--imagenote span:first-child {
        font-size: 14px
    }
}

.ns-note .renewal-p-overlay--imagenote span:last-child {
    font-size: 10px;
    letter-spacing: 0.05em
}

.ns-note .renewal-p-mag {
    overflow-x: hidden;
    width: 100%;
    margin-top: -20px;
    background: #fff
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mag {
        margin-top: -11px
    }
}

.ns-note .renewal-p-mag__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .18;
    background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0) 70%, #222 100%);
    background: linear-gradient(to bottom, rgba(34, 34, 34, 0) 70%, #222 100%)
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mag__overlay {
        background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0) 50%, #222 100%);
        background: linear-gradient(to bottom, rgba(34, 34, 34, 0) 50%, #222 100%)
    }
}

.ns-note .renewal-p-mag__title {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 5;
    width: 100%;
    max-width: 940px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.ns-note .renewal-p-mag__title>h1 {
    font-size: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.3px;
    line-height: 1.4;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(34, 34, 34, 0.2)
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mag__title>h1 {
        font-size: 20px
    }
}

.ns-note .renewal-p-mag__title>h1>span {
    margin: 0 0 0 5px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__title {
        bottom: 20px;
        left: 0;
        padding: 0 20px;
        width: 100%;
        margin-left: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.ns-note .renewal-p-mag__pocCopy {
    position: absolute;
    top: 50%;
    z-index: 5;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
    text-align: center
}

.ns-note .renewal-p-mag__pocCopy>h1 {
    font-size: 40px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.3px;
    line-height: 1.4;
    color: #fff;
    font-weight: normal
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mag__pocCopy>h1 {
        font-size: 20px
    }
}

.ns-note .renewal-p-mag__pocCopy>h1>br {
    display: block
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mag__pocCopy>h1>br {
        display: block
    }
}

.ns-note .renewal-p-mag__pocCopy>p {
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    margin-top: 5px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mag__pocCopy>p {
        font-size: 12px
    }
}

.ns-note .renewal-p-mag__nav {
    position: relative;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__nav {
        display: none;
        margin-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        border-bottom: none
    }
}

.ns-note .renewal-p-mag__nav.is-tabletSp {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__nav.is-tabletSp {
        display: block
    }
}

.ns-note .renewal-p-mag__nav select {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.ns-note .renewal-p-mag__nav .renewal-p-mag__categorySelect {
    width: 128px
}

.ns-note .renewal-p-mag__nav .renewal-p-mag__archiveSelect {
    width: 70px
}

.ns-note .renewal-p-mag__statusIcon {
    margin-left: 4px;
    display: inline-block
}

.ns-note .renewal-p-mag__navInner {
    position: relative;
    max-width: 940px;
    height: 70px;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: hidden
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__navInner {
        height: 50px;
        margin: 0
    }
}

.ns-note .renewal-p-mag__navInner ul {
    padding-bottom: 5px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch
}

.ns-note .renewal-p-mag__navInner ul li {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap
}

.ns-note .renewal-p-mag__navInner ul li>a {
    display: block;
    padding: 25px 20px 24px 20px;
    font-size: 13px;
    border-bottom: 2px solid transparent
}

.ns-note .renewal-p-mag__navInner ul li>a:hover {
    font-weight: normal;
    color: #222;
    border-bottom: 2px solid #222
}

.ns-note .renewal-p-mag__navInner ul li>a.is-active {
    font-weight: bold;
    color: #222;
    border-bottom: 2px solid #222
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__navInner ul li>a {
        padding: 15px 10px;
        font-size: 12px
    }
}

.ns-note .renewal-p-mag__navInner ul li>form {
    padding: 10px
}

.ns-note .renewal-p-mag__navInner ul li:first-child {
    padding-left: 0
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__navInner ul li:first-child {
        padding-left: 20px
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__navInner--full {
        width: 100%
    }

    .ns-note .renewal-p-mag__navInner--full .renewal-p-mag__navGradient {
        display: none
    }
}

.ns-note .renewal-p-mag__navGradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 70px;
    background: -webkit-linear-gradient(right, #fff 0, rgba(255, 255, 255, 0));
    background: linear-gradient(270deg, #fff 0, rgba(255, 255, 255, 0))
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__navGradient {
        width: 40px;
        height: 50px
    }
}

.ns-note .renewal-p-magSide__navButtonSpTablet {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__navButtonSpTablet {
        display: inline-block;
        margin-left: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.ns-note .renewal-p-magSide__setting {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__setting {
        display: inline-block;
        position: relative
    }
}

.ns-note .renewal-p-magSide__settingPopup {
    position: absolute;
    width: auto
}

.ns-note .renewal-p-magSide__action {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__action {
        display: inline-block;
        margin-left: 12px
    }
}

.ns-note .renewal-p-mag__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    max-width: 940px;
    margin: 0 auto;
    padding: 40px 0;
    background: #fff
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__content {
        display: block;
        width: 100%;
        padding: 0
    }
}

.ns-note .renewal-p-mag__content .renewal-p-mag__mainWrap {
    display: block
}

.ns-note .renewal-p-mag__content .renewal-p-mag__sideWrap {
    display: block;
    margin-left: auto
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__content .renewal-p-mag__sideWrap {
        margin-left: none
    }
}

.ns-note .renewal-p-mag__main {
    width: 610px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__main {
        width: 100%;
        padding: 20px
    }
}

.ns-note .renewal-p-mag__headline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 7px
}

.ns-note .renewal-p-mag__headline>a {
    margin-left: auto
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__headline {
        display: none
    }
}

.ns-note .renewal-p-mag__soundCv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .renewal-p-magLayoutList,
.ns-note .renewal-p-magLayoutGrid {
    margin-bottom: 32px
}

.ns-note .renewal-p-magLayoutList .mejs-container,
.ns-note .renewal-p-magLayoutGrid .mejs-container {
    margin-bottom: 10px
}

.ns-note .renewal-p-magLayoutList>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-p-magLayoutList>li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magLayoutList>li {
        margin-bottom: 15px;
        padding-bottom: 15px
    }

    .ns-note .renewal-p-magLayoutList>li:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none
    }
}

.ns-note .renewal-p-magLayoutList>li>a {
    display: block
}

.ns-note .renewal-p-magLayoutList .renewal-p-magLayoutList__img {
    width: 140px;
    height: 140px;
    margin-right: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 5px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magLayoutList .renewal-p-magLayoutList__img {
        width: 80px;
        height: 80px
    }
}

.ns-note .renewal-p-magLayoutList .renewal-p-magLayoutList__img img {
    position: relative;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.ns-note .renewal-p-magLayoutList .renewal-p-magLayoutList__img.type-textNote img,
.ns-note .renewal-p-magLayoutList .renewal-p-magLayoutList__img.type-soundNote img,
.ns-note .renewal-p-magLayoutList .renewal-p-magLayoutList__img.type-movieNote img {
    width: auto;
    height: 100%
}

.ns-note .renewal-p-magLayoutList .renewal-p-magLayoutList__img.page-searchResult {
    margin-right: 0;
    margin-left: 20px
}

.ns-note .renewal-p-magLayoutList__img {
    position: relative
}

.ns-note .renewal-p-magLayoutList__img .renewal-p-icon--playMovie {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.ns-note .renewal-p-magLayoutList__content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .renewal-p-magLayoutList__title {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: bold;
    word-break: break-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0em
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magLayoutList__title {
        margin-bottom: 5px;
        font-size: 16px
    }
}

.ns-note .renewal-p-magLayoutList__title>a:hover {
    color: #222222
}

.ns-note .renewal-p-magLayoutList__description {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.8;
    word-break: break-all;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ns-note .renewal-p-magLayoutList__description a {
    color: #249f80
}

.ns-note .renewal-p-magLayoutList__description a:hover {
    color: #249f80
}

.ns-note .renewal-p-magLayoutList__avatar {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #787c7b;
    word-break: break-all
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magLayoutList__avatar {
        font-size: 12px
    }
}

.ns-note .renewal-p-magLayoutList__avatar:hover {
    color: #787c7b
}

.ns-note .renewal-p-magLayoutList__date {
    display: block;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magLayoutList__date {
        font-size: 10px
    }
}

.ns-note .renewal-p-magLayoutList__date:hover {
    color: #787c7b
}

.ns-note .renewal-p-magLayoutList__subInformation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.ns-note .renewal-p-magLayoutList__subInformation>div:nth-child(2) {
    margin-left: auto;
    white-space: nowrap
}

.ns-note .renewal-p-magLayoutList__artistName {
    margin-bottom: 10px;
    font-size: 13px
}

.ns-note .renewal-p-magLayoutList__auditionText {
    margin: 5px 0 10px 0;
    font-size: 11px;
    text-align: center;
    color: #787c7b
}

.ns-note .renewal-p-magLayoutList__payTalknote {
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    background: #f7f9f9
}

.ns-note .renewal-p-magLayoutList__payTalknote>p {
    color: #787c7b
}

.ns-note .renewal-p-magLayoutGrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magLayoutGrid {
        display: block
    }
}

.ns-note .renewal-p-magLayoutGrid>li {
    display: block;
    width: calc(50% - 25px);
    margin-bottom: 50px
}

.ns-note .renewal-p-magLayoutGrid>li:nth-child(odd) {
    margin-right: 25px
}

.ns-note .renewal-p-magLayoutGrid>li:nth-child(even) {
    margin-left: 25px
}

.ns-note .renewal-p-magLayoutGrid>li:last-child {
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magLayoutGrid>li {
        width: 100%;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05)
    }

    .ns-note .renewal-p-magLayoutGrid>li:nth-child(odd) {
        margin-right: 0
    }

    .ns-note .renewal-p-magLayoutGrid>li:nth-child(even) {
        margin-left: 0
    }

    .ns-note .renewal-p-magLayoutGrid>li:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none
    }
}

.ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__img {
    width: 280px;
    height: 160px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 5px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__img {
        width: 100%;
        height: 190px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__img {
        width: 100%;
        height: 190px
    }
}

.ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__img img {
    position: relative;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__img.type-textNote img,
.ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__img.type-talkNote img,
.ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__img.type-soundNote img,
.ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__img.renewal-p-noImageGridHeightFull img {
    width: auto;
    height: 100%
}

.ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__youtube {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden
}

.ns-note .renewal-p-magLayoutGrid .renewal-p-magLayoutList__youtube img {
    width: 100%
}

.ns-note .renewal-p-mag__side {
    width: 280px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__side {
        width: 100%;
        margin-top: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05)
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-mag__sideInner {
        padding: 20px 20px 0 20px
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__cvArea {
        position: fixed;
        bottom: 0;
        z-index: 10;
        width: 100%
    }

    .ns-note .renewal-p-magSide__cvArea .renewal-p-magSideButton {
        height: 60px;
        border-radius: 0
    }
}

.ns-note .renewal-p-magSide__cvInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
    font-size: 13px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__cvInfo {
        display: none
    }
}

.ns-note .renewal-p-magSide__cvInfo>dd {
    margin-left: auto;
    text-align: right
}

.ns-note .renewal-p-magSide__cvInfo:last-child {
    margin-bottom: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-p-magSide__titleWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.ns-note .renewal-p-magSide__title {
    font-size: 13px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 0 16px 0;
    padding: 6px 0 0 0
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__title {
        display: none
    }
}

.ns-note .renewal-p-magSide__description {
    margin-bottom: 24px;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ns-note .renewal-p-magSide__description>a {
    color: #249f80
}

.ns-note .renewal-p-magSide__description>a:hover {
    color: #249f80
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__description {
        margin-bottom: 16px
    }
}

.ns-note .renewal-p-magSide__appealMessage {
    margin-bottom: 24px;
    background-color: #f7f9f9;
    padding: 16px;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ns-note .renewal-p-magSide__appealMessage>a {
    color: #249f80
}

.ns-note .renewal-p-magSide__appealMessage>a:hover {
    color: #249f80
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__appealMessage {
        margin-bottom: 16px
    }
}

.ns-note .renewal-p-magSide__numberBlock {
    margin-bottom: 15px;
    font-size: 12px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__numberBlock {
        display: none
    }
}

.ns-note .renewal-p-magSide__numberBlock>ul>li {
    display: inline
}

.ns-note .renewal-p-magSide__numberBlock>ul>li:after {
    content: "｜"
}

.ns-note .renewal-p-magSide__numberBlock>ul>li:last-child:after {
    content: ""
}

.ns-note .renewal-p-magSide__numberBlock>ul>li>span {
    color: #787c7b
}

.ns-note .renewal-p-magSide__numberBlock>ul strong {
    font-weight: bold
}

.ns-note .renewal-p-magSide__numberBlock>ul>a {
    color: #249f80
}

.ns-note .renewal-p-magSide__numberBlock>ul>a:hover {
    color: #249f80
}

.ns-note .renewal-p-magSide__avatar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #787c7b
}

.ns-note .renewal-p-magSide__avatar:hover {
    color: #787c7b
}

.ns-note .renewal-p-magSide__avatar>img {
    margin-right: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magSide__avatar>img {
        margin-right: -8px;
        margin-bottom: 0;
        border: 2px solid #fff
    }
}

.ns-note .renewal-p-magSide__avatar>img:last-child {
    margin-right: 0
}

.ns-note .renewal-p-magSide__avatar>p {
    word-break: break-all;
    -ms-flex-negative: 3;
    flex-shrink: 3
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magSide__avatar>p {
        width: 170px;
        margin-left: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
}

.ns-note .renewal-p-magSide__avatar.is-jointlyManaged>img {
    margin-bottom: 8px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__avatar.is-jointlyManaged>img {
        margin-bottom: 0
    }
}

.ns-note .renewal-p-magSide__itemBlock {
    margin-bottom: 16px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__itemBlock {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.ns-note .renewal-p-magSide__itemBlockButton {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__itemBlockButton {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        margin-left: auto
    }
}

.ns-note .renewal-p-magSide__payButton {
    margin-bottom: 20px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__payButton {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__payButton.is-Subscribed {
        display: none
    }
}

.ns-note .renewal-p-magSide__settingsButton,
.ns-note .renewal-p-magSide__followButton {
    margin-bottom: 20px
}

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

    .ns-note .renewal-p-magSide__settingsButton,
    .ns-note .renewal-p-magSide__followButton {
        display: none;
        margin-bottom: 0
    }
}

.ns-note .renewal-p-magSide__nav {
    display: block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__nav {
        display: none
    }
}

.ns-note .renewal-p-magSide__nav>li {
    margin-bottom: 25px
}

.ns-note .renewal-p-magSide__nav dl>dt {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: bold
}

.ns-note .renewal-p-magSide__nav dl>dd {
    line-height: 2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ns-note .renewal-p-magSide__sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -6px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSide__sns {
        display: none
    }
}

.ns-note .renewal-p-magSide__sns>li {
    cursor: pointer
}

.ns-note .renewal-p-magSideButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-p-magSideButton__text {
    margin: 0 auto;
    text-align: center
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSideButton__text {
        margin: 0
    }
}

.ns-note .renewal-p-magSideButton__price {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magSideButton__price {
        display: block;
        margin-left: auto
    }
}

.ns-note .magSetting .mod-form-note {
    border-radius: 3px 3px 0px 0px
}

.ns-note .magSetting__cover {
    position: relative;
    width: 100%;
    height: 178px;
    overflow: hidden
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__cover {
        overflow: hidden;
        height: 167px
    }
}

.ns-note .magSetting__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 34, 34, 0.5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .magSetting__overlay {
        -webkit-transition: background-color 200ms cubic-bezier(1, 0, 0, 1);
        transition: background-color 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .magSetting__overlay:hover {
        background-color: rgba(34, 34, 34, 0.8)
    }
}

.ns-note .magSetting__overlayLabel {
    display: block;
    font-size: 14px;
    margin-top: 8px;
    font-weight: bold;
    color: #ffffff;
    pointer-events: none
}

.ns-note .magSetting__overlayCamera {
    color: #ffffff
}

.ns-note .magSetting__coverImg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__coverImg {
        width: 150%;
        -webkit-transform: translate(-15%, 0);
        transform: translate(-15%, 0)
    }
}

.ns-note .magSetting__title {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 20px
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__title {
        padding: 20px 20px 10px 20px
    }
}

.ns-note .magSetting__title textarea {
    height: 1.5em;
    min-height: 1.5em;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-all;
    border: none;
    background: none;
    overflow: hidden;
    color: #fff;
    resize: none
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__title textarea {
        height: 2.7em;
        min-height: 2.7em;
        font-size: 15px
    }
}

.ns-note .magSetting__title textarea:focus {
    border: none
}

.ns-note .magSetting__layoutSelect {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__layoutSelect {
        display: block
    }
}

.ns-note .magSetting__layoutSelect>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 30px;
    cursor: pointer
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__layoutSelect>li {
        margin-right: 0;
        margin-bottom: 10px
    }

    .ns-note .magSetting__layoutSelect>li:last-child {
        margin-bottom: 0
    }
}

.ns-note .magSetting__layoutSelect>li>i {
    margin-right: 3px
}

.ns-note .magSetting__layoutSelect>li.is-active {
    font-weight: bold;
    color: #249f80
}

.ns-note .magSetting__coverInput {
    display: none
}

.ns-note .magSetting__coverAction {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .magSetting__coverDelete {
    padding: 8px;
    cursor: pointer;
    color: #ffffff
}

@media only screen and (min-width: 769px) {
    .ns-note .magSetting__coverDelete {
        -webkit-transition: opacity 200ms cubic-bezier(1, 0, 0, 1);
        transition: opacity 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .magSetting__coverDelete:hover {
        opacity: 0.5
    }
}

.ns-note .magSetting__subscribe {
    margin-top: -20px;
    padding: 0 40px 40px 40px;
    background: #fff
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__subscribe {
        padding: 0 10px 10px 10px
    }
}

.ns-note .magSetting__subscribeInner {
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__subscribeInner {
        padding-top: 24px
    }
}

.ns-note .magSetting__subscribeInnerTitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__subscribeInnerTitle {
        font-size: 14px;
        margin-bottom: 8px
    }
}

.ns-note .magSetting__subscribeInnerDescription {
    font-size: 14px;
    margin-bottom: 40px
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__subscribeInnerDescription {
        margin-bottom: 24px
    }
}

.ns-note .magSetting__subscribeEmpty {
    font-size: 16px;
    margin-bottom: 40px
}

.ns-note .magSetting__subscribeEmpty a {
    color: #2CB696
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__subscribeEmpty {
        padding-top: 10px
    }
}

.ns-note .magSetting__subscribeFooter {
    margin: 20px -40px -40px -40px
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting__subscribeFooter {
        margin: 20px -10px -10px -10px
    }
}

.ns-note .magSetting__txtOption {
    color: #787c7b;
    font-size: 12px;
    font-weight: normal
}

.ns-note .magSetting--new {
    width: 580px;
    margin-left: -100px
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting--new {
        width: 300px;
        margin-left: 0
    }
}

.ns-note .magSetting--new .mag-dataList {
    padding: 0 40px 40px 40px;
    margin-top: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting--new .mag-dataList {
        padding: 0 10px 20px 10px
    }

    .ns-note .magSetting--new .mag-dataList>li {
        margin-bottom: 15px
    }
}

.ns-note .magSetting--new .mag-dataList__subscribeEmpty {
    font-size: 14px;
    padding-top: 8px;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting--new .mag-dataList__subscribeEmpty {
        font-size: 12px
    }
}

.ns-note .magSetting--new .mag-dataList__subscribeEmpty a {
    color: #2CB696
}

.ns-note .magSetting--new .magSetting__cover {
    top: 40px;
    width: calc(100% - 80px);
    height: 178px;
    margin: 0 40px 60px 40px
}

@media only screen and (max-width: 479px) {
    .ns-note .magSetting--new .magSetting__cover {
        top: 0;
        width: calc(100% - 20px);
        height: 149px;
        margin: 10px
    }
}

.ns-note .magSetting--new .magSetting__coverUpload {
    top: 10px;
    right: 10px
}

.ns-note .renewal-p-soundUi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .renewal-p-soundUi__img {
    width: 140px
}

.ns-note .renewal-p-soundUi__img img {
    width: 100%
}

.ns-note .renewal-p-soundUi__content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .renewal-p-archiveDetailList {
    margin-left: 1em
}

.ns-note .renewal-p-archiveDetailList>li>a {
    color: #787c7b
}

.ns-note .renewal-p-mag__main .renewal-c-card {
    width: 100%;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #e8eceb
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mag__main .renewal-c-card {
        margin-bottom: 25px
    }
}

.ns-note .renewal-p-mag__main .renewal-c-card__head {
    padding: 0 0 15px 0
}

.ns-note .renewal-p-mag__main .renewal-c-card__body {
    padding: 0 0 30px 0
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-mag__main .renewal-c-card__body {
        padding-bottom: 25px
    }
}

.ns-note .renewal-p-mag__main .renewal-p-cardItem__eyecatch {
    margin: 0 0 20px 0
}

.ns-note .renewal-p-magAbout {
    width: 100%;
    margin-bottom: 30px
}

.ns-note .renewal-p-magAbout__body>p {
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magAbout__body>p {
        margin-bottom: 15px
    }
}

.ns-note .renewal-p-magAbout__body>p:last-child {
    margin-bottom: 0
}

.ns-note .renewal-p-magAbout__body>p img {
    width: 100%
}

.ns-note .renewal-p-magAbout__body>p a {
    color: #222;
    text-decoration: underline
}

.ns-note .renewal-p-magAbout__body>p a:hover {
    color: #222;
    text-decoration: none
}

.ns-note .renewal-p-magAbout__body>h3 {
    font-size: 18px;
    margin-bottom: 7px
}

.ns-note .renewal-p-magAbout__eyecatch {
    margin-bottom: 20px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magAbout__eyecatch {
        margin-bottom: 15px
    }
}

.ns-note .renewal-p-magAbout__eyecatch img {
    width: 100%
}

.ns-note .renewal-p-magAbout__title>h3 {
    margin-bottom: 13px;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magAbout__title>h3 {
        margin-bottom: 10px
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-widgetList {
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-widgetList>ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding: 0 30px 30px 30px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-widgetList>ul {
        padding: 10px
    }
}

.ns-note .renewal-p-widgetList>ul>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 10px;
    margin-bottom: 20px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-widgetList>ul>li {
        min-width: 280px;
        margin-bottom: 0
    }

    .ns-note .renewal-p-widgetList>ul>li:last-child .renewal-p-widget--amazon {
        margin-right: 10px
    }
}

.ns-note .renewal-p-widgetList>ul>li>amazon-widget {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .renewal-p-widget {
    display: block;
    border: 1px solid #e8eceb;
    border-radius: 3px;
    background: #fff
}

.ns-note .renewal-p-widget a {
    color: inherit
}

.ns-note .renewal-p-widget a:hover {
    color: inherit
}

.ns-note .renewal-p-widget.renewal-p-widget--amazon {
    width: 280px;
    margin: 0 auto
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-widget.renewal-p-widget--amazon {
        position: relative;
        padding-bottom: 30px
    }
}

.ns-note .renewal-p-widget.renewal-p-widget--amazon .renewal-p-widget__img {
    overflow: hidden;
    height: 200px;
    padding: 10px
}

.ns-note .renewal-p-widget__img {
    width: 100%;
    height: 100%
}

.ns-note .renewal-p-widget__img img {
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.ns-note .renewal-p-widget__img img.type-book {
    border: 1px solid #e8eceb
}

.ns-note .renewal-p-widget__img.renewal-p-widget__img--verticallyLong img {
    width: auto;
    height: 100%
}

.ns-note .renewal-p-widget__img.renewal-p-widget__img--horizontallyLong img {
    width: 100%;
    height: auto
}

.ns-note .renewal-p-widget__info {
    padding: 15px;
    border-top: 1px solid #e8eceb
}

.ns-note .renewal-p-widget__title {
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    color: #222
}

.ns-note .renewal-p-widget__author {
    margin-bottom: 5px;
    font-size: 12px;
    color: #787c7b
}

.ns-note .renewal-p-widget__url {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 11px;
    color: #787c7b
}

.ns-note .renewal-p-widget__url>i {
    margin-right: 5px
}

.ns-note .renewal-p-widget__other {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-widget__other {
        position: absolute;
        bottom: 0;
        width: calc(100% - 40px);
        padding: 15px 0
    }
}

.ns-note .renewal-p-widget__edit {
    position: relative;
    margin: -5px 0 -5px auto
}

.ns-note .renewal-p-heroHeader {
    position: relative;
    display: table;
    width: 200%;
    table-layout: fixed
}

.ns-note .renewal-p-heroHeader--movie {
    display: block;
    width: 100%
}

.ns-note .renewal-p-heroHeader__img {
    position: relative;
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    overflow: hidden;
    background-size: cover;
    background-position: center
}

.ns-note .renewal-p-heroHeader__substituteImage {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-heroHeader__substituteImage {
        height: 400px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-heroHeader__substituteImage {
        height: 200px
    }
}

.ns-note .renewal-p-heroHeader__movie {
    position: relative;
    overflow: hidden;
    max-height: 500px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-heroHeader__movie {
        max-height: 400px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-heroHeader__movie {
        max-height: 200px
    }
}

.ns-note .renewal-p-heroHeader__movie video {
    width: 100%;
    min-width: 1200px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-heroHeader__movie video {
        width: 100%;
        min-width: 768px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-heroHeader__movie video {
        width: 100%;
        min-width: 320px
    }
}

.ns-note .renewal-p-heroHeader__movie .renewal-p-mag__overlay {
    opacity: .4
}

.ns-note .renewal-p-heroHeader__table {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: table
}

.ns-note .renewal-p-heroHeader__table--creator {
    min-height: auto
}

.ns-note .renewal-p-heroHeader__tableInner {
    display: table-cell;
    vertical-align: middle;
    width: 100%
}

.ns-note .renewal-p-heroHeader__aspectRatioCell {
    display: table-cell;
    width: 50%;
    vertical-align: top
}

.ns-note .renewal-p-heroHeader__aspectRatioFull {
    display: block;
    max-height: 700px
}

.ns-note .renewal-p-heroHeader__aspectRatioFull:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 35.5%
}

.ns-note .renewal-p-heroHeader__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5
}

.ns-note .renewal-p-heroHeader__edit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.ns-note .renewal-p-heroHeader__edit>p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff
}

.ns-note .renewal-p-heroHeader__delete {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-heroHeader__delete {
        top: 10px;
        right: 10px
    }
}

.ns-note .renewal-p-creator {
    width: 100%;
    margin-top: -20px;
    background: #fff
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator {
        margin-top: -10px
    }
}

.ns-note .renewal-p-creator__header {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 35.10vw;
    max-height: 700px
}

.ns-note .renewal-p-creator__headerOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-creator__headerOverlay:before {
        -webkit-transition: background-color 200ms cubic-bezier(1, 0, 0, 1);
        transition: background-color 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-creator__headerOverlay:hover:before {
        background-color: rgba(34, 34, 34, 0.8)
    }
}

.ns-note .renewal-p-creator__headerOverlay:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(34, 34, 34, 0.5);
    z-index: -1;
    pointer-events: none
}

.ns-note .renewal-p-creator__headerDelete {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 16px;
    cursor: pointer;
    color: #ffffff
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-creator__headerDelete {
        -webkit-transition: opacity 200ms cubic-bezier(1, 0, 0, 1);
        transition: opacity 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-creator__headerDelete:hover {
        opacity: 0.5
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__headerDelete {
        top: 0;
        right: 0
    }
}

.ns-note .renewal-p-creator__headerLabel {
    display: block;
    font-size: 14px;
    margin-top: 8px;
    font-weight: bold;
    color: #ffffff;
    pointer-events: none
}

.ns-note .renewal-p-creator__headerCamera {
    color: #ffffff
}

.ns-note .renewal-p-creator__headerImg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.ns-note .renewal-p-creator__form {
    width: 100%;
    position: relative;
    z-index: 1
}

.ns-note .renewal-p-creator__container {
    background: #ffffff
}

.ns-note .renewal-p-creator__profile {
    position: relative;
    padding-left: 128px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__profile {
        padding-left: 0;
        padding-top: 56px
    }
}

.ns-note .renewal-p-creator__nickname {
    position: relative;
    padding-left: 128px;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__nickname {
        padding-left: 0;
        padding-top: 56px
    }
}

.ns-note .renewal-p-creator__avatar {
    position: absolute;
    left: 0;
    top: -16px;
    width: 104px;
    overflow: visible;
    z-index: 2;
    cursor: pointer
}

.ns-note .renewal-p-creator__avatar:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border: 4px solid #ffffff;
    pointer-events: none;
    border-radius: 50%
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__avatar {
        width: 80px;
        top: -40px
    }
}

.ns-note .renewal-p-creator__overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(34, 34, 34, 0.5);
    color: #fff;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 120px;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-creator__overlay {
        -webkit-transition: background-color 200ms cubic-bezier(1, 0, 0, 1);
        transition: background-color 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-creator__overlay:hover {
        background-color: rgba(34, 34, 34, 0.8)
    }
}

.ns-note .renewal-p-creator__content {
    max-width: 940px;
    margin: 0 auto;
    padding: 32px 0
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-creator__content {
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-creator__content {
        padding: 32px 24px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__content {
        padding: 16px
    }
}

.ns-note .renewal-p-creator__content--none_header {
    padding-top: 48px;
    padding-bottom: 48px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-creator__content--none_header {
        padding-top: 32px;
        padding-bottom: 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__content--none_header {
        padding-top: 56px;
        padding-bottom: 16px
    }
}

.ns-note .renewal-p-creator__contentInner {
    position: relative;
    width: 100%
}

.ns-note .renewal-p-creator__editNickname {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5;
    width: 100% !important;
    height: auto !important;
    padding: 8px 16px !important;
    border-color: #E8ECEB !important;
    border-radius: 4px
}

.ns-note .renewal-p-creator__editNickname:focus {
    border-color: #3BC49D !important
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__editNickname {
        font-size: 16px !important
    }
}

.ns-note .renewal-p-creator__editProfile {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    width: 100% !important;
    height: auto !important;
    padding: 8px 16px !important;
    border-color: #E8ECEB !important;
    border-radius: 4px;
    height: 90px !important
}

.ns-note .renewal-p-creator__editProfile:focus {
    border-color: #3BC49D !important
}

.ns-note .renewal-p-creator__editAction {
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.ns-note .renewal-p-creator__editButton {
    text-align: right;
    margin-left: 8px
}

.ns-note .renewal-p-creator__name {
    font-size: 22px;
    line-height: 1.5
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__name {
        font-size: 16px
    }
}

.ns-note .renewal-p-creator__name>i {
    display: inline-block
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__name>i {
        vertical-align: text-top
    }
}

.ns-note .renewal-p-creator__biography {
    font-size: 14px;
    line-height: 1.5;
    font-weight: normal;
    margin-bottom: 16px;
    padding-left: 128px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__biography {
        padding-left: 0;
        margin-bottom: 8px
    }
}

.ns-note .renewal-p-creator__biography a {
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-creator__biography a:hover {
        text-decoration: none
    }
}

.ns-note .renewal-p-creator__action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__action {
        position: absolute;
        top: 0;
        right: 0
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__action--none_header {
        top: -16px
    }
}

.ns-note .renewal-p-creator__actionItem {
    position: relative;
    margin-left: 16px;
    white-space: nowrap
}

.ns-note .renewal-p-creator__actionIcon {
    color: #A8ABB1
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-creator__actionIcon {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-creator__actionIcon:hover {
        color: #787C7B
    }
}

.ns-note .renewal-p-creator__actionPopover {
    right: -2px;
    top: 130%;
    width: auto
}

.ns-note .renewal-p-creator__status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 128px;
    margin-top: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__status {
        padding-left: 0;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.ns-note .renewal-p-creator__follow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap
}

.ns-note .renewal-p-creator__follow:after {
    font-size: 14px;
    color: #787c7b;
    content: "・";
    margin-right: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__follow:after {
        display: none
    }
}

.ns-note .renewal-p-creator__followItem {
    margin-right: 8px
}

.ns-note .renewal-p-creator__followLink {
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-creator__followLink {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-creator__followLink:hover {
        color: #222222
    }
}

.ns-note .renewal-p-creator__followCount {
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
    color: #222222
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__followCount {
        font-size: 14px
    }
}

.ns-note .renewal-p-creator__followLabel {
    font-size: 14px;
    line-height: 1.5
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__followLabel {
        font-size: 12px
    }
}

.ns-note .renewal-p-creator__sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .renewal-p-creator__snsIcon {
    margin-right: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__snsIcon {
        margin-right: 0;
        margin-left: 8px
    }
}

.ns-note .renewal-p-creator__snsLink {
    color: #A8ABB1
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-creator__snsLink {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .renewal-p-creator__snsLink:hover {
        color: #787C7B
    }
}

.ns-note .renewal-p-creator__nav {
    max-width: 940px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-p-creator__nav>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .renewal-p-creator__nav>ul a {
    display: block;
    padding: 25px 20px 24px
}

.ns-note .renewal-p-creator__search {
    margin-bottom: 20px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-creator__search {
        margin: 0 10px 10px
    }
}

.ns-note .renewal-p-creator__archiveSelect {
    width: 100%;
    height: 40px
}

.ns-note .renewal-p-creator.editMode {
    height: 100vh
}

.ns-note .renewal-p-creator.editMode .renewal-p-creator__profile {
    margin-bottom: 16px
}

.ns-note .renewal-p-customNav {
    width: 100%;
    background: #fff
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-customNav {
        border-top: 1px solid rgba(0, 0, 0, 0.05)
    }
}

.ns-note .renewal-p-customNav select {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.ns-note .renewal-p-customNav .renewal-p-customNav__categorySelect {
    width: 128px
}

.ns-note .renewal-p-customNav .renewal-p-customNav__archiveSelect {
    width: 70px
}

.ns-note .renewal-p-customNav__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 940px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-customNav__inner {
        width: calc(100% - 60px)
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-customNav__inner {
        width: 100%;
        border-top: none
    }
}

.ns-note .renewal-p-customNav__nav {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    height: 67px;
    overflow-x: hidden;
    overflow-y: hidden
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-customNav__nav {
        height: 51px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-customNav__nav {
        height: 46px
    }
}

.ns-note .renewal-p-customNav__nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch
}

.ns-note .renewal-p-customNav__nav ul li {
    white-space: nowrap
}

.ns-note .renewal-p-customNav__nav ul li a {
    display: block;
    padding: 24px 20px 22px 20px;
    font-size: 13px;
    border-bottom: 2px solid transparent
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-customNav__nav ul li a {
        padding: 16px 15px 14px 15px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-customNav__nav ul li a {
        padding: 14px 15px 12px 15px;
        font-size: 12px
    }
}

.ns-note .renewal-p-customNav__nav ul li a:hover {
    font-weight: normal;
    color: #222;
    border-bottom: 2px solid #222
}

.ns-note .renewal-p-customNav__nav ul li a.is-active {
    font-weight: bold;
    color: #222;
    border-bottom: 2px solid #222
}

.ns-note .renewal-p-customNav__nav ul li:last-child {
    padding-right: 50px
}

.ns-note .renewal-p-customNav__nav ul li:last-child>a {
    margin-right: 160px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-customNav__nav ul li:last-child>a {
        margin-right: 40px
    }
}

.ns-note .renewal-p-customNav__nav ul li.is-lastArchive {
    padding-right: 0
}

.ns-note .renewal-p-customNav__gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 70px;
    background: -webkit-linear-gradient(right, #fff 0, rgba(255, 255, 255, 0));
    background: linear-gradient(270deg, #fff 0, rgba(255, 255, 255, 0))
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-customNav__gradient {
        width: 40px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-customNav__gradient {
        height: 51px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-customNav__gradient {
        height: 46px
    }
}

.ns-note .renewal-p-customNav__search a {
    display: block;
    padding: 24px 20px 22px 20px;
    font-size: 12px;
    border-bottom: 2px solid transparent
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-customNav__search a {
        padding: 16px 15px 14px 15px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-customNav__search a {
        padding: 14px 15px 12px 15px
    }
}

.ns-note .renewal-p-customNav__search a:hover,
.ns-note .renewal-p-customNav__search a.is-active {
    border-bottom: 2px solid #222
}

.ns-note .renewal-p-customNav__search i {
    max-height: 19px;
    overflow: hidden
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-customNav__search i {
        max-height: 18px
    }
}

.ns-note .p-magList__price {
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 4px;
    color: #2CB696;
    font-weight: bold
}

.ns-note .p-magList__price.is-purchased {
    color: #ccc
}

.ns-note .p-magList__follower {
    font-size: 12px;
    color: #787c7b;
    margin: 15px
}

.ns-note .renewal-p-magList--store,
.ns-note .renewal-p-magList {
    width: 100%
}

.ns-note .renewal-p-magList--store>ul,
.ns-note .renewal-p-magList>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

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

    .ns-note .renewal-p-magList--store>ul,
    .ns-note .renewal-p-magList>ul {
        padding: 0 30px 30px 30px
    }
}

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

    .ns-note .renewal-p-magList--store>ul,
    .ns-note .renewal-p-magList>ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0 15px 15px 15px
    }
}

.ns-note .renewal-p-magList--store>ul>li,
.ns-note .renewal-p-magList>ul>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(50% - 10px);
    margin: 0 10px 20px 0
}

.ns-note .renewal-p-magList--store>ul>li:nth-child(even),
.ns-note .renewal-p-magList>ul>li:nth-child(even) {
    margin: 0 0 20px 10px
}

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

    .ns-note .renewal-p-magList--store>ul>li,
    .ns-note .renewal-p-magList>ul>li {
        width: calc(50% - 30px);
        margin: 0 15px 30px 0
    }

    .ns-note .renewal-p-magList--store>ul>li:nth-child(even),
    .ns-note .renewal-p-magList>ul>li:nth-child(even) {
        margin: 0 0 30px 15px
    }
}

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

    .ns-note .renewal-p-magList--store>ul>li,
    .ns-note .renewal-p-magList>ul>li {
        width: 100%;
        margin: 0 0 15px 0
    }

    .ns-note .renewal-p-magList--store>ul>li:nth-child(even),
    .ns-note .renewal-p-magList>ul>li:nth-child(even) {
        margin: 0 0 15px 0
    }
}

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

    .ns-note .renewal-p-magList--creator.renewal-p-magList--store,
    .ns-note .renewal-p-magList.renewal-p-magList--creator {
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }
}

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

    .ns-note .renewal-p-magList--creator.renewal-p-magList--store>ul,
    .ns-note .renewal-p-magList.renewal-p-magList--creator>ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }
}

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

    .ns-note .renewal-p-magList--creator.renewal-p-magList--store>ul,
    .ns-note .renewal-p-magList.renewal-p-magList--creator>ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin: 0 10px 10px 10px;
        padding: 0
    }
}

.ns-note .renewal-p-magList--creator.renewal-p-magList--store>ul>li,
.ns-note .renewal-p-magList.renewal-p-magList--creator>ul>li {
    width: 100%;
    margin: 0 0 20px 0
}

.ns-note .renewal-p-magList--creator.renewal-p-magList--store>ul>li:nth-child(even),
.ns-note .renewal-p-magList.renewal-p-magList--creator>ul>li:nth-child(even) {
    margin: 0 0 20px 0
}

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

    .ns-note .renewal-p-magList--creator.renewal-p-magList--store>ul>li,
    .ns-note .renewal-p-magList.renewal-p-magList--creator>ul>li {
        width: 70vw;
        min-width: 280px;
        margin: 0
    }

    .ns-note .renewal-p-magList--creator.renewal-p-magList--store>ul>li:nth-child(even),
    .ns-note .renewal-p-magList.renewal-p-magList--creator>ul>li:nth-child(even) {
        margin: 0
    }

    .ns-note .renewal-p-magList--creator.renewal-p-magList--store>ul>li:last-child,
    .ns-note .renewal-p-magList.renewal-p-magList--creator>ul>li:last-child {
        margin: 0
    }
}

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

    .ns-note .renewal-p-magList--creator.renewal-p-magList--store>ul>li.renewal-p-magList__magazinesCount1,
    .ns-note .renewal-p-magList.renewal-p-magList--creator>ul>li.renewal-p-magList__magazinesCount1 {
        width: 70%
    }
}

.ns-note .renewal-p-magList--creator.renewal-p-magList--store .renewal-p-magList__item,
.ns-note .renewal-p-magList.renewal-p-magList--creator .renewal-p-magList__item {
    position: relative;
    width: 100%
}

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

    .ns-note .renewal-p-magList--creator.renewal-p-magList--store .renewal-p-magList__item,
    .ns-note .renewal-p-magList.renewal-p-magList--creator .renewal-p-magList__item {
        margin-right: 10px
    }
}

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

    .ns-note .renewal-p-magList--magazines.renewal-p-magList--store>ul,
    .ns-note .renewal-p-magList.renewal-p-magList--magazines>ul {
        padding: 0
    }
}

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

    .ns-note .renewal-p-magList--magazines.renewal-p-magList--store>ul,
    .ns-note .renewal-p-magList.renewal-p-magList--magazines>ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0
    }
}

.ns-note .renewal-p-magList--magazines.renewal-p-magList--store>ul>li,
.ns-note .renewal-p-magList.renewal-p-magList--magazines>ul>li {
    width: calc(50% - 10px);
    margin: 0 10px 20px 0
}

.ns-note .renewal-p-magList--magazines.renewal-p-magList--store>ul>li:nth-child(even),
.ns-note .renewal-p-magList.renewal-p-magList--magazines>ul>li:nth-child(even) {
    margin: 0 0 20px 10px
}

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

    .ns-note .renewal-p-magList--magazines.renewal-p-magList--store>ul>li,
    .ns-note .renewal-p-magList.renewal-p-magList--magazines>ul>li {
        width: calc(50% - 10px);
        margin: 0 10px 20px 0
    }

    .ns-note .renewal-p-magList--magazines.renewal-p-magList--store>ul>li:nth-child(even),
    .ns-note .renewal-p-magList.renewal-p-magList--magazines>ul>li:nth-child(even) {
        margin: 0 0 20px 10px
    }
}

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

    .ns-note .renewal-p-magList--magazines.renewal-p-magList--store>ul>li,
    .ns-note .renewal-p-magList.renewal-p-magList--magazines>ul>li {
        width: 100%;
        margin: 0 0 10px 0
    }

    .ns-note .renewal-p-magList--magazines.renewal-p-magList--store>ul>li:nth-child(even),
    .ns-note .renewal-p-magList.renewal-p-magList--magazines>ul>li:nth-child(even) {
        margin: 0 0 10px 0
    }
}

.ns-note .renewal-p-magList__item {
    position: relative;
    padding-bottom: 60px;
    width: 100%;
    background: #fff;
    border: 1px solid #e8eceb;
    border-radius: 3px
}

.ns-note .renewal-p-magList--creator .renewal-p-magList__item {
    padding-bottom: 50px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-magList--creator .renewal-p-magList__item {
        padding-bottom: 60px
    }
}

.ns-note .renewal-p-magList--magazines .renewal-p-magList__item {
    padding-bottom: 50px;
    width: 100%
}

.ns-note .renewal-p-magList__cover {
    position: relative;
    overflow: hidden;
    border-radius: 3px 3px 0px 0px
}

.ns-note .renewal-p-magList__cover img {
    width: 100%
}

.ns-note .renewal-p-magList__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 3px 3px 0px 0px;
    background: #000;
    opacity: .18;
    background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0) 50%, #222 100%);
    background: linear-gradient(to bottom, rgba(34, 34, 34, 0) 50%, #222 100%)
}

.ns-note .renewal-p-magList__body {
    position: absolute;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(100% - 30px);
    margin: 0 15px;
    padding: 15px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .renewal-p-magList--creator .renewal-p-magList__body {
    padding: 10px 0
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-magList--creator .renewal-p-magList__body {
        padding: 15px 0
    }
}

.ns-note .renewal-p-magList--magazines .renewal-p-magList__body {
    padding: 10px 0
}

.ns-note .renewal-p-magList__description {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 15px;
    word-break: break-all
}

.ns-note .renewal-p-magList__description>p {
    font-size: 12px;
    line-height: 1.7
}

.ns-note .renewal-p-magList__description>p a:hover {
    color: #222222
}

.ns-note .renewal-p-magList__follower {
    margin: 15px;
    font-size: 12px;
    color: #787c7b
}

.ns-note .renewal-p-magList--creator .renewal-p-magList__description>p {
    font-size: 11px;
    line-height: 1.7
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-magList--creator .renewal-p-magList__description>p {
        font-size: 12px
    }
}

.ns-note .renewal-p-magList--magazines .renewal-p-magList__description>p {
    font-size: 11px;
    line-height: 1.7
}

.ns-note .renewal-p-magList__avatar {
    width: calc(100% - 90px)
}

.ns-note .renewal-p-magList__avatar>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .renewal-p-magList__avatar img {
    margin-right: 8px
}

.ns-note .renewal-p-magList__avatar p {
    font-size: 11px;
    color: #787c7b;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList__avatar p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
}

.ns-note .renewal-p-magList__avatarList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .renewal-p-magList__avatarList ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}

.ns-note .renewal-p-magList__avatarList ul li {
    margin-right: -8px
}

.ns-note .renewal-p-magList__avatarList ul li img {
    border: 2px solid #fff
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList__avatarList ul li {
        margin-right: -10px
    }
}

.ns-note .renewal-p-magList__avatarList ul li:last-child {
    margin-right: 0
}

.ns-note .renewal-p-magList__avatarList ul li:nth-child(1) {
    z-index: 6
}

.ns-note .renewal-p-magList__avatarList ul li:nth-child(2) {
    z-index: 5
}

.ns-note .renewal-p-magList__avatarList ul li:nth-child(3) {
    z-index: 4
}

.ns-note .renewal-p-magList__avatarList ul li:nth-child(4) {
    z-index: 3
}

.ns-note .renewal-p-magList__avatarList ul li:nth-child(5) {
    z-index: 2
}

.ns-note .renewal-p-magList__avatarList ul li:nth-child(6) {
    z-index: 1
}

.ns-note .renewal-p-magList__avatarList ul li.renewal-p-magList__more {
    background-color: #f7f9f9;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
    color: #787c7b
}

.ns-note .renewal-p-magList__setting {
    position: absolute;
    top: 8px;
    right: 8px;
    -ms-flex-item-align: auto;
    -ms-grid-row-align: auto;
    align-self: auto;
    z-index: 2;
    width: 32px
}

.ns-note .renewal-p-magList__settingLink {
    color: #ffffff;
    width: 32px;
    height: 32px;
    background-color: rgba(34, 34, 34, 0.2);
    border-radius: 50%;
    position: absolute;
    display: block
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-magList__settingLink:hover {
        -webkit-transition: background-color 200ms cubic-bezier(1, 0, 0, 1);
        transition: background-color 200ms cubic-bezier(1, 0, 0, 1);
        background-color: rgba(34, 34, 34, 0.5)
    }
}

.ns-note .renewal-p-magList__settingIcon {
    position: absolute;
    top: 8px;
    right: 8px
}

.ns-note .renewal-p-magList__title {
    position: absolute;
    bottom: 16px;
    left: 50%;
    z-index: 5;
    width: calc(100% - 30px);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.ns-note .renewal-p-magList__title>p {
    font-size: 16px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.3px;
    line-height: 1.4;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(34, 34, 34, 0.3)
}

.ns-note .renewal-p-magList__title>p>span {
    display: inline-block;
    vertical-align: text-bottom
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-magList__title>p {
        font-size: 14px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList__title>p {
        font-size: 14px
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-magList__title {
        bottom: 15px;
        left: 0;
        padding: 0 15px;
        width: 100%;
        margin-left: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList__title {
        bottom: 20px;
        left: 0;
        padding: 0 15px;
        width: 100%;
        margin-left: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.ns-note .renewal-p-magList--creator .renewal-p-magList__title {
    bottom: 15px
}

.ns-note .renewal-p-magList--creator .renewal-p-magList__title>p {
    font-size: 14px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-magList--creator .renewal-p-magList__title {
        bottom: 20px
    }
}

.ns-note .renewal-p-magList--magazines .renewal-p-magList__title {
    bottom: 10px
}

.ns-note .renewal-p-magList--magazines .renewal-p-magList__title>p {
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList--magazines .renewal-p-magList__title {
        bottom: 20px
    }
}

.ns-note .renewal-p-magList__button {
    min-width: 90px;
    height: 28px;
    margin-left: auto;
    text-align: right
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-magList__more>a {
        margin-right: 10px;
        width: 100%
    }
}

.ns-note .renewal-p-magList__create {
    position: relative;
    background: #fff;
    border: 1px solid #e8eceb;
    border-radius: 3px
}

.ns-note .renewal-p-magList__create:before {
    content: "";
    display: block;
    padding-top: 49%
}

.ns-note .renewal-p-magList__create:hover {
    border-color: #dedede
}

.ns-note .renewal-p-magList__create:only-child {
    display: block
}

.ns-note .renewal-p-magList__createInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center
}

.ns-note .renewal-p-magList__createElement {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.ns-note .renewal-p-magList__createElement>i {
    margin: 0 auto 10px auto
}

.ns-note .renewal-p-magList__createElement>p {
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList--store>ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.ns-note .renewal-p-magList--store>ul>li {
    width: calc(25% - 15px);
    margin: 0 20px 20px 0
}

.ns-note .renewal-p-magList--store>ul>li:nth-child(even) {
    margin: 0 20px 20px 0
}

.ns-note .renewal-p-magList--store>ul>li:nth-child(4n) {
    margin-right: 0
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .renewal-p-magList--store>ul>li {
        width: calc(33.3% - 14px)
    }

    .ns-note .renewal-p-magList--store>ul>li:nth-child(4n) {
        margin-right: 20px
    }

    .ns-note .renewal-p-magList--store>ul>li:nth-child(3n) {
        margin-right: 0
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList--store>ul>li {
        width: calc(50% - 8px);
        margin: 0 15px 15px 0
    }

    .ns-note .renewal-p-magList--store>ul>li:nth-child(even) {
        margin: 0 15px 15px 0
    }

    .ns-note .renewal-p-magList--store>ul>li:nth-child(2n) {
        margin-right: 0
    }

    .ns-note .renewal-p-magList--store>ul>li:nth-child(4n) {
        margin-right: 0
    }
}

.ns-note .renewal-p-magList--store .renewal-p-magList__item {
    padding-bottom: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList--store .renewal-p-magList__cover img {
        width: 100%
    }
}

.ns-note .renewal-p-magList__itemBody {
    padding: 15px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList__itemBody {
        padding: 10px
    }
}

.ns-note .renewal-p-magList__itemName {
    font-size: 13px;
    margin-bottom: 5px;
    line-height: 1.4
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList__itemName {
        font-size: 12px
    }
}

.ns-note .renewal-p-magList__itemPrice {
    font-size: 13px;
    line-height: 1.4;
    font-weight: bold
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-magList__itemPrice {
        font-size: 12px
    }
}

.ns-note .renewal-p-addHeroHeader {
    width: 100%;
    height: 110px;
    background: #000;
    opacity: .5;
    cursor: pointer;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.ns-note .renewal-p-addHeroHeader>p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff
}

.ns-note .renewal-p-pin {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 6px;
    margin-top: -22px;
    color: #787c7b
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-pin {
        margin-top: 0
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-pin {
        margin-left: 10px
    }
}

.ns-note .renewal-p-pin>p {
    font-size: 11px
}

.ns-note .renewal-p-pin>i {
    margin-right: 3px
}

.ns-note .renewal-p-infoModal {
    box-shadow: none
}

.ns-note .renewal-p-infoModal___body {
    padding: 40px 25px
}

.ns-note .renewal-p-infoModal__title {
    margin-bottom: 5px
}

.ns-note .renewal-p-infoModal__title>p {
    font-size: 13px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ns-note .renewal-p-infoModal__description {
    margin-bottom: 10px
}

.ns-note .renewal-p-infoModal__description>p {
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.02em
}

.ns-note .renewal-p-infoModal__creatorName {
    margin-bottom: 15px
}

.ns-note .renewal-p-infoModal__creatorName>p {
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #787c7b
}

.ns-note .renewal-p-infoModal__number {
    margin-bottom: 15px
}

.ns-note .renewal-p-infoModal__number>p {
    font-size: 12px
}

.ns-note .renewal-p-infoModal__number>p>span:after {
    content: "｜";
    margin: 0 7px;
    color: #787c7b
}

.ns-note .renewal-p-infoModal__number>p>span:last-child {
    margin-right: 0
}

.ns-note .renewal-p-infoModal__number>p>span:last-child:after {
    content: "";
    margin: 0
}

.ns-note .renewal-p-infoModal__number>p strong {
    font-weight: bold
}

.ns-note .renewal-p-infoModal__sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -6px
}

.ns-note .renewal-p-infoModal__sns>li {
    margin-right: 7px
}

.ns-note .renewal-p-infoModal__sns>li:last-child {
    margin-right: 0
}

.ns-note .renewal-p-infoModal__close {
    position: absolute;
    top: 10px;
    right: 10px
}

.ns-note .renewal-p-postNoteFromNavBarList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 32px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-postNoteFromNavBarList {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 32px 0 0
    }

    .ns-note .renewal-p-postNoteFromNavBarList:after {
        content: "";
        display: block;
        width: 33%
    }
}

.ns-note .renewal-p-postNoteFromNavBarList__item {
    margin-right: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-postNoteFromNavBarList__item {
        width: 33%;
        margin: 0;
        padding-bottom: 24px
    }
}

.ns-note .renewal-p-postNoteFromNavBarList__item:last-child {
    margin: 0
}

.ns-note .renewal-p-postNoteFromNavBarList__item.is-disabled {
    pointer-events: none;
    cursor: default
}

.ns-note .renewal-p-postNoteFromNavBarList__item.is-disabled>a>span {
    color: #ccc
}

.ns-note .renewal-p-postNoteFromNavBarList__item>a {
    font-size: 11px
}

.ns-note .renewal-p-postNoteFromNavBarList__item>a>div {
    margin-left: auto;
    margin-right: auto
}

.ns-note .renewal-p-postNoteFromNavBarList__item>a>span {
    display: block;
    margin: 16px 0 0 0;
    font-size: 14px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-postNoteFromNavBarList__item>a>span {
        margin-top: 8px
    }
}

.ns-note .renewal-p-postNoteFromNavBarList__item>a:hover>span {
    color: #209274
}

.ns-note .renewal-p-postNoteFromNavBarList__item .renewal-p-icon {
    width: 50px;
    height: 50px;
    background-size: 50px
}

.ns-note .renewal-p-modalHeader {
    position: relative;
    width: 580px;
    margin-left: -90px;
    padding: 15px 0;
    background: #fff;
    border: 1px solid #e1e5e7;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-modalHeader {
        width: auto;
        margin-left: auto
    }
}

.ns-note .renewal-p-modalHeader>p {
    font-size: 16px;
    font-weight: bold
}

.ns-note .renewal-p-modalHeader>i {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer
}

.ns-note .galleyModal {
    background: transparent !important
}

.ns-note .galleyModal .popeye-modal {
    width: 100% !important;
    margin-top: 0;
    margin-bottom: 0
}

.ns-note #my-gallery-container .renewal-p-galleryLayout {
    margin-top: -20px;
    width: auto;
    height: auto;
    min-height: 100vh
}

@media only screen and (max-width: 479px) {
    .ns-note #my-gallery-container .renewal-p-galleryLayout {
        margin-top: -10px
    }
}

.ns-note #my-gallery-container .renewal-p-galleryLayout__close {
    display: none
}

.ns-note #instagram-image-gallery-container .renewal-p-galleryLayout__search {
    right: 30px
}

.ns-note .renewal-p-galleryLayout {
    width: 100vw;
    height: 100vh;
    background: #f7f9f9;
    overflow: auto;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    opacity: 1
}

.ns-note .renewal-p-galleryLayout__header {
    background: #fff;
    width: 100%;
    padding: 0 25px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 1px solid #e6e6e6
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-galleryLayout__header {
        position: -webkit-sticky;
        position: sticky;
        top: -84px;
        padding: 0;
        z-index: 1
    }
}

.ns-note .renewal-p-galleryLayout__title {
    width: 100%;
    height: 80px;
    margin-bottom: -1px;
    text-align: center;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #e6e6e6
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-galleryLayout__title {
        height: auto;
        margin-left: 16px;
        margin-right: 16px;
        padding: 16px 0;
        text-align: left;
        border-bottom: none
    }
}

.ns-note .renewal-p-galleryLayout__title h2 {
    font-size: 18px;
    display: block
}

.ns-note .renewal-p-galleryLayout__title p {
    margin-top: 6px
}

.ns-note .renewal-p-galleryLayout__title:last-child {
    border-bottom: none
}

.ns-note .renewal-p-galleryLayout__titleText {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.ns-note .renewal-p-galleryLayout__close {
    margin-left: 16px;
    padding: 4px;
    color: #A8ABB1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-galleryLayout__close:hover {
        color: #787C7B
    }
}

.ns-note .renewal-p-galleryLayout__menu {
    position: relative;
    width: 100%;
    height: 54px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-galleryLayout__menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: vertical;
        flex-direction: vertical
    }
}

.ns-note .renewal-p-galleryLayout__menu>div {
    width: 100%
}

.ns-note .renewal-p-galleryLayout__search {
    position: absolute;
    top: 11px;
    right: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-galleryLayout__search {
        position: relative;
        top: auto;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8px;
        padding-left: 16px;
        padding-right: 16px
    }
}

.ns-note .renewal-p-galleryLayout__uploadButton {
    position: absolute;
    left: 0
}

.ns-note .renewal-p-galleryLayout__uploadButton a {
    font-size: 13px
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-galleryLayout__uploadButton {
        display: none
    }
}

.ns-note .renewal-p-galleryLayout__category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    overflow-y: hidden;
    height: 100%
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-galleryLayout__category {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        padding: 0 8px
    }
}

.ns-note .renewal-p-galleryLayout__category>li>a {
    padding: 21px 13px 17px 13px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-galleryLayout__category>li>a {
        display: block;
        padding: 16px 8px 14px
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .renewal-p-galleryLayout__category>li>a:hover {
        color: #222222;
        border-bottom: 2px solid #222222
    }
}

.ns-note .renewal-p-galleryLayout__category>li.active>a {
    font-weight: bold;
    border-bottom: 2px solid #222;
    color: #222
}

.ns-note .renewal-p-galleryLayout__masonry {
    position: relative;
    margin: 10px 10px 0
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem {
    display: block;
    cursor: pointer
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem.ag-clone {
    position: absolute
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem>img {
    width: 100%
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem .renewal-p-galleryLayout__masonryItemMask {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 0;
    -webkit-transition: 0.2s;
    transition: 0.2s
}

@media only screen and (max-width: 768px) {
    .ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem .renewal-p-galleryLayout__masonryItemMask {
        display: none
    }
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem .renewal-p-galleryLayout__masonryItemCreator {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(100% - 20px)
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem .renewal-p-galleryLayout__masonryItemCreator img {
    margin-right: 8px
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem .renewal-p-galleryLayout__masonryItemCreator p {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(100% - 38px)
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem .renewal-p-galleryLayout__masonryItemCreator p span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 21px)
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem .renewal-p-galleryLayout__masonryItemCreator p span:last-child {
    width: 100%
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem .renewal-p-galleryLayout__masonryItemCreator p i {
    margin-left: 5px
}

.ns-note .renewal-p-galleryLayout__masonry>.renewal-p-galleryLayout__masonryItem:hover .renewal-p-galleryLayout__masonryItemMask {
    opacity: 1
}

.ns-note .renewal-p-galleryLayout__modalMask {
    z-index: 11;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 0;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    text-align: center;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease
}

.ns-note .renewal-p-galleryLayout__modalMask::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.ns-note .renewal-p-galleryLayout__modalMask.ng-leave {
    -webkit-transition: all ease 300ms;
    transition: all ease 300ms
}

.ns-note .renewal-p-galleryLayout__modalMask.ng-leave.ng-leave-active {
    opacity: 0
}

.ns-note .renewal-p-galleryLayout__modalMask.ng-enter {
    -webkit-transition: all ease 300ms;
    transition: all ease 300ms;
    opacity: 0
}

.ns-note .renewal-p-galleryLayout__modalMask.ng-enter.ng-enter-active {
    opacity: 1
}

.ns-note .renewal-p-galleryLayout__modalMask.close-disabled {
    pointer-events: none
}

.ns-note .renewal-p-galleryLayout__form {
    display: inline-block
}

.ns-note .renewal-p-galleryLayout__modalBase {
    max-height: none;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    display: inline-block;
    text-align: left
}

@media only screen and (max-width: 479px) {
    .ns-note .renewal-p-galleryLayout__modalBase {
        max-width: 340px
    }
}

.ns-note .modal-window.renewal-p-galleryLayout__modal {
    width: 580px;
    background: #fff
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .modal-image {
    padding: 30px 30px 0 30px
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable {
    padding: 0px 30px 0 30px
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable table {
    width: 100%
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr {
    height: 52px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr:last-child {
    border: none
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableNameRow td {
    padding: 17px 0
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableCreatorRow ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableCreatorRow ul li:first-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableCreatorRow ul li:first-child img {
    margin-right: 9px
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableCreatorRow ul li:first-child i {
    margin-left: 5px
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableCreatorRow ul li:last-child {
    font-size: 11px
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableCreatorRow ul li:last-child a {
    color: #249f80
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableKeywordRow td {
    padding: 13px 0 7px 0
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableKeywordRow ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableKeywordRow ul .hashtag {
    margin: 0 5px 5px 0
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableKeywordRow ul .hashtag a {
    height: 25px;
    line-height: 23px;
    color: #898D8C;
    background: #F2F4F4;
    border-radius: 4px;
    padding: 0 8px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableKeywordRow ul .hashtag a:hover {
    color: #898D8C;
    background: #EAECEC
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableStatusRow li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableStatusRow li label {
    margin: 0 10px 0px 0px;
    overflow: initial
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableStatusRow li label span {
    vertical-align: middle
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableTermsRow label {
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable tr.renewal-p-galleryLayout__modalTableTermsRow label input[type="checkbox"] {
    margin-top: 0
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable th {
    font-size: 12px;
    font-weight: bold;
    width: 85px;
    vertical-align: middle
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .renewal-p-galleryLayout__modalTable td {
    font-size: 12px;
    vertical-align: middle
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .modal-window__foot li,
.ns-note .modal-window.renewal-p-galleryLayout__modal .modal-window__foot--close li {
    height: 30px
}

.ns-note .modal-window.renewal-p-galleryLayout__modal .modal-window__foot button[disabled],
.ns-note .modal-window.renewal-p-galleryLayout__modal .modal-window__foot--close button[disabled] {
    background: #e1e5e7;
    border: 1px solid #e1e5e7;
    color: #fff;
    cursor: default
}

.ns-note .p-galleryModal {
    margin: -10px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-galleryModal {
        margin: 0
    }
}

.ns-note .p-galleryModal label {
    overflow: visible;
    margin-bottom: 0
}

.ns-note .p-galleryModal__item {
    padding: 15px 0;
    border-bottom: 1px solid #e6e6e6
}

.ns-note .p-galleryModal__item:last-child {
    padding-bottom: 0;
    border-bottom: none
}

.ns-note .p-galleryModal__item>dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-galleryModal__item>dl.p-galleryModal__flexStart {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.ns-note .p-galleryModal__item dt {
    width: 80px;
    font-weight: bold;
    white-space: nowrap
}

.ns-note .p-galleryModal__item dd {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    word-break: break-all
}

.ns-note .p-galleryModal__item dd tags-input {
    margin: 0
}

.ns-note .p-galleryModal__avatarSet a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-galleryModal__avatarSet a img {
    margin-right: 7px
}

.ns-note .p-galleryModal__avatarSet a i {
    margin-left: 5px
}

.ns-note .p-galleryModal__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px 0 0 0;
    border-bottom: none
}

.ns-note .p-galleryModal__label>label {
    margin-right: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-galleryModal__label>label input[type="checkbox"] {
    margin-right: 5px
}

.ns-note .p-galleryModal__checkList>li {
    display: inline-block;
    margin-bottom: 10px
}

.ns-note .p-galleryModal__checkList>li:last-child {
    margin-bottom: 0
}

.ns-note .p-galleryModal__checkList>li>label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.ns-note .p-galleryModal__checkList>li>label input[type="checkbox"] {
    margin-right: 5px
}

.ns-note .p-galleryModal__useHistory>li {
    margin-bottom: 5px
}

.ns-note .p-galleryModal__useHistory>li:last-child {
    margin-bottom: 0
}

.ns-note .p-tag {
    margin-bottom: -8px;
    letter-spacing: -.4em
}

.ns-note .p-tag>li {
    display: inline-block;
    margin: 0 8px 8px 0
}

.ns-note .p-tag>li:last-child {
    margin-right: 0
}

.ns-note .p-tag>li>a {
    font-size: 12px;
    display: block;
    border: 1px solid #f2f4f4;
    border-radius: 4px;
    background: #f2f4f4;
    padding: 4px 10px;
    text-decoration: none;
    letter-spacing: normal;
    color: #787c7b
}

.ns-note .p-tag>li>a:hover {
    border-color: #f2f4f4
}

.ns-note .renewal-p-galleryLayout__sortNav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 15px 10px
}

.ns-note .renewal-p-galleryLayout__sortNav .renewal-c-popover--sortNavAddFooter {
    left: 0
}

.ns-note .renewal-p-galleryLayout__sortButton .p-sortNav>li {
    margin: 0 10px 0 0
}

.ns-note .renewal-p-galleryLayout__sortButton .p-sortNav>li>span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-photoCopyright {
    margin: 0.4em 0 -1.9em 0;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Arial;
    font-style: italic;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.02em;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .p-photoCopyright {
        margin-right: 0.4em;
        font-size: 9px
    }
}

.ns-note .p-photoCopyright a {
    font-weight: bold;
    color: #787c7b
}

.ns-note .p-photoCopyright a:hover {
    color: inherit
}

.ns-note .p-searchForm--bank .angucomplete-holder,
.ns-note .p-searchForm--header .angucomplete-holder,
.ns-note .p-searchForm--gallery .angucomplete-holder,
.ns-note .p-searchForm--basicDropdown .angucomplete-holder,
.ns-note .p-searchForm .angucomplete-holder {
    width: 100%;
    max-width: 360px
}

.ns-note .p-searchForm--bank .angucomplete-holder input,
.ns-note .p-searchForm--header .angucomplete-holder input,
.ns-note .p-searchForm--gallery .angucomplete-holder input,
.ns-note .p-searchForm--basicDropdown .angucomplete-holder input,
.ns-note .p-searchForm .angucomplete-holder input {
    width: 100%;
    padding: 0.4em;
    padding-right: 30px;
    font-size: 12px;
    border: 1px solid #e1e5e7
}

.ns-note .p-searchForm--bank .angucomplete-holder input:focus,
.ns-note .p-searchForm--header .angucomplete-holder input:focus,
.ns-note .p-searchForm--gallery .angucomplete-holder input:focus,
.ns-note .p-searchForm--basicDropdown .angucomplete-holder input:focus,
.ns-note .p-searchForm .angucomplete-holder input:focus {
    border: 1px solid #bdc3c7
}

.ns-note .p-searchForm--bank .angucomplete-dropdown,
.ns-note .p-searchForm--header .angucomplete-dropdown,
.ns-note .p-searchForm--gallery .angucomplete-dropdown,
.ns-note .p-searchForm--basicDropdown .angucomplete-dropdown,
.ns-note .p-searchForm .angucomplete-dropdown {
    width: 280px;
    margin-top: 14px;
    padding: 0;
    border-bottom: none;
    border-left: 1px solid #bdc3c7;
    border-right: 1px solid #bdc3c7;
    border-top: 1px solid #bdc3c7;
    margin-top: -1px
}

.ns-note .p-searchForm--bank .angucomplete-dropdown .angucomplete-row:last-child,
.ns-note .p-searchForm--header .angucomplete-dropdown .angucomplete-row:last-child,
.ns-note .p-searchForm--gallery .angucomplete-dropdown .angucomplete-row:last-child,
.ns-note .p-searchForm--basicDropdown .angucomplete-dropdown .angucomplete-row:last-child,
.ns-note .p-searchForm .angucomplete-dropdown .angucomplete-row:last-child {
    border-bottom: 1px solid #bdc3c7
}

.ns-note .p-searchForm--bank .angucomplete-searching,
.ns-note .p-searchForm--header .angucomplete-searching,
.ns-note .p-searchForm--gallery .angucomplete-searching,
.ns-note .p-searchForm--basicDropdown .angucomplete-searching,
.ns-note .p-searchForm .angucomplete-searching {
    display: none
}

.ns-note .p-searchForm--bank .angucomplete-title,
.ns-note .p-searchForm--header .angucomplete-title,
.ns-note .p-searchForm--gallery .angucomplete-title,
.ns-note .p-searchForm--basicDropdown .angucomplete-title,
.ns-note .p-searchForm--bank .angucomplete-description,
.ns-note .p-searchForm--header .angucomplete-description,
.ns-note .p-searchForm--gallery .angucomplete-description,
.ns-note .p-searchForm--basicDropdown .angucomplete-description,
.ns-note .p-searchForm .angucomplete-title,
.ns-note .p-searchForm .angucomplete-description {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block
}

.ns-note .p-searchForm--bank .angucomplete-official,
.ns-note .p-searchForm--header .angucomplete-official,
.ns-note .p-searchForm--gallery .angucomplete-official,
.ns-note .p-searchForm--basicDropdown .angucomplete-official,
.ns-note .p-searchForm .angucomplete-official {
    position: absolute;
    top: 6px;
    left: 8px
}

.ns-note .p-searchForm--bank .angucomplete-official:before,
.ns-note .p-searchForm--header .angucomplete-official:before,
.ns-note .p-searchForm--gallery .angucomplete-official:before,
.ns-note .p-searchForm--basicDropdown .angucomplete-official:before,
.ns-note .p-searchForm .angucomplete-official:before {
    content: "";
    display: block;
    border: 2px solid #ffffff;
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-radius: 50%
}

.ns-note .p-searchForm--bank .angucomplete-row,
.ns-note .p-searchForm--header .angucomplete-row,
.ns-note .p-searchForm--gallery .angucomplete-row,
.ns-note .p-searchForm--basicDropdown .angucomplete-row,
.ns-note .p-searchForm .angucomplete-row {
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px;
    font-size: 14px;
    color: #787c7b;
    position: relative
}

.ns-note .p-searchForm--bank .angucomplete-header-row,
.ns-note .p-searchForm--header .angucomplete-header-row,
.ns-note .p-searchForm--gallery .angucomplete-header-row,
.ns-note .p-searchForm--basicDropdown .angucomplete-header-row,
.ns-note .p-searchForm .angucomplete-header-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .p-searchForm--bank .angucomplete-selected-row,
.ns-note .p-searchForm--header .angucomplete-selected-row,
.ns-note .p-searchForm--gallery .angucomplete-selected-row,
.ns-note .p-searchForm--basicDropdown .angucomplete-selected-row,
.ns-note .p-searchForm .angucomplete-selected-row {
    background-color: #f7f9f9;
    color: #222222
}

.ns-note .p-searchForm--bank .angucomplete-image-holder,
.ns-note .p-searchForm--header .angucomplete-image-holder,
.ns-note .p-searchForm--gallery .angucomplete-image-holder,
.ns-note .p-searchForm--basicDropdown .angucomplete-image-holder,
.ns-note .p-searchForm .angucomplete-image-holder {
    float: left;
    padding: 0;
    margin: 0
}

.ns-note .p-searchForm--bank .angucomplete-image,
.ns-note .p-searchForm--header .angucomplete-image,
.ns-note .p-searchForm--gallery .angucomplete-image,
.ns-note .p-searchForm--basicDropdown .angucomplete-image,
.ns-note .p-searchForm .angucomplete-image {
    height: 30px;
    width: 30px;
    margin-right: 8px;
    border: none
}

.ns-note .p-searchForm--bank .angucomplete-hashtag,
.ns-note .p-searchForm--header .angucomplete-hashtag,
.ns-note .p-searchForm--gallery .angucomplete-hashtag,
.ns-note .p-searchForm--basicDropdown .angucomplete-hashtag,
.ns-note .p-searchForm .angucomplete-hashtag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 8px
}

.ns-note .p-searchForm--bank .angucomplete-hashtag:before,
.ns-note .p-searchForm--header .angucomplete-hashtag:before,
.ns-note .p-searchForm--gallery .angucomplete-hashtag:before,
.ns-note .p-searchForm--basicDropdown .angucomplete-hashtag:before,
.ns-note .p-searchForm .angucomplete-hashtag:before {
    content: "#";
    font-size: 16px;
    font-weight: bold;
    color: #787c7b
}

.ns-note .p-searchForm--bank .angucomplete-image-default,
.ns-note .p-searchForm--header .angucomplete-image-default,
.ns-note .p-searchForm--gallery .angucomplete-image-default,
.ns-note .p-searchForm--basicDropdown .angucomplete-image-default,
.ns-note .p-searchForm .angucomplete-image-default {
    width: auto;
    height: 30px;
    background: none
}

.ns-note .p-searchForm--bank .angucomplete-holder input {
    height: 31px;
    padding: 5px 10px
}

.ns-note .p-searchForm--bank .angucomplete-holder .angucomplete-dropdown {
    position: relative;
    margin-top: -1px
}

.ns-note .p-searchForm--header .angucomplete-holder input {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 30px 5px 10px;
    width: 200px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 100px;
    background: #f7f9f9;
    font-size: 12px
}

.ns-note .p-searchForm--header .angucomplete-holder input:focus {
    border-color: #249f80;
    background: #fff;
    outline: none
}

.ns-note .p-searchForm--header .angucomplete-holder .angucomplete-dropdown {
    margin-top: 14px;
    border-top: none;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: none
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchForm--header .angucomplete-holder .angucomplete-dropdown {
        width: 100vw;
        left: -10px;
        margin-top: 4px;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05)
    }
}

.ns-note .p-searchForm--header .angucomplete-holder .angucomplete-dropdown div:nth-child(3) {
    border-top: none;
    margin-top: 4px
}

.ns-note .p-searchForm--header .angucomplete-holder .angucomplete-dropdown .angucomplete-row:last-child {
    border-bottom: none
}

.ns-note .p-searchForm--gallery .angucomplete-holder {
    width: 100%;
    max-width: 100%
}

.ns-note .p-searchForm--gallery .angucomplete-holder input {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 30px 5px 10px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 100px;
    background: #f7f9f9;
    font-size: 12px
}

.ns-note .p-searchForm--gallery .angucomplete-holder input:focus {
    border-color: #249f80;
    background: #fff;
    outline: none
}

.ns-note .p-searchForm--gallery .angucomplete-holder .angucomplete-dropdown {
    margin-top: 14px;
    border-top: none;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: none
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchForm--gallery .angucomplete-holder .angucomplete-dropdown {
        width: 100vw;
        left: -10px;
        margin-top: 4px;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05)
    }
}

.ns-note .p-searchForm--gallery .angucomplete-holder .angucomplete-dropdown div:nth-child(3) {
    border-top: none;
    margin-top: 4px
}

.ns-note .p-searchForm--gallery .angucomplete-holder .angucomplete-dropdown .angucomplete-row:last-child {
    border-bottom: none
}

.ns-note .p-searchForm--gallery button {
    position: absolute;
    z-index: 1;
    right: 10px;
    height: 30px;
    width: 30px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_30_search-input-306e9da9e78721046980288a3096072b6f8ec178533520bc26472ef1f379d156.svg) no-repeat
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchForm--gallery button {
        right: 26px
    }
}

.ns-note .p-searchForm--header__submit {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    color: #A8ABB1;
    background-color: #ffffff
}

.ns-note .p-searchForm--header {
    display: none;
    position: relative;
    float: left
}

.ns-note .p-searchForm--header .angucomplete-holder input {
    width: 240px;
    height: 40px;
    padding: 4px 32px 4px 8px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-size: 14px
}

.ns-note .p-searchForm--header .angucomplete-holder input:focus {
    border-color: rgba(0, 0, 0, 0.2);
    outline: none
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchForm--header .angucomplete-holder input {
        width: 100%
    }
}

.ns-note .p-searchForm--header .angucomplete-title b {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 75px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchForm--header .angucomplete-title b {
        max-width: initial
    }
}

.ns-note .p-searchForm--header .angucomplete-title i {
    margin-left: 4px
}

.ns-note .p-searchForm--header .angucomplete- {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-searchForm--header .angucomplete- b {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 75px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchForm--header .angucomplete- b {
        max-width: initial
    }
}

.ns-note .p-searchForm--header .angucomplete- i {
    margin-left: 4px
}

.ns-note .p-searchForm--header .icon-30 {
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 1001
}

.ns-note .p-searchForm--header.is-active {
    display: block
}

.ns-note .p-searchForm--header.is-sp {
    display: block;
    width: calc(100% - 25px)
}

.ns-note .p-searchForm--basicDropdown {
    position: relative
}

.ns-note .p-searchForm--basicDropdown>input[type="text"] {
    height: 38px;
    border-radius: 0
}

.ns-note .p-searchForm--basicDropdown>input[type="text"]:focus {
    border: 1px solid #bdc3c7
}

.ns-note .p-searchForm--basicDropdown .p-searchForm__dropdown {
    position: absolute;
    top: 31px;
    left: 0;
    z-index: 10;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    padding: 0;
    border: 1px solid #bdc3c7;
    background-color: #fff
}

.ns-note .p-searchForm--basicDropdown .p-searchForm__dropdown>li>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-searchForm--basicDropdown .p-searchForm__row {
    display: block;
    font-size: 12px;
    padding: 10px
}

.ns-note .p-searchForm--basicDropdown .p-searchForm__row:hover {
    background-color: #f8f9fa;
    color: #222
}

.ns-note .p-searchForm--basicDropdown .p-searchForm__row.is-disabled {
    cursor: default;
    color: #787c7b
}

.ns-note .p-searchForm--basicDropdown .p-searchForm__row.is-disabled:hover {
    background-color: #fff
}

.ns-note .renewal-p-form .renewal-p-form__group {
    margin-bottom: 15px
}

.ns-note .renewal-p-form .renewal-p-form__group:last-child {
    margin-bottom: 0
}

.ns-note .renewal-p-form label {
    display: block;
    overflow: visible;
    margin-bottom: 0
}

.ns-note .renewal-p-form label>div {
    margin-bottom: 5px;
    font-weight: bold
}

.ns-note .renewal-p-form input[type="text"],
.ns-note .renewal-p-form input[type="password"],
.ns-note .renewal-p-form input[type="email"],
.ns-note .renewal-p-form input[type="number"],
.ns-note .renewal-p-form input[type="search"],
.ns-note .renewal-p-form input[type="date"] {
    display: inherit;
    width: 100%;
    height: 31px;
    padding: 5px 10px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    font-weight: normal;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #e8eceb;
    border-radius: 4px;
    vertical-align: middle
}

.ns-note .renewal-p-form input[type="text"].is-disabled,
.ns-note .renewal-p-form input[type="password"].is-disabled,
.ns-note .renewal-p-form input[type="email"].is-disabled,
.ns-note .renewal-p-form input[type="number"].is-disabled,
.ns-note .renewal-p-form input[type="search"].is-disabled,
.ns-note .renewal-p-form input[type="date"].is-disabled {
    color: #ccc;
    background: #f7f9f9
}

.ns-note .renewal-p-form textarea {
    width: 100%;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: normal
}

.ns-note .renewal-p-form select {
    width: 100%
}

.ns-note .renewal-p-form input[type="text"]:focus,
.ns-note .renewal-p-form input[type="password"]:focus,
.ns-note .renewal-p-form input[type="email"]:focus,
.ns-note .renewal-p-form input[type="number"]:focus,
.ns-note .renewal-p-form input[type="search"]:focus,
.ns-note .renewal-p-form input[type="date"]:focus {
    border-color: #249f80;
    outline: 0
}

.ns-note .renewal-p-form textarea:focus {
    border-color: #249f80;
    outline: 0
}

.ns-note .renewal-p-form select:focus {
    outline: 0
}

.ns-note .renewal-p-form__error {
    display: block;
    margin-top: 5px;
    font-weight: normal;
    color: #FF0000
}

.ns-note .renewal-p-form__errorArea {
    margin-top: 10px
}

.ns-note .renewal-p-form__errorArea>p {
    margin-bottom: 5px;
    color: #FF0000
}

.ns-note .renewal-p-form__errorArea>p:last-child {
    margin-bottom: 0
}

.ns-note .renewal-p-form__authorUpload {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-top: -10px
}

.ns-note .renewal-p-form__authorUpload>.renewal-p-overlay {
    left: auto
}

.ns-note .p-articleNoteInfo {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-articleNoteInfo__user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-articleNoteInfo__avatar {
    width: 30px;
    margin-right: 10px
}

.ns-note .p-articleNoteInfo__info {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .p-articleNoteInfo__status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    padding-left: 8px
}

.ns-note .p-articleNoteInfo__status>ul>li {
    max-height: 30px
}

.ns-note .p-articleNoteInfo__action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-articleNoteInfo__actionItem {
    margin-left: 8px;
    white-space: nowrap
}

.ns-note .p-articleNoteInfo__more {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px
}

.ns-note .p-articleNoteInfo__moreIcon {
    display: inline-block;
    padding: 3px;
    color: #A8ABB1
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleNoteInfo__moreIcon:hover {
        color: #787C7B
    }
}

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

    .ns-note .p-articleList--users,
    .ns-note .p-articleList {
        padding: 0 15px
    }
}

.ns-note .p-articleList--users .p-articleList__item,
.ns-note .p-articleList .p-articleList__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

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

    .ns-note .p-articleList--users .p-articleList__item,
    .ns-note .p-articleList .p-articleList__item {
        padding-left: 0
    }
}

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

    .ns-note .p-articleList--users .p-articleList__item,
    .ns-note .p-articleList .p-articleList__item {
        padding: 16px
    }
}

.ns-note .p-articleList--users .p-articleList__image,
.ns-note .p-articleList .p-articleList__image {
    margin-left: 8px;
    margin-right: 8px
}

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

    .ns-note .p-articleList--users .p-articleList__image,
    .ns-note .p-articleList .p-articleList__image {
        margin-right: 0
    }
}

.ns-note .p-articleList--users .p-articleList__image>img,
.ns-note .p-articleList .p-articleList__image>img {
    width: 48px;
    height: auto;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 3px
}

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

    .ns-note .p-articleList--users .p-articleList__image>img,
    .ns-note .p-articleList .p-articleList__image>img {
        width: 32px
    }
}

.ns-note .p-articleList--users .p-articleList__image a>img,
.ns-note .p-articleList .p-articleList__image a>img {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 3px
}

.ns-note .p-articleList--users .p-articleList__body,
.ns-note .p-articleList .p-articleList__body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .p-articleList--users .p-articleList__heading,
.ns-note .p-articleList .p-articleList__heading {
    word-break: break-all;
    margin-bottom: 3px;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.04em
}

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

    .ns-note .p-articleList--users .p-articleList__heading,
    .ns-note .p-articleList .p-articleList__heading {
        display: block
    }
}

.ns-note .p-articleList--users .p-articleList__heading>a,
.ns-note .p-articleList--users .p-articleList__heading h4,
.ns-note .p-articleList .p-articleList__heading>a,
.ns-note .p-articleList .p-articleList__heading h4 {
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold
}

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

    .ns-note .p-articleList--users .p-articleList__heading>a,
    .ns-note .p-articleList--users .p-articleList__heading h4,
    .ns-note .p-articleList .p-articleList__heading>a,
    .ns-note .p-articleList .p-articleList__heading h4 {
        font-size: 14px
    }
}

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

    .ns-note .p-articleList--users .p-articleList__heading>a,
    .ns-note .p-articleList--users .p-articleList__heading h4,
    .ns-note .p-articleList .p-articleList__heading>a,
    .ns-note .p-articleList .p-articleList__heading h4 {
        font-size: 13px
    }
}

.ns-note .p-articleList--users .p-articleList__labels,
.ns-note .p-articleList .p-articleList__labels {
    display: inline-block
}

.ns-note .p-articleList--users .p-articleList__labels>li,
.ns-note .p-articleList .p-articleList__labels>li {
    vertical-align: top;
    margin-right: 5px
}

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

    .ns-note .p-articleList--users .p-articleList__labels>li,
    .ns-note .p-articleList .p-articleList__labels>li {
        margin-top: 1px
    }
}

.ns-note .p-articleList--users .p-articleList__labels>li:last-child,
.ns-note .p-articleList .p-articleList__labels>li:last-child {
    margin-right: 0
}

.ns-note .p-articleList--users .p-articleList__description,
.ns-note .p-articleList .p-articleList__description {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.ns-note .p-articleList--users .p-articleList__description>li,
.ns-note .p-articleList .p-articleList__description>li {
    color: #787c7b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap
}

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

    .ns-note .p-articleList--users .p-articleList__description>li,
    .ns-note .p-articleList .p-articleList__description>li {
        font-size: 11px
    }
}

.ns-note .p-articleList--users .p-articleList__description>li:before,
.ns-note .p-articleList .p-articleList__description>li:before {
    content: "・";
    margin: 0 0.2em 0 0.4em;
    color: #222222
}

.ns-note .p-articleList--users .p-articleList__description>li:first-child:before,
.ns-note .p-articleList .p-articleList__description>li:first-child:before {
    content: "";
    margin: 0
}

.ns-note .p-articleList--users .p-articleList__buttonArea,
.ns-note .p-articleList .p-articleList__buttonArea {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 8px;
    margin-right: 8px
}

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

    .ns-note .p-articleList--users .p-articleList__buttonArea,
    .ns-note .p-articleList .p-articleList__buttonArea {
        display: none
    }
}

.ns-note .p-articleList--users .p-articleList__othersArea,
.ns-note .p-articleList .p-articleList__othersArea {
    position: relative;
    margin-left: 8px
}

.ns-note .p-articleList--users .p-articleList__othersAreaButton>button,
.ns-note .p-articleList .p-articleList__othersAreaButton>button {
    padding: 4px;
    background-color: #fff;
    color: #A8ABB1;
    cursor: pointer
}

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

    .ns-note .p-articleList--users .p-articleList__othersAreaButton>button,
    .ns-note .p-articleList .p-articleList__othersAreaButton>button {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-articleList--users .p-articleList__othersAreaButton>button:hover,
    .ns-note .p-articleList .p-articleList__othersAreaButton>button:hover {
        color: #787C7B
    }
}

.ns-note .p-articleList--users .p-articleList__input,
.ns-note .p-articleList .p-articleList__input {
    margin-right: 15px
}

.ns-note .p-articleList--users .p-articleList__image {
    width: 60px;
    height: 60px;
    margin: 0 15px 0 0
}

@media only screen and (max-width: 768px) {
    .ns-note .p-articleList--users .p-articleList__image {
        margin-right: 15px
    }
}

.ns-note .p-articleList--users .p-articleList__image>img {
    border-radius: 60px
}

.ns-note .p-articleList--users .p-articleList__image a>img {
    border-radius: 60px
}

.ns-note .p-articleList--users .p-articleList__heading {
    margin-bottom: 3px;
    word-break: break-all
}

.ns-note .p-articleList--users .p-articleList__heading>h4 {
    font-size: 14px;
    font-weight: bold
}

@media only screen and (max-width: 768px) {
    .ns-note .p-articleList--users .p-articleList__heading>h4 {
        font-size: 13px
    }
}

.ns-note .p-articleList--users .p-articleList__heading>h4 a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-articleList--users .p-articleList__heading>h4 a i {
    margin-left: 4px
}

.ns-note .p-articleList--users .p-articleList__description>p {
    font-size: 12px;
    word-break: break-all
}

.ns-note .p-articleList--users .p-articleList__description a {
    color: #249f80
}

.ns-note .p-articleList--users .p-articleList__description a:hover {
    color: #249f80;
    text-decoration: underline
}

.ns-note .p-articleList--users .p-articleList__buttonArea {
    margin-left: 15px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-articleList--users .p-articleList__buttonArea {
        display: block
    }
}

.ns-note .p-articleList--users .p-articleList__buttonArea>label {
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-articleAction {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        margin-bottom: 24px
    }

    .ns-note .p-articleAction.is-ios {
        margin-bottom: 8.5vh
    }
}

.ns-note .p-articleAction__link {
    color: #ffffff;
    display: block;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .p-articleAction__item {
    cursor: pointer;
    border-radius: 40px;
    margin-right: 16px
}

.ns-note .p-articleAction__item--twitter {
    background-color: #55acee
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleAction__item--twitter:hover {
        background-color: #2795e9
    }
}

.ns-note .p-articleAction__item--facebook {
    background-color: #1877F2
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleAction__item--facebook:hover {
        background-color: #0b5fcc
    }
}

.ns-note .p-articleAction__item--line {
    background-color: #00B900
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleAction__item--line:hover {
        background-color: #008600
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-articleAction__suki {
        position: relative;
        margin-left: auto;
        width: 48px;
        height: 48px;
        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 48px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: #A8ABB1
    }
}

.ns-note .p-articleAction__suki .c-icon--like.is-active {
    color: #EA3F60
}

.ns-note .p-articleActions {
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
    transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
    -webkit-transform: translate(0, 110%);
    transform: translate(0, 110%)
}

.ns-note .p-articleActions:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -10px;
    left: 0;
    background-color: #ffffff;
    z-index: -1
}

@media only screen and (max-width: 479px) {
    .ns-note .p-articleActions {
        display: none
    }
}

.ns-note .p-articleActions.is--active {
    -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
    transition: all 400ms cubic-bezier(1, 0, 0, 1);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.ns-note .p-articleActions__inner {
    width: 620px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-articleActions__inner {
        width: auto;
        padding-left: 16px;
        padding-right: 16px
    }
}

.ns-note .p-articleActions__note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-left: -16px
}

.ns-note .p-articleActions__share {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-right: -16px
}

.ns-note .p-articleActions__item {
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #A8ABB1;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleActions__item {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-articleActions__item:hover {
        color: #787C7B
    }
}

.ns-note .p-articleActions__item--suki {
    position: relative;
    width: auto;
    padding-left: 16px;
    padding-right: 16px
}

.ns-note .p-articleActions__item--twitter {
    color: #55acee
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleActions__item--twitter:hover {
        color: #2795e9
    }
}

.ns-note .p-articleActions__item--facebook {
    color: #1877F2
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleActions__item--facebook:hover {
        color: #0b5fcc
    }
}

.ns-note .p-articleActions__item--line {
    color: #00B900
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleActions__item--line:hover {
        color: #008600
    }
}

.ns-note .p-articleActions__item--post {
    color: #2CB696
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleActions__item--post:hover {
        color: #228d74
    }
}

.ns-note .p-articleActions__like {
    display: inline-block;
    vertical-align: top;
    color: #A8ABB1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-articleActions__like.is-active {
    color: #EA3F60
}

.ns-note .p-articleActions__like.is-active:hover {
    color: #EA3F60
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleActions__like {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-articleActions__like:hover {
        color: #787C7B
    }
}

.ns-note .p-articleActions__count {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
    color: #787c7b;
    font-family: Open Sans, sans-serif;
    margin-left: 4px
}

.ns-note .p-articleActions__count.is-active {
    color: #EA3F60
}

@media only screen and (min-width: 769px) {
    .ns-note .p-articleActions__count:hover {
        text-decoration: underline
    }
}

.ns-note .p-pageTitle {
    padding-top: 24px;
    padding-bottom: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

@media only screen and (max-width: 768px) {
    .ns-note .p-pageTitle {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 8px;
        padding-bottom: 8px
    }
}

.ns-note .p-pageTitle__text {
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (max-width: 768px) {
    .ns-note .p-pageTitle__text {
        font-size: 18px
    }
}

.ns-note .p-pageTitle--border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .p-searchInput {
    position: relative;
    width: 200px;
    height: 32px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchInput {
        height: 30px
    }
}

.ns-note .p-searchInput input[type="text"] {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 30px 5px 10px;
    background: #F7F9F9;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 100px;
    font-size: 12px
}

.ns-note .p-searchInput input:focus {
    background: #fff
}

.ns-note .p-searchInput .icon-30-search {
    position: absolute;
    top: 0;
    right: 0
}

.ns-note .p-headingWithBorder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 13px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-headingWithBorder {
        padding: 0 15px 10px 15px
    }

    .ns-note .p-headingWithBorder.page-article {
        padding: 0 0 10px 0
    }
}

.ns-note .p-headingWithBorder>* {
    font-size: 13px
}

.ns-note .p-sortNav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-sortNav>li {
    position: relative;
    margin-left: 30px;
    font-size: 13px;
    text-align: right;
    cursor: pointer
}

@media only screen and (max-width: 479px) {
    .ns-note .p-sortNav>li {
        margin-left: 20px
    }
}

.ns-note .p-listGroup--sortable,
.ns-note .p-listGroup--separate,
.ns-note .p-listGroup {
    padding: 0 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    background: #fff
}

.ns-note .p-listGroup--sortable>li,
.ns-note .p-listGroup--separate>li,
.ns-note .p-listGroup>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .p-listGroup--sortable>li:last-child,
.ns-note .p-listGroup--separate>li:last-child,
.ns-note .p-listGroup>li:last-child {
    border-bottom: none
}

.ns-note .p-listGroup--sortable,
.ns-note .p-listGroup--separate {
    padding: 0;
    background: transparent;
    border: none
}

.ns-note .p-listGroup--sortable>li,
.ns-note .p-listGroup--separate>li {
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 5px
}

.ns-note .p-listGroup--sortable>li:first-child,
.ns-note .p-listGroup--separate>li:first-child {
    margin-top: 5px
}

.ns-note .p-listGroup--sortable>li:last-child,
.ns-note .p-listGroup--separate>li:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .p-listGroup--sortable>li.p-listGroup__bundle {
    display: block
}

.ns-note .p-listGroup--sortable>li:hover,
.ns-note .p-listGroup--sortable>li:active {
    cursor: move
}

.ns-note .p-listGroup--sortable>li:hover {
    border: 1px solid transparent;
    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 200ms 0s ease;
    transition: all 200ms 0s ease
}

.ns-note .p-listGroup--sortable>li>p {
    line-height: 1.4
}

.ns-note .p-listGroup--sortable>li a {
    color: #222222
}

.ns-note .p-noContents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    font-size: 13px
}

.ns-note .p-footerBar--transparent,
.ns-note .p-footerBar {
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-top: 1px #e8eceb solid
}

.ns-note .p-footerBar--transparent {
    background: transparent;
    border-top: none;
    opacity: 0;
    -webkit-transition: opacity 150ms linear;
    transition: opacity 150ms linear
}

@media only screen and (max-width: 479px) {
    .ns-note .p-footerBar--transparent .p-footerBar__inner {
        height: 60px
    }
}

.ns-note .p-footerBar--transparent.is-show {
    opacity: 1
}

.ns-note .p-footerBar__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 970px;
    height: 80px;
    margin: 0 auto;
    padding: 0 16px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-footerBar__inner {
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-footerBar__inner {
        max-width: 680px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-footerBar__inner {
        height: 60px
    }
}

.ns-note .p-footerBar__button {
    margin-left: 8px;
    -webkit-transition: none;
    transition: none;
    min-width: 64px
}

.ns-note .p-footerBar__inner--narrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 700px;
    height: 80px;
    margin: 0 auto;
    padding: 0 15px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-footerBar__inner--narrow {
        width: 100%
    }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-footerBar__inner--narrow {
        max-width: 680px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-footerBar__inner--narrow {
        height: 60px
    }
}

.ns-note .p-footerBar__inner--narrow>ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (min-width: 1070px) {
    .ns-note .p-footerBar__close {
        position: absolute;
        left: 20px
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .p-footerBar__close {
        position: static;
        margin-right: 10px
    }
}

.ns-note .p-footerBar__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px
}

.ns-note .p-footerBar__text>span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 5px;
    padding: 0.1em 0.9em;
    font-family: Open Sans, sans-serif;
    font-weight: 400;
    font-weight: bold;
    color: #fff;
    background: #41c9b4;
    border-radius: 100px
}

.ns-note .p-footerBar__nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto
}

.ns-note .p-footerBar__nav>li {
    position: relative;
    margin-right: 30px;
    font-size: 13px
}

.ns-note .p-footerBar__nav>li:last-child {
    margin-right: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-footerBar__nav>li.p-footerBar__labelSetting {
        display: none
    }
}

.ns-note .noteTips {
    position: absolute;
    z-index: 1;
    top: 88px;
    right: 40px;
    width: 240px;
    background: #fff;
    border: 1px solid #e8eceb;
    border-radius: 4px
}

.ns-note .noteTips__title {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 15px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e8eceb
}

.ns-note .noteTips__title>i {
    margin: -1px 2px 0 -10px
}

.ns-note .noteTips__close {
    position: absolute;
    right: -5px;
    top: 10px
}

.ns-note .noteTips__text {
    padding: 10px 15px 15px 15px;
    font-size: 12px;
    line-height: 1.7
}

.ns-note .p-supportFunding {
    background: #f7f9f9;
    padding: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-supportFunding {
        margin: auto -5%;
        border-radius: 0
    }
}

.ns-note .p-supportFunding__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

@media only screen and (max-width: 479px) {
    .ns-note .p-supportFunding__body {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.ns-note .p-supportFunding__img {
    width: 40px;
    margin-right: 8px;
    margin-bottom: 16px;
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-supportFunding__img {
        width: 40px
    }
}

.ns-note .p-supportFunding__heading {
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: bold;
    text-align: center
}

.ns-note .p-supportFunding__contents {
    padding: 24px 24px 16px;
    background: #fff;
    border-radius: 12px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media only screen and (max-width: 479px) {
    .ns-note .p-supportFunding__contents {
        padding: 16px 16px 8px
    }
}

.ns-note .p-supportFunding__message {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-line
}

@media only screen and (max-width: 479px) {
    .ns-note .p-supportFunding__message {
        margin-bottom: 16px;
        font-size: 14px
    }
}

.ns-note .p-supportFunding__message>a {
    word-wrap: break-word;
    word-break: break-all;
    color: #249f80
}

.ns-note .p-supportFunding__message>a:hover {
    color: #209274;
    text-decoration: underline
}

.ns-note .p-supportFunding__thanks {
    margin: 15px 30px 30px 30px
}

.ns-note .p-supportFunding__thanks>img {
    display: block;
    margin: 0 auto 30px auto
}

.ns-note .p-supportFunding__thanksHeding {
    font-size: 14px;
    line-height: 1.4;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px
}

.ns-note .p-supportFunding__thanksMessage {
    font-size: 12px;
    line-height: 1.7
}

.ns-note .p-supportFunding__button {
    max-height: 48px
}

.ns-note .purchaseList .purchaseList__itemOrder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    cursor: pointer
}

.ns-note .purchaseList .purchaseList__itemOrder>img {
    min-width: 70px;
    margin-right: 20px
}

.ns-note .purchaseList .purchaseList__itemOrder-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: calc(100% - 70px);
    max-width: calc(100% - 70px)
}

@media only screen and (max-width: 479px) {
    .ns-note .purchaseList .purchaseList__itemOrder-inner {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.ns-note .purchaseList .purchaseList__itemOrder-itemName {
    max-width: calc(100% - 160px)
}

@media only screen and (max-width: 479px) {
    .ns-note .purchaseList .purchaseList__itemOrder-itemName {
        max-width: 100%;
        width: 100%;
        margin-bottom: 8px
    }
}

.ns-note .purchaseList .purchaseList__itemOrder-itemName .order-history {
    border-radius: 4px;
    background-color: #ecf9f6;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #42C6A9;
    padding: 1px 0px;
    margin-bottom: 3px;
    width: 80px;
    border: solid 1px #a0e2d4
}

.ns-note .purchaseList .purchaseList__itemOrder-itemName .renewal-c-card__userName {
    font-size: 13px;
    word-break: break-all
}

.ns-note .purchaseList .purchaseList__itemOrder-itemName .renewal-c-card__date {
    font-size: 12px;
    color: #777
}

.ns-note .purchaseList .purchaseList__itemOrder-amount {
    font-size: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: right
}

.ns-note .purchaseList .purchaseList__itemOrder-amount>span {
    min-width: 80px
}

.ns-note .purchaseList .purchaseList__itemOrder-amount>span>b {
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .ns-note .purchaseList .purchaseList__itemOrder-amount {
        max-width: 100%;
        width: 100%;
        text-align: left;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .ns-note .purchaseList .purchaseList__itemOrder-amount>span {
        min-width: 40px
    }
}

.ns-note .container__purchaseItemDetail .purchaseItemDetail__header {
    border-bottom: none;
    padding: 10px 20px;
    text-align: center
}

.ns-note .container__purchaseItemDetail .purchaseItemDetail__header .order-history-header {
    border-radius: 4px;
    background-color: #ecf9f6;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #42C6A9;
    padding: 5px 230px;
    border: solid 1px #a0e2d4;
    width: 100%;
    display: inline-block
}

@media only screen and (max-width: 479px) {
    .ns-note .container__purchaseItemDetail .purchaseItemDetail__header .order-history-header {
        padding: 0
    }
}

.ns-note .container__purchaseItemDetail .purchaseItemDetail__orderState {
    border-bottom: none;
    padding: 16px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ns-note .container__purchaseItemDetail .purchaseItemDetail__orderState .purchaseItemDetail__orderState__shipDate {
    color: #777;
    font-size: 13px
}

.ns-note .container__purchaseItemDetail .purchaseItemDetail__orderState .purchaseItemDetail__orderState__tracking a {
    font-size: 13px;
    color: #42C6A9
}

.ns-note .container__purchaseItemDetail .purchaseList__head {
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.ns-note .container__purchaseItemDetail .purchaseList__head>p {
    margin-left: 0;
    font-size: 14px;
    font-weight: bold
}

.ns-note .container__purchaseItemDetail .purchaseList__head>p:last-child {
    margin-left: 0
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0px 20px 0px;
    cursor: default
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div {
    width: 100%
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a {
    display: block
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 0px 10px 5px;
    border-bottom: solid 1px #dee0e0
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>img {
    height: 70px;
    margin-right: 20px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div {
    min-width: calc(100% - 90px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div>div:first-child {
    min-width: 260px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div>div:last-child>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px;
    min-width: 70px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div>div:last-child>div:last-child {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-left: 25px;
    font-weight: bold
}

@media only screen and (max-width: 479px) {
    .ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div>div {
        width: 100%
    }

    .ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div>div:first-child {
        margin-bottom: 8px
    }

    .ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div>div:last-child {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    .ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div>div>div:last-child>div {
        min-width: 87px
    }
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div .renewal-c-card__userName {
    font-size: 13px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div .renewal-c-card__variant {
    font-size: 12px;
    color: #777
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-item>a>div .renewal-c-card__date {
    font-size: 13px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-amounts {
    padding: 13px 0 10px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-amounts>dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 10px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-amounts>dl:last-child dd {
    font-size: 15px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-amounts dt,
.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-amounts dd {
    font-size: 13px
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-amounts dt {
    text-align: left;
    min-width: 100px;
    font-weight: normal
}

.ns-note .container__purchaseItemDetail .purchaseList__itemOrder>div.purchaseList__itemOrder-amounts dd {
    text-align: right;
    font-weight: bold;
    width: 100px
}

.ns-note .container__purchaseItemDetail .form_list {
    padding: 15px 0px 15px 5px;
    border-bottom: solid 1px #dee0e0
}

.ns-note .container__purchaseItemDetail .form_list dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .container__purchaseItemDetail .form_list dt {
    font-weight: bold;
    width: 120px
}

.ns-note .container__purchaseItemDetail .form_list dt,
.ns-note .container__purchaseItemDetail .form_list dd,
.ns-note .container__purchaseItemDetail .form_list dd>p {
    font-size: 13px
}

.ns-note .p-ecContainer {
    width: 700px;
    margin: 0 auto;
    padding: 40px 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-ecContainer {
        width: 100%
    }
}

.ns-note .p-productDetail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

@media only screen and (max-width: 479px) {
    .ns-note .p-productDetail {
        display: block
    }
}

.ns-note .p-productDetail__image {
    width: 300px;
    margin: 0 50px 0 0
}

.ns-note .p-productDetail__image>img {
    width: 100%
}

@media only screen and (max-width: 479px) {
    .ns-note .p-productDetail__image {
        width: 100%;
        margin: -40px 0 0 0
    }
}

.ns-note .p-productDetail__imageThumbnail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 12px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-productDetail__imageThumbnail {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.ns-note .p-productDetail__imageThumbnail>li {
    width: 66px;
    margin-right: 12px
}

.ns-note .p-productDetail__imageThumbnail>li:last-child {
    margin-right: 0
}

.ns-note .p-productDetail__imageThumbnail>li>img {
    width: 100%
}

.ns-note .p-productDetail__right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-top: 40px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-productDetail__right {
        padding: 30px 20px 20px 20px
    }
}

.ns-note .p-productDetail__name {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4
}

@media only screen and (max-width: 479px) {
    .ns-note .p-productDetail__name {
        font-size: 18px
    }
}

.ns-note .p-productDetail__userName {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.4
}

.ns-note .p-productDetail__price {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4
}

@media only screen and (max-width: 479px) {
    .ns-note .p-productDetail__price {
        font-size: 14px
    }
}

.ns-note .p-productDetail__other {
    margin-bottom: 20px;
    font-size: 13px
}

.ns-note .p-productDetail__button {
    margin-bottom: 20px
}

.ns-note .p-productDetail__description {
    margin: 30px 0 0 0;
    padding-top: 30px;
    border-top: 1px solid #e8eceb
}

@media only screen and (max-width: 479px) {
    .ns-note .p-productDetail__description {
        margin: 10px 0 0 0;
        padding: 20px 20px 0 20px
    }
}

.ns-note .p-productDetail__descriptionHeading {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: normal
}

@media only screen and (max-width: 479px) {
    .ns-note .p-productDetail__descriptionHeading {
        font-size: 18px
    }
}

.ns-note .p-productDetail__descriptionText {
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap
}

.ns-note .p-productDetail__notes>li {
    margin-bottom: 5px
}

.ns-note .p-productDetail__notes>li:last-child {
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart {
        padding: 0 20px
    }
}

.ns-note .p-cart__heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eceb
}

.ns-note .p-cart__heading>p {
    font-size: 13px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart__heading {
        display: none
    }
}

.ns-note .p-cart__heading>p:first-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 10px 0 0
}

.ns-note .p-cart__heading>p:nth-child(2) {
    width: 15%;
    padding: 0 10px
}

.ns-note .p-cart__heading>p:nth-child(3) {
    width: 15%;
    padding: 0 10px
}

.ns-note .p-cart__heading>p:nth-child(4) {
    width: 15%;
    padding: 0 10px
}

.ns-note .p-cart__body>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e8eceb
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart__body>li:first-child {
        border-top: 1px solid #e8eceb
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart__body>li {
        display: block
    }
}

.ns-note .p-cart__body>li>div:first-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 10px 0 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart__body>li>div:first-child {
        padding: 0
    }
}

.ns-note .p-cart__body>li>div:nth-child(2) {
    width: 15%;
    padding: 0 10px;
    font-size: 13px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart__body>li>div:nth-child(2) {
        width: auto;
        padding: 0
    }
}

.ns-note .p-cart__body>li>div:nth-child(3) {
    width: 15%;
    padding: 0 10px;
    font-size: 13px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart__body>li>div:nth-child(3) {
        width: auto;
        padding: 0
    }
}

.ns-note .p-cart__body>li>div:nth-child(4) {
    width: 15%;
    padding: 0 10px;
    font-size: 13px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart__body>li>div:nth-child(4) {
        width: auto;
        padding: 0
    }
}

.ns-note .p-cart__content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .p-cart__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 479px) {
    .ns-note .p-cart__item {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.ns-note .p-cart__image {
    width: 60px;
    margin-right: 15px
}

.ns-note .p-cart__image>img {
    width: 100%
}

.ns-note .p-cart__name {
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4
}

.ns-note .p-cart__userName {
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: #787c7b
}

.ns-note .p-cart__totalPrice {
    padding: 15px 0 0 0;
    text-align: right
}

.ns-note .p-cart__totalPrice p {
    font-size: 13px
}

.ns-note .p-cart__totalPrice p span {
    font-size: 13px
}

.ns-note .p-cart__totalPrice p:last-child span {
    font-size: 16px;
    font-weight: bold
}

.ns-note .p-cart__outOfStock {
    font-size: 11px;
    margin-top: 5px;
    color: #ED4956
}

@media only screen and (max-width: 479px) {
    .ns-note .p-ecContent {
        padding: 0 20px
    }

    .ns-note .p-ecContent input[type="text"],
    .ns-note .p-ecContent input[type="tel"],
    .ns-note .p-ecContent input[type="email"] {
        width: 100% !important
    }
}

.ns-note .p-ecContent__list>li {
    padding: 15px 0;
    border-bottom: 1px solid #e8eceb
}

.ns-note .p-ecContent__list>li a {
    font-size: 13px
}

.ns-note .p-ecContent__list>li>dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-ecContent__list>li>dl>dt {
    min-width: 4em;
    margin-right: 20px;
    font-size: 13px;
    font-weight: bold
}

.ns-note .p-ecContent__list>li>dl>dd {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 13px
}

.ns-note .p-ecContent__betweenInput {
    margin-left: 20px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-ecContent__betweenInput {
        margin-left: 0
    }

    .ns-note .p-ecContent__betweenInput>input {
        margin-top: 10px
    }
}

.ns-note .p-ecContent__notes {
    margin-left: 10px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-ecContent__notes {
        display: block;
        margin-top: 5px;
        margin-left: 0
    }
}

.ns-note .p-ecContent__heading {
    font-size: 18px;
    font-weight: bold
}

.ns-note .p-ecContent__heading.is-noList {
    padding: 15px 0
}

.ns-note .p-ecButtonSet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    margin-top: 20px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-ecButtonSet {
        display: block
    }
}

.ns-note .p-ecButtonSet button:first-child {
    margin-left: auto
}

@media only screen and (max-width: 479px) {
    .ns-note .p-ecButtonSet button {
        width: 100%
    }

    .ns-note .p-ecButtonSet button:first-child {
        margin-bottom: 20px
    }
}

.ns-note .flow {
    list-style: none;
    width: 550px;
    height: 50px;
    border-radius: 5px;
    background-color: #efefef;
    line-height: 51px;
    margin: 0 auto
}

@media only screen and (max-width: 479px) {
    .ns-note .flow {
        width: calc(100% - 40px);
        margin: 0 20px
    }
}

.ns-note .flow li.current {
    background-color: #42C6A9;
    color: #ffffff
}

.ns-note .flow li:first-child {
    border-radius: 5px 0 0 5px
}

.ns-note .flow li:last-child {
    border-radius: 0 5px 5px 0
}

.ns-note .flow li {
    position: relative;
    float: left;
    width: 135px;
    height: 50px;
    font-weight: bold;
    color: #666666;
    text-align: center;
    text-indent: 0.5em;
    letter-spacing: 0.03em;
    font-size: 14px
}

@media only screen and (max-width: 479px) {
    .ns-note .flow li {
        width: 25%;
        font-size: 12px
    }
}

.ns-note .flow li.current:before,
.ns-note .flow li.current:after {
    border-color: transparent transparent transparent #42C6A9
}

.ns-note .flow li:before {
    content: "";
    position: absolute;
    top: 0;
    right: -15px;
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 15px;
    border-color: transparent transparent transparent #cccccc
}

.ns-note .flow li:last-child:before {
    display: none
}

.ns-note .flow li.current:before,
.ns-note .flow li.current:after {
    border-color: transparent transparent transparent #42C6A9
}

.ns-note .flow li:after {
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    z-index: 2;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 15px;
    border-color: transparent transparent transparent #efefef
}

.ns-note .flow li:last-child:after {
    display: none
}

.ns-note .p-paywall {
    margin: 40px 0 56px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-paywall {
        margin: 32px 0
    }
}

.ns-note .p-paywall__title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 16px
}

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

.ns-note .p-paywall__title:after {
    content: "";
    border-top: 1px dashed #a8abb1;
    width: 100%;
    height: 1px;
    display: block;
    margin-top: -12px
}

.ns-note .p-paywall__titleInner {
    background-color: #ffffff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: -8px
}

.ns-note .p-paywall__message {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin-top: 32px;
    margin-bottom: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-paywall__message {
        margin-top: 24px
    }
}

.ns-note .p-paywall__count {
    font-size: 12px;
    color: #787c7b;
    text-align: center;
    margin-bottom: 8px
}

.ns-note .p-paywall__countWarning {
    color: #F95
}

.ns-note .p-paywall__countText {
    font-size: 12px;
    color: #787c7b;
    padding-left: 4px
}

.ns-note .p-paywall__countDivider {
    padding-left: 4px;
    padding-right: 4px
}

.ns-note .p-paywall__item {
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden
}

.ns-note .p-paywall__item+.p-paywall__item {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-paywall__item+.p-paywall__item {
        margin-top: 16px
    }
}

.ns-note .p-paywall__itemMessage {
    background-color: #f7f9f9;
    border-bottom: 1px solid #f2f2f2
}

.ns-note .p-paywall__itemMessageInner {
    padding: 16px 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

@media only screen and (max-width: 479px) {
    .ns-note .p-paywall__itemMessageInner {
        padding: 16px
    }
}

.ns-note .p-paywall__itemMessageInner:before {
    position: absolute;
    bottom: 0;
    left: 24px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: #f7f9f9;
    border-bottom: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-paywall__itemMessageInner:before {
        left: 16px
    }
}

.ns-note .p-paywall__itemInner {
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 479px) {
    .ns-note .p-paywall__itemInner {
        padding: 16px
    }
}

.ns-note .p-paywall__itemImage {
    overflow: hidden;
    margin-left: 16px
}

.ns-note .p-paywall__itemImage a {
    display: block
}

.ns-note .p-paywall__itemImage img {
    width: auto;
    vertical-align: top
}

.ns-note .p-paywall__itemImage--magazine {
    width: 80px
}

.ns-note .p-paywall__itemImage--magazine a {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px
}

.ns-note .p-paywall__itemImage--magazine img {
    height: 40px;
    margin-left: -16px
}

.ns-note .p-paywall__itemImage--note img {
    height: 56px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px
}

.ns-note .p-paywall__itemDetail {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .p-paywall__itemTitle {
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
    word-break: break-all;
    margin-bottom: 4px;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.06em
}

.ns-note .p-paywall__itemPrice {
    font-size: 14px;
    line-height: 1;
    color: #41c9b4;
    font-weight: bold;
    margin-bottom: 8px
}

.ns-note .p-paywall__itemDescription {
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-all;
    color: #787c7b;
    margin-bottom: 8px;
    margin-top: 8px
}

.ns-note .p-paywall__itemName {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
    word-break: break-all;
    color: #787c7b
}

.ns-note .p-paywall__itemAction {
    width: 100%;
    margin-top: 16px
}

.ns-note .p-paywall__itemReview {
    width: 100%;
    margin-top: 8px
}

.ns-note .p-paywall__limit {
    border-bottom: 1px solid #f2f2f2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 479px) {
    .ns-note .p-paywall__limit {
        padding: 8px 16px
    }
}

.ns-note .p-paywall__limitTitle {
    font-size: 14px;
    font-weight: bold
}

.ns-note .p-paywall__limitCount {
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap
}

.ns-note .p-paywall__limitNum {
    font-weight: bold;
    font-size: 16px
}

.ns-note .p-paywall__limitDivider {
    margin-left: 4px;
    margin-right: 4px
}

.ns-note .p-paywall__login {
    margin-top: 24px;
    margin-bottom: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .p-achievementsModal__count {
    padding-top: 24px;
    padding-bottom: 21px;
    pointer: normal;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/achievements_bgCount-fe390096cd64ce30b6c764696eb9dae947b1efdd9ee373206ad341d3bb738ec4.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 360px 180px
}

.ns-note .p-achievementsModal__count--pattern_1 {
    background-color: #EC407A
}

.ns-note .p-achievementsModal__count--pattern_2 {
    background-color: #FFA726
}

.ns-note .p-achievementsModal__count--pattern_3 {
    background-color: #FFEB3B
}

.ns-note .p-achievementsModal__count--pattern_4 {
    background-color: #26A69A
}

.ns-note .p-achievementsModal__count--pattern_5 {
    background-color: #42A5F5
}

.ns-note .p-achievementsModal__count--pattern_6 {
    background-color: #7E57C2
}

.ns-note .p-achievementsModal__num {
    color: #ffffff;
    font-family: "Avenir Next", "Arial", sans-serif;
    font-size: 130px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
    -webkit-animation: countModalAnimation 1000ms 400ms;
    animation: countModalAnimation 1000ms 400ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes countModalAnimation {
    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        text-shadow: 0 0 0 transparent;
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-4px) translateX(-4px);
        transform: translateY(-4px) translateX(-4px);
        text-shadow: 8px 8px rgba(0, 0, 0, 0.1);
        opacity: 1
    }
}

@keyframes countModalAnimation {
    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        text-shadow: 0 0 0 transparent;
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-4px) translateX(-4px);
        transform: translateY(-4px) translateX(-4px);
        text-shadow: 8px 8px rgba(0, 0, 0, 0.1);
        opacity: 1
    }
}

.ns-note .p-achievementsModal__message {
    font-size: 14px;
    font-weight: bold;
    text-align: center
}

.ns-note .p-achievementsModal__message a {
    text-decoration: underline
}

.ns-note .p-achievementsModal__caption {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    text-align: left
}

.ns-note .p-achievementsModal__text {
    display: block;
    font-size: 14px;
    font-weight: normal;
    text-align: left
}

.ns-note .p-achievementsModal__authors {
    height: 142px;
    padding-top: 30px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/achievements_bg_author-4362e2b177b110f4c4f84e91b0cdcd659871c2b042882ddfe23b487ac77aaed1.png);
    background-size: 380px 152px;
    background-position: center 2px;
    background-repeat: no-repeat
}

.ns-note .p-achievementsModal__authorList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 104px
}

.ns-note .p-achievementsModal__authorListItem {
    width: 104px;
    height: 104px;
    margin-left: -30px
}

.ns-note .p-achievementsModal__authorListItem:first-child {
    margin-left: 0
}

.ns-note .p-achievementsModal__authorsMessage {
    margin-bottom: 32px
}

.ns-note .p-achievementsModal__authorsMessage:only-child {
    margin-bottom: 0
}

.ns-note .p-achievementsModal__authorsMessageBody {
    padding: 16px;
    font-size: 14px
}

.ns-note .p-achievementsModal__action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: rgba(0, 0, 0, 0.05) solid 1px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-achievementsModal__action {
        display: block
    }
}

.ns-note .p-achievementsModal__actionMessage {
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .ns-note .p-achievementsModal__actionMessage {
        text-align: left
    }
}

.ns-note .p-achievementsModal__supportRecommendSuggestLabel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    margin-bottom: 14px
}

.ns-note .p-achievementsModal__supportRecommendSuggestText {
    font-size: 14px
}

.ns-note .p-achievementsModal__supportRecommendSuggestHelp {
    color: #A8ABB1;
    width: 24px;
    height: 24px;
    display: inline-block
}

.ns-note .p-achievementsModal__supportRecommendSuggestHelp>a {
    color: #A8ABB1;
    padding-bottom: 2px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-achievementsModal__supportRecommendSuggestHelp>a:hover {
        color: #787C7B
    }
}

.ns-note .p-achievementsModal__badgeAction {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 16px
}

.ns-note .p-achievementsModal__share {
    width: calc(50% - 8px)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-achievementsModal__share {
        width: auto;
        margin-bottom: 16px
    }

    .ns-note .p-achievementsModal__share:last-child {
        margin-bottom: 0
    }
}

.ns-note .p-galleryPaging {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .p-galleryPaging>li {
    margin: 50px 10px
}

.ns-note .p-recommendArticle--withBg>li,
.ns-note .p-recommendArticle>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #efefef
}

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

    .ns-note .p-recommendArticle--withBg>li,
    .ns-note .p-recommendArticle>li {
        padding: 10px 0
    }
}

.ns-note .p-recommendArticle__contents {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

.ns-note .p-recommendArticle__title {
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 8px;
    line-height: 1.4
}

@media only screen and (max-width: 479px) {
    .ns-note .p-recommendArticle__title {
        font-size: 14px
    }
}

.ns-note .p-recommendArticle__title>a {
    color: #222222
}

.ns-note .p-recommendArticle__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .p-recommendArticle__text {
        display: none
    }
}

.ns-note .p-recommendArticle__metaData {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px
}

.ns-note .p-recommendArticle__like {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 10px;
    line-height: 1
}

.ns-note .p-recommendArticle__like>span {
    font-size: 13px;
    margin-top: -1px;
    margin-left: 3px;
    font-family: Open Sans, sans-serif;
    font-weight: bold;
    color: #EA3F60
}

.ns-note .p-recommendArticle__name {
    margin-top: -2px;
    line-height: 1
}

.ns-note .p-recommendArticle__name>a {
    font-size: 11px;
    color: #787c7b
}

.ns-note .p-recommendArticle__img {
    width: 60px;
    margin-left: 15px
}

.ns-note .p-recommendArticle__img img {
    width: 100%;
    border: 1px solid #e8eceb;
    border-radius: 3px
}

.ns-note .p-recommendArticle--withBg>li {
    margin-top: -1px;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #efefef
}

@media only screen and (max-width: 479px) {
    .ns-note .p-recommendArticle--withBg>li {
        padding: 15px
    }
}

.ns-note .p-recommendArticle--withBg>li:first-child {
    margin-top: 0;
    border-radius: 3px 3px 0 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-recommendArticle--withBg>li:first-child {
        border-radius: 0
    }
}

.ns-note .p-recommendArticle--withBg>li:last-child {
    border-radius: 0 0 3px 3px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-recommendArticle--withBg>li:last-child {
        border-radius: 0
    }
}

.ns-note .p-timeline {
    margin-top: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-timeline {
        margin-top: 0
    }
}

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

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

.ns-note .p-timeline__insert {
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 32px;
    border-radius: 4px;
    margin-top: -40px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-timeline__insert {
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0
    }
}

.ns-note .p-timeline__insert--bg_grey {
    background-color: #f7f9f9
}

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

.ns-note .p-timeline__insertTitle {
    font-size: 14px;
    font-weight: normal;
    color: #787c7b;
    padding: 8px 16px 0
}

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

.ns-note .p-timeline__insertBody--nomargin {
    padding: 0
}

.ns-note .p-timeline__insertBody--pc {
    overflow-x: auto;
    -webkit-overflow-scrolling: auto
}

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

.ns-note .p-timeline__insertItem {
    margin-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 8px;
    min-width: 270px;
    width: calc(50% - 8px);
    margin-right: 8px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-timeline__insertItem {
        min-width: 270px;
        width: calc(50% - 8px);
        margin-right: 8px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-timeline__insertItem {
        min-width: 270px;
        width: calc(50% - 8px);
        margin-right: 8px
    }
}

.ns-note .p-timeline__insertItem--user {
    min-width: 161px;
    width: 161px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-timeline__insertItem--user {
        min-width: 40vw;
        width: 40vw;
        margin-bottom: 16px
    }
}

.ns-note .p-timeline__insertItem--pc {
    min-width: auto;
    width: 100%;
    margin-right: 8px
}

.ns-note .p-timeline__insertMore {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

@media only screen and (max-width: 479px) {
    .ns-note .p-timeline--type_newtimeline {
        margin-top: -10px
    }
}

.ns-note .p-textNoteCode {
    margin-top: 36px;
    margin-bottom: 36px;
    padding: 36px;
    background-color: #282c34;
    color: #ffffff;
    font-size: 12px;
    font-family: "note monospace", "SFMono-Regular", Consolas, Menlo, Courier, monospace;
    line-height: 18px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-textNoteCode {
        margin: 30px -19px;
        padding: 24px
    }
}

.ns-note .p-textNoteCode__main {
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-family: "note monospace", "SFMono-Regular", Consolas, Menlo, Courier, monospace;
    line-height: 18px;
    white-space: pre;
    word-wrap: normal;
    -webkit-overflow-scrolling: touch
}

.ns-note .p-cautionBar {
    margin-top: -19px;
    margin-bottom: 32px;
    padding: 32px 8px;
    color: #fff;
    background-color: #F95;
    text-align: center
}

.ns-note .p-cautionBar__title {
    padding-bottom: 4px;
    font-size: 14px
}

.ns-note .p-cautionBar__text {
    font-size: 14px
}

.ns-note .p-cautionBar__publicUrl {
    padding-left: 4px;
    padding-right: 4px;
    font-weight: bold;
    font-size: 16px
}

.ns-note .p-alertBar {
    margin-bottom: 32px;
    padding: 32px 8px;
    color: #fff;
    background-color: #ED4956;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .ns-note .p-alertBar {
        padding: 16px;
        text-align: left
    }
}

.ns-note .p-alertBar__title {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold
}

.ns-note .p-alertBar__text {
    font-size: 14px
}

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

.ns-note .p-boosterList input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0
}

.ns-note .p-boosterList__head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 16px;
    padding-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width: 479px) {
    .ns-note .p-boosterList__head {
        padding: 8px 16px;
        background-color: #ffffff
    }
}

.ns-note .p-boosterList__title {
    font-size: 16px;
    font-weight: bold
}

@media only screen and (max-width: 479px) {
    .ns-note .p-boosterList__title {
        font-size: 14px
    }
}

.ns-note .p-boosterList__checkbox {
    font-size: 12px;
    margin-bottom: 0
}

.ns-note .p-boosterList__checkbox label {
    margin-bottom: 0
}

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

.ns-note .p-boosterList--magazine .p-boosterList__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding-top: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-boosterList--magazine .p-boosterList__body {
        display: block;
        padding-top: 0;
        padding-left: 16px;
        padding-right: 16px
    }
}

.ns-note .p-boosterList--magazine .p-boosterList__item {
    width: calc(50% - 8px);
    margin-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media only screen and (max-width: 479px) {
    .ns-note .p-boosterList--magazine .p-boosterList__item {
        width: 100%
    }
}

.ns-note .p-messageBalloon {
    position: relative;
    border: 1px solid #e1e5e7;
    border-radius: 4px;
    background-color: #fff;
    text-align: left
}

.ns-note .p-messageBalloon:before {
    content: "";
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #e1e5e7
}

.ns-note .p-messageBalloon--tailPosition_topCenter:before {
    top: -12px;
    left: 50%;
    margin-left: -6px;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_topRight:before {
    right: 14px;
    top: -12px;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_bottomLeft:before {
    left: 14px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_bottomCenter:before {
    left: 50%;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px);
    margin-left: -6px
}

.ns-note .p-messageBalloon--tailPosition_bottomRight:before {
    right: 14px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_middletopLeft:before {
    left: -12px;
    top: 14px;
    -webkit-transform: rotate(135deg) translate(-5px, -5px);
    transform: rotate(135deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_magTmbTop:before {
    left: 23px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon__body {
    padding: 16px;
    font-size: 14px
}

.ns-note .p-flexibleBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.ns-note .p-flexibleBox__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.ns-note .p-flexibleBox--test {
    margin-top: 24px
}

.ns-note .p-flexibleBox--column_2 .p-flexibleBox__item {
    width: calc(50% - 8px);
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--column_2 .p-flexibleBox__item {
        margin-bottom: 8px;
        width: 100%
    }
}

.ns-note .p-flexibleBox--column_3 .p-flexibleBox__item {
    width: calc(33.33333333% - 8px);
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--column_3 .p-flexibleBox__item {
        margin-bottom: 8px;
        width: 100%
    }
}

.ns-note .p-flexibleBox--column_3 .p-flexibleBox__item:nth-child(3n+2):last-child {
    margin-left: auto;
    margin-right: calc(33.33333333% + 4px)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--column_3 .p-flexibleBox__item:nth-child(3n+2):last-child {
        margin-right: auto
    }
}

.ns-note .p-flexibleBox--column_4 .p-flexibleBox__item {
    width: calc(25% - 8px);
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--column_4 .p-flexibleBox__item {
        margin-bottom: 8px;
        width: 100%
    }
}

.ns-note .p-flexibleBox--column_4 .p-flexibleBox__item:nth-child(4n+2):last-child {
    margin-left: auto;
    margin-right: calc(50% + 16px)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--column_4 .p-flexibleBox__item:nth-child(4n+2):last-child {
        margin-right: auto
    }
}

.ns-note .p-flexibleBox--column_4 .p-flexibleBox__item:nth-child(4n+3):last-child {
    margin-left: auto;
    margin-right: calc(25% + 8px)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--column_4 .p-flexibleBox__item:nth-child(4n+3):last-child {
        margin-right: auto
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--column_spInline {
        display: block
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--column_spInline .p-flexibleBox__item {
        width: auto;
        display: inline-block
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--scrollable {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-y: hidden;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        margin-right: -16px;
        margin-left: -16px;
        padding-left: 16px
    }

    .ns-note .p-flexibleBox--scrollable:after {
        content: "";
        display: block;
        background-color: transparent;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 1px;
        height: 1px
    }
}

.ns-note .p-flexibleBox--scrollable .p-flexibleBox__row {
    width: calc(50% - 8px);
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--scrollable .p-flexibleBox__row {
        width: 70vw;
        margin-right: 16px
    }
}

.ns-note .p-flexibleBox--scrollable .p-flexibleBox__item+.p-flexibleBox__item {
    margin-top: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-flexibleBox--scrollable .p-flexibleBox__item {
        width: 70vw
    }
}

.ns-note .pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.ns-note .pika-single.is-hidden {
    display: none
}

.ns-note .pika-single.is-bound {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5)
}

.ns-note .pika-single {
    *zoom: 1
}

.ns-note .pika-single:before,
.ns-note .pika-single:after {
    content: " ";
    display: table
}

.ns-note .pika-single:after {
    clear: both
}

.ns-note .pika-lendar {
    float: left;
    width: 240px;
    margin: 8px
}

.ns-note .pika-title {
    position: relative;
    text-align: center
}

.ns-note .pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    filter: alpha(opacity=0);
    opacity: 0
}

.ns-note .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: bold;
    color: #333;
    background-color: #fff
}

.ns-note .pika-prev,
.ns-note .pika-next {
    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: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    opacity: .5;
    *position: absolute;
    *top: 0
}

.ns-note .pika-prev:hover,
.ns-note .pika-next:hover {
    opacity: 1
}

.ns-note .pika-prev.is-disabled,
.ns-note .pika-next.is-disabled {
    cursor: default;
    opacity: .2
}

.ns-note .pika-prev,
.ns-note .is-rtl .pika-next {
    float: left;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
    *left: 0
}

.ns-note .pika-next,
.ns-note .is-rtl .pika-prev {
    float: right;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
    *right: 0
}

.ns-note .pika-select {
    display: inline-block;
    *display: inline
}

.ns-note .pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0
}

.ns-note .pika-table th,
.ns-note .pika-table td {
    width: 14.285714285714286%;
    padding: 0
}

.ns-note .pika-table th {
    color: #999;
    font-size: 12px;
    line-height: 25px;
    font-weight: bold;
    text-align: center
}

.ns-note .pika-table abbr {
    border-bottom: none;
    cursor: help
}

.ns-note .pika-button {
    cursor: pointer;
    display: block;
    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
}

.is-today .ns-note .pika-button {
    color: #33aaff;
    font-weight: bold
}

.is-selected .ns-note .pika-button {
    color: #fff;
    font-weight: bold;
    background: #33aaff;
    box-shadow: inset 0 1px 3px #178fe5;
    border-radius: 3px
}

.is-disabled .ns-note .pika-button,
.is-outside-current-month .ns-note .pika-button {
    color: #999;
    opacity: .3
}

.is-disabled .ns-note .pika-button {
    pointer-events: none;
    cursor: default
}

.ns-note .pika-button:hover {
    color: #fff;
    background: #ff8000;
    box-shadow: none;
    border-radius: 3px
}

.ns-note .pika-button .is-selection-disabled {
    pointer-events: none;
    cursor: default
}

.ns-note .pika-week {
    font-size: 11px;
    color: #999
}

.ns-note .is-inrange .pika-button {
    background: #D5E9F7
}

.ns-note .is-startrange .pika-button {
    color: #fff;
    background: #6CB31D;
    box-shadow: none;
    border-radius: 3px
}

.ns-note .is-endrange .pika-button {
    color: #fff;
    background: #33aaff;
    box-shadow: none;
    border-radius: 3px
}

.ns-note .p-note {
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    background-color: #ffffff;
    padding: 16px 16px 56px;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .p-note {
        -webkit-transition: border-color 200ms cubic-bezier(1, 0, 0, 1);
        transition: border-color 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-note:hover {
        border-color: rgba(0, 0, 0, 0.2)
    }
}

.ns-note .p-note__title {
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: 8px;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.06em
}

.ns-note .p-note__link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1
}

.ns-note .p-note__description {
    word-break: break-all;
    font-size: 12px;
    margin-bottom: 16px
}

.ns-note .p-note__eyecatch {
    margin-bottom: 8px
}

.ns-note .p-note__eyecatch--fit {
    margin-left: -16px;
    margin-right: -16px;
    margin-top: -16px;
    margin-bottom: 16px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    background-size: cover;
    background-position: center
}

.ns-note .p-note__eyecatch--fit:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 52.4%
}

.ns-note .p-note__eyecatch--fitNarrow {
    margin-left: -16px;
    margin-right: -16px;
    margin-top: -16px;
    margin-bottom: 16px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    background-size: cover;
    background-position: center
}

.ns-note .p-note__eyecatch--fitNarrow:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 41.9%
}

.ns-note .p-note__player {
    position: relative;
    z-index: 2;
    padding-right: 96px;
    margin-top: 8px;
    margin-bottom: 16px
}

.ns-note .p-note__player--fit {
    padding-right: 0
}

.ns-note .p-note__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    padding-bottom: 16px;
    padding-top: 16px;
    z-index: 2;
    width: calc(100% - 32px)
}

.ns-note .p-note__actions {
    display: table
}

.ns-note .p-note__actionsItem {
    display: table-cell;
    padding-left: 4px
}

.ns-note .p-note__actionsIcon {
    position: relative;
    padding: 3px;
    color: #A8ABB1
}

@media only screen and (min-width: 769px) {
    .ns-note .p-note__actionsIcon:hover {
        color: #787C7B
    }
}

.ns-note .p-note--small .p-note__eyecatch {
    float: right;
    margin-left: 16px
}

.ns-note .fude-content {
    min-height: 450px
}

.ns-note .fude-content.note-new-edit {
    padding-bottom: 120px
}

.ns-note .note-date {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Arial
}

.ns-note .note-name {
    font-family: Hiragino Mincho ProN, ヒラギノ明朝 Pro W6, Hiragino Mincho Pro, HGS明朝E, Yu Mincho, YuMincho, ＭＳ Ｐ明朝, serif;
    color: #222222
}

.ns-note .note-name h1 {
    font-size: 32px;
    line-height: 1.5;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.04em;
    margin-top: 72px;
    margin-bottom: 18px;
    min-height: 1em
}

@media only screen and (max-width: 479px) {
    .ns-note .note-name h1 {
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 15px
    }
}

.ns-note .note-name.font-windows {
    font-family: YakuHanJPs, Segoe UI, Arial, メイリオ, Meiryo, sans-serif
}

.ns-note .note-name.font-windows .note-editor-placeholder:after {
    font-family: YakuHanJPs, Segoe UI, Arial, メイリオ, Meiryo, sans-serif
}

.ns-note .note-name.note-name--sans-serif {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    color: #444444
}

.ns-note .note-name.note-name--sans-serif .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
}

.ns-note .note-body {
    font-family: Hiragino Mincho ProN, ヒラギノ明朝 Pro W6, Hiragino Mincho Pro, HGS明朝E, Yu Mincho, YuMincho, ＭＳ Ｐ明朝, serif;
    color: #222222
}

.ns-note .note-body a {
    text-decoration: underline
}

.ns-note .note-body a:hover {
    color: #222222;
    text-decoration: none
}

.ns-note .note-body img {
    display: block;
    max-width: 100%;
    height: auto !important;
    text-align: center;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer
}

.ns-note .note-body img.is-slide {
    cursor: zoom-in
}

.ns-note .note-body blockquote,
.ns-note .note-body div:not(.fude-menu):not(.fude-image-menu):not(.fude-figure-menu):not(.body-paywall-line-separator),
.ns-note .note-body dl,
.ns-note .note-body figure,
.ns-note .note-body h1,
.ns-note .note-body h2,
.ns-note .note-body h3,
.ns-note .note-body h4,
.ns-note .note-body h5,
.ns-note .note-body p,
.ns-note .note-body table,
.ns-note .note-body li {
    margin-top: 36px;
    margin-bottom: 36px
}

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

    .ns-note .note-body blockquote,
    .ns-note .note-body div:not(.fude-menu):not(.fude-image-menu):not(.fude-figure-menu):not(.body-paywall-line-separator),
    .ns-note .note-body dl,
    .ns-note .note-body figure,
    .ns-note .note-body h1,
    .ns-note .note-body h2,
    .ns-note .note-body h3,
    .ns-note .note-body h4,
    .ns-note .note-body h5,
    .ns-note .note-body p,
    .ns-note .note-body table,
    .ns-note .note-body li {
        margin-top: 30px;
        margin-bottom: 30px
    }
}

.ns-note .note-body h1,
.ns-note .note-body h2,
.ns-note .note-body h3,
.ns-note .note-body h4,
.ns-note .note-body h5,
.ns-note .note-body h6 {
    font-weight: bold
}

.ns-note .note-body h2 {
    font-size: 24px;
    line-height: 1.75;
    margin-top: 50px;
    margin-bottom: -18px;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.04em
}

@media only screen and (max-width: 479px) {
    .ns-note .note-body h2 {
        font-size: 20px;
        margin-top: 36px;
        margin-bottom: -20px
    }
}

.ns-note .note-body h3 {
    font-size: 24px;
    line-height: 1.75;
    margin-top: 50px;
    margin-bottom: -18px;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.04em
}

@media only screen and (max-width: 479px) {
    .ns-note .note-body h3 {
        font-size: 20px;
        margin-top: 36px;
        margin-bottom: -20px
    }
}

.ns-note .note-body ul,
.ns-note .note-body ol {
    margin: 0
}

.ns-note .note-body li {
    font-size: 18px;
    line-height: 36px;
    list-style: none
}

@media only screen and (max-width: 479px) {
    .ns-note .note-body li {
        font-size: 16px;
        line-height: 30px
    }
}

.ns-note .note-body p {
    font-size: 18px;
    line-height: 36px
}

@media only screen and (max-width: 479px) {
    .ns-note .note-body p {
        font-size: 16px;
        line-height: 30px
    }
}

.ns-note .note-body blockquote {
    font-size: 16px;
    line-height: 36px;
    padding: 25px 36px;
    background-color: #f7f9f9
}

@media only screen and (max-width: 479px) {
    .ns-note .note-body blockquote {
        font-size: 14px;
        padding: 18px 24px;
        line-height: 30px
    }
}

.ns-note .note-body blockquote>* {
    margin-top: 0;
    margin-bottom: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .note-body blockquote>* {
        font-size: 14px
    }
}

.ns-note .note-body .pullquote {
    line-height: 1.8 !important;
    font-size: 24px !important;
    margin: 43px -10px;
    text-align: center
}

.ns-note .note-body .body-paywall-line-separator {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 40px 0;
    text-align: center;
    border-top: 1px dashed #787c7b;
    height: 1px
}

.ns-note .note-body .body-paywall-line-separator p {
    display: inline-block;
    margin: 0;
    padding: 0 8px;
    color: #787c7b;
    background: #ffffff;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-size: 16px
}

.ns-note .note-body .body-paywall-line-separator p br {
    display: none
}

@media only screen and (max-width: 479px) {
    .ns-note .note-body .body-paywall-line-separator p {
        font-size: 14px;
        line-height: 1.5
    }

    .ns-note .note-body .body-paywall-line-separator p br {
        display: inline
    }
}

.ns-note .note-body .body-paywall-line-separator .btn-linechange {
    display: block;
    width: 26px;
    height: 26px;
    background-color: #222222;
    color: #fff;
    border-radius: 100px !important;
    line-height: 26px;
    margin-top: -13px;
    margin-left: -30px;
    position: relative
}

.ns-note .note-body .body-paywall-line-separator .btn-linechange .icon-mini {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -7px;
    margin-left: -7px
}

.ns-note .note-body .body-paywall-line-separator .btn-linechange:hover {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -33px
}

.ns-note .note-body .widget-cover {
    position: relative;
    cursor: pointer
}

@media only screen and (max-width: 479px) {
    .ns-note .note-body .widget-cover {
        width: 100% !important
    }
}

.ns-note .note-body .widget-cover::before {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    z-index: 1
}

.ns-note .note-body .widget-cover:hover::before {
    display: block;
    border-color: rgba(0, 0, 0, 0.2)
}

.ns-note .note-body .widget-cover.is-selected::before {
    display: block;
    border-color: #249f80;
    background-color: rgba(44, 182, 150, 0.1)
}

.ns-note .note-body.note-body--sans-serif {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
    color: #444444
}

.ns-note .note-body.note-body--sans-serif .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
}

.ns-note .note-body.font-windows {
    font-family: Segoe UI, Arial, メイリオ, Meiryo, sans-serif
}

.ns-note .note-body.font-windows .note-editor-placeholder:after {
    font-family: Segoe UI, Arial, メイリオ, Meiryo, sans-serif
}

.ns-note .body-wrapper:focus,
.ns-note .editable:focus {
    outline: none
}

.ns-note .note-cover-img {
    margin-top: 36px;
    text-align: center;
    position: relative
}

@media only screen and (max-width: 479px) {
    .ns-note .note-cover-img {
        margin-top: -20px;
        margin-left: calc(-100vw * .05);
        margin-right: calc(-100vw * .05);
        text-align: center
    }
}

.ns-note .note-cover-img img {
    width: 100%;
    max-width: 820px
}

.ns-note .note-cover-img .icon-xlarge-cover-upload {
    position: absolute;
    top: 10px;
    left: 10px
}

.ns-note .note-cover-spacer {
    height: 0
}

@media only screen and (max-width: 479px) {
    .ns-note .note-cover-spacer {
        height: 40px
    }
}

.ns-note .note-user-name {
    font-size: 80%;
    margin-bottom: 36px
}

@media only screen and (max-width: 479px) {
    .ns-note .note-user-name {
        margin-bottom: 30px
    }
}

.ns-note .note-user-name.sound {
    margin-bottom: 30px
}

@media only screen and (max-width: 479px) {
    .ns-note .note-user-name.sound {
        margin-bottom: 15px
    }
}

.ns-note .note-user-name.talk {
    margin-bottom: 10px
}

.ns-note .note-cover {
    width: 30px;
    height: 30px;
    margin-bottom: 25px;
    border-radius: 100px;
    cursor: pointer;
    background-color: #d9e0e2;
    position: relative
}

.ns-note .note-cover:hover {
    background-color: #222
}

.ns-note .square.cross {
    width: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -1px
}

.ns-note .square {
    width: 14px;
    height: 14px;
    position: relative;
    background: #fff
}

.ns-note .square.cross::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background: #fff
}

.ns-note .fude-img-overlay .fude-img-overlay-resize {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/btn/btn_editor_img_edit-f8a231182ceb9852513a59ca0a40bd804a4714e3a5b1a2a156d4d38677846fcd.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 0 !important;
    cursor: pointer
}

.ns-note .fude-img-overlay .fude-img-overlay-resize:hover {
    background-position: 0 -30px
}

.ns-note .fude-img-overlay .fude-img-overlay-resize-l {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/btn/btn_editor_img_edit-f8a231182ceb9852513a59ca0a40bd804a4714e3a5b1a2a156d4d38677846fcd.png);
    background-repeat: no-repeat;
    background-position: -30px 0;
    padding: 0 !important;
    cursor: pointer
}

.ns-note .fude-img-overlay .fude-img-overlay-resize-l:hover {
    background-position: -30px -30px
}

.ns-note .fude-img-overlay .fude-img-overlay-close {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/btn/btn_editor_img_edit-f8a231182ceb9852513a59ca0a40bd804a4714e3a5b1a2a156d4d38677846fcd.png);
    background-repeat: no-repeat;
    background-position: -60px 0;
    background-size: 120px 60px;
    padding: 0 !important;
    cursor: pointer
}

.ns-note .fude-img-overlay .fude-img-overlay-close:hover {
    background-position: -60px -30px
}

.ns-note .fude-img-overlay .fude-img-overlay-close.close-position {
    position: absolute;
    top: 10px;
    right: 10px
}

.ns-note .fude-img-overlay .fude-img-overlay-change {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/btn/btn_editor_img_edit-f8a231182ceb9852513a59ca0a40bd804a4714e3a5b1a2a156d4d38677846fcd.png);
    background-repeat: no-repeat;
    background-position: -90px 0;
    padding: 0 !important;
    cursor: pointer
}

.ns-note .fude-img-overlay .fude-img-overlay-change:hover {
    background-position: -90px -30px
}

.ns-note .p-noteArticle__hash a {
    height: auto !important;
    padding: 4px 10px !important;
    cursor: pointer;
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #222222 !important
}

@media only screen and (min-width: 769px) {
    .ns-note .p-noteArticle__hash a:hover {
        border: 1px solid #a8abb1 !important;
        -webkit-transition: border 200ms cubic-bezier(1, 0, 0, 1) !important;
        transition: border 200ms cubic-bezier(1, 0, 0, 1) !important
    }
}

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

.ns-note .p-noteReview:before {
    content: "";
    border: 1px solid #41c9b4;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: 4px
}

.ns-note .p-noteReview__title {
    font-size: 16px;
    color: #2CB696;
    background-color: #ffffff;
    padding: 0 16px;
    margin-bottom: 16px;
    position: relative;
    z-index: 3;
    margin-top: -36px
}

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

.ns-note .p-noteReview__action {
    width: 100%;
    position: relative;
    z-index: 2
}

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

.ns-note .p-noteReview__button {
    display: none
}

.ns-note .p-noteReview__button.is-show {
    display: block
}

.ns-note .p-noteReview__thanks {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    background-color: #ffffff;
    color: #2cb696;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    z-index: 2
}

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

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

    25% {
        opacity: 1
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes effectThanks {
    0% {
        opacity: 0
    }

    25% {
        opacity: 1
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.ns-note .p-noteReview__thanks.is-show {
    -webkit-animation: effectThanks 2600ms;
    animation: effectThanks 2600ms
}

.ns-note .p-related {
    padding: 24px 24px;
    background-color: #F7F9F9
}

@media only screen and (max-width: 479px) {
    .ns-note .p-related {
        padding: 16px 16px
    }
}

.ns-note .p-related__title {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.4
}

.ns-note .p-related__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.ns-note .p-related__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(50% - 8px);
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-related__item {
        width: 100%;
        margin-bottom: 8px
    }

    .ns-note .p-related__item:last-child {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-related__item {
        width: 100%;
        margin-bottom: 8px
    }

    .ns-note .p-related__item:last-child {
        margin-bottom: 0
    }
}

.ns-note .p-noteListStatus {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-noteListStatus--published .p-noteListStatus__icon {
    border: #41c9b4 solid 1px;
    background-color: #41c9b4
}

.ns-note .p-noteListStatus--reserved .p-noteListStatus__icon {
    border: #41c9b4 solid 1px
}

.ns-note .p-noteListStatus--draft .p-noteListStatus__icon {
    border: #787c7b solid 1px
}

.ns-note .p-noteListStatus--frozen .p-noteListStatus__icon {
    border: #ED4956 solid 1px;
    background-color: #ED4956
}

.ns-note .p-noteListStatus__icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    border-style: solid;
    border-width: 1px;
    line-height: 1
}

.ns-note .p-noteListStatus__label {
    color: #787c7b;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap
}

.ns-note .p-box__title {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: normal;
    color: #787c7b
}

.ns-note .p-box__listItem {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
    position: relative;
    padding-left: 16px;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.06em
}

@media only screen and (max-width: 768px) {
    .ns-note .p-box__listItem {
        font-size: 14px;
        margin-bottom: 8px
    }
}

.ns-note .p-box__listItem:last-child {
    margin-bottom: 0
}

.ns-note .p-box__listItem:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #222222;
    top: 0.65em;
    left: 0
}

@media only screen and (min-width: 769px) {
    .ns-note .p-box__listLink {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-box__listLink:hover {
        color: #787c7b
    }
}

.ns-note .p-box--sub .p-box__listItem {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    position: static;
    padding-left: 0
}

@media only screen and (max-width: 768px) {
    .ns-note .p-box--sub .p-box__listItem {
        font-size: 12px
    }
}

.ns-note .p-box--sub .p-box__listItem:before {
    display: none
}

.ns-note .p-pageTitle {
    padding-top: 24px;
    padding-bottom: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

@media only screen and (max-width: 768px) {
    .ns-note .p-pageTitle {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 8px;
        padding-bottom: 8px
    }
}

.ns-note .p-pageTitle__text {
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (max-width: 768px) {
    .ns-note .p-pageTitle__text {
        font-size: 18px
    }
}

.ns-note .p-pageTitle--border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .p-messageBalloon {
    position: relative;
    border: 1px solid #e1e5e7;
    border-radius: 4px;
    background-color: #fff;
    text-align: left
}

.ns-note .p-messageBalloon:before {
    content: "";
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #fff;
    box-shadow: 1px 1px 0 0 #e1e5e7
}

.ns-note .p-messageBalloon--tailPosition_topCenter:before {
    top: -12px;
    left: 50%;
    margin-left: -6px;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_topRight:before {
    right: 14px;
    top: -12px;
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_bottomLeft:before {
    left: 14px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_bottomCenter:before {
    left: 50%;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px);
    margin-left: -6px
}

.ns-note .p-messageBalloon--tailPosition_bottomRight:before {
    right: 14px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_middletopLeft:before {
    left: -12px;
    top: 14px;
    -webkit-transform: rotate(135deg) translate(-5px, -5px);
    transform: rotate(135deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon--tailPosition_magTmbTop:before {
    left: 23px;
    bottom: -12px;
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px)
}

.ns-note .p-messageBalloon__body {
    padding: 16px;
    font-size: 14px
}

.ns-note .p-replyToLike {
    position: absolute;
    left: -6px;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 300px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform-origin: 25px bottom;
    transform-origin: 25px bottom;
    z-index: 100
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToLike {
        min-width: 270px
    }

    .ns-note .p-replyToLike .p-replyToLike__message {
        max-width: 190px
    }
}

.ns-note .p-replyToLike--with_articleActionPc {
    left: 7px;
    bottom: 10px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToLike--with_articleActionSp {
        left: auto;
        right: 2px;
        bottom: 20px;
        -webkit-transform-origin: 98% bottom;
        transform-origin: 98% bottom
    }

    .ns-note .p-replyToLike--with_articleActionSp .p-messageBalloon {
        margin-left: auto
    }
}

.ns-note .p-replyToLike--with_timelineSp {
    left: auto;
    right: -6px;
    bottom: -4px;
    -webkit-transform-origin: 98% bottom;
    transform-origin: 98% bottom
}

.ns-note .p-replyToLike--with_timelineSp .p-replyToLike__body {
    padding: 12px
}

.ns-note .p-replyToLike--with_timelineSp .p-messageBalloon {
    margin-left: auto
}

.ns-note .p-replyToLike__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px
}

.ns-note .p-replyToLike__avatar {
    width: 32px;
    margin-right: 16px;
    line-height: 1
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToLike__avatar {
        margin-right: 8px
    }
}

.ns-note .p-replyToLike__message {
    max-width: 220px;
    color: #222222;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    white-space: normal
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToLike__message {
        font-size: 12px
    }
}

.ns-note .p-replyToLike__status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: bold;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-replyToLike__status:last-child {
    margin-bottom: 0
}

.ns-note .p-replyToLike__status--type_firstLike {
    color: #EA3F60
}

.ns-note .p-replyToLike__statusText {
    margin-left: 4px
}

.ns-note .p-replyToLike.is-shown {
    -webkit-animation: replyToLike 4000ms 160ms;
    animation: replyToLike 4000ms 160ms
}

@-webkit-keyframes replyToLike {
    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(-16px);
        transform: translateY(-16px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    4% {
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px)
    }

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

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

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

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

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

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

    100% {
        -webkit-transform: translateY(-20px) scale(0.95);
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes replyToLike {
    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(-16px);
        transform: translateY(-16px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    4% {
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px)
    }

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

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

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

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

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

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

    100% {
        -webkit-transform: translateY(-20px) scale(0.95);
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.ns-note .p-replyToFollow {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 300px;
    visibility: hidden;
    opacity: 0;
    z-index: 100
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToFollow {
        min-width: 220px
    }

    .ns-note .p-replyToFollow .p-replyToFollow__message {
        max-width: 150px
    }
}

.ns-note .p-replyToFollow__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px
}

.ns-note .p-replyToFollow__avatar {
    width: 32px;
    margin-right: 16px;
    line-height: 1
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToFollow__avatar {
        margin-right: 8px
    }
}

.ns-note .p-replyToFollow__message {
    max-width: 220px;
    color: #222222;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    white-space: normal
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToFollow__message {
        font-size: 12px
    }
}

.ns-note .p-replyToFollow__status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: bold;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-replyToFollow__status:last-child {
    margin-bottom: 0
}

.ns-note .p-replyToFollow__status--type_firstLike {
    color: #EA3F60
}

.ns-note .p-replyToFollow.is-shown {
    -webkit-animation: replyToFollow 4000ms 160ms;
    animation: replyToFollow 4000ms 160ms
}

@-webkit-keyframes replyToFollow {
    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(-16px);
        transform: translateY(-16px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    4% {
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px)
    }

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

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

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

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

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

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

    100% {
        -webkit-transform: translateY(-20px) scale(0.95);
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes replyToFollow {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

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

    4% {
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px)
    }

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

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

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

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

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

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

    100% {
        -webkit-transform: translateY(-20px) scale(0.95);
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.ns-note .p-replyToFollow--with_creatorTop {
    right: 0;
    bottom: 8px;
    -webkit-transform-origin: right top;
    transform-origin: right top
}

.ns-note .p-replyToFollow--with_creatorTop .p-replyToFollow__message {
    color: #222222;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    white-space: normal
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToFollow--with_creatorTop .p-replyToFollow__message {
        font-size: 12px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-replyToFollow--with_creatorTop {
        bottom: -10px
    }

    .ns-note .p-replyToFollow--with_creatorTop .p-replyToFollow__message {
        max-width: 290px
    }
}

.ns-note .p-replyToFollow--with_creatorTop .p-messageBalloon {
    margin-left: auto
}

.ns-note .p-replyToFollow--with_noteDetailTop {
    left: -6px;
    bottom: 10px;
    -webkit-transform-origin: 25px top;
    transform-origin: 25px top
}

.ns-note .p-replyToFollow--with_noteDetailBottom {
    left: 0;
    right: auto;
    bottom: 0;
    -webkit-transform-origin: 25px top;
    transform-origin: 25px top
}

.ns-note .p-searchHistoryDropdown {
    position: absolute;
    left: 50%;
    width: 280px;
    margin-top: 8px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
    background-color: #fff;
    z-index: 1;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchHistoryDropdown {
        width: 100vw;
        left: -10px;
        margin-top: 4px;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        -webkit-transform: none;
        transform: none
    }
}

.ns-note .p-searchHistoryDropdown:before {
    content: "";
    display: block;
    position: absolute;
    top: -13px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #ffffff;
    box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.8);
    -webkit-transform: rotate(225deg) translate(-5px, -5px);
    transform: rotate(225deg) translate(-5px, -5px)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchHistoryDropdown:before {
        display: none
    }
}

@media only screen and (max-width: 359px) {
    .ns-note .p-searchHistoryDropdown:before {
        display: none
    }
}

.ns-note .p-searchHistoryDropdown__header {
    position: relative;
    padding: 16px;
    cursor: default
}

.ns-note .p-searchHistoryDropdown__title {
    font-size: 12px;
    font-weight: bold;
    cursor: default
}

.ns-note .p-searchHistoryDropdown__deleteAll {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #249f80;
    font-size: 12px;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .p-searchHistoryDropdown__deleteAll:hover {
        color: #209274
    }
}

.ns-note .p-searchHistoryDropdown__body {
    width: 100%
}

@media only screen and (max-width: 479px) {
    .ns-note .p-searchHistoryDropdown__body {
        height: calc(100vh - 48px);
        padding-bottom: 16px
    }
}

.ns-note .p-searchHistoryDropdown__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.ns-note .p-searchHistoryDropdown__item:last-child {
    border-radius: 0 0 4px 4px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-searchHistoryDropdown__item:hover {
        background-color: #f7f9f9
    }
}

.ns-note .p-searchHistoryDropdown__word {
    overflow: hidden;
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 16px;
    font-size: 14px;
    color: #787c7b;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .p-searchHistoryDropdown__word:hover {
        color: #222222
    }
}

.ns-note .p-searchHistoryDropdown__delete {
    padding: 16px;
    color: #A8ABB1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .p-searchHistoryDropdown__delete:hover {
        color: #787C7B
    }
}

.ns-note .p-globalNavigation {
    position: relative
}

.ns-note .p-globalNavigation__item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

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

@media only screen and (max-width: 768px) {
    .ns-note .p-globalNavigation__item:before {
        bottom: 0
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .p-globalNavigation__item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .p-globalNavigation__item:hover:before {
        -webkit-transition: background-color 200ms cubic-bezier(1, 0, 0, 1);
        transition: background-color 200ms cubic-bezier(1, 0, 0, 1);
        background-color: #222222
    }
}

.ns-note .p-globalNavigation__item.is--active:before {
    background-color: #222222
}

.ns-note .p-globalNavigation__item.is--active .p-globalNavigation__link {
    color: #222222
}

.ns-note .p-globalNavigation__item.is--active .p-globalNavigation__notification {
    background-color: #222222
}

.ns-note .p-globalNavigation__item--help {
    margin-left: auto
}

.ns-note .p-globalNavigation__link {
    color: #787c7b;
    display: block;
    font-weight: bold;
    padding: 0 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    line-height: 24px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-globalNavigation__link {
        font-size: 13px;
        padding: 0 8px
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .p-globalNavigation__link:hover {
        -webkit-transition: color 200ms cubic-bezier(1, 0, 0, 1);
        transition: color 200ms cubic-bezier(1, 0, 0, 1);
        color: #222222
    }
}

.ns-note .p-globalNavigation__link--drop {
    padding: 0 24px 0 16px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-globalNavigation__link--drop {
        padding: 0 10px
    }
}

.ns-note .p-globalNavigation__link--help {
    color: #A8ABB1
}

.ns-note .p-globalNavigation__notification {
    margin-left: 4px;
    background-color: #787c7b;
    color: #ffffff;
    border-radius: 4px;
    padding: 2px 4px;
    line-height: 1;
    font-size: 12px
}

.ns-note .p-globalNavigation__dropIcon {
    position: absolute;
    right: 0;
    top: 11px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-globalNavigation__dropIcon {
        display: none
    }
}

.ns-note .p-globalNavigation__menu {
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px 0 8px;
    width: auto;
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.ns-note .p-globalNavigation__menu::-webkit-scrollbar {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .p-globalNavigation__menu {
        height: 40px;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-overflow-scrolling: touch;
        padding-left: 8px
    }
}

.ns-note .p-globalNavigation__submenu {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.ns-note .p-globalNavigation__submenu--fit {
    overflow-y: visible;
    overflow-x: visible;
    position: relative
}

.ns-note .p-globalNavigation__wrapper {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    padding: 0 16px 0 8px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.ns-note .p-globalNavigation__wrapper::-webkit-scrollbar {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .p-globalNavigation__wrapper {
        padding-left: 8px
    }
}

.ns-note .p-globalNavigation__category {
    position: absolute;
    top: 97px;
    right: 16px;
    z-index: 6;
    width: 100%;
    max-width: 940px;
    padding: 40px;
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

@media only screen and (min-width: 768px) and (max-width: 940px) {
    .ns-note .p-globalNavigation__category {
        right: 0;
        padding: 24px;
        border-right: none;
        border-left: none;
        border-radius: 0
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .p-globalNavigation__category {
        top: 80px;
        right: 0;
        padding: 24px;
        margin: 0 auto;
        border-right: none;
        border-left: none;
        border-radius: 0
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-globalNavigation__category {
        padding: 0
    }
}

.ns-note .p-globalNavigation__category:before {
    position: absolute;
    top: -7px;
    right: 32px;
    z-index: 4;
    width: 12px;
    height: 12px;
    content: '';
    background-color: #ffffff;
    border-right: #e6e6e6 1px solid;
    border-bottom: #e6e6e6 1px solid;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.ns-note .p-globalNavigation__categoryInner {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-right: 16px;
    padding-left: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-globalNavigation__categoryInner {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        max-height: calc(100vh - 130px);
        padding: 16px;
        overflow-y: auto
    }
}

.ns-note .p-globalNavigation__categorySection {
    width: calc(20% - 16px)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-globalNavigation__categorySection {
        width: calc(50% - 8px);
        margin-bottom: 16px
    }
}

.ns-note .p-globalNavigation__categoryTitle {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px
}

.ns-note .p-globalNavigation__categoryTitle a {
    color: #222222;
    text-decoration: underline
}

.ns-note .p-globalNavigation__categoryTitle a:hover {
    text-decoration: none
}

.ns-note .p-globalNavigation__categoryItem {
    display: block;
    font-size: 14px;
    color: #787c7b;
    padding-top: 4px;
    padding-bottom: 4px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-globalNavigation__categoryItem:hover {
        color: #222222
    }
}

.ns-note .p-globalNavigation__categoryItem+.ns-note .p-globalNavigation__categoryItem {
    margin-top: 8px
}

.ns-note .p-dropNavigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%
}

@media only screen and (max-width: 479px) {
    .ns-note .p-dropNavigation:after {
        content: "";
        display: block;
        width: 100px
    }
}

.ns-note .p-dropNavigation__item {
    position: relative;
    cursor: pointer
}

@media only screen and (max-width: 479px) {
    .ns-note .p-dropNavigation__item--fit {
        position: static
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .p-dropNavigation__item:hover .p-dropNavigation__menu {
        display: block
    }
}

.ns-note .p-dropNavigation__item.is--active .p-dropNavigation__link {
    color: #222222
}

.ns-note .p-dropNavigation__item--last {
    padding-right: 80px
}

.ns-note .p-dropNavigation__item--all {
    position: absolute;
    right: 16px;
    z-index: 7;
    padding-left: 16px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-dropNavigation__item--all {
        right: 0
    }
}

.ns-note .p-dropNavigation__item--all:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 18px;
    left: 0;
    display: block;
    content: '';
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 10%, #fff 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 10%, #fff 100%)
}

@media only screen and (max-width: 768px) {
    .ns-note .p-dropNavigation__item--all:before {
        bottom: 14px
    }
}

.ns-note .p-dropNavigation__item--all .p-dropNavigation__link {
    position: relative;
    padding: 16px 24px 16px 16px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-dropNavigation__item--all .p-dropNavigation__link {
        padding: 0 24px 0 8px
    }
}

.ns-note .p-dropNavigation__menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 999;
    background-color: #ffffff;
    width: 300px;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #e6e6e6
}

.ns-note .p-dropNavigation__menu .p-dropNavigation__categorySection {
    width: 100%
}

.ns-note .p-dropNavigation__menu.is-open {
    display: block
}

@media only screen and (max-width: 479px) {
    .ns-note .p-dropNavigation__menu {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: 1px solid #f2f2f2;
        top: 42px
    }

    .ns-note .p-dropNavigation__menu--fit {
        position: relative
    }
}

.ns-note .p-dropNavigation__link {
    color: #787c7b;
    display: block;
    padding: 16px 14px;
    white-space: nowrap;
    font-size: 14px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-dropNavigation__link {
        padding: 0 8px;
        height: 40px;
        line-height: 40px
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .p-dropNavigation__link:hover {
        -webkit-transition: color 200ms cubic-bezier(1, 0, 0, 1);
        transition: color 200ms cubic-bezier(1, 0, 0, 1);
        color: #222222
    }
}

.ns-note .p-dropNavigation__link.is--over {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 140px
}

.ns-note .p-dropNavigation__link--drop {
    padding: 16px 24px 16px 16px;
    position: relative
}

@media only screen and (max-width: 768px) {
    .ns-note .p-dropNavigation__link--drop {
        padding: 0 24px 0 8px
    }
}

.ns-note .p-dropNavigation__dropIcon {
    position: absolute;
    top: 14px;
    right: 0
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-dropNavigation__dropIcon {
        top: 7px;
        right: 2px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-dropNavigation__dropIcon {
        top: 7px;
        right: 2px
    }
}

.ns-note .p-boxSection {
    margin-bottom: 24px;
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-boxSection {
        margin-bottom: 16px;
        margin-top: 16px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-boxSection--inside {
        margin-left: 16px;
        margin-right: 16px
    }
}

.ns-note .p-boxSection__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px
}

.ns-note .p-boxSection__title {
    font-size: 16px;
    font-weight: bold;
    color: #222222
}

.ns-note .p-boxSection__more {
    font-size: 12px;
    font-weight: normal;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .ns-note .p-boxSection__more {
        -webkit-transition: color 200ms cubic-bezier(1, 0, 0, 1);
        transition: color 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-boxSection__more:hover {
        color: #222222
    }
}

.ns-note .p-innerAnchor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media only screen and (max-width: 768px) {
    .ns-note .p-innerAnchor {
        display: none
    }
}

.ns-note .p-innerAnchor__link {
    display: block;
    padding: 8px 24px 8px 0;
    color: #787c7b;
    font-size: 14px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-innerAnchor__link {
        -webkit-transition: color 200ms cubic-bezier(1, 0, 0, 1);
        transition: color 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-innerAnchor__link:hover {
        color: #222222
    }
}

.ns-note .p-indexHeading {
    background-color: #f7f9f9;
    margin: 36px 0px;
    padding: 16px 16px
}

.ns-note .p-indexHeading__title {
    color: #787c7b;
    padding-left: 16px;
    font-size: 14px;
    margin: 0 !important;
    position: relative
}

.ns-note .p-indexHeading__title:hover {
    cursor: pointer !important;
    color: #444444
}

.ns-note .p-indexHeading__title.is-open .p-indexHeading__dropdown {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.ns-note .p-indexHeading__dropdown {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    top: -1px;
    left: -8px
}

.ns-note .p-indexHeading__body {
    margin: 0 !important
}

.ns-note .p-indexHeading__list {
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none
}

.ns-note .p-indexHeading__item {
    list-style-type: none !important;
    padding: 8px 0px;
    border-top: 1px solid #e6e6e6;
    font-size: 14px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    line-height: 1.5 !important
}

@media only screen and (max-width: 479px) {
    .ns-note .p-indexHeading__item {
        font-size: 14px !important;
        padding: 8px 0px
    }
}

.ns-note .p-indexHeading__item:first-child {
    border-top: none;
    padding-top: 20px
}

.ns-note .p-indexHeading__item:hover {
    color: #444444
}

.ns-note .p-indexHeading__link {
    text-decoration: none !important;
    color: #787c7b;
    display: block
}

.ns-note .p-indexHeading__button {
    margin-top: 8px;
    text-decoration: none !important
}

.ns-note .p-setCoverImage {
    position: relative;
    width: 100%;
    height: 256px;
    margin-top: 36px;
    padding: 8px;
    background-color: #f7f9f9
}

.ns-note .p-setCoverImage__draggableArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: transparent 2px dashed;
    -webkit-transition: border-color .2s;
    transition: border-color .2s
}

.ns-note .p-setCoverImage__container {
    width: 340px
}

.ns-note .p-setCoverImage__buttons {
    margin-bottom: 16px
}

.ns-note .p-setCoverImage__item {
    margin-bottom: 8px
}

.ns-note .p-setCoverImage__description {
    color: #787c7b;
    font-size: 12px
}

.ns-note .p-setCoverImage__image {
    display: block;
    width: 100%;
    height: auto
}

.ns-note .p-setCoverImage__remove {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 50%;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer
}

.ns-note .p-setCoverImage__remove:hover {
    background-color: rgba(0, 0, 0, 0.8)
}

.ns-note .p-setCoverImage.is-configured {
    height: auto;
    padding: 0;
    background-color: transparent
}

.ns-note .p-setCoverImage.is-dragging .p-setCoverImage__draggableArea {
    border-color: rgba(0, 0, 0, 0.2)
}

.ns-note .p-sellList {
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.ns-note .p-sellList__item {
    position: relative;
    padding: 12px
}

.ns-note .p-sellList__item+.p-sellList__item {
    border-top: 1px solid #e6e6e6
}

@media only screen and (min-width: 769px) {
    .ns-note .p-sellList__item.is--guest:hover {
        background-color: transparent
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .p-sellList__item {
        -webkit-transition: none;
        transition: none
    }

    .ns-note .p-sellList__item:hover {
        background-color: #f7f9f9
    }
}

.ns-note .p-sellList__inner {
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ns-note .p-sellList__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.ns-note .p-sellList__link a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.ns-note .p-sellList__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.ns-note .p-sellList__status {
    font-size: 12px;
    line-height: 1;
    color: #787c7b
}

.ns-note .p-sellList__date {
    font-size: 12px;
    line-height: 1;
    color: #787c7b
}

.ns-note .p-sellList__date:before {
    content: "・"
}

.ns-note .p-sellList__id {
    font-size: 10px;
    line-height: 1;
    color: #ccc;
    padding: 4px 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
    display: none
}

.ns-note .p-sellList__price {
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    color: #2CB696;
    white-space: nowrap;
    margin-left: auto
}

.ns-note .p-sellList__price--refunded {
    color: #FF0000
}

.ns-note .p-sellList__priceFree {
    font-size: 12px;
    line-height: 1;
    color: #787c7b;
    font-weight: normal;
    text-align: right
}

.ns-note .p-sellList__body {
    overflow: hidden
}

.ns-note .p-sellList__detail {
    overflow: hidden;
    padding-right: 8px
}

.ns-note .p-sellList__title {
    font-size: 12px;
    line-height: 1.5;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.04em;
    color: #787c7b
}

.ns-note .p-sellList__title a {
    color: #787c7b
}

.ns-note .p-sellList__avatar {
    margin-top: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-sellList__avatarName {
    margin-left: 8px;
    font-size: 14px;
    font-weight: bold
}

.ns-note .p-sellList__name {
    font-size: 14px;
    line-height: 1;
    display: block;
    font-weight: bold;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: 0.04em;
    margin-bottom: 4px
}

.ns-note .p-sellList__action {
    padding-left: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-sellList__action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

.ns-note .p-sellList__actionButton {
    margin-left: 8px;
    position: relative;
    z-index: 3;
    text-align: right;
    white-space: nowrap;
    color: #A8ABB1;
    cursor: pointer
}

@media only screen and (max-width: 479px) {
    .ns-note .p-sellList__actionButton {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

@media only screen and (min-width: 769px) {
    .ns-note .p-sellList__actionButton:hover {
        color: #787C7B
    }
}

.ns-note .p-sellList__messageCheck {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background-color: #41c9b4;
    border: 2px solid #ffffff;
    z-index: 1
}

.ns-note .p-contestBanner {
    margin-bottom: 16px;
    margin-top: 48px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-contestBanner {
        margin-top: 24px
    }
}

.ns-note .p-contestBanner__title {
    font-size: 13px;
    font-weight: bold
}

.ns-note .p-contestBanner__item {
    margin-top: 16px
}

.ns-note .p-contestBanner__image {
    width: 400px;
    height: auto;
    vertical-align: top;
    border-radius: 4px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-contestBanner__image {
        width: 100%
    }
}

.ns-note .p-comments {
    border-top: solid 1px #e6e6e6;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05)
}

.ns-note .p-comments__container {
    width: 620px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-comments__container {
        width: auto;
        margin-left: 32px;
        margin-right: 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-comments__container {
        width: auto;
        margin-left: 16px;
        margin-right: 16px
    }
}

.ns-note .p-comments__title {
    font-size: 13px;
    margin-bottom: 16px;
    font-weight: bold;
    margin-top: 32px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-comments__title {
        margin-top: 16px
    }
}

.ns-note .p-comments__more {
    margin-top: 16px;
    margin-bottom: 16px
}

.ns-note .p-comments__name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    padding-right: 80px
}

.ns-note .p-comments__nameLink {
    font-size: 14px;
    color: #222222;
    font-weight: bold
}

@media only screen and (max-width: 479px) {
    .ns-note .p-comments__nameLink {
        font-size: 12px
    }
}

.ns-note .p-comments__status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-comments__date {
    font-size: 12px;
    line-height: 1;
    display: block;
    color: #787c7b;
    font-family: Open Sans, sans-serif
}

.ns-note .p-comments__likeCount {
    font-size: 12px;
    line-height: 1;
    display: block;
    color: #787c7b
}

.ns-note .p-comments__likeCount:before {
    content: "・";
    margin-left: 4px;
    margin-right: 4px
}

.ns-note .p-comments__likeLink {
    margin-left: 4px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .ns-note .p-comments__likeLink:hover {
        -webkit-transition: color 200ms cubic-bezier(1, 0, 0, 1);
        transition: color 200ms cubic-bezier(1, 0, 0, 1);
        color: #222222
    }
}

.ns-note .p-comments__message {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #444444
}

.ns-note .p-comments__message a {
    color: #444444;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .ns-note .p-comments__message a:hover {
        text-decoration: none
    }
}

.ns-note .p-comments__item {
    position: relative;
    padding-left: 48px;
    padding-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-comments__item {
        padding-left: 48px;
        padding-bottom: 16px
    }
}

.ns-note .p-comments__item--edit .p-comments__input {
    padding-left: 0
}

.ns-note .p-comments__item--edit .p-comments__inputMessage {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .p-comments__action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 8px;
    right: 0
}

.ns-note .p-comments__actionPopover {
    position: relative
}

.ns-note .p-comments__actionIcon {
    color: #A8ABB1;
    cursor: pointer;
    margin-left: 16px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-comments__actionIcon:hover {
        -webkit-transition: color 200ms cubic-bezier(1, 0, 0, 1);
        transition: color 200ms cubic-bezier(1, 0, 0, 1);
        color: #787C7B
    }
}

.ns-note .p-comments__actionIcon.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: auto
}

.ns-note .p-comments__actionIcon--like.is-active {
    color: #EA3F60
}

.ns-note .p-comments__avatar {
    position: absolute;
    top: 4px;
    left: 0;
    display: block
}

.ns-note .p-comments__add {
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

@media only screen and (max-width: 479px) {
    .ns-note .p-comments__add {
        padding-top: 16px;
        padding-bottom: 16px
    }
}

.ns-note .p-comments__add.is-empty {
    border: none
}

.ns-note .p-comments__input {
    position: relative;
    padding-left: 48px;
    -webkit-transition: padding-bottom 150ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: padding-bottom 150ms cubic-bezier(0.42, 0, 0.58, 1)
}

.ns-note .p-comments__input.ng-enter,
.ns-note .p-comments__input.ng-leave,
.ns-note .p-comments__input.ng-enter-active,
.ns-note .p-comments__input.ng-leave-active {
    -webkit-transition: none;
    transition: none
}

@media only screen and (max-width: 479px) {
    .ns-note .p-comments__input {
        padding-left: 48px
    }
}

.ns-note .p-comments__input.is-active {
    padding-bottom: 48px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-comments__input.is-active {
        padding-bottom: 40px
    }
}

.ns-note .p-comments__inputAvatar {
    position: absolute;
    left: 0;
    top: 4px
}

.ns-note .p-comments__inputMessage {
    height: 32px;
    min-height: 32px;
    resize: none;
    width: 100%;
    border: none;
    font-size: 14px;
    line-height: 1.5;
    padding: 8px;
    color: #444444;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent
}

.ns-note .p-comments__inputMessage:focus {
    border: 1px solid #2CB696
}

.ns-note .p-comments__inputAction {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 8px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: none;
    transition: none
}

.ns-note .p-comments__inputAction.is-active {
    -webkit-transition: opacity 150ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: opacity 150ms cubic-bezier(0.42, 0, 0.58, 1);
    opacity: 1;
    pointer-events: auto
}

.ns-note .p-comments__inputAction--edit {
    opacity: 1;
    pointer-events: auto;
    position: static;
    bottom: auto;
    left: auto
}

.ns-note .p-comments__inputButton {
    width: 100px
}

.ns-note .p-comments__inputButton+.p-comments__inputButton {
    margin-left: 8px
}

.ns-note .p-comments__inputButton.is-disabled {
    pointer-events: none
}

.ns-note .p-comments__alertLabel {
    font-size: 14px;
    line-height: 1.5;
    color: #787c7b;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 24px;
    padding-bottom: 24px
}

.ns-note .p-comments__alertLabel--noborder {
    border-top: none
}

.ns-note .p-comments__alertLink {
    font-size: 14px;
    line-height: 1.5;
    color: #2CB696
}

.ns-note .p-keyCommand__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 8px
}

.ns-note .p-keyCommand__item:last-child {
    margin-bottom: 0
}

.ns-note .p-keyCommand__title {
    font-size: 14px;
    color: #222222;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.ns-note .p-keyCommand__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-keyCommand__key {
    color: #787c7b;
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    background-color: #f7f9f9;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Arial
}

.ns-note .p-keyCommand__separate {
    color: #787c7b;
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Arial
}

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

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

.ns-note .p-action .tooltip {
    z-index: 1;
    display: none !important
}

.ns-note .p-action__icon {
    display: inline-block;
    vertical-align: middle;
    padding: 4px;
    color: #A8ABB1
}

@media only screen and (min-width: 769px) {
    .ns-note .p-action__icon {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-action__icon:hover {
        color: #787C7B
    }
}

.ns-note .p-action__icon--like.is-active {
    color: #EA3F60
}

@media only screen and (min-width: 769px) {
    .ns-note .p-action__icon--like.is-active {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-action__icon--like.is-active:hover {
        color: #FF6885
    }
}

.ns-note .p-action__like {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.ns-note .p-action__like.is-active {
    color: #EA3F60
}

.ns-note .p-action__like.is-active>.renewal-p-action__icon>.renewal-p-icon--like,
.ns-note .p-action__like.is-active>.renewal-p-action__icon .p-icon--like,
.ns-note .p-action__like.is-active .p-action__icon>.renewal-p-icon--like,
.ns-note .p-action__like.is-active .p-action__icon .p-icon--like {
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/icon_like_active-6191aa37430c737fa3e75b4c6a2c49ed9306d0ae9998c4afe7a4bdcd0d405d12.svg) no-repeat
}

.ns-note .p-action__like.is-active>.renewal-p-action__count,
.ns-note .p-action__like.is-active .p-action__count {
    color: #EA3F60;
    display: none
}

.ns-note .p-action__like.is-animate .p-action__icon {
    -webkit-animation: effectSuki 280ms;
    animation: effectSuki 280ms
}

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

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

    56% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.ns-note .p-action__count {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 0 5px 5px;
    font-family: Open Sans, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #787c7b
}

.ns-note .p-action__count:hover {
    color: #787c7b
}

.ns-note .p-action__comment {
    margin-right: 0 !important;
    margin-left: auto
}

.ns-note .p-action__comment>a,
.ns-note .p-action__comment>*>a {
    font-size: 12px;
    color: #249f80
}

.ns-note .p-action__comment>a:hover,
.ns-note .p-action__comment>*>a:hover {
    color: #249f80
}

.ns-note .p-action__other {
    margin-right: 0 !important;
    margin-left: auto
}

.ns-note .p-action__social {
    margin-right: 0 !important;
    margin-left: auto
}

.ns-note .p-archiveList {
    background-color: #ffffff;
    margin-bottom: 8px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-archiveList {
        border: 1px solid #e6e6e6;
        margin-bottom: 24px
    }
}

.ns-note .p-archiveList__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 14px;
    position: relative
}

.ns-note .p-archiveList__headerLink {
    display: block;
    padding: 8px 16px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .ns-note .p-archiveList__headerLink {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-archiveList__headerLink:hover {
        color: #222222;
        background-color: #f7f9f9
    }
}

.ns-note .p-archiveList__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    font-size: 16px
}

.ns-note .p-archiveList__link {
    display: block;
    padding: 16px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .ns-note .p-archiveList__link {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-archiveList__link:hover {
        color: #222222;
        background-color: #f7f9f9
    }
}

.ns-note .p-archiveList__arw {
    position: absolute;
    pointer-events: none;
    right: 8px;
    top: 50%;
    color: #A8ABB1;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.ns-note .p-archiveList__count {
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-size: 12px;
    color: #787c7b;
    pointer-events: none
}

.ns-note .p-addHomescreenBanner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px;
    background-color: #f7f9f9
}

@media only screen and (min-width: 769px) {
    .ns-note .p-addHomescreenBanner {
        display: none
    }
}

.ns-note .p-addHomescreenBanner--type_ios .p-addHomescreenBanner__icon {
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05)
}

@media only screen and (max-width: 359px) {
    .ns-note .p-addHomescreenBanner--type_ios .p-addHomescreenBanner__icon {
        width: 40px;
        height: 40px;
        border-radius: 8px
    }
}

.ns-note .p-addHomescreenBanner__icon {
    width: 56px;
    height: 56px;
    margin-left: 8px;
    margin-right: 8px;
    overflow: hidden
}

.ns-note .p-addHomescreenBanner__app {
    width: 100%;
    height: 100%
}

.ns-note .p-addHomescreenBanner__caption {
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    font-size: 14px;
    font-weight: bold
}

@media only screen and (max-width: 359px) {
    .ns-note .p-addHomescreenBanner__caption {
        font-size: 12px
    }
}

.ns-note .p-addHomescreenBanner__button {
    padding: 8px
}

.ns-note .p-addHomescreenBanner__close {
    color: #A8ABB1
}

.ns-note .p-addHomescreenTutorial__step {
    counter-reset: item;
    margin-bottom: 16px
}

.ns-note .p-addHomescreenTutorial__stepItem {
    padding-left: 1.3em;
    margin-bottom: 4px;
    text-indent: -1.3em;
    padding-left: 1.3em
}

.ns-note .p-addHomescreenTutorial__stepItem:before {
    counter-increment: item;
    content: counter(item) ".";
    font-weight: bold
}

.ns-note .p-addHomescreenTutorial__img {
    width: 200px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 359px) {
    .ns-note .p-addHomescreenTutorial__img {
        width: 170px
    }
}

.ns-note .p-addHomescreenTutorial__img>img {
    width: 100%;
    height: auto
}

.ns-note .p-notificationBar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: #ffffff solid 1px;
    color: #ffffff;
    font-size: 12px
}

.ns-note .p-notificationBar:last-child {
    border-bottom: none
}

.ns-note .p-notificationBar--type_alert {
    background-color: #ED4956
}

.ns-note .p-notificationBar--type_warning {
    background-color: #F95
}

.ns-note .p-notificationBar--type_message {
    background-color: #41c9b4
}

.ns-note .p-notificationBar__message {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
    margin-right: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-notificationBar__message {
        margin-right: 8px;
        text-align: left
    }
}

.ns-note .p-notificationBar__message>a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline
}

.ns-note .p-notificationBar__close {
    width: 24px;
    height: 24px;
    color: #ffffff;
    cursur: pointer;
    opacity: .6
}

@media only screen and (min-width: 769px) {
    .ns-note .p-notificationBar__close:hover {
        opacity: 1
    }
}

.ns-note .p-timelinePost {
    padding: 8px;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    width: 580px;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media only screen and (max-width: 479px) {
    .ns-note .p-timelinePost {
        border: none;
        width: auto;
        margin-top: 0;
        border-radius: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05)
    }
}

.ns-note .p-timelinePost__field {
    background-color: #F7F9F9;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 4px;
    height: 30px;
    width: 100%;
    border-radius: 60px;
    cursor: text;
    margin-left: 8px
}

.ns-note .p-timelinePost__icon {
    width: 30px
}

.ns-note .p-timelinePost__image {
    width: 30px;
    height: 30px
}

.ns-note .p-timelinePost__label {
    font-size: 14px;
    opacity: 0.4;
    line-height: 1;
    margin-left: 8px
}

.ns-note .p-timelineNotification {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-timelineNotification__icon {
    margin-right: 8px;
    color: #787c7b;
    line-height: 1;
    display: inline-block
}

.ns-note .p-timelineNotification__description {
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    letter-spacing: -0.4em;
    font-size: 12px;
    line-height: 1.5;
    color: #787c7b;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%
}

.ns-note .p-timelineNotification__text {
    display: inline;
    letter-spacing: 0.04em
}

.ns-note .p-timelineNotification__link {
    display: inline
}

.ns-note .p-timelineNotification__link a {
    color: #787c7b;
    letter-spacing: 0.04em
}

@media only screen and (min-width: 769px) {
    .ns-note .p-timelineNotification__link a:hover {
        color: #222222
    }

    .ns-note .p-timelineNotification__link a:hover .p-timelineNotification__icon {
        color: #222222
    }
}

.ns-note .p-draftNoteList {
    border-top: rgba(0, 0, 0, 0.05) 1px solid
}

@media only screen and (max-width: 479px) {
    .ns-note .p-draftNoteList {
        padding-bottom: 32px
    }
}

.ns-note .p-draftNoteList__header {
    padding: 32px 32px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ns-note .p-draftNoteList__caption {
    font-size: 12px;
    color: #222222;
    font-weight: bold
}

.ns-note .p-draftNoteList__noteList {
    font-size: 12px;
    text-align: right
}

.ns-note .p-draftNoteList__noteList>a {
    color: #249f80
}

@media only screen and (min-width: 769px) {
    .ns-note .p-draftNoteList__noteList>a:hover {
        color: #209274
    }
}

.ns-note .p-draftNoteList__body {
    max-width: 428px;
    padding-bottom: 16px
}

.ns-note .p-draftNoteList__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 16px 32px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .ns-note .p-draftNoteList__link:hover {
        color: #222222;
        background-color: #f7f9f9
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-draftNoteList__link {
        padding: 8px 32px
    }
}

.ns-note .p-draftNoteList__title {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.5
}

@media only screen and (min-width: 769px) {
    .ns-note .p-draftNoteList__title:hover {
        color: #222222
    }
}

.ns-note .p-draftNoteList__date {
    padding-left: 16px;
    color: #a8abb1;
    font-size: 12px;
    white-space: nowrap
}

.ns-note .p-postNoteList {
    margin: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-postNoteList {
        margin: 16px
    }
}

.ns-note .p-postNoteList__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width: 479px) {
    .ns-note .p-postNoteList__body {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto
    }

    .ns-note .p-postNoteList__body:after {
        content: "";
        display: block;
        width: 33%
    }
}

.ns-note .p-postNoteList__item {
    padding: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-postNoteList__item {
        width: 33%;
        padding: 16px
    }
}

.ns-note .p-postNoteList__item.is-disabled .p-postNoteList__link {
    color: #ccc
}

.ns-note .p-postNoteList__link {
    display: block
}

.ns-note .p-postNoteList__link:hover {
    color: #209274
}

.ns-note .p-postNoteList__icon {
    display: block;
    width: 60px;
    height: 60px;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-postNoteList__icon {
        width: 100%;
        height: auto;
        margin-bottom: 8px
    }
}

.ns-note .p-postNoteList__img {
    width: 100%;
    height: 100%
}

.ns-note .p-postNoteList__label {
    font-size: 14px;
    display: block;
    text-align: center
}

.ns-note .p-sendMessage__payer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 152px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/achievements_bg_author-4362e2b177b110f4c4f84e91b0cdcd659871c2b042882ddfe23b487ac77aaed1.png);
    background-size: 380px 152px;
    background-position: center 2px;
    background-repeat: no-repeat
}

.ns-note .p-sendMessage__avatar {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%
}

.ns-note .p-sendMessage__message {
    font-size: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.ns-note .p-sendMessage__price {
    font-size: 14px;
    font-weight: bold;
    text-align: center
}

.ns-note .p-sendMessage__reply {
    margin-top: 24px
}

.ns-note .p-sendMessage__replyCaption {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px
}

.ns-note .p-sendMessage__replyTextarea {
    width: 100%;
    min-height: 80px;
    font-size: 12px
}

.ns-note .p-sendMessage__confirmmessage {
    margin-top: 24px
}

.ns-note .p-sendMessage__confirmmessageCaption {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px
}

.ns-note .p-sendMessage__confirmmessageBody {
    font-size: 14px
}

.ns-note .p-sendMessage__responseImg {
    width: 100%;
    height: auto
}

.ns-note .p-sendMessage__responseText {
    padding: 16px;
    font-size: 14px;
    font-weight: bold;
    text-align: center
}

.ns-note .p-usericonGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.ns-note .p-usericonGroup__label {
    font-size: 14px;
    color: #787c7b;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 8px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-usericonGroup__label {
        font-size: 12px
    }
}

.ns-note .p-usericonGroup__list {
    margin-right: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-usericonGroup__item {
    position: relative;
    margin-right: -4px;
    cursor: pointer
}

.ns-note .p-usericonGroup__item:before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-radius: 30px;
    border: 2px solid #ffffff;
    box-sizing: content-box
}

.ns-note .p-usericonGroup__item:last-child {
    margin-right: 0
}

.ns-note .p-usericonGroup__item:nth-child(1) {
    z-index: 8
}

.ns-note .p-usericonGroup__item:nth-child(2) {
    z-index: 7
}

.ns-note .p-usericonGroup__item:nth-child(3) {
    z-index: 6
}

.ns-note .p-usericonGroup__item:nth-child(4) {
    z-index: 5
}

.ns-note .p-usericonGroup__item:nth-child(5) {
    z-index: 4
}

.ns-note .p-usericonGroup__item:nth-child(6) {
    z-index: 3
}

.ns-note .p-usericonGroup__item:nth-child(7) {
    z-index: 2
}

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

.ns-note .p-userList {
    background-color: #ffffff;
    margin-bottom: 8px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-userList {
        border: 1px solid #e6e6e6;
        margin-bottom: 24px
    }
}

.ns-note .p-userList__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 16px
}

.ns-note .p-userList__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 1
}

.ns-note .p-userList__link a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block
}

.ns-note .p-userList__avatar {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.ns-note .p-userList__profile {
    margin-left: 16px;
    position: relative;
    z-index: 2;
    word-break: break-all
}

.ns-note .p-userList__name {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5
}

.ns-note .p-userList__id {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: #787c7b
}

.ns-note .p-userList__action {
    margin-left: auto;
    position: relative;
    z-index: 2;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.ns-note .p-userListCard {
    background-color: #ffffff;
    text-align: center;
    border-radius: 4px;
    padding: 16px 16px 48px;
    width: 100%;
    position: relative;
    border: 1px solid #e6e6e6;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .p-userListCard {
        -webkit-transition: none;
        transition: none
    }

    .ns-note .p-userListCard:hover {
        border: 1px solid rgba(0, 0, 0, 0.2)
    }
}

.ns-note .p-userListCard__link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0
}

.ns-note .p-userListCard__link a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block
}

.ns-note .p-userListCard__avatar {
    margin-bottom: 8px;
    display: inline-block;
    vertical-align: top;
    width: 64px;
    position: relative;
    z-index: 1
}

.ns-note .p-userListCard__title {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 8px;
    position: relative;
    word-break: break-all;
    z-index: 1
}

.ns-note .p-userListCard__title i {
    display: inline-block
}

.ns-note .p-userListCard__description {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: #787c7b
}

.ns-note .p-userListCard__action {
    position: absolute;
    z-index: 1;
    bottom: 16px;
    left: 0;
    width: 100%;
    text-align: center
}

.ns-note .p-userListCard__action a.ng-enter,
.ns-note .p-userListCard__action a.ng-leave,
.ns-note .p-userListCard__action a.ng-enter-active,
.ns-note .p-userListCard__action a.ng-leave-active {
    -webkit-transition: none;
    transition: none
}

.ns-note .p-paginate {
    margin-top: 32px;
    margin-bottom: 32px
}

.ns-note .p-paginate__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note .p-paginate__item {
    min-width: 32px;
    height: 32px;
    margin-left: 4px;
    margin-right: 4px;
    padding-bottom: 1px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-paginate__item.is-active>a {
    border-color: #41c9b4;
    color: #41c9b4
}

.ns-note .p-paginate__item.is-disabled {
    pointer-events: none
}

.ns-note .p-paginate__item>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border-style: solid;
    border-width: 1px;
    padding: 0 4px;
    border-radius: 32px;
    border-color: transparent
}

@media only screen and (min-width: 769px) {
    .ns-note .p-paginate__item>a:hover {
        color: #41c9b4
    }
}

.ns-note .p-contestHashtagSelector__caption {
    margin-bottom: 4px
}

.ns-note .p-contestHashtagSelector__description {
    margin-top: 8px;
    font-size: 12px
}

.ns-note .p-contestHashtagSelector__alert {
    margin-top: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #F95;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-contestHashtagSelector__label {
    line-height: 16px
}

.ns-note .p-contestHashtagSelector__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 6px 0 5px
}

.ns-note .p-contestHashtagSelector__item:last-child {
    border-bottom: none
}

.ns-note .p-contestHashtagSelector__hashtag {
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    padding-right: 8px
}

.ns-note .p-contestHashtagSelector__hashtagLabel {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 4px 8px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background-color: #ffffff
}

@media only screen and (min-width: 769px) {
    .ns-note .p-contestHashtagSelector__hashtagLabel:hover {
        border: 1px solid rgba(0, 0, 0, 0.2)
    }
}

.ns-note .p-contestHashtagSelector__detail a {
    display: inline-block;
    color: #A8ABB1
}

@media only screen and (min-width: 769px) {
    .ns-note .p-contestHashtagSelector__detail a:hover {
        color: #787C7B
    }
}

.ns-note .p-editorCounter {
    position: fixed;
    top: 72px;
    right: 32px;
    z-index: 0;
    font-size: 14px;
    color: #787c7b
}

@media only screen and (max-width: 479px) {
    .ns-note .p-editorCounter {
        display: none
    }
}

.ns-note .p-supportRecommend__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-supportRecommend__checkbox {
    margin-top: 0px;
    margin-right: 0px
}

.ns-note .p-supportRecommend__text {
    font-weight: normal;
    text-align: right;
    margin-left: 4px;
    margin-right: 4px
}

.ns-note .p-supportRecommend__help {
    color: #A8ABB1
}

.ns-note .p-searchNavigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .p-searchNavigation__column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-searchNavigation__column--right {
    margin-left: auto
}

.ns-note .p-searchNavigation__column--right .p-searchNavigation__item {
    margin-left: 8px
}

.ns-note .p-searchNavigation__column--left {
    margin-right: auto
}

.ns-note .p-searchNavigation__column--left .p-searchNavigation__item {
    margin-right: 8px
}

.ns-note .p-notificationListWelcome {
    display: none
}

.ns-note .p-notificationListWelcome__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px
}

.ns-note .p-notificationListWelcome__avatar {
    margin-right: 10px
}

.ns-note .p-notificationListWelcome__title {
    text-decoration: underline
}

.ns-note .p-notificationListWelcome__sub {
    color: #787c7b;
    font-size: 11px
}

.ns-note .loading-animation.ng-hide~.p-notificationListWelcome {
    display: block
}

.ns-note .p-badgeList__example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px 32px 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeList__example {
        padding: 16px 0
    }
}

.ns-note .p-badgeList__exampleIcon {
    padding-right: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-badgeList__exampleIconImg {
    width: 56px;
    height: 56px;
    border-radius: 50%
}

.ns-note .p-badgeList__exampleText {
    font-size: 14px;
    color: #787c7b
}

.ns-note .p-badgeList__example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 32px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeList__example {
        padding: 8px 16px 32px
    }
}

.ns-note .p-badgeList__exampleIcon {
    padding-right: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ns-note .p-badgeList__exampleIconImg {
    width: 56px;
    height: 56px;
    border-radius: 50%
}

.ns-note .p-badgeList__exampleText {
    font-size: 14px;
    color: #787c7b
}

.ns-note .p-badgeList__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.ns-note .p-badgeList__item {
    margin-bottom: 8px;
    width: calc(25% - 8px);
    margin-left: 4px;
    margin-right: 4px;
    padding: 16px 8px;
    cursor: pointer;
    border: #e6e6e6 1px solid;
    border-radius: 4px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-badgeList__item {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-badgeList__item:hover {
        border-color: rgba(0, 0, 0, 0.2)
    }

    .ns-note .p-badgeList__item:hover .p-badgeList__icon.is-new:before {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    .ns-note .p-badgeList__item:hover .p-badgeList__itemBody:after {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .ns-note .p-badgeList__item:hover .p-badgeList__iconImage {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeList__item {
        width: calc(33% - 8px)
    }
}

.ns-note .p-badgeList__itemBody {
    position: relative;
    text-align: center
}

.ns-note .p-badgeList__itemBody.is-contest:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 56px;
    height: 70.56px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/badges/ribbon-ea42ff5afdfb991060d5431ddef13b073bcf05b40f24b7c422f42240d6471395.svg);
    background-repeat: no-repeat;
    background-size: 56px 70.56px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-badgeList__itemBody.is-contest:after {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeList__itemBody.is-contest:after {
        width: 40px;
        height: 50.4px;
        background-size: 40px 50.4px
    }
}

.ns-note .p-badgeList__itemBody.is-contest .p-badgeList__icon {
    margin-bottom: 24px
}

.ns-note .p-badgeList__icon {
    position: relative;
    width: 56px;
    height: 56px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    text-align: center;
    z-index: 2
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeList__icon {
        width: 40px;
        height: 40px
    }
}

.ns-note .p-badgeList__icon.is-new:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background-color: #41c9b4;
    border: 2px solid #ffffff;
    border-radius: 50%;
    z-index: 1;
    -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
    transition: all 200ms cubic-bezier(1, 0, 0, 1)
}

.ns-note .p-badgeList__iconImage {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

@media only screen and (min-width: 769px) {
    .ns-note .p-badgeList__iconImage {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }
}

.ns-note .p-badgeDetail__title {
    padding: 24px;
    font-size: 18px;
    text-align: center;
    font-weight: bold
}

.ns-note .p-badgeDetail__status {
    position: relative;
    width: 260px;
    height: 260px;
    margin: auto
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeDetail__status {
        width: 220px;
        height: 220px
    }
}

.ns-note .p-badgeDetail__status.is-contest:after {
    content: "";
    display: block;
    position: absolute;
    top: 28px;
    left: 50%;
    width: 208px;
    height: 262.08px;
    margin-left: -104px;
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/badges/ribbon-ea42ff5afdfb991060d5431ddef13b073bcf05b40f24b7c422f42240d6471395.svg);
    background-repeat: no-repeat;
    background-size: 208px 262.08px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeDetail__status.is-contest:after {
        top: 32px;
        width: 168px;
        height: 211.68px;
        background-size: 168px 211.68px;
        margin-left: -84px
    }
}

.ns-note .p-badgeDetail__status.is-achieved {
    margin-bottom: 16px
}

.ns-note .p-badgeDetail__status.is-gold .p-badgeDetail__icon {
    opacity: .4
}

.ns-note .p-badgeDetail__status.is-gold .p-badgeDetail__count {
    color: #eca726
}

.ns-note .p-badgeDetail__status.is-silver .p-badgeDetail__icon {
    opacity: .4
}

.ns-note .p-badgeDetail__status.is-silver .p-badgeDetail__count {
    color: #a3aebb
}

.ns-note .p-badgeDetail__status.is-bronze .p-badgeDetail__icon {
    opacity: .4
}

.ns-note .p-badgeDetail__status.is-bronze .p-badgeDetail__count {
    color: #8b5528
}

.ns-note .p-badgeDetail__progress {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeDetail__progress {
        width: 220px;
        height: 220px
    }
}

.ns-note .p-badgeDetail__progress:before {
    content: "";
    margin: 5%;
    position: absolute;
    border-radius: 50%;
    background-color: #ffffff;
    width: 90%;
    height: 90%
}

.ns-note .p-badgeDetail__count {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #eca726;
    font-size: 50px;
    font-weight: bold;
    z-index: 2
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeDetail__count {
        font-size: 40px
    }
}

.ns-note .p-badgeDetail__icon {
    position: absolute;
    top: 8%;
    right: 8%;
    bottom: 8%;
    left: 8%;
    z-index: 1;
    opacity: 1
}

.ns-note .p-badgeDetail__iconImage {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.ns-note .p-badgeDetail__description {
    padding: 24px;
    color: #787c7b;
    font-size: 14px;
    text-align: center
}

.ns-note .p-badgeDetail__onboarding {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 16px;
    margin: 16px;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.ns-note .p-badgeDetail__onboardingIcon {
    margin-right: 16px;
    size: 80px
}

.ns-note .p-badgeDetail__onboardingTitle {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 4px
}

.ns-note .p-badgeDetail__onboardingText {
    font-size: 14px;
    color: darkgray;
    padding-bottom: 8px
}

.ns-note .p-badgeDetail__collection {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 16px 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeDetail__collection {
        margin-left: 0;
        margin-right: 0
    }
}

.ns-note .p-badgeDetail__collectionItem {
    width: 25%;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-badgeDetail__collectionItem {
        width: 33%;
        padding: 8px
    }
}

.ns-note .p-badgeDetail__collectionItem.is-achieved.is-bronze .p-badgeDetail__collectionLabel {
    color: #8b5528
}

.ns-note .p-badgeDetail__collectionItem.is-achieved.is-silver .p-badgeDetail__collectionLabel {
    color: #a3aebb
}

.ns-note .p-badgeDetail__collectionItem.is-achieved.is-gold .p-badgeDetail__collectionLabel {
    color: #eca726
}

.ns-note .p-badgeDetail__collectionIcon {
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px
}

.ns-note .p-badgeDetail__collectionIconImage {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.ns-note .p-badgeDetail__collectionLabel {
    color: #ccc;
    font-size: 12px;
    font-weight: bold;
    text-align: center
}

.ns-note .p-badgeDetail__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 3px 3px;
    background-color: #f2f4f4
}

.ns-note .p-settings {
    margin-bottom: 16px;
    width: 100%;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings {
        margin-top: -10px
    }
}

.ns-note .p-settings__header {
    padding-top: 32px;
    text-align: center;
    margin-bottom: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-settings__header {
        margin-bottom: 8px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-settings__header {
        padding-top: 24px;
        background-color: #ffffff;
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 8px
    }
}

.ns-note .p-settings__title {
    font-size: 20px;
    font-weight: bold;
    padding: 0 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media only screen and (max-width: 479px) {
    .ns-note .p-settings__title {
        font-size: 18px;
        padding-left: 16px;
        padding-right: 16px;
        text-align: left
    }
}

.ns-note .p-settings__nav {
    margin-top: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-settings__nav {
        margin-top: 16px
    }
}

.ns-note .p-settings__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-settings__body {
        display: block
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-settings__body {
        display: block
    }
}

.ns-note .p-settings__main {
    width: 100%
}

.ns-note .p-settings__mainInner {
    max-width: 610px;
    margin: auto;
    padding: 24px;
    background-color: #ffffff;
    border-radius: 4px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__mainInner {
        padding: 16px;
        border-radius: 0
    }
}

.ns-note .p-settings__sub {
    max-width: 610px;
    width: 290px;
    margin-left: 40px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__sub {
        margin-left: auto;
        margin-right: auto;
        width: auto;
        margin-bottom: 8px;
        border-bottom: 1px solid #f2f2f2
    }
}

.ns-note .p-settings__subItem {
    margin-bottom: 32px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__subItem {
        margin-bottom: 8px
    }
}

.ns-note .p-settings__subItem:last-child {
    margin-bottom: 0
}

.ns-note .p-settings__card {
    background-color: #ffffff;
    padding: 16px
}

.ns-note .p-settings__card+.p-settings__card {
    margin-top: 16px
}

.ns-note .p-settings__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    font-size: 16px
}

.ns-note .p-settings__link {
    display: block;
    padding: 16px;
    color: #787c7b
}

@media only screen and (min-width: 769px) {
    .ns-note .p-settings__link {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-settings__link:hover {
        color: #222222;
        background-color: #f7f9f9
    }
}

.ns-note .p-settings__read {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 24px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__read {
        padding: 16px;
        border-bottom: 1px solid #f2f2f2;
        border-radius: 0
    }
}

.ns-note .p-settings__readItem {
    border-top: 1px solid #f2f2f2;
    padding-top: 16px;
    margin-top: 16px
}

.ns-note .p-settings__readTitle {
    font-size: 16px;
    font-weight: bold;
    position: relative
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__readTitle {
        color: #787c7b
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__readTitle.is-open+.p-settings__readBody {
        display: block
    }
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__readBody {
        display: none
    }
}

.ns-note .p-settings__readBooks {
    background-color: #f7f9f9;
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 16px
}

.ns-note .p-settings__readBooksImage {
    margin-right: 16px
}

.ns-note .p-settings__readBooksImage img {
    width: 60px;
    border: 1px solid #f2f2f2
}

@media only screen and (max-width: 479px) {
    .ns-note .p-settings__readBooksImage img {
        width: 40px
    }
}

.ns-note .p-settings__readBooksDescription {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 12px
}

.ns-note .p-settings__readBooksLink {
    width: 100%;
    margin-top: 16px;
    display: block
}

.ns-note .p-settings__readBooksLink a {
    font-size: 14px;
    display: block;
    color: #2CB696
}

.ns-note .p-settings__readBooksLink a+a {
    margin-top: 8px
}

.ns-note .p-settings__readBooksDisabled {
    color: #787c7b !important;
    cursor: default
}

.ns-note .p-settings__onboarding {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 24px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__onboarding {
        padding: 16px;
        border-bottom: 1px solid #f2f2f2;
        border-radius: 0
    }
}

.ns-note .p-settings__onboardingTitle {
    font-size: 16px;
    font-weight: bold;
    position: relative
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__onboardingTitle {
        display: none
    }
}

.ns-note .p-settings__onboardingItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #f2f2f2;
    padding-top: 16px;
    margin-top: 16px
}

@media only screen and (max-width: 768px) {
    .ns-note .p-settings__onboardingItem {
        border-top: none;
        padding-top: 0;
        margin-top: 0
    }
}

.ns-note .p-settings__onboardingItemLink {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 8px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-settings__onboardingItemLink:hover .p-settings__onboardingItemLabel {
        color: #787c7b
    }
}

.ns-note .p-settings__onboardingItemIcon {
    padding-right: 16px
}

.ns-note .p-settings__onboardingItemIconImage {
    width: 32px;
    height: 32px;
    border-radius: 50%
}

.ns-note .p-settings__onboardingItemIconImage--type_twitter {
    padding: 4px;
    color: #ffffff;
    background-color: #55acee
}

.ns-note .p-settings__onboardingItemLabel {
    font-size: 14px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-settings__onboardingItemLabel {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }
}

.ns-note .p-settings__onboardingItemDescription {
    color: #787c7b
}

.ns-note .p-settings__onboardingItemClose {
    color: #A8ABB1;
    line-height: 1;
    cursor: pointer
}

@media only screen and (min-width: 769px) {
    .ns-note .p-settings__onboardingItemClose {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-settings__onboardingItemClose:hover {
        color: #787C7B
    }
}

.ns-note .p-holidayInfo {
    font-size: 14px;
    color: #F95;
    font-weight: bold;
    text-align: center
}

@media only screen and (max-width: 479px) {
    .ns-note .p-holidayInfo {
        text-align: left
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-holidayInfo>br {
        display: none
    }
}

.ns-note .p-signup {
    padding: 0 0 200px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup {
        position: relative;
        padding-bottom: 216px
    }
}

.ns-note .p-signup__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 40px;
    padding: 16px 32px;
    background-color: #ffffff;
    border: solid #f2f2f2;
    border-width: 0 0 1px 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__head {
        margin-bottom: 24px;
        padding: 8px 16px
    }
}

.ns-note .p-signup__toSigninLink {
    color: #787c7b;
    font-size: 12px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-signup__toSigninLink {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-signup__toSigninLink:hover {
        color: #222222
    }
}

.ns-note .p-signup__body {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-signup__body {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__body {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0 16px
    }
}

.ns-note .p-signup__introduction {
    box-sizing: border-box;
    width: 50%;
    margin-top: 40px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-signup__introduction {
        margin-top: 0;
        margin-right: 40px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__introduction {
        display: none
    }
}

.ns-note .p-signup__title {
    margin-bottom: 16px;
    font-size: 36px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__title {
        font-size: 32px;
        text-align: center
    }
}

.ns-note .p-signup__description {
    line-height: 1.5
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__description {
        font-size: 12px
    }
}

.ns-note .p-signup__description>p {
    font-size: 16px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-signup__description>p {
        font-size: 14px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__description>p {
        font-size: 12px
    }
}

.ns-note .p-signup__description>p>a {
    color: #2CB696
}

.ns-note .p-signup__description>p+p {
    margin-top: 8px
}

.ns-note .p-signup__more {
    font-size: 16px;
    line-height: 1.5
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__more {
        font-size: 12px
    }
}

.ns-note .p-signup__more>a {
    color: #2cb696
}

.ns-note .p-signup__main {
    width: 50%
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__main {
        width: 100%
    }
}

.ns-note .p-signup__form {
    box-sizing: border-box;
    width: 360px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #e6e6e6;
    background-color: #ffffff;
    border-radius: 4px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-signup__form {
        width: 100%
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-signup__form {
        width: 100%
    }
}

.ns-note .p-login {
    padding: 0 0 200px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-login {
        position: relative;
        padding-bottom: 216px
    }
}

.ns-note .p-login__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 40px;
    padding: 16px 32px;
    background-color: #ffffff;
    border: solid #f2f2f2;
    border-width: 0 0 1px 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-login__head {
        margin-bottom: 24px;
        padding: 8px 16px
    }
}

.ns-note .p-login__toSigninLink {
    color: #787c7b;
    font-size: 12px
}

@media only screen and (min-width: 769px) {
    .ns-note .p-login__toSigninLink {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-login__toSigninLink:hover {
        color: #222222
    }
}

.ns-note .p-login__body {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-login__body {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-login__body {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0 16px
    }
}

.ns-note .p-login__main {
    width: 100%
}

.ns-note .p-login__form {
    box-sizing: border-box;
    width: 360px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #e6e6e6;
    background-color: #ffffff;
    border-radius: 4px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-login__form {
        width: 100%
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-login__form {
        width: 100%
    }
}

.ns-note .p-login__aboutConnectSNS {
    color: #787c7b;
    text-decoration: underline
}

@media only screen and (min-width: 769px) {
    .ns-note .p-login__aboutConnectSNS {
        -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
        transition: all 200ms cubic-bezier(1, 0, 0, 1)
    }

    .ns-note .p-login__aboutConnectSNS:hover {
        color: #222222
    }
}

.ns-note .p-authorization {
    padding: 0 0 200px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-authorization {
        position: relative;
        padding-bottom: 216px
    }
}

.ns-note .p-authorization__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 40px;
    padding: 16px 32px;
    background-color: #ffffff;
    border: solid #f2f2f2;
    border-width: 0 0 1px 0
}

@media only screen and (max-width: 479px) {
    .ns-note .p-authorization__head {
        margin-bottom: 24px;
        padding: 8px 16px
    }
}

.ns-note .p-authorization__body {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 940px;
    margin: 0 auto
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-authorization__body {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 32px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-authorization__body {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0 16px
    }
}

.ns-note .p-authorization__main {
    width: 100%
}

.ns-note .p-authorization__userImage {
    border-radius: 50%;
    width: 104px;
    margin-bottom: 16px
}

.ns-note .p-authorization__description {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 24px
}

.ns-note .p-authorization__button {
    color: #ffffff;
    background-color: #2cb696;
    min-width: 100%;
    border: none;
    padding: 0 16px;
    min-height: 40px;
    border-radius: 4px;
    margin-bottom: 16px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-authorization__button {
        font-size: 16px;
        font-weight: bold
    }
}

.ns-note .p-authorization__toLogin {
    font-size: 12px;
    border: none;
    background-color: #ffffff;
    border-bottom: 1px solid #222222
}

.ns-note .p-authorization__form {
    text-align: center;
    box-sizing: border-box;
    width: 360px;
    margin: 0 auto;
    padding: 80px;
    border: 1px solid #e6e6e6;
    background-color: #ffffff;
    border-radius: 4px
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note .p-authorization__form {
        width: 100%
    }
}

@media only screen and (max-width: 479px) {
    .ns-note .p-authorization__form {
        padding: 40px;
        width: 100%
    }
}

.ns-note .p-snsConfirmation__title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 24px
}

@media only screen and (max-width: 479px) {
    .ns-note .p-snsConfirmation__title {
        font-size: 18px
    }
}

.ns-note .p-snsConfirmation__description {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px
}

.ns-note .p-snsConfirmation__attention {
    list-style-type: disc;
    padding-left: 24px
}

.ns-note .p-snsConfirmation__attentionItem {
    list-style-type: disc;
    margin-bottom: 4px
}

.ns-note .p-snsConfirmation__attentionItem:last-child {
    margin-bottom: 0
}

.ns-note .p-snsConfirmation__attentionItemAside {
    display: block;
    color: #787c7b;
    font-size: 12px
}

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

    .ns-note *[data-tooltip]:hover,
    .ns-note *[data-tooltip]:focus {
        position: relative
    }

    .ns-note *[data-tooltip]:hover:after,
    .ns-note *[data-tooltip]:focus:after {
        position: absolute;
        display: block;
        max-width: 200px;
        padding: 4px 8px;
        overflow: hidden;
        font-weight: normal;
        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-radius: 4px;
        border: 1px solid #f2f2f2;
        opacity: 0;
        font-size: 12px;
        -webkit-animation: tooltipAnimation 200ms forwards cubic-bezier(1, 0, 0, 1) 200ms;
        animation: tooltipAnimation 200ms forwards cubic-bezier(1, 0, 0, 1) 200ms;
        top: -8px;
        left: calc(50% - 0px);
        -webkit-transform: translateX(-50%) translateY(-100%);
        transform: translateX(-50%) translateY(-100%);
        color: #787c7b;
        background-color: #f7f9f9
    }

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

        to {
            opacity: 1
        }
    }

    @keyframes tooltipAnimation {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }
}

.ns-note .u-textBold {
    font-weight: bold
}

.ns-note .u-textGrey {
    color: #787c7b
}

.ns-note .u-alignCenter {
    text-align: center
}

.ns-note .u-alignRight {
    text-align: right
}

.ns-note .u-textXS {
    font-size: 10px
}

.ns-note .u-textS {
    font-size: 11px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-textS {
        font-size: 10px
    }
}

.ns-note .u-bgGrey {
    background: #f2f4f4
}

.ns-note .u-greyBox {
    background: #f2f4f4;
    border: 1px solid #e8eceb
}

.ns-note .u-width40 {
    width: 40px
}

.ns-note .u-widthFull {
    width: 100%
}

.ns-note .u-minWidth40 {
    min-width: 40px
}

.ns-note .u-linkPrimary {
    color: #249f80
}

.ns-note .u-linkPrimary:hover {
    color: #249f80;
    text-decoration: underline
}

.ns-note .u-linkDisabled {
    color: #ccc;
    cursor: default
}

.ns-note .u-linkDisabled:hover {
    color: #ccc
}

.ns-note .u-linkDanger {
    color: #ED4956
}

.ns-note .u-linkDanger:hover {
    color: #ED4956;
    text-decoration: underline
}

.ns-note .u-cursorDefault {
    cursor: default
}

.ns-note .u-cursorPointer {
    cursor: pointer
}

.ns-note .pointer-events {
    pointer-events: auto
}

.ns-note .u-mbNone {
    margin-bottom: 0
}

.ns-note .u-mbXXXS {
    margin-bottom: 3px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mbXXXS {
        margin-bottom: 2px
    }
}

.ns-note .u-mbXXS {
    margin-bottom: 5px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mbXXS {
        margin-bottom: 3px
    }
}

.ns-note .u-mbXS {
    margin-bottom: 10px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mbXS {
        margin-bottom: 5px
    }
}

.ns-note .u-mbS {
    margin-bottom: 15px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mbS {
        margin-bottom: 10px
    }
}

.ns-note .u-mbS {
    margin-bottom: 15px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mbS {
        margin-bottom: 10px
    }
}

.ns-note .u-mbM {
    margin-bottom: 30px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mbM {
        margin-bottom: 20px
    }
}

.ns-note .u-mbL {
    margin-bottom: 40px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mbL {
        margin-bottom: 30px
    }
}

.ns-note .u-mbXL {
    margin-bottom: 50px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mbXL {
        margin-bottom: 40px
    }
}

.ns-note .u-mtXS {
    margin-top: 10px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mtXS {
        margin-top: 5px
    }
}

.ns-note .u-mtS {
    margin-top: 15px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mtS {
        margin-top: 10px
    }
}

.ns-note .u-mtM {
    margin-top: 30px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mtM {
        margin-top: 20px
    }
}

.ns-note .u-mtL {
    margin-top: 40px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mtL {
        margin-top: 30px
    }
}

.ns-note .u-mlAuto {
    margin-left: auto
}

.ns-note .u-mlXXXS {
    margin-left: 3px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mlXXXS {
        margin-left: 2px
    }
}

.ns-note .u-mlXXS {
    margin-left: 5px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mlXXS {
        margin-left: 3px
    }
}

.ns-note .u-mlXS {
    margin-left: 10px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mlXS {
        margin-left: 5px
    }
}

.ns-note .u-mlS {
    margin-left: 15px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mlS {
        margin-left: 10px
    }
}

.ns-note .u-mrXXXS {
    margin-right: 3px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mrXXXS {
        margin-right: 2px
    }
}

.ns-note .u-mrXXS {
    margin-right: 5px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mrXXS {
        margin-right: 3px
    }
}

.ns-note .u-mrXS {
    margin-right: 10px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mrXS {
        margin-right: 5px
    }
}

.ns-note .u-mrS {
    margin-right: 15px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-mrS {
        margin-right: 10px
    }
}

.ns-note .u-mlrAuto {
    margin-left: auto;
    margin-right: auto
}

.ns-note .u-pS {
    padding: 15px
}

@media only screen and (max-width: 479px) {
    .ns-note .u-pS {
        padding: 10px
    }
}

.ns-note .u-displayPc {
    display: block
}

@media only screen and (max-width: 768px) {
    .ns-note .u-displayPc {
        display: none
    }
}

.ns-note .u-displayPcTablet {
    display: block
}

@media only screen and (max-width: 479px) {
    .ns-note .u-displayPcTablet {
        display: none
    }
}

.ns-note .u-displaySp {
    display: none
}

@media only screen and (max-width: 479px) {
    .ns-note .u-displaySp {
        display: block
    }
}

.ns-note .u-displayTabletSp {
    display: none
}

@media only screen and (max-width: 768px) {
    .ns-note .u-displayTabletSp {
        display: block
    }
}

.ns-note .u-flexboxBasic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ns-note .u-flexboxCenter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ns-note.popeye-modal-container {
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 120 !important
}

.ns-note.popeye-modal-container .popeye-modal {
    color: #222222;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-kerning: normal;
    font-kerning: normal;
    padding: 0 !important;
    width: 380px !important
}

.ns-note.popeye-modal-container .popeye-modal .popeye-close-modal {
    display: none
}

.ns-note .ng-hide.button-relative--modal.button-high {
    display: none !important
}

.ns-note .drop-box {
    background: #f8f8f8;
    border: 5px dashed #dddddd;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    width: 200px;
    height: 65px;
    text-align: center;
    padding-top: 35px
}

.ns-note .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 100%;
    clear: both
}

.ns-note .video-container iframe,
.ns-note .video-container object,
.ns-note .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ns-note.bg-white {
    background-color: #fff
}

.ns-note.bg-default {
    background-color: #f7f9f9
}

.ns-note.is-signup {
    min-height: 100vh;
    /*background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/signup/bg-8084d99eb99684a2460fdaaba6eac0c080da1cea5f22f87c3c8f39f3e8678114.png) calc(50% - 240px) bottom repeat-x;*/
    /*background-size: 2194px 500px*/
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note.is-signup {
        background-position: 50% bottom;
        background-size: 1316px 300px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note.is-signup {
        background-position: 50% bottom;
        background-size: 877px 200px
    }
}

.ns-note.is-login {
    min-height: 100vh;
    /*background: url(https://d2l930y2yx77uc.cloudfront.net/assets/renewal/signup/bg-8084d99eb99684a2460fdaaba6eac0c080da1cea5f22f87c3c8f39f3e8678114.png) calc(50% - 300px) bottom repeat-x;*/
    /*background-size: 1491px 340px*/
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .ns-note.is-login {
        background-position: 50% bottom;
        background-size: 1316px 300px
    }
}

@media only screen and (max-width: 479px) {
    .ns-note.is-login {
        background-position: 50% bottom;
        background-size: 877px 200px
    }
}

.ns-note .hidden {
    display: none !important
}

/*! 
 * angular-loading-bar v0.6.0
 * https://chieffancypants.github.io/angular-loading-bar
 * Copyright (c) 2014 Wes Cruver
 * License: MIT
 */
#loading-bar,
#loading-bar-spinner {
    pointer-events: none;
    -webkit-pointer-events: none;
    -webkit-transition: 350ms linear all;
    transition: 350ms linear all
}

#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
    opacity: 0
}

#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
    opacity: 1
}

#loading-bar .bar {
    -webkit-transition: width 350ms;
    transition: width 350ms;
    background: #29d;
    position: fixed;
    z-index: 10002;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-bottom-right-radius: 1px;
    border-top-right-radius: 1px
}

#loading-bar .peg {
    position: absolute;
    width: 70px;
    right: 0;
    top: 0;
    height: 2px;
    opacity: .45;
    -ms-box-shadow: #29d 1px 0 6px 1px;
    box-shadow: #29d 1px 0 6px 1px;
    border-radius: 100%
}

#loading-bar-spinner {
    display: block;
    position: fixed;
    z-index: 10002;
    top: 10px;
    left: 10px
}

#loading-bar-spinner .spinner-icon {
    width: 14px;
    height: 14px;
    border: solid 2px transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius: 10px;
    -webkit-animation: loading-bar-spinner 400ms linear infinite;
    animation: loading-bar-spinner 400ms linear infinite
}

@-webkit-keyframes loading-bar-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes loading-bar-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
    display: none !important
}

ng\:form {
    display: block
}

.ng-animate-shim {
    visibility: hidden
}

.ng-anchor {
    position: absolute
}

.angucomplete-holder {
    position: relative
}

.angucomplete-dropdown {
    border-color: #ececec;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    width: 250px;
    padding: 6px;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    margin-top: -6px;
    background-color: #ffffff
}

.angucomplete-searching {
    color: #acacac;
    font-size: 14px
}

.angucomplete-description {
    font-size: 14px
}

.angucomplete-row {
    padding: 5px;
    color: #000000;
    margin-bottom: 4px;
    clear: both
}

.angucomplete-selected-row {
    background-color: lightblue;
    color: #ffffff
}

.angucomplete-image-holder {
    padding-top: 2px;
    float: left;
    margin-right: 10px;
    margin-left: 5px
}

.angucomplete-image {
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border-color: #ececec;
    border-style: solid;
    border-width: 1px
}

.angucomplete-image-default {
    background-position: center;
    background-size: contain;
    height: 34px;
    width: 34px
}

tags-input {
    display: block
}

tags-input *,
tags-input *:before,
tags-input *:after {
    box-sizing: border-box
}

tags-input .host {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 100%
}

tags-input .host:active {
    outline: none
}

tags-input .tags {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    padding: 1px;
    overflow: hidden;
    word-wrap: break-word;
    cursor: text;
    background-color: white;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;
    height: 100%
}

tags-input .tags.focused {
    outline: none;
    box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6)
}

tags-input .tags .tag-list {
    margin: 0;
    padding: 0;
    list-style-type: none
}

tags-input .tags .tag-item {
    margin: 2px;
    padding: 0 5px;
    display: inline-block;
    float: left;
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 26px;
    line-height: 25px;
    border: 1px solid #acacac;
    border-radius: 3px;
    background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
    background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%)
}

tags-input .tags .tag-item.selected {
    background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
    background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%)
}

tags-input .tags .tag-item .remove-button {
    margin: 0 0 0 5px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    vertical-align: middle;
    font: bold 16px Arial, sans-serif;
    color: #585858
}

tags-input .tags .tag-item .remove-button:active {
    color: red
}

tags-input .tags .input {
    border: 0;
    outline: none;
    margin: 2px;
    padding: 0;
    padding-left: 5px;
    float: left;
    height: 26px;
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif
}

tags-input .tags .input.invalid-tag {
    color: red
}

tags-input .tags .input::-ms-clear {
    display: none
}

tags-input.ng-invalid .tags {
    box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6)
}

tags-input[disabled] .host:focus {
    outline: none
}

tags-input[disabled] .tags {
    background-color: #eeeeee;
    cursor: default
}

tags-input[disabled] .tags .tag-item {
    opacity: 0.65;
    background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
    background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%)
}

tags-input[disabled] .tags .tag-item .remove-button {
    cursor: default
}

tags-input[disabled] .tags .tag-item .remove-button:active {
    color: #585858
}

tags-input[disabled] .tags .input {
    background-color: #eeeeee;
    cursor: default
}

tags-input .autocomplete {
    margin-top: 5px;
    position: absolute;
    padding: 5px 0;
    z-index: 999;
    width: 100%;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
}

tags-input .autocomplete .suggestion-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 280px;
    overflow-y: auto;
    position: relative
}

tags-input .autocomplete .suggestion-item {
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: black;
    background-color: white
}

tags-input .autocomplete .suggestion-item.selected {
    color: white;
    background-color: #0097cf
}

tags-input .autocomplete .suggestion-item.selected em {
    color: white;
    background-color: #0097cf
}

tags-input .autocomplete .suggestion-item em {
    font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: black;
    background-color: white
}

._exradicated-tooltip {
    display: block;
    opacity: 1;
    position: absolute;
    z-index: 999
}

tooltip {
    display: inline-block;
    position: relative
}

@-webkit-keyframes animate-tooltip {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    60% {
        opacity: .8
    }

    70% {
        opacity: .9
    }

    90% {
        opacity: 1
    }
}

@keyframes animate-tooltip {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    60% {
        opacity: .8
    }

    70% {
        opacity: .9
    }

    90% {
        opacity: 1
    }
}

tooltip._multiline {
    display: block
}

tooltip._slow._ready tip {
    -webkit-animation: animate-tooltip 0.65s;
    animation: animate-tooltip 0.65s
}

tooltip._fast._ready tip {
    -webkit-animation: animate-tooltip 0.15s;
    animation: animate-tooltip 0.15s
}

tooltip._steady._ready tip {
    -webkit-animation: animate-tooltip 0.35s;
    animation: animate-tooltip 0.35s
}

tooltip tip {
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    display: none;
    line-height: normal;
    max-width: 500px;
    min-width: 100px;
    opacity: 0;
    padding: 8px 16px;
    position: absolute;
    text-align: center;
    width: auto;
    will-change: top, left, bottom, right
}

tooltip tip._hidden {
    display: block;
    visibility: hidden
}

tooltip.active:not(._force-hidden) tip {
    display: block;
    opacity: 1;
    z-index: 999
}

tooltip tip-tip {
    font-size: 0.95em
}

tooltip tip-tip._large {
    font-size: 1.1em
}

tooltip tip-tip._small {
    font-size: 0.8em
}

tooltip._top tip {
    left: 50%;
    top: -9px;
    -webkit-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%)
}

tooltip._top tip tip-arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.85);
    content: '';
    height: 0;
    left: 50%;
    margin-left: -6px;
    position: absolute;
    top: 100%;
    width: 0
}

tooltip._bottom tip {
    right: 50%;
    top: 100%;
    -webkit-transform: translateX(50%) translateY(9px);
    transform: translateX(50%) translateY(9px)
}

tooltip._bottom tip tip-arrow {
    border-bottom: 6px solid rgba(0, 0, 0, 0.85);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    bottom: 100%;
    content: '';
    height: 0;
    left: 50%;
    margin-left: -6px;
    position: absolute;
    width: 0
}

tooltip._right tip {
    left: 100%;
    top: 50%;
    -webkit-transform: translateX(9px) translateY(-50%);
    transform: translateX(9px) translateY(-50%)
}

tooltip._right tip tip-arrow {
    border-bottom: 6px solid transparent;
    border-right: 6px solid rgba(0, 0, 0, 0.85);
    border-top: 6px solid transparent;
    content: '';
    height: 0;
    margin-top: -6px;
    position: absolute;
    right: 100%;
    top: 50%;
    width: 0
}

tooltip._left tip {
    left: -9px;
    top: 50%;
    -webkit-transform: translateX(-100%) translateY(-50%);
    transform: translateX(-100%) translateY(-50%)
}

tooltip._left tip tip-arrow {
    border-bottom: 6px solid transparent;
    border-left: 6px solid rgba(0, 0, 0, 0.85);
    border-top: 6px solid transparent;
    content: '';
    height: 0;
    left: 100%;
    margin-top: -6px;
    position: absolute;
    top: 50%;
    width: 0
}

tip-tip #close-button {
    cursor: pointer;
    float: right;
    left: 8%;
    margin-top: -7%;
    padding: 3px;
    position: relative
}

body.popeye-modal-open {
    overflow: hidden
}

.popeye-modal-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 5;
    overflow-y: auto;
    background-color: rgba(76, 147, 234, 0.7);
    text-align: center
}

.popeye-modal-container.ng-enter {
    -webkit-animation: popeye-fade-in 0.4s;
    animation: popeye-fade-in 0.4s
}

.popeye-modal-container.ng-enter .popeye-modal {
    -webkit-animation: popeye-slide-up 0.4s;
    animation: popeye-slide-up 0.4s
}

.popeye-modal-container.ng-leave {
    -webkit-animation: popeye-fade-out 0.4s;
    animation: popeye-fade-out 0.4s
}

.popeye-modal-container.ng-leave .popeye-modal {
    -webkit-animation: popeye-slide-down 0.4s forwards;
    animation: popeye-slide-down 0.4s forwards
}

.popeye-modal-container::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.popeye-modal-container .popeye-modal {
    position: relative;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    width: 60%;
    border-radius: 3px;
    border: none;
    z-index: 6;
    padding: 2em 1.5em 1.5em 1.5em;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4)
}

.popeye-modal-container .popeye-modal a.popeye-close-modal {
    position: absolute;
    top: 1em;
    right: 1em;
    font-weight: 100;
    text-decoration: none;
    color: inherit
}

.popeye-modal-container .popeye-modal a.popeye-close-modal::after {
    content: "\d7"
}

@-webkit-keyframes popeye-slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%)
    }
}

@keyframes popeye-slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%)
    }
}

@-webkit-keyframes popeye-slide-down {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
}

@keyframes popeye-slide-down {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
}

@-webkit-keyframes popeye-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes popeye-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes popeye-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes popeye-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/*!
 * Pikaday
 * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
 */
.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.pika-single:before,
.pika-single:after {
    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, 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: bold;
    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-prev,
.pika-next {
    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: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    opacity: .5;
    *position: absolute;
    *top: 0
}

.pika-prev:hover,
.pika-next:hover {
    opacity: 1
}

.pika-prev,
.is-rtl .pika-next {
    float: left;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
    *left: 0
}

.pika-next,
.is-rtl .pika-prev {
    float: right;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
    *right: 0
}

.pika-prev.is-disabled,
.pika-next.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 th,
.pika-table td {
    width: 14.285714285714286%;
    padding: 0
}

.pika-table th {
    color: #999;
    font-size: 12px;
    line-height: 25px;
    font-weight: bold;
    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: #33aaff;
    font-weight: bold
}

.is-selected .pika-button,
.has-event .pika-button {
    color: #fff;
    font-weight: bold;
    background: #33aaff;
    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: #33aaff;
    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
}

.mejs-container {
    position: relative;
    background: #000;
    font-family: Helvetica, Arial;
    text-align: left;
    vertical-align: top;
    text-indent: 0
}

.me-plugin {
    position: absolute
}

.mejs-embed,
.mejs-embed body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden
}

.mejs-fullscreen {
    overflow: hidden !important
}

.mejs-container-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000
}

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
    width: 100%;
    height: 100%
}

.mejs-clear {
    clear: both
}

.mejs-background {
    position: absolute;
    top: 0;
    left: 0
}

.mejs-mediaelement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.mejs-poster {
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat
}

:root .mejs-poster img {
    display: none
}

.mejs-poster img {
    border: 0;
    padding: 0;
    border: 0
}

.mejs-overlay {
    position: absolute;
    top: 0;
    left: 0
}

.mejs-overlay-play {
    cursor: pointer
}

.mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/bigplay-9644fde5ce9400bbf2569c35c5b5afbc1ac16a0d5ff2763d265116b80b75ba88.svg) no-repeat
}

.no-svg .mejs-overlay-button {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/bigplay-d9498b125e390b8d224846ff4d82a5a4f184c5881ff46e9ac99aa5b58510f8cc.png)
}

.mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -100px
}

.mejs-overlay-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    background: #333;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/background-cc98289a4a45b53318e7643555cef4a6ba3a8c7a36d440d7d69f2aa0e8d9b0ab.png);
    background: rgba(0, 0, 0, 0.9);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -webkit-linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9))
}

.mejs-overlay-loading span {
    display: block;
    width: 80px;
    height: 80px;
    background: transparent url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/loading-a863d58944c967830a124d0961639277135237e7cdd9f9c996ef963d165af3cc.gif) 50% 50% no-repeat
}

.mejs-container .mejs-controls {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    bottom: 0;
    left: 0;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/background-cc98289a4a45b53318e7643555cef4a6ba3a8c7a36d440d7d69f2aa0e8d9b0ab.png);
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -webkit-linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    height: 30px;
    width: 100%
}

.mejs-container .mejs-controls div {
    list-style-type: none;
    background-image: none;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 26px;
    height: 26px;
    font-size: 11px;
    line-height: 11px;
    font-family: Helvetica, Arial;
    border: 0
}

.mejs-controls .mejs-button button {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    margin: 7px 5px;
    padding: 0;
    position: absolute;
    height: 16px;
    width: 16px;
    border: 0;
    background: transparent url(https://d2l930y2yx77uc.cloudfront.net/assets/btn_soundplayer-f4c284bd7873edd5af7d109d918d747060795bd5c51b28332579c9777171ca0f.png) no-repeat
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .mejs-controls .mejs-button button {
        background: transparent url(https://d2l930y2yx77uc.cloudfront.net/assets/btn_soundplayer_retina-7240fe55b9ea5d1cfc9e76d74a97bb0771de69d479ff2961c77bdcfaa2dbaed1.png) no-repeat;
        background-size: 32px 16px
    }
}

.no-svg .mejs-controls .mejs-button button {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/btn_soundplayer-f4c284bd7873edd5af7d109d918d747060795bd5c51b28332579c9777171ca0f.png)
}

.mejs-controls .mejs-button button:focus {
    outline: dotted 1px #999
}

.mejs-container .mejs-controls .mejs-time {
    color: #fff;
    display: block;
    height: 17px;
    width: auto;
    padding: 8px 3px 0 3px;
    overflow: hidden;
    text-align: center;
    box-sizing: content-box
}

.mejs-container .mejs-controls .mejs-time span {
    color: #fff;
    font-size: 11px;
    line-height: 12px;
    display: block;
    float: left;
    margin: 1px 2px 0 0;
    width: auto
}

.mejs-controls .mejs-play button {
    background-position: 0 0
}

.mejs-controls .mejs-pause button {
    background-position: -16px 0
}

.mejs-controls .mejs-stop button {
    background-position: -112px 0
}

.mejs-controls div.mejs-time-rail {
    direction: ltr;
    width: 200px;
    padding-top: 5px
}

.mejs-controls .mejs-time-rail span {
    display: block;
    position: absolute;
    width: 180px;
    height: 6px;
    cursor: pointer
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 5px;
    background: #333;
    background: rgba(50, 50, 50, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
    background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -webkit-linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8))
}

.mejs-controls .mejs-time-rail .mejs-time-buffering {
    width: 100%;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 15px 15px;
    -webkit-animation: buffering-stripes 2s linear infinite;
    animation: buffering-stripes 2s linear infinite
}

@-webkit-keyframes buffering-stripes {
    from {
        background-position: 0 0
    }

    to {
        background-position: 30px 0
    }
}

@keyframes buffering-stripes {
    from {
        background-position: 0 0
    }

    to {
        background-position: 30px 0
    }
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #3caac8;
    background: rgba(60, 170, 200, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44, 124, 145, 0.8)), to(rgba(78, 183, 212, 0.8)));
    background: -webkit-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: -webkit-linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    width: 0
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    width: 0
}

.mejs-controls .mejs-time-rail .mejs-time-handle {
    display: block;
    position: absolute;
    margin: 0;
    width: 2px;
    height: 12px;
    background: #444;
    cursor: pointer;
    top: -3px;
    text-align: center
}

.mejs-controls .mejs-time-rail .mejs-time-float {
    position: absolute;
    display: none;
    background: #eee;
    width: 36px;
    height: 17px;
    border: solid 1px #333;
    top: -26px;
    margin-left: -18px;
    text-align: center;
    color: #111
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
    margin: 2px;
    width: 30px;
    display: block;
    text-align: center;
    left: 0
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    border: solid 5px #eee;
    border-color: #eee transparent transparent transparent;
    border-radius: 0;
    top: 15px;
    left: 13px
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float {
    width: 48px
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current {
    width: 44px
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner {
    left: 18px
}

.mejs-controls .mejs-fullscreen-button button {
    background-position: -32px 0
}

.mejs-controls .mejs-unfullscreen button {
    background-position: -32px -16px
}

.mejs-controls .mejs-mute button {
    background-position: -16px -16px
}

.mejs-controls .mejs-unmute button {
    background-position: -16px 0
}

.mejs-controls .mejs-volume-button {
    position: relative
}

.mejs-controls .mejs-volume-button .mejs-volume-slider {
    display: none;
    height: 115px;
    width: 25px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/background-cc98289a4a45b53318e7643555cef4a6ba3a8c7a36d440d7d69f2aa0e8d9b0ab.png);
    background: rgba(50, 50, 50, 0.7);
    border-radius: 0;
    top: -115px;
    left: 0;
    z-index: 1;
    position: absolute;
    margin: 0
}

.mejs-controls .mejs-volume-button:hover {
    border-radius: 0 0 4px 4px
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
    position: absolute;
    left: 11px;
    top: 8px;
    width: 2px;
    height: 100px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.5);
    margin: 0
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
    position: absolute;
    left: 11px;
    top: 8px;
    width: 2px;
    height: 100px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.9);
    margin: 0
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
    position: absolute;
    left: 4px;
    top: -3px;
    width: 16px;
    height: 6px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.9);
    cursor: N-resize;
    border-radius: 1px;
    margin: 0
}

.mejs-controls div.mejs-horizontal-volume-slider {
    height: 26px;
    width: 60px;
    position: relative
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    position: absolute;
    left: 0;
    top: 11px;
    width: 50px;
    height: 8px;
    margin: 0;
    padding: 0;
    font-size: 1px;
    border-radius: 2px;
    background: #333;
    background: rgba(50, 50, 50, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
    background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -webkit-linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8))
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    position: absolute;
    left: 0;
    top: 11px;
    width: 50px;
    height: 8px;
    margin: 0;
    padding: 0;
    font-size: 1px;
    border-radius: 2px;
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8))
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
    display: none
}

.mejs-controls .mejs-captions-button {
    position: relative
}

.mejs-controls .mejs-captions-button button {
    background-position: -48px 0
}

.mejs-controls .mejs-captions-button .mejs-captions-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -10px;
    width: 130px;
    height: 100px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/background-cc98289a4a45b53318e7643555cef4a6ba3a8c7a36d440d7d69f2aa0e8d9b0ab.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 10px;
    overflow: hidden;
    border-radius: 0
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none !important;
    overflow: hidden
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
    margin: 0 0 6px 0;
    padding: 0;
    list-style-type: none !important;
    display: block;
    color: #fff;
    overflow: hidden
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
    width: 100px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: helvetica, arial;
    font-size: 10px
}

.mejs-controls .mejs-captions-button .mejs-captions-translations {
    font-size: 10px;
    margin: 0 0 5px 0
}

.mejs-chapters {
    position: absolute;
    top: 0;
    left: 0;
    -xborder-right: solid 1px #fff;
    width: 10000px;
    z-index: 1
}

.mejs-chapters .mejs-chapter {
    position: absolute;
    float: left;
    background: #222;
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -webkit-linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);
    overflow: hidden;
    border: 0
}

.mejs-chapters .mejs-chapter .mejs-chapter-block {
    font-size: 11px;
    color: #fff;
    padding: 5px;
    display: block;
    border-right: solid 1px #333;
    border-bottom: solid 1px #333;
    cursor: pointer
}

.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
    border-right: none
}

.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
    background: #666;
    background: rgba(102, 102, 102, 0.7);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
    background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: -webkit-linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232)
}

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
    font-size: 12px;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0 3px 0;
    line-height: 12px
}

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
    font-size: 12px;
    line-height: 12px;
    margin: 3px 0 4px 0;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis
}

.mejs-captions-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    color: #fff
}

.mejs-captions-layer a {
    color: #fff;
    text-decoration: underline
}

.mejs-captions-layer[lang=ar] {
    font-size: 20px;
    font-weight: normal
}

.mejs-captions-position {
    position: absolute;
    width: 100%;
    bottom: 15px;
    left: 0
}

.mejs-captions-position-hover {
    bottom: 45px
}

.mejs-captions-text {
    padding: 3px 5px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/background-cc98289a4a45b53318e7643555cef4a6ba3a8c7a36d440d7d69f2aa0e8d9b0ab.png);
    background: rgba(20, 20, 20, 0.8)
}

.me-cannotplay a {
    color: #fff;
    font-weight: bold
}

.me-cannotplay span {
    padding: 15px;
    display: block
}

.mejs-controls .mejs-loop-off button {
    background-position: -64px -16px
}

.mejs-controls .mejs-loop-on button {
    background-position: -64px 0
}

.mejs-controls .mejs-backlight-off button {
    background-position: -80px -16px
}

.mejs-controls .mejs-backlight-on button {
    background-position: -80px 0
}

.mejs-controls .mejs-picturecontrols-button {
    background-position: -96px 0
}

.mejs-contextmenu {
    position: absolute;
    width: 150px;
    padding: 10px;
    border-radius: 4px;
    top: 0;
    left: 0;
    background: #fff;
    border: solid 1px #999;
    z-index: 1001
}

.mejs-contextmenu .mejs-contextmenu-separator {
    height: 1px;
    font-size: 0;
    margin: 5px 6px;
    background: #333
}

.mejs-contextmenu .mejs-contextmenu-item {
    font-family: Helvetica, Arial;
    font-size: 12px;
    padding: 4px 6px;
    cursor: pointer;
    color: #333
}

.mejs-contextmenu .mejs-contextmenu-item:hover {
    background: #2C7C91;
    color: #fff
}

.mejs-controls .mejs-sourcechooser-button {
    position: relative
}

.mejs-controls .mejs-sourcechooser-button button {
    background-position: -128px 0
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -10px;
    width: 130px;
    height: 100px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/background-cc98289a4a45b53318e7643555cef4a6ba3a8c7a36d440d7d69f2aa0e8d9b0ab.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 10px;
    overflow: hidden;
    border-radius: 0
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none !important;
    overflow: hidden
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
    margin: 0 0 6px 0;
    padding: 0;
    list-style-type: none !important;
    display: block;
    color: #fff;
    overflow: hidden
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
    width: 100px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: helvetica, arial;
    font-size: 10px
}

.mejs-postroll-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/background-cc98289a4a45b53318e7643555cef4a6ba3a8c7a36d440d7d69f2aa0e8d9b0ab.png);
    background: rgba(50, 50, 50, 0.7);
    z-index: 1000;
    overflow: hidden
}

.mejs-postroll-layer-content {
    width: 100%;
    height: 100%
}

.mejs-postroll-close {
    position: absolute;
    right: 0;
    top: 0;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/mediaelement/background-cc98289a4a45b53318e7643555cef4a6ba3a8c7a36d440d7d69f2aa0e8d9b0ab.png);
    background: rgba(50, 50, 50, 0.7);
    color: #fff;
    padding: 4px;
    z-index: 100;
    cursor: pointer
}

.mejs-container {
    background: none
}

.mejs-controls div.mejs-time-rail {
    padding: 0
}

.mejs-container .mejs-controls {
    background: none !important;
    padding: 0
}

.mejs-container .mejs-controls .mejs-time {
    padding: 0;
    margin-top: 7px
}

.mejs-container .mejs-controls .mejs-time span {
    color: #a1a6a9;
    line-height: 15px
}

.mejs-container .mejs-controls .mejs-playpause-button {
    width: 30px;
    height: 30px;
    background-color: #444444;
    border-radius: 50%;
    cursor: pointer
}

.mejs-controls .mejs-button button {
    margin: 7px 0 0 7px
}

.mejs-controls .mejs-time-rail .mejs-time-buffering {
    background: #e1e5e7
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #dedfe0
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #cacbcc
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 12px 10px;
    background: #e1e5e7
}

.mejs-controls .mejs-time-rail .mejs-time-float {
    background-color: #333;
    color: #fff;
    border: none
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner {
    border: solid 5px #222;
    border-color: #222 transparent transparent transparent
}

.mod-sound-player.tl {
    width: 100%;
    min-height: 102px;
    border: 1px solid #e1e5e7;
    background-color: #f8f9fa;
    position: relative;
    margin-bottom: 15px
}

.mod-sound-player.tl .thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px
}

.mod-sound-player.tl .thumb img {
    width: 100%
}

.mod-sound-player.tl .note-data {
    position: relative;
    padding: 10px 10px 0 10px
}

.mod-sound-player.tl .note-data .btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 80px;
    height: 25px;
    line-height: 25px;
    font-size: 11px
}

.mod-sound-player.tl .sound-ui {
    padding: 0 10px 10px 10px;
    position: relative;
    min-height: 30px
}

.mod-sound-player.tl .note-data,
.mod-sound-player.tl .sound-ui {
    width: 100%;
    padding-left: 110px
}

.mod-sound-player.tl .note-data .sound-title,
.mod-sound-player.tl .sound-ui .sound-title {
    font-size: 14px;
    font-weight: bold;
    margin: 3px 0 5px 0;
    line-height: 1.2;
    padding-right: 100px;
    width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mod-sound-player.tl .note-data .sound-author,
.mod-sound-player.tl .sound-ui .sound-author {
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 10px;
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mod-sound-player.tl .note-data .sound-author a,
.mod-sound-player.tl .sound-ui .sound-author a {
    color: #a1a6a9
}

.mod-sound-player.tl hr {
    display: none
}

.mod-sound-player.tl .caption {
    position: absolute;
    left: 144px;
    bottom: 3px;
    line-height: 1
}

.mod-sound-player.show {
    width: 100%
}

.mod-sound-player.show .thumb-wrap {
    float: left;
    width: 50%
}

.mod-sound-player.show .thumb-wrap .thumb {
    position: static;
    border: 1px solid #e1e5e7;
    margin-right: 15px
}

.mod-sound-player.show .thumb-wrap .thumb img {
    width: 100%;
    cursor: pointer
}

.mod-sound-player.show .note-data-wrap {
    float: left;
    width: 50%;
    padding-top: 5px
}

.mod-sound-player.show .note-data-wrap .note-data .sound-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 5px
}

.mod-sound-player.show .note-data-wrap .note-data .sound-author {
    font-family: 13px;
    line-height: 1.2;
    margin-bottom: 10px
}

.mod-sound-player.show .note-data-wrap .sound-ui .audio-wrapper {
    margin-bottom: 10px
}

.mod-sound-player.show .note-data-wrap .sound-ui .caption {
    margin: -2px 0 10px 0
}

.mod-sound-player.show .note-data-wrap .btn {
    margin-bottom: 10px
}

.mod-sound-player.show .note-data-wrap .note-description {
    font-size: 12px;
    line-height: 1.6
}

.mod-sound-player .note-description {
    clear: both;
    font-size: 13px;
    margin-top: 10px
}

.mod-sound-player .soundnote-viewer .mod-sound-player .thumb img {
    width: 100px;
    height: 100px
}

.mod-sound-player .soundnote-viewer .mod-sound-player .sound-wrapper {
    width: 620px
}

.mod-sound-player .soundnote-viewer .mod-sound-player .sound-wrapper .note-data,
.mod-sound-player .soundnote-viewer .mod-sound-player .sound-wrapper .sound-ui {
    width: 520px
}

@media screen and (max-width: 480px) {
    .mod-sound-player.tl {
        padding: 5px;
        position: relative;
        margin-bottom: 10px
    }

    .mod-sound-player.tl .thumb {
        float: none;
        position: absolute;
        top: 5px;
        left: 5px;
        width: 70px;
        height: 70px
    }

    .mod-sound-player.tl .note-data {
        padding: 0 0 0 10px
    }

    .mod-sound-player.tl .note-data .btn {
        position: static;
        width: 80px;
        height: 25px;
        line-height: 25px;
        font-size: 11px
    }

    .mod-sound-player.tl .sound-ui {
        float: none;
        clear: both;
        width: 100%;
        padding: 5px 0 0 0
    }

    .mod-sound-player.tl .note-data {
        position: relative;
        width: 100%;
        height: 75px;
        padding-left: 80px
    }

    .mod-sound-player.tl .note-data .sound-title {
        width: 175px;
        font-size: 13px;
        margin-bottom: 5px;
        padding-right: 0
    }

    .mod-sound-player.tl .note-data .sound-author {
        width: 175px;
        font-size: 11px;
        margin-bottom: 8px
    }

    .mod-sound-player.tl hr {
        display: block;
        min-width: 100%;
        margin: 0 -5px;
        border-top: 1px solid #e1e5e7;
        border-bottom: none
    }

    .mod-sound-player.tl .caption {
        position: relative;
        left: 0;
        margin-top: 8px;
        font-size: 10px
    }

    .mod-sound-player.show {
        width: 100%
    }

    .mod-sound-player.show .thumb-wrap {
        float: none;
        width: 100%
    }

    .mod-sound-player.show .thumb-wrap .thumb {
        margin-right: 0
    }

    .mod-sound-player.show .thumb-wrap .thumb img {
        width: 100%
    }

    .mod-sound-player.show .note-data-wrap {
        float: none;
        width: 100%;
        padding-top: 10px
    }

    .mod-sound-player.show .note-data-wrap .note-data .sound-title {
        font-size: 16px;
        text-align: center;
        margin-bottom: 5px
    }

    .mod-sound-player.show .note-data-wrap .note-data .sound-author {
        font-family: 12px;
        text-align: center;
        margin-bottom: 2px
    }

    .mod-sound-player.show .note-data-wrap .note-data.is-sound .sound-title {
        text-align: left
    }

    .mod-sound-player.show .note-data-wrap .note-data.is-sound .sound-author {
        margin-bottom: 16px;
        text-align: left
    }

    .mod-sound-player.show .note-data-wrap .sound-ui .audio-wrapper {
        margin-bottom: 10px
    }

    .mod-sound-player.show .note-data-wrap .sound-ui .caption {
        text-align: center;
        margin: -5px 0 10px 0
    }

    .mod-sound-player.show .note-data-wrap .btn {
        margin: 0 auto 15px auto;
        width: 110px;
        height: 35px;
        line-height: 35px
    }

    .mod-sound-player.show .note-data-wrap .note-description {
        font-size: 13px;
        line-height: 1.7
    }
}

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020
}

.fancybox-skin {
    position: relative;
    padding: 0 !important
}

.fancybox-opened {
    z-index: 8030
}

.fancybox-outer,
.fancybox-inner {
    position: relative
}

.fancybox-inner {
    overflow: hidden
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap
}

.fancybox-image,
.fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%
}

#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/fancybox/fancybox_sprite-b9d6fddb0988440902fcfc72f371ecfa80ee2eb36073f9eebc17449ee41c886f.png)
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/fancybox/fancybox_loading-f2e4888e43770f9b48fa893bc62eeaf2d4498d04772dc9f8c83c760fdd209e15.gif) center center no-repeat
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url(https://d2l930y2yx77uc.cloudfront.net/assets/fancybox/blank-b1442e85b03bdcaf66dc58c7abb98745dd2687d86350be9a298a1d9382ac849b.gif);
    -webkit-tap-highlight-color: transparent;
    z-index: 8040
}

.fancybox-prev {
    left: 0
}

.fancybox-next {
    right: 0
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px
}

.fancybox-nav:hover span {
    visibility: visible
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important
}

.fancybox-lock {
    overflow: hidden !important;
    width: auto
}

.fancybox-lock body {
    overflow: hidden !important
}

.fancybox-lock-test {
    overflow-y: hidden !important
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url(https://d2l930y2yx77uc.cloudfront.net/assets/fancybox/fancybox_overlay-92c791ca67a8c1c00457e2c509d97a70a63207b119f353b81254b808f41d7824.png)
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll
}

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050
}

.fancybox-opened .fancybox-title {
    visibility: visible
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff
}

.fancybox-title-inside-wrap {
    padding-top: 10px
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, 0.8)
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

    #fancybox-loading,
    .fancybox-close,
    .fancybox-prev span,
    .fancybox-next span {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/fancybox/fancybox_sprite@2x-8a67a0ccb8be7902597feb0f662863a6cf2268b7cb3e9a4a8c7d7a8745bf99e4.png);
        background-size: 44px 152px
    }

    #fancybox-loading div {
        background-image: url(https://d2l930y2yx77uc.cloudfront.net/assets/fancybox/fancybox_loading@2x-f05461912fde0f840dd23d9b533eb8bd7af5d3e2af3658d1222bf0a716c1dcc2.gif);
        background-size: 24px 24px
    }
}

/*!
 * Cropper.js v1.1.3
 * https://github.com/fengyuanchen/cropperjs
 *
 * Copyright (c) 2015-2017 Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2017-10-21T09:27:29.883Z
 */
.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-color: rgba(51, 153, 255, 0.75);
    outline: 1px solid #39f;
    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: e-resize;
    right: -3px;
    top: 0;
    width: 5px
}

.cropper-line.line-n {
    cursor: n-resize;
    height: 5px;
    left: 0;
    top: -3px
}

.cropper-line.line-w {
    cursor: w-resize;
    left: -3px;
    top: 0;
    width: 5px
}

.cropper-line.line-s {
    bottom: -3px;
    cursor: s-resize;
    height: 5px;
    left: 0
}

.cropper-point {
    background-color: #39f;
    height: 5px;
    opacity: .75;
    width: 5px
}

.cropper-point.point-e {
    cursor: e-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%
}

.cropper-point.point-n {
    cursor: n-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px
}

.cropper-point.point-w {
    cursor: w-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: ne-resize;
    right: -3px;
    top: -3px
}

.cropper-point.point-nw {
    cursor: nw-resize;
    left: -3px;
    top: -3px
}

.cropper-point.point-sw {
    bottom: -3px;
    cursor: sw-resize;
    left: -3px
}

.cropper-point.point-se {
    bottom: -3px;
    cursor: se-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
}

/*! Yaku Han JP (Gothic - All Include) v2.0.0 SIL by Qrac / Based on Noto Sans CJK JP */
@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 100;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Thin-7bec6dcb002b5ffaa117c83f99331d6eb62a38dc69c81ea1c85b8e39ae6d4fc2.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Thin-89a0861f6afbea9e506ee3efdf0b88257136525a66336d64ccaa9950ac56865a.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Thin-10837b8182c1c40fa363958e2a670db5e0e37ed670e344e286ad9d97c3c277e2.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 200;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Light-1910ee48f6fd10bcd6fb13607ad6384356e97aecbb5df6361821bb7a24e2238f.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Light-8aa34f025c69f51ffa46998ec7b7cfca511da4d30de3f8c1d1736e4675610f4a.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Light-64c4acad31103a0155bd57b0df464882bb2bc2713ff32af2a57524ed136c5667.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 300;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-DemiLight-daa89fec01d315532dc290d28920920a17514b0c0863ee82ab3726180b5c8fa4.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-DemiLight-25a911ca5e7ddfea61dd601e94f3b5b29a81c59a522d525d1150848d92b9a025.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-DemiLight-1c376316efac9d9ec941efdc635c2d0b8e0ef08cf1d8f50f5bc93cda50703f0f.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 400;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Regular-007889e2eeaa11b0e6594d62a72dea6b1f06ccf61551fc25d038e8c1d8028bbf.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Regular-6b5a19c9bbf47cf5f0084c7eeb1d2f35d5af11965a450bebe53fc252602fa2c2.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Regular-a99d1db4e8012200f57fc34e99ba93ac1df4a30277489a4210650f9c87c559f4.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 500;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Medium-73c646d74ec9e4c5135a3dd7dc50fc489a2e6e8fc92f996498b4a084f54f5a77.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Medium-034dacebe4293dee56d1bb7929bb82e4ccccc433aed95976e43806fe4384c7bd.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Medium-47b089bcf9a9e811875ac7f3475bcfaeb7ae354adf9774ba636d37b8dcae18fc.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 700;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Bold-02e375b9ee2c781916718d15960de7ca3b2efb89a8e288f65073acb50d7115cd.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Bold-92c758fe4349abd21c26cfdb2d32a730b336acc06c44ad7deac5f652d5254458.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Bold-b96880124d7513eab4db69935d3692f032463e37292af10fb816fe8b2e823815.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 900;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Black-0c3d950e2d5f370c1539ea7aaa998106770265aad7b035787d8b2e19e8e34d49.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Black-c2480f056949c42679dfe5395d378c744bb972e458d5b34f12a52141e64e76a2.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJP/YakuHanJP-Black-2d91c5e07de7a3ce8547a302ac18069474e6465bd0207c92b3623efb8a45541f.woff) format("woff")
}

/*! Yaku Han JP (Gothic - Small Amount) v2.0.0 SIL by Qrac / Based on Noto Sans CJK JP */
@font-face {
    font-family: "YakuHanJPs";
    font-style: normal;
    font-weight: 100;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Thin-5ada1afc64110213bc4bb95e81ed68600a877826427f205aeed4a8a29017849f.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Thin-58587f5e14bda964846d461807e475c9826ddc553e00f9511933be00cc6f3601.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Thin-9ea3d120f888674e721afd5acf889589b3f6287e9294f216337a9a2fbe0af28e.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJPs";
    font-style: normal;
    font-weight: 200;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Light-c3e6fe1edd30c40c410290cda2eb1b0842448ed41a9d19c14df303f0a0685df5.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Light-cb1ccd24c2c7f649554e681298fca423b9034e41230a713c323040fde0721f15.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Light-feade81d02b5056d041a8b004d5c71ab04fc096b47f565564249fb27cb772916.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJPs";
    font-style: normal;
    font-weight: 300;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-DemiLight-b30417fc6612e709372cb239e30c347dd85d2f2bf4ea93077c63238b89a1eb4c.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-DemiLight-f4a4d6c34e73e515d199f3bd0642480dcbb80e7729c64a570ada6bb9b99d0153.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-DemiLight-ee90349befe99fcbb1dfd0e25ce4e5efe067dfe5cddd4e005c6a4a5947167e72.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJPs";
    font-style: normal;
    font-weight: 400;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Regular-a05e3b1f90aa764ab27cd5c3eebe42896ae2538f6784413880651643e17d9778.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Regular-b2dd1d6a2411500d1f8ce0c5f79c34d3a30a38331269301f1efc85c8c3a8507d.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Regular-cd20db7ea2a7f58e16afd80f79a9fdd81203cbd7f0103853db7043d3393476c0.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJPs";
    font-style: normal;
    font-weight: 500;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Medium-af7edd902608d23df727b1d7ab4c13b07704ba3ab669282fe9a1eff9e291e03d.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Medium-98e6a500c643be161caeaa733cc390d13284e798fd3c6c42e1445d710fc4bcd2.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Medium-b3654a737ca77c1974ac2f6dbc91e1e5a966a7375cf5e439183c04a143749bcd.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJPs";
    font-style: normal;
    font-weight: 700;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Bold-f2abfc5efdfd5046033742df4516425e01c659fb4058244000c2df741b9a4ff7.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Bold-03571f8dee609155fdacb1a46e1f5667472674de39f9c4070098c6f4a5da23e9.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Bold-c09b7d1f826e072c4f70ded083bb99a4a9ead30361be9a419677fae0f2980a75.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJPs";
    font-style: normal;
    font-weight: 900;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Black-f26b82bcb06c05f6892ccd82490e04a7f2dfdbaf4b1d9ce15b74399bccfe071e.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Black-275e679f9e004513163cfc8f2fc5439915b45e2e6eefa39ae8f60a9b2a2f0303.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanJPs/YakuHanJPs-Black-8897d57b026d47b3bc99ce74bcd916d9d7c148149f3d3fa3f8dcd769a92234b2.woff) format("woff")
}

/*! Yaku Han MP (Mincho - All Include) v2.0.0 SIL by Qrac / Based on Noto Serif CJK JP */
@font-face {
    font-family: "YakuHanMP";
    font-style: normal;
    font-weight: 100;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-ExtraLight-06524e1020a415e07394c052c75bf3a6a8722205aab6b3a1630c10d2a95fee10.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-ExtraLight-b72f3ae9fd539dc60ac1eb109592c9d4a5f46886d764052c9e9f61e0d700d561.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-ExtraLight-c26ee251823e62f2c58b972d676662efd0530becfba95a7ea6bb188928bfcd42.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMP";
    font-style: normal;
    font-weight: 200;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Light-63b9021a5de5e781d7684fb75b66876c7735989777bc07c88df6429e0ef47416.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Light-c2f3478fdcdd84e1bf885c93303f0208c9686b9c8abfc1fc1eb8f3babb35092f.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Light-a561d8e2679ff8e56649b55f270119a39aba6507af314562dcf6ec245b4e033c.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMP";
    font-style: normal;
    font-weight: 300;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Regular-03ddf0d635eb85efe15d746e78a0298c6ec9b2469d13a64e62c401713a87c078.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Regular-3ac0185abd0e7629b026aa7c0ea758165ed6540d7ba599f4db5a69208f02c800.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Regular-6bc9f16c48a935dceb1029c6d497a58c821114f6a4de57e3d0232f57b95a9a0e.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMP";
    font-style: normal;
    font-weight: 400;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Medium-546d6f11051ad531841b14ea535045b1dfc13ee4fb6c3b89a2714c3db8769bfe.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Medium-46af9cbd297182051ba54bdbfd59c650c8601c83229d4bbc3fcd509e3b40cb0b.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Medium-224f4335f5fd1e0f46dba27335493d69a3853c2ce32d3bc97259f166ab007036.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMP";
    font-style: normal;
    font-weight: 500;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-SemiBold-50f32b570743172bdfdb9a40bcc91869a8e45d5e634207f2c6b9e9b79357b1cf.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-SemiBold-29c2a3b5be3a769d5c3566a64fe419a70d913d02bc3ca3499bb337b2805958c2.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-SemiBold-a4204d684c369facd8b7d12aa4d5c09c4bac486882490305170937d309a2f66b.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMP";
    font-style: normal;
    font-weight: 700;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Bold-88fb9d68981919ff05899f86dc955089aa2712a2f91a525d2d11657948c66efc.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Bold-33745d77643aa71cb0b5536999b34d1bf7bd80dc1a0471dcc245f0a65c9c3fa0.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Bold-b282c7829841c2b72033bc0e0ced2e1a76288fde906ed5508204c0fa8bf4946b.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMP";
    font-style: normal;
    font-weight: 900;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Black-d1bd76f7ec32c1076e4e8be8317409410924fdf90ee67591216179e22961cc05.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Black-43005c50930d5bdfb526b2cc8193b533dc1033828c36d2e19fdd252e2d8a7aa8.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMP/YakuHanMP-Black-c45766475345a6d15c1c7f6ad9c9e0079abb3b57efdfd826730551b6b0091de5.woff) format("woff")
}

/*! Yaku Han MP (Mincho - Small Amount) v2.0.0 SIL by Qrac / Based on Noto Serif CJK JP */
@font-face {
    font-family: "YakuHanMPs";
    font-style: normal;
    font-weight: 100;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-ExtraLight-ee22afc8889ca2ba6310f2474013c17de6d54a6cd59184e4d43b8869eacbcf5b.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-ExtraLight-339c032a4e36111d46bbb4780589d319daa622b7ba6aa48aa03dc2de9131335a.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-ExtraLight-78893c929f31ae6fdfe972e03fe1ab683a3b65de9003c83f45c60426718f96f2.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMPs";
    font-style: normal;
    font-weight: 200;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Light-6bae2db190564b3f56d0439502f367cf4c163d3e2f7a8be9111d46003a32ad9f.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Light-e7f031b3bf291a14cb87476f0be10e918bce90408c6a1d462aec681e8c4f7719.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Light-deada1e4640660884f7bf402984ab769597384430a74367acae9be05293657a9.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMPs";
    font-style: normal;
    font-weight: 300;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Regular-2d0ca129cd0992f95258b9581b152c39ffb30a22383bfbdaa5860e77f33d2a9c.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Regular-ea4ffb8a01c50a93d6811d9c25ee612ac86f8c9f472bf3377e030640ea26a500.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Regular-fbe2f214ec5f9bef61cb5cdd6fe11c1e3d0dbbe895a929c3812b9ba7f2df741c.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMPs";
    font-style: normal;
    font-weight: 400;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Medium-2895877a5d8435e569ecd4353746cee22b0f02d5cbd24c3d478bbd1e4fb3c649.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Medium-648f4b48cd8533c0154faf128fcd98ec5664d3bc23141130eadb60482364a201.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Medium-b9cb2efda1ebaad3d4909d68337d70910fc2de50e32f3546459d6585f7e2176c.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMPs";
    font-style: normal;
    font-weight: 500;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-SemiBold-dea3f35e58e732f97cc47316cdf818fa88e9b56feae5aa2145cf9478614dd94b.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-SemiBold-a656245d44a9c6e2671e0bb543a5b53f2c600961f3912453d96228a4b9c26487.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-SemiBold-5c7b5d27e44741cd9e1eca55fccf09994c0290a6b92f8a3de26fb025a9a405ec.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMPs";
    font-style: normal;
    font-weight: 700;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Bold-293d08979ce29224c3b686e82d3336f20a7d1a7f2ba707ede44a254516723ef7.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Bold-d07daf0c57b96d8685e650a36209631a1ba88b2fb737572329b54d14d6882260.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Bold-b1f6a450984736ca4871552b6d57a9844041b764019bc8b15353f52f155cd898.woff) format("woff")
}

@font-face {
    font-family: "YakuHanMPs";
    font-style: normal;
    font-weight: 900;
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Black-a6a9c6cbf08d8715c64524b79024ca1630b8a20bcc9e4f196184a49e4ebb62fb.eot);
    src: url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Black-286e148de30c6e8da4c9b69857e0dae9fcc8a7a0ba0092110d2fae6aa62050e4.woff2) format("woff2"), url(https://d2l930y2yx77uc.cloudfront.net/assets/YakuHanMPs/YakuHanMPs-Black-5152c904ec4868a09079e1b08e5deddf05a65834730d58240eddadd0431cc12a.woff) format("woff")
}

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

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

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

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

.hljs-literal {
    color: #56b6c2
}

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

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

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

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

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: bold
}

.hljs-link {
    text-decoration: underline
}

.ml10 { margin-left: 10px !important; }
.mr05 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }

.datetimeStyle {
    width: 20% !important; float: left;
}

.alignleft { float: left !important; }

p.alignleft { margin-top: 8px !important; }