/*! v0.1.2 */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre { margin: 0; font-size: 1em; }

td, th { padding: 0; }

ul, ol { padding-left: 0; }

li { list-style-type: none; }

dd { margin-left: 0; }

img { vertical-align: bottom; }

em { font-style: normal; font-weight: bold; }

button, input[type="button"], input[type="reset"], input[type="submit"] { margin: 0; padding: 0; border: 0; background-color: transparent; }

html { font-size: 13px; }
@media (-webkit-min-device-pixel-ratio: 2) { html { -webkit-font-smoothing: antialiased; } }

body { color: #484848; font-size: 13px; font-family: "Hiragino Kaku Gothic ProN", Roboto, Meiryo, "MS PGothic", sans-serif; }

body, button, input { line-height: 1.35; }

a { color: #f5a100; text-decoration: none; }
a:visited { color: #f5a100; }
a:hover { color: #f5a100; text-decoration: underline; }
a:active { color: #f5a100; }

#header { font-size: 12px; line-height: 1.7; }
#header a:hover { text-decoration: none; }

#footer { font-size: 12px; line-height: 1.7; }
#footer a { text-decoration: underline; }
#footer a:hover { text-decoration: none; }
#footer .footer_nav1 li a { text-decoration: none; }
#footer .footer_nav1 li a:hover { text-decoration: underline; }

.cs-error--s, .cs-error--m { color: #cc4429; }

.cs-fz--18 { font-size: 18px; }

.cs-fz--16 { font-size: 16px; }

.cs-fz--15 { font-size: 15px; }

.cs-fz--14 { font-size: 14px; }

.cs-fz--13 { font-size: 13px; }

.cs-fz--12 { font-size: 12px; }

.cs-fz--11, .cs-fz--s { font-size: 11px; }

.cs-fz--10, .cs-fz--xs { font-size: 10px; }

sup { font-size: 9px; }

.cs-error--s { font-size: 11px; font-weight: bold; }

.cs-error--m { font-size: 13px; font-weight: bold; }

.cs-body-copy, .cs-body-copy-block, .cs-body-copy--m { font-size: 14px; line-height: 1.6; }

.cs-body-copy--l { font-size: 16px; line-height: 1.6; }

.cs-body-copy--s { font-size: 13px; line-height: 1.6; }

.cs-body-copy-block p, .cs-body-copy-block ul, .cs-body-copy-block ol, .cs-body-copy-block dl, .cs-body-copy-block table, .cs-body-copy-block h1, .cs-body-copy-block h2, .cs-body-copy-block h3, .cs-body-copy-block h4, .cs-body-copy-block h5, .cs-body-copy-block h6 { margin-bottom: 1em; }
.cs-body-copy-block *:last-child { margin-bottom: 0; }
.cs-body-copy-block h1, .cs-body-copy-block h2, .cs-body-copy-block h3, .cs-body-copy-block h4, .cs-body-copy-block h5, .cs-body-copy-block h6 { margin-top: 2em; }
.cs-body-copy-block *:first-child { margin-top: 0; }
.cs-body-copy-block ul { padding-left: 30px; }
.cs-body-copy-block ul > li { list-style: square; }
.cs-body-copy-block ol { padding-left: 30px; }
.cs-body-copy-block ol > li { list-style: decimal; }

.cs-button-a--1-xl, .cs-button-a--2-xl, .cs-button-a--1-l, .cs-button-a--2-l, .cs-button-a--1-m, .cs-button-a--2-m { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block; box-sizing: border-box; max-width: 100%; font-weight: bold; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; }
.cs-button-a--1-xl:hover, .cs-button-a--2-xl:hover, .cs-button-a--1-l:hover, .cs-button-a--2-l:hover, .cs-button-a--1-m:hover, .cs-button-a--2-m:hover { text-decoration: none; }
[disabled].cs-button-a--1-xl, [disabled].cs-button-a--2-xl, [disabled].cs-button-a--1-l, [disabled].cs-button-a--2-l, [disabled].cs-button-a--1-m, [disabled].cs-button-a--2-m { opacity: 0.6; pointer-events: none; }

.cs-button-a--1-xl, .cs-button-a--2-xl, .cs-button-a--1-l, .cs-button-a--2-l, .cs-button-a--1-m, .cs-button-a--2-m { color: #fff; }
.cs-button-a--1-xl:visited, .cs-button-a--2-xl:visited, .cs-button-a--1-l:visited, .cs-button-a--2-l:visited, .cs-button-a--1-m:visited, .cs-button-a--2-m:visited, .cs-button-a--1-xl:active, .cs-button-a--2-xl:active, .cs-button-a--1-l:active, .cs-button-a--2-l:active, .cs-button-a--1-m:active, .cs-button-a--2-m:active, .cs-button-a--1-xl:hover, .cs-button-a--2-xl:hover, .cs-button-a--1-l:hover, .cs-button-a--2-l:hover, .cs-button-a--1-m:hover, .cs-button-a--2-m:hover { color: #fff; }
.cs-button-a--1-xl, .cs-button-a--2-xl { height: 50px; padding: 0 16.66667px; border-radius: 5px; line-height: 50px; font-size: 18px; }
.cs-button-a--1-l, .cs-button-a--2-l { height: 40px; padding: 0 13.33333px; border-radius: 5px; line-height: 40px; font-size: 16px; }
.cs-button-a--1-m, .cs-button-a--2-m { height: 35px; padding: 0 11.66667px; border-radius: 5px; line-height: 35px; font-size: 14px; }

.cs-button-a--1-xl, .cs-button-a--1-l, .cs-button-a--1-m { background-color: #f5a100; }
.cs-button-a--1-xl:hover, .cs-button-a--1-l:hover, .cs-button-a--1-m:hover { background-color: #e69700; }

.cs-button-a--2-xl, .cs-button-a--2-l, .cs-button-a--2-m { background-color: #777; }
.cs-button-a--2-xl:hover, .cs-button-a--2-l:hover, .cs-button-a--2-m:hover { background-color: #6f6f6f; }

.cs-button--w-100p { width: 100%; }

.cs-button--w-260 { width: 260px; }

.cs-button--w-220 { width: 220px; }

.cs-button--w-180 { width: 180px; }

.cs-button--w-150 { width: 150px; }

.cs-button--w-120 { width: 120px; }

.cs-button--w-90 { width: 90px; }

input.cs-field-a, textarea.cs-field-a, select.cs-field-a { box-sizing: border-box; height: 35px; padding: 4px 6px; border-radius: 5px; border: 1px solid #b3b3b3; background: #fff; font-size: 14px; line-height: 1.5; }
input.cs-field-a:focus, textarea.cs-field-a:focus, select.cs-field-a:focus { border: 1px solid #f5a100; outline: none; box-shadow: 0 0 8px rgba(245, 161, 0, 0.3); }

input.cs-field-a { -webkit-appearance: none; }

textarea.cs-field-a { min-height: 35px; height: auto; -webkit-appearance: none; }

.cs-field--w-100p { width: 100%; }

.cs-field--w-260 { width: 260px; }

.cs-field--w-220 { width: 220px; }

.cs-field--w-180 { width: 180px; }

.cs-field--w-90 { width: 90px; }

.cs-modal-overlay, .cs-modal-overlay--confirm { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000; background: rgba(230, 230, 230, 0.9); -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
.cs-modal-overlay--confirm { z-index: 20000; }

.u-d-n, .u-hide { display: none; }

.u-d-b, .u-show { display: block; }

.u-d-ib { display: inline-block; }

.u-d-i { display: inline; }

.u-cf:before, .u-cf:after { content: ""; display: table; }
.u-cf:after { clear: both; }

.u-fl-n { float: none !important; }

.u-fl-l { float: left !important; }

.u-fl-r { float: right !important; }

.u-ta-c { text-align: center !important; }

.u-ta-l { text-align: left !important; }

.u-ta-r { text-align: right !important; }

.u-m-a { margin-left: auto !important; margin-right: auto !important; }

.u-m-0 { margin: 0 !important; }

.u-mt-0 { margin-top: 0 !important; }

.u-mt-5 { margin-top: 5px !important; }

.u-mt-10 { margin-top: 10px !important; }

.u-mt-15 { margin-top: 15px !important; }

.u-mt-20 { margin-top: 20px !important; }

.u-mt-30 { margin-top: 30px !important; }

.u-mt-50 { margin-top: 50px !important; }

.u-mt-60 { margin-top: 60px !important; }

.u-mt-80 { margin-top: 80px !important; }

.u-mt-100 { margin-top: 100px !important; }

.u-mb-0 { margin-bottom: 0 !important; }

.u-mb-5 { margin-bottom: 5px !important; }

.u-mb-10 { margin-bottom: 10px !important; }

.u-mb-15 { margin-bottom: 15px !important; }

.u-mb-20 { margin-bottom: 20px !important; }

.u-mb-30 { margin-bottom: 30px !important; }

.u-mb-50 { margin-bottom: 50px !important; }

.u-mb-60 { margin-bottom: 60px !important; }

.u-mb-80 { margin-bottom: 80px !important; }

.u-mb-100 { margin-bottom: 100px !important; }

.u-w-10 { width: 10% !important; }

.u-w-20 { width: 20% !important; }

.u-w-30 { width: 30% !important; }

.u-w-40 { width: 40% !important; }

.u-w-50 { width: 50% !important; }

.u-w-60 { width: 60% !important; }

.u-w-70 { width: 70% !important; }

.u-w-80 { width: 80% !important; }

.u-w-90 { width: 90% !important; }

.u-w-100 { width: 100% !important; }

.cs-title { width: 100%; background: #f5a100; color: #fff; font-size: 16px; font-weight: bold; text-align: center; }
@media screen and (max-width: 479px) { .cs-title { min-width: 320px; } }
@media screen and (min-width: 480px) { .cs-title { min-width: 480px; } }
.cs-title__inner { box-sizing: border-box; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 479px) { .cs-title__inner { width: 100%; } }
@media screen and (min-width: 480px) { .cs-title__inner { width: 480px; } }
.cs-title__inner { padding: 10px; }

.cs-tool--new { position: fixed; right: 7px; bottom: 30px; z-index: 100; }
@media screen and (min-width: 960px) { .cs-tool--new { right: 25%; } }
.cs-tool--new a { color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: block; width: 60px; height: 60px; border-radius: 50%; background: #ffd200; font-size: 25px; line-height: 60px; text-align: center; }
.cs-tool--new a:visited, .cs-tool--new a:active, .cs-tool--new a:hover { color: #fff; }

.cs-articles { width: 100%; background: #f5f2e1; }
@media screen and (max-width: 479px) { .cs-articles { min-width: 320px; } }
@media screen and (min-width: 480px) { .cs-articles { min-width: 480px; } }
.cs-articles__inner { box-sizing: border-box; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 479px) { .cs-articles__inner { width: 100%; } }
@media screen and (min-width: 480px) { .cs-articles__inner { width: 480px; } }
.cs-articles__inner { padding: 20px 10px; }

.cs-article { margin-bottom: 20px; border-radius: 5px; border: 1px solid #d9d9d9; background: #fff; }
.cs-article__header, .cs-article__footer { padding: 10px; }

.cs-article-header { display: table; width: 100%; margin: -2px 0 -2px -2px; }
.cs-article-header__author { display: table-cell; vertical-align: middle; font-weight: bold; }
.cs-article-header__author-icon,.cs-articles-edit-form__author-icon { display: inline-block; width: 35px; height: 35px; margin-right: 5px; border-radius: 50%; background: #b3b3b3; vertical-align: middle; }
.cs-article-header__follow { display: table-cell; text-align: right; vertical-align: middle; font-size: 11px; }
.cs-article-header__follow a { color: #777; }
.cs-article-header__follow a:visited, .cs-article-header__follow a:active, .cs-article-header__follow a:hover, .cs-article-header__follow a:hover, .cs-unfollow a, .cs-follow-list__follow a, .cs-follow-list__follow--followers a { color: #777; }

.cs-article-link { display: block; }
.cs-article-link__image { height: 240px; background-size: cover; background-position: 50% 50%; position: relative; }
.cs-article-link__counter { color: #777; }
.cs-article-link__counter:visited, .cs-article-link__counter:active, .cs-article-link__counter:hover { color: #777; }
.cs-article-link__counter { position: absolute; right: 0; bottom: 10px; padding: 5px 10px; border-radius: 10px 0 0 10px; background: rgba(255, 255, 255, 0.95); font-size: 10px; font-weight: bold; }
.cs-article-link__title { padding: 10px 10px 5px; font-size: 14px; font-weight: bold; }
.cs-article-link__url { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #777; padding: 0 10px 10px; border-bottom: 1px solid #e6e6e6; color: #777; font-size: 11px; word-break: break-all; }
.cs-article-link__url:visited, .cs-article-link__url:active, .cs-article-link__url:hover { color: #777; }
.cs-article-link__comment,.cs-article__comment { padding: 15px 10px 5px; line-height: 1.6; }

.cs-article-post-image__item { display: block; height: 240px; margin-bottom: 1px; background-size: cover; background-position: 50% 50%; }
.cs-article-post-image__item:last-child { margin-bottom: 0; }
.cs-article-post__comment { padding: 15px 10px 5px; line-height: 1.6; border-bottom: 1px solid #e6e6e6; word-break: break-all; }

.cs-article-meta-tags { margin-bottom: 5px; font-size: 11px; }
.cs-article-meta-tags__item { display: table-cell; padding-right: 10px; vertical-align: top; }
.cs-article-meta-tags__item:last-child { padding-right: 0; }
.cs-article-meta-info { margin-bottom: 5px; color: #777; font-size: 11px; }
.cs-article-meta-info__date { display: table-cell; padding-right: 10px; }
.cs-article-meta-info__status { display: table-cell; padding-right: 10px; }
.cs-article-meta-button { font-size: 11px; }
.cs-article-meta-button:before, .cs-article-meta-button:after,.cs-profile__comment-button:before,.cs-profile__comment-button:after,.cs-profile-tabs__inner:before,.cs-profile-tabs__inner:after { content: ""; display: table; }
.cs-article-meta-button:after,.cs-profile__comment-button:after,.cs-profile-tabs__inner:after { clear: both; }
.cs-article-meta-button__item--like, .cs-article-meta-button__item--comment, .cs-article-meta-button__item--clip { float: left; margin-right: 5px; }
.cs-article-meta-button__item--like a, .cs-article-meta-button__item--comment a, .cs-article-meta-button__item--clip a { color: #484848; box-sizing: border-box; display: inline-block; min-width: 60px; height: 40px; border-radius: 3px; border: 1px solid #e6e6e6; text-align: center; font-weight: bold; line-height: 40px; }
.cs-article-meta-button__item--like a:visited, .cs-article-meta-button__item--like a:active, .cs-article-meta-button__item--like a:hover, .cs-article-meta-button__item--comment a:visited, .cs-article-meta-button__item--comment a:active, .cs-article-meta-button__item--comment a:hover, .cs-article-meta-button__item--clip a:visited, .cs-article-meta-button__item--clip a:active, .cs-article-meta-button__item--clip a:hover { color: #484848; }
.cs-article-meta-button__item--like a.is-active, .cs-article-meta-button__item--clip a.is-active { color: #ffffff; background: #cecece; }
.cs-article-meta-button__icon,.cs-article-header-menu__button,.cs-modal-cmt-item-memu__button { margin-right: 5px; color: #999999; font-size: 18px; vertical-align: -0.2ex; }
.cs-article-meta-button__item--report { float: right; font-size: 16px; }
.cs-article-meta-button__item--report a { color: #999999; display: inline-block; height: 40px; text-align: center; line-height: 40px; }
.cs-article-meta-button__item--report a:visited, .cs-article-meta-button__item--report a:active, .cs-article-meta-button__item--report a:hover { color: #999999; }

.cs-modal-cmt { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: none; box-sizing: border-box; position: fixed; top: 20px; bottom: 20px; left: 10px; right: 10px; z-index: 10010; border-radius: 5px; background: #fff; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
.cs-modal-edit,.cs-modal-articles-menu,.cs-modal-cmt-menu,.cs-modal-cmt-menu-edit { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: none; box-sizing: border-box; position: fixed; height: 140px; top: 210px; left: 10px; right: 10px; z-index: 10010; border-radius: 5px; background: #fff; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
.cs-modal-articles-menu, .cs-modal-cmt-menu,.cs-cmt-menu-edit ,.cs-modal-cmt-menu-edit{ z-index: 20010; }
html.ios .cs-modal-cmt { height: calc(100vh - 40px); }
@media screen and (min-width: 480px) { .cs-modal-cmt,.cs-modal-edit,.cs-modal-articles-menu,.cs-modal-cmt-menu,.cs-modal-cmt-menu-edit,.cs-modal-articles-comment-edit { width: 460px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } }
.cs-modal-cmt__header { box-sizing: border-box; position: absolute; top: 0; width: 100%; height: 40px; border-bottom: 1px solid #e6e6e6; text-align: center; font-weight: bold; line-height: 40px; }
.cs-modal-edit__header { box-sizing: border-box; position: absolute; top: 0; width: 100%; height: 40px; text-align: center; font-weight: bold; line-height: 40px; }
.cs-modal-cmt__button-close, .cs-modal-edit__button-close,.cs-modal-articles-menu__button-close,.cs-modal-cmt-menu__button-close { position: absolute; right: 0; top: 0; width: 40px; font-size: 18px; cursor: pointer; }
.cs-modal-cmt__content { box-sizing: border-box; position: absolute; top: 40px; bottom: 100px; width: 100%; padding: 15px 15px 15px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cs-modal-cmt__footer { box-sizing: border-box; position: absolute; bottom: 0; width: 100%; padding: 10px; overflow: hidden; border-top: 1px solid #e6e6e6; }
.cs-modal-edit__footer,.cs-modal-articles-menu__footer,.cs-modal-cmt-menu__footer,.cs-modal-comment-edit { box-sizing: border-box; position: absolute; bottom: 0; width: 100%; padding: 10px; overflow: hidden; }

.cs-modal-cmt-item,.cs-article-cmt-item { margin-bottom: 10px; clear: left; }
.cs-modal-cmt-item:last-child,.cs-article-cmt-item:last-child { margin-bottom: 0; }
.cs-modal-cmt-item__icon,.cs-article-cmt-item__icon { float: left; }
.cs-modal-cmt-item__author-icon,.cs-article-cmt-item__author-icon { display: inline-block; width: 35px; height: 35px; margin-right: 5px; border-radius: 50%; background: #b3b3b3; }
.cs-modal-cmt-item__content,.cs-article-cmt-item__content { margin-left: 40px; line-height: 1.5; word-break: break-all; }
.cs-modal-cmt-item__author,.cs-article-cmt-item__author { margin-right: 0.5em; font-weight: bold; }
.cs-modal-cmt-item__footer,.cs-article-cmt-item__footer { margin-top: 3px; margin-left: 40px; color: #777; font-size: 11px; }

.cs-modal-cmt-form,.cs-modal-edit-form { display: inline-table; box-sizing: border-box; width: 100%; }
.cs-modal-cmt-form__field, .cs-modal-edit-form__field { display: table-cell; width: 99%; vertical-align: top; }
.cs-modal-cmt-form__field textarea,.cs-modal-edit-form__field textarea,.cs-modal-cmt-edit-item__field textarea { height: 70px; -webkit-transition: height 400ms; transition: height 400ms; resize: none; }
.cs-modal-cmt-form__button,.cs-modal-cmt-edit-item__button,.cs-modal-articles-menu__button,.cs-modal-cmt-menu__button { display: table-cell; width: 1%; padding-left: 10px; vertical-align: top; }

.cs-post { width: 100%; }
@media screen and (max-width: 479px) { .cs-post { min-width: 320px; } }
@media screen and (min-width: 480px) { .cs-post { min-width: 480px; } }
.cs-post__inner { box-sizing: border-box; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 479px) { .cs-post__inner { width: 100%; } }
@media screen and (min-width: 480px) { .cs-post__inner { width: 480px; } }
.cs-post__inner { padding: 20px 10px; }

.cs-post-form__item { margin-bottom: 30px; }

.cs-post-text__icon { float: left; }
.cs-post-text__icon img { width: 45px; height: 45px; border-radius: 50%; }
.cs-post-text__field { min-height: 45px; margin-left: 50px; }

.cs-post-link { position: relative; margin-top: 10px; border: 1px solid #e6e6e6; }
.cs-post-link__image { height: 240px; background-size: cover; background-position: 50% 50%; position: relative; }
.cs-post-link__title { padding: 10px 10px 5px; font-size: 14px; font-weight: bold; }
.cs-post-link__url { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 10px 10px; color: #777; font-size: 11px; }
.cs-post-link__item-remove { position: absolute; right: 5px; top: 5px; z-index: 1; }
.cs-post-link__item-remove a { color: #fff; display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: #777; color: #fff; font-size: 24px; line-height: 40px; text-align: center; cursor: pointer; }
.cs-post-link__item-remove a:visited, .cs-post-link__item-remove a:active, .cs-post-link__item-remove a:hover { color: #fff; }

.cs-post-image__item { position: relative; min-height: 50px; margin-bottom: 5px; }
.cs-post-image__item img { width: 100%; }
.cs-post-image__item-remove { position: absolute; right: 5px; top: 5px; z-index: 1; }
.cs-post-image__item-remove a { color: #fff; display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: #777; color: #fff; font-size: 24px; line-height: 40px; text-align: center; cursor: pointer; }
.cs-post-image__item-remove a:visited, .cs-post-image__item-remove a:active, .cs-post-image__item-remove a:hover { color: #fff; }
.cs-post-image__button { margin-top: 10px; }
.cs-post-image__label { margin-bottom: 5px; }

.cs-post-tag__label { margin-bottom: 5px; }

.cs-post-button { margin-top: 40px; }
.cs-post-button__item { margin-bottom: 15px; }

.cs-modal-tool { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: none; position: fixed; z-index: 10010; width: 300px; border-radius: 5px; background: #fff; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
.cs-modal-tool__content { padding: 20px 20px; }

.cs-modal-tool-button__item { margin-bottom: 10px; }
.cs-modal-tool-button__item:last-child { margin-bottom: 0; }

.cs-page-top { background: #f5f2e1; }
.cs-page-top__inner { padding: 8px 0 8px 10px; }
.cs-page-top__inner a {  color: #777; }

.cs-profile { background: #ffffff; border-bottom: 1px solid #e6e6e6; padding-top: 20px; }
.cs-profile-info__author { width: 68px; height: 68px; margin: 0 auto; }
.cs-profile-info__author-icon { width: 68px; height: 68px; border-radius: 50%; box-sizing: border-box; }
.cs-profile-info__author-name { text-align: center; font-weight: bold; padding-top: 10px; font-size: 18px; }
.cs-profile-info__comment { padding: 15px; line-height: 1.6; max-width: 480px; margin: 0 auto; }
.cs-profile-info__comment-button { height: 25px; }
.cs-profile-info__comment-edit-button { float: right; width: 54px; margin-right: 10px; background-color: #ffd200; text-align: center; border-radius: 15px; border: 1px solid #484848; box-sizing: border-box; }
.cs-profile-info__comment-edit-button a { text-decoration: none; color: #484848; display: block; padding: 2px 0;}
.cs-profile-tabs {  max-width: 480px; margin: 0 auto; }
.cs-profile-tabs__inner li {float: left; text-align: center;}
.cs-profile-tabs__inner li.is-active { border-bottom: 3px solid #ffd200; }
.cs-profile-tabs__item--grid-3 {width: 33.333333%; padding-bottom: 10px;}
.cs-profile-tabs__item--grid-4 {width: 25%; padding-bottom: 10px;}
.cs-profile-tabs__item--grid-3 a:visited,.cs-profile-tabs__item--grid-3 a:hover,.cs-profile-tabs__item--grid-4 a:visited,.cs-profile-tabs__item--grid-4 a:hover { color:#484848;}
.cs-profile-tabs__user-count { color:#484848; font-size:24px; font-weight: bold; line-height: 1.5; display: block;}

.cs-unfollow { float: right; top: 15px; right: 15px; position: relative; }
.cs-unfollow a { display: block; padding: 10px; background:#ffffff; width: 66px; font-size: 11px; border: 1px solid #d9d9d9; }

.cs-profile-contents { background: #f5f2e1; border-top: 1px solid #e6e6e6; }

.cs-follow-list { background: #fff; }
.cs-follow-list__inner { display: table; width: 460px; margin: 0 auto; }
@media screen and (max-width: 479px) { .cs-follow-list__inner { width: 100%;} }
.cs-follow-list__author { display: table-cell; vertical-align: middle; font-weight: bold; }
.cs-follow-list__author-icon { display: inline-block; width: 35px; height: 35px; margin-right: 5px; border-radius: 50%; background: #b3b3b3; vertical-align: middle; }
.cs-follow-list__follow { display: table-cell; width: 70px; text-align: center; border: 1px solid #d9d9d9; vertical-align: middle; font-size: 11px; }
.cs-follow-list__item { padding: 10px; border-bottom: 1px solid #d9d9d9;}

.cs-profile-contents__item { display: none; }
.cs-profile-contents__item.is-active { display: block; }

.cs-article-header-menu,.cs-modal-cmt-item-memu { font-size: 18px; float: right; position: relative; }
.cs-article-header-menu a,.cs-modal-cmt-item-memu a { display: block; color:#000000; }

.cs-modal-articles-menu__header,.cs-modal-article-header-menu__header { box-sizing: border-box;  position: absolute;  top: 0;  width: 100%;  height: 40px;  border-bottom: 1px solid #e6e6e6;  text-align: center;  font-weight: bold;  line-height: 40px; }
.cs-modal-articles-menu__text,.cs-modal-cmt-menu__text {  position: absolute; top: 40px; padding: 15px;}
.cs-article-header-menu__list,.cs-modal-cmt-item-memu__list { position: absolute; top: 30px; left: -25px; background:#ffffff; font-size: 14px; text-align: center; z-index: 100; border:1px solid #e3e3e3; border-radius: 5px;  width: 60px; display: none;}
.cs-article-header-menu__item,.cs-modal-cmt-item-memu__item { solid #e3e3e3; padding: 5px 10px; }
.cs-article-header-menu__item a,.cs-modal-cmt-item-memu__item a { color:#000000; }
.cs-article-header-menu__item:last-child { border-bottom: none; }

.cs-articles-edit-form__author { float: left; width: 35px; padding-right: 10px; }
.cs-articles-edit-form__comment { float: left; width: 415px; }
.cs-articles-edit__add-btn,.cs-articles-edit__post-btn,.cs-articles-edit__cancel-btn { width: 1000px; }

.cs-articles-edit-form__comment { height: 100px!important; -webkit-appearance: none; }
textarea.cs-articles-edit-form__comment { resize: none; }

.cs-modal-cmt-edit-item__field { width: 370px; }
.cs-modal-cmt-edit-item { display: none; }