{"version":3,"sources":["codegrid-ui.css","codegrid-ui.scss","vendor/_normalize.scss","vendor/_prism.scss","_2_basic.scss","_0_vars.scss","_3_animations.scss","_icon-utils.scss","_icon.scss","_placeholder.scss","_template.scss","_1_utils.scss","_components-shared.scss","_components-app.scss","vendor/_media-queries.scss"],"names":[],"mappings":"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","file":"codegrid-ui.min.css","sourcesContent":["@charset \"UTF-8\";\n/* CodeGrid-UI for CodeGrid app */\n@font-face {\n  font-family: \"codegrid-num\";\n  src: url(\"../font/codegrid-num.woff2\") format(\"woff2\"), url(\"../font/codegrid-num.woff\") format(\"woff\");\n  font-weight: normal;\n  font-style: normal; }\n\n/*! normalize.css v3.0.1 | MIT License | git.io/normalize */\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n *    user zoom.\n */\nhtml {\n  font-family: sans-serif;\n  /* 1 */\n  -ms-text-size-adjust: 100%;\n  /* 2 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */ }\n\n/**\n * Remove default margin.\n */\nbody {\n  margin: 0; }\n\n/* HTML5 display definitions\n   ========================================================================== */\n/**\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\n * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.\n * Correct `block` display not defined for `main` in IE 11.\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n  display: block; }\n\n/**\n * 1. Correct `inline-block` display not defined in IE 8/9.\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\n */\naudio,\ncanvas,\nprogress,\nvideo {\n  display: inline-block;\n  /* 1 */\n  vertical-align: baseline;\n  /* 2 */ }\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\naudio:not([controls]) {\n  display: none;\n  height: 0; }\n\n/**\n * Address `[hidden]` styling not present in IE 8/9/10.\n * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.\n */\n[hidden],\ntemplate {\n  display: none; }\n\n/* Links\n   ========================================================================== */\n/**\n * Remove the gray background color from active links in IE 10.\n */\na {\n  background: transparent; }\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\na:active,\na:hover {\n  outline: 0; }\n\n/* Text-level semantics\n   ========================================================================== */\n/**\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.\n */\nabbr[title] {\n  border-bottom: 1px dotted; }\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\n */\nb,\nstrong {\n  font-weight: bold; }\n\n/**\n * Address styling not present in Safari and Chrome.\n */\ndfn {\n  font-style: italic; }\n\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari, and Chrome.\n */\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0; }\n\n/**\n * Address styling not present in IE 8/9.\n */\nmark {\n  background: #ff0;\n  color: #000; }\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\nsmall {\n  font-size: 80%; }\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline; }\n\nsup {\n  top: -0.5em; }\n\nsub {\n  bottom: -0.25em; }\n\n/* Embedded content\n   ========================================================================== */\n/**\n * Remove border when inside `a` element in IE 8/9/10.\n */\nimg {\n  border: 0; }\n\n/**\n * Correct overflow not hidden in IE 9/10/11.\n */\nsvg:not(:root) {\n  overflow: hidden; }\n\n/* Grouping content\n   ========================================================================== */\n/**\n * Address margin not present in IE 8/9 and Safari.\n */\nfigure {\n  margin: 1em 40px; }\n\n/**\n * Address differences between Firefox and other browsers.\n */\nhr {\n  -moz-box-sizing: content-box;\n  box-sizing: content-box;\n  height: 0; }\n\n/**\n * Contain overflow in all browsers.\n */\npre {\n  overflow: auto; }\n\n/**\n * Address odd `em`-unit font size rendering in all browsers.\n */\ncode,\nkbd,\npre,\nsamp {\n  font-family: monospace, monospace;\n  font-size: 1em; }\n\n/* Forms\n   ========================================================================== */\n/**\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\n * styling of `select`, unless a `border` property is set.\n */\n/**\n * 1. Correct color not being inherited.\n *    Known issue: affects color of disabled elements.\n * 2. Correct font properties not being inherited.\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  color: inherit;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n  margin: 0;\n  /* 3 */ }\n\n/**\n * Address `overflow` set to `hidden` in IE 8/9/10/11.\n */\nbutton {\n  overflow: visible; }\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\n * Correct `select` style inheritance in Firefox.\n */\nbutton,\nselect {\n  text-transform: none; }\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n *    and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n *    `input` and others.\n */\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n  -webkit-appearance: button;\n  /* 2 */\n  cursor: pointer;\n  /* 3 */ }\n\n/**\n * Re-set default cursor for disabled elements.\n */\nbutton[disabled],\nhtml input[disabled] {\n  cursor: default; }\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n  border: 0;\n  padding: 0; }\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\ninput {\n  line-height: normal; }\n\n/**\n * It's recommended that you don't attempt to style these elements.\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\n *\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */ }\n\n/**\n * Fix the cursor style for Chrome's increment/decrement buttons. For certain\n * `font-size` values of the `input`, it causes the cursor style of the\n * decrement button to change from `default` to `text`.\n */\ninput[type=\"number\"]::-webkit-inner-spin-button,\ninput[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto; }\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome\n *    (include `-moz` to future-proof).\n */\ninput[type=\"search\"] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  -moz-box-sizing: content-box;\n  -webkit-box-sizing: content-box;\n  /* 2 */\n  box-sizing: content-box; }\n\n/**\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\n * Safari (but not Chrome) clips the cancel button when the search input has\n * padding (and `textfield` appearance).\n */\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none; }\n\n/**\n * Define consistent border, margin, and padding.\n */\nfieldset {\n  border: 1px solid #c0c0c0;\n  margin: 0 2px;\n  padding: 0.35em 0.625em 0.75em; }\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\nlegend {\n  border: 0;\n  /* 1 */\n  padding: 0;\n  /* 2 */ }\n\n/**\n * Remove default vertical scrollbar in IE 8/9/10/11.\n */\ntextarea {\n  overflow: auto; }\n\n/**\n * Don't inherit the `font-weight` (applied by a rule above).\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\n */\noptgroup {\n  font-weight: bold; }\n\n/* Tables\n   ========================================================================== */\n/**\n * Remove most spacing between table cells.\n */\ntable {\n  border-collapse: collapse;\n  border-spacing: 0; }\n\ntd,\nth {\n  padding: 0; }\n\n/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+coffeescript+ruby+git+handlebars+http+jade+json+less+markdown+jsx+sass+scss+stylus+typescript+yaml&plugins=line-numbers+autolinker */\n/**\n * prism.js default theme for JavaScript, CSS and HTML\n * Based on dabblet (http://dabblet.com)\n * @author Lea Verou\n */\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n  color: black;\n  background: none;\n  text-shadow: 0 1px white;\n  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  line-height: 1.5;\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none; }\n\npre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\ncode[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n  text-shadow: none;\n  background: #b3d4fc; }\n\npre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\ncode[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n  text-shadow: none;\n  background: #b3d4fc; }\n\n@media print {\n  code[class*=\"language-\"],\n  pre[class*=\"language-\"] {\n    text-shadow: none; } }\n\n/* Code blocks */\npre[class*=\"language-\"] {\n  padding: 1em;\n  margin: .5em 0;\n  overflow: auto; }\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n  background: #f5f2f0; }\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n  padding: .1em;\n  border-radius: .3em;\n  white-space: normal; }\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n  color: slategray; }\n\n.token.punctuation {\n  color: #999; }\n\n.namespace {\n  opacity: .7; }\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n  color: #905; }\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n  color: #690; }\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n  color: #a67f59;\n  background: rgba(255, 255, 255, 0.5); }\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n  color: #07a; }\n\n.token.function {\n  color: #DD4A68; }\n\n.token.regex,\n.token.important,\n.token.variable {\n  color: #e90; }\n\n.token.important,\n.token.bold {\n  font-weight: bold; }\n\n.token.italic {\n  font-style: italic; }\n\n.token.entity {\n  cursor: help; }\n\npre.line-numbers {\n  position: relative;\n  padding-left: 3.8em;\n  counter-reset: linenumber; }\n\npre.line-numbers > code {\n  position: relative; }\n\n.line-numbers .line-numbers-rows {\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  font-size: 100%;\n  left: -3.8em;\n  width: 3em;\n  /* works for line-numbers below 1000 lines */\n  letter-spacing: -1px;\n  border-right: 1px solid #999;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none; }\n\n.line-numbers-rows > span {\n  pointer-events: none;\n  display: block;\n  counter-increment: linenumber; }\n\n.line-numbers-rows > span:before {\n  content: counter(linenumber);\n  color: #999;\n  display: block;\n  padding-right: 0.8em;\n  text-align: right; }\n\n.token a {\n  color: inherit; }\n\n/* レイアウトのためのゼロ幅フォント\n   ========================================================================== */\n@font-face {\n  font-family: 'zeroWidth';\n  src: url(\"../font/zero-width.woff\") format(\"woff\");\n  font-weight: normal;\n  font-style: normal; }\n\n/* mqpackerが意図した順番にソースを並び替えるためのおまじない\n   ========================================================================== */\n@media screen and (max-width: 979px) {\n  _x {\n    _x: 0; } }\n\n@media screen and (max-width: 767px) {\n  _x {\n    _x: 0; } }\n\n@media screen and (max-width: 639px) {\n  _x {\n    _x: 0; } }\n\n/* modifier: align\n   ========================================================================== */\n.CG2--alignLeft {\n  text-align: left !important; }\n\n.CG2--alignRight {\n  text-align: right !important; }\n\n.CG2--alignCenter {\n  text-align: center !important; }\n\n.CG2--alignTop {\n  vertical-align: top !important; }\n\n.CG2--alignMiddle {\n  vertical-align: middle !important; }\n\n.CG2--alignBottom {\n  vertical-align: bottom !important; }\n\n/* modifier: display\n   ========================================================================== */\n:root .CG2--disableLargeScreen {\n  display: none; }\n\n@media screen and (max-width: 767px) and (min-width: 640px) {\n  :root .CG2--disableLargeScreen {\n    display: block; }\n  :root .CG2--disableMiddleScreen {\n    display: none !important; }\n  :root .CG2--disableSmallScreen {\n    display: block; }\n  :root span.CG2--disableLargeScreen,\n  :root br.CG2--disableLargeScreen {\n    display: inline; }\n  :root span.CG2--disableMiddleScreen,\n  :root br.CG2--disableMiddleScreen {\n    display: none !important; }\n  :root span.CG2--disableSmallScreen,\n  :root br.CG2--disableSmallScreen {\n    display: inline; } }\n\n@media screen and (max-width: 639px) {\n  :root .CG2--disableLargeScreen {\n    display: block; }\n  :root .CG2--disableMiddleScreen {\n    display: block; }\n  :root .CG2--disableSmallScreen {\n    display: none !important; }\n  :root span.CG2--disableLargeScreen,\n  :root br.CG2--disableLargeScreen {\n    display: inline; }\n  :root span.CG2--disableMiddleScreen,\n  :root br.CG2--disableMiddleScreen {\n    display: inline; }\n  :root span.CG2--disableSmallScreen,\n  :root br.CG2--disableSmallScreen {\n    display: none !important; } }\n\n/* ==========================================================================\n   general style\n   ========================================================================== */\n::selection {\n  background-color: #d7ef8f;\n  text-shadow: none; }\n\nhtml {\n  color: #242424;\n  font-family: Helvetica, \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif;\n  font-size: 16px;\n  line-height: 1.8;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background: url(\"data:image/gif;base64,R0lGODlhAQABAPAAABkZGQAAACwAAAAAAQABAAACAkQBADs=\"); }\n  @media screen and (max-width: 767px) {\n    html {\n      font-size: 12px; } }\n\nbody {\n  margin: 0;\n  background: #fff; }\n  @media screen and (max-width: 767px) {\n    body {\n      min-width: 0; } }\n\na {\n  color: #10a040;\n  transition: color .2s; }\n\na:hover,\na:active {\n  transition: color 0s; }\n\niframe[name=\"google_conversion_frame\"] {\n  position: absolute;\n  top: 0;\n  left: -100px;\n  width: 1px;\n  height: 1px; }\n\n/* jump\n   ========================================================================== */\n@keyframes anim-jump {\n  0% {\n    transform: translateY(0) scaleY(1); }\n  20% {\n    transform: translateY(2px) scaleY(0.6); }\n  60% {\n    transform: translateY(-5px) scaleY(1.1); }\n  100% {\n    transform: translateY(0) scaleY(1); } }\n\n/* scale\n   ========================================================================== */\n@keyframes anim-scaleup {\n  0% {\n    transform: none; }\n  40% {\n    transform: scale(1.05); }\n  100% {\n    transform: none; } }\n\n/* アイコンの基礎スタイル\n   ========================================================================== */\n[class^=\"CG2-icon-\"], [class*=\" CG2-icon-\"], .CG2-pageHeader__searchInner:before, .CG2-drawerBody__searchInner:before, .CG2-searchFailed__search:before, .CG2-pageHeader__userOpener:after, .CG2-pageHeader__opener:after, .CG2-pageFooter__wwwNav a:before, .CG2-pageFooter__appNavHeading a:before, .CG2-pageFooter__appNavSearchInner:before, .CG2-pageFooter__appNavList a:before, .CG2-drawerBody__nav a:before, .CG2-seriesList__itemMore a:after, .CG2-seriesWeekHeader__prev a::before, .CG2-seriesWeekHeader__next a::after, .CG2-compactNav .CG2-compactNav__navOpener:after, .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev a:before, .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext a:before, .CG2-articleTOC__list a::before, .CG2-articlePagination li.CG2-articlePagination__prev a:before, .CG2-articlePagination li.CG2-articlePagination__next a:before {\n  font-family: \"codegrid-icon\";\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  vertical-align: middle;\n  display: inline-block;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale; }\n\n/* アイコンフォント\n   ========================================================================== */\n@font-face {\n  font-family: \"codegrid-icon\";\n  src: url(\"../font/codegrid-icon.woff2\") format(\"woff2\"), url(\"../font/codegrid-icon.woff\") format(\"woff\");\n  font-weight: normal;\n  font-style: normal; }\n\n/*\n---\nname: Icon\ncategory:\n  - Icons\ntag:\n  - icon\n---\n\npxg\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-pxg\"></span>\n  \n</div>\n```\n\ntop\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-top\"></span>\n  \n</div>\n```\n\nright\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-right\"></span>\n  \n</div>\n```\n\ndown\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-down\"></span>\n  \n</div>\n```\n\nleft\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-left\"></span>\n  \n</div>\n```\n\nhamburger\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-hamburger\"></span>\n  \n</div>\n```\n\nlist\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-list\"></span>\n  \n</div>\n```\n\nsetting\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-setting\"></span>\n  \n</div>\n```\n\nsearch\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-search\"></span>\n  \n</div>\n```\n\nstar\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-star\"></span>\n  \n</div>\n```\n\nlock\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-lock\"></span>\n  \n</div>\n```\n\nunlock\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-unlock\"></span>\n  \n</div>\n```\n\nquestion\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-question\"></span>\n  \n</div>\n```\n\nexclamation-circle\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-exclamation-circle\"></span>\n  \n</div>\n```\n\nexclamation-triangle\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-exclamation-triangle\"></span>\n  \n</div>\n```\n\ntwitter\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-twitter\"></span>\n  \n</div>\n```\n\nfacebook\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-facebook\"></span>\n  \n</div>\n```\n\ngplus\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-gplus\"></span>\n  \n</div>\n```\n\ncat-elementary\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-elementary\"></span>\n  <span class=\"CG2-icon-cat-elementary CG2-icon--colored\"></span>\n</div>\n```\n\ncat-mastering\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-mastering\"></span>\n  <span class=\"CG2-icon-cat-mastering CG2-icon--colored\"></span>\n</div>\n```\n\ncat-standards\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-standards\"></span>\n  <span class=\"CG2-icon-cat-standards CG2-icon--colored\"></span>\n</div>\n```\n\ncat-talk\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-talk\"></span>\n  <span class=\"CG2-icon-cat-talk CG2-icon--colored\"></span>\n</div>\n```\n\ncat-architecture\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-architecture\"></span>\n  <span class=\"CG2-icon-cat-architecture CG2-icon--colored\"></span>\n</div>\n```\n\ncat-report\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-report\"></span>\n  <span class=\"CG2-icon-cat-report CG2-icon--colored\"></span>\n</div>\n```\n\ncat-design\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-design\"></span>\n  <span class=\"CG2-icon-cat-design CG2-icon--colored\"></span>\n</div>\n```\n\ncat-future\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-future\"></span>\n  <span class=\"CG2-icon-cat-future CG2-icon--colored\"></span>\n</div>\n```\n\ncat-work-style\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-work-style\"></span>\n  <span class=\"CG2-icon-cat-work-style CG2-icon--colored\"></span>\n</div>\n```\n\ncat-survey\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-survey\"></span>\n  <span class=\"CG2-icon-cat-survey CG2-icon--colored\"></span>\n</div>\n```\n\ncat-interview\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-interview\"></span>\n  <span class=\"CG2-icon-cat-interview CG2-icon--colored\"></span>\n</div>\n```\n\ncat-discussion\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-discussion\"></span>\n  <span class=\"CG2-icon-cat-discussion CG2-icon--colored\"></span>\n</div>\n```\n\n*/\n[class^=\"CG2-icon-\"], [class*=\" CG2-icon-\"] {\n  position: relative;\n  top: -0.1em; }\n\n.CG2-icon-pxg:before {\n  content: \"\\\"; }\n\n.CG2-icon-top:before {\n  content: \"\\\"; }\n\n.CG2-icon-right:before {\n  content: \"\\\"; }\n\n.CG2-icon-down:before {\n  content: \"\\\"; }\n\n.CG2-icon-left:before {\n  content: \"\\\"; }\n\n.CG2-icon-hamburger:before {\n  content: \"\\\"; }\n\n.CG2-icon-list:before {\n  content: \"\\\"; }\n\n.CG2-icon-setting:before {\n  content: \"\\\"; }\n\n.CG2-icon-search:before {\n  content: \"\\\"; }\n\n.CG2-icon-star:before {\n  content: \"\\\"; }\n\n.CG2-icon-lock:before {\n  content: \"\\\"; }\n\n.CG2-icon-unlock:before {\n  content: \"\\\"; }\n\n.CG2-icon-question:before {\n  content: \"\\\"; }\n\n.CG2-icon-exclamation-circle:before {\n  content: \"\\\"; }\n\n.CG2-icon-exclamation-triangle:before {\n  content: \"\\\"; }\n\n.CG2-icon-twitter:before {\n  content: \"\\\"; }\n\n.CG2-icon-facebook:before {\n  content: \"\\\"; }\n\n.CG2-icon-gplus:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-elementary:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-mastering:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-standards:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-talk:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-architecture:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-report:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-design:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-future:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-work-style:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-survey:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-interview:before {\n  content: \"\\\"; }\n\n.CG2-icon-cat-discussion:before {\n  content: \"\\\"; }\n\nspan.CG2-icon--colored.CG2-icon-unlock {\n  color: #f8a000; }\n\nspan.CG2-icon--colored.CG2-icon-cat-elementary {\n  color: #f4db00; }\n\nspan.CG2-icon--colored.CG2-icon-cat-mastering {\n  color: #9cc500; }\n\nspan.CG2-icon--colored.CG2-icon-cat-standards {\n  color: #009b26; }\n\nspan.CG2-icon--colored.CG2-icon-cat-talk {\n  color: #009b9b; }\n\nspan.CG2-icon--colored.CG2-icon-cat-architecture {\n  color: #009be7; }\n\nspan.CG2-icon--colored.CG2-icon-cat-report {\n  color: #006bb5; }\n\nspan.CG2-icon--colored.CG2-icon-cat-design {\n  color: #000872; }\n\nspan.CG2-icon--colored.CG2-icon-cat-future {\n  color: #f89c00; }\n\nspan.CG2-icon--colored.CG2-icon-cat-work-style {\n  color: #ef0000; }\n\nspan.CG2-icon--colored.CG2-icon-cat-survey {\n  color: #ee0155; }\n\nspan.CG2-icon--colored.CG2-icon-cat-interview {\n  color: #ef007e; }\n\nspan.CG2-icon--colored.CG2-icon-cat-discussion {\n  color: #9c0178; }\n\n.CG2-pageHeader__search, .CG2-drawerBody__search {\n  box-sizing: border-box;\n  width: 100%;\n  background: #303030;\n  border-radius: 3px; }\n\n.CG2-pageHeader__searchInner, .CG2-drawerBody__searchInner, .CG2-searchFailed__search {\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  height: 100%; }\n  .CG2-pageHeader__searchInner:before, .CG2-drawerBody__searchInner:before, .CG2-searchFailed__search:before {\n    content: \"\";\n    color: #777;\n    font-size: 12px;\n    line-height: 0;\n    position: absolute;\n    top: 50%;\n    left: 10px; }\n  .CG2-pageHeader__searchInner form, .CG2-drawerBody__searchInner form, .CG2-searchFailed__search form {\n    height: 100%; }\n  .CG2-pageHeader__searchInner input, .CG2-drawerBody__searchInner input, .CG2-searchFailed__search input {\n    color: #fff;\n    font-size: 16px;\n    box-sizing: border-box;\n    display: block;\n    border: none;\n    width: 100%;\n    height: 100%;\n    padding: .5em 10px .5em 34px;\n    background: transparent;\n    transition: all .2s; }\n    .CG2-pageHeader__searchInner input:hover, .CG2-drawerBody__searchInner input:hover, .CG2-searchFailed__search input:hover, .CG2-pageHeader__searchInner input:focus, .CG2-drawerBody__searchInner input:focus, .CG2-searchFailed__search input:focus {\n      background: #303030; }\n\n.CG2-seriesList__author, .CG2-series__author {\n  display: table;\n  margin-bottom: 1px; }\n\n.CG2-seriesList__authorPic, .CG2-series__authorPic {\n  vertical-align: middle;\n  display: table-cell;\n  padding-right: 5px; }\n  .CG2-seriesList__authorPic img, .CG2-series__authorPic img {\n    display: block; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__authorPic img, .CG2-series__authorPic img {\n        width: 28px;\n        height: 28px; } }\n\n.CG2-seriesList__authorName, .CG2-series__authorName {\n  font-size: 12px;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 5px 10px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__authorName, .CG2-series__authorName {\n      font-size: 10px;\n      padding-left: 5px;\n      padding-right: 5px; } }\n\n.CG2-seriesList__authorPicList ul, .CG2-series__authorPicList ul {\n  font-size: 0;\n  list-style: none;\n  padding: 0;\n  margin: 0; }\n\n.CG2-seriesList__authorPicList li, .CG2-series__authorPicList li {\n  display: inline-block;\n  margin: 0 1px 1px 0; }\n\n.CG2-seriesList__authorPicList img, .CG2-series__authorPicList img {\n  display: block; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__authorPicList img, .CG2-series__authorPicList img {\n      width: 28px;\n      height: 28px; } }\n\n/* ==========================================================================\n   offsetting an in-page anchor to adjust for fixed header\n   http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors\n   ========================================================================== */\n:target:before {\n  content: '';\n  overflow: auto;\n  position: static;\n  display: block;\n  width: 1px;\n  height: 56px;\n  /* fixed header height*/\n  margin: -56px 0 0;\n  /* negative fixed header height */ }\n  @media screen and (max-width: 767px) {\n    :target:before {\n      height: 35px;\n      margin-top: -35px; } }\n\n/* ==========================================================================\n   pageHeaderPlacer\n   ========================================================================== */\n.CG2-pageHeaderPlacer {\n  height: 56px;\n  background: #000; }\n\n@media screen and (max-width: 767px) {\n  .CG2-pageHeaderPlacer {\n    height: 35px; } }\n\n/* ==========================================================================\n   pageHeader\n   ========================================================================== */\n/*\n---\nname: Page Header\ncategory:\n  - Templates\ntag:\n  - Template\ntemplateItem:\n  - true\n---\n\n- `CG2-pageHeaderPlacer`を併用すると高さを確保することができる、高さ確保が不要なら`CG2-pageHeaderPlacer`を利用しない\n- 実際に利用するときには以下のコードから`style=\"position:relative;\"`を**取り除いて使う**\n\n## WWW用\n\n```html\n<div class=\"CG2-pageHeaderPlacer\">\n  <header class=\"CG2-pageHeader\" style=\"position:relative;\">\n    <div class=\"CG2-pageHeader__inner\">\n      <div class=\"CG2-pageHeader__logo\">\n        <a href=\"#\"><img src=\"../../../assets2/img/CG2-pageHeader/logo.svg\" alt=\"CodeGrid\" width=\"125\" height=\"24\"></a>\n      </div>\n      <div class=\"CG2-pageHeader__nav\">\n        <ul>\n          <li><a href=\"#\">料金</a></li>\n          <li><a href=\"#\">団体購読</a></li>\n          <li><a href=\"#\">よくある質問</a></li>\n          <li><a href=\"#\">書籍</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__buttons\">\n        <ul>\n          <li><a class=\"CG2-button CG2-button--primary CG2-button--thin\" href=\"#\">購読する</a></li>\n          <li><a href=\"#\">ログイン</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__opener\" data-drawer-toggle></div>\n    </div>\n  </header>\n</div>\n```\n\n## APP用\n\n```html\n<div class=\"CG2-pageHeaderPlacer\">\n  <header class=\"CG2-pageHeader\" style=\"position:relative;\">\n    <div class=\"CG2-pageHeader__inner\">\n      <div class=\"CG2-pageHeader__logo\">\n        <a href=\"#\"><img src=\"../../../assets2/img/CG2-pageHeader/logo.svg\" alt=\"CodeGrid\" width=\"125\" height=\"24\"></a>\n      </div>\n      <div class=\"CG2-pageHeader__appNav\">\n        <ul>\n          <li><a href=\"#\">最新記事一覧</a></li>\n          <li><a href=\"#\">お気に入り一覧</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__search\">\n        <div class=\"CG2-pageHeader__searchInner\">\n          <form>\n            <input type=\"search\">\n          </form>\n        </div>\n      </div>\n      <div class=\"CG2-pageHeader__buttons\">\n        <ul>\n          <li><a class=\"CG2-button CG2-button--primary CG2-button--thin\" href=\"#\">購読する</a></li>\n          <li><a href=\"#\">ログイン</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__opener\" data-drawer-toggle></div>\n    </div>\n  </header>\n</div>\n```\n\n\n## APP用 ログイン後\n\n```html\n<div class=\"CG2-pageHeaderPlacer\">\n  <header class=\"CG2-pageHeader\" style=\"position:relative;\">\n    <div class=\"CG2-pageHeader__inner\">\n      <div class=\"CG2-pageHeader__logo\">\n        <img src=\"../../../assets2/img/CG2-pageHeader/logo.svg\" alt=\"CodeGrid\" width=\"125\" height=\"24\">\n      </div>\n      <div class=\"CG2-pageHeader__appNav\">\n        <ul>\n          <li><a href=\"#\">最新記事一覧</a></li>\n          <li><a href=\"#\">お気に入り一覧</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__search\">\n        <div class=\"CG2-pageHeader__searchInner\">\n          <form>\n            <input type=\"search\">\n          </form>\n        </div>\n      </div>\n      <div class=\"CG2-pageHeader__user\">\n        <div class=\"CG2-pageHeader__userHeader\">\n          <div class=\"CG2-pageHeader__userName\">gurio@pxgrid.example</div>\n          <div class=\"CG2-pageHeader__userAvatar\">\n            <img src=\"__dummy__112x112\" alt=\"\" width=\"56\" height=\"56\">\n          </div>\n          <div class=\"CG2-pageHeader__userOpener\"></div>\n        </div>\n        <div class=\"CG2-pageHeader__userMenu\">\n          <div class=\"CG2-pageHeader__userMenuInner\">\n            <ul>\n              <li><a class=\"CG2-button CG2-button--fullWidth CG2--alignCenter\" href=\"#\">設定</a></li>\n              <li><a class=\"CG2-button CG2-button--fullWidth CG2--alignCenter\" href=\"#\">ログアウト</a></li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </header>\n</div>\n```\n\n## 導線無し（フォーム途中など）\n\n```html\n<div class=\"CG2-pageHeaderPlacer\">\n  <header class=\"CG2-pageHeader\" style=\"position:relative;\">\n    <div class=\"CG2-pageHeader__inner\">\n      <div class=\"CG2-pageHeader__logo\">\n        <img src=\"../../../assets2/img/CG2-pageHeader/logo.svg\" alt=\"CodeGrid\" width=\"125\" height=\"24\">\n      </div>\n    </div>\n  </header>\n</div>\n```\n\n*/\n@keyframes wf1-pageHeader-onmounted {\n  0% {\n    overflow: hidden;\n    height: 0; }\n  99% {\n    overflow: hidden;\n    height: 0; }\n  100% {\n    overflow: visible;\n    height: auto; } }\n\n@keyframes wf1-pageHeader-elastic-in {\n  0% {\n    height: 0;\n    opacity: 0;\n    transform: scale(0); }\n  1% {\n    height: auto; }\n  60% {\n    transform: scale(1.1); }\n  100% {\n    opacity: 1;\n    transform: scale(1); } }\n\n@keyframes wf1-pageHeader-elastic-out {\n  0% {\n    opacity: 1;\n    visibility: visible;\n    height: auto;\n    transform: scale(1); }\n  40% {\n    transform: scale(1.1); }\n  99% {\n    visibility: visible;\n    height: auto; }\n  100% {\n    opacity: 0;\n    visibility: hidden;\n    height: 0;\n    transform: scale(0); } }\n\n.CG2-pageHeader {\n  position: fixed;\n  z-index: 20;\n  box-sizing: border-box;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 56px;\n  background: rgba(0, 0, 0, 0.8);\n  transform: translate3d(0, 0, 0); }\n  .CG2-pageHeader:before, .CG2-pageHeader:after {\n    content: \"\";\n    display: table; }\n  .CG2-pageHeader:after {\n    clear: both; }\n  @media screen and (max-width: 767px) {\n    .CG2-pageHeader {\n      height: 35px;\n      padding: 0 10px;\n      transition: transform .4s; }\n      html.js-drawer--show .CG2-pageHeader {\n        transform: translateX(-100%) translateX(50px); } }\n  @media print {\n    .CG2-pageHeader {\n      position: relative;\n      height: 0;\n      border-bottom: 56px solid #191919; } }\n\n.CG2-pageHeader__inner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  max-width: 1100px;\n  height: 100%;\n  padding: 0 28px;\n  margin: 0 auto; }\n  @media screen and (max-width: 767px) {\n    .CG2-pageHeader__inner {\n      padding: 0 28px 0 0; } }\n\n.CG2-pageHeader__logo {\n  margin: 0 30px 0 0; }\n  .CG2-pageHeader__logo img {\n    display: block; }\n  @media screen and (max-width: 767px) {\n    .CG2-pageHeader__logo img {\n      width: 90px;\n      height: auto; } }\n\n.CG2-pageHeader__nav {\n  text-align: center;\n  margin: 0 auto; }\n  @media screen and (max-width: 767px) {\n    .CG2-pageHeader__nav {\n      display: none; } }\n  .CG2-pageHeader__nav ul {\n    font-size: 0;\n    list-style: none;\n    display: inline-block;\n    padding: 0;\n    margin: 0; }\n    .CG2-pageHeader__nav ul:before {\n      content: '';\n      display: inline-block;\n      width: 0;\n      height: 56px;\n      vertical-align: middle; }\n  .CG2-pageHeader__nav li {\n    font-size: 1rem;\n    vertical-align: middle;\n    display: inline-block;\n    padding: 0;\n    margin: 0 10px; }\n  .CG2-pageHeader__nav a {\n    color: #999;\n    font-size: 14px;\n    text-decoration: none;\n    display: inline-block;\n    padding: 10px;\n    margin: -10px; }\n    .CG2-pageHeader__nav a:hover {\n      color: #fff; }\n  @media print {\n    .CG2-pageHeader__nav {\n      display: none; } }\n\n@media screen and (max-width: 767px) {\n  .CG2-pageHeader__appNav {\n    display: none; } }\n\n.CG2-pageHeader__appNav ul {\n  font-size: 0;\n  list-style: none;\n  padding: 0;\n  margin: 0; }\n  .CG2-pageHeader__appNav ul:before {\n    content: '';\n    display: inline-block;\n    width: 0;\n    height: 56px;\n    vertical-align: middle; }\n    @media screen and (max-width: 1200px) {\n      .CG2-pageHeader__appNav ul:before {\n        content: none; } }\n\n.CG2-pageHeader__appNav li {\n  font-size: .875rem;\n  vertical-align: middle;\n  display: inline-block;\n  padding: 0;\n  margin: 0 10px; }\n  @media screen and (max-width: 1200px) {\n    .CG2-pageHeader__appNav li {\n      font-size: .75rem; } }\n\n.CG2-pageHeader__appNav a {\n  color: #999;\n  text-decoration: none;\n  display: inline-block;\n  padding: 10px;\n  margin: -10px; }\n  .CG2-pageHeader__appNav a:hover {\n    color: #fff; }\n\n@media print {\n  .CG2-pageHeader__appNav {\n    display: none; } }\n\n.CG2-pageHeader__search {\n  width: 280px;\n  height: 32px;\n  margin: 0 0 0 auto;\n  border: 1px solid #777;\n  background: transparent; }\n  @media screen and (max-width: 767px) {\n    .CG2-pageHeader__search {\n      display: none; } }\n  @media print {\n    .CG2-pageHeader__search {\n      display: none; } }\n\n.CG2-pageHeader__searchInner input {\n  line-height: 22px;\n  height: 30px;\n  padding: 4px 10px 4px 30px; }\n  .CG2-pageHeader__searchInner input:hover, .CG2-pageHeader__searchInner input:focus {\n    background: #303030; }\n\n.CG2-pageHeader__buttons {\n  margin: 0 0 0 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-pageHeader__buttons {\n      display: none; } }\n  @media print {\n    .CG2-pageHeader__buttons {\n      display: none; } }\n  .CG2-pageHeader__buttons ul {\n    list-style: none;\n    padding: 0;\n    margin: 0; }\n    .CG2-pageHeader__buttons ul:before {\n      content: '';\n      display: inline-block;\n      width: 0;\n      height: 56px;\n      vertical-align: middle; }\n  .CG2-pageHeader__buttons li {\n    font-size: 14px;\n    vertical-align: middle;\n    display: inline-block;\n    padding: 0;\n    margin: 0 10px; }\n  .CG2-pageHeader__buttons a:not(.CG2-button) {\n    color: #777;\n    font-size: 14px;\n    text-decoration: none;\n    display: inline-block;\n    padding: 10px;\n    margin: -10px; }\n    .CG2-pageHeader__buttons a:not(.CG2-button):hover {\n      color: #fff; }\n\n.CG2-pageHeader__user {\n  position: relative;\n  margin: 0 0 0 30px; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageHeader__user {\n      margin-left: 20px; } }\n  @media screen and (max-width: 767px) {\n    .CG2-pageHeader__user {\n      display: none; } }\n\n.CG2-pageHeader__userHeader {\n  display: table;\n  table-layout: fixed;\n  width: 280px;\n  height: 56px;\n  cursor: pointer; }\n\n.CG2-pageHeader__userName {\n  color: #777;\n  font-size: 14px;\n  text-align: right;\n  white-space: nowrap;\n  vertical-align: middle;\n  box-sizing: border-box;\n  display: table-cell;\n  padding-right: 20px;\n  overflow: hidden;\n  text-overflow: ellipsis; }\n\n.CG2-pageHeader__userAvatar {\n  vertical-align: middle;\n  box-sizing: border-box;\n  display: table-cell;\n  width: 56px; }\n  .CG2-pageHeader__userAvatar img {\n    display: block;\n    width: 56px;\n    height: 56px; }\n\n.CG2-pageHeader__userOpener {\n  color: #eee;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  width: 20px;\n  padding: 0 6px; }\n  .CG2-pageHeader__userOpener:after {\n    content: \"\";\n    position: relative;\n    transition: transform 0.4s cubic-bezier(0.3, 2, 0.6, 1); }\n    .CG2-pageHeader__userHeader:hover .CG2-pageHeader__userOpener:after,\n    .CG2-pageHeader__userHeader:focus .CG2-pageHeader__userOpener:after {\n      color: #fff;\n      transform: translateY(2px);\n      transition-duration: .4s; }\n\n.CG2-pageHeader__userMenu {\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n  height: 0;\n  margin-top: 2px;\n  animation-name: wf1-pageHeader-onmounted;\n  animation-fill-mode: forwards;\n  animation-duration: .3s; }\n  .CG2-pageHeader__userMenu.CG2-pageHeader__userMenu--show {\n    overflow: visible;\n    height: auto; }\n    .CG2-pageHeader__userMenu.CG2-pageHeader__userMenu--show .CG2-pageHeader__userMenuInner {\n      visibility: visible;\n      animation-name: wf1-pageHeader-elastic-in; }\n\n.CG2-pageHeader__userMenuInner {\n  visibility: hidden;\n  box-sizing: border-box;\n  padding: 10px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 2px;\n  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);\n  background: #fff;\n  transform-origin: 150px 0;\n  animation-name: wf1-pageHeader-elastic-out;\n  animation-duration: .3s;\n  animation-fill-mode: forwards; }\n  .CG2-pageHeader__userMenuInner:before {\n    content: \"\";\n    position: absolute;\n    top: -14px;\n    right: 38px;\n    display: block;\n    border: 7px solid transparent;\n    border-bottom-color: #fff; }\n  .CG2-pageHeader__userMenuInner ul {\n    list-style: none;\n    padding: 0;\n    margin: 0; }\n  .CG2-pageHeader__userMenuInner li {\n    margin: 0; }\n    .CG2-pageHeader__userMenuInner li + li {\n      margin-top: 10px; }\n\n@media screen and (max-width: 767px) {\n  .CG2-pageHeader__opener {\n    color: #fff;\n    font-size: 20px;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 20px;\n    height: 35px;\n    padding: 0 10px; }\n    .CG2-pageHeader__opener:after {\n      content: \"\";\n      line-height: 35px;\n      display: block; } }\n\n/* ==========================================================================\n   pageFooter\n   ========================================================================== */\n/*\n---\nname: Page Footer\ncategory:\n  - Templates\ntag:\n  - Template\ntemplateItem:\n  - true\n---\n\n```html\n<footer class=\"CG2-pageFooter\">\n  <div class=\"CG2-pageFooter__inner\">\n    <div class=\"CG2-pageFooter__wwwNav\">\n      <div class=\"CG2-pageFooter__logo\">\n        <img src=\"__dummy__128x32\" alt=\"CodeGrid\" width=\"128\" height=\"32\">\n      </div>\n      <ul>\n        <li><a href=\"#\">CodeGridについて</a></li>\n        <li><a href=\"#\">料金</a></li>\n        <li><a href=\"#\">団体購読</a></li>\n        <li><a href=\"#\">よくある質問</a></li>\n        <li><a href=\"#\">書籍</a></li>\n        <li><a href=\"#\">購読する</a></li>\n      </ul>\n    </div>\n\n    <div class=\"CG2-pageFooter__appNav\">\n      <div class=\"CG2-pageFooter__appNavHeader\">\n        <div class=\"CG2-pageFooter__appNavHeading\">\n          <a href=\"#\">アプリトップ</a>\n        </div>\n        <div class=\"CG2-pageFooter__appNavSearch\">\n          <div class=\"CG2-pageFooter__appNavSearchInner\">\n            <form>\n              <input type=\"search\">\n            </form>\n          </div>\n        </div>\n      </div>\n      <div class=\"CG2-pageFooter__appNavList\">\n        <ul>\n          <li><a href=\"#\">最新記事一覧</a></li>\n          <li><a href=\"#\">おすすめ記事一覧</a></li>\n          <li><a href=\"#\">お気に入り登録記事一覧</a></li>\n          <li><a href=\"#\">無料公開記事一覧</a></li>\n          <li><a href=\"#\">シリーズ一覧</a></li>\n          <li><a href=\"#\">著者一覧</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageFooter__appNavCategory\">\n        <ul>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-architecture\"></span>設計</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-future\"></span>未来・次世代</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-talk\"></span>座談会</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-mastering\"></span>実践</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-elementary\"></span>入門</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-standards\"></span>仕様解説</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-work-style\"></span>仕事術</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-report\"></span>レポート</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-design\"></span>デザイン</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-discussion\"></span>ディスカッション</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-interview\"></span>インタビュー</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-survey\"></span>アンケート</a></li>\n        </ul>\n      </div>\n    </div>\n\n    <div class=\"CG2-pageFooter__legalNav\">\n      <ul>\n        <li><a href=\"#\">公式Twitter</a></li>\n        <li><a href=\"#\">お問い合わせ</a></li>\n        <li><a href=\"#\">利用規約</a></li>\n        <li><a href=\"#\">プライバシーポリシー</a></li>\n        <li><a href=\"#\">特定商取引法に基づく表示</a></li>\n      </ul>\n      <div class=\"CG2-pageFooter__company\"><a href=\"#\">運営会社<img src=\"../../../assets2/img/CG2-pageFooter/pxg-logo.svg\" alt=\"PixelGrid\" width=\"128\" height=\"32\"></a></div>\n    </div>\n  </div>\n<!-- /.CG2-pageFooter --></footer>\n```\n\n## 導線無し（フォーム途中など）\n\n```html\n<footer class=\"CG2-pageFooter CG2-pageFooter--simple\">\n  <div class=\"CG2-pageFooter__inner\">\n    <div class=\"CG2-pageFooter__legalNav\">\n      <div class=\"CG2-pageFooter__company\">運営会社<img src=\"../../../assets2/img/CG2-pageFooter/pxg-logo.svg\" alt=\"PixelGrid\" width=\"128\" height=\"32\"></div>\n    </div>\n  </div>\n<!-- /.CG2-pageFooter --></footer>\n```\n\n*/\n.CG2-pageFooter {\n  color: #777;\n  font-size: 12px;\n  padding: 60px 0;\n  margin-top: 50px;\n  background: #191919; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter {\n      padding-left: 28px;\n      padding-right: 28px; } }\n  .CG2-pageFooter.CG2-pageFooter--simple {\n    padding: 30px 0; }\n  @media screen and (max-width: 639px) {\n    .CG2-pageFooter {\n      padding: 30px 0; }\n      .CG2-container + .CG2-pageFooter {\n        margin-top: 0; } }\n  @media print {\n    .CG2-pageFooter {\n      position: relative;\n      z-index: 1; }\n      .CG2-pageFooter:after {\n        content: '';\n        position: absolute;\n        z-index: -1;\n        top: 0;\n        left: 0;\n        right: 0;\n        border-bottom: 180px solid #191919; } }\n  .CG2-pageFooter a {\n    color: #777;\n    text-decoration: none;\n    display: block;\n    transition: all .2s; }\n    .CG2-pageFooter a:hover {\n      color: #fff; }\n\n.CG2-pageFooter__inner {\n  table-layout: fixed;\n  display: table;\n  max-width: 1072px;\n  width: auto;\n  margin: 0 auto; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__inner {\n      display: block; } }\n  @media print {\n    .CG2-pageFooter__inner {\n      display: block; } }\n\n.CG2-pageFooter__wwwNav {\n  vertical-align: top;\n  box-sizing: border-box;\n  display: table-cell;\n  width: 20%;\n  padding: 40px 28px; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__wwwNav {\n      display: table;\n      width: 100%;\n      padding: 0;\n      margin: 0 0 20px; } }\n  @media screen and (max-width: 639px) {\n    .CG2-pageFooter__wwwNav {\n      display: none; } }\n  @media print {\n    .CG2-pageFooter__wwwNav {\n      display: none; } }\n\n.CG2-pageFooter__logo {\n  margin-bottom: 32px; }\n  .CG2-pageFooter__logo img {\n    display: block; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__logo {\n      display: table-cell;\n      width: 1%;\n      padding-right: 28px; } }\n  @media screen and (max-width: 639px) {\n    .CG2-pageFooter__logo {\n      display: none; } }\n  @media print {\n    .CG2-pageFooter__logo {\n      display: none; } }\n\n.CG2-pageFooter__appNav {\n  vertical-align: top;\n  box-sizing: border-box;\n  display: table-cell;\n  width: 60%;\n  padding: 38px 58px;\n  border: 1px solid #282828; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__appNav {\n      display: block;\n      width: auto;\n      padding: 20px;\n      margin: 20px 0; }\n      .CG2-pageFooter__appNav:before, .CG2-pageFooter__appNav:after {\n        content: \"\";\n        display: table; }\n      .CG2-pageFooter__appNav:after {\n        clear: both; } }\n  @media screen and (max-width: 639px) {\n    .CG2-pageFooter__appNav {\n      display: none; } }\n  @media print {\n    .CG2-pageFooter__appNav {\n      display: none; } }\n\n.CG2-pageFooter__legalNav {\n  vertical-align: top;\n  box-sizing: border-box;\n  display: table-cell;\n  width: 20%;\n  padding: 90px 28px 40px; }\n  .CG2-pageFooter--simple .CG2-pageFooter__legalNav {\n    display: block;\n    width: auto;\n    padding: 30px 28px 50px; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__legalNav {\n      display: block;\n      width: auto;\n      padding: 0;\n      margin: 20px 0; } }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__legalNav,\n    .CG2-pageFooter--simple .CG2-pageFooter__legalNav {\n      display: block;\n      width: auto;\n      padding: 0; } }\n  @media print {\n    .CG2-pageFooter__legalNav,\n    .CG2-pageFooter--simple .CG2-pageFooter__legalNav {\n      display: block;\n      width: auto;\n      padding: 0; } }\n\n.CG2-pageFooter__wwwNav ul {\n  list-style: none;\n  margin: 0;\n  padding: 0; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__wwwNav ul {\n      vertical-align: middle;\n      display: table-cell; } }\n\n.CG2-pageFooter__wwwNav li {\n  margin: 12px 0 0; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__wwwNav li {\n      display: inline-block;\n      margin: 4px 16px 4px 0; } }\n\n.CG2-pageFooter__wwwNav a:before {\n  content: \"\";\n  margin: 0 .4em .1em 0; }\n\n.CG2-pageFooter__appNavHeader {\n  display: table;\n  width: 100%;\n  margin-bottom: 32px; }\n\n.CG2-pageFooter__appNavHeading {\n  font-size: 20px;\n  line-height: 1.2;\n  vertical-align: middle;\n  display: table-cell;\n  width: 44.99%; }\n  .CG2-pageFooter__appNavHeading a:before {\n    content: \"\";\n    margin: 0 .4em .1em 0; }\n\n.CG2-pageFooter__appNavSearch {\n  vertical-align: middle;\n  display: table-cell;\n  width: 54.99em;\n  background: #303030; }\n\n.CG2-pageFooter__appNavSearchInner {\n  position: relative; }\n  .CG2-pageFooter__appNavSearchInner:before {\n    content: \"\";\n    color: #777;\n    font-size: 12px;\n    line-height: 0;\n    position: absolute;\n    top: 50%;\n    left: 10px; }\n  .CG2-pageFooter__appNavSearchInner input {\n    color: #fff;\n    font-size: 14px;\n    box-sizing: border-box;\n    display: block;\n    border: none;\n    width: 100%;\n    height: 100%;\n    padding: .4em 10px .4em 30px;\n    background: #303030; }\n\n.CG2-pageFooter__appNavList {\n  float: left;\n  width: 44.99%; }\n  .CG2-pageFooter__appNavList ul {\n    list-style: none;\n    margin: 0;\n    padding: 0; }\n  .CG2-pageFooter__appNavList li {\n    margin: 0 0 12px; }\n  .CG2-pageFooter__appNavList a:before {\n    content: \"\";\n    margin: 0 .4em .1em 0; }\n\n.CG2-pageFooter__appNavCategory {\n  float: left;\n  width: 54.99%; }\n  .CG2-pageFooter__appNavCategory ul {\n    column-count: 2;\n    list-style: none;\n    margin: 0;\n    padding: 0; }\n  .CG2-pageFooter__appNavCategory li {\n    margin: 0 0 12px; }\n  .CG2-pageFooter__appNavCategory span[class^=\"CG2-icon-cat\"] {\n    font-size: 18px;\n    line-height: 0;\n    margin: 0 .4em 0 0; }\n\n.CG2-pageFooter__legalNav ul {\n  list-style: none;\n  margin: 0;\n  padding: 0; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__legalNav ul {\n      text-align: center; } }\n  @media screen and (max-width: 639px) {\n    .CG2-pageFooter__legalNav ul {\n      display: none; } }\n  @media print {\n    .CG2-pageFooter__legalNav ul {\n      display: none; } }\n\n.CG2-pageFooter__legalNav li {\n  margin: 12px 0 0; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__legalNav li {\n      display: inline-block;\n      margin: 5px 10px 5px 0; } }\n\n.CG2-pageFooter__company {\n  margin: 12px 0 0; }\n  .CG2-pageFooter__company img {\n    vertical-align: middle;\n    width: 80px;\n    margin: -5px 0 0 5px; }\n  .CG2-pageFooter--simple .CG2-pageFooter__company {\n    font-size: 12px;\n    text-align: center;\n    margin-top: 0; }\n    .CG2-pageFooter--simple .CG2-pageFooter__company img {\n      display: block;\n      width: 120px;\n      height: 30px;\n      margin: 5px auto; }\n  @media screen and (max-width: 979px) {\n    .CG2-pageFooter__company {\n      text-align: center; } }\n  @media screen and (max-width: 639px) {\n    .CG2-pageFooter__company,\n    .CG2-pageFooter--simple .CG2-pageFooter__company {\n      font-size: 10px;\n      text-align: center;\n      margin-top: 0; }\n      .CG2-pageFooter__company a,\n      .CG2-pageFooter--simple .CG2-pageFooter__company a {\n        color: #fff;\n        display: table;\n        margin: 0 auto; }\n      .CG2-pageFooter__company img,\n      .CG2-pageFooter--simple .CG2-pageFooter__company img {\n        display: block;\n        width: 100px;\n        height: 25px;\n        margin: 5px auto; } }\n  @media print {\n    .CG2-pageFooter__company,\n    .CG2-pageFooter--simple .CG2-pageFooter__company {\n      font-size: 10px;\n      text-align: center;\n      margin-top: 0; }\n      .CG2-pageFooter__company a,\n      .CG2-pageFooter--simple .CG2-pageFooter__company a {\n        color: #fff;\n        display: table;\n        margin: 0 auto; }\n      .CG2-pageFooter__company img,\n      .CG2-pageFooter--simple .CG2-pageFooter__company img {\n        display: block;\n        width: 100px;\n        height: 25px;\n        margin: 5px auto; } }\n\n/* ==========================================================================\n   CG2-drawer\n   ========================================================================== */\n/*\n---\nname: Drawer\ncategory:\n  - Templates\ntag:\n  - Template\ntemplateItem:\n  - true\n---\n\n- スモールスクリーン時のみ有効\n- CG2-pageHeader 内のトグルボタンで表示\n\n```html\n<div class=\"CG2-drawer\">\n  <div class=\"CG2-drawer__panel\">\n    <div class=\"CG2-drawer__panelViewport\">\n      <div class=\"CG2-drawer__panelBody\">\n\n        <div class=\"CG2-drawerBody\">\n\n          <div class=\"CG2-drawerBody__user\">\n            <div class=\"CG2-drawerBody__userAvatar\">\n              <img src=\"__dummy__112x112\" alt=\"\" width=\"56\" height=\"56\">\n            </div>\n            <div class=\"CG2-drawerBody__userName\">gurio@pxgrid.example</div>\n          </div>\n\n          <div class=\"CG2-drawerBody__nav\">\n            <ul>\n              <li><a href=\"#\">アプリトップ</a></li>\n              <li><a href=\"#\">最新記事一覧</a></li>\n              <li><a href=\"#\">おすすめ記事一覧</a></li>\n              <li><a href=\"#\">お気に入り登録記事一覧</a></li>\n              <li><a href=\"#\">無料記事一覧</a></li>\n              <li><a href=\"#\">シリーズ一覧</a></li>\n              <li><a href=\"#\">著者一覧</a></li>\n            </ul>\n          </div>\n          <div class=\"CG2-drawerBody__userNav\">\n            <ul>\n              <li><a class=\"CG2-button CG2-button--primary CG2-button--fullWidth\" href=\"#\">購読する</a></li>\n              <li><a class=\"CG2-button CG2-button--fullWidth\" href=\"#\">ログイン</a></li>\n            </ul>\n          </div>\n          <div class=\"CG2-drawerBody__separator\"></div>\n          <div class=\"CG2-drawerBody__search\">\n            <div class=\"CG2-drawerBody__searchInner\">\n              <form>\n                <input type=\"search\">\n              </form>\n            </div>\n          </div>\n          <div class=\"CG2-drawerBody__nav\">\n            <ul>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-elementary\"></span>入門</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-practice\"></span>実践</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-standards\"></span>仕様解説</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-talk\"></span>座談会</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-architecture\"></span>設計</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-report\"></span>レポート</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-future\"></span>未来・次世代</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-workstyle\"></span>仕事術</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-survey\"></span>アンケート</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-design\"></span>デザイン</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-interview\"></span>インタビュー</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-discussion\"></span>ディカッション</a></li>\n            </ul>\n          </div>\n          <div class=\"CG2-drawerBody__separator\"></div>\n          <div class=\"CG2-drawerBody__nav\">\n            <ul>\n              <li><a href=\"#\">CodeGridについて</a></li>\n              <li><a href=\"#\">料金</a></li>\n              <li><a href=\"#\">団体購読</a></li>\n              <li><a href=\"#\">よくある質問</a></li>\n              <li><a href=\"#\">書籍</a></li>\n              <li><a href=\"#\">購読する</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-twitter\"></span>公式Twitter</a></li>\n            </ul>\n          </div>\n          <div class=\"CG2-drawerBody__separator\"></div>\n          <div class=\"CG2-drawerBody__nav\">\n            <ul>\n              <li class=\"CG2-drawerBody__navItem--plane\"><a href=\"#\">お問い合わせ</a></li>\n              <li class=\"CG2-drawerBody__navItem--plane\"><a href=\"#\">利用規約</a></li>\n              <li class=\"CG2-drawerBody__navItem--plane\"><a href=\"#\">プライバシーポリシー</a></li>\n              <li class=\"CG2-drawerBody__navItem--plane\"><a href=\"#\">特定商法に基づく表示</a></li>\n            </ul>\n          </div>\n\n        </div>\n      </div>\n\n    </div>\n    <div class=\"CG2-drawer__panelLeft\" data-drawer-hide></div>\n  </div>\n  <div class=\"CG2-drawer__bg\" data-drawer-close></div>\n</div>\n```\n\n*/\n@media screen and (min-width: 767px) {\n  html {\n    padding-right: 0 !important; } }\n\n@media screen and (max-width: 767px) {\n  body {\n    box-sizing: content-box;\n    overflow-y: scroll; }\n  html.js-drawer--show {\n    overflow: hidden;\n    height: 100%; }\n  html.js-drawer--show body {\n    overflow: hidden;\n    max-height: 100%; } }\n\n.CG2-drawer {\n  display: none; }\n  @media screen and (max-width: 767px) {\n    .CG2-drawer {\n      display: block;\n      pointer-events: none; }\n      html.js-drawer--show .CG2-drawer {\n        pointer-events: auto; } }\n\n.CG2-drawer__panel {\n  position: fixed;\n  z-index: -1;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0);\n  transform: translate3d(-50px, 0, 0);\n  transition: transform .4s; }\n\n.CG2-drawer__panel, x::-ms-fill {\n  transform: translateX(-50px);\n  /* IE10, 11, avoid using GPU feature */ }\n\nhtml:not(.js-drawer--show) .CG2-drawer__panel {\n  animation-name: zIndexOut;\n  animation-duration: .4s;\n  animation-iteration-count: 1; }\n\nhtml.js-drawer--show .CG2-drawer__panel {\n  margin-left: 0;\n  z-index: 19;\n  transform: translateX(-100%); }\n\nhtml.js-drawer--dragging,\nhtml.js-drawer--dragging * {\n  cursor: -webkit-grabbing;\n  cursor: -moz-grabbing;\n  cursor: grabbing; }\n\nhtml:not(.js-drawer--dragging) .CG2-drawer__panel {\n  transition: transform .4s, margin .1s; }\n\n.CG2-drawer__panel:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 50px;\n  background: #191919; }\n\n.CG2-drawer__panelViewport {\n  overflow: auto;\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  padding-left: 50px;\n  margin: 0 0 0 auto;\n  -webkit-overflow-scrolling: touch; }\n\n.CG2-drawer__panelBody {\n  box-sizing: border-box;\n  min-height: 100%;\n  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0);\n  transition: box-shadow .4s; }\n\nhtml.js-drawer--show .CG2-drawer__panelBody {\n  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.3); }\n\n.CG2-drawer__panelLeft {\n  position: absolute;\n  top: 0;\n  width: 50px;\n  height: 100%;\n  background: rgba(0, 0, 0, 0); }\n\n.CG2-drawer__bg {\n  position: fixed;\n  z-index: -1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(0, 0, 0, 0);\n  transition: background .4s; }\n  html:not(.js-drawer--show) .CG2-drawer__bg {\n    animation-name: bgOut;\n    animation-duration: .4s;\n    animation-iteration-count: 1; }\n  html.js-drawer--show .CG2-drawer__bg {\n    z-index: 18;\n    background: rgba(0, 0, 0, 0.3); }\n\n@keyframes bgOut {\n  0% {\n    z-index: 18; }\n  99% {\n    z-index: 18; }\n  100% {\n    z-index: -1; } }\n\n@keyframes zIndexOut {\n  0% {\n    z-index: 19; }\n  99% {\n    z-index: 19; }\n  100% {\n    z-index: -1; } }\n\n/* ==========================================================================\n   CG2-drawerBody\n   ========================================================================== */\n.CG2-drawerBody {\n  font-size: 16px;\n  padding: 40px 20px 10px;\n  -webkit-font-smoothing: subpixel-antialiased;\n  -moz-osx-font-smoothing: auto; }\n  .CG2-drawerBody ul {\n    list-style: none;\n    padding: 0;\n    margin: 0; }\n  .CG2-drawerBody li {\n    margin: 0; }\n\n.CG2-drawerBody__user {\n  color: #777;\n  table-layout: fixed;\n  display: table;\n  width: 100%;\n  margin: -20px 0 20px; }\n\n.CG2-drawerBody__userAvatar {\n  vertical-align: middle;\n  box-sizing: border-box;\n  display: table-cell;\n  padding-right: 12px;\n  width: 44px; }\n  .CG2-drawerBody__userAvatar img {\n    display: block;\n    width: 32px;\n    height: 32px; }\n\n.CG2-drawerBody__userName {\n  white-space: normal;\n  word-break: break-all;\n  font-size: 12px;\n  vertical-align: middle;\n  display: table-cell; }\n\n.CG2-drawerBody__nav {\n  margin-bottom: 30px; }\n  .CG2-drawerBody__nav ul {\n    margin-left: 5px; }\n  .CG2-drawerBody__nav li {\n    margin-bottom: 8px; }\n  .CG2-drawerBody__nav a {\n    color: #777;\n    text-decoration: none;\n    position: relative;\n    display: block;\n    padding-left: 26px; }\n    .CG2-drawerBody__nav a:before {\n      content: \"\";\n      font-size: 16px;\n      line-height: 0;\n      position: absolute;\n      top: 50%;\n      left: 3px; }\n  .CG2-drawerBody__nav li.CG2-drawerBody__navItem--icon a:before {\n    content: none; }\n  .CG2-drawerBody__nav li.CG2-drawerBody__navItem--icon a span[class^=\"CG2-icon\"] {\n    position: static; }\n    .CG2-drawerBody__nav li.CG2-drawerBody__navItem--icon a span[class^=\"CG2-icon\"]:before {\n      font-size: 20px;\n      line-height: 0;\n      position: absolute;\n      left: -2px;\n      top: 50%; }\n  .CG2-drawerBody__nav li.CG2-drawerBody__navItem--plane a:before {\n    content: none; }\n\n.CG2-drawerBody__userNav li {\n  margin-top: 10px; }\n\n.CG2-drawerBody__userNav a.CG2-button {\n  font-size: 16px;\n  text-align: center;\n  padding-top: .6em;\n  padding-bottom: .6em; }\n\n.CG2-drawerBody__separator {\n  border-top: 1px solid #5c5c5c;\n  height: 0;\n  margin: 30px -15px; }\n\n.CG2-drawerBody__search {\n  margin: 20px 0;\n  height: 40px; }\n\n.CG2-drawerBody__searchInner:before {\n  font-size: 20px; }\n\n.CG2-drawerBody__searchInner input {\n  height: 40px; }\n\n/* ==========================================================================\n   CG2-container\n   ========================================================================== */\n/*\n---\nname: Container\ncategory:\n  - Templates\ntag:\n  - Template\ntemplateItem:\n  - true\n---\n\n```html\n<div class=\"CG2-container\">\n  <div class=\"CG2-container__inner\">\n    コンテンツ配置/編集 領域\n  </div>\n</div>\n\n<div class=\"CG2-container\">\n  <div class=\"CG2-container__inner\">\n    コンテンツ配置/編集 領域\n  </div>\n</div>\n\n<div class=\"CG2-container\">\n  <div class=\"CG2-container__inner\">\n    コンテンツ配置/編集 領域\n  </div>\n</div>\n```\n\n*/\n.CG2-container,\n.CG2-container + .CG2-container + .CG2-container,\n.CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container,\n.CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container {\n  background: transparent; }\n\n.CG2-container + .CG2-container,\n.CG2-container + .CG2-container + .CG2-container + .CG2-container,\n.CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container {\n  background: #eee; }\n\n.CG2-container__inner {\n  box-sizing: border-box;\n  max-width: 1016px;\n  padding: 40px 28px;\n  margin: 0 auto; }\n  @media screen and (max-width: 767px) {\n    .CG2-container__inner {\n      width: auto;\n      padding: 30px 20px; } }\n\n/* ==========================================================================\n   button\n   ========================================================================== */\n/*\n---\nname: button\ncategory:\n  - Nav-items\ntag:\n  - button\n---\nwork with both a and button tags\n```html\n<p>\n  <a class=\"CG2-button\" href=\"#\">button:a element</a>\n</p>\n<p>\n  <button class=\"CG2-button\" href=\"#\">button: button element</button>\n</p>\n```\nwith an icon\n```html\n<p>\n  <a class=\"CG2-button\" href=\"#\"><span class=\"CG2-icon-pxg\"></span>button</a>\n</p>\n```\nuse for Primary, Action, Setting\n```html\n<p>\n  <a class=\"CG2-button CG2-button--primary\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--action\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--setting\" href=\"#\">button</a>\n</p>\n```\nsizes\n```html\n<p>\n  <a class=\"CG2-button CG2-button--thin\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--large\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--fullWidth\" href=\"#\">button</a>\n</p>\n```\n\ndisabled\n`button`の時は`disabled`属性を明示、\nそれ以外(`a`など)の場合は、`aria-disabled=\"true\"`を明示\n```html\n<p>\n  <a class=\"CG2-button\" aria-disabled=\"true\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--primary\" aria-disabled=\"true\" href=\"#\">primary button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--action\" aria-disabled=\"true\" href=\"#\">action button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--setting\" aria-disabled=\"true\" href=\"#\">setting button</a>\n</p>\n```\n\nprogress\n```html\n<p>\n  <a class=\"CG2-button CG2-button--progress\" href=\"#\">button</a>\n</p>\n```\n*/\n.CG2-button {\n  color: #fff;\n  font-size: 14px;\n  text-decoration: none;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  border: 1px solid #777;\n  padding: 0.6em 1.8em;\n  border-radius: 2px;\n  background: #777;\n  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);\n  transition: all .2s; }\n  .CG2-button:hover:not([disabled]):not([aria-disabled=\"true\"]):not(.CG2-button--progress), .CG2-button:focus:not([disabled]):not([aria-disabled=\"true\"]):not(.CG2-button--progress) {\n    box-shadow: 0 0 3px #777;\n    background: #919191;\n    transition: all .2s; }\n  @media screen and (max-width: 767px) {\n    .CG2-button {\n      font-size: 12px; } }\n  .CG2-button.CG2-button--thin {\n    padding: 0.4em 1.8em; }\n  .CG2-button.CG2-button--large {\n    font-size: 20px;\n    text-align: center;\n    display: block;\n    width: 60%;\n    margin-left: auto;\n    margin-right: auto; }\n    @media screen and (max-width: 767px) {\n      .CG2-button.CG2-button--large {\n        font-size: 18px;\n        padding-top: .3em;\n        padding-bottom: .3em;\n        width: auto; } }\n  .CG2-button.CG2-button--fullWidth {\n    display: block;\n    width: 100%; }\n  .CG2-button span[class^=\"CG2-icon\"] {\n    font-size: 20px;\n    margin-right: 5px; }\n    .CG2-button span[class^=\"CG2-icon\"]:first-child {\n      margin-left: -.6em; }\n  .CG2-button.CG2-button--primary {\n    border-color: #10a040;\n    background: #10a040; }\n    .CG2-button.CG2-button--primary:hover:not([disabled]):not([aria-disabled=\"true\"]), .CG2-button.CG2-button--primary:focus:not([disabled]):not([aria-disabled=\"true\"]) {\n      box-shadow: 0 0 3px #10a040;\n      background: #15ce53; }\n  .CG2-button.CG2-button--action {\n    border-color: #282828;\n    background: #282828; }\n    .CG2-button.CG2-button--action:hover:not([disabled]):not([aria-disabled=\"true\"]), .CG2-button.CG2-button--action:focus:not([disabled]):not([aria-disabled=\"true\"]) {\n      box-shadow: 0 0 3px #282828;\n      background: #424242; }\n  .CG2-button.CG2-button--setting {\n    border-color: #777;\n    background: #777; }\n    .CG2-button.CG2-button--setting:hover:not([disabled]):not([aria-disabled=\"true\"]), .CG2-button.CG2-button--setting:focus:not([disabled]):not([aria-disabled=\"true\"]) {\n      box-shadow: 0 0 3px #777;\n      background: #919191; }\n  .CG2-button[disabled], .CG2-button[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    border-color: #999;\n    background: #dbdbdb; }\n  .CG2-button.CG2-button--progress {\n    color: transparent;\n    cursor: not-allowed; }\n    .CG2-button.CG2-button--progress:before {\n      pointer-events: none;\n      content: '';\n      display: block;\n      position: absolute;\n      top: 5px;\n      right: 5px;\n      bottom: 5px;\n      left: 5px;\n      max-width: 100px;\n      margin: auto;\n      width: auto;\n      background-image: url(\"../img/CG2-button/loading.svg\");\n      background-repeat: no-repeat;\n      background-position: 50% 50%;\n      background-size: contain;\n      transform-origin: 50% 50%;\n      animation: button--loading 1s linear infinite; }\n\n@keyframes button--loading {\n  0% {\n    transform: rotate(0deg); }\n  100% {\n    transform: rotate(360deg); } }\n\n/* ==========================================================================\n   buttonContainer\n   ========================================================================== */\n/*\n---\nname: buttonContainer\ncategory:\n  - Nav-items\ntag:\n  - button\n---\n\n```html\n<div class=\"CG2-buttonContainer\">\n  <ul>\n    <li><a class=\"CG2-button CG2-button--primary\" href=\"#\">button 1</a></li>\n    <li><a class=\"CG2-button\" href=\"#\">button 2</a></li>\n  </ul>\n</div>\n```\n左寄せ\n```html\n<div class=\"CG2-buttonContainer CG2-buttonContainer--pullLeft\">\n  <ul>\n    <li><a class=\"CG2-button CG2-button--primary\" href=\"#\">button 1</a></li>\n    <li><a class=\"CG2-button\" href=\"#\">button 2</a></li>\n  </ul>\n</div>\n```\nラージスクリーン時full width\n```html\n<div class=\"CG2-buttonContainer\">\n  <ul>\n    <li class=\"CG2-buttonContainer__item--full\"><a class=\"CG2-button CG2-button--primary\" href=\"#\">button 1</a></li>\n    <li><a class=\"CG2-button\" href=\"#\">button 2</a></li>\n  </ul>\n</div>\n```\n*/\n.CG2-buttonContainer {\n  margin: 20px 0; }\n  .CG2-buttonContainer ul {\n    font-size: 0;\n    list-style: none;\n    text-align: center;\n    padding: 0;\n    margin: 0; }\n  .CG2-buttonContainer.CG2-buttonContainer--pullLeft ul {\n    text-align: left; }\n  .CG2-buttonContainer li {\n    font-size: 1rem;\n    display: inline-block;\n    margin: 0 8px; }\n    .CG2-buttonContainer li.CG2-buttonContainer__item--full {\n      display: block;\n      margin: 0 0 8px; }\n    @media screen and (max-width: 767px) {\n      .CG2-buttonContainer li {\n        display: block; } }\n  .CG2-buttonContainer.CG2-buttonContainer--pullLeft li {\n    margin: 0 16px 0 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-buttonContainer li,\n    .CG2-buttonContainer.CG2-buttonContainer--pullLeft li {\n      margin: 0 0 5px; } }\n  @media screen and (max-width: 767px) {\n    .CG2-buttonContainer .CG2-button {\n      font-size: 16px;\n      text-align: center;\n      padding: .4em 10px;\n      width: 100%; } }\n\n/* ==========================================================================\n   header1\n   ========================================================================== */\n/*\n---\nname: header1\ncategory:\n  - Content\ntag:\n  - content\n---\n\n見出しレベルは文章の構成に応じて変更する。\n\n```html\n<div class=\"CG2-header1\">\n  <h1 class=\"CG2-header1__heading\">Heading text 1</h1>\n</div>\n```\n*/\n.CG2-header1 {\n  padding: 0 28px 30px;\n  border-bottom: 1px solid #282828;\n  margin: 60px -28px 30px; }\n  .CG2-header1:first-child {\n    margin-top: 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-header1 {\n      padding: 0 10px 10px;\n      margin: 20px -10px 30px; }\n      .CG2-header1:first-child {\n        margin-top: 20px; } }\n\n.CG2-header1__heading {\n  color: #282828;\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-weight: normal;\n  line-height: 1.2;\n  margin: 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-header1__heading {\n      font-size: 20px; } }\n\n/* ==========================================================================\n   header2\n   ========================================================================== */\n/*\n---\nname: header2\ncategory:\n  - Content\ntag:\n  - content\n---\n\n見出しレベルは文章の構成に応じて変更する。\n\n```html\n<div class=\"CG2-header2\">\n  <h3 class=\"CG2-header2__heading\">Heading text 2</h3>\n</div>\n```\n*/\n.CG2-header2 {\n  margin: 60px 0 15px; }\n  @media screen and (max-width: 767px) {\n    .CG2-header2 {\n      margin: 30px 0 10px; } }\n\n.CG2-header2__heading {\n  font-size: 24px;\n  font-weight: normal;\n  margin: 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-header2__heading {\n      font-size: 16px; } }\n\n/* ==========================================================================\n   header3\n   ========================================================================== */\n/*\n---\nname: header3\ncategory:\n  - Content\ntag:\n  - content\n---\n\n見出しレベルは文章の構成に応じて変更する。\n\n```html\n<div class=\"CG2-header3\">\n  <h3 class=\"CG2-header3__heading\">Heading text 3</h3>\n</div>\n```\n*/\n.CG2-header3__heading {\n  font-size: 16px;\n  font-weight: bold;\n  margin: 40px 0 15px; }\n\n/* ==========================================================================\n   leadText\n   ========================================================================== */\n/*\n---\nname: leadtext\ncategory:\n  - Content\ntag:\n  - content\n---\n\n見出しと判断されるものには見出しレベルを付与する。\n\n```html\n<div class=\"CG2-leadText\">LeadText</div>\n```\n*/\n.CG2-leadText {\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-weight: normal;\n  line-height: 1.4;\n  text-align: center;\n  margin: 80px 0 40px; }\n  .CG2-header1 + .CG2-leadText {\n    margin-top: 50px; }\n  .CG2-container__inner > .CG2-leadText:first-child {\n    margin-top: 20px; }\n  .CG2-container__inner > .CG2-leadText:last-child {\n    margin-bottom: 20px; }\n  @media screen and (max-width: 767px) {\n    .CG2-leadText {\n      font-size: 20px;\n      margin: 50px -10px 20px; } }\n\n/* ==========================================================================\n   shortCentered\n   ========================================================================== */\n/*\n---\nname: shortCentered\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<div class=\"CG2-shortCentered\">\n  <div class=\"CG2-shortCentered__inner\">\n    短い時はセンタリング\n  </div>\n</div>\n\n<div class=\"CG2-shortCentered\">\n  <div class=\"CG2-shortCentered__inner\">\n    長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ\n  </div>\n</div>\n```\n*/\n.CG2-shortCentered {\n  text-align: center;\n  margin: 20px 0; }\n\n.CG2-shortCentered__inner {\n  text-align: left;\n  display: inline-block; }\n\n/* ==========================================================================\n   CG2-customers\n   ========================================================================== */\n/*\n---\nname: customers\ncategory:\n  - Blocks/shared\ntag:\n  - app-item\n  - www-item\n---\n\n## 通常（見出し、テキスト、ロゴ、ボタン）\n\ncustomersについているstyle属性は外すこと。\n\n```html\n<section class=\"CG2-customers\" style=\"background-color: #eee\">\n  <h2 class=\"CG2-customers__heading\">団体購読も承っております</h2>\n  <p class=\"CG2-customers__text\">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>\n  <div class=\"CG2-customers__logos\">\n    <ul>\n      <li><img src=\"__dummy__58x30\" width=\"58\" height=\"30\"></li>\n      <li><img src=\"__dummy__211x25\" width=\"211\" height=\"25\"></li>\n      <li><img src=\"__dummy__208x30\" width=\"208\" height=\"30\"></li>\n      <li><img src=\"__dummy__101x30\" width=\"101\" height=\"30\"></li>\n      <li><img src=\"__dummy__210x35\" width=\"210\" height=\"35\"></li>\n      <li><img src=\"__dummy__116x25\" width=\"116\" height=\"25\"></li>\n      <li><img src=\"__dummy__123x35\" width=\"123\" height=\"35\"></li>\n      <li><img src=\"__dummy__151x40\" width=\"151\" height=\"40\"></li>\n      <li><img src=\"__dummy__111x35\" width=\"111\" height=\"35\"></li>\n      <li><img src=\"__dummy__152x35\" width=\"152\" height=\"35\"></li>\n    </ul>\n  </div>\n  <div class=\"CG2-customers__button\">\n    <a class=\"CG2-button CG2-button--primary\" href=\"\">団体購読について</a>\n  </div>\n</section>\n```\n\n## コンパクト（テキスト・ロゴのみ）\n\ncustomersについているstyle属性は外すこと。\n\n```html\n<section class=\"CG2-customers\" style=\"background-color: #eee\">\n  <p class=\"CG2-customers__text\">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>\n  <div class=\"CG2-customers__logos\">\n    <ul>\n      <li><img src=\"__dummy__58x30\" width=\"58\" height=\"30\"></li>\n      <li><img src=\"__dummy__211x25\" width=\"211\" height=\"25\"></li>\n      <li><img src=\"__dummy__208x30\" width=\"208\" height=\"30\"></li>\n      <li><img src=\"__dummy__101x30\" width=\"101\" height=\"30\"></li>\n      <li><img src=\"__dummy__210x35\" width=\"210\" height=\"35\"></li>\n      <li><img src=\"__dummy__116x25\" width=\"116\" height=\"25\"></li>\n      <li><img src=\"__dummy__123x35\" width=\"123\" height=\"35\"></li>\n      <li><img src=\"__dummy__151x40\" width=\"151\" height=\"40\"></li>\n      <li><img src=\"__dummy__111x35\" width=\"111\" height=\"35\"></li>\n      <li><img src=\"__dummy__152x35\" width=\"152\" height=\"35\"></li>\n    </ul>\n  </div>\n</section>\n```\n*/\n.CG2-customers {\n  display: flex;\n  flex-direction: column;\n  align-items: center; }\n\n.CG2-customers__heading {\n  margin: 2em 0 0; }\n\n.CG2-customers__text {\n  margin: 2.2em 0 2em; }\n\n.CG2-customers__logos {\n  width: 100%; }\n  .CG2-customers__logos:last-child {\n    margin-bottom: 2.5em; }\n  .CG2-customers__logos ul {\n    max-width: 1020px;\n    margin: 0 auto; }\n\n.CG2-customers__button {\n  margin: 2.5em 0; }\n\n@media screen and (max-width: 767px) {\n  .CG2-customers__heading {\n    margin: 1.5em 0 0; }\n  .CG2-customers__text,\n  .CG2-customers__button {\n    margin: 1.5em 0; } }\n\n.CG2-customers__heading {\n  padding: 0 10px;\n  color: #282828;\n  font-size: 24px;\n  font-weight: normal;\n  line-height: 1.2; }\n  @media screen and (max-width: 767px) {\n    .CG2-customers__heading {\n      font-size: 16px; } }\n\n.CG2-customers__text {\n  padding: 0 10px;\n  line-height: 1.2; }\n\n.CG2-customers__logos {\n  background-color: #fff; }\n  .CG2-customers__logos ul {\n    list-style: none;\n    padding: 20px 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center; }\n  .CG2-customers__logos li {\n    margin: 15px 20px; }\n    @media screen and (max-width: 767px) {\n      .CG2-customers__logos li {\n        margin: 10px 15px; } }\n  .CG2-customers__logos img {\n    vertical-align: middle; }\n\n/* ==========================================================================\n   CG2-paymentTable\n   ========================================================================== */\n/*\n---\nname: paymentTable\ncategory:\n  - Blocks/shared\ntag:\n  - app-item\n  - app-form\n  - www-item\n---\n\n```html\n<div class=\"CG2-paymentTable\">\n  <table>\n    <thead>\n      <tr>\n        <th colspan=\"2\"><img src=\"https://www.codegrid.net/img/payment/img_01.svg\" alt=\"VISA, MasterCard, JCB, American Express, Diners Club\" width=\"275\"></th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th>購読料<br><span class=\"CG2-paymentTable__annotation\">（税込金額）</span></th>\n        <td>\n          <div class=\"CG2-paymentTable__priceList\">\n            <ul>\n              <li>\n                <div class=\"CG2-paymentTable__priceLabel\">月額</div>\n                <div class=\"CG2-paymentTable__priceValue\">800</div>\n                <div class=\"CG2-paymentTable__priceUnit\">円</div>\n                <div class=\"CG2-paymentTable__priceAnnotation\">（税込864円）</div>\n              </li>\n            </ul>\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>購読期間</th>\n        <td>自動継続</td>\n      </tr>\n      <tr>\n        <th>無料購読期間</th>\n        <td>\n          <div class=\"CG2-paymentTable__valueList\">\n            <ul>\n              <li>\n                <div class=\"CG2-paymentTable__valueText CG2--disableLargeScreen\">無料購読期間</div>\n                <div class=\"CG2-paymentTable__value\">30</div>\n                <div class=\"CG2-paymentTable__valueUnit\">日</div>\n              </li>\n            </ul>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n```\n*/\n.CG2-paymentTable table {\n  margin: 40px auto; }\n  @media screen and (max-width: 639px) {\n    .CG2-paymentTable table {\n      table-layout: fixed;\n      margin-top: 20px;\n      margin-bottom: 30px; } }\n\n.CG2-paymentTable th,\n.CG2-paymentTable td {\n  font-weight: normal;\n  vertical-align: middle;\n  padding: 15px 40px;\n  border: 1px solid #dbdbdb; }\n  @media screen and (max-width: 639px) {\n    .CG2-paymentTable th,\n    .CG2-paymentTable td {\n      vertical-align: top;\n      width: 50%;\n      padding: 20px 10px; } }\n\n.CG2-paymentTable thead th,\n.CG2-paymentTable thead td {\n  border: none; }\n\n@media screen and (max-width: 639px) {\n  .CG2-paymentTable th:first-child,\n  .CG2-paymentTable td:first-child {\n    display: none; } }\n\n.CG2-paymentTable__annotation {\n  font-size: 12px; }\n\n.CG2-paymentTable__priceList {\n  text-align: left;\n  display: inline-block; }\n  .CG2-paymentTable__priceList ul {\n    border-collapse: separate;\n    border-spacing: 30px 0;\n    display: table;\n    line-height: normal;\n    padding: 0;\n    margin: 0 -30px; }\n    @media screen and (max-width: 639px) {\n      .CG2-paymentTable__priceList ul {\n        display: block;\n        margin: 0; } }\n  .CG2-paymentTable__priceList li {\n    display: table-cell;\n    margin: 0; }\n    @media screen and (max-width: 639px) {\n      .CG2-paymentTable__priceList li {\n        display: block;\n        margin-bottom: 20px; }\n        .CG2-paymentTable__priceList li:last-child {\n          margin-bottom: 0; } }\n\n.CG2-paymentTable__priceLabel {\n  font-size: 12px; }\n\n.CG2-paymentTable__priceValue {\n  font-size: 32px;\n  font-family: \"Lucida Console\", Monaco, monospace;\n  line-height: 1;\n  vertical-align: bottom;\n  display: inline-block; }\n  @media screen and (max-width: 639px) {\n    .CG2-paymentTable__priceValue {\n      font-size: 28px; } }\n\n.CG2-paymentTable__priceUnit {\n  font-size: 16px;\n  vertical-align: bottom;\n  display: inline-block; }\n\n.CG2-paymentTable__priceAnnotation {\n  font-size: 12px; }\n\n.CG2-paymentTable__valueList {\n  text-align: left;\n  display: inline-block; }\n  .CG2-paymentTable__valueList ul {\n    border-collapse: separate;\n    border-spacing: 30px 0;\n    display: table;\n    line-height: normal;\n    padding: 0;\n    margin: 0 -30px; }\n    @media screen and (max-width: 639px) {\n      .CG2-paymentTable__valueList ul {\n        display: block;\n        margin: 0; } }\n  .CG2-paymentTable__valueList li {\n    display: table-cell;\n    margin: 0; }\n    @media screen and (max-width: 639px) {\n      .CG2-paymentTable__valueList li {\n        display: block; } }\n\n.CG2-paymentTable__valueText {\n  display: inline-block; }\n\n.CG2-paymentTable__value {\n  font-size: 32px;\n  font-family: \"Lucida Console\", Monaco, monospace;\n  line-height: 1;\n  vertical-align: bottom;\n  display: inline-block; }\n  @media screen and (max-width: 639px) {\n    .CG2-paymentTable__value {\n      font-family: Helvetica, \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif;\n      font-size: 100%;\n      line-height: inherit; } }\n\n.CG2-paymentTable__valueUnit {\n  font-size: 16px;\n  vertical-align: bottom;\n  display: inline-block; }\n  @media screen and (max-width: 639px) {\n    .CG2-paymentTable__valueUnit {\n      font-size: 100%; } }\n\n/* ==========================================================================\n   CG2-paymentLine\n   ========================================================================== */\n/*\n---\nname: paymentLine\ncategory:\n  - Blocks/shared\ntag:\n  - app-item\n  - www-item\n---\n\n```html\n<div class=\"CG2-paymentLine\">\n  <span class=\"CG2-paymentLine__label\">月額</span>\n  <span class=\"CG2-paymentLine__value\">800</span>\n  <span class=\"CG2-paymentLine__unit\">円</span>\n  <span class=\"CG2-paymentLine__extra\">（税込み864円）</span>\n</div>\n```\n*/\n.CG2-paymentLine {\n  text-align: center; }\n\n.CG2-paymentLine__label {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-size: 24px; }\n\n.CG2-paymentLine__value {\n  font-family: \"Lucida Console\", Monaco, monospace;\n  font-size: 32px; }\n\n.CG2-paymentLine__unit {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-size: 24px; }\n\n.CG2-paymentLine__extra {\n  font-size: 14px; }\n\n/* ==========================================================================\n   CG2-seriesList\n   ========================================================================== */\n/*\n---\nname: seriesList\ncategory:\n  - Blocks/shared\ntag:\n  - app-item\n  - app-item-articlelist\n  - www-item\n---\n\n## 通常\n\n* 未購読・非ログイン状態の場合、公開されてない記事には`CG2-seriesList__articleOrder`の前に`CG2-seriesList__articleIcon`が追加\n* 未読の場合、`CG2-seriesList__article`に`CG2-seriesList__article--unread`が追加\n* お気に入りに追加した場合、`js-toggle-fav-series`に`CG2-seriesList__itemUtilButton--favAdded`が追加\n* 著者が3人までの場合、`CG2-seriesList__authors`に著者分の`CG2-seriesList__author`が入る（`<a>`でくるまれる）\n* 著者が4人以上の場合、`CG2-seriesList__authors`の中身が`CG2-seriesList__authorPicList`に置き換わる\n* appのトップでは、リストの最後には`CG2-seriesList__itemMore`がくる\n\n```html\n<div class=\"CG2-seriesList\">\n  <div class=\"CG2-seriesList__inner\">\n\n    <!-- 未購読状態、ログイン前 -->\n\n    <div class=\"CG2-seriesList__item\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-talk\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">Webの文字の読みやすさ</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2014-readable-text-design/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleIcon\">\n              <div class=\"CG2-icon-lock\"></div>\n            </div>\n            <div class=\"CG2-seriesList__articleOrder\">第3回</div>\n            <div class=\"CG2-seriesList__articleTitle\">読みやすさのために</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年07月17日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleIcon\">\n              <div class=\"CG2-icon-lock\"></div>\n            </div>\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">日本語の「読みやすさ」</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年07月10日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第1回</div>\n            <div class=\"CG2-seriesList__articleTitle\">あらためて、Webって？</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年07月03日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">安田 麻由 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">長坂 菫 | UIデザイナー</div>\n          </div>\n        </a>\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">中野 富子 | エディター</div>\n          </div>\n        </a>\n      </div>\n    </div>\n\n    <!-- 購読済、ログイン後、お気に入り、未読あり -->\n\n    <div class=\"CG2-seriesList__item\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-mastering\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">z-index再入門</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"true\" class=\"js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2014-mastering-css/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article CG2-seriesList__article--unread\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第3回</div>\n            <div class=\"CG2-seriesList__articleTitle\">z-indexの困った使用例</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年05月29日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">意図した順序に要素を重ねる</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年05月22日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第1回</div>\n            <div class=\"CG2-seriesList__articleTitle\">z-indexの仕組み</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年05月15日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">佐川 沙織 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n      </div>\n    </div>\n\n    <!-- 著者4人、お気に入り -->\n\n    <div class=\"CG2-seriesList__item\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-standards\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">今日から使えるCSS</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"true\" class=\"js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第4回</div>\n            <div class=\"CG2-seriesList__articleTitle\">CSS Custom Properties</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年05月04日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第3回</div>\n            <div class=\"CG2-seriesList__articleTitle\">position: sticky</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年04月27日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">@supportsルール</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年02月16日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <div class=\"CG2-seriesList__authorPicList\">\n          <ul>\n            <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"佐川 沙織\" width=\"40\" height=\"40\"></a></li>\n            <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"影山 和子\" width=\"40\" height=\"40\"></a></li>\n            <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"玉田 義之\" width=\"40\" height=\"40\"></a></li>\n            <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"杉原 幸次郎\" width=\"40\" height=\"40\"></a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <!-- 著者たくさん、未読あり -->\n\n    <div class=\"CG2-seriesList__item\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-interview\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">エンジニアに聞く、仕事の行方</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"false\" class=\"js-toggle-fav-series\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/future-works/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article CG2-seriesList__article--unread\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第13回</div>\n            <div class=\"CG2-seriesList__articleTitle\">ピクセル グリオ 編</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年08月24日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article CG2-seriesList__article--unread\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第12回</div>\n            <div class=\"CG2-seriesList__articleTitle\">影山 和子 編</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年05月04日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第11回</div>\n            <div class=\"CG2-seriesList__articleTitle\">橋本 孝治 編</div>\n            <div class=\"CG2-seriesList__articleDate\">2016年07月28日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <div class=\"CG2-seriesList__authorPicList\">\n          <ul>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"佐川 沙織\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"河田 理香\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"尾上 友美\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"新田 道雄\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"ピクセル グリオ\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"安田 麻由\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"野間 夏子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"神戸 克巳\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"杉原 幸次郎\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"田代 隆男\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"新田 春子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"中野 富子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"玉田 義之\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"柳川 健治\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"長坂 菫\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"坪田 健之\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"仲村 孝二\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"橋本 孝治\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"大澤 直子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"山口 弘一\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"影山 和子\" width=\"40\" height=\"40\"></a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <!-- more -->\n\n    <div class=\"CG2-seriesList__itemMore\">\n      <a href=\"\">more</a>\n    </div>\n\n  </div>\n</div>\n```\n\n## 全幅\n\nappトップの今週号や、各号のページで利用。\n\n`CG2-seriesList__item`に`CG2-seriesList__item--fullWidth`が追加されただけで、その他は特に変わらない。\n\n```html\n<div class=\"CG2-seriesList\">\n  <div class=\"CG2-seriesList__inner\">\n\n    <!-- 未購読 -->\n\n    <div class=\"CG2-seriesList__item CG2-seriesList__item--fullWidth\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-mastering\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">Chrome DevToolsをモバイル開発で使いこなす</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2017-chrome-devtools/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleIcon\">\n              <div class=\"CG2-icon-lock\"></div>\n            </div>\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">モバイルWebアプリ開発に活用</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年06月01日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">影山 和子 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n      </div>\n    </div>\n\n    <!-- 購読済、お気に入り -->\n\n    <div class=\"CG2-seriesList__item CG2-seriesList__item--fullWidth\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-standards\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">今日から使えるCSS</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"false\" class=\"js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">@supportsルール</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年02月16日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">佐川 沙織 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">影山 和子 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n      </div>\n    </div>\n\n    <!-- 著者たくさん、未読あり -->\n\n    <div class=\"CG2-seriesList__item CG2-seriesList__item--fullWidth\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-survey\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">ピクセルグリッドの開発環境サーベイ 2017</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"false\" class=\"js-toggle-fav-series\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2017-tool-survey/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article CG2-seriesList__article--unread\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第1回</div>\n            <div class=\"CG2-seriesList__articleTitle\">エディタとおすすめツール編</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年03月02日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <div class=\"CG2-seriesList__authorPicList\">\n          <ul>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"佐川 沙織\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"河田 理香\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"尾上 友美\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"新田 道雄\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"ピクセル グリオ\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"安田 麻由\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"野間 夏子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"神戸 克巳\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"杉原 幸次郎\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"田代 隆男\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"新田 春子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"中野 富子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"玉田 義之\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"柳川 健治\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"長坂 菫\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"坪田 健之\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"仲村 孝二\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"橋本 孝治\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"大澤 直子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"山口 弘一\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"影山 和子\" width=\"40\" height=\"40\"></a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</div>\n```\n*/\n.CG2-seriesList {\n  margin: 0 calc( -50vw + 50% + 8px); }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList {\n      margin-left: -18px;\n      margin-right: -18px; } }\n  @media print {\n    .CG2-seriesList {\n      margin-left: 0;\n      margin-right: 0; } }\n\n.CG2-seriesList__inner {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 1400px;\n  margin: 0 auto; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__inner {\n      display: block; } }\n\n.CG2-seriesList__item {\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  background: #000;\n  color: #fff;\n  box-sizing: border-box;\n  width: calc( 50% - 4px);\n  padding: 30px 28px;\n  margin: 2px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__item {\n      width: auto;\n      padding: 8px 8px 24px;\n      margin: 0 0 2px; } }\n  .CG2-seriesList__item.CG2-seriesList__item--fullWidth {\n    width: calc( 100% - 4px); }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__item.CG2-seriesList__item--fullWidth {\n        width: auto; } }\n\n.CG2-seriesList__itemHeader {\n  display: table;\n  width: 100%;\n  margin: -18px 0 12px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__itemHeader {\n      margin: 14px 0 20px; } }\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__itemHeader {\n    margin: 0 0 30px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__item--fullWidth .CG2-seriesList__itemHeader {\n        margin: 14px 0 20px; } }\n\n.CG2-seriesList__itemCategory {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  vertical-align: middle;\n  display: table-cell;\n  width: 40px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__itemCategory {\n      font-size: 0;\n      vertical-align: top;\n      width: 26px; } }\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__itemCategory {\n    width: 150px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__item--fullWidth .CG2-seriesList__itemCategory {\n        text-align: center;\n        vertical-align: top;\n        width: 26px; } }\n  .CG2-seriesList__itemCategory a {\n    color: inherit;\n    text-decoration: none; }\n  .CG2-seriesList__itemCategory [class^=\"CG2-icon-cat\"] {\n    font-size: 40px;\n    line-height: 1;\n    position: relative;\n    top: 0;\n    margin-right: 15px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__itemCategory [class^=\"CG2-icon-cat\"] {\n        font-size: 26px; } }\n    .CG2-seriesList__itemCategory [class^=\"CG2-icon-cat\"]::after {\n      content: \"\";\n      position: absolute;\n      z-index: -1;\n      top: calc( 50% - 20px);\n      left: calc( 50% - 20px);\n      display: block;\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      background: #eee;\n      transform: scale(0);\n      transition: all 0s; }\n  .CG2-seriesList__itemCategory a:hover [class^=\"CG2-icon-cat\"],\n  .CG2-seriesList__itemCategory a:focus [class^=\"CG2-icon-cat\"] {\n    animation-duration: .6s;\n    animation-name: anim-scaleup;\n    animation-fill-mode: forwards; }\n    .CG2-seriesList__itemCategory a:hover [class^=\"CG2-icon-cat\"]::after,\n    .CG2-seriesList__itemCategory a:focus [class^=\"CG2-icon-cat\"]::after {\n      opacity: 0;\n      transform: scale(1.4);\n      transition-duration: .4s; }\n\n.CG2-seriesList__itemTitle {\n  font-size: 25px;\n  font-weight: bold;\n  line-height: 1.4;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  text-align: center;\n  vertical-align: middle;\n  display: table-cell;\n  height: 2.8em; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__itemTitle {\n      font-size: 20px;\n      font-weight: normal;\n      height: auto; } }\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__itemTitle {\n    font-size: 30px;\n    height: auto; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__item--fullWidth .CG2-seriesList__itemTitle {\n        font-size: 20px; } }\n  .CG2-seriesList__itemTitle a {\n    color: inherit;\n    text-decoration: none;\n    display: block; }\n  .CG2-seriesList__itemTitle .CG2-seriesList__itemTitleText {\n    text-align: left;\n    display: inline-block;\n    position: relative; }\n    .CG2-seriesList__itemTitle .CG2-seriesList__itemTitleText:after {\n      content: '';\n      opacity: 0;\n      position: absolute;\n      left: 0;\n      right: 0;\n      display: block;\n      height: 1px;\n      background: #fff;\n      transform: translateY(2px) scaleX(0.1);\n      transition: all 0.6s cubic-bezier(0.3, 1.4, 0.6, 1); }\n  .CG2-seriesList__itemTitle a:hover .CG2-seriesList__itemTitleText:after,\n  .CG2-seriesList__itemTitle a:focus .CG2-seriesList__itemTitleText:after {\n    opacity: 1;\n    transform: scaleX(1); }\n\n.CG2-seriesList__itemUtil {\n  text-align: right;\n  vertical-align: middle;\n  display: table-cell;\n  width: 40px;\n  padding-left: 10px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__itemUtil {\n      vertical-align: top; } }\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__itemUtil {\n    width: 150px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__item--fullWidth .CG2-seriesList__itemUtil {\n        width: 40px; } }\n  .CG2-seriesList__itemUtil ul {\n    font-size: 0;\n    list-style: none;\n    display: inline-table;\n    padding: 0; }\n  .CG2-seriesList__itemUtil li {\n    text-align: center;\n    display: table-cell;\n    width: 18px;\n    height: 18px;\n    margin: 0;\n    padding: 8px;\n    background: rgba(255, 255, 255, 0.2); }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__itemUtil li {\n        width: 14px;\n        height: 14px; } }\n    .CG2-seriesList__itemUtil li:first-child, .CG2-seriesList__itemUtil li:first-child a {\n      border-top-left-radius: 3px;\n      border-bottom-left-radius: 3px; }\n    .CG2-seriesList__itemUtil li:last-child, .CG2-seriesList__itemUtil li:last-child a {\n      border-top-right-radius: 3px;\n      border-bottom-right-radius: 3px; }\n  .CG2-seriesList__itemUtil a,\n  .CG2-seriesList__itemUtil button {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    padding: 8px;\n    margin: -8px;\n    border: none;\n    background: rgba(255, 255, 255, 0);\n    transition: all .3s; }\n    .CG2-seriesList__itemUtil a:hover, .CG2-seriesList__itemUtil a:focus,\n    .CG2-seriesList__itemUtil button:hover,\n    .CG2-seriesList__itemUtil button:focus {\n      text-decoration: none;\n      background: rgba(255, 255, 255, 0.2); }\n      .CG2-seriesList__itemUtil a:hover span[class^=\"CG2-icon\"], .CG2-seriesList__itemUtil a:focus span[class^=\"CG2-icon\"],\n      .CG2-seriesList__itemUtil button:hover span[class^=\"CG2-icon\"],\n      .CG2-seriesList__itemUtil button:focus span[class^=\"CG2-icon\"] {\n        opacity: 1; }\n  .CG2-seriesList__itemUtil span[class^=\"CG2-icon\"] {\n    font-size: 18px;\n    line-height: 18px;\n    opacity: .5;\n    position: static;\n    display: block; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__itemUtil span[class^=\"CG2-icon\"] {\n        font-size: 14px;\n        line-height: 14px; } }\n\nbutton.CG2-seriesList__itemUtilButton--favAdded span[class^=\"CG2-icon\"] {\n  color: #ff0;\n  opacity: 1; }\n\n.CG2-seriesList__coverImage {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: -10px;\n  right: -10px;\n  bottom: -10px;\n  left: -10px;\n  background-position: 50% 50%;\n  background-size: cover;\n  transform: scale(1.2, 1.2);\n  opacity: .64;\n  transition: transform 1s;\n  will-change: opacity; }\n  .CG2-seriesList__item:hover .CG2-seriesList__coverImage,\n  .CG2-seriesList__item:focus .CG2-seriesList__coverImage {\n    transform: scale(1.4, 1.4); }\n\n.CG2-seriesList__articles {\n  position: relative;\n  z-index: 1;\n  margin-bottom: 15px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }\n\n.CG2-seriesList__article {\n  font-size: 16px;\n  display: table;\n  line-height: 1.2;\n  width: 100%;\n  border-top: 1px solid #fff;\n  border-bottom: 1px solid #fff;\n  margin-bottom: -1px;\n  background: rgba(255, 255, 255, 0); }\n  .CG2-seriesList__article.CG2-seriesList__article--unread {\n    font-weight: bold;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    background: rgba(255, 255, 255, 0.2); }\n  .CG2-seriesList__article a {\n    color: inherit;\n    text-decoration: none;\n    display: table-row;\n    transition: background .5s; }\n    .CG2-seriesList__article a:hover, .CG2-seriesList__article a:focus {\n      transition: background .2s;\n      background: rgba(255, 255, 255, 0.2); }\n\n.CG2-seriesList__articleIcon {\n  font-size: 16px;\n  display: table-cell;\n  vertical-align: middle;\n  box-sizing: border-box;\n  width: 1px;\n  padding: 0 12px 0 18px; }\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__articleIcon {\n    font-size: 18px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__articleIcon {\n      font-size: 14px;\n      padding: 0 10px; }\n      .CG2-seriesList__item--fullWidth .CG2-seriesList__articleIcon {\n        font-size: 14px; } }\n\n.CG2-seriesList__articleOrder {\n  font-size: 16px;\n  vertical-align: middle;\n  white-space: nowrap;\n  display: table-cell;\n  width: 1%;\n  padding: 15px 15px 15px 0; }\n  .CG2-seriesList__articleOrder:first-child {\n    padding-left: 20px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__articleOrder {\n      font-size: 14px;\n      padding-right: 14px; }\n      .CG2-seriesList__articleOrder:first-child {\n        padding-left: 10px; } }\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__articleOrder {\n    font-size: 18px;\n    padding-top: 24px;\n    padding-bottom: 24px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__item--fullWidth .CG2-seriesList__articleOrder {\n        font-size: 14px;\n        padding-top: 15px;\n        padding-bottom: 15px; } }\n\n.CG2-seriesList__articleTitle {\n  font-size: 16px;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 15px 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__articleTitle {\n      font-size: 14px; } }\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__articleTitle {\n    font-size: 18px;\n    padding-top: 24px;\n    padding-bottom: 24px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__item--fullWidth .CG2-seriesList__articleTitle {\n        font-size: 14px;\n        padding-top: 15px;\n        padding-bottom: 15px; } }\n\n.CG2-seriesList__articleDate {\n  font-size: 12px;\n  vertical-align: middle;\n  text-align: right;\n  display: table-cell;\n  white-space: nowrap;\n  padding: 15px 20px 15px 5px; }\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__articleDate {\n    padding-top: 24px;\n    padding-bottom: 24px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesList__item--fullWidth .CG2-seriesList__articleDate {\n        padding-top: 15px;\n        padding-bottom: 15px; } }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesList__articleDate {\n      font-size: 10px;\n      padding-right: 10px; } }\n\n.CG2-seriesList__authors {\n  position: relative;\n  z-index: 1; }\n  .CG2-seriesList__authors a {\n    color: inherit;\n    text-decoration: none;\n    display: table; }\n\n.CG2-seriesList__author {\n  position: relative; }\n\na .CG2-seriesList__author:before {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  bottom: -2px;\n  left: -2px;\n  background: rgba(255, 255, 255, 0);\n  transition: all .5s; }\n\na:hover .CG2-seriesList__author:before,\na:focus .CG2-seriesList__author:before {\n  background: rgba(255, 255, 255, 0.2);\n  transition: all .2s; }\n\n.CG2-seriesList__item--fullWidth .CG2-seriesList__authorName {\n  font-size: 16px; }\n\n@media screen and (max-width: 767px) {\n  .CG2-seriesList__item--fullWidth .CG2-seriesList__authorName {\n    font-size: 10px; } }\n\n.CG2-seriesList__itemMore {\n  width: 100%; }\n  .CG2-seriesList__itemMore a {\n    color: inherit;\n    font-family: \"Lucida Console\", Monaco, monospace;\n    font-size: 28px;\n    text-decoration: none;\n    text-align: center;\n    cursor: pointer;\n    box-sizing: border-box;\n    overflow: hidden;\n    position: relative;\n    z-index: 1;\n    display: block;\n    width: 100%;\n    padding: 20px;\n    border-bottom: 1px solid #dbdbdb; }\n    .CG2-seriesList__itemMore a:before {\n      content: '';\n      position: absolute;\n      z-index: -1;\n      top: 0;\n      bottom: 0;\n      left: -100%;\n      margin-left: -60px;\n      width: 100%;\n      padding: 0 20px;\n      transform: skewX(20deg);\n      background: #eee;\n      transition: all .3s; }\n    .CG2-seriesList__itemMore a:hover:before, .CG2-seriesList__itemMore a:focus:before {\n      left: 0;\n      margin-left: -20px; }\n    .CG2-seriesList__itemMore a:after {\n      content: \"\";\n      font-size: 20px;\n      margin-left: 4px; }\n\n/* ==========================================================================\n   transparentButton\n   ========================================================================== */\n/*\n---\nname: transparentButton\ncategory:\n  - Nav-items\ntag:\n  - button\n---\nwork with both a and button tags\n```html\n<div style=\"background: rgba( 0, 0, 0, 0.5 );\">\n  <p>\n    <a class=\"CG2-transparentButton\" href=\"#\">button:a element</a>\n  </p>\n  <p>\n    <button class=\"CG2-transparentButton\" href=\"#\">button: button element</button>\n  </p>\n</div>\n```\n\ndisabled\n```html\n<div style=\"background: rgba( 0, 0, 0, 0.5 );\">\n  <p>\n    <a class=\"CG2-transparentButton\" aria-disabled=\"true\" href=\"#\">button</a>\n  </p>\n  <p>\n    <button class=\"CG2-transparentButton\" disabled href=\"#\">button</button>\n  </p>\n</div>\n```\n\nfav\n\n.CG2-transparentButton__favText内にテキストを入れて管理する\n```html\n<div style=\"background: rgba( 0, 0, 0, 0.5 );\">\n  <p>\n    <button class=\"CG2-transparentButton\"><span class=\"CG2-icon-star\"></span><span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span></button>\n  </p>\n  <p>\n    <button class=\"CG2-transparentButton CG2-transparentButton--favAdded\"><span class=\"CG2-icon-star\"></span><span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span></button>\n  </p>\n</div>\n```\n*/\n.CG2-transparentButton {\n  color: #fff;\n  font-size: 14px;\n  line-height: 1.2;\n  text-decoration: none;\n  display: inline-block;\n  padding: 6px 10px;\n  border: 1px solid #fff;\n  border-radius: 2px;\n  background: rgba(255, 255, 255, 0);\n  transition: all .3s; }\n  @media screen and (max-width: 767px) {\n    .CG2-transparentButton {\n      font-size: 12px;\n      padding: 4px 8px; } }\n  .CG2-transparentButton:hover, .CG2-transparentButton:focus {\n    background: rgba(255, 255, 255, 0.2); }\n  .CG2-transparentButton span[class^=\"CG2-icon\"] {\n    opacity: .5;\n    margin: 0 4px 0 0;\n    transition: all .3s; }\n  .CG2-transparentButton:hover span[class^=\"CG2-icon\"],\n  .CG2-transparentButton:focus span[class^=\"CG2-icon\"] {\n    opacity: 1; }\n  .CG2-transparentButton[disabled], .CG2-transparentButton[aria-disabled=\"true\"] {\n    color: #ccc;\n    cursor: not-allowed;\n    border-color: #ccc;\n    background: rgba(255, 255, 255, 0.2); }\n    .CG2-transparentButton[disabled] span[class^=\"CG2-icon\"], .CG2-transparentButton[aria-disabled=\"true\"] span[class^=\"CG2-icon\"] {\n      opacity: 1; }\n  .CG2-transparentButton.CG2-transparentButton--favAdded span[class^=\"CG2-icon\"] {\n    color: #ff0;\n    opacity: 1; }\n  .CG2-transparentButton.CG2-transparentButton--favAdded span.CG2-transparentButton__favText {\n    color: rgba(0, 0, 0, 0);\n    font-size: 0;\n    line-height: 0; }\n    .CG2-transparentButton.CG2-transparentButton--favAdded span.CG2-transparentButton__favText:after {\n      color: #fff;\n      font-size: 14px;\n      content: 'このシリーズのお気に入り解除'; }\n      @media screen and (max-width: 767px) {\n        .CG2-transparentButton.CG2-transparentButton--favAdded span.CG2-transparentButton__favText:after {\n          font-size: 12px; } }\n\n/* ==========================================================================\n   CG2-seriesWeekHeader\n   ========================================================================== */\n/*\n---\nname: seriesWeekHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n```html\n<div class=\"CG2-seriesWeekHeader\">\n  <div class=\"CG2-seriesWeekHeader__inner\">\n    <div class=\"CG2-seriesWeekHeader__prev\">\n      <div class=\"CG2-seriesWeekHeader__prevInner\">\n        <a href=\"#\">\n          <span class=\"CG2-seriesWeekHeader__label\">前号</span>\n          <span class=\"CG2-seriesWeekHeader__number\">10</span>\n          <span class=\"CG2-seriesWeekHeader__text\">月</span>\n          <span class=\"CG2-seriesWeekHeader__number\">1</span>\n          <span class=\"CG2-seriesWeekHeader__text\">日発行</span>\n        </a>\n      </div>\n    </div>\n    <div class=\"CG2-seriesWeekHeader__current\">\n      <div class=\"CG2-seriesWeekHeader__currentInner\">\n        <a href=\"#\">\n          <span class=\"CG2-seriesWeekHeader__label\">最新号</span>\n          <span class=\"CG2-seriesWeekHeader__number\">10</span>\n          <span class=\"CG2-seriesWeekHeader__text\">月</span>\n          <span class=\"CG2-seriesWeekHeader__number\">7</span>\n          <span class=\"CG2-seriesWeekHeader__text\">日発行</span>\n        </a>\n      </div>\n    </div>\n    <div class=\"CG2-seriesWeekHeader__next\">\n      <div class=\"CG2-seriesWeekHeader__nextInner\">\n        <a href=\"#\">\n          <span class=\"CG2-seriesWeekHeader__label\">次号予告</span>\n          <span class=\"CG2-seriesWeekHeader__number\">10</span>\n          <span class=\"CG2-seriesWeekHeader__text\">月</span>\n          <span class=\"CG2-seriesWeekHeader__number\">14</span>\n          <span class=\"CG2-seriesWeekHeader__text\">日発行</span>\n        </a>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n*/\n.CG2-seriesWeekHeader {\n  margin: 80px 0 10px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesWeekHeader {\n      margin-left: -18px;\n      margin-right: -18px; } }\n  .CG2-container__inner > .CG2-seriesWeekHeader:first-child {\n    margin-top: 20px; }\n    @media screen and (max-width: 767px) {\n      .CG2-container__inner > .CG2-seriesWeekHeader:first-child {\n        margin-top: 0; } }\n  .CG2-seriesWeekHeader a {\n    color: inherit; }\n\n.CG2-seriesWeekHeader__inner {\n  display: table;\n  width: 100%; }\n\n.CG2-seriesWeekHeader__prev {\n  vertical-align: bottom;\n  display: table-cell;\n  width: 30%; }\n  .CG2-seriesWeekHeader__prev a {\n    padding-left: 20px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesWeekHeader__prev a {\n        padding-left: 16px; } }\n    .CG2-seriesWeekHeader__prev a::before {\n      content: \"\";\n      font-size: 20px;\n      position: absolute;\n      bottom: .25em;\n      left: 0;\n      transition: transform 0.4s cubic-bezier(0.3, 2, 0.6, 1); }\n      @media screen and (max-width: 767px) {\n        .CG2-seriesWeekHeader__prev a::before {\n          font-size: 14px;\n          bottom: 0; } }\n    .CG2-seriesWeekHeader__prev a:hover::before, .CG2-seriesWeekHeader__prev a:focus::before {\n      transform: translateX(-4px) scale(1.2);\n      transition-duration: .4s; }\n\n.CG2-seriesWeekHeader__next {\n  vertical-align: bottom;\n  text-align: right;\n  display: table-cell;\n  width: 30%; }\n  .CG2-seriesWeekHeader__next a {\n    padding-right: 20px; }\n    @media screen and (max-width: 767px) {\n      .CG2-seriesWeekHeader__next a {\n        padding-right: 16px; } }\n    .CG2-seriesWeekHeader__next a::after {\n      content: \"\";\n      font-size: 20px;\n      position: absolute;\n      bottom: .25em;\n      right: 0;\n      transition: transform 0.4s cubic-bezier(0.3, 2, 0.6, 1); }\n      @media screen and (max-width: 767px) {\n        .CG2-seriesWeekHeader__next a::after {\n          font-size: 14px;\n          bottom: 0; } }\n    .CG2-seriesWeekHeader__next a:hover::after, .CG2-seriesWeekHeader__next a:focus::after {\n      transform: translateX(4px) scale(1.2);\n      transition-duration: .4s; }\n\n.CG2-seriesWeekHeader__current {\n  vertical-align: bottom;\n  text-align: center;\n  display: table-cell;\n  width: 40%; }\n\n.CG2-seriesWeekHeader__prevInner,\n.CG2-seriesWeekHeader__nextInner,\n.CG2-seriesWeekHeader__currentInner {\n  font-size: 0;\n  line-height: 1.2;\n  text-align: left;\n  display: inline-block; }\n  .CG2-seriesWeekHeader__prevInner a,\n  .CG2-seriesWeekHeader__nextInner a,\n  .CG2-seriesWeekHeader__currentInner a {\n    text-decoration: none;\n    display: block;\n    position: relative; }\n\nspan.CG2-seriesWeekHeader__label {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  display: block;\n  font-size: 16px;\n  vertical-align: baseline; }\n\nspan.CG2-seriesWeekHeader__number {\n  font-family: \"Lucida Console\", Monaco, monospace;\n  font-size: 32px;\n  vertical-align: baseline;\n  margin: 0 .1em; }\n  span.CG2-seriesWeekHeader__label + span.CG2-seriesWeekHeader__number {\n    margin-left: 0; }\n\nspan.CG2-seriesWeekHeader__text {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-size: 16px;\n  vertical-align: baseline; }\n\n.CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__label {\n  font-size: 20px; }\n\n.CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__number {\n  font-size: 64px; }\n\n.CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__text {\n  font-size: 32px; }\n\n@media screen and (max-width: 767px) {\n  .CG2-seriesWeekHeader__prev,\n  .CG2-seriesWeekHeader__next {\n    width: 22%; }\n    .CG2-seriesWeekHeader__prev span.CG2-seriesWeekHeader__label,\n    .CG2-seriesWeekHeader__next span.CG2-seriesWeekHeader__label {\n      font-size: 12px; }\n    .CG2-seriesWeekHeader__prev span.CG2-seriesWeekHeader__number,\n    .CG2-seriesWeekHeader__prev span.CG2-seriesWeekHeader__text,\n    .CG2-seriesWeekHeader__next span.CG2-seriesWeekHeader__number,\n    .CG2-seriesWeekHeader__next span.CG2-seriesWeekHeader__text {\n      display: none; }\n  .CG2-seriesWeekHeader__current {\n    position: relative;\n    bottom: -.4em;\n    width: 56%; }\n    .CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__label {\n      font-size: 12px; }\n    .CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__number {\n      font-size: 40px; }\n    .CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__text {\n      font-size: 18px; } }\n\n/* ==========================================================================\n   CG2-seriesListHeader\n   ========================================================================== */\n/*\n---\nname: seriesListHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n内部で別コンポーネント CG2-compactNav を利用\n\n```html\n<div class=\"CG2-seriesListHeader\">\n  <div class=\"CG2-seriesListHeader__articleLength\">\n    <span class=\"CG2-seriesListHeader__label\">記事数</span>\n    <span class=\"CG2-seriesListHeader__number\">500</span>\n    <span class=\"CG2-seriesListHeader__unit\">本</span>\n  </div>\n  <div class=\"CG2-seriesListHeader__nav\">\n\n    <div class=\"CG2-compactNav\">\n      <ul>\n        <li class=\"CG2-compactNav__item--current\"><a href=\"#\">最新順</a></li>\n        <li><a href=\"#\">おすすめ順</a></li>\n        <li><a href=\"#\">お気に入り</a></li>\n        <li><a href=\"#\">無料公開</a></li>\n      </ul>\n      <div class=\"CG2-compactNav__navOpener\"></div>\n    </div>\n\n  </div>\n</div>\n```\n\n```html\n<div class=\"CG2-seriesListHeader\">\n  <div class=\"CG2-seriesListHeader__nav\">\n\n    <div class=\"CG2-compactNav\">\n      <ul>\n        <li class=\"CG2-compactNav__item--current\"><a href=\"#\">最新順</a></li>\n        <li><a href=\"#\">おすすめ順</a></li>\n        <li><a href=\"#\">お気に入り</a></li>\n        <li><a href=\"#\">無料公開</a></li>\n      </ul>\n      <div class=\"CG2-compactNav__navOpener\"></div>\n    </div>\n\n  </div>\n</div>\n```\n\nタブ切り替え（表示toggle）の挙動の付与\n（JSとの連携、以下で挙動確認可能）\n\n- `data-cg2-tab-button`を明示する\n- コンテンツ部は`[data-cg2-tab-content]`でグループ化した`[data-cg2-tab-pane]`を用意する\n\n```html\n<div class=\"CG2-seriesListHeader\">\n  <div class=\"CG2-seriesListHeader__nav\">\n\n    <div class=\"CG2-compactNav\">\n      <ul>\n        <li class=\"CG2-compactNav__item--current\"><a href=\"#itemA\" data-cg2-tab-button>項目A</a></li>\n        <li><a href=\"#itemB\" data-cg2-tab-button>項目B</a></li>\n      </ul>\n      <div class=\"CG2-compactNav__navOpener\"></div>\n    </div>\n\n  </div>\n</div>\n\n\n<div data-cg2-tab-content>\n\n  <div id=\"itemA\" data-cg2-tab-pane=\"current\">\n    項目Aのコンテンツ\n  </div>\n\n  <div id=\"itemB\" data-cg2-tab-pane>\n    項目Bのコンテンツ\n  </div>\n\n</div>\n```\n\n*/\n.CG2-seriesListHeader {\n  font-size: 0;\n  font-family: \"zeroWidth\";\n  margin: 60px 0 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesListHeader {\n      display: table;\n      width: 100%;\n      margin-bottom: 20px; } }\n  .CG2-container__inner > .CG2-seriesListHeader:first-child {\n    margin-top: 20px; }\n\n.CG2-seriesListHeader__articleLength {\n  font-family: Helvetica, \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif;\n  font-size: 1rem;\n  white-space: nowrap;\n  vertical-align: bottom;\n  display: inline-block;\n  width: 300px;\n  margin-right: -300px;\n  margin-bottom: -.6em; }\n  @media screen and (max-width: 979px) {\n    .CG2-seriesListHeader__articleLength {\n      margin-bottom: -.3em; } }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesListHeader__articleLength {\n      display: table-cell;\n      width: auto;\n      margin-right: 0; } }\n  .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__label {\n    font-size: 16px;\n    font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n    font-feature-settings: \"palt\";\n    display: block; }\n    @media screen and (max-width: 979px) {\n      .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__label {\n        font-size: 12px; } }\n  .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__number {\n    font-size: 72px;\n    font-family: \"Lucida Console\", Monaco, monospace;\n    line-height: 1;\n    display: inline-block; }\n    @media screen and (max-width: 979px) {\n      .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__number {\n        font-size: 42px; } }\n  .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__unit {\n    font-size: 32px;\n    font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n    font-feature-settings: \"palt\";\n    line-height: 1; }\n    @media screen and (max-width: 979px) {\n      .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__unit {\n        font-size: 20px; } }\n\n.CG2-seriesListHeader__nav {\n  font-family: Helvetica, \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif;\n  font-size: 1rem;\n  vertical-align: bottom;\n  display: inline-block;\n  width: 100%; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesListHeader__nav {\n      display: table-cell;\n      width: 160px;\n      text-align: right; } }\n\n[data-cg2-tab-pane] {\n  display: none; }\n\n[data-cg2-tab-pane=\"current\"] {\n  display: block; }\n\n/* ==========================================================================\n   CG2-compactNav\n   ========================================================================== */\n/*\n---\nname: compactNav\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n別コンポーネント CG2-seriesListHeader 内で利用。利用方法は CG2-seriesListHeader を参照\n\n```html\n<div class=\"CG2-compactNav\">\n  <ul>\n    <li class=\"CG2-compactNav__item--current\"><a href=\"#\">最新順</a></li>\n    <li><a href=\"#\">おすすめ順</a></li>\n    <li><a href=\"#\">お気に入り</a></li>\n    <li><a href=\"#\">無料公開</a></li>\n  </ul>\n  <div class=\"CG2-compactNav__navOpener\"></div>\n</div>\n```\n\n*/\n.CG2-compactNav {\n  font-family: Helvetica, \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif;\n  font-size: 1rem;\n  vertical-align: bottom; }\n  @media screen and (max-width: 979px) {\n    .CG2-compactNav {\n      font-size: 0.9rem; } }\n  @media screen and (max-width: 767px) {\n    .CG2-compactNav {\n      line-height: 2.2em;\n      vertical-align: middle;\n      position: relative;\n      z-index: 10;\n      display: inline-block;\n      width: 120px;\n      padding-right: 30px;\n      border: 1px solid #dbdbdb;\n      border-radius: 3px;\n      height: 2.2em; } }\n  .CG2-compactNav ul {\n    list-style: none;\n    table-layout: fixed;\n    display: table;\n    padding: 0;\n    margin: 0 auto; }\n    @media screen and (max-width: 767px) {\n      .CG2-compactNav ul {\n        position: absolute;\n        display: block;\n        width: 120px;\n        border: 1px solid #dbdbdb;\n        border-radius: 3px;\n        margin: -1px;\n        background: #fff; } }\n  .CG2-compactNav li {\n    font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n    font-feature-settings: \"palt\";\n    text-align: center;\n    vertical-align: middle;\n    display: table-cell;\n    padding: 2px 40px;\n    border-left: 1px solid #dbdbdb;\n    margin: 0; }\n    .CG2-compactNav li:first-child {\n      border-left: none; }\n    @media screen and (max-width: 979px) {\n      .CG2-compactNav li {\n        padding-left: 20px;\n        padding-right: 20px; } }\n    @media screen and (max-width: 767px) {\n      .CG2-compactNav li {\n        font-family: Helvetica, \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif;\n        display: block;\n        text-align: left;\n        display: none;\n        border-left: none;\n        padding: 0 10px; }\n        .CG2-compactNav.CG2-compactNav--show li {\n          display: block; } }\n    .CG2-compactNav li.CG2-compactNav__item--current {\n      color: #fff;\n      display: block;\n      background: #282828; }\n      @media screen and (max-width: 767px) {\n        .CG2-compactNav li.CG2-compactNav__item--current {\n          color: inherit;\n          background: rgba(0, 0, 0, 0.03); } }\n  .CG2-compactNav a {\n    color: inherit;\n    text-decoration: none;\n    position: relative;\n    display: block;\n    padding: 2px 40px;\n    margin: -2px -40px; }\n    @media screen and (max-width: 979px) {\n      .CG2-compactNav a {\n        padding-left: 20px;\n        padding-right: 20px;\n        margin-left: -20px;\n        margin-right: -20px; } }\n    @media screen and (max-width: 767px) {\n      .CG2-compactNav a {\n        padding: 0 10px;\n        margin: 0 -10px; } }\n  .CG2-compactNav li:not(.CG2-compactNav__item--current) a:after {\n    content: '';\n    position: absolute;\n    left: 50%;\n    right: 50%;\n    bottom: 0;\n    display: block;\n    height: 2px;\n    background: #424242;\n    transition: all 0.4s cubic-bezier(0.3, 1.4, 0.6, 1); }\n  .CG2-compactNav li:not(.CG2-compactNav__item--current) a:hover:after, .CG2-compactNav li:not(.CG2-compactNav__item--current) a:focus:after {\n    left: 0;\n    right: 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-compactNav li:not(.CG2-compactNav__item--current) a:after {\n      content: none; } }\n  @media screen and (max-width: 767px) {\n    .CG2-compactNav .CG2-compactNav__navOpener {\n      line-height: 2.2em;\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      width: 30px;\n      height: 2.2em;\n      background: #ebebeb;\n      cursor: pointer; }\n      .CG2-compactNav .CG2-compactNav__navOpener:after {\n        content: \"\";\n        font-size: 14px;\n        line-height: 0;\n        position: absolute;\n        top: 50%;\n        left: 0;\n        width: 30px;\n        text-align: center; } }\n\n/* ==========================================================================\n   CG2-seriesHeader\n   ========================================================================== */\n/*\n---\nname: seriesHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\ntemplateItem:\n  - true\n---\n\n## 購読済\n\n```html\n<div class=\"CG2-seriesHeader\">\n  <div class=\"CG2-seriesHeader__inner\">\n    <div class=\"CG2-seriesHeader__category\">\n      <div class=\"CG2-seriesHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-architecture\"></span>\n      </div>\n      <div class=\"CG2-seriesHeader__categoryName\">設計</div>\n    </div>\n    <div class=\"CG2-seriesHeader__main\">\n      <div class=\"CG2-seriesHeader__mainInner\">\n        <div class=\"CG2-seriesHeader__title\">jQuery初心者のためのJavaScript設計トレーニング</div>\n        <div class=\"CG2-seriesHeader__length\">\n          全<span class=\"CG2-seriesHeader__value\">1</span>回\n        </div>\n      </div>\n    </div>\n    <div class=\"CG2-seriesHeader__utils\">\n      <button id=\"js-toggle-fav-series\" type=\"button\" aria-pressed=\"false\" class=\"CG2-transparentButton\">\n        <span aria-hidden=\"true\" class=\"CG2-icon-star\"></span>\n        <span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span>\n      </button>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2016-js-training-for-beginners/main-blur.jpg)\" class=\"CG2-seriesHeader__bg\"></div>\n</div>\n```\n\n## 購読済、お気に入り追加\n\n`CG2-seriesHeader__utils`内のボタンが変化する。\n\n```html\n<div class=\"CG2-seriesHeader\">\n  <div class=\"CG2-seriesHeader__inner\">\n    <div class=\"CG2-seriesHeader__category\">\n      <div class=\"CG2-seriesHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-architecture\"></span>\n      </div>\n      <div class=\"CG2-seriesHeader__categoryName\">デザイン</div>\n    </div>\n    <div class=\"CG2-seriesHeader__main\">\n      <div class=\"CG2-seriesHeader__mainInner\">\n        <div class=\"CG2-seriesHeader__title\">きちんと学ぶユーザーインターフェース</div>\n        <div class=\"CG2-seriesHeader__length\">\n          全<span class=\"CG2-seriesHeader__value\">4</span>回\n        </div>\n      </div>\n    </div>\n    <div class=\"CG2-seriesHeader__utils\">\n      <button id=\"js-toggle-fav-series\" type=\"button\" aria-pressed=\"true\" class=\"CG2-transparentButton CG2-transparentButton--favAdded\">\n        <span aria-hidden=\"true\" class=\"CG2-icon-star\"></span>\n        <span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span>\n      </button>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2017-mastering-ui/main-blur.jpg)\" class=\"CG2-seriesHeader__bg\"></div>\n</div>\n```\n\n## 未購読・非ログイン\n\n`CG2-seriesHeader__utils`がない。\n\n```html\n<div class=\"CG2-seriesHeader\">\n  <div class=\"CG2-seriesHeader__inner\">\n    <div class=\"CG2-seriesHeader__category\">\n      <div class=\"CG2-seriesHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-architecture\"></span>\n      </div>\n      <div class=\"CG2-seriesHeader__categoryName\">未来・次世代</div>\n    </div>\n    <div class=\"CG2-seriesHeader__main\">\n      <div class=\"CG2-seriesHeader__mainInner\">\n        <div class=\"CG2-seriesHeader__title\">一歩先行くCSS</div>\n        <div class=\"CG2-seriesHeader__length\">\n          全<span class=\"CG2-seriesHeader__value\">2</span>回\n        </div>\n      </div>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2016-future-css/main-blur.jpg)\" class=\"CG2-seriesHeader__bg\"></div>\n</div>\n```\n*/\n.CG2-seriesHeader {\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  background: #000;\n  color: #fff; }\n\n.CG2-seriesHeader__inner {\n  box-sizing: border-box;\n  max-width: 1016px;\n  padding: 50px 0 40px;\n  margin: 0 auto; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesHeader__inner {\n      width: auto;\n      padding: 20px 10px; } }\n\n.CG2-seriesHeader__category {\n  text-align: center;\n  margin-bottom: 20px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesHeader__category {\n      margin-bottom: 10px; } }\n\n.CG2-seriesHeader__categoryIcon {\n  font-size: 50px;\n  line-height: 1; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesHeader__categoryIcon {\n      font-size: 32px; } }\n\n.CG2-seriesHeader__categoryName {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  margin-top: 3px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesHeader__categoryName {\n      font-size: 10px; } }\n\n.CG2-seriesHeader__mainInner {\n  text-align: center;\n  min-height: 120px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesHeader__mainInner {\n      min-height: 60px; } }\n\n.CG2-seriesHeader__title {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-size: 48px;\n  line-height: 1.2; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesHeader__title {\n      font-size: 20px; } }\n\n.CG2-seriesHeader__length {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  margin-top: 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesHeader__length {\n      font-size: 10px;\n      margin-top: 10px; } }\n\n.CG2-seriesHeader__value {\n  margin: 0 0.6em; }\n\n.CG2-seriesHeader__utils {\n  box-sizing: border-box;\n  max-width: 1016px;\n  padding: 0 28px;\n  margin: 0 auto; }\n  @media screen and (max-width: 767px) {\n    .CG2-seriesHeader__utils {\n      padding: 0 10px; } }\n\n.CG2-seriesHeader__bg {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: -10px;\n  right: -10px;\n  bottom: -10px;\n  left: -10px;\n  background-position: 50% 50%;\n  background-size: cover;\n  transform: scale(1.2, 1.2);\n  opacity: .64; }\n\n/* ==========================================================================\n   CG2-series\n   ========================================================================== */\n/*\n---\nname: series\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n## 未購読・購読済、著者1人・2人\n\n```html\n<div class=\"CG2-series\">\n  <div class=\"CG2-series__item\">\n    <div class=\"CG2-series__itemHeader\">\n      <a href=\"\">\n        <div class=\"CG2-series__itemIcon\">\n          <div class=\"CG2-icon-lock\"></div>\n        </div>\n        <div class=\"CG2-series__itemTitle\">第2回 SVGデータの作成 1</div>\n        <div class=\"CG2-series__itemPubdate\">2014年05月15日</div>\n      </a>\n    </div>\n    <div class=\"CG2-series__itemBody\">\n      <p>Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。</p>\n    </div>\n    <div class=\"CG2-series__authors\">\n      <div class=\"CG2-series__author\">\n        <div class=\"CG2-series__authorPic\">\n          <a href=\"\"><img src=\"__dummy__80x80\" alt=\"長坂 菫\" width=\"40\" height=\"40\"></a>\n        </div>\n        <div class=\"CG2-series__authorName\">長坂 菫 | UIデザイナー</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"CG2-series__item\">\n    <div class=\"CG2-series__itemHeader\">\n      <a href=\"\">\n        <div class=\"CG2-series__itemTitle\">第1回 SVGコードの基本</div>\n        <div class=\"CG2-series__itemPubdate\">2014年05月08日</div>\n      </a>\n    </div>\n    <div class=\"CG2-series__itemBody\">\n      <p>この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。</p>\n    </div>\n    <div class=\"CG2-series__authors\">\n      <div class=\"CG2-series__author\">\n        <div class=\"CG2-series__authorPic\">\n          <a href=\"\"><img src=\"__dummy__80x80\" alt=\"杉原 幸次郎\" width=\"40\" height=\"40\"></a>\n        </div>\n        <div class=\"CG2-series__authorName\">杉原 幸次郎 | フロントエンド・エンジニア</div>\n      </div>\n      <div class=\"CG2-series__author\">\n        <div class=\"CG2-series__authorPic\">\n          <a href=\"\"><img src=\"__dummy__80x80\" alt=\"長坂 菫\" width=\"40\" height=\"40\"></a>\n        </div>\n        <div class=\"CG2-series__authorName\">長坂 菫 | UIデザイナー</div>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n## 著者複数、未読\n\n```html\n<div class=\"CG2-series\">\n  <div class=\"CG2-series__item CG2-series__item--unread\">\n    <div class=\"CG2-series__itemHeader\">\n      <a href=\"\">\n        <div class=\"CG2-series__itemTitle\">第1回 コミュニケーションツール</div>\n        <div class=\"CG2-series__itemPubdate\">2013年10月10日</div>\n      </a>\n    </div>\n    <div class=\"CG2-series__itemBody\">\n      <p>第1回はピクセルグリッドが日常の業務でのクライアントとのコミュニケーション方法やコミュニケーションツールがテーマです。</p>\n    </div>\n    <div class=\"CG2-series__authors\">\n      <div class=\"CG2-series__authorPicList\">\n        <ul>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"佐川 沙織\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"河田 理香\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"尾上 友美\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"新田 道雄\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"ピクセル グリオ\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"安田 麻由\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"野間 夏子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"神戸 克巳\" width=\"40\" height=\"40\"></a></li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</div>\n```\n*/\n.CG2-series__item {\n  margin-top: 45px; }\n  .CG2-series__item:first-child {\n    margin-top: 20px; }\n\n.CG2-series__itemHeader {\n  color: #787878;\n  position: relative;\n  z-index: 1;\n  display: table;\n  width: 100%;\n  border-top: 1px solid #dbdbdb;\n  border-bottom: 1px solid #dbdbdb;\n  margin-bottom: 20px; }\n  .CG2-series__item--unread .CG2-series__itemHeader {\n    color: inherit; }\n\n.CG2-series__itemHeader a {\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  display: table-cell; }\n  .CG2-series__itemHeader a:after {\n    content: '';\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    bottom: 0;\n    right: 100%;\n    left: 0;\n    transition: all .3s; }\n  .CG2-series__itemHeader a:hover:after, .CG2-series__itemHeader a:focus:after {\n    background: #eee;\n    right: 0; }\n\n.CG2-series__itemIcon {\n  font-size: 24px;\n  display: table-cell;\n  vertical-align: middle;\n  box-sizing: border-box;\n  width: 1px;\n  padding: 0 10px 0 15px; }\n  @media screen and (max-width: 767px) {\n    .CG2-series__itemIcon {\n      font-size: 16px;\n      padding: 0 10px 0 15px; } }\n\n.CG2-series__itemTitle {\n  font-size: 20px;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 20px 0; }\n  .CG2-series__item--unread .CG2-series__itemTitle {\n    font-weight: bold; }\n  .CG2-series__itemTitle:first-child {\n    padding-left: 20px; }\n  @media screen and (max-width: 767px) {\n    .CG2-series__itemTitle {\n      font-size: 14px;\n      padding-top: 15px;\n      padding-bottom: 15px; } }\n\n.CG2-series__itemPubdate {\n  font-size: 12px;\n  white-space: nowrap;\n  vertical-align: middle;\n  display: table-cell;\n  width: 1%;\n  padding: 20px 20px 20px 5px; }\n  @media screen and (max-width: 767px) {\n    .CG2-series__itemPubdate {\n      font-size: 8px;\n      padding-top: 15px;\n      padding-bottom: 15px; } }\n\n.CG2-series__itemBody {\n  padding: 0 56px;\n  margin: 20px 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-series__itemBody {\n      padding-left: 10px;\n      padding-right: 10px; } }\n\n.CG2-series__authors {\n  padding: 0 56px; }\n  .CG2-series__authors a {\n    color: inherit;\n    text-decoration: none;\n    display: table; }\n  @media screen and (max-width: 767px) {\n    .CG2-series__authors {\n      padding-left: 10px;\n      padding-right: 10px; } }\n\n/* ==========================================================================\n   CG2-categoryHeader\n   ========================================================================== */\n/*\n---\nname: categoryHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\n```html\n<div class=\"CG2-categoryHeader\">\n  <div class=\"CG2-categoryHeader__inner\">\n    <div class=\"CG2-categoryHeader__icon\">\n      <span class=\"CG2-icon-cat-future CG2-icon--colored\"></span>\n    </div>\n    <div class=\"CG2-categoryHeader__text\">\n      <h1>未来・次世代</h1>\n      <p>カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。</p>\n    </div>\n  </div>\n</div>\n```\n\n*/\n.CG2-categoryHeader {\n  margin: 30px 0 60px; }\n  @media screen and (max-width: 767px) {\n    .CG2-categoryHeader {\n      margin: 0 0 30px 0; } }\n\n.CG2-categoryHeader__inner {\n  display: table;\n  width: 100%; }\n\n.CG2-categoryHeader__icon {\n  text-align: center;\n  vertical-align: middle;\n  display: table-cell;\n  width: 180px; }\n  @media screen and (max-width: 767px) {\n    .CG2-categoryHeader__icon {\n      text-align: left;\n      width: 70px; } }\n\n.CG2-categoryHeader__text {\n  display: table-cell;\n  vertical-align: middle; }\n  .CG2-categoryHeader__text h1 {\n    font-size: 24px;\n    line-height: 1.2;\n    margin: 0 0 15px; }\n    @media screen and (max-width: 767px) {\n      .CG2-categoryHeader__text h1 {\n        font-size: 16px;\n        margin-bottom: 10px; } }\n  .CG2-categoryHeader__text p {\n    margin: 10px 0; }\n  .CG2-categoryHeader__text > *:last-child {\n    margin-bottom: 0; }\n\n.CG2-categoryHeader span[class*=\"CG2-icon-cat\"] {\n  font-size: 120px; }\n  @media screen and (max-width: 767px) {\n    .CG2-categoryHeader span[class*=\"CG2-icon-cat\"] {\n      font-size: 50px; } }\n\n/* ==========================================================================\n   CG2-articleHeader\n   ========================================================================== */\n/*\n---\nname: articleHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n```html\n<div class=\"CG2-articleHeader\">\n  <div class=\"CG2-articleHeader__inner\">\n    <div class=\"CG2-articleHeader__category\">\n      <div class=\"CG2-articleHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-elementary\"></span>\n      </div>\n      <div class=\"CG2-articleHeader__categoryName\">入門</div>\n    </div>\n\n    <div class=\"CG2-articleHeader__main\">\n      <div class=\"CG2-articleHeader__mainInner\">\n        <div class=\"CG2-articleHeader__series\">\n          <a href=\"javascript:alert( 'シリーズ一覧へ' );\">\n            そこが知りたい、 Flexible Box\n          </a>\n        </div>\n        <div class=\"CG2-articleHeader__title\">第2回 仕様を知る 2</div>\n        <div class=\"CG2-articleHeader__abstract\">\n          <p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>\n        </div>\n        <div class=\"CG2-articleHeader__pubDate\">2015年 5月14日発行</div>\n        \n        <div class=\"CG2-articleHeader__authors\">\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"#\">\n              <div class=\"CG2-articleHeader__authorImage\">\n                <img src=\"__dummy__48x48\" alt=\"\">\n              </div>\n              <div class=\"CG2-articleHeader__authorName\">佐川 沙織</div>\n              <div class=\"CG2-articleHeader__authorTitle\">フロントエンド・エンジニア</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"#\">\n              <div class=\"CG2-articleHeader__authorImage\">\n                <img src=\"__dummy__48x48\" alt=\"\">\n              </div>\n              <div class=\"CG2-articleHeader__authorName\">佐川 沙織</div>\n            </a>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div class=\"CG2-articleHeader__pagenation\">\n      <ul>\n        <li class=\"CG2-articleHeader__pagenationPrev\"><a href=\"#\">前回</a></li>\n        <li class=\"CG2-articleHeader__pagenationNext\"><a href=\"#\">次回</a></li>\n      </ul>\n    </div>\n\n    <div class=\"CG2-articleHeader__utils\">\n      <ul>\n        <li><a href=\"#\" class=\"CG2-transparentButton\"><span class=\"CG2-icon-list\"></span>このシリーズの記事一覧をみる</a></li>\n        <li><button class=\"CG2-transparentButton\"><span class=\"CG2-icon-star\"></span>このシリーズをお気に入りに登録</button></li>\n        <li><button class=\"CG2-transparentButton\">未読にする</button></li>\n      </ul>\n    </div>\n\n  </div>\n  <div class=\"CG2-articleHeader__bg\" style=\"background-image: url(//cdn.codegrid.net/2015-css-flexiblebox/main-blur.jpg)\"></div>\n</div>\n```\n\n## 通常\n\n```html\n<div class=\"CG2-articleHeader\">\n  <div class=\"CG2-articleHeader__inner\">\n    <div class=\"CG2-articleHeader__category\">\n      <div class=\"CG2-articleHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-standards\"></span>\n      </div>\n      <div class=\"CG2-articleHeader__categoryName\">仕様解説</div>\n    </div>\n    <div class=\"CG2-articleHeader__main\">\n      <div class=\"CG2-articleHeader__mainInner\">\n        <div class=\"CG2-articleHeader__series\">そこが知りたい、Flexible Box</div>\n        <div class=\"CG2-articleHeader__title\">第2回 仕様を知る 2</div>\n        <div class=\"CG2-articleHeader__abstract\">\n          <p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>\n        </div>\n        <div class=\"CG2-articleHeader__pubDate\">2015年04月16日発行</div>\n        <div class=\"CG2-articleHeader__authors\">\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\">\n                <img src=\"__dummy__48x48\" alt=\"佐川 沙織\">\n              </div>\n              <div class=\"CG2-articleHeader__authorName\">佐川 沙織</div>\n              <div class=\"CG2-articleHeader__authorTitle\">フロントエンド・エンジニア</div>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"CG2-articleHeader__pagenation\">\n      <ul>\n        <li class=\"CG2-articleHeader__pagenationPrev\"><a href=\"\">前回</a></li>\n        <li class=\"CG2-articleHeader__pagenationNext\"><a href=\"\">次回</a></li>\n      </ul>\n    </div>\n    <div class=\"CG2-articleHeader__utils\">\n      <ul>\n        <li>\n          <a href=\"\" class=\"CG2-transparentButton\"><span class=\"CG2-icon-list\"></span>このシリーズの記事一覧をみる</a>\n        </li>\n        <li>\n          <button id=\"js-toggle-fav-series\" type=\"button\" aria-pressed=\"false\" class=\"CG2-transparentButton\">\n            <span aria-hidden=\"true\" class=\"CG2-icon-star\"></span>\n            <span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span>\n          </button>\n        </li>\n        <li>\n          <button id=\"js-unread\" class=\"CG2-transparentButton\">未読にする</button>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2015-css-flexiblebox/main-blur.jpg)\" class=\"CG2-articleHeader__bg\"></div>\n</div>\n```\n\n## 著者複数、前次回なし、お気に入り済、未読押下後\n\n```html\n<div data-page-id=\"entry-main\" class=\"CG2-articleHeader\">\n  <div class=\"CG2-articleHeader__inner\">\n    <div class=\"CG2-articleHeader__category\">\n      <div class=\"CG2-articleHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-survey\"></span>\n      </div>\n      <div class=\"CG2-articleHeader__categoryName\">アンケート</div>\n    </div>\n    <div class=\"CG2-articleHeader__main\">\n      <div class=\"CG2-articleHeader__mainInner\">\n        <div class=\"CG2-articleHeader__series\">ピクセルグリッド技術サーベイ 2015</div>\n        <div class=\"CG2-articleHeader__title\">第1回 JavaScriptトランスパイラ編</div>\n        <div class=\"CG2-articleHeader__abstract\">\n          <p>技術サーベイの第1回目は、 JavaScriptトランスパイラ編。最終的にJavaScriptとして書き出される3つの言語の使用経験を聞きました。どんな理由で使うのか、その将来性に迫ります。</p>\n        </div>\n        <div class=\"CG2-articleHeader__pubDate\">2015年06月18日発行</div>\n        <div class=\"CG2-articleHeader__authors\">\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"大澤 直子\"></div>\n              <div class=\"CG2-articleHeader__authorName\">大澤 直子</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"山口 弘一\"></div>\n              <div class=\"CG2-articleHeader__authorName\">山口 弘一</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"杉原 幸次郎\"></div>\n              <div class=\"CG2-articleHeader__authorName\">杉原 幸次郎</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"玉田 義之\"></div>\n              <div class=\"CG2-articleHeader__authorName\">玉田 義之</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"橋本 孝治\"></div>\n              <div class=\"CG2-articleHeader__authorName\">橋本 孝治</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"長坂 菫\"></div>\n              <div class=\"CG2-articleHeader__authorName\">長坂 菫</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"玉田 義之\"></div>\n              <div class=\"CG2-articleHeader__authorName\">玉田 義之</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"佐川 沙織\"></div>\n              <div class=\"CG2-articleHeader__authorName\">佐川 沙織</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"坪田 健之\"></div>\n              <div class=\"CG2-articleHeader__authorName\">坪田 健之</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"野間 夏子\"></div>\n              <div class=\"CG2-articleHeader__authorName\">野間 夏子</div>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"CG2-articleHeader__pagenation\">\n      <ul>\n      </ul>\n    </div>\n    <div class=\"CG2-articleHeader__utils\">\n      <ul>\n        <li>\n          <a href=\"\" class=\"CG2-transparentButton\"><span class=\"CG2-icon-list\"></span>このシリーズの記事一覧をみる</a>\n        </li>\n        <li>\n          <button id=\"js-toggle-fav-series\" type=\"button\" aria-pressed=\"false\" class=\"CG2-transparentButton CG2-transparentButton--favAdded\">\n            <span aria-hidden=\"true\" class=\"CG2-icon-star\"></span>\n            <span class=\"CG2-transparentButton__favText\">このシリーズのお気に入り解除</span>\n          </button>\n        </li>\n        <li>\n          <button id=\"js-unread\" class=\"CG2-transparentButton\" disabled>未読にする</button>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2015-tech-survey/main-blur.jpg)\" class=\"CG2-articleHeader__bg\"></div>\n</div>\n```\n*/\n.CG2-articleHeader {\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  background: #000;\n  color: #fff; }\n\n.CG2-articleHeader__inner {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  max-width: 1016px;\n  padding: 40px 190px;\n  margin: 0 auto; }\n  @media screen and (max-width: 979px) {\n    .CG2-articleHeader__inner {\n      padding-left: 18.70079%;\n      padding-right: 18.70079%; } }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__inner {\n      width: auto;\n      max-width: 656px;\n      padding: 20px; } }\n\n.CG2-articleHeader__category {\n  position: absolute;\n  top: calc( 40px + 0.5em);\n  left: 50px;\n  width: 50px; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__category {\n      vertical-align: middle;\n      position: static;\n      display: table;\n      width: auto;\n      margin-bottom: 10px; } }\n\n.CG2-articleHeader__categoryIcon {\n  width: 50px;\n  height: 50px;\n  margin-bottom: 10px; }\n  .CG2-articleHeader__categoryIcon span[class*=\"CG2-icon-cat\"] {\n    font-size: 50px;\n    line-height: 50px;\n    top: 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__categoryIcon {\n      display: table-cell;\n      width: auto;\n      height: auto; }\n      .CG2-articleHeader__categoryIcon span[class*=\"CG2-icon-cat\"] {\n        font-size: 32px;\n        line-height: 32px; } }\n\n.CG2-articleHeader__categoryName {\n  letter-spacing: 0.2em;\n  line-height: 50px;\n  -webkit-writing-mode: vertical-rl;\n  writing-mode: tb-rl;\n  writing-mode: vertical-rl;\n  margin: auto; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__categoryName {\n      font-size: 12px;\n      letter-spacing: 0;\n      line-height: normal;\n      vertical-align: middle;\n      -webkit-writing-mode: inherit;\n      writing-mode: inherit;\n      writing-mode: inherit;\n      display: table-cell;\n      padding-left: 10px; } }\n\n.CG2-articleHeader__main {\n  display: table;\n  width: 100%;\n  height: 260px; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__main {\n      height: auto; } }\n\n.CG2-articleHeader__mainInner {\n  display: table-cell;\n  vertical-align: top; }\n\n.CG2-articleHeader__series {\n  font-size: 24px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  line-height: 1.4; }\n  .CG2-articleHeader__series a {\n    color: inherit;\n    text-decoration: inherit;\n    display: inline-block;\n    position: relative; }\n    .CG2-articleHeader__series a:after {\n      content: '';\n      opacity: 0;\n      position: absolute;\n      bottom: -3px;\n      left: 0;\n      right: 0;\n      display: block;\n      height: 1px;\n      background: #fff;\n      transition: all .6s; }\n    .CG2-articleHeader__series a:hover:after, .CG2-articleHeader__series a:focus:after {\n      bottom: 0;\n      opacity: 1; }\n\n.CG2-articleHeader__title {\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-weight: 600;\n  line-height: 1.4;\n  margin-bottom: 22px; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__title {\n      font-size: 18px; } }\n\n.CG2-articleHeader__abstract {\n  line-height: 1.6; }\n  .CG2-articleHeader__abstract p {\n    margin-top: .5em;\n    margin-bottom: .5em; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__abstract {\n      font-size: 12px; } }\n\n.CG2-articleHeader__pubDate {\n  font-size: 12px;\n  opacity: 0.5; }\n\n.CG2-articleHeader__authors {\n  font-size: 0;\n  margin: 10px 0; }\n\n.CG2-articleHeader__author {\n  font-size: 1rem;\n  display: inline-table;\n  margin: 3px 10px 3px 0;\n  margin-right: 10px; }\n  .CG2-articleHeader__author > a {\n    color: inherit;\n    text-decoration: none;\n    position: relative;\n    display: table;\n    width: 100%; }\n    .CG2-articleHeader__author > a:before {\n      content: '';\n      display: block;\n      position: absolute;\n      top: -2px;\n      right: -2px;\n      bottom: -2px;\n      left: -2px;\n      background: rgba(255, 255, 255, 0);\n      transition: all .5s; }\n    .CG2-articleHeader__author > a:hover:before, .CG2-articleHeader__author > a:focus:before {\n      background: rgba(255, 255, 255, 0.2);\n      transition: all .2s; }\n\n.CG2-articleHeader__authorImage {\n  vertical-align: middle;\n  display: table-cell;\n  padding-right: 8px; }\n  .CG2-articleHeader__authorImage img {\n    display: block;\n    width: 24px;\n    height: 24px; }\n\n.CG2-articleHeader__authorName {\n  font-size: 12px;\n  vertical-align: middle;\n  display: table-cell;\n  padding-right: 6px; }\n\n.CG2-articleHeader__authorTitle {\n  font-size: 12px;\n  vertical-align: middle;\n  display: table-cell;\n  padding-left: 6px;\n  position: relative; }\n  .CG2-articleHeader__authorTitle:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    height: 1.4em;\n    border-left: 1px solid #fff;\n    margin: auto; }\n\n.CG2-articleHeader__pagenation {\n  padding-top: 20px;\n  margin: 0 -140px; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__pagenation {\n      display: none; } }\n  .CG2-articleHeader__pagenation ul {\n    list-style: none;\n    padding: 0;\n    margin: 0; }\n  .CG2-articleHeader__pagenation li {\n    vertical-align: middle;\n    box-sizing: border-box;\n    display: inline-block;\n    margin: 0; }\n    .CG2-articleHeader__pagenation li a {\n      color: inherit;\n      font-size: 14px;\n      line-height: 1.2;\n      text-decoration: none;\n      position: relative;\n      display: inline-block;\n      padding: 6px 8px;\n      border: 1px solid #fff;\n      border-radius: 2px;\n      background: rgba(255, 255, 255, 0);\n      transition: all .3s; }\n      @media screen and (max-width: 767px) {\n        .CG2-articleHeader__pagenation li a {\n          font-size: 12px;\n          padding: 4px 6px; } }\n      .CG2-articleHeader__pagenation li a:hover, .CG2-articleHeader__pagenation li a:focus {\n        background: rgba(255, 255, 255, 0.2); }\n      .CG2-articleHeader__pagenation li a:before {\n        position: absolute;\n        top: 50%;\n        transition: all .2s; }\n    .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev {\n      float: left; }\n      .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev a {\n        padding-right: 12px;\n        padding-left: calc( 1.2em + 8px); }\n        .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev a:before {\n          content: \"\";\n          line-height: 0;\n          left: 8px; }\n        .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev a:hover:before, .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev a:focus:before {\n          left: 5px; }\n    .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext {\n      float: right; }\n      .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext a {\n        padding-right: calc( 1.2em + 8px);\n        padding-left: 12px; }\n        .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext a:before {\n          content: \"\";\n          line-height: 0;\n          right: 8px; }\n        .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext a:hover:before, .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext a:focus:before {\n          right: 5px; }\n\n@media screen and (max-width: 767px) {\n  .CG2-articleHeader__utils {\n    margin-top: 10px; } }\n\n.CG2-articleHeader__utils ul {\n  font-size: 0;\n  list-style: none;\n  padding: 0;\n  margin: 0; }\n\n.CG2-articleHeader__utils li {\n  font-size: 1rem;\n  display: inline-block;\n  margin: 0 10px 10px 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleHeader__utils li {\n      margin: 0 5px 5px 0; } }\n\n.CG2-articleHeader__bg {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: -10px;\n  right: -10px;\n  bottom: -10px;\n  left: -10px;\n  background-position: 50% 50%;\n  background-size: cover;\n  transform: scale(1.2, 1.2);\n  opacity: .64; }\n\n@media print {\n  .CG2-articleHeader {\n    color: #000;\n    background: #fff;\n    border-bottom: 1px solid #000; }\n  .CG2-articleHeader__inner {\n    width: auto;\n    padding: 20px 190px; }\n  .CG2-articleHeader__pagenation {\n    display: none; }\n  .CG2-articleHeader__bg {\n    display: none; } }\n\n/* ==========================================================================\n   CG2-inAppNotificationBar\n   ========================================================================== */\n/*\n---\nname: inAppNotificationBar\ncategory:\n  - Templates\ntag:\n  - app-item\ntemplateItem:\n  - true\n---\n\nアプリケーション内のメッセージを表示させたいときに使用。\n\n## メッセージのみ\n\n```html\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--level2\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    ログアウトしました\n  </div>\n</div>\n```\n\n## メッセージとアクション\n\nリンクなどの動線を入れたい場合は、`CG2-inAppNotificationBar--withAction`を付与する。\n\n```html\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--withAction\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    <span class=\"CG2-icon-exclamation-circle\"></span>\n    現在、未購読状態です\n  </div>\n  <div class=\"CG2-inAppNotificationBar__action\">\n    <a class=\"CG2-transparentButton\" href=\"#\">設定へ</a>\n  </div>\n</div>\n```\n\n## カラーバリエーション\n\n```html\n<div class=\"CG2-inAppNotificationBar\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    レベルなし\n  </div>\n</div>\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--level1\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    レベル1\n  </div>\n</div>\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--level2\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    レベル2\n  </div>\n</div>\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--level3\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    レベル3\n  </div>\n</div>\n```\n\n*/\n.CG2-inAppNotificationBar {\n  color: #FFF;\n  font-size: 16px;\n  font-weight: bold;\n  padding: 16px;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  background-color: #bbb; }\n  .CG2-inAppNotificationBar.CG2-inAppNotificationBar--level1 {\n    background-color: #F03C3C; }\n  .CG2-inAppNotificationBar.CG2-inAppNotificationBar--level2 {\n    background-color: #f0b428; }\n  .CG2-inAppNotificationBar.CG2-inAppNotificationBar--level3 {\n    background-color: #14C850; }\n  .CG2-inAppNotificationBar.CG2-inAppNotificationBar--withAction {\n    justify-content: space-between; }\n  @media screen and (max-width: 639px) {\n    .CG2-inAppNotificationBar {\n      font-size: 14px;\n      padding: 10px; } }\n\n.CG2-inAppNotificationBar__message span[class^=\"CG2-icon-\"] {\n  font-size: 28px;\n  margin-right: 10px; }\n  @media screen and (max-width: 639px) {\n    .CG2-inAppNotificationBar__message span[class^=\"CG2-icon-\"] {\n      font-size: 20px;\n      margin-right: 5px; } }\n\n/* ==========================================================================\n   CG2-articleNotice\n   ========================================================================== */\n/*\n---\nname: articleNotice\ncategory:\n  - Templates\ntag:\n  - app-item-article\ntemplateItem:\n  - true\n---\n\n```html\n<div class=\"CG2-articleNotice CG2-articleNotice--level1\">\n  <div class=\"CG2-articleNotice__head\">\n    <span class=\"CG2-icon-exclamation-triangle\"></span>\n    多くが古い情報の可能性があり、現在は推奨されない記事です\n  </div>\n</div>\n```\n\n```html\n<div class=\"CG2-articleNotice CG2-articleNotice--level2\">\n  <div class=\"CG2-articleNotice__head\">\n    <span class=\"CG2-icon-exclamation-circle\"></span>\n    一部古い情報の可能性があります\n  </div>\n</div>\n```\n\n```html\n<div class=\"CG2-articleNotice CG2-articleNotice--level3\">\n  <div class=\"CG2-articleNotice__head\">\n    古い記事ですが、現在も使える情報です\n  </div>\n</div>\n```\n\n## リンクあり\n\n```html\n<div class=\"CG2-articleNotice CG2-articleNotice--level2\">\n  <div class=\"CG2-articleNotice__head\">\n    <span class=\"CG2-icon-exclamation-circle\"></span>\n    新しいバージョンに対応した<a href=\"\">シリーズ</a>があります。\n  </div>\n</div>\n```\n\n*/\n.CG2-articleNotice {\n  color: #fff;\n  font-size: 16px;\n  font-weight: bold;\n  line-height: 1.4;\n  text-align: center;\n  padding: 16px;\n  background-color: #14c850; }\n  .CG2-articleNotice.CG2-articleNotice--level1 {\n    background-color: #f03c3c; }\n  .CG2-articleNotice.CG2-articleNotice--level2 {\n    background-color: #f0b428; }\n  .CG2-articleNotice a {\n    color: inherit; }\n  @media screen and (max-width: 639px) {\n    .CG2-articleNotice {\n      font-size: 14px; } }\n\n.CG2-articleNotice__head span[class^=\"CG2-icon-\"] {\n  font-size: 28px;\n  line-height: 0;\n  margin-right: 10px; }\n  @media screen and (max-width: 639px) {\n    .CG2-articleNotice__head span[class^=\"CG2-icon-\"] {\n      font-size: 20px;\n      margin-right: 5px; } }\n\n/* ==========================================================================\n   CG2-narrowLayout\n   ========================================================================== */\n/*\n---\nname: narrowLayout\ncategory:\n  - Templates\ntag:\n  - app-item-article\ntemplateItem:\n  - true\n---\n\n記事ページ用のレイアウト\nサイドバーに `.CG2-articleSeriesNav` 利用する\n\n```html\n<div class=\"CG2-narrowLayout\">\n  <div class=\"CG2-narrowLayout__main\">\n    目次など\n  </div>\n  <div class=\"CG2-narrowLayout__sub\">\n\n    <div class=\"CG2-articleSeriesNav\">\n      <div class=\"CG2-articleSeriesNav__inner\">\n        <ul>\n          <li><a href=\"#\">第1回「 仕様を知る 1 」</a></li>\n          <li><a href=\"#\">第2回「 仕様を知る 2 」</a></li>\n          <li><a href=\"#\">第12回「 仕様を知る 2.4 」</a></li>\n        </ul>\n      </div>\n    </div>\n\n  </div>\n  <div class=\"CG2-narrowLayout__main\">\n    本文領域\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum est vitae risus congue, quis cursus lectus mattis. Maecenas mattis tempus mauris ultrices viverra. Donec eget justo ante. Aliquam accumsan leo egestas venenatis faucibus. Aliquam sed massa hendrerit, suscipit ipsum vel, lobortis quam. Aliquam mauris elit, eleifend eu porta vel, sodales at augue. Praesent cursus, nulla sit amet suscipit fringilla, nibh velit efficitur ligula, a feugiat turpis massa ac nunc. Cras consequat nibh in nulla faucibus eleifend.\n    Ut mattis velit dui, sed tristique felis laoreet vitae. Donec placerat ante vel elit pellentesque, sit amet vulputate nisi consequat. Pellentesque efficitur euismod commodo. Vivamus ac maximus eros, sit amet porttitor libero. Praesent eu vehicula tortor. Vestibulum eu magna finibus, viverra diam nec, pulvinar velit. Praesent in mi sit amet nisi suscipit dictum. Proin sit amet diam tincidunt, tristique tortor ac, luctus est. Vivamus venenatis orci non lacinia ultricies. Duis posuere sit amet elit nec pretium. Suspendisse eget efficitur arcu. Proin porttitor turpis ipsum, ac venenatis odio fermentum ut.\n  </div>\n</div>\n```\n\n*/\n.CG2-narrowLayout {\n  max-width: 1016px;\n  margin: 0 auto; }\n  .CG2-narrowLayout:before, .CG2-narrowLayout:after {\n    content: \"\";\n    display: table; }\n  .CG2-narrowLayout:after {\n    clear: both; }\n  @media screen and (max-width: 979px) {\n    .CG2-narrowLayout {\n      max-width: 636px;\n      padding: 0 10px; } }\n\n.CG2-narrowLayout__main {\n  float: right;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 190px; }\n  @media screen and (max-width: 979px) {\n    .CG2-narrowLayout__main {\n      float: none;\n      padding: 0; } }\n\n.CG2-narrowLayout__sub {\n  float: left;\n  box-sizing: border-box;\n  width: 150px;\n  margin-right: -100%; }\n  @media screen and (max-width: 979px) {\n    .CG2-narrowLayout__sub {\n      float: none;\n      width: auto;\n      margin-right: 0; } }\n\n@media print {\n  .CG2-narrowLayout {\n    display: block;\n    width: auto; }\n  .CG2-narrowLayout__main {\n    float: none;\n    width: auto;\n    padding: 0 20px; }\n  .CG2-narrowLayout__sub {\n    display: none; } }\n\n/* ==========================================================================\n   CG2-articleBeforeLogin\n   ========================================================================== */\n/*\n---\nname: articleBeforeLogin\ncategory:\n  - Blocks/app\ntag:\n  - app-item-article\n---\n\n```html\n<div class=\"CG2-articleBeforeLogin\">\n  <div class=\"CG2-articleBeforeLogin__lead\">この記事を読むには<br>購読の手続きが必要です</div>\n  <div class=\"CG2-articleBeforeLogin__sub\"></div>\n  <div class=\"CG2-articleBeforeLogin__buttonContainer\">\n    <ul>\n      <li><a class=\"CG2-button CG2-button--primary\" href=\"#\">購読の手続きへ</a></li>\n      <li><a class=\"CG2-button\" href=\"#\">購読済みの方はログイン</a></li>\n    </ul>\n  </div>\n</div>\n```\n\n*/\n.CG2-articleBeforeLogin {\n  margin: 80px 0; }\n  @media screen and (max-width: 639px) {\n    .CG2-articleBeforeLogin {\n      margin: 40px 0; } }\n  .CG2-articleBeforeLogin > *:first-child {\n    margin-top: 0; }\n  .CG2-articleBeforeLogin > *:last-child {\n    margin-bottom: 0; }\n\n.CG2-articleBeforeLogin__lead {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-size: 32px;\n  text-align: center;\n  margin: 40px 0; }\n  @media screen and (max-width: 639px) {\n    .CG2-articleBeforeLogin__lead {\n      font-size: 24px;\n      margin: 20px 0; } }\n\n.CG2-articleBeforeLogin__sub {\n  text-align: center;\n  margin: 40px 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleBeforeLogin__sub {\n      font-size: 16px; } }\n  @media screen and (max-width: 639px) {\n    .CG2-articleBeforeLogin__sub {\n      font-size: 14px;\n      margin: 20px 0; } }\n\n.CG2-articleBeforeLogin__buttonContainer {\n  margin: 40px 0; }\n  @media screen and (max-width: 639px) {\n    .CG2-articleBeforeLogin__buttonContainer {\n      margin: 40px 0; } }\n  .CG2-articleBeforeLogin__buttonContainer ul {\n    font-size: 0;\n    list-style: none;\n    text-align: center;\n    padding: 0;\n    margin: 0; }\n  .CG2-articleBeforeLogin__buttonContainer li {\n    font-size: 1rem;\n    display: inline-block;\n    margin: 0 8px 5px; }\n    @media screen and (max-width: 639px) {\n      .CG2-articleBeforeLogin__buttonContainer li {\n        display: block; } }\n  @media screen and (max-width: 639px) {\n    .CG2-articleBeforeLogin__buttonContainer li {\n      margin: 0 0 5px; } }\n  .CG2-articleBeforeLogin__buttonContainer .CG2-button {\n    font-size: 16px; }\n    @media screen and (max-width: 639px) {\n      .CG2-articleBeforeLogin__buttonContainer .CG2-button {\n        text-align: center;\n        padding: .4em 10px;\n        width: 100%; } }\n\n/* ==========================================================================\n   CG2-articleTOC\n   ========================================================================== */\n/*\n---\nname: articleTOC\ncategory:\n  - Blocks/app\ntag:\n  - app-item-article\n---\n\n```html\n<section class=\"CG2-articleTOC\">\n  <header class=\"CG2-articleTOC__header\">\n    <h1>目次</h1>\n  </header>\n  <div class=\"CG2-articleTOC__body\">\n    <div class=\"CG2-articleTOC__list\">\n      <ul>\n        <li><a href=\"#\">はじめに</a></li>\n        <li><a href=\"#\">flex-growとflex-shrink</a></li>\n        <li><a href=\"#\">利用可能な余白を計算する</a></li>\n        <li><a href=\"#\">まとめ</a></li>\n      </ul>\n    </div>\n  </div>\n</section>\n```\n\n*/\nsection.CG2-articleTOC {\n  box-sizing: border-box;\n  margin: 40px auto; }\n  @media screen and (max-width: 767px) {\n    section.CG2-articleTOC {\n      margin: 20px auto; } }\n\nheader.CG2-articleTOC__header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #dbdbdb;\n  margin-bottom: 1em; }\n  header.CG2-articleTOC__header h1 {\n    font-size: 28px;\n    font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n    font-feature-settings: \"palt\";\n    font-weight: normal;\n    min-height: 44px;\n    margin: 0; }\n  @media screen and (max-width: 767px) {\n    header.CG2-articleTOC__header {\n      padding: 0 10px .3em;\n      margin-bottom: 20px; }\n      header.CG2-articleTOC__header h1 {\n        font-size: 18px;\n        min-height: 0; } }\n\n.CG2-articleTOC__body {\n  display: table;\n  width: 100%; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleTOC__body {\n      display: block;\n      width: auto;\n      padding: 0 10px; } }\n\n.CG2-articleTOC__list {\n  vertical-align: top;\n  display: table-cell; }\n  @media screen and (max-width: 767px) {\n    .CG2-articleTOC__list {\n      font-size: 14px;\n      display: block;\n      margin: 10px 0; } }\n  .CG2-articleTOC__list ul {\n    list-style: none;\n    padding: 0;\n    margin: auto; }\n  .CG2-articleTOC__list li {\n    margin: .8em 0 0; }\n    .CG2-articleTOC__list li:first-child {\n      margin-top: 0; }\n    @media screen and (max-width: 767px) {\n      .CG2-articleTOC__list li {\n        margin-top: .4em; } }\n  .CG2-articleTOC__list a {\n    color: inherit;\n    text-decoration: none; }\n    .CG2-articleTOC__list a::before {\n      content: \"\";\n      margin: 0 .4em 0 0;\n      transition: transform 0.4s cubic-bezier(0.3, 2, 0.6, 1); }\n    .CG2-articleTOC__list a:hover::before {\n      transform: translateY(2px);\n      transition-duration: .4s; }\n\n@media print {\n  .CG2-articleTOC__body {\n    display: block;\n    width: auto; }\n  .CG2-articleTOC__list {\n    font-size: 18px;\n    display: block; } }\n\n/* ==========================================================================\n   CG2-articleSeriesNav\n   ========================================================================== */\n/*\n---\nname: articleSeriesNav\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n記事ページ `.CG2-narrowLayout` のサイドバー内で利用する\n\n```html\n<div class=\"CG2-articleSeriesNav\">\n  <div class=\"CG2-articleSeriesNav__inner\">\n    <ul>\n      <li><a href=\"#\">第1回「 仕様を知る 1 」</a></li>\n      <li class=\"CG2-articleSeriesNav__item--current\"><a href=\"#\">第2回「 仕様を知る 2 」</a></li>\n      <li><a href=\"#\">第3回「 Flexboxを実践する 1 」</a></li>\n      <li><a href=\"#\">第4回「 Flexboxを実践する 2 」</a></li>\n      <li><a href=\"#\">５こまではいる、長いと切れる長いと切れる長いと切れる</a></li>\n    </ul>\n    <ul>\n      <li><a href=\"#\">６こ目は次のUL</a></li>\n      <li><a href=\"#\">７こ目</a></li>\n      <li><a href=\"#\">８こ目</a></li>\n      <li><a href=\"#\">９こ目</a></li>\n      <li><a href=\"#\">１０こ目</a></li>\n    </ul>\n  </div>\n</div>\n```\n\n*/\n.CG2-articleSeriesNav {\n  font-family: \"codegrid-num\", \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif;\n  padding-top: 92px;\n  letter-spacing: 0.2em;\n  box-sizing: border-box;\n  margin: 0 auto; }\n  @media screen and (max-width: 979px) {\n    .CG2-articleSeriesNav {\n      padding-top: 0;\n      letter-spacing: 0;\n      margin: 60px 0; } }\n  @media screen and (max-width: 767px) {\n    .CG2-articleSeriesNav {\n      display: none; } }\n\n.CG2-articleSeriesNav__inner {\n  line-height: 1.6;\n  width: 150px;\n  padding-top: 40px;\n  border-top: 1px solid #dbdbdb; }\n  @media screen and (max-width: 979px) {\n    .CG2-articleSeriesNav__inner {\n      width: auto;\n      padding-top: 0;\n      border-top: none; } }\n  .CG2-articleSeriesNav__inner ul {\n    -webkit-writing-mode: vertical-rl;\n    writing-mode: tb-rl;\n    writing-mode: vertical-rl;\n    list-style: none;\n    width: 8em;\n    padding: 0;\n    margin: 0 auto 20px; }\n    @media screen and (max-width: 979px) {\n      .CG2-articleSeriesNav__inner ul {\n        -webkit-writing-mode: horizontal-tb;\n        writing-mode: lr-tb;\n        writing-mode: horizontal-tb;\n        width: auto;\n        margin: 0; } }\n  .CG2-articleSeriesNav__inner li {\n    line-height: 1;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 19.9%;\n    max-height: 500px;\n    padding: 0;\n    margin: 0; }\n    @media screen and (max-width: 979px) {\n      .CG2-articleSeriesNav__inner li {\n        white-space: normal;\n        overflow: visible;\n        display: block;\n        width: auto;\n        max-height: none;\n        margin: 6px 0; } }\n    .CG2-articleSeriesNav__inner li.CG2-articleSeriesNav__item--current a {\n      color: #fff;\n      background: #000; }\n  .CG2-articleSeriesNav__inner abbr {\n    -webkit-text-orientation: upright;\n    text-orientation: upright; }\n    @media screen and (max-width: 979px) {\n      .CG2-articleSeriesNav__inner abbr {\n        -webkit-text-orientation: mixed;\n        text-orientation: mixed; } }\n  .CG2-articleSeriesNav__inner a {\n    color: inherit;\n    text-decoration: none;\n    overflow-y: hidden;\n    text-overflow: ellipsis;\n    display: inline-block;\n    max-height: 100%;\n    padding: 0 2px;\n    transition: .3s all; }\n    @media screen and (max-width: 979px) {\n      .CG2-articleSeriesNav__inner a {\n        display: block;\n        overflow-y: visible;\n        padding: 4px; } }\n    .CG2-articleSeriesNav__inner a:hover, .CG2-articleSeriesNav__inner a:focus {\n      background: #eee;\n      transition: none; }\n\n/* ==========================================================================\n   CG2-article\n   ========================================================================== */\n/*\n---\nname: article\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n記事本文、markdownから変換されることを前提\n\n```html\n<article class=\"CG2-article\">\n\n  <h2>h2みだし</h2>\n\n  <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n\n  <h3>h3みだし</h3>\n\n  <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n\n  <h4>h4みだし</h4>\n\n  <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n\n  <ul>\n    <li>リストりすと</li>\n    <li>リストりすと</li>\n  </ul>\n\n  <ol>\n    <li>リストりすと</li>\n    <li>リストりすと</li>\n  </ol>\n\n  <table>\n    <tbody>\n      <tr>\n        <th>見出しセル</th>\n        <th>見出しセル</th>\n        <th>見出しセル</th>\n      </tr>\n      <tr>\n        <td>データセル</td>\n        <td>データセル</td>\n        <td>データセル</td>\n      </tr>\n      <tr>\n        <td>データセル</td>\n        <td>データセル</td>\n        <td>データセル</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <table>\n    <tbody>\n      <tr>\n        <th>見出しセル</th>\n        <td>データセル</td>\n        <td>データセル</td>\n      </tr>\n      <tr>\n        <th>見出しセル</th>\n        <td>データセル</td>\n        <td>データセル</td>\n      </tr>\n    </tbody>\n  </table>\n\n</article>\n```\n\n*/\narticle.CG2-article {\n  font-size: 16px;\n  line-height: 1.8;\n  border-bottom: 1px solid #dbdbdb;\n  padding-bottom: 30px;\n  margin-bottom: 20px;\n  word-wrap: break-word; }\n  @media screen and (max-width: 767px) {\n    article.CG2-article {\n      line-height: 2;\n      padding: 0 10px; } }\n  article.CG2-article > h2 {\n    font-size: 28px;\n    font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n    font-feature-settings: \"palt\";\n    font-weight: normal;\n    line-height: 1.2;\n    padding-bottom: .5em;\n    border-bottom: 1px solid #dbdbdb;\n    margin: 2.5em 0 1.5em; }\n    article.CG2-article > h2:first-child {\n      margin-top: 0; }\n    @media screen and (max-width: 767px) {\n      article.CG2-article > h2 {\n        font-size: 20px;\n        padding: 0 10px 10px;\n        margin: 20px -10px; } }\n  article.CG2-article > h3 {\n    font-size: 20px;\n    font-weight: normal;\n    margin: 2em 0 .5em; }\n    @media screen and (max-width: 767px) {\n      article.CG2-article > h3 {\n        font-size: 18px;\n        margin-top: 1.6em; } }\n  article.CG2-article > h4 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 2em 0 .5em; }\n    @media screen and (max-width: 767px) {\n      article.CG2-article > h4 {\n        font-size: 14px;\n        margin-top: 1.6em; } }\n  article.CG2-article p {\n    margin: 2em 0; }\n    @media screen and (max-width: 767px) {\n      article.CG2-article p {\n        margin: 1.6em 0; } }\n  article.CG2-article ul {\n    margin: 0;\n    padding: 0 0 0 20px; }\n  article.CG2-article ol {\n    margin: 0;\n    padding: 0 0 0 30px; }\n  article.CG2-article li {\n    margin: 1em 0; }\n    @media screen and (max-width: 767px) {\n      article.CG2-article li {\n        margin: .5em 0; } }\n  article.CG2-article table {\n    margin: 2em 0; }\n    article.CG2-article table th, article.CG2-article table td {\n      word-break: break-all;\n      padding: .3em 10px;\n      border: 1px solid #dbdbdb; }\n      article.CG2-article table th:first-child, article.CG2-article table td:first-child {\n        word-wrap: normal; }\n        @media screen and (max-width: 767px) {\n          article.CG2-article table th:first-child, article.CG2-article table td:first-child {\n            word-break: break-all; } }\n    article.CG2-article table th {\n      background: #eee; }\n    article.CG2-article table td {\n      background: #fff; }\n  article.CG2-article figure {\n    margin: 2em 0; }\n    article.CG2-article figure img {\n      box-sizing: border-box;\n      display: block;\n      border: 1px solid #dbdbdb; }\n    @media screen and (max-width: 767px) {\n      article.CG2-article figure {\n        margin: 1.6em -10px; }\n        article.CG2-article figure img {\n          max-width: 100%;\n          height: auto; } }\n  article.CG2-article pre, article.CG2-article code {\n    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n    background-color: #f5f2f0; }\n  article.CG2-article pre {\n    line-height: 1.6;\n    margin: 0.5em 0;\n    padding: 1em;\n    overflow: auto; }\n    article.CG2-article pre code {\n      padding: 0;\n      display: block; }\n  article.CG2-article code {\n    padding: 2px; }\n  article.CG2-article section.CG2-article__rel {\n    font-size: 14px;\n    line-height: 1.6;\n    border: 1px solid #dbdbdb;\n    padding: 19px; }\n    @media screen and (max-width: 767px) {\n      article.CG2-article section.CG2-article__rel {\n        padding: 14px; } }\n    article.CG2-article section.CG2-article__rel h1 {\n      font-size: 14px;\n      font-weight: bold;\n      margin: 0; }\n      @media screen and (max-width: 767px) {\n        article.CG2-article section.CG2-article__rel h1 {\n          font-size: 12px;\n          margin-bottom: 3px; } }\n    article.CG2-article section.CG2-article__rel p {\n      margin: 1em 0; }\n    article.CG2-article section.CG2-article__rel ul {\n      margin: 0;\n      padding: 0 0 0 20px; }\n    article.CG2-article section.CG2-article__rel li {\n      margin: 0; }\n    article.CG2-article section.CG2-article__rel > *:first-child {\n      margin-top: 0; }\n    article.CG2-article section.CG2-article__rel > *:last-child {\n      margin-bottom: 0; }\n\n@media print {\n  article.CG2-article {\n    font-size: 18px;\n    line-height: 1.6; }\n    article.CG2-article p {\n      margin: 1em 0; }\n    article.CG2-article table {\n      margin: 2em 0; }\n      article.CG2-article table th, article.CG2-article table td {\n        padding: .3em 10px;\n        border: 1px solid #dbdbdb; }\n      article.CG2-article table th {\n        background: #eee; }\n    article.CG2-article figure {\n      margin: 2em 0; }\n      article.CG2-article figure img {\n        box-sizing: border-box;\n        display: block;\n        max-width: 100%;\n        width: auto;\n        height: auto;\n        border: 1px solid #dbdbdb; }\n    article.CG2-article code {\n      padding: 2px;\n      background: #f5f2f0; }\n    article.CG2-article section.CG2-article__rel {\n      font-size: 14px;\n      line-height: 1.6;\n      border: 1px solid #dbdbdb;\n      padding: 19px; }\n      article.CG2-article section.CG2-article__rel h1 {\n        font-size: 14px;\n        font-weight: bold;\n        margin: 0; }\n      article.CG2-article section.CG2-article__rel ul {\n        margin: 0;\n        padding: 0 0 0 20px; }\n      article.CG2-article section.CG2-article__rel li {\n        margin: 0; } }\n\n/* 旧Jade 用\n   ========================================================================== */\narticle.CG2-article dl {\n  margin: 2em 0; }\n\narticle.CG2-article dt {\n  font-weight: bold; }\n\narticle.CG2-article dd {\n  margin: 0 0 0.8em 2em; }\n\narticle.CG2-article blockquote {\n  color: #777;\n  padding: 0 15px;\n  border-left: 4px solid #eee;\n  margin: 2em 0; }\n\narticle.CG2-article pre.code {\n  font-family: Consolas,Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  padding: 1em;\n  border: 1px solid #dbdbdb;\n  background: #f5f2f0; }\n\n/* ==========================================================================\n   ImgBox\n   ========================================================================== */\n/*\n---\nname: ImgBox\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<article class=\"CG2-article\">\n\n  <div class=\"ImgBox\">\n    <h1>ラベル</h1>\n    <p>キャプション</p>\n    <p><img src=\"__dummy__1000x200\"></p>\n  </div>\n\n</article>\n```\n*/\narticle.CG2-article .ImgBox {\n  margin: 2em 0; }\n\narticle.CG2-article .ImgBox h1,\narticle.CG2-article .ImgBox h2,\narticle.CG2-article .ImgBox h3,\narticle.CG2-article .ImgBox h4,\narticle.CG2-article .ImgBox-title {\n  font-size: 100%;\n  font-weight: bold;\n  border-bottom: 1px dotted #ccc;\n  margin: 0.5em 0 3px; }\n\narticle.CG2-article .ImgBox p,\narticle.CG2-article .ImgBox-comment {\n  color: #777;\n  font-size: 14px;\n  line-height: 1.8;\n  margin: 0; }\n\narticle.CG2-article .ImgBox-body {\n  margin: 3px 0; }\n\narticle.CG2-article .ImgBox img {\n  box-sizing: border-box;\n  display: block;\n  max-width: 100%;\n  width: auto;\n  height: auto;\n  border: 1px solid #ccc;\n  margin: 5px 0; }\n\n/* ==========================================================================\n   Column\n   ========================================================================== */\n/*\n---\nname: Column\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<article class=\"CG2-article\">\n\n  <div class=\"Column\">\n    <h1>コラムタイトル</h1>\n    <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n    <p><img src=\"__dummy__1000x200\"></p>\n    <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n  </div>\n\n</article>\n```\n*/\narticle.CG2-article .Column {\n  font-size: 14px;\n  line-height: 1.6;\n  border: 1px solid #dbdbdb;\n  padding: 19px; }\n  @media screen and (max-width: 767px) {\n    article.CG2-article .Column {\n      padding: 14px; } }\n  article.CG2-article .Column > p {\n    margin: 1em 0; }\n  article.CG2-article .Column > ul {\n    margin: 0;\n    padding: 0 0 0 20px; }\n    article.CG2-article .Column > ul li {\n      margin: 0; }\n  article.CG2-article .Column img {\n    max-width: 100%; }\n  article.CG2-article .Column > :last-child {\n    margin-bottom: 0; }\n\narticle.CG2-article .Column h1,\narticle.CG2-article .Column h2,\narticle.CG2-article .Column h3,\narticle.CG2-article .Column h4,\narticle.CG2-article .Column-title {\n  font-size: 14px;\n  font-weight: bold;\n  margin: 0; }\n  @media screen and (max-width: 767px) {\n    article.CG2-article .Column h1,\n    article.CG2-article .Column h2,\n    article.CG2-article .Column h3,\n    article.CG2-article .Column h4,\n    article.CG2-article .Column-title {\n      font-size: 12px;\n      margin-bottom: 3px; } }\n\narticle.CG2-article .Column-body > *:first-child {\n  margin-top: 0; }\n\narticle.CG2-article .Column-body > *:last-child {\n  margin-bottom: 0; }\n\narticle.CG2-article pre + .Column {\n  margin-top: 2em; }\n\n/* ==========================================================================\n   Note\n   ========================================================================== */\n/*\n---\nname: Note\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<article class=\"CG2-article\">\n\n  <div class=\"Note\">\n    <h1>*注：Autoprefixer</h1>\n    <p>Autoprefixerに関しては、次の記事を参照してください。<br><a href=\"\">「ビルドツールアラカルト」</a>シリーズ</p>\n  </div>\n\n</article>\n```\n*/\narticle.CG2-article .Note {\n  color: #777;\n  font-size: 14px;\n  margin: 2em 0; }\n  @media screen and (max-width: 767px) {\n    article.CG2-article .Note {\n      font-size: 10px;\n      margin: 1.6em 0; } }\n  article.CG2-article .Note p {\n    margin: 0; }\n\narticle.CG2-article .Note h1,\narticle.CG2-article .Note h2,\narticle.CG2-article .Note h3,\narticle.CG2-article .Note h4,\narticle.CG2-article .Note-title {\n  font-size: 100%;\n  font-weight: bold;\n  margin: 0; }\n\narticle.CG2-article .Note-body > *:first-child {\n  margin-top: 0; }\n\narticle.CG2-article .Note-body > *:last-child {\n  margin-bottom: 0; }\n\narticle.CG2-article aside {\n  color: #777;\n  font-size: 14px;\n  margin: 2em 0; }\n  @media screen and (max-width: 767px) {\n    article.CG2-article aside {\n      font-size: 10px;\n      margin: 1.6em 0; } }\n  article.CG2-article aside h1 {\n    font-size: 100%;\n    font-weight: bold;\n    margin: 0; }\n  article.CG2-article aside p {\n    margin: 0; }\n  article.CG2-article aside > *:first-child {\n    margin-top: 0; }\n  article.CG2-article aside > *:last-child {\n    margin-bottom: 0; }\n\n/* ==========================================================================\n   CG2-articlePagination\n   ========================================================================== */\n/*\n---\nname: articlePagination\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n```html\n<div class=\"CG2-articlePagination\">\n  <ul>\n    <li class=\"CG2-articlePagination__prev\"><a href=\"#\">第1回 仕様を知る 1</a></li>\n    <li class=\"CG2-articlePagination__next\"><a href=\"#\">第3回 Flexboxを実践する 1</a></li>\n  </ul>\n</div>\n```\n\n*/\n.CG2-articlePagination {\n  font-size: 14px;\n  margin: 0 0 60px; }\n  @media screen and (max-width: 767px) {\n    .CG2-articlePagination {\n      margin-bottom: 30px; } }\n  .CG2-articlePagination ul {\n    list-style: none;\n    display: table;\n    width: 100%;\n    padding: 0;\n    margin: 0; }\n  .CG2-articlePagination li {\n    vertical-align: middle;\n    position: relative;\n    box-sizing: border-box;\n    display: table-cell;\n    width: 50%; }\n    @media screen and (max-width: 639px) {\n      .CG2-articlePagination li {\n        display: block;\n        width: auto; } }\n    .CG2-articlePagination li.CG2-articlePagination__prev a:before {\n      content: \"\"; }\n    .CG2-articlePagination li.CG2-articlePagination__next a:before {\n      content: \"\"; }\n    .CG2-articlePagination li.CG2-articlePagination__prev a:before,\n    .CG2-articlePagination li.CG2-articlePagination__next a:before {\n      line-height: 0;\n      position: absolute;\n      top: 50%; }\n    @media screen and (min-width: 639px) {\n      .CG2-articlePagination li.CG2-articlePagination__prev {\n        padding: 0 .5em 0 1.2em; }\n        .CG2-articlePagination li.CG2-articlePagination__prev a {\n          margin-left: -1.2em;\n          padding-left: 1.2em; }\n          .CG2-articlePagination li.CG2-articlePagination__prev a:before {\n            left: 0; }\n          .CG2-articlePagination li.CG2-articlePagination__prev a:hover:before, .CG2-articlePagination li.CG2-articlePagination__prev a:focus:before {\n            left: -3px; }\n      .CG2-articlePagination li.CG2-articlePagination__next {\n        text-align: right;\n        padding: 0 1.2em 0 .5em; }\n        .CG2-articlePagination li.CG2-articlePagination__next a {\n          margin-right: -1.2em;\n          padding-right: 1.2em; }\n          .CG2-articlePagination li.CG2-articlePagination__next a:before {\n            right: 0; }\n          .CG2-articlePagination li.CG2-articlePagination__next a:hover:before, .CG2-articlePagination li.CG2-articlePagination__next a:focus:before {\n            right: -3px; } }\n    @media screen and (max-width: 639px) {\n      .CG2-articlePagination li {\n        padding-left: 1.2em; }\n        .CG2-articlePagination li a {\n          padding-left: 1.2em;\n          margin-left: -1.2em; }\n          .CG2-articlePagination li a:before {\n            left: 0; } }\n  .CG2-articlePagination a {\n    color: inherit;\n    text-decoration: none;\n    text-align: left;\n    display: inline-block; }\n    .CG2-articlePagination a:after, .CG2-articlePagination a:before {\n      transition: all .2s; }\n\n@media print {\n  .CG2-articlePagination {\n    display: none; } }\n\n/* ==========================================================================\n   CG2-articleUtil\n   ========================================================================== */\n/*\n---\nname: articleUtil\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n```html\n<div class=\"CG2-articleUtil\">\n  <div class=\"CG2-articleUtil__socialItems\">\n    <div class=\"CG2-articleUtil__socialItem CG2-articleUtil__socialItem--twitter\">\n      <a href=\"https://twitter.com/share\" data-lang=\"en\" data-url=\"\" data-text=\"シリーズ - タイトル\" data-hashtags=\"codegrid\" class=\"twitter-share-button\">Tweet</a>\n    </div>\n    <div class=\"CG2-articleUtil__socialItem CG2-articleUtil__socialItem--facebook\">\n      <iframe src=\"//www.facebook.com/plugins/like.php?href=&amp;send=false&amp;layout=standard&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=68\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; height:68px;\" allowTransparency=\"true\"></iframe>\n    </div>\n  </div>\n  <script src=\"https://platform.twitter.com/widgets.js\" async></script>\n</div>\n```\n*/\n.CG2-articleUtil {\n  margin: 20px 0; }\n  .CG2-articleUtil .CG2-articleUtil__socialItems {\n    overflow: hidden; }\n  .CG2-articleUtil .CG2-articleUtil__socialItem {\n    margin-top: 5px; }\n    .CG2-articleUtil .CG2-articleUtil__socialItem iframe {\n      width: 100%;\n      max-width: 100%; }\n\n@media print {\n  .CG2-articleUtil {\n    display: none; } }\n\n/* ==========================================================================\n   CG2-livecode\n   ========================================================================== */\n/*\n---\nname: livecode\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\nソースコードを埋め込むことができる\n\n```html\n<section class=\"CG2-livecode\">\n  <header class=\"CG2-livecode__header\">\n    <div class=\"CG2-livecode__label\">\n      index.html\n    </div>\n    <div class=\"CG2-livecode__nav\">\n      <ul>\n        <li><a href=\"#\">\n          <span class=\"CG2-icon-tool\"></span> 全文選択\n        </a></li>\n        <li><a href=\"#\">\n          <span class=\"CG2-icon-tool\"></span> 新規タブで開く\n        </a></li>\n      </ul>\n    </div>\n  </header>\n  <div class=\"CG2-livecode__body\">\n    <pre class=\"language-markup line-numbers\"><code>&lt;div class=\"flex\"&gt;\n  &lt;div class=\"flex__item-1\"&gt;Item1&lt;/div&gt;\n  &lt;div class=\"flex__item-2\"&gt;Item2&lt;/div&gt;\n  &lt;div class=\"flex__item-3\"&gt;Item3&lt;/div&gt;\n&lt;/div&gt;</code></pre>\n  </div>\n</section>\n\n```\n\n## iframe埋め込み\n\n作ったデモをiframeで埋め込める。\n以下の追加クラスで、高さの指定が可能。\n\n- CG2-livecode__frame--small\n- CG2-livecode__frame--large\n\nなお、iPhoneの場合はiframeが伸びる仕様を回避するため、高さが固定される。\n\n```html\n<section class=\"CG2-livecode\">\n  <h1>埋め込みデモのタイトル</h1>\n  <header class=\"CG2-livecode__header\">\n    <div class=\"CG2-livecode__nav\">\n      <ul>\n        <li><a href=\"#\">\n          ソースコード：flex-basis/2\n        </a></li>\n        <li><a href=\"#\">\n          <span class=\"CG2-icon-tool\"></span> 新規タブで開く\n        </a></li>\n      </ul>\n    </div>\n  </header>\n  <div class=\"CG2-livecode__body\">\n    <iframe src=\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2015-css-flexiblebox/demo/2/flex-basis/1/index.html\"></iframe>\n  </div>\n</section>\n```\n*/\nsection.CG2-livecode {\n  margin: 2em 0; }\n  section.CG2-livecode h1 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 .5em; }\n    @media screen and (max-width: 767px) {\n      section.CG2-livecode h1 {\n        font-size: 14px; } }\n  section.CG2-livecode p {\n    font-size: 12px;\n    margin: 0 0 .5em; }\n\n.CG2-livecode__header {\n  display: table;\n  width: 100%;\n  background: #eee; }\n  .CG2-livecode__header .CG2-livecode__label {\n    vertical-align: middle;\n    display: table-cell;\n    padding: 0 10px; }\n    @media screen and (max-width: 767px) {\n      .CG2-livecode__header .CG2-livecode__label {\n        font-size: 10px;\n        padding: 5px 10px;\n        border-right: 1px solid #dbdbdb; } }\n  .CG2-livecode__header .CG2-livecode__nav {\n    vertical-align: middle;\n    display: table-cell; }\n    @media screen and (max-width: 767px) {\n      .CG2-livecode__header .CG2-livecode__nav {\n        font-size: 10px; } }\n    .CG2-livecode__header .CG2-livecode__nav ul {\n      display: table;\n      padding: 0;\n      margin: 0 0 0 auto; }\n      @media screen and (max-width: 767px) {\n        .CG2-livecode__header .CG2-livecode__nav ul {\n          display: block; } }\n    .CG2-livecode__header .CG2-livecode__nav li {\n      font-size: 10px;\n      font-weight: bold;\n      vertical-align: middle;\n      display: table-cell;\n      padding: 10px;\n      border-left: 1px solid #dbdbdb;\n      margin: 0; }\n      @media screen and (max-width: 767px) {\n        .CG2-livecode__header .CG2-livecode__nav li {\n          display: block;\n          border-left: none;\n          padding: 8px 16px;\n          border-top: 1px solid #dbdbdb; }\n          .CG2-livecode__header .CG2-livecode__nav li:first-child {\n            border-top: none; } }\n    .CG2-livecode__header .CG2-livecode__nav a {\n      color: inherit;\n      text-decoration: none;\n      display: block;\n      padding: 10px;\n      margin: -10px;\n      transition: background-color .2s; }\n      .CG2-livecode__header .CG2-livecode__nav a[data-livecode-play] {\n        position: relative; }\n        .CG2-livecode__header .CG2-livecode__nav a[data-livecode-play]:before {\n          position: absolute;\n          content: 'サンプルを再生する';\n          background: #eee;\n          transition: background-color .2s; }\n          .CG2-livecode.CG2-livecode--isRunning .CG2-livecode__header .CG2-livecode__nav a[data-livecode-play]:before {\n            content: 'サンプルを停止する'; }\n      .CG2-livecode__header .CG2-livecode__nav a:hover, .CG2-livecode__header .CG2-livecode__nav a:hover::before {\n        background-color: #dbdbdb; }\n      .CG2-livecode__header .CG2-livecode__nav a span[class^=\"CG2-icon-\"] {\n        font-size: 20px;\n        position: static;\n        margin: 0 5px 0 0; }\n\n.CG2-livecode__body {\n  -webkit-overflow-scrolling: touch;\n  overflow: auto;\n  position: relative;\n  border: 1px solid #dbdbdb; }\n  .CG2-livecode__body iframe {\n    vertical-align: bottom;\n    resize: vertical;\n    display: block;\n    box-sizing: border-box;\n    width: 100%;\n    max-width: 100%;\n    min-height: 390px;\n    border: none;\n    background: #fff; }\n    .CG2-livecode__body iframe.CG2-livecode__frame--small {\n      min-height: 190px; }\n    .CG2-livecode__body iframe.CG2-livecode__frame--large {\n      min-height: 590px; }\n  .CG2-livecode__body pre[class*=\"language-\"] {\n    margin: 0;\n    resize: vertical; }\n    .CG2-livecode__body pre[class*=\"language-\"] code {\n      padding: 0;\n      background: transparent; }\n\n.CG2-livecode__clickToPlay {\n  overflow: hidden;\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  background: #777;\n  transition: all .3s; }\n  .CG2-livecode.CG2-livecode--isRunning .CG2-livecode__clickToPlay {\n    bottom: 100%; }\n  .CG2-livecode__clickToPlay:after {\n    content: 'クリックして再生する';\n    color: #fff;\n    font-size: 18px;\n    text-align: center;\n    display: block;\n    width: 100%; }\n\n.CG2-livecode__body--inner {\n  height: 40vh; }\n\n/* ==========================================================================\n   CG2-profile\n   ========================================================================== */\n/*\n---\nname: profile\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\nバイオグラフィー自体がメインのコンテンツ用\n\n```html\n<div class=\"CG2-profile\">\n  <div class=\"CG2-profile__image\">\n    <img src=\"__dummy__120x120\" alt=\"\">\n  </div>\n  <div class=\"CG2-profile__main\">\n    <div class=\"CG2-profile__header\">\n      <div class=\"CG2-profile__name\">ピクセル グリオ</div>\n      <div class=\"CG2-profile__title\">フロントエンジニア</div>\n      <div class=\"CG2-profile__links\">\n      <ul>\n        <li><a href=\"#\">Twitter</a></li>\n        <li><a href=\"#\">Website</a></li>\n      </ul>\n    </div>\n    </div>\n    <div class=\"CG2-profile__text\">\n      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>\n    </div>\n  </div>\n</div>\n```\n\n*/\n.CG2-profile {\n  display: table;\n  width: 100%; }\n  @media screen and (max-width: 767px) {\n    .CG2-profile {\n      position: relative;\n      display: block;\n      width: auto;\n      margin: 0 -10px; } }\n\n.CG2-profile__image {\n  vertical-align: top;\n  display: table-cell;\n  width: 120px;\n  padding-right: 40px; }\n  @media screen and (max-width: 767px) {\n    .CG2-profile__image {\n      position: absolute;\n      display: block;\n      width: 80px;\n      padding-right: 0; } }\n  .CG2-profile__image img {\n    display: block; }\n    @media screen and (max-width: 767px) {\n      .CG2-profile__image img {\n        width: 80px;\n        height: 80px; } }\n\n.CG2-profile__main {\n  vertical-align: top;\n  display: table-cell; }\n  @media screen and (max-width: 767px) {\n    .CG2-profile__main {\n      display: block; } }\n\n.CG2-profile__header {\n  margin-bottom: 18px; }\n  @media screen and (max-width: 767px) {\n    .CG2-profile__header {\n      min-height: 80px;\n      padding-left: 100px; } }\n\n.CG2-profile__name {\n  font-size: 22px;\n  line-height: 1.2;\n  margin-bottom: 18px; }\n  @media screen and (max-width: 767px) {\n    .CG2-profile__name {\n      font-size: 16px;\n      margin-bottom: 8px; } }\n\n.CG2-profile__title {\n  font-size: 12px; }\n\n.CG2-profile__links ul {\n  font-size: 0;\n  line-height: 1.2;\n  list-style: none;\n  padding: 0;\n  margin: 0; }\n\n.CG2-profile__links li {\n  font-size: 12px;\n  display: inline-block;\n  border-left: 1px solid #000;\n  padding: 0 8px; }\n  .CG2-profile__links li:first-child {\n    padding-left: 0;\n    border-left: #000; }\n\n.CG2-profile__links a {\n  text-decoration: none; }\n\n.CG2-profile__text {\n  font-size: 16px;\n  line-height: 1.8; }\n  @media screen and (max-width: 767px) {\n    .CG2-profile__text {\n      font-size: 12px;\n      padding-left: 10px;\n      padding-right: 10px; } }\n\n/* ==========================================================================\n   CG2-profileSimple\n   ========================================================================== */\n/*\n---\nname: profileSimple\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用\n\n```html\n<div class=\"CG2-profileSimple\">\n  <div class=\"CG2-profileSimple__image\">\n    <img src=\"__dummy__120x120\" alt=\"\">\n  </div>\n  <div class=\"CG2-profileSimple__main\">\n    <div class=\"CG2-profileSimple__header\">\n      <div class=\"CG2-profileSimple__name\">ピクセル グリオ</div>\n      <div class=\"CG2-profileSimple__title\">フロントエンジニア</div>\n    </div>\n    <div class=\"CG2-profileSimple__text\">\n      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>\n    </div>\n  </div>\n</div>\n```\n\n*/\n.CG2-profileSimple {\n  display: table;\n  margin-top: 20px; }\n  @media screen and (max-width: 767px) {\n    .CG2-profileSimple {\n      margin-top: 10px; } }\n\n.CG2-profileSimple__image {\n  vertical-align: top;\n  display: table-cell;\n  width: 120px;\n  padding-right: 20px; }\n  .CG2-profileSimple__image img {\n    display: block;\n    width: 100%;\n    height: auto; }\n  @media screen and (max-width: 767px) {\n    .CG2-profileSimple__image {\n      width: 60px; } }\n\n.CG2-profileSimple__main {\n  vertical-align: top;\n  display: table-cell; }\n\n.CG2-profileSimple__header {\n  display: table;\n  line-height: 1.2; }\n  @media screen and (max-width: 767px) {\n    .CG2-profileSimple__header {\n      display: block; } }\n\n.CG2-profileSimple__name {\n  font-size: 16px;\n  vertical-align: bottom;\n  display: table-cell; }\n  @media screen and (max-width: 767px) {\n    .CG2-profileSimple__name {\n      font-size: 14px;\n      display: block; } }\n\n.CG2-profileSimple__title {\n  font-size: 10px;\n  vertical-align: bottom;\n  display: table-cell;\n  padding-left: 10px; }\n  @media screen and (max-width: 767px) {\n    .CG2-profileSimple__title {\n      display: block;\n      padding-left: 0; } }\n\n.CG2-profileSimple__text {\n  font-size: 12px; }\n  @media screen and (max-width: 767px) {\n    .CG2-profileSimple__text {\n      font-size: 10px; } }\n  .CG2-profileSimple__text > *:last-child {\n    margin-bottom: 0; }\n\n/* ==========================================================================\n   CG2-authorList\n   ========================================================================== */\n/*\n---\nname: authorList\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\n```html\n<div class=\"CG2-authorList\">\n  <div class=\"CG2-authorList__inner\">\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">代表取締役, フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n  </div>\n</div>\n```\n*/\n.CG2-authorList__inner {\n  display: grid;\n  grid-column-gap: 40px;\n  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }\n\n.CG2-authorList__item {\n  border-top: 1px solid #dbdbdb; }\n  .CG2-authorList__item a {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    padding: 12px 0 12px 92px;\n    min-height: 80px;\n    position: relative; }\n    @media screen and (min-width: 767px) {\n      .CG2-authorList__item a {\n        padding: 20px 12px 20px 92px; } }\n\n.CG2-authorList__image {\n  position: absolute;\n  left: 0;\n  top: 12px; }\n  @media screen and (min-width: 767px) {\n    .CG2-authorList__image {\n      left: 28px;\n      top: 20px; } }\n  .CG2-authorList__image img {\n    vertical-align: bottom;\n    width: 80px;\n    height: 80px; }\n    @media screen and (min-width: 767px) {\n      .CG2-authorList__image img {\n        width: 48px;\n        height: 48px; } }\n\n.CG2-authorList__name {\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 3px; }\n\n.CG2-authorList__title {\n  font-size: 12px;\n  color: #777; }\n  @media screen and (min-width: 767px) {\n    .CG2-authorList__title {\n      margin-bottom: 15px; } }\n\n.CG2-authorList__numOfPosts {\n  font-size: 12px;\n  color: #777; }\n\n/* ==========================================================================\n   CG2-searchFailed\n   ========================================================================== */\n/*\n---\nname: searchFailed\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\nCG2-searchOption の CG2-searchLayout__result 内で利用する\n未使用につき、不要の可能性あり\n\n```html\n<div class=\"CG2-searchFailed\">\n  <div class=\"CG2-searchFailed__text\">結果が見つかりませんでした</div>\n  <div class=\"CG2-searchFailed__search\">\n    <input>\n  </div>\n</div>\n```\n\n*/\n.CG2-searchFailed {\n  margin: 0 0 30px; }\n\n.CG2-searchFailed__text {\n  font-size: 24px;\n  text-align: center;\n  margin: 0 0 24px; }\n  @media screen and (max-width: 767px) {\n    .CG2-searchFailed__text {\n      font-size: 16px;\n      margin-bottom: 20px; } }\n\n.CG2-searchFailed__search {\n  border: 1px solid #dbdbdb; }\n  .CG2-searchFailed__search:before {\n    font-size: 16px; }\n    @media screen and (max-width: 767px) {\n      .CG2-searchFailed__search:before {\n        font-size: 24px; } }\n  .CG2-searchFailed__search input {\n    color: inherit;\n    font-size: 18px;\n    height: auto;\n    padding: 0.5em 10px 0.5em 42px; }\n    .CG2-searchFailed__search input:hover, .CG2-searchFailed__search input:focus {\n      background: #fff; }\n\n/* ==========================================================================\n   CG2-settings\n   ========================================================================== */\n/*\n---\nname: settings\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\n```html\n<div class=\"CG2-settings\">\n  <div class=\"CG2-settings__inner\">\n    <div class=\"CG2-settings__col\">\n      <div class=\"CG2-settings__heading\">設定</div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <th>Googleアカウント</th>\n              <td>gurio@pxgrid.example</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__buttonContainer\">\n        <ul>\n          <li>\n          <a class=\"CG2-button CG2-button--setting\" href=\"\">ログアウト</a>\n          </li>\n        </ul>\n      </div>\n      <form>\n        <div class=\"CG2-settings__field\">\n          <div class=\"CG2-settings__fieldVGroup\">\n            <div class=\"CG2-settings__fieldHeader\">メールマガジンを受信するメールアドレス</div>\n            <div class=\"CG2-settings__fieldData\">\n              <input type=\"email\" value=\"gurio@pxgrid.example\">\n            </div>\n          </div>\n        </div>\n        <div class=\"CG2-settings__buttonContainer\">\n          <ul>\n            <li>\n              <button type=\"button\" class=\"CG2-button CG2-button--setting\">変更</button>\n            </li>\n          </ul>\n        </div>\n      </form>\n    </div>\n    <div class=\"CG2-settings__col\">\n      <div class=\"CG2-settings__heading\">購読情報</div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <td>現在、購読の手続きはされていません。</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__buttonContainer\">\n        <ul>\n          <li>\n            <a class=\"CG2-button CG2-button--setting\">購読の手続きを開始する</a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"CG2-settings__heading\">購読情報</div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <th>無料購読期間</th>\n              <td>残り30日</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <th>決済方法</th>\n              <td>PAY.JP</td>\n            </tr>\n            <tr>\n              <th>カード情報</th>\n              <td>XXXX</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__buttonContainer\">\n        <ul>\n          <li>\n            <a class=\"CG2-button CG2-button--setting\">カード情報の更新</a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"CG2-settings__heading\">購読情報</div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <th>決済方法</th>\n              <td>WebMoney</td>\n            </tr>\n            <tr>\n              <th>有効期限</th>\n              <td>201X年12月31日</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__buttonContainer\">\n        <ul>\n          <li>\n            <a class=\"CG2-button CG2-button--setting\">1ヶ月延長</a>\n          </li>\n          <li>\n            <a class=\"CG2-button CG2-button--setting\">1年延長</a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"CG2-settings__heading\">退会</div>\n      <form>\n        <div class=\"CG2-settings__field\">\n          <div class=\"CG2-settings__fieldVGroup\">\n            <div class=\"CG2-settings__fieldHeader\">退会理由を教えて下さい（1000文字以内）</div>\n            <div class=\"CG2-settings__fieldData\"><textarea maxlength=\"1000\"></textarea></div>\n          </div>\n        </div>\n        <div class=\"CG2-settings__buttonContainer\">\n          <button type=\"button\" class=\"CG2-button CG2-button--setting\">CodeGridを退会し、購読を停止する</button>\n        </div>\n      </form>\n    </div>\n  </div>\n</div>\n```\n*/\n@media screen and (min-width: 767px) {\n  .CG2-settings__inner {\n    display: flex;\n    justify-content: space-between; } }\n\n@media screen and (min-width: 767px) {\n  .CG2-settings__col {\n    width: calc(50% - 14px - 10px); } }\n\n@media screen and (min-width: 979px) {\n  .CG2-settings__col {\n    width: calc(50% - 28px - 20px); } }\n\n.CG2-settings__field {\n  margin: 10px 0; }\n  @media screen and (min-width: 979px) {\n    .CG2-settings__field {\n      margin: 24px 0; } }\n\n.CG2-settings__heading {\n  border-bottom: 1px solid #dbdbdb; }\n  @media screen and (min-width: 0) and (max-width: 767px) {\n    .CG2-settings__heading {\n      padding: 0 10px;\n      margin: 30px -10px 24px; } }\n  @media screen and (min-width: 767px) and (max-width: 979px) {\n    .CG2-settings__heading {\n      padding: 0 14px;\n      margin: 50px -14px 24px; } }\n  @media screen and (min-width: 979px) {\n    .CG2-settings__heading {\n      padding: 0 28px 5px;\n      margin: 50px -28px 24px; } }\n  @media screen and (min-width: 0) and (max-width: 767px) {\n    .CG2-settings__col:first-child .CG2-settings__heading:first-child {\n      margin-top: 0; } }\n  @media screen and (min-width: 767px) {\n    .CG2-settings__heading:first-child {\n      margin-top: 0; } }\n\n.CG2-settings__fieldHGroup table {\n  border-spacing: 0; }\n\n@media screen and (max-width: 979px) {\n  .CG2-settings__fieldHGroup table, .CG2-settings__fieldHGroup tbody, .CG2-settings__fieldHGroup tr {\n    display: block; }\n    .CG2-settings__fieldHGroup table:before, .CG2-settings__fieldHGroup table:after, .CG2-settings__fieldHGroup tbody:before, .CG2-settings__fieldHGroup tbody:after, .CG2-settings__fieldHGroup tr:before, .CG2-settings__fieldHGroup tr:after {\n      content: \"\";\n      display: table; }\n    .CG2-settings__fieldHGroup table:after, .CG2-settings__fieldHGroup tbody:after, .CG2-settings__fieldHGroup tr:after {\n      clear: both; }\n  .CG2-settings__fieldHGroup th, .CG2-settings__fieldHGroup td {\n    float: left;\n    clear: left; } }\n\n.CG2-settings__fieldHGroup th {\n  font-size: 12px;\n  font-weight: normal;\n  vertical-align: middle; }\n  @media screen and (max-width: 979px) {\n    .CG2-settings__fieldHGroup th {\n      display: block; } }\n  .CG2-settings__fieldHGroup th:after {\n    content: '：'; }\n\n.CG2-settings__fieldHGroup td {\n  white-space: normal;\n  word-break: break-all;\n  vertical-align: middle;\n  padding-left: 10px; }\n  @media screen and (max-width: 979px) {\n    .CG2-settings__fieldHGroup td {\n      font-size: 16px;\n      padding-left: 0; } }\n\n.CG2-settings__fieldHeader {\n  font-size: 12px;\n  margin-bottom: 10px; }\n\n.CG2-settings__fieldData {\n  font-size: 16px; }\n  .CG2-settings__fieldData input, .CG2-settings__fieldData textarea {\n    font-size: inherit;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 4px; }\n  .CG2-settings__fieldData textarea {\n    height: 8em; }\n\n.CG2-settings__buttonContainer ul {\n  font-size: 0;\n  list-style: none;\n  padding: 0;\n  margin: 0; }\n\n.CG2-settings__buttonContainer li {\n  font-size: 1rem;\n  display: inline-block;\n  margin: 0 8px 8px 0; }\n\n/* ==========================================================================\n   CG2-formProgress\n   ========================================================================== */\n/*\n---\nname: formProgress\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-form\n---\n\n```html\n<div class=\"CG2-formProgress\">\n  <ol>\n    <li>1. ログイン方法について</li>\n    <li class=\"CG2-formProgress__item--current\">2. クレジットカード登録</li>\n    <li>3. 登録完了</li>\n  </ol>\n</div>\n```\n*/\n.CG2-formProgress {\n  font-size: 16px;\n  margin: 10px 0 20px; }\n  @media screen and (min-width: 767px) {\n    .CG2-formProgress {\n      margin: 0 0 60px; } }\n  @media screen and (min-width: 979px) {\n    .CG2-formProgress {\n      font-size: 18px; } }\n  .CG2-formProgress ol {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    justify-content: space-between; }\n  .CG2-formProgress li {\n    border-bottom: 1px solid #dbdbdb;\n    padding: 0 10px 5px;\n    margin: 0 -10px;\n    width: 100%; }\n    @media screen and (min-width: 767px) {\n      .CG2-formProgress li {\n        text-align: center;\n        margin: 0;\n        padding: 0 0 5px;\n        width: calc(100% / 3 - 20px); } }\n    @media screen and (min-width: 979px) {\n      .CG2-formProgress li {\n        padding: 0 0 10px;\n        width: calc(100% / 3 - 40px); } }\n    .CG2-formProgress li:not(.CG2-formProgress__item--current) {\n      display: none;\n      opacity: 0.4; }\n      @media screen and (min-width: 767px) {\n        .CG2-formProgress li:not(.CG2-formProgress__item--current) {\n          display: block; } }\n\n/* ==========================================================================\n   CG2-signupFrom\n   ========================================================================== */\n/*\n---\nname: signupFrom\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-form\n---\n\nログイン方法について（未ログイン）\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__lead\">\n    購読料は月額800円（税抜）\n    <div class=\"CG2-signupFrom__leadSub\">\n      初回登録時は30日間無料\n    </div>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth\">\n    <ul>\n      <li><a href=\"\" class=\"CG2-button CG2-button--primary\">\n        Googleアカウントを使用して<br class=\"CG2--disableLargeScreen CG2--disableMiddleScreen\">CodeGridにログイン</a></li>\n    </ul>\n    <div class=\"CG2-signupFrom__buttonContainerText\">\n      <p>\n        ※CodeGridの購読にはGoogleアカウントが必要です。<br>\n        <a href=\"https://accounts.google.com/SignUp\" target=\"_blank\">Googleアカウント作成</a>\n      </p>\n    </div>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer\">\n    <ul>\n      <li><a class=\"CG2-button\" href=\"\">購読済みの方はログイン</a></li>\n    </ul>\n  </div>\n</div>\n```\n\nログイン方法について（ログイン済み）\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__lead\">\n    購読料は月額800円（税抜）\n    <div class=\"CG2-signupFrom__leadSub\">\n      初回登録時は30日間無料\n    </div>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth\">\n    <ul>\n      <li><a href=\"\" class=\"CG2-button CG2-button--primary\">このアカウントで購読する</a></li>\n    </ul>\n    <div class=\"CG2-signupFrom__buttonContainerText\">\n      <p>\n        現在 gurio@pxgrid.example でログインしています<br>\n        <a href=\"\">別のGoogleアカウントで購読するには一度ログアウトする必要があります。</a>\n      </p>\n    </div>\n  </div>\n</div>\n```\n\nクレジットカードを登録\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__text\">\n    <p>CodeGridを購読いただくためには、<a href=\"https://www.codegrid.net/terms.html\" target=\"_blank\">利用規約</a>への同意が必要です。</p>\n  </div>\n  <div class=\"CG2-signupFrom__check\">\n    <label><input type=\"checkbox\">利用規約に同意する</label>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth\">\n    <ul>\n      <li><a class=\"CG2-button CG2-button--primary\">クレジットカードを登録</a></li>\n    </ul>\n  </div>\n</div>\n```\n\n登録完了\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__lead\">\n    購読手続きが完了しました！\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth\">\n    <ul>\n      <li><a class=\"CG2-button CG2-button--primary\">記事を読む</a></li>\n    </ul>\n  </div>\n  <div class=\"CG2-signupFrom__text\">\n    <p><a href=\"\">CodeGrid運営からのごあいさつ記事へ</a></p>\n  </div>\n</div>\n```\n\nエラー\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__information\">\n    <p>支払い処理中にエラーが発生しました</p>\n  </div>\n  <div class=\"CG2-signupFrom__text\">\n    <p>お手数ですがもう一度手続きをおこなってください。</p>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer\">\n    <ul>\n      <li><a class=\"CG2-button CG2-button--primary\">再度支払い手続きをおこなう</a></li>\n    </ul>\n  </div>\n  <div class=\"CG2-signupFrom__annotation\">\n    <p>再度エラーになる場合は以下よりお問い合わせください。</p>\n    <p><a href=\"https://www.codegrid.net/inquiry.html\" target=\"_blank\">お問い合わせフォーム</a></p>\n  </div>\n</div>\n```\n*/\n.CG2-signupFrom__lead {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-size: 32px;\n  text-align: center;\n  margin-bottom: 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-signupFrom__lead {\n      font-size: 20px;\n      margin-bottom: 20px; } }\n\n.CG2-signupFrom__leadSub {\n  font-family: Helvetica, \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", Meiryo, sans-serif;\n  font-size: 16px; }\n  @media screen and (max-width: 767px) {\n    .CG2-signupFrom__leadSub {\n      font-size: 12px; } }\n\n.CG2-signupFrom__information {\n  font-size: 24px;\n  text-align: center; }\n  @media screen and (max-width: 767px) {\n    .CG2-signupFrom__information {\n      font-size: 18px; } }\n\n.CG2-signupFrom__buttonContainer {\n  width: 600px;\n  margin: 30px auto 40px; }\n  @media screen and (max-width: 767px) {\n    .CG2-signupFrom__buttonContainer {\n      width: auto;\n      margin: 20px 0 30px; } }\n  .CG2-signupFrom__buttonContainer ul {\n    table-layout: fixed;\n    border-spacing: 8px 0;\n    display: table;\n    list-style: none;\n    padding: 0;\n    margin: 10px auto; }\n    @media screen and (max-width: 767px) {\n      .CG2-signupFrom__buttonContainer ul {\n        display: block;\n        margin: 5px auto; } }\n  .CG2-signupFrom__buttonContainer.CG2-signupFrom__buttonContainer--fullWidth ul {\n    width: 100%; }\n  .CG2-signupFrom__buttonContainer li {\n    display: table-cell; }\n    @media screen and (max-width: 767px) {\n      .CG2-signupFrom__buttonContainer li {\n        display: block;\n        margin: 5px auto; } }\n  .CG2-signupFrom__buttonContainer .CG2-button {\n    font-size: 20px;\n    text-align: center;\n    display: block; }\n    @media screen and (max-width: 767px) {\n      .CG2-signupFrom__buttonContainer .CG2-button {\n        font-size: 16px;\n        -webkit-font-smoothing: subpixel-antialiased;\n        -moz-osx-font-smoothing: auto;\n        padding: 8px 20px; } }\n  .CG2-signupFrom__buttonContainer .CG2-signupFrom__buttonContainerText {\n    font-size: 14px;\n    text-align: center;\n    margin: 10px 0; }\n    @media screen and (max-width: 767px) {\n      .CG2-signupFrom__buttonContainer .CG2-signupFrom__buttonContainerText {\n        font-size: 12px;\n        text-align: left; } }\n\n.CG2-signupFrom__text {\n  font-size: 14px;\n  text-align: center; }\n\n.CG2-signupFrom__annotation {\n  font-size: 12px;\n  text-align: center; }\n  @media screen and (max-width: 767px) {\n    .CG2-signupFrom__annotation {\n      font-size: 14px; } }\n  .CG2-signupFrom__annotation p {\n    margin: 1em 0; }\n\n.CG2-signupFrom__check {\n  display: table;\n  padding: 10px 30px;\n  border-radius: 2px;\n  margin: 20px auto;\n  background: #eee; }\n  @media screen and (max-width: 767px) {\n    .CG2-signupFrom__check {\n      font-size: 16px;\n      text-align: center;\n      display: block; } }\n  .CG2-signupFrom__check label {\n    cursor: pointer;\n    display: block;\n    margin: -10px -30px;\n    padding: 10px 30px; }\n  .CG2-signupFrom__check input[type=\"checkbox\"] {\n    margin-right: 5px; }\n    @media screen and (max-width: 767px) {\n      .CG2-signupFrom__check input[type=\"checkbox\"] {\n        margin-right: 8px; } }\n\n/* ==========================================================================\n   line-height-step実装\n   ========================================================================== */\n@supports (line-height-step: 1em) {\n  article.CG2-article {\n    --step-grid: 28px;\n    /* background-size: 100% var(--step-grid); */\n    /* background-image: linear-gradient(to bottom, #00bcd1 1px, transparent 1px); */ }\n    article.CG2-article > h3 {\n      display: inline-block;\n      width: 100%;\n      line-height: 1.2;\n      line-height-step: var(--step-grid);\n      margin-top: calc(1 * var(--step-grid));\n      margin-bottom: calc(0.5 * var(--step-grid)); }\n    article.CG2-article > p {\n      line-height: 1.2;\n      line-height-step: var(--step-grid);\n      margin: var(--step-grid) 0; }\n    article.CG2-article > ul,\n    article.CG2-article > ol {\n      margin: var(--step-grid) 0; }\n    article.CG2-article > ul li,\n    article.CG2-article > ol li {\n      line-height: 1.2;\n      line-height-step: var(--step-grid);\n      margin: 0; }\n    article.CG2-article > .Note {\n      line-height: 1.2;\n      line-height-step: calc(var(--step-grid) * 0.8); } }\n\n/* ==========================================================================\n   記事内のビデオ\n   ========================================================================== */\n/*\n---\nname: article\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n記事内にあるビデオ\n\n```html\n<article class=\"CG2-article\">\n\n  <p>ビデオです。</p>\n\n  <video src=\"...\" controls muted></video>\n\n</article>\n```\n\n*/\narticle.CG2-article video {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  max-height: 480px;\n  border: 1px solid #ccc;\n  background-color: #eee; }\n\n/* ==========================================================================\n   Chromeで印刷時に日本語が消えるバグへの対応\n   ========================================================================== */\n/*\nChrome 66くらいから確認中。\n指定したら消えているフォント：\n  * Klee, YuMincho, Hiragino Mincho ProN\n  * Osaka\n*/\n@media print {\n  .CG2-articleHeader__series,\n  .CG2-articleHeader__title,\n  header.CG2-articleTOC__header h1,\n  article.CG2-article > h2 {\n    font-family: serif !important; }\n  article.CG2-article pre, article.CG2-article code {\n    font-family: Consolas, Monaco, Menlo, sans-serif !important; } }\n","/* CodeGrid-UI for CodeGrid app */\n\n// articleSeriesNavで使われる縦中横フォント\n// FIXME: ちゃんとした場所に移動する\n@font-face {\n  font-family: \"codegrid-num\";\n  src: url('../font/codegrid-num.woff2') format('woff2'),\n       url('../font/codegrid-num.woff') format('woff');\n  font-weight: normal;\n  font-style: normal;\n}\n\n// ビルドに必要な変数やmixinなど\n@import \"vendor/_normalize\";\n@import \"vendor/_media-queries\";\n@import \"vendor/_prism\";\n@import \"0_vars\";\n@import \"1_utils\";\n@import \"2_basic\";\n@import \"3_animations\";\n@import \"icon\";\n\n// ページのテンプレート用のスタイルと、共通コンポーネント\n@import \"placeholder\";\n@import \"template\";\n@import \"components-shared\";\n\n// codegrid-appのみで使われるコンポーネント\n@import \"components-app\";\n","/*! normalize.css v3.0.1 | MIT License | git.io/normalize */\n\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n *    user zoom.\n */\n\nhtml {\n  font-family: sans-serif; /* 1 */\n  -ms-text-size-adjust: 100%; /* 2 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/**\n * Remove default margin.\n */\n\nbody {\n  margin: 0;\n}\n\n/* HTML5 display definitions\n   ========================================================================== */\n\n/**\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\n * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.\n * Correct `block` display not defined for `main` in IE 11.\n */\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n  display: block;\n}\n\n/**\n * 1. Correct `inline-block` display not defined in IE 8/9.\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\n */\n\naudio,\ncanvas,\nprogress,\nvideo {\n  display: inline-block; /* 1 */\n  vertical-align: baseline; /* 2 */\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\n\naudio:not([controls]) {\n  display: none;\n  height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9/10.\n * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.\n */\n\n[hidden],\ntemplate {\n  display: none;\n}\n\n/* Links\n   ========================================================================== */\n\n/**\n * Remove the gray background color from active links in IE 10.\n */\n\na {\n  background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\n\na:active,\na:hover {\n  outline: 0;\n}\n\n/* Text-level semantics\n   ========================================================================== */\n\n/**\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.\n */\n\nabbr[title] {\n  border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\n */\n\nb,\nstrong {\n  font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari and Chrome.\n */\n\ndfn {\n  font-style: italic;\n}\n\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari, and Chrome.\n */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\n\nmark {\n  background: #ff0;\n  color: #000;\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsup {\n  top: -0.5em;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\n/* Embedded content\n   ========================================================================== */\n\n/**\n * Remove border when inside `a` element in IE 8/9/10.\n */\n\nimg {\n  border: 0;\n}\n\n/**\n * Correct overflow not hidden in IE 9/10/11.\n */\n\nsvg:not(:root) {\n  overflow: hidden;\n}\n\n/* Grouping content\n   ========================================================================== */\n\n/**\n * Address margin not present in IE 8/9 and Safari.\n */\n\nfigure {\n  margin: 1em 40px;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\n\nhr {\n  -moz-box-sizing: content-box;\n  box-sizing: content-box;\n  height: 0;\n}\n\n/**\n * Contain overflow in all browsers.\n */\n\npre {\n  overflow: auto;\n}\n\n/**\n * Address odd `em`-unit font size rendering in all browsers.\n */\n\ncode,\nkbd,\npre,\nsamp {\n  font-family: monospace, monospace;\n  font-size: 1em;\n}\n\n/* Forms\n   ========================================================================== */\n\n/**\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\n * styling of `select`, unless a `border` property is set.\n */\n\n/**\n * 1. Correct color not being inherited.\n *    Known issue: affects color of disabled elements.\n * 2. Correct font properties not being inherited.\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  color: inherit; /* 1 */\n  font: inherit; /* 2 */\n  margin: 0; /* 3 */\n}\n\n/**\n * Address `overflow` set to `hidden` in IE 8/9/10/11.\n */\n\nbutton {\n  overflow: visible;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\n * Correct `select` style inheritance in Firefox.\n */\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n *    and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n *    `input` and others.\n */\n\nbutton,\nhtml input[type=\"button\"], /* 1 */\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n  -webkit-appearance: button; /* 2 */\n  cursor: pointer; /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\n\nbutton[disabled],\nhtml input[disabled] {\n  cursor: default;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\n\ninput {\n  line-height: normal;\n}\n\n/**\n * It's recommended that you don't attempt to style these elements.\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\n *\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n * Fix the cursor style for Chrome's increment/decrement buttons. For certain\n * `font-size` values of the `input`, it causes the cursor style of the\n * decrement button to change from `default` to `text`.\n */\n\ninput[type=\"number\"]::-webkit-inner-spin-button,\ninput[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome\n *    (include `-moz` to future-proof).\n */\n\ninput[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  -moz-box-sizing: content-box;\n  -webkit-box-sizing: content-box; /* 2 */\n  box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\n * Safari (but not Chrome) clips the cancel button when the search input has\n * padding (and `textfield` appearance).\n */\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * Define consistent border, margin, and padding.\n */\n\nfieldset {\n  border: 1px solid #c0c0c0;\n  margin: 0 2px;\n  padding: 0.35em 0.625em 0.75em;\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\n\nlegend {\n  border: 0; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n * Remove default vertical scrollbar in IE 8/9/10/11.\n */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n * Don't inherit the `font-weight` (applied by a rule above).\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\n */\n\noptgroup {\n  font-weight: bold;\n}\n\n/* Tables\n   ========================================================================== */\n\n/**\n * Remove most spacing between table cells.\n */\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  padding: 0;\n}\n","/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+coffeescript+ruby+git+handlebars+http+jade+json+less+markdown+jsx+sass+scss+stylus+typescript+yaml&plugins=line-numbers+autolinker */\n/**\n * prism.js default theme for JavaScript, CSS and HTML\n * Based on dabblet (http://dabblet.com)\n * @author Lea Verou\n */\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tcolor: black;\n\tbackground: none;\n\ttext-shadow: 0 1px white;\n\tfont-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tword-wrap: normal;\n\tline-height: 1.5;\n\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n}\n\npre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\ncode[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n\ttext-shadow: none;\n\tbackground: #b3d4fc;\n}\n\npre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\ncode[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n\ttext-shadow: none;\n\tbackground: #b3d4fc;\n}\n\n@media print {\n\tcode[class*=\"language-\"],\n\tpre[class*=\"language-\"] {\n\t\ttext-shadow: none;\n\t}\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tbackground: #f5f2f0;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em;\n\tborder-radius: .3em;\n\twhite-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\tcolor: slategray;\n}\n\n.token.punctuation {\n\tcolor: #999;\n}\n\n.namespace {\n\topacity: .7;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n\tcolor: #905;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n\tcolor: #690;\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string {\n\tcolor: #a67f59;\n\tbackground: hsla(0, 0%, 100%, .5);\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n\tcolor: #07a;\n}\n\n.token.function {\n\tcolor: #DD4A68;\n}\n\n.token.regex,\n.token.important,\n.token.variable {\n\tcolor: #e90;\n}\n\n.token.important,\n.token.bold {\n\tfont-weight: bold;\n}\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}\n\npre.line-numbers {\n\tposition: relative;\n\tpadding-left: 3.8em;\n\tcounter-reset: linenumber;\n}\n\npre.line-numbers > code {\n\tposition: relative;\n}\n\n.line-numbers .line-numbers-rows {\n\tposition: absolute;\n\tpointer-events: none;\n\ttop: 0;\n\tfont-size: 100%;\n\tleft: -3.8em;\n\twidth: 3em; /* works for line-numbers below 1000 lines */\n\tletter-spacing: -1px;\n\tborder-right: 1px solid #999;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\n}\n\n\t.line-numbers-rows > span {\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\tcounter-increment: linenumber;\n\t}\n\n\t\t.line-numbers-rows > span:before {\n\t\t\tcontent: counter(linenumber);\n\t\t\tcolor: #999;\n\t\t\tdisplay: block;\n\t\t\tpadding-right: 0.8em;\n\t\t\ttext-align: right;\n\t\t}\n.token a {\n\tcolor: inherit;\n}\n","/* レイアウトのためのゼロ幅フォント\n   ========================================================================== */\n@font-face {\n  font-family: 'zeroWidth';\n  src: url('../font/zero-width.woff') format('woff');\n  font-weight: normal;\n  font-style: normal;\n}\n\n/* mqpackerが意図した順番にソースを並び替えるためのおまじない\n   ========================================================================== */\n@include max-screen( $breakpoint-base )   { _x { _x : 0 } }\n@include max-screen( $breakpoint-middle ) { _x { _x : 0 } }\n@include max-screen( $breakpoint-small )  { _x { _x : 0 } }\n\n/* modifier: align\n   ========================================================================== */\n.CG2--alignLeft   { text-align: left !important }\n.CG2--alignRight  { text-align: right !important }\n.CG2--alignCenter { text-align: center !important }\n.CG2--alignTop    { vertical-align: top !important }\n.CG2--alignMiddle { vertical-align: middle !important }\n.CG2--alignBottom { vertical-align: bottom !important }\n\n/* modifier: display\n   ========================================================================== */\n:root .CG2--disableLargeScreen { display: none }\n\n@media screen and ( max-width: $breakpoint-middle ) and ( min-width: $breakpoint-small + 1 ) {\n  :root .CG2--disableLargeScreen  { display: block }\n  :root .CG2--disableMiddleScreen { display: none !important }\n  :root .CG2--disableSmallScreen  { display: block }\n\n  :root span.CG2--disableLargeScreen,\n  :root   br.CG2--disableLargeScreen  { display: inline }\n  :root span.CG2--disableMiddleScreen,\n  :root   br.CG2--disableMiddleScreen { display: none !important }\n  :root span.CG2--disableSmallScreen,\n  :root   br.CG2--disableSmallScreen  { display: inline }\n}\n\n@include max-screen( $breakpoint-small ) {\n  :root .CG2--disableLargeScreen  { display: block }\n  :root .CG2--disableMiddleScreen { display: block }\n  :root .CG2--disableSmallScreen  { display: none !important }\n\n  :root span.CG2--disableLargeScreen,\n  :root   br.CG2--disableLargeScreen  { display: inline }\n  :root span.CG2--disableMiddleScreen,\n  :root   br.CG2--disableMiddleScreen { display: inline }\n  :root span.CG2--disableSmallScreen,\n  :root   br.CG2--disableSmallScreen  { display: none !important }\n}\n\n/* ==========================================================================\n   general style\n   ========================================================================== */\n::selection {\n  background-color: hsl(75, 75%, 75%);\n  text-shadow: none;\n}\n\nhtml {\n  color: #242424;\n  font-family: $fontSansSerif;\n  font-size: 16px;\n  line-height: 1.8;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  //1px の #191919。スクロールバーの色に影響を与えないように画像で指定。\n  background: url( \"data:image/gif;base64,R0lGODlhAQABAPAAABkZGQAAACwAAAAAAQABAAACAkQBADs=\" );\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 12px;\n  }\n}\n\nbody {\n  margin:0;\n  background: #fff;\n  @include max-screen( $breakpoint-middle ) {\n    min-width: 0;\n  }\n}\n\na {\n  color: #10a040;\n  transition: color .2s;\n}\na:hover,\na:active {\n  // color: #2f353d;\n  transition: color 0s;\n}\n\niframe[name=\"google_conversion_frame\"]{\n  position: absolute;\n  top: 0;\n  left: -100px;\n  width: 1px;\n  height: 1px;\n}\n","// ==========================================================================\n//  vars\n// ==========================================================================\n\n$fontSansSerif : Helvetica, '\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4\\20\\50\\72\\6F\\20\\57\\33', 'Hiragino Kaku Gothic Pro', '\\30E1\\30A4\\30EA\\30AA', Meiryo, sans-serif;\n$fontSerif :  'Palatino Linotype', 'Book Antiqua', Palatino, 'Klee', '\\6E38\\660E\\671D\\4F53', 'Yu Mincho', YuMincho, '\\30D2\\30E9\\30AE\\30CE\\660E\\671D ProN W3', 'HiraMinProN-W3', '\\30D2\\30E9\\30AE\\30CE\\660E\\671D Pro W3', 'Hiragino Mincho Pro', '\\0048\\0047\\6B63\\6977\\66F8\\4F53\\002D\\0050\\0052\\004F', '\\FF24\\FF26\\4E2D\\6977\\66F8\\4F53', '\\FF2D\\FF33\\0020\\660E\\671D', 'MS Mincho', '\\30E1\\30A4\\30EA\\30AA', Meiryo, serif;\n$fontCode : 'Lucida Console', Monaco, monospace;\n$fontZero : 'zeroWidth';\n$fontVertical : 'codegrid-num', '\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4\\20\\50\\72\\6F\\20\\57\\33', 'Hiragino Kaku Gothic Pro', '\\30E1\\30A4\\30EA\\30AA', Meiryo, sans-serif;\n\n\n$pageMaxWidth: 1200px;\n$breakpoint-base   : 980px - 1;\n$breakpoint-middle : 768px - 1;\n$breakpoint-small  : 640px - 1;\n\n$z-pageHeader: 20;\n$z-flyout: 10;\n","/* jump\n   ========================================================================== */\n\n@keyframes anim-jump {\n  0% {\n    transform: translateY( 0 ) scaleY( 1 );\n  }\n  20% {\n    transform: translateY( 2px ) scaleY( 0.6 );\n  }\n  60% {\n    transform: translateY( -5px ) scaleY( 1.1 );\n  }\n  100% {\n    transform: translateY( 0 ) scaleY( 1 );\n  }\n}\n\n\n@mixin anim-jump () {\n  animation-duration: .4s;\n  animation-name: anim-jump;\n  animation-fill-mode: forwards;\n}\n\n\n/* scale\n   ========================================================================== */\n\n@keyframes anim-scaleup {\n  0% {\n    transform: none;\n  }\n  40% {\n    transform: scale( 1.05 );\n  }\n  100% {\n    transform: none;\n  }\n}\n\n@mixin anim-scaleup () {\n  animation-duration: .6s;\n  animation-name: anim-scaleup;\n  animation-fill-mode: forwards;\n}\n","// このscssファイルはgulpによる自動生成\n// scssを編集したい場合は src/assets2/font/codegrid-icon/_icon-utils.scss を編集すること\n\n// アイコンをつける\n// ===========================================================================\n\n/* アイコンの基礎スタイル\n   ========================================================================== */\n%codegrid-icon {\n  font-family: \"codegrid-icon\";\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  vertical-align: middle;\n  display: inline-block;\n\n  // Better Font Rendering\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n// アイコンを呼び出す\n// ===========================================================================\n$icons: (\n  pxg: \"\\\",\n  top: \"\\\",\n  right: \"\\\",\n  down: \"\\\",\n  left: \"\\\",\n  hamburger: \"\\\",\n  list: \"\\\",\n  setting: \"\\\",\n  search: \"\\\",\n  star: \"\\\",\n  lock: \"\\\",\n  unlock: \"\\\",\n  question: \"\\\",\n  exclamation-circle: \"\\\",\n  exclamation-triangle: \"\\\",\n  twitter: \"\\\",\n  facebook: \"\\\",\n  gplus: \"\\\",\n  cat-elementary: \"\\\",\n  cat-mastering: \"\\\",\n  cat-standards: \"\\\",\n  cat-talk: \"\\\",\n  cat-architecture: \"\\\",\n  cat-report: \"\\\",\n  cat-design: \"\\\",\n  cat-future: \"\\\",\n  cat-work-style: \"\\\",\n  cat-survey: \"\\\",\n  cat-interview: \"\\\",\n  cat-discussion: \"\\\",\n  \n);\n\n@mixin icon ( $name ) {\n  content: map-get( $icons, $name );\n  @extend %codegrid-icon;\n}","// このscssファイルはgulpによる自動生成\n// scssを編集したい場合は src/assets2/font/codegrid-icon/_icon.scss を編集すること\n\n@import \"icon-utils\";\n\n/* アイコンフォント\n   ========================================================================== */\n@font-face {\n  font-family: \"codegrid-icon\";\n  src: url('../font/codegrid-icon.woff2') format('woff2'),\n        url('../font/codegrid-icon.woff') format('woff');\n  font-weight: normal;\n  font-style: normal;\n}\n\n/*\n---\nname: Icon\ncategory:\n  - Icons\ntag:\n  - icon\n---\n\npxg\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-pxg\"></span>\n  \n</div>\n```\n\ntop\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-top\"></span>\n  \n</div>\n```\n\nright\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-right\"></span>\n  \n</div>\n```\n\ndown\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-down\"></span>\n  \n</div>\n```\n\nleft\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-left\"></span>\n  \n</div>\n```\n\nhamburger\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-hamburger\"></span>\n  \n</div>\n```\n\nlist\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-list\"></span>\n  \n</div>\n```\n\nsetting\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-setting\"></span>\n  \n</div>\n```\n\nsearch\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-search\"></span>\n  \n</div>\n```\n\nstar\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-star\"></span>\n  \n</div>\n```\n\nlock\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-lock\"></span>\n  \n</div>\n```\n\nunlock\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-unlock\"></span>\n  \n</div>\n```\n\nquestion\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-question\"></span>\n  \n</div>\n```\n\nexclamation-circle\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-exclamation-circle\"></span>\n  \n</div>\n```\n\nexclamation-triangle\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-exclamation-triangle\"></span>\n  \n</div>\n```\n\ntwitter\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-twitter\"></span>\n  \n</div>\n```\n\nfacebook\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-facebook\"></span>\n  \n</div>\n```\n\ngplus\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-gplus\"></span>\n  \n</div>\n```\n\ncat-elementary\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-elementary\"></span>\n  <span class=\"CG2-icon-cat-elementary CG2-icon--colored\"></span>\n</div>\n```\n\ncat-mastering\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-mastering\"></span>\n  <span class=\"CG2-icon-cat-mastering CG2-icon--colored\"></span>\n</div>\n```\n\ncat-standards\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-standards\"></span>\n  <span class=\"CG2-icon-cat-standards CG2-icon--colored\"></span>\n</div>\n```\n\ncat-talk\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-talk\"></span>\n  <span class=\"CG2-icon-cat-talk CG2-icon--colored\"></span>\n</div>\n```\n\ncat-architecture\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-architecture\"></span>\n  <span class=\"CG2-icon-cat-architecture CG2-icon--colored\"></span>\n</div>\n```\n\ncat-report\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-report\"></span>\n  <span class=\"CG2-icon-cat-report CG2-icon--colored\"></span>\n</div>\n```\n\ncat-design\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-design\"></span>\n  <span class=\"CG2-icon-cat-design CG2-icon--colored\"></span>\n</div>\n```\n\ncat-future\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-future\"></span>\n  <span class=\"CG2-icon-cat-future CG2-icon--colored\"></span>\n</div>\n```\n\ncat-work-style\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-work-style\"></span>\n  <span class=\"CG2-icon-cat-work-style CG2-icon--colored\"></span>\n</div>\n```\n\ncat-survey\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-survey\"></span>\n  <span class=\"CG2-icon-cat-survey CG2-icon--colored\"></span>\n</div>\n```\n\ncat-interview\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-interview\"></span>\n  <span class=\"CG2-icon-cat-interview CG2-icon--colored\"></span>\n</div>\n```\n\ncat-discussion\n```html\n<div style=\"font-size:32px;\">\n  <span class=\"CG2-icon-cat-discussion\"></span>\n  <span class=\"CG2-icon-cat-discussion CG2-icon--colored\"></span>\n</div>\n```\n\n*/\n\n[class^=\"CG2-icon-\"], [class*=\" CG2-icon-\"] {\n  // _icon-utilsに定義\n  @extend %codegrid-icon;\n\n  // 日本語とのベースラインの兼ね合い\n  position: relative;\n  top: -0.1em;\n}\n\n// アイコン\n// ===========================================================================\n.CG2-icon-pxg:before { content: \"\\\"; }\n.CG2-icon-top:before { content: \"\\\"; }\n.CG2-icon-right:before { content: \"\\\"; }\n.CG2-icon-down:before { content: \"\\\"; }\n.CG2-icon-left:before { content: \"\\\"; }\n.CG2-icon-hamburger:before { content: \"\\\"; }\n.CG2-icon-list:before { content: \"\\\"; }\n.CG2-icon-setting:before { content: \"\\\"; }\n.CG2-icon-search:before { content: \"\\\"; }\n.CG2-icon-star:before { content: \"\\\"; }\n.CG2-icon-lock:before { content: \"\\\"; }\n.CG2-icon-unlock:before { content: \"\\\"; }\n.CG2-icon-question:before { content: \"\\\"; }\n.CG2-icon-exclamation-circle:before { content: \"\\\"; }\n.CG2-icon-exclamation-triangle:before { content: \"\\\"; }\n.CG2-icon-twitter:before { content: \"\\\"; }\n.CG2-icon-facebook:before { content: \"\\\"; }\n.CG2-icon-gplus:before { content: \"\\\"; }\n.CG2-icon-cat-elementary:before { content: \"\\\"; }\n.CG2-icon-cat-mastering:before { content: \"\\\"; }\n.CG2-icon-cat-standards:before { content: \"\\\"; }\n.CG2-icon-cat-talk:before { content: \"\\\"; }\n.CG2-icon-cat-architecture:before { content: \"\\\"; }\n.CG2-icon-cat-report:before { content: \"\\\"; }\n.CG2-icon-cat-design:before { content: \"\\\"; }\n.CG2-icon-cat-future:before { content: \"\\\"; }\n.CG2-icon-cat-work-style:before { content: \"\\\"; }\n.CG2-icon-cat-survey:before { content: \"\\\"; }\n.CG2-icon-cat-interview:before { content: \"\\\"; }\n.CG2-icon-cat-discussion:before { content: \"\\\"; }\n\n\n// 色付きのアイコン\n// ===========================================================================\nspan.CG2-icon--colored.CG2-icon-unlock           { color: #f8a000; }\nspan.CG2-icon--colored.CG2-icon-cat-elementary   { color: #f4db00; }\nspan.CG2-icon--colored.CG2-icon-cat-mastering    { color: #9cc500; }\nspan.CG2-icon--colored.CG2-icon-cat-standards    { color: #009b26; }\nspan.CG2-icon--colored.CG2-icon-cat-talk         { color: #009b9b; }\nspan.CG2-icon--colored.CG2-icon-cat-architecture { color: #009be7; }\nspan.CG2-icon--colored.CG2-icon-cat-report       { color: #006bb5; }\nspan.CG2-icon--colored.CG2-icon-cat-design       { color: #000872; }\nspan.CG2-icon--colored.CG2-icon-cat-future       { color: #f89c00; }\nspan.CG2-icon--colored.CG2-icon-cat-work-style   { color: #ef0000; }\nspan.CG2-icon--colored.CG2-icon-cat-survey       { color: #ee0155; }\nspan.CG2-icon--colored.CG2-icon-cat-interview    { color: #ef007e; }\nspan.CG2-icon--colored.CG2-icon-cat-discussion   { color: #9c0178; }","// ===========================================================================\n//  コンポーネントやテンプレートなどで使うプレースホルダー集\n// ===========================================================================\n\n// 検索ボックス\n// ===========================================================================\n%search {\n  box-sizing: border-box;\n  width: 100%;\n  background: #303030;\n  border-radius: 3px;\n}\n\n%searchInner {\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  &:before {\n    @include icon('search');\n    color: #777;\n    font-size: 12px;\n    line-height: 0;\n    position: absolute;\n    top: 50%;\n    left: 10px;\n  }\n\n  form {\n    height: 100%; // for Blink\n  }\n\n  input {\n    color: #fff;\n    font-size: 16px;\n    box-sizing: border-box;\n    display: block;\n    border: none;\n    width: 100%;\n    height: 100%;\n    padding: .5em 10px .5em 34px;\n    background: transparent;\n    transition: all .2s;\n\n    &:hover,\n    &:focus {\n      background: #303030;\n    }\n  }\n}\n\n\n// 著者\n// ===========================================================================\n%author {\n  display: table;\n  margin-bottom: 1px;\n}\n\n%authorPic {\n  vertical-align: middle;\n  display: table-cell;\n  padding-right: 5px;\n\n  img {\n    display: block;\n\n    @include max-screen( $breakpoint-middle ) {\n      width: 28px;\n      height: 28px;\n    }\n  }\n}\n\n%authorName {\n  font-size: 12px;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 5px 10px;\n\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 10px;\n    padding-left: 5px;\n    padding-right: 5px;\n  }\n}\n\n%authorPicList {\n  ul {\n    font-size: 0;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  li {\n    display: inline-block;\n    margin: 0 1px 1px 0;\n  }\n\n  img {\n    display: block;\n    \n    @include max-screen( $breakpoint-middle ) {\n      width: 28px;\n      height: 28px;\n    }\n  }\n}\n","/* ==========================================================================\n   offsetting an in-page anchor to adjust for fixed header\n   http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors\n   ========================================================================== */\n:target:before {\n  content: '';\n  overflow: auto;\n  position: static;\n  display: block;\n  width: 1px;\n  height: 56px; /* fixed header height*/\n  margin: -56px 0 0; /* negative fixed header height */\n  @include max-screen( $breakpoint-middle ) {\n    height: 35px;\n    margin-top: -35px;\n  }\n}\n\n/* ==========================================================================\n   pageHeaderPlacer\n   ========================================================================== */\n.CG2-pageHeaderPlacer{\n  height: 56px;\n  background: #000;\n}\n@include max-screen( $breakpoint-middle ) {\n  .CG2-pageHeaderPlacer{\n    height: 35px;\n  }\n}\n\n\n/* ==========================================================================\n   pageHeader\n   ========================================================================== */\n/*\n---\nname: Page Header\ncategory:\n  - Templates\ntag:\n  - Template\ntemplateItem:\n  - true\n---\n\n- `CG2-pageHeaderPlacer`を併用すると高さを確保することができる、高さ確保が不要なら`CG2-pageHeaderPlacer`を利用しない\n- 実際に利用するときには以下のコードから`style=\"position:relative;\"`を**取り除いて使う**\n\n## WWW用\n\n```html\n<div class=\"CG2-pageHeaderPlacer\">\n  <header class=\"CG2-pageHeader\" style=\"position:relative;\">\n    <div class=\"CG2-pageHeader__inner\">\n      <div class=\"CG2-pageHeader__logo\">\n        <a href=\"#\"><img src=\"../../../assets2/img/CG2-pageHeader/logo.svg\" alt=\"CodeGrid\" width=\"125\" height=\"24\"></a>\n      </div>\n      <div class=\"CG2-pageHeader__nav\">\n        <ul>\n          <li><a href=\"#\">料金</a></li>\n          <li><a href=\"#\">団体購読</a></li>\n          <li><a href=\"#\">よくある質問</a></li>\n          <li><a href=\"#\">書籍</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__buttons\">\n        <ul>\n          <li><a class=\"CG2-button CG2-button--primary CG2-button--thin\" href=\"#\">購読する</a></li>\n          <li><a href=\"#\">ログイン</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__opener\" data-drawer-toggle></div>\n    </div>\n  </header>\n</div>\n```\n\n## APP用\n\n```html\n<div class=\"CG2-pageHeaderPlacer\">\n  <header class=\"CG2-pageHeader\" style=\"position:relative;\">\n    <div class=\"CG2-pageHeader__inner\">\n      <div class=\"CG2-pageHeader__logo\">\n        <a href=\"#\"><img src=\"../../../assets2/img/CG2-pageHeader/logo.svg\" alt=\"CodeGrid\" width=\"125\" height=\"24\"></a>\n      </div>\n      <div class=\"CG2-pageHeader__appNav\">\n        <ul>\n          <li><a href=\"#\">最新記事一覧</a></li>\n          <li><a href=\"#\">お気に入り一覧</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__search\">\n        <div class=\"CG2-pageHeader__searchInner\">\n          <form>\n            <input type=\"search\">\n          </form>\n        </div>\n      </div>\n      <div class=\"CG2-pageHeader__buttons\">\n        <ul>\n          <li><a class=\"CG2-button CG2-button--primary CG2-button--thin\" href=\"#\">購読する</a></li>\n          <li><a href=\"#\">ログイン</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__opener\" data-drawer-toggle></div>\n    </div>\n  </header>\n</div>\n```\n\n\n## APP用 ログイン後\n\n```html\n<div class=\"CG2-pageHeaderPlacer\">\n  <header class=\"CG2-pageHeader\" style=\"position:relative;\">\n    <div class=\"CG2-pageHeader__inner\">\n      <div class=\"CG2-pageHeader__logo\">\n        <img src=\"../../../assets2/img/CG2-pageHeader/logo.svg\" alt=\"CodeGrid\" width=\"125\" height=\"24\">\n      </div>\n      <div class=\"CG2-pageHeader__appNav\">\n        <ul>\n          <li><a href=\"#\">最新記事一覧</a></li>\n          <li><a href=\"#\">お気に入り一覧</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageHeader__search\">\n        <div class=\"CG2-pageHeader__searchInner\">\n          <form>\n            <input type=\"search\">\n          </form>\n        </div>\n      </div>\n      <div class=\"CG2-pageHeader__user\">\n        <div class=\"CG2-pageHeader__userHeader\">\n          <div class=\"CG2-pageHeader__userName\">gurio@pxgrid.example</div>\n          <div class=\"CG2-pageHeader__userAvatar\">\n            <img src=\"__dummy__112x112\" alt=\"\" width=\"56\" height=\"56\">\n          </div>\n          <div class=\"CG2-pageHeader__userOpener\"></div>\n        </div>\n        <div class=\"CG2-pageHeader__userMenu\">\n          <div class=\"CG2-pageHeader__userMenuInner\">\n            <ul>\n              <li><a class=\"CG2-button CG2-button--fullWidth CG2--alignCenter\" href=\"#\">設定</a></li>\n              <li><a class=\"CG2-button CG2-button--fullWidth CG2--alignCenter\" href=\"#\">ログアウト</a></li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </header>\n</div>\n```\n\n## 導線無し（フォーム途中など）\n\n```html\n<div class=\"CG2-pageHeaderPlacer\">\n  <header class=\"CG2-pageHeader\" style=\"position:relative;\">\n    <div class=\"CG2-pageHeader__inner\">\n      <div class=\"CG2-pageHeader__logo\">\n        <img src=\"../../../assets2/img/CG2-pageHeader/logo.svg\" alt=\"CodeGrid\" width=\"125\" height=\"24\">\n      </div>\n    </div>\n  </header>\n</div>\n```\n\n*/\n\n@keyframes wf1-pageHeader-onmounted {\n  0% {\n    overflow: hidden;\n    height: 0;\n  }\n  99% {\n    overflow: hidden;\n    height: 0;\n  }\n  100% {\n    overflow: visible;\n    height: auto;\n  }\n}\n@keyframes wf1-pageHeader-elastic-in {\n  0% {\n    height: 0;\n    opacity: 0;\n    transform: scale(0);\n  }\n  1% {\n    height: auto;\n  }\n  60% {\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes wf1-pageHeader-elastic-out {\n  0% {\n    opacity: 1;\n    visibility: visible;\n    height: auto;\n    transform: scale(1);\n  }\n  40% {\n    transform: scale(1.1);\n  }\n  99% {\n    visibility: visible;\n    height: auto;\n  }\n  100% {\n    opacity: 0;\n    visibility: hidden;\n    height: 0;\n    transform: scale(0);\n  }\n}\n\n\n.CG2-pageHeader{\n  @include clearfix();\n  position: fixed;\n  z-index: $z-pageHeader;\n  box-sizing: border-box;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 56px;\n  background: rgba( 0, 0, 0, 0.8 );\n  transform: translate3d( 0, 0, 0 );\n  @include max-screen( $breakpoint-middle ) {\n    height: 35px;\n    padding: 0 10px;\n    transition: transform .4s;\n    html.js-drawer--show & {\n      transform: translateX( -100% ) translateX( 50px );\n    }\n  }\n  @media print {\n    position: relative;\n    height: 0;\n    border-bottom: 56px solid #191919;\n  }\n}\n  .CG2-pageHeader__inner{\n    position: relative;\n    display: flex;\n    align-items: center;\n    max-width: 1100px;\n    height: 100%;\n    padding: 0 28px;\n    margin: 0 auto;\n    @include max-screen( $breakpoint-middle ) {\n      padding: 0 28px 0 0;\n    }\n  }\n    .CG2-pageHeader__logo{\n      margin: 0 30px 0 0;\n      img{\n        display: block;\n      }\n      @include max-screen( $breakpoint-middle ) {\n        img{\n          width: 90px;\n          height: auto;\n        }\n      }\n    }\n    .CG2-pageHeader__nav{\n      text-align: center;\n      margin: 0 auto;\n      @include max-screen( $breakpoint-middle ) {\n        display: none;\n      }\n      ul{\n        font-size: 0;\n        list-style: none;\n        display: inline-block;\n        padding: 0;\n        margin: 0;\n        &:before{\n          content: '';\n          display: inline-block;\n          width: 0;\n          height: 56px;\n          vertical-align: middle;\n        }\n      }\n      li{\n        font-size: 1rem;\n        vertical-align: middle;\n        display: inline-block;\n        padding: 0;\n        margin: 0 10px;\n      }\n      a{\n        color: #999;\n        font-size: 14px;\n        text-decoration: none;\n        display: inline-block;\n        padding: 10px;\n        margin: -10px;\n        &:hover{\n          color: #fff;\n        }\n      }\n      @media print {\n        display: none;\n      }\n    }\n    .CG2-pageHeader__appNav{\n      @include max-screen( $breakpoint-middle ) {\n        display: none;\n      }\n      ul{\n        font-size: 0;\n        list-style: none;\n        padding: 0;\n        margin: 0;\n        &:before{\n          content: '';\n          display: inline-block;\n          width: 0;\n          height: 56px;\n          vertical-align: middle;\n          @include max-screen( $pageMaxWidth ) {\n            content: none;\n          }\n        }\n      }\n      li{\n        font-size: .875rem;\n        vertical-align: middle;\n        display: inline-block;\n        padding: 0;\n        margin: 0 10px;\n        @include max-screen( $pageMaxWidth ) {\n          font-size: .75rem;\n        }\n      }\n      a{\n        color: #999;\n        text-decoration: none;\n        display: inline-block;\n        padding: 10px;\n        margin: -10px;\n        &:hover{\n          color: #fff;\n        }\n      }\n      @media print {\n        display: none;\n      }\n    }\n    .CG2-pageHeader__search{\n      @extend %search;\n      width: 280px;\n      height: 32px;\n      margin: 0 0 0 auto;\n      border :1px solid #777;\n      background: transparent;\n      @include max-screen( $breakpoint-middle ) {\n        display: none;\n      }\n      @media print {\n        display: none;\n      }\n    }\n      .CG2-pageHeader__searchInner{\n        @extend %searchInner;\n        input{\n          line-height: 22px;\n          height: 30px;\n          padding: 4px 10px 4px 30px;\n          &:hover,\n          &:focus{\n            background: #303030;\n          }\n        }\n      }\n    .CG2-pageHeader__buttons{\n      margin: 0 0 0 30px;\n      @include max-screen( $breakpoint-middle ) {\n        display: none;\n      }\n      @media print {\n        display: none;\n      }\n      ul{\n        list-style: none;\n        padding: 0;\n        margin: 0;\n        &:before{\n          content: '';\n          display: inline-block;\n          width: 0;\n          height: 56px;\n          vertical-align: middle;\n        }\n      }\n      li{\n        font-size: 14px;\n        vertical-align: middle;\n        display: inline-block;\n        padding: 0;\n        margin: 0 10px;\n      }\n      a:not(.CG2-button){\n        color: #777;\n        font-size: 14px;\n        text-decoration: none;\n        display: inline-block;\n        padding: 10px;\n        margin: -10px;\n        &:hover{\n          color: #fff;\n        }\n      }\n    }\n    .CG2-pageHeader__user{\n      position: relative;\n      margin: 0 0 0 30px;\n      @include max-screen( $breakpoint-base ) {\n        margin-left: 20px;\n      }\n      @include max-screen( $breakpoint-middle ) {\n        display: none;\n      }\n    }\n      .CG2-pageHeader__userHeader{\n        display: table;\n        table-layout: fixed;\n        width: 280px;\n        height: 56px;\n        cursor: pointer;\n      }\n        .CG2-pageHeader__userName{\n          color: #777;\n          font-size: 14px;\n          text-align: right;\n          white-space: nowrap;\n          vertical-align: middle;\n          box-sizing: border-box;\n          display: table-cell;\n          padding-right: 20px;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n        .CG2-pageHeader__userAvatar{\n          vertical-align: middle;\n          box-sizing: border-box;\n          display: table-cell;\n          width: 56px;\n          img{\n            display: block;\n            width: 56px;\n            height: 56px;\n          }\n        }\n        .CG2-pageHeader__userOpener{\n          color: #eee;\n          text-align: center;\n          display: table-cell;\n          vertical-align: middle;\n          width: 20px;\n          padding: 0 6px;\n          &:after{\n            @include icon( down );\n            position: relative;\n            transition: transform .4s cubic-bezier(.3, 2, .6, 1 );\n            .CG2-pageHeader__userHeader:hover &,\n            .CG2-pageHeader__userHeader:focus &{\n              color: #fff;\n              transform: translateY( 2px );\n              transition-duration: .4s;\n            }\n          }\n        }\n        .CG2-pageHeader__userMenu{\n          overflow: hidden;\n          position: absolute;\n          // display: none;\n          width: 100%;\n          height: 0;\n          margin-top: 2px;\n          animation-name: wf1-pageHeader-onmounted;\n          animation-fill-mode: forwards;\n          animation-duration: .3s;\n          &.CG2-pageHeader__userMenu--show{\n            overflow: visible;\n            height: auto;\n            .CG2-pageHeader__userMenuInner{\n              visibility: visible;\n              animation-name: wf1-pageHeader-elastic-in;\n            }\n          }\n        }\n          .CG2-pageHeader__userMenuInner{\n            visibility: hidden;\n            box-sizing: border-box;\n            padding: 10px;\n            border: 1px solid rgba( 0, 0, 0, 0.1 );\n            border-radius: 2px;\n            box-shadow: 0 3px 12px rgba( 0, 0, 0, 0.1 );\n            background: #fff;\n            transform-origin: 150px 0;\n            animation-name: wf1-pageHeader-elastic-out;\n            animation-duration: .3s;\n            animation-fill-mode: forwards;\n            &:before{\n              content: \"\";\n              position: absolute;\n              top: -14px;\n              right: 38px;\n              display: block;\n              border: 7px solid transparent;\n              border-bottom-color: #fff;\n            }\n            ul{\n              list-style: none;\n              padding: 0;\n              margin: 0;\n            }\n            li{\n              margin: 0;\n              &+li{\n                margin-top: 10px;\n              }\n            }\n          }\n    .CG2-pageHeader__opener{\n      @include max-screen( $breakpoint-middle ) {\n        color: #fff;\n        font-size: 20px;\n        text-align: center;\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 20px;\n        height: 35px;\n        padding: 0 10px;\n        &:after{\n          @include icon( 'hamburger' );\n          line-height: 35px;\n          display: block;\n        }\n      }\n    }\n\n/* ==========================================================================\n   pageFooter\n   ========================================================================== */\n/*\n---\nname: Page Footer\ncategory:\n  - Templates\ntag:\n  - Template\ntemplateItem:\n  - true\n---\n\n```html\n<footer class=\"CG2-pageFooter\">\n  <div class=\"CG2-pageFooter__inner\">\n    <div class=\"CG2-pageFooter__wwwNav\">\n      <div class=\"CG2-pageFooter__logo\">\n        <img src=\"__dummy__128x32\" alt=\"CodeGrid\" width=\"128\" height=\"32\">\n      </div>\n      <ul>\n        <li><a href=\"#\">CodeGridについて</a></li>\n        <li><a href=\"#\">料金</a></li>\n        <li><a href=\"#\">団体購読</a></li>\n        <li><a href=\"#\">よくある質問</a></li>\n        <li><a href=\"#\">書籍</a></li>\n        <li><a href=\"#\">購読する</a></li>\n      </ul>\n    </div>\n\n    <div class=\"CG2-pageFooter__appNav\">\n      <div class=\"CG2-pageFooter__appNavHeader\">\n        <div class=\"CG2-pageFooter__appNavHeading\">\n          <a href=\"#\">アプリトップ</a>\n        </div>\n        <div class=\"CG2-pageFooter__appNavSearch\">\n          <div class=\"CG2-pageFooter__appNavSearchInner\">\n            <form>\n              <input type=\"search\">\n            </form>\n          </div>\n        </div>\n      </div>\n      <div class=\"CG2-pageFooter__appNavList\">\n        <ul>\n          <li><a href=\"#\">最新記事一覧</a></li>\n          <li><a href=\"#\">おすすめ記事一覧</a></li>\n          <li><a href=\"#\">お気に入り登録記事一覧</a></li>\n          <li><a href=\"#\">無料公開記事一覧</a></li>\n          <li><a href=\"#\">シリーズ一覧</a></li>\n          <li><a href=\"#\">著者一覧</a></li>\n        </ul>\n      </div>\n      <div class=\"CG2-pageFooter__appNavCategory\">\n        <ul>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-architecture\"></span>設計</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-future\"></span>未来・次世代</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-talk\"></span>座談会</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-mastering\"></span>実践</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-elementary\"></span>入門</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-standards\"></span>仕様解説</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-work-style\"></span>仕事術</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-report\"></span>レポート</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-design\"></span>デザイン</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-discussion\"></span>ディスカッション</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-interview\"></span>インタビュー</a></li>\n          <li><a href=\"#\"><span class=\"CG2-icon-cat-survey\"></span>アンケート</a></li>\n        </ul>\n      </div>\n    </div>\n\n    <div class=\"CG2-pageFooter__legalNav\">\n      <ul>\n        <li><a href=\"#\">公式Twitter</a></li>\n        <li><a href=\"#\">お問い合わせ</a></li>\n        <li><a href=\"#\">利用規約</a></li>\n        <li><a href=\"#\">プライバシーポリシー</a></li>\n        <li><a href=\"#\">特定商取引法に基づく表示</a></li>\n      </ul>\n      <div class=\"CG2-pageFooter__company\"><a href=\"#\">運営会社<img src=\"../../../assets2/img/CG2-pageFooter/pxg-logo.svg\" alt=\"PixelGrid\" width=\"128\" height=\"32\"></a></div>\n    </div>\n  </div>\n<!-- /.CG2-pageFooter --></footer>\n```\n\n## 導線無し（フォーム途中など）\n\n```html\n<footer class=\"CG2-pageFooter CG2-pageFooter--simple\">\n  <div class=\"CG2-pageFooter__inner\">\n    <div class=\"CG2-pageFooter__legalNav\">\n      <div class=\"CG2-pageFooter__company\">運営会社<img src=\"../../../assets2/img/CG2-pageFooter/pxg-logo.svg\" alt=\"PixelGrid\" width=\"128\" height=\"32\"></div>\n    </div>\n  </div>\n<!-- /.CG2-pageFooter --></footer>\n```\n\n*/\n.CG2-pageFooter{\n  color: #777;\n  font-size: 12px;\n  padding: 60px 0;\n  margin-top: 50px;\n  background: #191919;\n  @include max-screen( $breakpoint-base ) {\n    padding-left: 28px;\n    padding-right: 28px;\n  }\n  &.CG2-pageFooter--simple{\n    padding: 30px 0;\n  }\n  @include max-screen( $breakpoint-small ) {\n    padding: 30px 0;\n    .CG2-container + & {\n      margin-top: 0;\n    }\n  }\n  @media print {\n    position: relative;\n    z-index: 1;\n    &:after{\n      content: '';\n      position: absolute;\n      z-index: -1;\n      top: 0;\n      left: 0;\n      right: 0;\n      border-bottom: 180px solid #191919;\n    }\n  }\n  a{\n    color: #777;\n    text-decoration: none;\n    display: block;\n    transition: all .2s;\n    &:hover{\n      color: #fff;\n    }\n  }\n}\n  .CG2-pageFooter__inner{\n    table-layout: fixed;\n    display: table;\n    max-width: 1016px + 28 + 28;\n    width: auto;\n    margin: 0 auto;\n    @include max-screen( $breakpoint-base ) {\n      display: block;\n    }\n    @media print {\n      display: block;\n    }\n  }\n    .CG2-pageFooter__wwwNav{\n      vertical-align: top;\n      box-sizing: border-box;\n      display: table-cell;\n      width: 20%;\n      padding: 40px 28px;\n      @include max-screen( $breakpoint-base ) {\n        display: table;\n        width: 100%;\n        padding: 0;\n        margin: 0 0 20px;\n      }\n      @include max-screen( $breakpoint-small ) {\n        display: none;\n      }\n      @media print {\n        display: none;\n      }\n    }\n      .CG2-pageFooter__logo{\n        margin-bottom: 32px;\n        img{\n          display: block;\n        }\n        @include max-screen( $breakpoint-base ) {\n          display: table-cell;\n          width: 1%;\n          padding-right: 28px;\n        }\n        @include max-screen( $breakpoint-small ) {\n          display: none;\n        }\n        @media print {\n          display: none;\n        }\n      }\n    .CG2-pageFooter__appNav{\n      vertical-align: top;\n      box-sizing: border-box;\n      display: table-cell;\n      width: 60%;\n      padding: 38px 58px;\n      border: 1px solid #282828;\n      @include max-screen( $breakpoint-base ) {\n        @include clearfix();\n        display: block;\n        width: auto;\n        padding: 20px;\n        margin: 20px 0;\n      }\n      @include max-screen( $breakpoint-small ) {\n        display: none;\n      }\n      @media print {\n        display: none;\n      }\n    }\n    .CG2-pageFooter__legalNav{\n      vertical-align: top;\n      box-sizing: border-box;\n      display: table-cell;\n      width: 20%;\n      padding: 90px 28px 40px;\n      .CG2-pageFooter--simple &{\n        display: block;\n        width: auto;\n        padding: 30px 28px 50px;\n      }\n      @include max-screen( $breakpoint-base ) {\n        display: block;\n        width: auto;\n        padding: 0;\n        margin: 20px 0;\n      }\n      @include max-screen( $breakpoint-base ) {\n        &,\n        .CG2-pageFooter--simple &{\n          display: block;\n          width: auto;\n          padding: 0;\n        }\n      }\n      @media print {\n        &,\n        .CG2-pageFooter--simple &{\n          display: block;\n          width: auto;\n          padding: 0;\n        }\n      }\n    }\n//---\n    .CG2-pageFooter__wwwNav{\n      ul{\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        @include max-screen( $breakpoint-base ) {\n          vertical-align: middle;\n          display: table-cell;\n        }\n      }\n      li{\n        margin: 12px 0 0;\n        @include max-screen( $breakpoint-base ) {\n          display: inline-block;\n          margin: 4px 16px 4px 0;\n        }\n      }\n      a{\n        &:before{\n          @include icon( 'right' );\n          margin: 0 .4em .1em 0;\n        }\n      }\n    }\n// .CG2-pageFooter__appNav\n.CG2-pageFooter__appNavHeader{\n  display: table;\n  width: 100%;\n  margin-bottom: 32px;\n}\n  .CG2-pageFooter__appNavHeading{\n    font-size: 20px;\n    line-height: 1.2;\n    vertical-align: middle;\n    display: table-cell;\n    width: 44.99%;\n    a{\n      &:before{\n        @include icon( 'right' );\n        margin: 0 .4em .1em 0;\n      }\n    }\n  }\n  .CG2-pageFooter__appNavSearch{\n    vertical-align: middle;\n    display: table-cell;\n    width: 54.99em;\n    background: #303030;\n  }\n    .CG2-pageFooter__appNavSearchInner{\n      position: relative;\n      &:before{\n        @include icon( 'search' );\n        color: #777;\n        font-size: 12px;\n        line-height: 0;\n        position: absolute;\n        top: 50%;\n        left: 10px;\n      }\n      input{\n        color: #fff;\n        font-size: 14px;\n        box-sizing: border-box;\n        display: block;\n        border: none;\n        width: 100%;\n        height: 100%;\n        padding: .4em 10px .4em 30px;\n        background: #303030;\n      }\n    }\n.CG2-pageFooter__appNavList{\n  float: left;\n  width: 44.99%;\n  ul{\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  li{\n    margin: 0 0 12px;\n  }\n  a{\n    &:before{\n      @include icon( 'right' );\n      margin: 0 .4em .1em 0;\n    }\n  }\n}\n.CG2-pageFooter__appNavCategory{\n  float: left;\n  width: 54.99%;\n  ul{\n    column-count: 2;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n  }\n  li{\n    margin: 0 0 12px;\n  }\n  a{}\n  span[class^=\"CG2-icon-cat\"]{\n    font-size: 18px;\n    line-height: 0;\n    margin: 0 .4em 0 0;\n  }\n}\n\n//---\n.CG2-pageFooter__legalNav{\n  ul{\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    @include max-screen( $breakpoint-base ) {\n      text-align: center;\n    }\n    @include max-screen( $breakpoint-small ) {\n      display: none;\n    }\n    @media print {\n      display: none;\n    }\n  }\n  li{\n    margin: 12px 0 0;\n    @include max-screen( $breakpoint-base ) {\n      display: inline-block;\n      margin: 5px 10px 5px 0;\n    }\n  }\n  a{}\n}\n.CG2-pageFooter__company{\n  margin: 12px 0 0;\n  img{\n    vertical-align: middle;\n    width: 80px;\n    margin: -5px 0 0 5px;\n  }\n  .CG2-pageFooter--simple &{\n    font-size: 12px;\n    text-align: center;\n    margin-top: 0;\n    img{\n      display: block;\n      width: 120px;\n      height: 30px;\n      margin: 5px auto;\n    }\n  }\n  @include max-screen( $breakpoint-base ) {\n    text-align: center;\n  }\n  @include max-screen( $breakpoint-small ) {\n    &,\n    .CG2-pageFooter--simple &{\n      font-size: 10px;\n      text-align: center;\n      margin-top: 0;\n      a{\n        color: #fff;\n        display: table;\n        margin: 0 auto;\n      }\n      img{\n        display: block;\n        width: 100px;\n        height: 25px;\n        margin: 5px auto;\n      }\n    }\n  }\n  @media print {\n    &,\n    .CG2-pageFooter--simple &{\n      font-size: 10px;\n      text-align: center;\n      margin-top: 0;\n      a{\n        color: #fff;\n        display: table;\n        margin: 0 auto;\n      }\n      img{\n        display: block;\n        width: 100px;\n        height: 25px;\n        margin: 5px auto;\n      }\n    }\n  }\n}\n\n\n/* ==========================================================================\n   CG2-drawer\n   ========================================================================== */\n/*\n---\nname: Drawer\ncategory:\n  - Templates\ntag:\n  - Template\ntemplateItem:\n  - true\n---\n\n- スモールスクリーン時のみ有効\n- CG2-pageHeader 内のトグルボタンで表示\n\n```html\n<div class=\"CG2-drawer\">\n  <div class=\"CG2-drawer__panel\">\n    <div class=\"CG2-drawer__panelViewport\">\n      <div class=\"CG2-drawer__panelBody\">\n\n        <div class=\"CG2-drawerBody\">\n\n          <div class=\"CG2-drawerBody__user\">\n            <div class=\"CG2-drawerBody__userAvatar\">\n              <img src=\"__dummy__112x112\" alt=\"\" width=\"56\" height=\"56\">\n            </div>\n            <div class=\"CG2-drawerBody__userName\">gurio@pxgrid.example</div>\n          </div>\n\n          <div class=\"CG2-drawerBody__nav\">\n            <ul>\n              <li><a href=\"#\">アプリトップ</a></li>\n              <li><a href=\"#\">最新記事一覧</a></li>\n              <li><a href=\"#\">おすすめ記事一覧</a></li>\n              <li><a href=\"#\">お気に入り登録記事一覧</a></li>\n              <li><a href=\"#\">無料記事一覧</a></li>\n              <li><a href=\"#\">シリーズ一覧</a></li>\n              <li><a href=\"#\">著者一覧</a></li>\n            </ul>\n          </div>\n          <div class=\"CG2-drawerBody__userNav\">\n            <ul>\n              <li><a class=\"CG2-button CG2-button--primary CG2-button--fullWidth\" href=\"#\">購読する</a></li>\n              <li><a class=\"CG2-button CG2-button--fullWidth\" href=\"#\">ログイン</a></li>\n            </ul>\n          </div>\n          <div class=\"CG2-drawerBody__separator\"></div>\n          <div class=\"CG2-drawerBody__search\">\n            <div class=\"CG2-drawerBody__searchInner\">\n              <form>\n                <input type=\"search\">\n              </form>\n            </div>\n          </div>\n          <div class=\"CG2-drawerBody__nav\">\n            <ul>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-elementary\"></span>入門</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-practice\"></span>実践</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-standards\"></span>仕様解説</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-talk\"></span>座談会</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-architecture\"></span>設計</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-report\"></span>レポート</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-future\"></span>未来・次世代</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-workstyle\"></span>仕事術</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-survey\"></span>アンケート</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-design\"></span>デザイン</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-interview\"></span>インタビュー</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-cat-discussion\"></span>ディカッション</a></li>\n            </ul>\n          </div>\n          <div class=\"CG2-drawerBody__separator\"></div>\n          <div class=\"CG2-drawerBody__nav\">\n            <ul>\n              <li><a href=\"#\">CodeGridについて</a></li>\n              <li><a href=\"#\">料金</a></li>\n              <li><a href=\"#\">団体購読</a></li>\n              <li><a href=\"#\">よくある質問</a></li>\n              <li><a href=\"#\">書籍</a></li>\n              <li><a href=\"#\">購読する</a></li>\n              <li class=\"CG2-drawerBody__navItem--icon\"><a href=\"#\"><span class=\"CG2-icon-twitter\"></span>公式Twitter</a></li>\n            </ul>\n          </div>\n          <div class=\"CG2-drawerBody__separator\"></div>\n          <div class=\"CG2-drawerBody__nav\">\n            <ul>\n              <li class=\"CG2-drawerBody__navItem--plane\"><a href=\"#\">お問い合わせ</a></li>\n              <li class=\"CG2-drawerBody__navItem--plane\"><a href=\"#\">利用規約</a></li>\n              <li class=\"CG2-drawerBody__navItem--plane\"><a href=\"#\">プライバシーポリシー</a></li>\n              <li class=\"CG2-drawerBody__navItem--plane\"><a href=\"#\">特定商法に基づく表示</a></li>\n            </ul>\n          </div>\n\n        </div>\n      </div>\n\n    </div>\n    <div class=\"CG2-drawer__panelLeft\" data-drawer-hide></div>\n  </div>\n  <div class=\"CG2-drawer__bg\" data-drawer-close></div>\n</div>\n```\n\n*/\n$drawerLeft: 50px;\n\n@include min-screen( $breakpoint-middle ) {\n  html{\n    padding-right: 0 !important;\n  }\n}\n\n@include max-screen( $breakpoint-middle ) {\n  body {\n    box-sizing: content-box;\n    overflow-y: scroll;\n  }\n  html.js-drawer--show {\n    overflow: hidden;\n    height: 100%;\n  }\n  html.js-drawer--show body {\n    overflow: hidden;\n    max-height: 100%;\n  }\n}\n\n.CG2-drawer {\n  display: none;\n  @include max-screen( $breakpoint-middle ) {\n    display: block;\n    pointer-events: none;\n    html.js-drawer--show &{\n      pointer-events: auto;\n    }\n  }\n}\n\n.CG2-drawer__panel {\n  position: fixed;\n  z-index: -1;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  background: rgba( 0, 0, 0, 0 );\n  transform: translate3d( ( -$drawerLeft ), 0, 0 );\n  transition: transform .4s;\n}\n.CG2-drawer__panel, x::-ms-fill {\n  transform: translateX( ( -$drawerLeft ) ); /* IE10, 11, avoid using GPU feature */\n}\n\nhtml:not( .js-drawer--show ) .CG2-drawer__panel {\n  animation-name: zIndexOut;\n  animation-duration: .4s;\n  animation-iteration-count: 1;\n}\nhtml.js-drawer--show .CG2-drawer__panel {\n  margin-left: 0;\n  z-index: $z-pageHeader - 1;\n  transform: translateX( -100% );\n}\nhtml.js-drawer--dragging,\nhtml.js-drawer--dragging * {\n  cursor: -webkit-grabbing;\n  cursor: -moz-grabbing;\n  cursor: grabbing;\n}\nhtml:not( .js-drawer--dragging ) .CG2-drawer__panel {\n  transition: transform .4s, margin .1s;\n}\n.CG2-drawer__panel:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: $drawerLeft;\n  background: #191919;\n}\n.CG2-drawer__panelViewport {\n  overflow: auto;\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  padding-left: $drawerLeft;\n  margin: 0 0 0 auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.CG2-drawer__panelBody {\n  box-sizing: border-box;\n  min-height: 100%;\n  box-shadow: -2px 2px 4px rgba( 0, 0, 0, 0 );\n  transition: box-shadow .4s;\n}\nhtml.js-drawer--show .CG2-drawer__panelBody {\n  box-shadow: -2px 2px 4px rgba( 0, 0, 0, 0.3 );\n}\n\n.CG2-drawer__panelLeft{\n  position: absolute;\n  top: 0;\n  width: 50px;\n  height: 100%;\n  background: rgba( 0, 0, 0, 0 );\n}\n\n\n.CG2-drawer__bg {\n  position: fixed;\n  z-index: -1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba( 0, 0, 0, 0 );\n    transition: background .4s;\n  html:not( .js-drawer--show ) & {\n    animation-name: bgOut;\n    animation-duration: .4s;\n    animation-iteration-count: 1;\n  }\n  html.js-drawer--show & {\n    z-index: $z-pageHeader - 2;\n    background: rgba( 0, 0, 0, 0.3 );\n  }\n}\n\n\n@keyframes bgOut {\n    0% { z-index:  $z-pageHeader - 2; }\n   99% { z-index:  $z-pageHeader - 2; }\n  100% { z-index: -1; }\n}\n\n@keyframes zIndexOut {\n    0% { z-index:  $z-pageHeader - 1; }\n   99% { z-index:  $z-pageHeader - 1; }\n  100% { z-index: -1; }\n}\n\n\n/* ==========================================================================\n   CG2-drawerBody\n   ========================================================================== */\n.CG2-drawerBody{\n  font-size: 16px;\n  padding: 40px 20px 10px;\n  -webkit-font-smoothing: subpixel-antialiased;\n  -moz-osx-font-smoothing: auto;\n  ul{\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n    li{\n      margin: 0;\n    }\n      a{}\n}\n\n.CG2-drawerBody__user{\n  color: #777;\n  table-layout: fixed;\n  display: table;\n  width: 100%;\n  margin: -20px 0 20px;\n}\n  .CG2-drawerBody__userAvatar{\n    vertical-align: middle;\n    box-sizing: border-box;\n    display: table-cell;\n    padding-right: 12px;\n    width: 44px;\n    img{\n      display: block;\n      width: 32px;\n      height: 32px;\n    }\n  }\n  .CG2-drawerBody__userName{\n    @include wordbreak();\n    font-size: 12px;\n    vertical-align: middle;\n    display: table-cell;\n  }\n\n.CG2-drawerBody__nav{\n  margin-bottom: 30px;\n  ul{\n    margin-left: 5px;\n  }\n    li{\n      margin-bottom: 8px;\n    }\n      a{\n        color: #777;\n        text-decoration: none;\n        position: relative;\n        display: block;\n        padding-left: 26px;\n        &:before{\n          @include icon( 'right' );\n          font-size: 16px;\n          line-height: 0;\n          position: absolute;\n          top: 50%;\n          left: 3px;\n        }\n      }\n    li.CG2-drawerBody__navItem--icon{\n      a{\n        &:before{\n          content: none;\n        }\n        span[class^=\"CG2-icon\"]{\n          position: static;\n          &:before{\n            font-size: 20px;\n            line-height: 0;\n            position: absolute;\n            left: -2px;\n            top: 50%;\n          }\n        }\n      }\n    }\n    li.CG2-drawerBody__navItem--plane{\n      a{\n        &:before{\n          content: none;\n        }\n      }\n    }\n}\n.CG2-drawerBody__userNav{\n  ul{}\n    li{\n      margin-top: 10px;\n    }\n      a.CG2-button{\n        font-size: 16px;\n        text-align: center;\n        padding-top: .6em;\n        padding-bottom: .6em;\n      }\n}\n.CG2-drawerBody__separator{\n  border-top: 1px solid #5c5c5c;\n  height: 0;\n  margin: 30px -15px;\n}\n\n.CG2-drawerBody__search{\n  @extend %search;\n  margin: 20px 0;\n  height: 40px;\n}\n.CG2-drawerBody__searchInner{\n  @extend %searchInner;\n  &:before{\n    font-size: 20px;\n  }\n  input{\n    height: 40px;\n  }\n}\n\n\n/* ==========================================================================\n   CG2-container\n   ========================================================================== */\n/*\n---\nname: Container\ncategory:\n  - Templates\ntag:\n  - Template\ntemplateItem:\n  - true\n---\n\n```html\n<div class=\"CG2-container\">\n  <div class=\"CG2-container__inner\">\n    コンテンツ配置/編集 領域\n  </div>\n</div>\n\n<div class=\"CG2-container\">\n  <div class=\"CG2-container__inner\">\n    コンテンツ配置/編集 領域\n  </div>\n</div>\n\n<div class=\"CG2-container\">\n  <div class=\"CG2-container__inner\">\n    コンテンツ配置/編集 領域\n  </div>\n</div>\n```\n\n*/\n.CG2-container,\n.CG2-container+.CG2-container+.CG2-container,\n.CG2-container+.CG2-container+.CG2-container+.CG2-container+.CG2-container,\n.CG2-container+.CG2-container+.CG2-container+.CG2-container+.CG2-container+.CG2-container+.CG2-container{\n  background: transparent;\n}\n.CG2-container+.CG2-container,\n.CG2-container+.CG2-container+.CG2-container+.CG2-container,\n.CG2-container+.CG2-container+.CG2-container+.CG2-container+.CG2-container+.CG2-container{\n  background: #eee;\n}\n.CG2-container__inner{\n  box-sizing: border-box;\n  max-width: 1016px;\n  padding: 40px 28px;\n  margin: 0 auto;\n  @include max-screen( $breakpoint-middle ) {\n    width: auto;\n    padding: 30px 20px;\n  }\n}\n","// clearfix\n// ========================================================================== */\n@mixin clearfix () {\n  &:before, &:after {\n    content: \"\";\n    display: table;\n  }\n  &:after {\n    clear: both;\n  }\n}\n\n\n// resetLink\n// ========================================================================== */\n@mixin resetLink {\n  color: inherit;\n}\n\n\n// wordbreak\n// ========================================================================== */\n@mixin wordbreak () {\n  white-space: normal;\n  word-break: break-all;\n}\n\n\n// tableToBlock\n// ========================================================================== */\n@mixin tableToBlock () {\n  table, tbody, tr {\n    @include clearfix();\n    display: block;\n  }\n  th, td {\n    float: left;\n    clear: left;\n  }\n}\n\n\n// blurry\n// ========================================================================== */\n@mixin blurry-parent () {\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  background: #000;\n}\n@mixin blurry () {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: -10px;\n  right: -10px;\n  bottom: -10px;\n  left: -10px;\n  background-position: 50% 50%;\n  background-size: cover;\n  transform: scale( 1.2, 1.2 );\n  opacity: .64;\n}\n// @mixin blurry--blurry () {\n//   filter: blur( 24px );\n// }\n","/* ==========================================================================\n   button\n   ========================================================================== */\n/*\n---\nname: button\ncategory:\n  - Nav-items\ntag:\n  - button\n---\nwork with both a and button tags\n```html\n<p>\n  <a class=\"CG2-button\" href=\"#\">button:a element</a>\n</p>\n<p>\n  <button class=\"CG2-button\" href=\"#\">button: button element</button>\n</p>\n```\nwith an icon\n```html\n<p>\n  <a class=\"CG2-button\" href=\"#\"><span class=\"CG2-icon-pxg\"></span>button</a>\n</p>\n```\nuse for Primary, Action, Setting\n```html\n<p>\n  <a class=\"CG2-button CG2-button--primary\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--action\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--setting\" href=\"#\">button</a>\n</p>\n```\nsizes\n```html\n<p>\n  <a class=\"CG2-button CG2-button--thin\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--large\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--fullWidth\" href=\"#\">button</a>\n</p>\n```\n\ndisabled\n`button`の時は`disabled`属性を明示、\nそれ以外(`a`など)の場合は、`aria-disabled=\"true\"`を明示\n```html\n<p>\n  <a class=\"CG2-button\" aria-disabled=\"true\" href=\"#\">button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--primary\" aria-disabled=\"true\" href=\"#\">primary button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--action\" aria-disabled=\"true\" href=\"#\">action button</a>\n</p>\n<p>\n  <a class=\"CG2-button CG2-button--setting\" aria-disabled=\"true\" href=\"#\">setting button</a>\n</p>\n```\n\nprogress\n```html\n<p>\n  <a class=\"CG2-button CG2-button--progress\" href=\"#\">button</a>\n</p>\n```\n*/\n.CG2-button {\n  color: #fff;\n  font-size: 14px;\n  text-decoration: none;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  border: 1px solid #777;\n  padding: 0.6em 1.8em;\n  border-radius: 2px;\n  background: #777;\n  box-shadow: 0 0 0 rgba( 0, 0, 0, 0.1 );\n  transition: all .2s;\n  &:hover:not( [disabled] ):not( [aria-disabled=\"true\"] ):not( .CG2-button--progress ),\n  &:focus:not( [disabled] ):not( [aria-disabled=\"true\"] ):not( .CG2-button--progress ) {\n    box-shadow: 0 0 3px #777;\n    background: lighten( #777, 10% );\n    transition: all .2s;\n  }\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 12px;\n  }\n  &.CG2-button--thin {\n    padding: 0.4em 1.8em;\n  }\n  &.CG2-button--large {\n    font-size: 20px;\n    text-align: center;\n    display: block;\n    width: 60%;\n    margin-left: auto;\n    margin-right: auto;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 18px;\n      padding-top: .3em;\n      padding-bottom: .3em;\n      width: auto;\n    }\n  }\n  &.CG2-button--fullWidth {\n    display: block;\n    width: 100%;\n  }\n  span[class^=\"CG2-icon\"] {\n    font-size: 20px;\n    margin-right: 5px;\n    &:first-child {\n      margin-left: -.6em;\n    }\n  }\n  // &.CG2-button--secondary {\n  //   background: #10a040;\n  // }\n  &.CG2-button--primary {\n    border-color: #10a040;\n    background: #10a040;\n    &:hover:not( [disabled] ):not( [aria-disabled=\"true\"] ),\n    &:focus:not( [disabled] ):not( [aria-disabled=\"true\"] ) {\n      box-shadow: 0 0 3px #10a040;\n      background: lighten( #10a040, 10% );\n    }\n  }\n  &.CG2-button--action {\n    border-color: #282828;\n    background: #282828;\n    &:hover:not( [disabled] ):not( [aria-disabled=\"true\"] ),\n    &:focus:not( [disabled] ):not( [aria-disabled=\"true\"] ) {\n      box-shadow: 0 0 3px #282828;\n      background: lighten( #282828, 10% );\n    }\n  }\n  &.CG2-button--setting {\n    border-color: #777;\n    background: #777;\n    &:hover:not( [disabled] ):not( [aria-disabled=\"true\"] ),\n    &:focus:not( [disabled] ):not( [aria-disabled=\"true\"] ) {\n      box-shadow: 0 0 3px #777;\n      background: lighten( #777, 10% );\n    }\n  }\n  &[disabled],\n  &[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    border-color: #999;\n    background: #dbdbdb;\n  }\n  &.CG2-button--progress {\n    color: transparent;\n    cursor: not-allowed;\n    &:before {\n      pointer-events: none;\n      content: '';\n      display: block;\n      position: absolute;\n      top: 5px;\n      right: 5px;\n      bottom: 5px;\n      left: 5px;\n      max-width: 100px;\n      margin: auto;\n      width: auto;\n      background-image: url( '../img/CG2-button/loading.svg' );\n      background-repeat: no-repeat;\n      background-position: 50% 50%;\n      background-size: contain;\n      transform-origin: 50% 50%;\n      animation: button--loading 1s linear infinite;\n    }\n  }\n}\n\n@keyframes button--loading {\n    0% { transform: rotate(   0deg ); }\n  100% { transform :rotate( 360deg ); }\n}\n\n\n/* ==========================================================================\n   buttonContainer\n   ========================================================================== */\n/*\n---\nname: buttonContainer\ncategory:\n  - Nav-items\ntag:\n  - button\n---\n\n```html\n<div class=\"CG2-buttonContainer\">\n  <ul>\n    <li><a class=\"CG2-button CG2-button--primary\" href=\"#\">button 1</a></li>\n    <li><a class=\"CG2-button\" href=\"#\">button 2</a></li>\n  </ul>\n</div>\n```\n左寄せ\n```html\n<div class=\"CG2-buttonContainer CG2-buttonContainer--pullLeft\">\n  <ul>\n    <li><a class=\"CG2-button CG2-button--primary\" href=\"#\">button 1</a></li>\n    <li><a class=\"CG2-button\" href=\"#\">button 2</a></li>\n  </ul>\n</div>\n```\nラージスクリーン時full width\n```html\n<div class=\"CG2-buttonContainer\">\n  <ul>\n    <li class=\"CG2-buttonContainer__item--full\"><a class=\"CG2-button CG2-button--primary\" href=\"#\">button 1</a></li>\n    <li><a class=\"CG2-button\" href=\"#\">button 2</a></li>\n  </ul>\n</div>\n```\n*/\n.CG2-buttonContainer {\n  margin: 20px 0;\n  ul {\n    font-size: 0;\n    list-style: none;\n    text-align: center;\n    padding: 0;\n    margin: 0;\n  }\n  &.CG2-buttonContainer--pullLeft ul {\n    text-align: left;\n  }\n  li {\n    font-size: 1rem;\n    display: inline-block;\n    margin: 0 8px;\n    &.CG2-buttonContainer__item--full {\n      display: block;\n      margin: 0 0 8px;\n    }\n    @include max-screen( $breakpoint-middle ) {\n      display: block;\n    }\n  }\n  &.CG2-buttonContainer--pullLeft li {\n    margin: 0 16px 0 0;\n  }\n  @include max-screen( $breakpoint-middle ) {\n    li,\n    &.CG2-buttonContainer--pullLeft li {\n      margin: 0 0 5px;\n    }\n  }\n  .CG2-button {\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 16px;\n      text-align: center;\n      padding: .4em 10px;\n      width: 100%;\n    }\n  }\n}\n\n\n/* ==========================================================================\n   header1\n   ========================================================================== */\n/*\n---\nname: header1\ncategory:\n  - Content\ntag:\n  - content\n---\n\n見出しレベルは文章の構成に応じて変更する。\n\n```html\n<div class=\"CG2-header1\">\n  <h1 class=\"CG2-header1__heading\">Heading text 1</h1>\n</div>\n```\n*/\n.CG2-header1 {\n  padding: 0 28px 30px;\n  border-bottom: 1px solid #282828;\n  margin: 60px -28px 30px;\n  &:first-child {\n    margin-top: 0;\n  }\n  @include max-screen( $breakpoint-middle ) {\n    padding: 0 10px 10px;\n    margin: 20px -10px 30px;\n    &:first-child {\n      margin-top: 20px;\n    }\n  }\n}\n.CG2-header1__heading {\n  color: #282828;\n  font-size: 32px;\n  font-family: $fontSerif;\n  font-feature-settings: \"palt\";\n  font-weight: normal;\n  line-height: 1.2;\n  margin: 0;\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 20px;\n  }\n}\n\n\n/* ==========================================================================\n   header2\n   ========================================================================== */\n/*\n---\nname: header2\ncategory:\n  - Content\ntag:\n  - content\n---\n\n見出しレベルは文章の構成に応じて変更する。\n\n```html\n<div class=\"CG2-header2\">\n  <h3 class=\"CG2-header2__heading\">Heading text 2</h3>\n</div>\n```\n*/\n.CG2-header2 {\n  margin: 60px 0 15px;\n  @include max-screen( $breakpoint-middle ) {\n    margin: 30px 0 10px;\n  }\n}\n.CG2-header2__heading {\n  font-size: 24px;\n  font-weight: normal;\n  margin: 0;\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 16px;\n  }\n}\n\n\n/* ==========================================================================\n   header3\n   ========================================================================== */\n/*\n---\nname: header3\ncategory:\n  - Content\ntag:\n  - content\n---\n\n見出しレベルは文章の構成に応じて変更する。\n\n```html\n<div class=\"CG2-header3\">\n  <h3 class=\"CG2-header3__heading\">Heading text 3</h3>\n</div>\n```\n*/\n.CG2-header3 {}\n\n.CG2-header3__heading {\n  font-size: 16px;\n  font-weight: bold;\n  margin: 40px 0 15px;\n}\n\n\n/* ==========================================================================\n   leadText\n   ========================================================================== */\n/*\n---\nname: leadtext\ncategory:\n  - Content\ntag:\n  - content\n---\n\n見出しと判断されるものには見出しレベルを付与する。\n\n```html\n<div class=\"CG2-leadText\">LeadText</div>\n```\n*/\n.CG2-leadText {\n  font-size: 32px;\n  font-family: $fontSerif;\n  font-feature-settings: \"palt\";\n  font-weight: normal;\n  line-height: 1.4;\n  text-align: center;\n  margin: 80px 0 40px;\n  .CG2-header1 + & {\n    margin-top: 50px;\n  }\n  .CG2-container__inner > &:first-child {\n    margin-top: 20px;\n  }\n  .CG2-container__inner > &:last-child {\n    margin-bottom: 20px;\n  }\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 20px;\n    margin: 50px -10px 20px;\n  }\n}\n\n\n/* ==========================================================================\n   shortCentered\n   ========================================================================== */\n/*\n---\nname: shortCentered\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<div class=\"CG2-shortCentered\">\n  <div class=\"CG2-shortCentered__inner\">\n    短い時はセンタリング\n  </div>\n</div>\n\n<div class=\"CG2-shortCentered\">\n  <div class=\"CG2-shortCentered__inner\">\n    長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ\n  </div>\n</div>\n```\n*/\n.CG2-shortCentered {\n  text-align: center;\n  margin: 20px 0;\n}\n\n.CG2-shortCentered__inner {\n  text-align: left;\n  display: inline-block;\n}\n\n\n/* ==========================================================================\n   CG2-customers\n   ========================================================================== */\n/*\n---\nname: customers\ncategory:\n  - Blocks/shared\ntag:\n  - app-item\n  - www-item\n---\n\n## 通常（見出し、テキスト、ロゴ、ボタン）\n\ncustomersについているstyle属性は外すこと。\n\n```html\n<section class=\"CG2-customers\" style=\"background-color: #eee\">\n  <h2 class=\"CG2-customers__heading\">団体購読も承っております</h2>\n  <p class=\"CG2-customers__text\">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>\n  <div class=\"CG2-customers__logos\">\n    <ul>\n      <li><img src=\"__dummy__58x30\" width=\"58\" height=\"30\"></li>\n      <li><img src=\"__dummy__211x25\" width=\"211\" height=\"25\"></li>\n      <li><img src=\"__dummy__208x30\" width=\"208\" height=\"30\"></li>\n      <li><img src=\"__dummy__101x30\" width=\"101\" height=\"30\"></li>\n      <li><img src=\"__dummy__210x35\" width=\"210\" height=\"35\"></li>\n      <li><img src=\"__dummy__116x25\" width=\"116\" height=\"25\"></li>\n      <li><img src=\"__dummy__123x35\" width=\"123\" height=\"35\"></li>\n      <li><img src=\"__dummy__151x40\" width=\"151\" height=\"40\"></li>\n      <li><img src=\"__dummy__111x35\" width=\"111\" height=\"35\"></li>\n      <li><img src=\"__dummy__152x35\" width=\"152\" height=\"35\"></li>\n    </ul>\n  </div>\n  <div class=\"CG2-customers__button\">\n    <a class=\"CG2-button CG2-button--primary\" href=\"\">団体購読について</a>\n  </div>\n</section>\n```\n\n## コンパクト（テキスト・ロゴのみ）\n\ncustomersについているstyle属性は外すこと。\n\n```html\n<section class=\"CG2-customers\" style=\"background-color: #eee\">\n  <p class=\"CG2-customers__text\">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>\n  <div class=\"CG2-customers__logos\">\n    <ul>\n      <li><img src=\"__dummy__58x30\" width=\"58\" height=\"30\"></li>\n      <li><img src=\"__dummy__211x25\" width=\"211\" height=\"25\"></li>\n      <li><img src=\"__dummy__208x30\" width=\"208\" height=\"30\"></li>\n      <li><img src=\"__dummy__101x30\" width=\"101\" height=\"30\"></li>\n      <li><img src=\"__dummy__210x35\" width=\"210\" height=\"35\"></li>\n      <li><img src=\"__dummy__116x25\" width=\"116\" height=\"25\"></li>\n      <li><img src=\"__dummy__123x35\" width=\"123\" height=\"35\"></li>\n      <li><img src=\"__dummy__151x40\" width=\"151\" height=\"40\"></li>\n      <li><img src=\"__dummy__111x35\" width=\"111\" height=\"35\"></li>\n      <li><img src=\"__dummy__152x35\" width=\"152\" height=\"35\"></li>\n    </ul>\n  </div>\n</section>\n```\n*/\n// レイアウト\n.CG2-customers {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.CG2-customers__heading {\n  margin: 2em 0 0;\n}\n.CG2-customers__text {\n  margin: 2.2em 0 2em;\n}\n.CG2-customers__logos {\n  width: 100%;\n  // ロゴが最後にある（コンパクトなやつ）の場合\n  // これで下に灰色の線が引かれるので、ブロックの区切りがわかるようになる。\n  &:last-child {\n    margin-bottom: 2.5em;\n  }\n  ul {\n    max-width: 1020px; // 980 + 2 * 20\n    margin: 0 auto;\n  }\n}\n.CG2-customers__button {\n  margin: 2.5em 0;\n}\n@include max-screen( $breakpoint-middle ) {\n  .CG2-customers__heading {\n    margin: 1.5em 0 0;\n  }\n  .CG2-customers__text,\n  .CG2-customers__button {\n    margin: 1.5em 0;\n  }\n}\n\n.CG2-customers__heading {\n  padding: 0 10px;\n  color: #282828;\n  font-size: 24px;\n  font-weight: normal;\n  line-height: 1.2;\n\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 16px;\n  }\n}\n\n.CG2-customers__text {\n  padding: 0 10px;\n  line-height: 1.2;\n}\n\n.CG2-customers__logos {\n  background-color: #fff;\n\n  ul {\n    list-style: none;\n    padding: 20px 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n  }\n  li {\n    margin: 15px 20px;\n\n    @include max-screen( $breakpoint-middle ) {\n      margin: 10px 15px;\n    }\n  }\n  img {\n    vertical-align: middle;\n  }\n}\n\n\n/* ==========================================================================\n   CG2-paymentTable\n   ========================================================================== */\n/*\n---\nname: paymentTable\ncategory:\n  - Blocks/shared\ntag:\n  - app-item\n  - app-form\n  - www-item\n---\n\n```html\n<div class=\"CG2-paymentTable\">\n  <table>\n    <thead>\n      <tr>\n        <th colspan=\"2\"><img src=\"https://www.codegrid.net/img/payment/img_01.svg\" alt=\"VISA, MasterCard, JCB, American Express, Diners Club\" width=\"275\"></th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th>購読料<br><span class=\"CG2-paymentTable__annotation\">（税込金額）</span></th>\n        <td>\n          <div class=\"CG2-paymentTable__priceList\">\n            <ul>\n              <li>\n                <div class=\"CG2-paymentTable__priceLabel\">月額</div>\n                <div class=\"CG2-paymentTable__priceValue\">800</div>\n                <div class=\"CG2-paymentTable__priceUnit\">円</div>\n                <div class=\"CG2-paymentTable__priceAnnotation\">（税込864円）</div>\n              </li>\n            </ul>\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>購読期間</th>\n        <td>自動継続</td>\n      </tr>\n      <tr>\n        <th>無料購読期間</th>\n        <td>\n          <div class=\"CG2-paymentTable__valueList\">\n            <ul>\n              <li>\n                <div class=\"CG2-paymentTable__valueText CG2--disableLargeScreen\">無料購読期間</div>\n                <div class=\"CG2-paymentTable__value\">30</div>\n                <div class=\"CG2-paymentTable__valueUnit\">日</div>\n              </li>\n            </ul>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n```\n*/\n.CG2-paymentTable {\n  table {\n    margin: 40px auto;\n\n    @include max-screen( $breakpoint-small ) {\n      table-layout: fixed;\n      margin-top: 20px;\n      margin-bottom: 30px;\n    }\n  }\n\n  th,\n  td {\n    font-weight: normal;\n    vertical-align: middle;\n    padding: 15px 40px;\n    border: 1px solid #dbdbdb;\n    @include max-screen( $breakpoint-small ) {\n      vertical-align: top;\n      width: 50%;\n      padding: 20px 10px;\n    }\n  }\n\n  thead th,\n  thead td {\n    border: none;\n  }\n\n  tbody th {}\n  tbody td {}\n\n  th:first-child,\n  td:first-child {\n    @include max-screen( $breakpoint-small ) {\n      display: none;\n    }\n  }\n}\n\n.CG2-paymentTable__annotation {\n  font-size: 12px;\n}\n\n.CG2-paymentTable__priceList {\n  text-align: left;\n  display: inline-block;\n\n  ul {\n    border-collapse: separate;\n    border-spacing: 30px 0;\n    display: table;\n    line-height: normal;\n    padding: 0;\n    margin: 0 -30px;\n\n    @include max-screen( $breakpoint-small ) {\n      display: block;\n      margin: 0;\n    }\n  }\n\n  li {\n    display: table-cell;\n    margin: 0;\n\n    @include max-screen( $breakpoint-small ) {\n      display: block;\n      margin-bottom: 20px;\n\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n  }\n}\n\n.CG2-paymentTable__priceLabel {\n  font-size: 12px;\n}\n\n.CG2-paymentTable__priceValue {\n  font-size: 32px;\n  font-family: $fontCode;\n  line-height: 1;\n  vertical-align: bottom;\n  display: inline-block;\n\n  @include max-screen( $breakpoint-small ) {\n    font-size: 28px;\n  }\n}\n\n.CG2-paymentTable__priceUnit {\n  font-size: 16px;\n  vertical-align: bottom;\n  display: inline-block;\n}\n\n.CG2-paymentTable__priceAnnotation {\n  font-size: 12px;\n}\n\n.CG2-paymentTable__valueList {\n  text-align: left;\n  display: inline-block;\n\n  ul {\n    border-collapse: separate;\n    border-spacing: 30px 0;\n    display: table;\n    line-height: normal;\n    padding: 0;\n    margin: 0 -30px;\n\n    @include max-screen( $breakpoint-small ) {\n      display: block;\n      margin: 0;\n    }\n  }\n\n  li {\n    display: table-cell;\n    margin: 0;\n    \n    @include max-screen( $breakpoint-small ) {\n      display: block;\n    }\n  }\n}\n\n.CG2-paymentTable__valueText {\n  display: inline-block;\n\n  @include max-screen( $breakpoint-small ) {\n  }\n}\n\n.CG2-paymentTable__value {\n  font-size: 32px;\n  font-family: $fontCode;\n  line-height: 1;\n  vertical-align: bottom;\n  display: inline-block;\n\n  @include max-screen( $breakpoint-small ) {\n    font-family: $fontSansSerif;\n    font-size: 100%;\n    line-height: inherit;\n  }\n}\n\n.CG2-paymentTable__valueUnit {\n  font-size: 16px;\n  vertical-align: bottom;\n  display: inline-block;\n\n  @include max-screen( $breakpoint-small ) {\n    font-size: 100%;\n  }\n}\n\n\n/* ==========================================================================\n   CG2-paymentLine\n   ========================================================================== */\n/*\n---\nname: paymentLine\ncategory:\n  - Blocks/shared\ntag:\n  - app-item\n  - www-item\n---\n\n```html\n<div class=\"CG2-paymentLine\">\n  <span class=\"CG2-paymentLine__label\">月額</span>\n  <span class=\"CG2-paymentLine__value\">800</span>\n  <span class=\"CG2-paymentLine__unit\">円</span>\n  <span class=\"CG2-paymentLine__extra\">（税込み864円）</span>\n</div>\n```\n*/\n.CG2-paymentLine {\n  text-align: center;\n}\n\n.CG2-paymentLine__label {\n  font-family: $fontSerif;\n  font-feature-settings: \"palt\";\n  font-size: 24px;\n}\n\n.CG2-paymentLine__value {\n  font-family: $fontCode;\n  font-size: 32px;\n}\n\n.CG2-paymentLine__unit {\n  font-family: $fontSerif;\n  font-feature-settings: \"palt\";\n  font-size: 24px;\n}\n\n.CG2-paymentLine__extra {\n  font-size: 14px;\n}\n\n\n/* ==========================================================================\n   CG2-seriesList\n   ========================================================================== */\n/*\n---\nname: seriesList\ncategory:\n  - Blocks/shared\ntag:\n  - app-item\n  - app-item-articlelist\n  - www-item\n---\n\n## 通常\n\n* 未購読・非ログイン状態の場合、公開されてない記事には`CG2-seriesList__articleOrder`の前に`CG2-seriesList__articleIcon`が追加\n* 未読の場合、`CG2-seriesList__article`に`CG2-seriesList__article--unread`が追加\n* お気に入りに追加した場合、`js-toggle-fav-series`に`CG2-seriesList__itemUtilButton--favAdded`が追加\n* 著者が3人までの場合、`CG2-seriesList__authors`に著者分の`CG2-seriesList__author`が入る（`<a>`でくるまれる）\n* 著者が4人以上の場合、`CG2-seriesList__authors`の中身が`CG2-seriesList__authorPicList`に置き換わる\n* appのトップでは、リストの最後には`CG2-seriesList__itemMore`がくる\n\n```html\n<div class=\"CG2-seriesList\">\n  <div class=\"CG2-seriesList__inner\">\n\n    <!-- 未購読状態、ログイン前 -->\n\n    <div class=\"CG2-seriesList__item\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-talk\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">Webの文字の読みやすさ</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2014-readable-text-design/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleIcon\">\n              <div class=\"CG2-icon-lock\"></div>\n            </div>\n            <div class=\"CG2-seriesList__articleOrder\">第3回</div>\n            <div class=\"CG2-seriesList__articleTitle\">読みやすさのために</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年07月17日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleIcon\">\n              <div class=\"CG2-icon-lock\"></div>\n            </div>\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">日本語の「読みやすさ」</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年07月10日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第1回</div>\n            <div class=\"CG2-seriesList__articleTitle\">あらためて、Webって？</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年07月03日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">安田 麻由 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">長坂 菫 | UIデザイナー</div>\n          </div>\n        </a>\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">中野 富子 | エディター</div>\n          </div>\n        </a>\n      </div>\n    </div>\n\n    <!-- 購読済、ログイン後、お気に入り、未読あり -->\n\n    <div class=\"CG2-seriesList__item\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-mastering\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">z-index再入門</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"true\" class=\"js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2014-mastering-css/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article CG2-seriesList__article--unread\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第3回</div>\n            <div class=\"CG2-seriesList__articleTitle\">z-indexの困った使用例</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年05月29日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">意図した順序に要素を重ねる</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年05月22日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第1回</div>\n            <div class=\"CG2-seriesList__articleTitle\">z-indexの仕組み</div>\n            <div class=\"CG2-seriesList__articleDate\">2014年05月15日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">佐川 沙織 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n      </div>\n    </div>\n\n    <!-- 著者4人、お気に入り -->\n\n    <div class=\"CG2-seriesList__item\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-standards\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">今日から使えるCSS</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"true\" class=\"js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第4回</div>\n            <div class=\"CG2-seriesList__articleTitle\">CSS Custom Properties</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年05月04日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第3回</div>\n            <div class=\"CG2-seriesList__articleTitle\">position: sticky</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年04月27日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">@supportsルール</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年02月16日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <div class=\"CG2-seriesList__authorPicList\">\n          <ul>\n            <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"佐川 沙織\" width=\"40\" height=\"40\"></a></li>\n            <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"影山 和子\" width=\"40\" height=\"40\"></a></li>\n            <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"玉田 義之\" width=\"40\" height=\"40\"></a></li>\n            <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"杉原 幸次郎\" width=\"40\" height=\"40\"></a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <!-- 著者たくさん、未読あり -->\n\n    <div class=\"CG2-seriesList__item\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-interview\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">エンジニアに聞く、仕事の行方</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"false\" class=\"js-toggle-fav-series\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/future-works/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article CG2-seriesList__article--unread\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第13回</div>\n            <div class=\"CG2-seriesList__articleTitle\">ピクセル グリオ 編</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年08月24日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article CG2-seriesList__article--unread\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第12回</div>\n            <div class=\"CG2-seriesList__articleTitle\">影山 和子 編</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年05月04日</div>\n          </a>\n        </div>\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第11回</div>\n            <div class=\"CG2-seriesList__articleTitle\">橋本 孝治 編</div>\n            <div class=\"CG2-seriesList__articleDate\">2016年07月28日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <div class=\"CG2-seriesList__authorPicList\">\n          <ul>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"佐川 沙織\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"河田 理香\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"尾上 友美\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"新田 道雄\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"ピクセル グリオ\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"安田 麻由\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"野間 夏子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"神戸 克巳\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"杉原 幸次郎\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"田代 隆男\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"新田 春子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"中野 富子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"玉田 義之\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"柳川 健治\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"長坂 菫\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"坪田 健之\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"仲村 孝二\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"橋本 孝治\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"大澤 直子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"山口 弘一\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"影山 和子\" width=\"40\" height=\"40\"></a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <!-- more -->\n\n    <div class=\"CG2-seriesList__itemMore\">\n      <a href=\"\">more</a>\n    </div>\n\n  </div>\n</div>\n```\n\n## 全幅\n\nappトップの今週号や、各号のページで利用。\n\n`CG2-seriesList__item`に`CG2-seriesList__item--fullWidth`が追加されただけで、その他は特に変わらない。\n\n```html\n<div class=\"CG2-seriesList\">\n  <div class=\"CG2-seriesList__inner\">\n\n    <!-- 未購読 -->\n\n    <div class=\"CG2-seriesList__item CG2-seriesList__item--fullWidth\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-mastering\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">Chrome DevToolsをモバイル開発で使いこなす</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2017-chrome-devtools/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleIcon\">\n              <div class=\"CG2-icon-lock\"></div>\n            </div>\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">モバイルWebアプリ開発に活用</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年06月01日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">影山 和子 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n      </div>\n    </div>\n\n    <!-- 購読済、お気に入り -->\n\n    <div class=\"CG2-seriesList__item CG2-seriesList__item--fullWidth\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-standards\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">今日から使えるCSS</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"false\" class=\"js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第2回</div>\n            <div class=\"CG2-seriesList__articleTitle\">@supportsルール</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年02月16日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">佐川 沙織 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n        <a href=\"\">\n          <div class=\"CG2-seriesList__author\">\n            <div class=\"CG2-seriesList__authorPic\">\n              <img src=\"__dummy__80x80\" alt=\"\" width=\"40\" height=\"40\">\n            </div>\n            <div class=\"CG2-seriesList__authorName\">影山 和子 | フロントエンド・エンジニア</div>\n          </div>\n        </a>\n      </div>\n    </div>\n\n    <!-- 著者たくさん、未読あり -->\n\n    <div class=\"CG2-seriesList__item CG2-seriesList__item--fullWidth\">\n      <div class=\"CG2-seriesList__itemHeader\">\n        <div class=\"CG2-seriesList__itemCategory\">\n          <a href=\"\"><span class=\"CG2-icon-cat-survey\"></span></a>\n        </div>\n        <div class=\"CG2-seriesList__itemTitle\">\n          <div class=\"CG2-seriesList__itemTitleInner\">\n            <a href=\"\">\n              <span class=\"CG2-seriesList__itemTitleText\">ピクセルグリッドの開発環境サーベイ 2017</span>\n            </a>\n          </div>\n        </div>\n        <div class=\"CG2-seriesList__itemUtil\">\n          <ul>\n            <li><a href=\"\"><span class=\"CG2-icon-list\"></span></a></li>\n            <li>\n              <button type=\"button\" aria-pressed=\"false\" class=\"js-toggle-fav-series\">\n                <span aria-label=\"このシリーズのお気に入り解除\" class=\"CG2-icon-star\"></span>\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div style=\"background-image: url('//cdn.codegrid.net/2017-tool-survey/main-blur.jpg')\" class=\"CG2-seriesList__coverImage\"></div>\n      <div class=\"CG2-seriesList__articles\">\n        <div class=\"CG2-seriesList__article CG2-seriesList__article--unread\">\n          <a href=\"\">\n            <div class=\"CG2-seriesList__articleOrder\">第1回</div>\n            <div class=\"CG2-seriesList__articleTitle\">エディタとおすすめツール編</div>\n            <div class=\"CG2-seriesList__articleDate\">2017年03月02日</div>\n          </a>\n        </div>\n      </div>\n      <div class=\"CG2-seriesList__authors\">\n        <div class=\"CG2-seriesList__authorPicList\">\n          <ul>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"佐川 沙織\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"河田 理香\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"尾上 友美\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"新田 道雄\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"ピクセル グリオ\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"安田 麻由\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"野間 夏子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"神戸 克巳\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"杉原 幸次郎\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"田代 隆男\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"新田 春子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"中野 富子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"玉田 義之\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"柳川 健治\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"長坂 菫\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"坪田 健之\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"仲村 孝二\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"橋本 孝治\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"大澤 直子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"山口 弘一\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__summy__80x80\" alt=\"影山 和子\" width=\"40\" height=\"40\"></a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</div>\n```\n*/\n.CG2-seriesList {\n  margin: 0 calc( -50vw + 50% + 8px );\n\n  // @include max-screen( 1072px ) {\n  //   margin: 0 calc( -536px + 50% + 12px );\n  // }\n\n  @include max-screen( $breakpoint-middle ) {\n    margin-left: -18px;\n    margin-right: -18px;\n  }\n\n  @media print {\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n\n.CG2-seriesList__inner {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 1400px;\n  margin: 0 auto;\n\n  @include max-screen( $breakpoint-middle ) {\n    display: block;\n  }\n}\n\n.CG2-seriesList__item {\n  @include blurry-parent();\n  color: #fff;\n  box-sizing: border-box;\n  width: calc( 50% - 4px );\n  padding: 30px 28px;\n  margin: 2px;\n\n  @include max-screen( $breakpoint-middle ) {\n    width: auto;\n    padding: 8px 8px 24px;\n    margin: 0 0 2px;\n  }\n\n  &.CG2-seriesList__item--fullWidth {\n    width: calc( 100% - 4px );\n    \n    @include max-screen( $breakpoint-middle ) {\n      width: auto;\n    }\n  }\n}\n\n.CG2-seriesList__itemHeader {\n  display: table;\n  width: 100%;\n  margin: -18px 0 12px;\n  @include max-screen( $breakpoint-middle ) {\n    margin: 14px 0 20px;\n  }\n  .CG2-seriesList__item--fullWidth & {\n    margin: 0 0 30px;\n    @include max-screen( $breakpoint-middle ) {\n      margin: 14px 0 20px;\n    }\n  }\n}\n\n.CG2-seriesList__itemCategory {\n  font-family: $fontSerif;\n  font-feature-settings: \"palt\";\n  vertical-align: middle;\n  display: table-cell;\n  width: 40px;\n\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 0;\n    vertical-align: top;\n    width: 26px;\n  }\n\n  .CG2-seriesList__item--fullWidth & {\n    width: 150px;\n\n    @include max-screen( $breakpoint-middle ) {\n      text-align: center;\n      vertical-align: top;\n      width: 26px;\n    }\n  }\n\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  [class^=\"CG2-icon-cat\"] {\n    font-size: 40px;\n    line-height: 1;\n    position: relative;\n    top: 0;\n    margin-right: 15px;\n\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 26px;\n    }\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      z-index: -1;\n      top: calc( 50% - 20px );\n      left: calc( 50% - 20px );\n      display: block;\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      background: #eee;\n      transform: scale( 0 );\n      transition: all 0s;\n    }\n  }\n\n  a:hover [class^=\"CG2-icon-cat\"],\n  a:focus [class^=\"CG2-icon-cat\"] {\n    @include anim-scaleup();\n\n    &::after {\n      opacity: 0;\n      transform: scale( 1.4 );\n      transition-duration: .4s;\n    }\n  }\n}\n\n.CG2-seriesList__itemTitle {\n  font-size: 25px;\n  font-weight: bold;\n  line-height: 1.4;\n  font-family: $fontSerif;\n  font-feature-settings: \"palt\";\n  text-align: center;\n  vertical-align: middle;\n  display: table-cell;\n  height: 2.8em;\n\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 20px;\n    font-weight: normal;\n    height: auto;\n    // padding-top: 14px;\n  }\n\n  .CG2-seriesList__item--fullWidth & {\n    font-size: 30px;\n    height: auto;\n\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 20px;\n    //   display: block;\n    //   font-size: 20px;\n    }\n  }\n\n  a {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n  }\n\n  .CG2-seriesList__itemTitleText {\n    text-align: left;\n    display: inline-block;\n    position: relative;\n\n    &:after {\n      content: '';\n      opacity: 0;\n      position: absolute;\n      left: 0;\n      right: 0;\n      display: block;\n      height: 1px;\n      background: #fff;\n      transform: translateY( 2px ) scaleX( 0.1 );\n      transition: all .6s cubic-bezier(.3, 1.4, .6, 1 );\n    }\n  }\n\n  a:hover .CG2-seriesList__itemTitleText:after,\n  a:focus .CG2-seriesList__itemTitleText:after {\n    opacity: 1;\n    transform: scaleX( 1 );\n  }\n}\n\n.CG2-seriesList__itemUtil {\n  text-align: right;\n  vertical-align: middle;\n  display: table-cell;\n  width: 40px;\n  padding-left: 10px;\n\n  @include max-screen( $breakpoint-middle ) {\n    vertical-align: top;\n  }\n\n  .CG2-seriesList__item--fullWidth & {\n    width: 150px;\n\n    @include max-screen( $breakpoint-middle ) {\n      width: 40px;\n    }\n  }\n\n  ul {\n    font-size: 0;\n    list-style: none;\n    display: inline-table;\n    padding: 0;\n  }\n\n  li {\n    text-align: center;\n    display: table-cell;\n    width: 18px;\n    height: 18px;\n    margin: 0;\n    padding: 8px;\n    background: rgba( 255, 255, 255, 0.2 );\n\n    @include max-screen( $breakpoint-middle ) {\n      width: 14px;\n      height: 14px;\n    }\n\n    &:first-child {\n      &,a {\n        border-top-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n      }\n    }\n\n    &:last-child {\n      &, a {\n        border-top-right-radius: 3px;\n        border-bottom-right-radius: 3px;\n      }\n    }\n  }\n\n  a,\n  button {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    padding: 8px;\n    margin: -8px;\n    border: none;\n    background: rgba( 255, 255, 255, 0 );\n    transition: all .3s;\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      background: rgba( 255, 255, 255, 0.2 );\n\n      span[class^=\"CG2-icon\"] {\n        opacity: 1;\n      }\n    }\n  }\n\n  span[class^=\"CG2-icon\"] {\n    font-size: 18px;\n    line-height: 18px;\n    opacity: .5;\n    position: static;\n    display: block;\n\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 14px;\n      line-height: 14px;\n    }\n  }\n}\n\nbutton.CG2-seriesList__itemUtilButton--favAdded {\n  span[class^=\"CG2-icon\"] {\n    color: #ff0;\n    opacity: 1;\n  }\n}\n\n.CG2-seriesList__coverImage {\n  @include blurry();\n  transition: transform 1s;\n  will-change: opacity; // fixing Firefox causing artifacts on unhover\n\n  .CG2-seriesList__item:hover &,\n  .CG2-seriesList__item:focus & {\n    transform: scale( 1.4, 1.4 );\n  }\n\n  // &.CG2-seriesList__coverImage--blurry {\n  //   @include blurry--blurry();\n  // }\n}\n\n.CG2-seriesList__articles {\n  position: relative;\n  z-index: 1;\n  margin-bottom: 15px;\n  box-shadow: 0 0 10px rgba( 0, 0, 0, 0.1 );\n}\n\n.CG2-seriesList__article {\n  font-size: 16px;\n  display: table;\n  line-height: 1.2;\n  width: 100%;\n  border-top: 1px solid #fff;\n  border-bottom: 1px solid #fff;\n  margin-bottom: -1px;\n  background: rgba( 255, 255, 255, 0 );\n\n  &.CG2-seriesList__article--unread {\n    font-weight: bold;\n    box-shadow: 0 0 10px rgba( 0, 0, 0, 0.1 );\n    background: rgba( 255, 255, 255, 0.2 );\n  }\n\n  a {\n    @include resetLink();\n    text-decoration: none;\n    display: table-row;\n    transition: background .5s;\n    \n    &:hover,\n    &:focus {\n      transition: background .2s;\n      background: rgba( 255, 255, 255, 0.2 );\n    }\n  }\n}\n\n.CG2-seriesList__articleIcon {\n  font-size: 16px;\n  display: table-cell;\n  vertical-align: middle;\n  box-sizing: border-box;\n  width: 1px;\n  padding: 0 12px 0 18px;\n\n  .CG2-seriesList__item--fullWidth & {\n    font-size: 18px;\n  }\n\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 14px;\n    padding: 0 10px;\n    \n    .CG2-seriesList__item--fullWidth & {\n      font-size: 14px;\n    }\n  }\n}\n\n.CG2-seriesList__articleOrder {\n  font-size: 16px;\n  vertical-align: middle;\n  white-space: nowrap;\n  display: table-cell;\n  width: 1%;\n  padding: 15px 15px 15px 0;\n\n  &:first-child {\n    padding-left: 20px;\n  }\n\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 14px;\n    padding-right: 14px;\n\n    &:first-child {\n      padding-left: 10px;\n    }\n  }\n\n  .CG2-seriesList__item--fullWidth & {\n    font-size: 18px;\n    padding-top: 24px;\n    padding-bottom: 24px;\n\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 14px;\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n  }\n}\n\n.CG2-seriesList__articleTitle {\n  font-size: 16px;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 15px 0;\n\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 14px;\n  }\n  \n  .CG2-seriesList__item--fullWidth & {\n    font-size: 18px;\n    padding-top: 24px;\n    padding-bottom: 24px;\n\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 14px;\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n  }\n}\n\n.CG2-seriesList__articleDate {\n  font-size: 12px;\n  vertical-align: middle;\n  text-align: right;\n  display: table-cell;\n  white-space: nowrap;\n  padding: 15px 20px 15px 5px;\n\n  .CG2-seriesList__item--fullWidth & {\n    padding-top: 24px;\n    padding-bottom: 24px;\n\n    @include max-screen( $breakpoint-middle ) {\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n  }\n\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 10px;\n    padding-right: 10px;\n  }\n}\n\n.CG2-seriesList__authors {\n  position: relative;\n  z-index: 1;\n\n  a {\n    color: inherit;\n    text-decoration: none;\n    display: table;\n  }\n}\n\n.CG2-seriesList__author {\n  @extend %author;\n  position: relative;\n}\n\na .CG2-seriesList__author:before {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  bottom: -2px;\n  left: -2px;\n  background: rgba( 255, 255, 255, 0 );\n  transition: all .5s;\n}\n\na:hover .CG2-seriesList__author:before,\na:focus .CG2-seriesList__author:before {\n  background: rgba( 255, 255, 255, 0.2 );\n  transition: all .2s;\n}\n\n.CG2-seriesList__authorPic {\n  @extend %authorPic;\n}\n\n.CG2-seriesList__authorName {\n  @extend %authorName;\n\n  .CG2-seriesList__item--fullWidth & {\n    font-size: 16px;\n  }\n\n  @include max-screen( $breakpoint-middle ) {\n    .CG2-seriesList__item--fullWidth & {\n      font-size: 10px;\n    }\n  }\n}\n\n.CG2-seriesList__authorPicList {\n  @extend %authorPicList;\n}\n\n.CG2-seriesList__itemMore {\n  width: 100%;\n\n  a {\n    color: inherit;\n    font-family: $fontCode;\n    font-size: 28px;\n    text-decoration: none;\n    text-align: center;\n    cursor: pointer;\n    box-sizing: border-box;\n    overflow: hidden;\n    position: relative;\n    z-index: 1;\n    display: block;\n    width: 100%;\n    padding: 20px;\n    border-bottom: 1px solid #dbdbdb;\n\n    &:hover,\n    &:focus { }\n\n    &:before {\n      content: '';\n      position: absolute;\n      z-index: -1;\n      top: 0;\n      bottom: 0;\n      left: -100%;\n      margin-left: -60px;\n      width: 100%;\n      padding: 0 20px;\n      transform: skewX( 20deg );\n      background: #eee;\n      transition: all .3s;\n    }\n\n    &:hover:before,\n    &:focus:before {\n      left: 0;\n      margin-left: -20px;\n    }\n    \n    &:after {\n      @include icon( down );\n      font-size: 20px;\n      margin-left: 4px;\n    }\n  }\n}\n","/* ==========================================================================\n   transparentButton\n   ========================================================================== */\n/*\n---\nname: transparentButton\ncategory:\n  - Nav-items\ntag:\n  - button\n---\nwork with both a and button tags\n```html\n<div style=\"background: rgba( 0, 0, 0, 0.5 );\">\n  <p>\n    <a class=\"CG2-transparentButton\" href=\"#\">button:a element</a>\n  </p>\n  <p>\n    <button class=\"CG2-transparentButton\" href=\"#\">button: button element</button>\n  </p>\n</div>\n```\n\ndisabled\n```html\n<div style=\"background: rgba( 0, 0, 0, 0.5 );\">\n  <p>\n    <a class=\"CG2-transparentButton\" aria-disabled=\"true\" href=\"#\">button</a>\n  </p>\n  <p>\n    <button class=\"CG2-transparentButton\" disabled href=\"#\">button</button>\n  </p>\n</div>\n```\n\nfav\n\n.CG2-transparentButton__favText内にテキストを入れて管理する\n```html\n<div style=\"background: rgba( 0, 0, 0, 0.5 );\">\n  <p>\n    <button class=\"CG2-transparentButton\"><span class=\"CG2-icon-star\"></span><span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span></button>\n  </p>\n  <p>\n    <button class=\"CG2-transparentButton CG2-transparentButton--favAdded\"><span class=\"CG2-icon-star\"></span><span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span></button>\n  </p>\n</div>\n```\n*/\n.CG2-transparentButton{\n  color: #fff;\n  font-size: 14px;\n  line-height: 1.2;\n  text-decoration: none;\n  display: inline-block;\n  padding: 6px 10px;\n  border: 1px solid #fff;\n  border-radius: 2px;\n  background: rgba( 255, 255, 255, 0 );\n  transition: all .3s;\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  &:hover,\n  &:focus{\n    background: rgba( 255, 255, 255, 0.2 );\n  }\n  span[class^=\"CG2-icon\"]{\n    opacity: .5;\n    margin: 0 4px 0 0;\n    transition: all .3s;\n  }\n  &:hover span[class^=\"CG2-icon\"],\n  &:focus span[class^=\"CG2-icon\"]{\n    opacity: 1;\n  }\n  &[disabled],\n  &[aria-disabled=\"true\"]{\n    color: #ccc;\n    cursor: not-allowed;\n    border-color: #ccc;\n    background: rgba( 255, 255, 255, 0.2 );\n    span[class^=\"CG2-icon\"]{\n      opacity: 1;\n    }\n  }\n  &.CG2-transparentButton--favAdded{\n    span[class^=\"CG2-icon\"]{\n      color: #ff0;\n      opacity: 1;\n    }\n    span.CG2-transparentButton__favText{\n      color: rgba( 0, 0, 0, 0 );\n      font-size: 0;\n      line-height: 0;\n      &:after{\n        color: #fff;\n        font-size: 14px;\n        content:'このシリーズのお気に入り解除';\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 12px;\n        }\n      }\n    }\n  }\n}\n\n\n/* ==========================================================================\n   CG2-seriesWeekHeader\n   ========================================================================== */\n/*\n---\nname: seriesWeekHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n```html\n<div class=\"CG2-seriesWeekHeader\">\n  <div class=\"CG2-seriesWeekHeader__inner\">\n    <div class=\"CG2-seriesWeekHeader__prev\">\n      <div class=\"CG2-seriesWeekHeader__prevInner\">\n        <a href=\"#\">\n          <span class=\"CG2-seriesWeekHeader__label\">前号</span>\n          <span class=\"CG2-seriesWeekHeader__number\">10</span>\n          <span class=\"CG2-seriesWeekHeader__text\">月</span>\n          <span class=\"CG2-seriesWeekHeader__number\">1</span>\n          <span class=\"CG2-seriesWeekHeader__text\">日発行</span>\n        </a>\n      </div>\n    </div>\n    <div class=\"CG2-seriesWeekHeader__current\">\n      <div class=\"CG2-seriesWeekHeader__currentInner\">\n        <a href=\"#\">\n          <span class=\"CG2-seriesWeekHeader__label\">最新号</span>\n          <span class=\"CG2-seriesWeekHeader__number\">10</span>\n          <span class=\"CG2-seriesWeekHeader__text\">月</span>\n          <span class=\"CG2-seriesWeekHeader__number\">7</span>\n          <span class=\"CG2-seriesWeekHeader__text\">日発行</span>\n        </a>\n      </div>\n    </div>\n    <div class=\"CG2-seriesWeekHeader__next\">\n      <div class=\"CG2-seriesWeekHeader__nextInner\">\n        <a href=\"#\">\n          <span class=\"CG2-seriesWeekHeader__label\">次号予告</span>\n          <span class=\"CG2-seriesWeekHeader__number\">10</span>\n          <span class=\"CG2-seriesWeekHeader__text\">月</span>\n          <span class=\"CG2-seriesWeekHeader__number\">14</span>\n          <span class=\"CG2-seriesWeekHeader__text\">日発行</span>\n        </a>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n*/\n\n.CG2-seriesWeekHeader{\n  margin: 80px 0 10px;\n  @include max-screen( $breakpoint-middle ) {\n    margin-left: -18px;\n    margin-right: -18px;\n  }\n  .CG2-container__inner > &:first-child{\n    margin-top: 20px;\n    @include max-screen( $breakpoint-middle ) {\n      margin-top: 0;\n    }\n  }\n  a{\n    @include resetLink();\n  }\n}\n  .CG2-seriesWeekHeader__inner{\n    display: table;\n    width: 100%;\n  }\n    .CG2-seriesWeekHeader__prev{\n      vertical-align: bottom;\n      display: table-cell;\n      width: 30%;\n      a{\n        padding-left: 20px;\n        @include max-screen( $breakpoint-middle ) {\n          padding-left: 16px;\n        }\n        &::before{\n          @include icon( 'left' );\n          font-size: 20px;\n          position: absolute;\n          bottom: .25em;\n          left: 0;\n          transition: transform .4s cubic-bezier(.3, 2, .6, 1 );\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 14px;\n            bottom: 0;\n          }\n        }\n        &:hover::before,\n        &:focus::before{\n          transform: translateX( -4px ) scale( 1.2 );\n          transition-duration: .4s;\n        }\n      }\n    }\n    .CG2-seriesWeekHeader__next{\n      vertical-align: bottom;\n      text-align: right;\n      display: table-cell;\n      width: 30%;\n      a{\n        padding-right: 20px;\n        @include max-screen( $breakpoint-middle ) {\n          padding-right: 16px;\n        }\n        &::after{\n          @include icon( 'right' );\n          font-size: 20px;\n          position: absolute;\n          bottom: .25em;\n          right: 0;\n          transition: transform .4s cubic-bezier(.3, 2, .6, 1 );\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 14px;\n            bottom: 0;\n          }\n        }\n        &:hover::after,\n        &:focus::after{\n          transform: translateX( 4px ) scale( 1.2 );\n          transition-duration: .4s;\n        }\n      }\n    }\n    .CG2-seriesWeekHeader__current{\n      vertical-align: bottom;\n      text-align: center;\n      display: table-cell;\n      width: 40%;\n    }\n    .CG2-seriesWeekHeader__prevInner,\n    .CG2-seriesWeekHeader__nextInner,\n    .CG2-seriesWeekHeader__currentInner{\n      font-size: 0;\n      line-height: 1.2;\n      text-align: left;\n      display: inline-block;\n      a{\n        text-decoration: none;\n        display: block;\n        position: relative;\n      }\n    }\n      span.CG2-seriesWeekHeader__label{\n        font-family: $fontSerif;\n        font-feature-settings: \"palt\";\n        display: block;\n        font-size: 16px;\n        vertical-align: baseline;\n      }\n      span.CG2-seriesWeekHeader__number{\n        font-family: $fontCode;\n        font-size: 32px;\n        vertical-align: baseline;\n        margin: 0 .1em;\n        span.CG2-seriesWeekHeader__label + & {\n          margin-left: 0;\n        }\n      }\n      span.CG2-seriesWeekHeader__text{\n        font-family: $fontSerif;\n        font-feature-settings: \"palt\";\n        font-size: 16px;\n        vertical-align: baseline;\n      }\n    .CG2-seriesWeekHeader__current{\n      span.CG2-seriesWeekHeader__label{ font-size: 20px; }\n      span.CG2-seriesWeekHeader__number{ font-size: 64px; }\n      span.CG2-seriesWeekHeader__text{ font-size: 32px; }\n    }\n    @include max-screen( $breakpoint-middle ) {\n      .CG2-seriesWeekHeader__prev,\n      .CG2-seriesWeekHeader__next{\n        width: 22%;\n        span.CG2-seriesWeekHeader__label{\n          font-size: 12px;\n        }\n        span.CG2-seriesWeekHeader__number,\n        span.CG2-seriesWeekHeader__text{\n          display: none;\n        }\n      }\n      .CG2-seriesWeekHeader__current{\n        position: relative;\n        bottom: -.4em;\n        width: 56%;\n        span.CG2-seriesWeekHeader__label{ font-size: 12px; }\n        span.CG2-seriesWeekHeader__number{ font-size: 40px; }\n        span.CG2-seriesWeekHeader__text{ font-size: 18px; }\n      }\n    }\n\n/* ==========================================================================\n   CG2-seriesListHeader\n   ========================================================================== */\n/*\n---\nname: seriesListHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n内部で別コンポーネント CG2-compactNav を利用\n\n```html\n<div class=\"CG2-seriesListHeader\">\n  <div class=\"CG2-seriesListHeader__articleLength\">\n    <span class=\"CG2-seriesListHeader__label\">記事数</span>\n    <span class=\"CG2-seriesListHeader__number\">500</span>\n    <span class=\"CG2-seriesListHeader__unit\">本</span>\n  </div>\n  <div class=\"CG2-seriesListHeader__nav\">\n\n    <div class=\"CG2-compactNav\">\n      <ul>\n        <li class=\"CG2-compactNav__item--current\"><a href=\"#\">最新順</a></li>\n        <li><a href=\"#\">おすすめ順</a></li>\n        <li><a href=\"#\">お気に入り</a></li>\n        <li><a href=\"#\">無料公開</a></li>\n      </ul>\n      <div class=\"CG2-compactNav__navOpener\"></div>\n    </div>\n\n  </div>\n</div>\n```\n\n```html\n<div class=\"CG2-seriesListHeader\">\n  <div class=\"CG2-seriesListHeader__nav\">\n\n    <div class=\"CG2-compactNav\">\n      <ul>\n        <li class=\"CG2-compactNav__item--current\"><a href=\"#\">最新順</a></li>\n        <li><a href=\"#\">おすすめ順</a></li>\n        <li><a href=\"#\">お気に入り</a></li>\n        <li><a href=\"#\">無料公開</a></li>\n      </ul>\n      <div class=\"CG2-compactNav__navOpener\"></div>\n    </div>\n\n  </div>\n</div>\n```\n\nタブ切り替え（表示toggle）の挙動の付与\n（JSとの連携、以下で挙動確認可能）\n\n- `data-cg2-tab-button`を明示する\n- コンテンツ部は`[data-cg2-tab-content]`でグループ化した`[data-cg2-tab-pane]`を用意する\n\n```html\n<div class=\"CG2-seriesListHeader\">\n  <div class=\"CG2-seriesListHeader__nav\">\n\n    <div class=\"CG2-compactNav\">\n      <ul>\n        <li class=\"CG2-compactNav__item--current\"><a href=\"#itemA\" data-cg2-tab-button>項目A</a></li>\n        <li><a href=\"#itemB\" data-cg2-tab-button>項目B</a></li>\n      </ul>\n      <div class=\"CG2-compactNav__navOpener\"></div>\n    </div>\n\n  </div>\n</div>\n\n\n<div data-cg2-tab-content>\n\n  <div id=\"itemA\" data-cg2-tab-pane=\"current\">\n    項目Aのコンテンツ\n  </div>\n\n  <div id=\"itemB\" data-cg2-tab-pane>\n    項目Bのコンテンツ\n  </div>\n\n</div>\n```\n\n*/\n\n.CG2-seriesListHeader{\n  font-size: 0;\n  font-family: $fontZero;\n  margin: 60px 0 30px;\n  @include max-screen( $breakpoint-middle ) {\n    display: table;\n    width: 100%;\n    margin-bottom: 20px;\n  }\n  .CG2-container__inner > &:first-child{\n    margin-top: 20px;\n  }\n}\n  .CG2-seriesListHeader__articleLength{\n    font-family: $fontSansSerif;\n    font-size: 1rem;\n    white-space: nowrap;\n    vertical-align: bottom;\n    display: inline-block;\n    width: 300px;\n    margin-right: -300px;\n    margin-bottom: -.6em;\n    @include max-screen( $breakpoint-base ) {\n      margin-bottom: -.3em;\n    }\n    @include max-screen( $breakpoint-middle ) {\n      display: table-cell;\n      width: auto;\n      margin-right: 0;\n    }\n    span.CG2-seriesListHeader__label{\n      font-size: 16px;\n      font-family: $fontSerif;\n      font-feature-settings: \"palt\";\n      display: block;\n      @include max-screen( $breakpoint-base ) {\n        font-size: 12px;\n      }\n    }\n    span.CG2-seriesListHeader__number{\n      font-size: 72px;\n      font-family: $fontCode;\n      line-height: 1;\n      display: inline-block;\n      @include max-screen( $breakpoint-base ) {\n        font-size: 42px;\n      }\n    }\n    span.CG2-seriesListHeader__unit{\n      font-size: 32px;\n      font-family: $fontSerif;\n      font-feature-settings: \"palt\";\n      line-height: 1;\n      @include max-screen( $breakpoint-base ) {\n        font-size: 20px;\n      }\n    }\n  }\n\n\n\n  .CG2-seriesListHeader__nav{\n    font-family: $fontSansSerif;\n    font-size: 1rem;\n    vertical-align: bottom;\n    display: inline-block;\n    width: 100%;\n    @include max-screen( $breakpoint-middle ) {\n      display: table-cell;\n      width: 160px;\n      text-align: right;\n    }\n  }\n\n\n[data-cg2-tab-pane] { display: none; }\n[data-cg2-tab-pane=\"current\"] { display: block; }\n\n\n/* ==========================================================================\n   CG2-compactNav\n   ========================================================================== */\n/*\n---\nname: compactNav\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n別コンポーネント CG2-seriesListHeader 内で利用。利用方法は CG2-seriesListHeader を参照\n\n```html\n<div class=\"CG2-compactNav\">\n  <ul>\n    <li class=\"CG2-compactNav__item--current\"><a href=\"#\">最新順</a></li>\n    <li><a href=\"#\">おすすめ順</a></li>\n    <li><a href=\"#\">お気に入り</a></li>\n    <li><a href=\"#\">無料公開</a></li>\n  </ul>\n  <div class=\"CG2-compactNav__navOpener\"></div>\n</div>\n```\n\n*/\n\n\n.CG2-compactNav{\n  font-family: $fontSansSerif;\n  font-size: 1rem;\n  vertical-align: bottom;\n  @include max-screen( $breakpoint-base ) {\n    font-size: 0.9rem;\n  }\n  @include max-screen( $breakpoint-middle ) {\n    line-height: 2.2em;\n    vertical-align: middle;\n    position: relative;\n    z-index: $z-flyout;\n    display: inline-block;\n    width: 120px;\n    padding-right: 30px;\n    border: 1px solid #dbdbdb;\n    border-radius: 3px;\n    height: 2.2em;\n  }\n  &.CG2-compactNav--show{}\n  ul{\n    list-style: none;\n    table-layout: fixed;\n    display: table;\n    padding: 0;\n    margin: 0 auto;\n    @include max-screen( $breakpoint-middle ) {\n      position: absolute;\n      display: block;\n      width: 120px;\n      border: 1px solid #dbdbdb;\n      border-radius: 3px;\n      margin: -1px;\n      background: #fff;\n    }\n  }\n    li{\n      font-family: $fontSerif;\n      font-feature-settings: \"palt\";\n      text-align: center;\n      vertical-align: middle;\n      display: table-cell;\n      padding: 2px 40px;\n      border-left: 1px solid #dbdbdb;\n      margin: 0;\n      &:first-child{\n        border-left: none;\n      }\n      @include max-screen( $breakpoint-base ) {\n        padding-left: 20px;\n        padding-right: 20px;\n      }\n      @include max-screen( $breakpoint-middle ) {\n        font-family: $fontSansSerif;\n        display: block;\n        text-align: left;\n        display: none;\n        border-left: none;\n        padding: 0 10px;\n        @at-root .CG2-compactNav.CG2-compactNav--show li{\n          display: block;\n        }\n      }\n      &.CG2-compactNav__item--current{\n        color: #fff;\n        display: block;\n        background: #282828;\n        @include max-screen( $breakpoint-middle ) {\n          color: inherit;\n          background: rgba( 0, 0, 0, 0.03 );\n        }\n      }\n    }\n      a{\n        @include resetLink();\n        text-decoration: none;\n        position: relative;\n        display: block;\n        padding: 2px 40px;\n        margin: -2px -40px;\n        @include max-screen( $breakpoint-base ) {\n          padding-left: 20px;\n          padding-right: 20px;\n          margin-left: -20px;\n          margin-right: -20px;\n        }\n        @include max-screen( $breakpoint-middle ) {\n          padding: 0 10px;\n          margin: 0 -10px;\n        }\n      }\n    li:not( .CG2-compactNav__item--current ) a{\n      &:after{\n        content: '';\n        position: absolute;\n        left: 50%;\n        right: 50%;\n        bottom: 0;\n        display: block;\n        height: 2px;\n        background: #424242;\n        transition: all .4s cubic-bezier(.3, 1.4, .6, 1 );\n      }\n      &:hover:after,\n      &:focus:after{\n        left: 0;\n        right: 0;\n      }\n      @include max-screen( $breakpoint-middle ) {\n        &:after{\n          content: none;\n        }\n      }\n    }\n  .CG2-compactNav__navOpener{\n    @include max-screen( $breakpoint-middle ) {\n      line-height: 2.2em;\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      width: 30px;\n      height: 2.2em;\n      background: #ebebeb;\n      cursor: pointer;\n      &:after{\n        @include icon( 'hamburger' );\n        font-size: 14px;\n        line-height: 0;\n        position: absolute;\n        top: 50%;\n        left: 0;\n        width: 30px;\n        text-align: center;\n      }\n    }\n  }\n}\n\n\n/* ==========================================================================\n   CG2-seriesHeader\n   ========================================================================== */\n/*\n---\nname: seriesHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\ntemplateItem:\n  - true\n---\n\n## 購読済\n\n```html\n<div class=\"CG2-seriesHeader\">\n  <div class=\"CG2-seriesHeader__inner\">\n    <div class=\"CG2-seriesHeader__category\">\n      <div class=\"CG2-seriesHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-architecture\"></span>\n      </div>\n      <div class=\"CG2-seriesHeader__categoryName\">設計</div>\n    </div>\n    <div class=\"CG2-seriesHeader__main\">\n      <div class=\"CG2-seriesHeader__mainInner\">\n        <div class=\"CG2-seriesHeader__title\">jQuery初心者のためのJavaScript設計トレーニング</div>\n        <div class=\"CG2-seriesHeader__length\">\n          全<span class=\"CG2-seriesHeader__value\">1</span>回\n        </div>\n      </div>\n    </div>\n    <div class=\"CG2-seriesHeader__utils\">\n      <button id=\"js-toggle-fav-series\" type=\"button\" aria-pressed=\"false\" class=\"CG2-transparentButton\">\n        <span aria-hidden=\"true\" class=\"CG2-icon-star\"></span>\n        <span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span>\n      </button>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2016-js-training-for-beginners/main-blur.jpg)\" class=\"CG2-seriesHeader__bg\"></div>\n</div>\n```\n\n## 購読済、お気に入り追加\n\n`CG2-seriesHeader__utils`内のボタンが変化する。\n\n```html\n<div class=\"CG2-seriesHeader\">\n  <div class=\"CG2-seriesHeader__inner\">\n    <div class=\"CG2-seriesHeader__category\">\n      <div class=\"CG2-seriesHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-architecture\"></span>\n      </div>\n      <div class=\"CG2-seriesHeader__categoryName\">デザイン</div>\n    </div>\n    <div class=\"CG2-seriesHeader__main\">\n      <div class=\"CG2-seriesHeader__mainInner\">\n        <div class=\"CG2-seriesHeader__title\">きちんと学ぶユーザーインターフェース</div>\n        <div class=\"CG2-seriesHeader__length\">\n          全<span class=\"CG2-seriesHeader__value\">4</span>回\n        </div>\n      </div>\n    </div>\n    <div class=\"CG2-seriesHeader__utils\">\n      <button id=\"js-toggle-fav-series\" type=\"button\" aria-pressed=\"true\" class=\"CG2-transparentButton CG2-transparentButton--favAdded\">\n        <span aria-hidden=\"true\" class=\"CG2-icon-star\"></span>\n        <span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span>\n      </button>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2017-mastering-ui/main-blur.jpg)\" class=\"CG2-seriesHeader__bg\"></div>\n</div>\n```\n\n## 未購読・非ログイン\n\n`CG2-seriesHeader__utils`がない。\n\n```html\n<div class=\"CG2-seriesHeader\">\n  <div class=\"CG2-seriesHeader__inner\">\n    <div class=\"CG2-seriesHeader__category\">\n      <div class=\"CG2-seriesHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-architecture\"></span>\n      </div>\n      <div class=\"CG2-seriesHeader__categoryName\">未来・次世代</div>\n    </div>\n    <div class=\"CG2-seriesHeader__main\">\n      <div class=\"CG2-seriesHeader__mainInner\">\n        <div class=\"CG2-seriesHeader__title\">一歩先行くCSS</div>\n        <div class=\"CG2-seriesHeader__length\">\n          全<span class=\"CG2-seriesHeader__value\">2</span>回\n        </div>\n      </div>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2016-future-css/main-blur.jpg)\" class=\"CG2-seriesHeader__bg\"></div>\n</div>\n```\n*/\n.CG2-seriesHeader{\n  @include blurry-parent();\n  color: #fff;\n}\n  .CG2-seriesHeader__inner{\n    box-sizing: border-box;\n    max-width: 1016px;\n    padding: 50px 0 40px;\n    margin: 0 auto;\n    @include max-screen( $breakpoint-middle ) {\n      width: auto;\n      padding: 20px 10px;\n    }\n  }\n\n    .CG2-seriesHeader__category{\n      text-align: center;\n      margin-bottom: 20px;\n      @include max-screen( $breakpoint-middle ) {\n        margin-bottom: 10px;\n      }\n    }\n      .CG2-seriesHeader__categoryIcon{\n        font-size: 50px;\n        line-height: 1;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 32px;\n        }\n      }\n      .CG2-seriesHeader__categoryName{\n        font-family: $fontSerif;\n        font-feature-settings: \"palt\";\n        margin-top: 3px;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 10px;\n        }\n      }\n    .CG2-seriesHeader__main{}\n      .CG2-seriesHeader__mainInner{\n        text-align: center;\n        min-height: 120px;\n        @include max-screen( $breakpoint-middle ) {\n          min-height: 60px;\n        }\n      }\n        .CG2-seriesHeader__title{\n          font-family: $fontSerif;\n          font-feature-settings: \"palt\";\n          font-size: 48px;\n          line-height: 1.2;\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 20px;\n          }\n        }\n        .CG2-seriesHeader__length{\n          font-family: $fontSerif;\n          font-feature-settings: \"palt\";\n          margin-top: 30px;\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 10px;\n            margin-top: 10px;\n          }\n        }\n          .CG2-seriesHeader__value{\n            margin: 0 0.6em;\n          }\n    .CG2-seriesHeader__utils{\n      box-sizing: border-box;\n      max-width: 1016px;\n      padding: 0 28px;\n      margin: 0 auto;\n      @include max-screen( $breakpoint-middle ) {\n        padding: 0 10px;\n      }\n    }\n  .CG2-seriesHeader__bg{\n    @include blurry();\n    // &.CG2-seriesHeader__bg--blurry{\n    //   @include blurry--blurry();\n    // }\n  }\n\n/* ==========================================================================\n   CG2-series\n   ========================================================================== */\n/*\n---\nname: series\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n## 未購読・購読済、著者1人・2人\n\n```html\n<div class=\"CG2-series\">\n  <div class=\"CG2-series__item\">\n    <div class=\"CG2-series__itemHeader\">\n      <a href=\"\">\n        <div class=\"CG2-series__itemIcon\">\n          <div class=\"CG2-icon-lock\"></div>\n        </div>\n        <div class=\"CG2-series__itemTitle\">第2回 SVGデータの作成 1</div>\n        <div class=\"CG2-series__itemPubdate\">2014年05月15日</div>\n      </a>\n    </div>\n    <div class=\"CG2-series__itemBody\">\n      <p>Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。</p>\n    </div>\n    <div class=\"CG2-series__authors\">\n      <div class=\"CG2-series__author\">\n        <div class=\"CG2-series__authorPic\">\n          <a href=\"\"><img src=\"__dummy__80x80\" alt=\"長坂 菫\" width=\"40\" height=\"40\"></a>\n        </div>\n        <div class=\"CG2-series__authorName\">長坂 菫 | UIデザイナー</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"CG2-series__item\">\n    <div class=\"CG2-series__itemHeader\">\n      <a href=\"\">\n        <div class=\"CG2-series__itemTitle\">第1回 SVGコードの基本</div>\n        <div class=\"CG2-series__itemPubdate\">2014年05月08日</div>\n      </a>\n    </div>\n    <div class=\"CG2-series__itemBody\">\n      <p>この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。</p>\n    </div>\n    <div class=\"CG2-series__authors\">\n      <div class=\"CG2-series__author\">\n        <div class=\"CG2-series__authorPic\">\n          <a href=\"\"><img src=\"__dummy__80x80\" alt=\"杉原 幸次郎\" width=\"40\" height=\"40\"></a>\n        </div>\n        <div class=\"CG2-series__authorName\">杉原 幸次郎 | フロントエンド・エンジニア</div>\n      </div>\n      <div class=\"CG2-series__author\">\n        <div class=\"CG2-series__authorPic\">\n          <a href=\"\"><img src=\"__dummy__80x80\" alt=\"長坂 菫\" width=\"40\" height=\"40\"></a>\n        </div>\n        <div class=\"CG2-series__authorName\">長坂 菫 | UIデザイナー</div>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n## 著者複数、未読\n\n```html\n<div class=\"CG2-series\">\n  <div class=\"CG2-series__item CG2-series__item--unread\">\n    <div class=\"CG2-series__itemHeader\">\n      <a href=\"\">\n        <div class=\"CG2-series__itemTitle\">第1回 コミュニケーションツール</div>\n        <div class=\"CG2-series__itemPubdate\">2013年10月10日</div>\n      </a>\n    </div>\n    <div class=\"CG2-series__itemBody\">\n      <p>第1回はピクセルグリッドが日常の業務でのクライアントとのコミュニケーション方法やコミュニケーションツールがテーマです。</p>\n    </div>\n    <div class=\"CG2-series__authors\">\n      <div class=\"CG2-series__authorPicList\">\n        <ul>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"佐川 沙織\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"河田 理香\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"尾上 友美\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"新田 道雄\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"ピクセル グリオ\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"安田 麻由\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"野間 夏子\" width=\"40\" height=\"40\"></a></li>\n          <li><a href=\"\"><img src=\"__dummy__80x80\" alt=\"神戸 克巳\" width=\"40\" height=\"40\"></a></li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</div>\n```\n*/\n.CG2-series{}\n  .CG2-series__item{\n    margin-top: 45px;\n    &:first-child{\n      margin-top: 20px;\n    }\n  }\n    .CG2-series__itemHeader{\n      color: #787878; // === rgba( 120, 120, 120, 1 );\n      position: relative;\n      z-index: 1;\n      display: table;\n      width: 100%;\n      border-top: 1px solid #dbdbdb;\n      border-bottom: 1px solid #dbdbdb;\n      margin-bottom: 20px;\n      .CG2-series__item--unread &{\n        color: inherit;\n      }\n    }\n      // .CG2-series__itemStar{\n      //   display: table-cell;\n      //   vertical-align: middle;\n      //   box-sizing: border-box;\n      //   width: 56px;\n      //   padding: 20px 0 20px 15px;\n      //   @include max-screen( $breakpoint-middle ) {\n      //     width: 30px;\n      //     padding: 15px 0;\n      //   }\n      //   &:after{\n      //     @include icon( star );\n      //     font-size: 24px;\n      //     display: block;\n      //     @include max-screen( $breakpoint-middle ) {\n      //       font-size: 16px;\n      //       text-align: center;\n      //     }\n      //   }\n      // }\n      .CG2-series__itemHeader a{\n        @include resetLink();\n        text-decoration: none;\n        cursor: pointer;\n        display: table-cell;\n        &:after{\n          content: '';\n          position: absolute;\n          z-index: -1;\n          top: 0;\n          bottom: 0;\n          right: 100%;\n          left: 0;\n          transition: all .3s;\n        }\n        &:hover,\n        &:focus{\n          &:after{\n            background: #eee;\n            right: 0;\n          }\n        }\n      }\n        .CG2-series__itemIcon{\n          font-size: 24px;\n          display: table-cell;\n          vertical-align: middle;\n          box-sizing: border-box;\n          width: 1px;\n          padding: 0 10px 0 15px;\n          // .CG2-series__itemStar + a > &:first-child{\n          //   width: 40px;\n          //   padding-left: 0;\n          // }\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 16px;\n            padding: 0 10px 0 15px;\n          }\n        }\n        .CG2-series__itemTitle{\n          font-size: 20px;\n          vertical-align: middle;\n          display: table-cell;\n          padding: 20px 0;\n          .CG2-series__item--unread &{\n            font-weight: bold;\n          }\n          &:first-child{\n            padding-left: 20px;\n          }\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 14px;\n            padding-top: 15px;\n            padding-bottom: 15px;\n          }\n        }\n        .CG2-series__itemPubdate{\n          font-size: 12px;\n          white-space: nowrap;\n          vertical-align: middle;\n          display: table-cell;\n          width: 1%;\n          padding: 20px 20px 20px 5px;\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 8px;\n            padding-top: 15px;\n            padding-bottom: 15px;\n          }\n        }\n    .CG2-series__itemBody{\n      padding: 0 56px;\n      margin: 20px 0;\n      @include max-screen( $breakpoint-middle ) {\n        padding-left: 10px;\n        padding-right: 10px;\n      }\n      p{}\n    }\n    .CG2-series__authors{\n      padding: 0 56px;\n      a{\n        color: inherit;\n        text-decoration: none;\n        display: table;\n      }\n      @include max-screen( $breakpoint-middle ) {\n        padding-left: 10px;\n        padding-right: 10px;\n      }\n    }\n      .CG2-series__author{\n        @extend %author;\n      }\n        .CG2-series__authorPic{\n          @extend %authorPic;\n        }\n        .CG2-series__authorName{\n          @extend %authorName;\n        }\n      .CG2-series__authorPicList{\n        @extend %authorPicList;\n      }\n\n\n\n\n\n/* ==========================================================================\n   CG2-categoryHeader\n   ========================================================================== */\n/*\n---\nname: categoryHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\n```html\n<div class=\"CG2-categoryHeader\">\n  <div class=\"CG2-categoryHeader__inner\">\n    <div class=\"CG2-categoryHeader__icon\">\n      <span class=\"CG2-icon-cat-future CG2-icon--colored\"></span>\n    </div>\n    <div class=\"CG2-categoryHeader__text\">\n      <h1>未来・次世代</h1>\n      <p>カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。</p>\n    </div>\n  </div>\n</div>\n```\n\n*/\n\n.CG2-categoryHeader {\n  margin: 30px 0 60px;\n  @include max-screen( $breakpoint-middle ) {\n    margin: 0 0 30px 0;\n  }\n}\n  .CG2-categoryHeader__inner{\n    display: table;\n    width: 100%;\n  }\n    .CG2-categoryHeader__icon{\n      text-align: center;\n      vertical-align: middle;\n      display: table-cell;\n      width: 180px;\n      @include max-screen( $breakpoint-middle ) {\n        text-align: left;\n        width: 70px;\n      }\n    }\n    .CG2-categoryHeader__text{\n      display: table-cell;\n      vertical-align: middle;\n      h1{\n        font-size: 24px;\n        line-height: 1.2;\n        margin: 0 0 15px;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 16px;\n          margin-bottom: 10px;\n        }\n      }\n      p{\n        margin: 10px 0;\n      }\n      & > *:last-child{\n        margin-bottom: 0;\n      }\n    }\n\n.CG2-categoryHeader {\n  span[class*=\"CG2-icon-cat\"]{\n    font-size: 120px;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 50px;\n    }\n  }\n}\n\n/* ==========================================================================\n   CG2-articleHeader\n   ========================================================================== */\n/*\n---\nname: articleHeader\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-articlelist\n---\n\n```html\n<div class=\"CG2-articleHeader\">\n  <div class=\"CG2-articleHeader__inner\">\n    <div class=\"CG2-articleHeader__category\">\n      <div class=\"CG2-articleHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-elementary\"></span>\n      </div>\n      <div class=\"CG2-articleHeader__categoryName\">入門</div>\n    </div>\n\n    <div class=\"CG2-articleHeader__main\">\n      <div class=\"CG2-articleHeader__mainInner\">\n        <div class=\"CG2-articleHeader__series\">\n          <a href=\"javascript:alert( 'シリーズ一覧へ' );\">\n            そこが知りたい、 Flexible Box\n          </a>\n        </div>\n        <div class=\"CG2-articleHeader__title\">第2回 仕様を知る 2</div>\n        <div class=\"CG2-articleHeader__abstract\">\n          <p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>\n        </div>\n        <div class=\"CG2-articleHeader__pubDate\">2015年 5月14日発行</div>\n        \n        <div class=\"CG2-articleHeader__authors\">\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"#\">\n              <div class=\"CG2-articleHeader__authorImage\">\n                <img src=\"__dummy__48x48\" alt=\"\">\n              </div>\n              <div class=\"CG2-articleHeader__authorName\">佐川 沙織</div>\n              <div class=\"CG2-articleHeader__authorTitle\">フロントエンド・エンジニア</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"#\">\n              <div class=\"CG2-articleHeader__authorImage\">\n                <img src=\"__dummy__48x48\" alt=\"\">\n              </div>\n              <div class=\"CG2-articleHeader__authorName\">佐川 沙織</div>\n            </a>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div class=\"CG2-articleHeader__pagenation\">\n      <ul>\n        <li class=\"CG2-articleHeader__pagenationPrev\"><a href=\"#\">前回</a></li>\n        <li class=\"CG2-articleHeader__pagenationNext\"><a href=\"#\">次回</a></li>\n      </ul>\n    </div>\n\n    <div class=\"CG2-articleHeader__utils\">\n      <ul>\n        <li><a href=\"#\" class=\"CG2-transparentButton\"><span class=\"CG2-icon-list\"></span>このシリーズの記事一覧をみる</a></li>\n        <li><button class=\"CG2-transparentButton\"><span class=\"CG2-icon-star\"></span>このシリーズをお気に入りに登録</button></li>\n        <li><button class=\"CG2-transparentButton\">未読にする</button></li>\n      </ul>\n    </div>\n\n  </div>\n  <div class=\"CG2-articleHeader__bg\" style=\"background-image: url(//cdn.codegrid.net/2015-css-flexiblebox/main-blur.jpg)\"></div>\n</div>\n```\n\n## 通常\n\n```html\n<div class=\"CG2-articleHeader\">\n  <div class=\"CG2-articleHeader__inner\">\n    <div class=\"CG2-articleHeader__category\">\n      <div class=\"CG2-articleHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-standards\"></span>\n      </div>\n      <div class=\"CG2-articleHeader__categoryName\">仕様解説</div>\n    </div>\n    <div class=\"CG2-articleHeader__main\">\n      <div class=\"CG2-articleHeader__mainInner\">\n        <div class=\"CG2-articleHeader__series\">そこが知りたい、Flexible Box</div>\n        <div class=\"CG2-articleHeader__title\">第2回 仕様を知る 2</div>\n        <div class=\"CG2-articleHeader__abstract\">\n          <p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>\n        </div>\n        <div class=\"CG2-articleHeader__pubDate\">2015年04月16日発行</div>\n        <div class=\"CG2-articleHeader__authors\">\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\">\n                <img src=\"__dummy__48x48\" alt=\"佐川 沙織\">\n              </div>\n              <div class=\"CG2-articleHeader__authorName\">佐川 沙織</div>\n              <div class=\"CG2-articleHeader__authorTitle\">フロントエンド・エンジニア</div>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"CG2-articleHeader__pagenation\">\n      <ul>\n        <li class=\"CG2-articleHeader__pagenationPrev\"><a href=\"\">前回</a></li>\n        <li class=\"CG2-articleHeader__pagenationNext\"><a href=\"\">次回</a></li>\n      </ul>\n    </div>\n    <div class=\"CG2-articleHeader__utils\">\n      <ul>\n        <li>\n          <a href=\"\" class=\"CG2-transparentButton\"><span class=\"CG2-icon-list\"></span>このシリーズの記事一覧をみる</a>\n        </li>\n        <li>\n          <button id=\"js-toggle-fav-series\" type=\"button\" aria-pressed=\"false\" class=\"CG2-transparentButton\">\n            <span aria-hidden=\"true\" class=\"CG2-icon-star\"></span>\n            <span class=\"CG2-transparentButton__favText\">このシリーズをお気に入りに登録</span>\n          </button>\n        </li>\n        <li>\n          <button id=\"js-unread\" class=\"CG2-transparentButton\">未読にする</button>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2015-css-flexiblebox/main-blur.jpg)\" class=\"CG2-articleHeader__bg\"></div>\n</div>\n```\n\n## 著者複数、前次回なし、お気に入り済、未読押下後\n\n```html\n<div data-page-id=\"entry-main\" class=\"CG2-articleHeader\">\n  <div class=\"CG2-articleHeader__inner\">\n    <div class=\"CG2-articleHeader__category\">\n      <div class=\"CG2-articleHeader__categoryIcon\">\n        <span class=\"CG2-icon-cat-survey\"></span>\n      </div>\n      <div class=\"CG2-articleHeader__categoryName\">アンケート</div>\n    </div>\n    <div class=\"CG2-articleHeader__main\">\n      <div class=\"CG2-articleHeader__mainInner\">\n        <div class=\"CG2-articleHeader__series\">ピクセルグリッド技術サーベイ 2015</div>\n        <div class=\"CG2-articleHeader__title\">第1回 JavaScriptトランスパイラ編</div>\n        <div class=\"CG2-articleHeader__abstract\">\n          <p>技術サーベイの第1回目は、 JavaScriptトランスパイラ編。最終的にJavaScriptとして書き出される3つの言語の使用経験を聞きました。どんな理由で使うのか、その将来性に迫ります。</p>\n        </div>\n        <div class=\"CG2-articleHeader__pubDate\">2015年06月18日発行</div>\n        <div class=\"CG2-articleHeader__authors\">\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"大澤 直子\"></div>\n              <div class=\"CG2-articleHeader__authorName\">大澤 直子</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"山口 弘一\"></div>\n              <div class=\"CG2-articleHeader__authorName\">山口 弘一</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"杉原 幸次郎\"></div>\n              <div class=\"CG2-articleHeader__authorName\">杉原 幸次郎</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"玉田 義之\"></div>\n              <div class=\"CG2-articleHeader__authorName\">玉田 義之</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"橋本 孝治\"></div>\n              <div class=\"CG2-articleHeader__authorName\">橋本 孝治</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"長坂 菫\"></div>\n              <div class=\"CG2-articleHeader__authorName\">長坂 菫</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"玉田 義之\"></div>\n              <div class=\"CG2-articleHeader__authorName\">玉田 義之</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"佐川 沙織\"></div>\n              <div class=\"CG2-articleHeader__authorName\">佐川 沙織</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"坪田 健之\"></div>\n              <div class=\"CG2-articleHeader__authorName\">坪田 健之</div>\n            </a>\n          </div>\n          <div class=\"CG2-articleHeader__author\">\n            <a href=\"\">\n              <div class=\"CG2-articleHeader__authorImage\"><img src=\"__dummy__48x48\" alt=\"野間 夏子\"></div>\n              <div class=\"CG2-articleHeader__authorName\">野間 夏子</div>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"CG2-articleHeader__pagenation\">\n      <ul>\n      </ul>\n    </div>\n    <div class=\"CG2-articleHeader__utils\">\n      <ul>\n        <li>\n          <a href=\"\" class=\"CG2-transparentButton\"><span class=\"CG2-icon-list\"></span>このシリーズの記事一覧をみる</a>\n        </li>\n        <li>\n          <button id=\"js-toggle-fav-series\" type=\"button\" aria-pressed=\"false\" class=\"CG2-transparentButton CG2-transparentButton--favAdded\">\n            <span aria-hidden=\"true\" class=\"CG2-icon-star\"></span>\n            <span class=\"CG2-transparentButton__favText\">このシリーズのお気に入り解除</span>\n          </button>\n        </li>\n        <li>\n          <button id=\"js-unread\" class=\"CG2-transparentButton\" disabled>未読にする</button>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div style=\"background-image: url(//cdn.codegrid.net/2015-tech-survey/main-blur.jpg)\" class=\"CG2-articleHeader__bg\"></div>\n</div>\n```\n*/\n\n.CG2-articleHeader{\n  @include blurry-parent();\n  color: #fff;\n}\n  .CG2-articleHeader__inner{\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    max-width: 1016px;\n    padding: 40px 190px;\n    margin: 0 auto;\n    @include max-screen( $breakpoint-base ) {\n      padding-left: ( 190 / 1016 ) * 100%;\n      padding-right: ( 190 / 1016 ) * 100%;\n    }\n    @include max-screen( $breakpoint-middle ) {\n      width: auto;\n      max-width: 656px;\n      padding: 20px;\n    }\n  }\n\n\n  .CG2-articleHeader__category{\n    position: absolute;\n    top: calc( 40px + 0.5em );\n    left: 50px;\n    width: 50px;\n    @include max-screen( $breakpoint-middle ) {\n      vertical-align: middle;\n      position: static;\n      display: table;\n      width: auto;\n      margin-bottom: 10px;\n    }\n  }\n    .CG2-articleHeader__categoryIcon{\n      width: 50px;\n      height: 50px;\n      margin-bottom: 10px;\n      span[class*=\"CG2-icon-cat\"]{\n        font-size: 50px;\n        line-height: 50px;\n        top: 0;\n      }\n      @include max-screen( $breakpoint-middle ) {\n        display: table-cell;\n        width: auto;\n        height: auto;\n        span[class*=\"CG2-icon-cat\"]{\n          font-size: 32px;\n          line-height: 32px;\n        }\n      }\n    }\n    .CG2-articleHeader__categoryName{\n      letter-spacing: 0.2em;\n      line-height: 50px;\n      -webkit-writing-mode: vertical-rl;\n      writing-mode: tb-rl; // IE\n      writing-mode: vertical-rl;\n      margin: auto;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 12px;\n        letter-spacing: 0;\n        line-height: normal;\n        vertical-align: middle;\n        -webkit-writing-mode: inherit;\n        writing-mode: inherit; // IE\n        writing-mode: inherit;\n        display: table-cell;\n        padding-left: 10px;\n      }\n    }\n\n  .CG2-articleHeader__main{\n    display: table;\n    width: 100%;\n    height: 260px;\n    @include max-screen( $breakpoint-middle ) {\n      height: auto;\n    }\n  }\n    .CG2-articleHeader__mainInner{\n      display: table-cell;\n      vertical-align: top;\n    }\n\n      .CG2-articleHeader__series{\n        font-size: 24px;\n        font-family: $fontSerif;\n        font-feature-settings: \"palt\";\n        line-height: 1.4;\n        a{\n          color: inherit;\n          text-decoration: inherit;\n          display: inline-block;\n          position: relative;\n          &:after{\n            content: '';\n            opacity: 0;\n            position: absolute;\n            bottom: -3px;\n            left: 0;\n            right: 0;\n            display: block;\n            height: 1px;\n            background: #fff;\n            transition: all .6s;\n          }\n          &:hover:after,\n          &:focus:after{\n            bottom: 0;\n            opacity: 1;\n          }\n        }\n      }\n      .CG2-articleHeader__title{\n        font-size: 32px;\n        font-family: $fontSerif;\n        font-feature-settings: \"palt\";\n        font-weight: 600;\n        line-height: 1.4;\n        margin-bottom: 22px;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 18px;\n        }\n      }\n      .CG2-articleHeader__abstract{\n        line-height: 1.6;\n        p{\n          margin-top: .5em;\n          margin-bottom: .5em;\n        }\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 12px;\n        }\n      }\n      .CG2-articleHeader__pubDate{\n        font-size: 12px;\n        opacity: 0.5;\n      }\n\n      .CG2-articleHeader__authors{\n        font-size: 0;\n        margin: 10px 0;\n      }\n        .CG2-articleHeader__author{\n          font-size: 1rem;\n          display: inline-table;\n          margin: 3px 10px 3px 0;\n          margin-right: 10px;\n          & > a {\n            color: inherit;\n            text-decoration: none;\n            position: relative;\n            display: table;\n            width: 100%;\n            &:before{\n              content: '';\n              display: block;\n              position: absolute;\n              top: -2px;\n              right: -2px;\n              bottom: -2px;\n              left: -2px;\n              background: rgba( 255, 255, 255, 0 );\n              transition: all .5s;\n            }\n            &:hover:before,\n            &:focus:before {\n              background: rgba( 255, 255, 255, 0.2 );\n              transition: all .2s;\n            }\n          }\n        }\n          .CG2-articleHeader__authorImage{\n            vertical-align: middle;\n            display: table-cell;\n            padding-right: 8px;\n            img{\n              display: block;\n              width: 24px;\n              height: 24px;\n            }\n          }\n          .CG2-articleHeader__authorName{\n            font-size: 12px;\n            vertical-align: middle;\n            display: table-cell;\n            padding-right: 6px;\n          }\n          .CG2-articleHeader__authorTitle{\n            font-size: 12px;\n            vertical-align: middle;\n            display: table-cell;\n            padding-left: 6px;\n            position: relative;\n            &:before{\n              content: '';\n              position: absolute;\n              top: 0;\n              bottom: 0;\n              left: 0;\n              height: 1.4em;\n              border-left: 1px solid #fff;\n              margin: auto;\n            }\n          }\n\n  .CG2-articleHeader__pagenation{\n    padding-top: 20px;\n    margin: 0 -140px;\n    @include max-screen( $breakpoint-middle ) {\n      display: none;\n    }\n    ul{\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    }\n      li{\n        vertical-align: middle;\n        box-sizing: border-box;\n        display: inline-block;\n        margin: 0;\n        a{\n          color: inherit;\n          font-size: 14px;\n          line-height: 1.2;\n          text-decoration: none;\n          position: relative;\n          display: inline-block;\n          padding: 6px 8px;\n          border: 1px solid #fff;\n          border-radius: 2px;\n          background: rgba( 255, 255, 255, 0 );\n          transition: all .3s;\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 12px;\n            padding: 4px 6px;\n          }\n          &:hover,\n          &:focus{\n            background: rgba( 255, 255, 255, 0.2 );\n          }\n          &:before{\n            position: absolute;\n            top: 50%;\n            transition: all .2s;\n          }\n        }\n        &.CG2-articleHeader__pagenationPrev{\n          float: left;\n          a{\n            padding-right: 12px;\n            padding-left: calc( 1.2em + 8px );\n            &:before{\n              @include icon( 'left' );\n              line-height: 0;\n              left: 8px;\n            }\n            &:hover:before,\n            &:focus:before{\n              left: 5px;\n            }\n          }\n        }\n        &.CG2-articleHeader__pagenationNext{\n          float: right;\n          a{\n            padding-right: calc( 1.2em + 8px );\n            padding-left: 12px;\n            &:before{\n              @include icon( 'right' );\n              line-height: 0;\n              right: 8px;\n            }\n            &:hover:before,\n            &:focus:before{\n              right: 5px;\n            }\n          }\n        }\n      }\n  }\n  .CG2-articleHeader__utils{\n    @include max-screen( $breakpoint-middle ) {\n      margin-top: 10px;\n    }\n    ul{\n      font-size: 0;\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    }\n    li{\n      font-size: 1rem;\n      display: inline-block;\n      margin: 0 10px 10px 0;\n      @include max-screen( $breakpoint-middle ) {\n        margin: 0 5px 5px 0;\n      }\n    }\n  }\n  .CG2-articleHeader__utilButton{}\n\n  .CG2-articleHeader__bg{\n    @include blurry();\n    // &.CG2-articleHeader__bg--blurry{\n    //   @include blurry--blurry();\n    // }\n  }\n\n\n\n@media print {\n\n.CG2-articleHeader{\n  color: #000;\n  background: #fff;\n  border-bottom: 1px solid #000;\n}\n  .CG2-articleHeader__inner{\n    width: auto;\n    padding: 20px 190px;\n  }\n  .CG2-articleHeader__pagenation{\n    display: none;\n  }\n  .CG2-articleHeader__bg{\n    display: none;\n  }\n\n}\n\n\n\n/* ==========================================================================\n   CG2-inAppNotificationBar\n   ========================================================================== */\n/*\n---\nname: inAppNotificationBar\ncategory:\n  - Templates\ntag:\n  - app-item\ntemplateItem:\n  - true\n---\n\nアプリケーション内のメッセージを表示させたいときに使用。\n\n## メッセージのみ\n\n```html\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--level2\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    ログアウトしました\n  </div>\n</div>\n```\n\n## メッセージとアクション\n\nリンクなどの動線を入れたい場合は、`CG2-inAppNotificationBar--withAction`を付与する。\n\n```html\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--withAction\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    <span class=\"CG2-icon-exclamation-circle\"></span>\n    現在、未購読状態です\n  </div>\n  <div class=\"CG2-inAppNotificationBar__action\">\n    <a class=\"CG2-transparentButton\" href=\"#\">設定へ</a>\n  </div>\n</div>\n```\n\n## カラーバリエーション\n\n```html\n<div class=\"CG2-inAppNotificationBar\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    レベルなし\n  </div>\n</div>\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--level1\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    レベル1\n  </div>\n</div>\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--level2\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    レベル2\n  </div>\n</div>\n<div class=\"CG2-inAppNotificationBar CG2-inAppNotificationBar--level3\">\n  <div class=\"CG2-inAppNotificationBar__message\">\n    レベル3\n  </div>\n</div>\n```\n\n*/\n.CG2-inAppNotificationBar{\n  color: #FFF;\n  font-size: 16px;\n  font-weight: bold;\n  padding: 16px;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  background-color: #bbb;\n  &.CG2-inAppNotificationBar--level1{\n    background-color: #F03C3C;\n  }\n  &.CG2-inAppNotificationBar--level2{\n    background-color: #f0b428;\n  }\n  &.CG2-inAppNotificationBar--level3{\n    background-color: #14C850;\n  }\n  &.CG2-inAppNotificationBar--withAction{\n    justify-content: space-between;\n  }\n\n  @include max-screen( $breakpoint-small ) {\n    font-size: 14px;\n    padding: 10px;\n  }\n}\n  .CG2-inAppNotificationBar__message{\n    span[class^=\"CG2-icon-\"]{\n      font-size: 28px;\n      margin-right: 10px;\n      @include max-screen( $breakpoint-small ) {\n        font-size: 20px;\n        margin-right: 5px;\n      }\n    }\n  }\n  .CG2-inAppNotificationBar__action{}\n\n\n/* ==========================================================================\n   CG2-articleNotice\n   ========================================================================== */\n/*\n---\nname: articleNotice\ncategory:\n  - Templates\ntag:\n  - app-item-article\ntemplateItem:\n  - true\n---\n\n```html\n<div class=\"CG2-articleNotice CG2-articleNotice--level1\">\n  <div class=\"CG2-articleNotice__head\">\n    <span class=\"CG2-icon-exclamation-triangle\"></span>\n    多くが古い情報の可能性があり、現在は推奨されない記事です\n  </div>\n</div>\n```\n\n```html\n<div class=\"CG2-articleNotice CG2-articleNotice--level2\">\n  <div class=\"CG2-articleNotice__head\">\n    <span class=\"CG2-icon-exclamation-circle\"></span>\n    一部古い情報の可能性があります\n  </div>\n</div>\n```\n\n```html\n<div class=\"CG2-articleNotice CG2-articleNotice--level3\">\n  <div class=\"CG2-articleNotice__head\">\n    古い記事ですが、現在も使える情報です\n  </div>\n</div>\n```\n\n## リンクあり\n\n```html\n<div class=\"CG2-articleNotice CG2-articleNotice--level2\">\n  <div class=\"CG2-articleNotice__head\">\n    <span class=\"CG2-icon-exclamation-circle\"></span>\n    新しいバージョンに対応した<a href=\"\">シリーズ</a>があります。\n  </div>\n</div>\n```\n\n*/\n\n.CG2-articleNotice{\n  color: #fff;\n  font-size: 16px;\n  font-weight: bold;\n  line-height: 1.4;\n  text-align: center;\n  padding: 16px;\n  background-color: #14c850;\n  &.CG2-articleNotice--level1{\n    background-color: #f03c3c;\n  }\n  &.CG2-articleNotice--level2{\n    background-color: #f0b428;\n  }\n  a{\n    color: inherit;\n  }\n  @include max-screen( $breakpoint-small ) {\n    font-size: 14px;\n  }\n}\n  .CG2-articleNotice__head{\n    span[class^=\"CG2-icon-\"]{\n      font-size: 28px;\n      line-height: 0;\n      margin-right: 10px;\n      @include max-screen( $breakpoint-small ) {\n        font-size: 20px;\n        margin-right: 5px;\n      }\n    }\n  }\n\n\n/* ==========================================================================\n   CG2-narrowLayout\n   ========================================================================== */\n/*\n---\nname: narrowLayout\ncategory:\n  - Templates\ntag:\n  - app-item-article\ntemplateItem:\n  - true\n---\n\n記事ページ用のレイアウト\nサイドバーに `.CG2-articleSeriesNav` 利用する\n\n```html\n<div class=\"CG2-narrowLayout\">\n  <div class=\"CG2-narrowLayout__main\">\n    目次など\n  </div>\n  <div class=\"CG2-narrowLayout__sub\">\n\n    <div class=\"CG2-articleSeriesNav\">\n      <div class=\"CG2-articleSeriesNav__inner\">\n        <ul>\n          <li><a href=\"#\">第1回「 仕様を知る 1 」</a></li>\n          <li><a href=\"#\">第2回「 仕様を知る 2 」</a></li>\n          <li><a href=\"#\">第12回「 仕様を知る 2.4 」</a></li>\n        </ul>\n      </div>\n    </div>\n\n  </div>\n  <div class=\"CG2-narrowLayout__main\">\n    本文領域\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum est vitae risus congue, quis cursus lectus mattis. Maecenas mattis tempus mauris ultrices viverra. Donec eget justo ante. Aliquam accumsan leo egestas venenatis faucibus. Aliquam sed massa hendrerit, suscipit ipsum vel, lobortis quam. Aliquam mauris elit, eleifend eu porta vel, sodales at augue. Praesent cursus, nulla sit amet suscipit fringilla, nibh velit efficitur ligula, a feugiat turpis massa ac nunc. Cras consequat nibh in nulla faucibus eleifend.\n    Ut mattis velit dui, sed tristique felis laoreet vitae. Donec placerat ante vel elit pellentesque, sit amet vulputate nisi consequat. Pellentesque efficitur euismod commodo. Vivamus ac maximus eros, sit amet porttitor libero. Praesent eu vehicula tortor. Vestibulum eu magna finibus, viverra diam nec, pulvinar velit. Praesent in mi sit amet nisi suscipit dictum. Proin sit amet diam tincidunt, tristique tortor ac, luctus est. Vivamus venenatis orci non lacinia ultricies. Duis posuere sit amet elit nec pretium. Suspendisse eget efficitur arcu. Proin porttitor turpis ipsum, ac venenatis odio fermentum ut.\n  </div>\n</div>\n```\n\n*/\n.CG2-narrowLayout{\n  @include clearfix();\n  max-width: 1016px;\n  margin: 0 auto;\n  @include max-screen( $breakpoint-base ) {\n    max-width: 636px;\n    padding: 0 10px;\n  }\n}\n  .CG2-narrowLayout__main{\n    float: right;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 0 190px;\n    @include max-screen( $breakpoint-base ) {\n      float: none;\n      padding: 0;\n    }\n  }\n  .CG2-narrowLayout__sub{\n    float: left;\n    box-sizing: border-box;\n    width: 150px;\n    margin-right: -100%;\n    @include max-screen( $breakpoint-base ) {\n      float: none;\n      width: auto;\n      margin-right: 0;\n    }\n  }\n\n\n@media print {\n.CG2-narrowLayout{\n  display: block;\n  width: auto;\n}\n  .CG2-narrowLayout__main{\n    float: none;\n    width: auto;\n    padding: 0 20px;\n  }\n  .CG2-narrowLayout__sub{\n    display: none;\n  }\n}\n\n/* ==========================================================================\n   CG2-articleBeforeLogin\n   ========================================================================== */\n/*\n---\nname: articleBeforeLogin\ncategory:\n  - Blocks/app\ntag:\n  - app-item-article\n---\n\n```html\n<div class=\"CG2-articleBeforeLogin\">\n  <div class=\"CG2-articleBeforeLogin__lead\">この記事を読むには<br>購読の手続きが必要です</div>\n  <div class=\"CG2-articleBeforeLogin__sub\"></div>\n  <div class=\"CG2-articleBeforeLogin__buttonContainer\">\n    <ul>\n      <li><a class=\"CG2-button CG2-button--primary\" href=\"#\">購読の手続きへ</a></li>\n      <li><a class=\"CG2-button\" href=\"#\">購読済みの方はログイン</a></li>\n    </ul>\n  </div>\n</div>\n```\n\n*/\n.CG2-articleBeforeLogin{\n  margin: 80px 0;\n  @include max-screen( $breakpoint-small ) {\n    margin: 40px 0;\n  }\n  & > *:first-child{\n    margin-top: 0;\n  }\n  & > *:last-child{\n    margin-bottom: 0;\n  }\n}\n  .CG2-articleBeforeLogin__lead{\n    font-family: $fontSerif;\n    font-feature-settings: \"palt\";\n    font-size: 32px;\n    text-align: center;\n    margin: 40px 0;\n    @include max-screen( $breakpoint-small ) {\n      font-size: 24px;\n      margin: 20px 0;\n    }\n  }\n  .CG2-articleBeforeLogin__sub{\n    text-align: center;\n    margin: 40px 0;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 16px;\n    }\n    @include max-screen( $breakpoint-small ) {\n      font-size: 14px;\n      margin: 20px 0;\n    }\n  }\n  .CG2-articleBeforeLogin__buttonContainer{\n    margin: 40px 0;\n    @include max-screen( $breakpoint-small ) {\n      margin: 40px 0;\n    }\n    ul{\n      font-size: 0;\n      list-style: none;\n      text-align: center;\n      padding: 0;\n      margin: 0;\n    }\n    li{\n      font-size: 1rem;\n      display: inline-block;\n      margin: 0 8px 5px;\n      @include max-screen( $breakpoint-small ) {\n        display: block;\n      }\n    }\n    @include max-screen( $breakpoint-small ) {\n      li{\n        margin: 0 0 5px;\n      }\n    }\n    .CG2-button{\n      font-size: 16px;\n      @include max-screen( $breakpoint-small ) {\n        text-align: center;\n        padding: .4em 10px;\n        width: 100%;\n      }\n    }\n  }\n\n/* ==========================================================================\n   CG2-articleTOC\n   ========================================================================== */\n/*\n---\nname: articleTOC\ncategory:\n  - Blocks/app\ntag:\n  - app-item-article\n---\n\n```html\n<section class=\"CG2-articleTOC\">\n  <header class=\"CG2-articleTOC__header\">\n    <h1>目次</h1>\n  </header>\n  <div class=\"CG2-articleTOC__body\">\n    <div class=\"CG2-articleTOC__list\">\n      <ul>\n        <li><a href=\"#\">はじめに</a></li>\n        <li><a href=\"#\">flex-growとflex-shrink</a></li>\n        <li><a href=\"#\">利用可能な余白を計算する</a></li>\n        <li><a href=\"#\">まとめ</a></li>\n      </ul>\n    </div>\n  </div>\n</section>\n```\n\n*/\nsection.CG2-articleTOC{\n  box-sizing: border-box;\n  margin: 40px auto;\n  @include max-screen( $breakpoint-middle ) {\n    margin: 20px auto;\n  }\n}\n  header.CG2-articleTOC__header{\n    padding-bottom: 8px;\n    border-bottom: 1px solid #dbdbdb;\n    margin-bottom: 1em;\n    h1{\n      font-size: 28px;\n      font-family: $fontSerif;\n      font-feature-settings: \"palt\";\n      font-weight: normal;\n      min-height: 44px;\n      margin: 0;\n    }\n    @include max-screen( $breakpoint-middle ) {\n      padding: 0 10px .3em;\n      margin-bottom: 20px;\n      h1{\n        font-size: 18px;\n        min-height: 0;\n      }\n    }\n  }\n  .CG2-articleTOC__body{\n    display: table;\n    width: 100%;\n    @include max-screen( $breakpoint-middle ) {\n      display: block;\n      width: auto;\n      padding: 0 10px;\n    }\n  }\n    .CG2-articleTOC__list{\n      vertical-align: top;\n      display: table-cell;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 14px;\n        display: block;\n        margin: 10px 0;\n      }\n      ul{\n        list-style: none;\n        padding: 0;\n        margin: auto;\n      }\n      li{\n        margin: .8em 0 0;\n        &:first-child{\n          margin-top: 0;\n        }\n        @include max-screen( $breakpoint-middle ) {\n          margin-top: .4em;\n        }\n      }\n      a{\n        @include resetLink();\n        text-decoration: none;\n        &::before{\n          @include icon( 'down' );\n          margin: 0 .4em 0 0;\n          transition: transform .4s cubic-bezier(.3, 2, .6, 1 );\n        }\n        &:hover::before{\n          transform: translateY( 2px );\n          transition-duration: .4s;\n        }\n      }\n    }\n\n\n@media print {\n  .CG2-articleTOC__body{\n    display: block;\n    width: auto;\n  }\n    .CG2-articleTOC__list{\n      font-size: 18px;\n      display: block;\n    }\n}\n\n/* ==========================================================================\n   CG2-articleSeriesNav\n   ========================================================================== */\n/*\n---\nname: articleSeriesNav\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n記事ページ `.CG2-narrowLayout` のサイドバー内で利用する\n\n```html\n<div class=\"CG2-articleSeriesNav\">\n  <div class=\"CG2-articleSeriesNav__inner\">\n    <ul>\n      <li><a href=\"#\">第1回「 仕様を知る 1 」</a></li>\n      <li class=\"CG2-articleSeriesNav__item--current\"><a href=\"#\">第2回「 仕様を知る 2 」</a></li>\n      <li><a href=\"#\">第3回「 Flexboxを実践する 1 」</a></li>\n      <li><a href=\"#\">第4回「 Flexboxを実践する 2 」</a></li>\n      <li><a href=\"#\">５こまではいる、長いと切れる長いと切れる長いと切れる</a></li>\n    </ul>\n    <ul>\n      <li><a href=\"#\">６こ目は次のUL</a></li>\n      <li><a href=\"#\">７こ目</a></li>\n      <li><a href=\"#\">８こ目</a></li>\n      <li><a href=\"#\">９こ目</a></li>\n      <li><a href=\"#\">１０こ目</a></li>\n    </ul>\n  </div>\n</div>\n```\n\n*/\n\n\n.CG2-articleSeriesNav{\n  font-family: $fontVertical;\n  padding-top: 92px;\n  letter-spacing: 0.2em;\n  box-sizing: border-box;\n  margin: 0 auto;\n  @include max-screen( $breakpoint-base ) {\n    padding-top: 0;\n    letter-spacing: 0;\n    margin: 60px 0;\n  }\n  @include max-screen( $breakpoint-middle ) {\n    display: none;\n  }\n}\n.CG2-articleSeriesNav__inner{\n  line-height: 1.6;\n  width: 150px;\n  padding-top: 40px;\n  border-top: 1px solid #dbdbdb;\n  @include max-screen( $breakpoint-base ) {\n    width: auto;\n    padding-top: 0;\n    border-top: none;\n  }\n  ul{\n    -webkit-writing-mode: vertical-rl;\n            writing-mode: tb-rl; // IE\n            writing-mode: vertical-rl;\n    list-style: none;\n    width: 8em;\n    padding: 0;\n    margin: 0 auto 20px;\n    @include max-screen( $breakpoint-base ) {\n      -webkit-writing-mode: horizontal-tb;\n              writing-mode: lr-tb; // IE\n              writing-mode: horizontal-tb;\n      width: auto;\n      margin: 0;\n    }\n  }\n  li{\n    line-height: 1;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 19.9%;\n    max-height: 500px;\n    padding: 0;\n    margin: 0;\n    @include max-screen( $breakpoint-base ) {\n      white-space: normal;\n      overflow: visible;\n      display: block;\n      width: auto;\n      max-height: none;\n      margin: 6px 0;\n    }\n    &.CG2-articleSeriesNav__item--current a{\n      color: #fff;\n      background: #000;\n    }\n  }\n  abbr{\n    -webkit-text-orientation: upright;\n            text-orientation: upright;\n    @include max-screen( $breakpoint-base ) {\n      -webkit-text-orientation: mixed;\n              text-orientation: mixed;\n    }\n  }\n  a{\n    @include resetLink();\n    text-decoration: none;\n    overflow-y: hidden;\n    text-overflow: ellipsis;\n    display: inline-block;\n    max-height: 100%;\n    padding: 0 2px;\n    transition: .3s all;\n    @include max-screen( $breakpoint-base ) {\n      display: block;\n      overflow-y: visible;\n      padding: 4px;\n    }\n    &:hover,\n    &:focus{\n      background: #eee;\n      transition: none;\n    }\n  }\n}\n\n\n/* ==========================================================================\n   CG2-article\n   ========================================================================== */\n/*\n---\nname: article\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n記事本文、markdownから変換されることを前提\n\n```html\n<article class=\"CG2-article\">\n\n  <h2>h2みだし</h2>\n\n  <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n\n  <h3>h3みだし</h3>\n\n  <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n\n  <h4>h4みだし</h4>\n\n  <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n\n  <ul>\n    <li>リストりすと</li>\n    <li>リストりすと</li>\n  </ul>\n\n  <ol>\n    <li>リストりすと</li>\n    <li>リストりすと</li>\n  </ol>\n\n  <table>\n    <tbody>\n      <tr>\n        <th>見出しセル</th>\n        <th>見出しセル</th>\n        <th>見出しセル</th>\n      </tr>\n      <tr>\n        <td>データセル</td>\n        <td>データセル</td>\n        <td>データセル</td>\n      </tr>\n      <tr>\n        <td>データセル</td>\n        <td>データセル</td>\n        <td>データセル</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <table>\n    <tbody>\n      <tr>\n        <th>見出しセル</th>\n        <td>データセル</td>\n        <td>データセル</td>\n      </tr>\n      <tr>\n        <th>見出しセル</th>\n        <td>データセル</td>\n        <td>データセル</td>\n      </tr>\n    </tbody>\n  </table>\n\n</article>\n```\n\n*/\narticle.CG2-article{\n  font-size: 16px;\n  line-height: 1.8;\n  border-bottom: 1px solid #dbdbdb;\n  padding-bottom: 30px;\n  margin-bottom: 20px;\n  word-wrap: break-word;\n  @include max-screen( $breakpoint-middle ) {\n    line-height: 2;\n    padding: 0 10px;\n  }\n  & > h2{\n    font-size: 28px;\n    font-family: $fontSerif;\n    font-feature-settings: \"palt\";\n    font-weight: normal;\n    line-height: 1.2;\n    padding-bottom: .5em;\n    border-bottom: 1px solid #dbdbdb;\n    margin: 2.5em 0 1.5em;\n    &:first-child{\n      margin-top: 0;\n    }\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 20px;\n      padding: 0 10px 10px;\n      margin: 20px -10px;\n    }\n  }\n  & > h3{\n    font-size: 20px;\n    font-weight: normal;\n    margin: 2em 0 .5em;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 18px;\n      margin-top: 1.6em;\n    }\n  }\n  & > h4{\n    font-size: 16px;\n    font-weight: bold;\n    margin: 2em 0 .5em;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 14px;\n      margin-top: 1.6em;\n    }\n  }\n  p{\n    margin: 2em 0;\n    @include max-screen( $breakpoint-middle ) {\n      margin: 1.6em 0;\n    }\n  }\n  ul{\n    margin: 0;\n    padding: 0 0 0 20px;\n  }\n  ol{\n    margin: 0;\n    padding: 0 0 0 30px;\n  }\n  li{\n    margin: 1em 0;\n    @include max-screen( $breakpoint-middle ) {\n      margin: .5em 0;\n    }\n  }\n  table{\n    // table-layout : fixed;\n    // width: 100%\n    // max-width: 100%;\n    margin: 2em 0;\n    th, td{\n      // `width: 100%` + `table-layout : fixed;`\n      // ではない table (shrink to fit) の中では\n      // `break-all` しかない\n      word-break: break-all;\n      padding: .3em 10px;\n      border: 1px solid #dbdbdb;\n      &:first-child{\n        word-wrap: normal;\n        @include max-screen( $breakpoint-middle ) {\n          word-break: break-all;\n        }\n      }\n    }\n    th{\n      background: #eee;\n    }\n    td{\n      background: #fff;\n    }\n  }\n  figure{\n    margin: 2em 0;\n    img{\n      box-sizing: border-box;\n      display: block;\n      border: 1px solid #dbdbdb;\n    }\n    @include max-screen( $breakpoint-middle ) {\n      margin: 1.6em -10px;\n      img{\n        max-width: 100%;\n        height: auto;\n      }\n    }\n  }\n  pre, code {\n    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n    background-color: #f5f2f0;\n  }\n  pre{\n    line-height: 1.6;\n    margin: 0.5em 0;\n    padding: 1em;\n    overflow: auto;\n    code{\n      padding: 0;\n      display: block;\n    }\n  }\n  code{\n    padding: 2px;\n  }\n  section.CG2-article__rel{\n    font-size: 14px;\n    line-height: 1.6;\n    border: 1px solid #dbdbdb;\n    padding: 19px;\n    @include max-screen( $breakpoint-middle ) {\n      padding: 14px;\n    }\n    h1{\n      font-size: 14px;\n      font-weight: bold;\n      margin: 0;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 12px;\n        margin-bottom: 3px;\n      }\n    }\n    p{\n      margin: 1em 0;\n    }\n    ul{\n      margin: 0;\n      padding: 0 0 0 20px;\n    }\n    li{\n      margin: 0;\n    }\n    & > *:first-child{\n      margin-top: 0;\n    }\n    & > *:last-child{\n      margin-bottom: 0;\n    }\n  }\n}\n\n@media print {\n\narticle.CG2-article{\n  font-size: 18px;\n  line-height: 1.6;\n  p{\n    margin: 1em 0;\n  }\n  table{\n    margin: 2em 0;\n    th, td{\n      padding: .3em 10px;\n      border: 1px solid #dbdbdb;\n    }\n    th{\n      background: #eee;\n    }\n    td{}\n  }\n  figure{\n    margin: 2em 0;\n    img{\n      box-sizing: border-box;\n      display: block;\n      max-width: 100%;\n      width: auto;\n      height: auto;\n      border: 1px solid #dbdbdb;\n    }\n  }\n  code{\n    padding: 2px;\n    background: #f5f2f0;\n  }\n  section.CG2-article__rel{\n    font-size: 14px;\n    line-height: 1.6;\n    border: 1px solid #dbdbdb;\n    padding: 19px;\n    h1{\n      font-size: 14px;\n      font-weight: bold;\n      margin: 0;\n    }\n    ul{\n      margin: 0;\n      padding: 0 0 0 20px;\n    }\n    li{\n      margin: 0;\n    }\n  }\n}\n\n}\n\n/* 旧Jade 用\n   ========================================================================== */\narticle.CG2-article{\n\n  dl{\n    margin: 2em 0;\n  }\n  dt{\n    font-weight: bold;\n  }\n  dd{\n    margin: 0 0 0.8em 2em;\n  }\n\n  blockquote{\n    color: #777;\n    padding: 0 15px;\n    border-left: 4px solid #eee;\n    margin: 2em 0;\n  }\n\n  pre.code{\n    font-family: Consolas,Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding: 1em;\n    border: 1px solid #dbdbdb;\n    background: #f5f2f0;\n  }\n\n}\n\n\n/* ==========================================================================\n   ImgBox\n   ========================================================================== */\n/*\n---\nname: ImgBox\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<article class=\"CG2-article\">\n\n  <div class=\"ImgBox\">\n    <h1>ラベル</h1>\n    <p>キャプション</p>\n    <p><img src=\"__dummy__1000x200\"></p>\n  </div>\n\n</article>\n```\n*/\narticle.CG2-article{\n  .ImgBox{\n    margin: 2em 0;\n  }\n  .ImgBox h1,\n  .ImgBox h2,\n  .ImgBox h3,\n  .ImgBox h4,\n  .ImgBox-title // jade用\n  {\n    font-size: 100%;\n    font-weight: bold;\n    border-bottom: 1px dotted #ccc;\n    margin: 0.5em 0 3px;\n  }\n  .ImgBox p,\n  .ImgBox-comment // jade用\n  {\n    color: #777;\n    font-size: 14px;\n    line-height: 1.8;\n    margin: 0;\n  }\n  .ImgBox-body{ // jade用\n    margin: 3px 0;\n  }\n  .ImgBox img{\n    box-sizing: border-box;\n    display: block;\n    max-width: 100%;\n    width: auto;\n    height: auto;\n    border: 1px solid #ccc;\n    margin: 5px 0;\n  }\n}\n\n\n/* ==========================================================================\n   Column\n   ========================================================================== */\n/*\n---\nname: Column\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<article class=\"CG2-article\">\n\n  <div class=\"Column\">\n    <h1>コラムタイトル</h1>\n    <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n    <p><img src=\"__dummy__1000x200\"></p>\n    <p>テキスト<a href=\"#\">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>\n  </div>\n\n</article>\n```\n*/\narticle.CG2-article{\n  .Column{\n    font-size: 14px;\n    line-height: 1.6;\n    border: 1px solid #dbdbdb;\n    padding: 19px;\n    @include max-screen( $breakpoint-middle ) {\n      padding: 14px;\n    }\n    & > p{\n      margin: 1em 0;\n    }\n    & > ul{\n      margin: 0;\n      padding: 0 0 0 20px;\n      li{\n        margin: 0;\n      }\n    }\n    img {\n      max-width: 100%;\n    }\n    & > :last-child {\n      margin-bottom: 0;\n    }\n  }\n  .Column h1,\n  .Column h2,\n  .Column h3,\n  .Column h4,\n  .Column-title // jade用\n  {\n    font-size: 14px;\n    font-weight: bold;\n    margin: 0;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 12px;\n      margin-bottom: 3px;\n    }\n  }\n  .Column-body // jade用\n  {\n    & > *:first-child{\n      margin-top: 0;\n    }\n    & > *:last-child{\n      margin-bottom: 0;\n    }\n  }\n  pre + .Column {\n    margin-top: 2em;\n  }\n}\n\n\n/* ==========================================================================\n   Note\n   ========================================================================== */\n/*\n---\nname: Note\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<article class=\"CG2-article\">\n\n  <div class=\"Note\">\n    <h1>*注：Autoprefixer</h1>\n    <p>Autoprefixerに関しては、次の記事を参照してください。<br><a href=\"\">「ビルドツールアラカルト」</a>シリーズ</p>\n  </div>\n\n</article>\n```\n*/\narticle.CG2-article{\n  .Note{\n    color: #777;\n    font-size: 14px;\n    margin: 2em 0;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 10px;\n      margin: 1.6em 0;\n    }\n    p{\n      margin: 0;\n    }\n  }\n  .Note h1,\n  .Note h2,\n  .Note h3,\n  .Note h4,\n  .Note-title // jade用\n  {\n    font-size: 100%;\n    font-weight: bold;\n    margin: 0;\n  }\n  .Note-body{ // jade用\n    & > *:first-child{\n      margin-top: 0;\n    }\n    & > *:last-child{\n      margin-bottom: 0;\n    }\n  }\n  // 以下、使われてない可能性あり\n  aside{\n    color: #777;\n    font-size: 14px;\n    margin: 2em 0;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 10px;\n      margin: 1.6em 0;\n    }\n    h1{\n      font-size: 100%;\n      font-weight: bold;\n      margin: 0;\n    }\n    p{\n      margin: 0;\n    }\n    & > *:first-child{\n      margin-top: 0;\n    }\n    & > *:last-child{\n      margin-bottom: 0;\n    }\n  }\n}\n\n\n/* ==========================================================================\n   CG2-articlePagination\n   ========================================================================== */\n/*\n---\nname: articlePagination\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n```html\n<div class=\"CG2-articlePagination\">\n  <ul>\n    <li class=\"CG2-articlePagination__prev\"><a href=\"#\">第1回 仕様を知る 1</a></li>\n    <li class=\"CG2-articlePagination__next\"><a href=\"#\">第3回 Flexboxを実践する 1</a></li>\n  </ul>\n</div>\n```\n\n*/\n.CG2-articlePagination{\n  font-size: 14px;\n  margin: 0 0 60px;\n  @include max-screen( $breakpoint-middle ) {\n    margin-bottom: 30px;\n  }\n  ul{\n    list-style: none;\n    display: table;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n  }\n  li{\n    vertical-align: middle;\n    position: relative;\n    box-sizing: border-box;\n    display: table-cell;\n    width: 50%;\n    @include max-screen( $breakpoint-small ) {\n      display: block;\n      width: auto;\n    }\n    &.CG2-articlePagination__prev a:before{\n      @include icon( 'left' );\n    }\n    &.CG2-articlePagination__next a:before{\n      @include icon( 'right' );\n    }\n    &.CG2-articlePagination__prev a:before,\n    &.CG2-articlePagination__next a:before{\n      line-height: 0;\n      position: absolute;\n      top: 50%;\n    }\n    @include min-screen( $breakpoint-small ) {\n      &.CG2-articlePagination__prev{\n        padding: 0 .5em 0 1.2em;\n        a{\n          margin-left: -1.2em;\n          padding-left: 1.2em;\n          &:before{\n            left: 0;\n          }\n          &:hover:before,\n          &:focus:before{\n            left: -3px;\n          }\n        }\n      }\n      &.CG2-articlePagination__next{\n        text-align: right;\n        padding: 0 1.2em 0 .5em;\n        a{\n          margin-right: -1.2em;\n          padding-right: 1.2em;\n          &:before{\n            right: 0;\n          }\n          &:hover:before,\n          &:focus:before{\n            right: -3px;\n          }\n        }\n      }\n    }\n    @include max-screen( $breakpoint-small ) {\n      padding-left: 1.2em;\n      a{\n        padding-left: 1.2em;\n        margin-left: -1.2em;\n        &:before{\n          left: 0;\n        }\n      }\n    }\n  }\n  a{\n    @include resetLink();\n    text-decoration: none;\n    text-align: left;\n    display: inline-block;\n    &:after,&:before{\n      transition: all .2s;\n    }\n  }\n}\n\n@media print {\n.CG2-articlePagination{\n  display: none;\n}\n}\n\n/* ==========================================================================\n   CG2-articleUtil\n   ========================================================================== */\n/*\n---\nname: articleUtil\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n```html\n<div class=\"CG2-articleUtil\">\n  <div class=\"CG2-articleUtil__socialItems\">\n    <div class=\"CG2-articleUtil__socialItem CG2-articleUtil__socialItem--twitter\">\n      <a href=\"https://twitter.com/share\" data-lang=\"en\" data-url=\"\" data-text=\"シリーズ - タイトル\" data-hashtags=\"codegrid\" class=\"twitter-share-button\">Tweet</a>\n    </div>\n    <div class=\"CG2-articleUtil__socialItem CG2-articleUtil__socialItem--facebook\">\n      <iframe src=\"//www.facebook.com/plugins/like.php?href=&amp;send=false&amp;layout=standard&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=68\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; height:68px;\" allowTransparency=\"true\"></iframe>\n    </div>\n  </div>\n  <script src=\"https://platform.twitter.com/widgets.js\" async></script>\n</div>\n```\n*/\n.CG2-articleUtil{\n  margin: 20px 0;\n  .CG2-articleUtil__socialItems{\n    overflow: hidden;\n  }\n  .CG2-articleUtil__socialItem{\n    margin-top: 5px;\n    &.CG2-articleUtil__socialItem--twitter{}\n    &.CG2-articleUtil__socialItem--facebook{}\n    iframe{\n      width: 100%;\n      max-width: 100%;\n    }\n  }\n}\n\n@media print {\n  .CG2-articleUtil{\n    display: none;\n  }\n}\n\n/* ==========================================================================\n   CG2-livecode\n   ========================================================================== */\n/*\n---\nname: livecode\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\nソースコードを埋め込むことができる\n\n```html\n<section class=\"CG2-livecode\">\n  <header class=\"CG2-livecode__header\">\n    <div class=\"CG2-livecode__label\">\n      index.html\n    </div>\n    <div class=\"CG2-livecode__nav\">\n      <ul>\n        <li><a href=\"#\">\n          <span class=\"CG2-icon-tool\"></span> 全文選択\n        </a></li>\n        <li><a href=\"#\">\n          <span class=\"CG2-icon-tool\"></span> 新規タブで開く\n        </a></li>\n      </ul>\n    </div>\n  </header>\n  <div class=\"CG2-livecode__body\">\n    <pre class=\"language-markup line-numbers\"><code>&lt;div class=\"flex\"&gt;\n  &lt;div class=\"flex__item-1\"&gt;Item1&lt;/div&gt;\n  &lt;div class=\"flex__item-2\"&gt;Item2&lt;/div&gt;\n  &lt;div class=\"flex__item-3\"&gt;Item3&lt;/div&gt;\n&lt;/div&gt;</code></pre>\n  </div>\n</section>\n\n```\n\n## iframe埋め込み\n\n作ったデモをiframeで埋め込める。\n以下の追加クラスで、高さの指定が可能。\n\n- CG2-livecode__frame--small\n- CG2-livecode__frame--large\n\nなお、iPhoneの場合はiframeが伸びる仕様を回避するため、高さが固定される。\n\n```html\n<section class=\"CG2-livecode\">\n  <h1>埋め込みデモのタイトル</h1>\n  <header class=\"CG2-livecode__header\">\n    <div class=\"CG2-livecode__nav\">\n      <ul>\n        <li><a href=\"#\">\n          ソースコード：flex-basis/2\n        </a></li>\n        <li><a href=\"#\">\n          <span class=\"CG2-icon-tool\"></span> 新規タブで開く\n        </a></li>\n      </ul>\n    </div>\n  </header>\n  <div class=\"CG2-livecode__body\">\n    <iframe src=\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2015-css-flexiblebox/demo/2/flex-basis/1/index.html\"></iframe>\n  </div>\n</section>\n```\n*/\nsection.CG2-livecode{\n  margin: 2em 0;\n  h1{\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 .5em;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 14px;\n    }\n  }\n  p{\n    font-size: 12px;\n    margin: 0 0 .5em;\n  }\n}\n  .CG2-livecode__header{\n    display: table;\n    width: 100%;\n    background: #eee;\n    .CG2-livecode__label{\n      vertical-align: middle;\n      display: table-cell;\n      padding: 0 10px;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 10px;\n        padding: 5px 10px;\n        border-right: 1px solid #dbdbdb;\n      }\n    }\n    .CG2-livecode__nav{\n      vertical-align: middle;\n      display: table-cell;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 10px;\n      }\n      ul{\n        display: table;\n        padding: 0;\n        margin: 0 0 0 auto;\n        @include max-screen( $breakpoint-middle ) {\n          display: block;\n        }\n      }\n        li{\n          font-size: 10px;\n          font-weight: bold;\n          vertical-align: middle;\n          display: table-cell;\n          padding: 10px;\n          border-left: 1px solid #dbdbdb;\n          margin: 0;\n          @include max-screen( $breakpoint-middle ) {\n            display: block;\n            border-left: none;\n            padding: 8px 16px;\n            border-top: 1px solid #dbdbdb;\n            &:first-child{\n              border-top: none;\n            }\n          }\n        }\n          a{\n            @include resetLink();\n            text-decoration: none;\n            display: block;\n            padding: 10px;\n            margin: -10px;\n            transition: background-color .2s;\n            &[data-livecode-play]{\n              position: relative;\n              &:before{\n                position: absolute;\n                content: 'サンプルを再生する';\n                background: #eee;\n                transition: background-color .2s;\n                @at-root .CG2-livecode.CG2-livecode--isRunning &{\n                  content: 'サンプルを停止する';\n                }\n              }\n            }\n            &:hover, &:hover::before{\n              background-color: #dbdbdb;\n            }\n            span[class^=\"CG2-icon-\"]{\n              font-size: 20px;\n              position: static;\n              margin: 0 5px 0 0;\n            }\n          }\n    }\n  }\n  .CG2-livecode__body{\n    -webkit-overflow-scrolling:touch;\n    overflow: auto;\n    position: relative;\n    border: 1px solid #dbdbdb;\n    iframe{\n      vertical-align: bottom;\n      resize: vertical;\n      display: block;\n      box-sizing: border-box;\n      width: 100%;\n      max-width: 100%;\n      min-height: 390px;\n      border: none;\n      background: #fff;\n      &.CG2-livecode__frame--small{min-height: 190px;}\n      &.CG2-livecode__frame--large{min-height: 590px;}\n    }\n    pre[class*=\"language-\"] {\n      margin: 0;\n      resize: vertical;\n      code{\n        padding: 0;\n        background: transparent;\n      }\n    }\n  }\n  .CG2-livecode__clickToPlay{\n    overflow: hidden;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    display: flex;\n    align-items: center;\n    background: #777;\n    transition: all .3s;\n    @at-root .CG2-livecode.CG2-livecode--isRunning &{\n      bottom: 100%;\n    }\n    &:after{\n      content: 'クリックして再生する';\n      color: #fff;\n      font-size: 18px;\n      text-align: center;\n      display: block;\n      width: 100%;\n    }\n  }\n  // iPhoneでiframeが伸びてしまう問題の対処用\n  // iPhoneの場合、JavaScriptでiframeをこれで動的に包む\n  .CG2-livecode__body--inner {\n    height: 40vh;\n  }\n\n\n/* ==========================================================================\n   CG2-profile\n   ========================================================================== */\n/*\n---\nname: profile\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\nバイオグラフィー自体がメインのコンテンツ用\n\n```html\n<div class=\"CG2-profile\">\n  <div class=\"CG2-profile__image\">\n    <img src=\"__dummy__120x120\" alt=\"\">\n  </div>\n  <div class=\"CG2-profile__main\">\n    <div class=\"CG2-profile__header\">\n      <div class=\"CG2-profile__name\">ピクセル グリオ</div>\n      <div class=\"CG2-profile__title\">フロントエンジニア</div>\n      <div class=\"CG2-profile__links\">\n      <ul>\n        <li><a href=\"#\">Twitter</a></li>\n        <li><a href=\"#\">Website</a></li>\n      </ul>\n    </div>\n    </div>\n    <div class=\"CG2-profile__text\">\n      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>\n    </div>\n  </div>\n</div>\n```\n\n*/\n\n.CG2-profile{\n  display: table;\n  width: 100%;\n  @include max-screen( $breakpoint-middle ) {\n    position: relative;\n    display: block;\n    width: auto;\n    margin: 0 -10px;\n  }\n}\n  .CG2-profile__image{\n    vertical-align: top;\n    display: table-cell;\n    width: 120px;\n    padding-right: 40px;\n    @include max-screen( $breakpoint-middle ) {\n      position: absolute;\n      display: block;\n      width: 80px;\n      padding-right: 0;\n    }\n    img{\n      display: block;\n      @include max-screen( $breakpoint-middle ) {\n        width: 80px;\n        height: 80px;\n      }\n    }\n  }\n  .CG2-profile__main{\n    vertical-align: top;\n    display: table-cell;\n    @include max-screen( $breakpoint-middle ) {\n      display: block;\n    }\n  }\n    .CG2-profile__header{\n      margin-bottom: 18px;\n      @include max-screen( $breakpoint-middle ) {\n        min-height: 80px;\n        padding-left: 100px;\n      }\n    }\n      .CG2-profile__name{\n        font-size: 22px;\n        line-height: 1.2;\n        margin-bottom: 18px;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 16px;\n          margin-bottom: 8px;\n        }\n      }\n      .CG2-profile__title{\n        font-size: 12px;\n      }\n      .CG2-profile__links{\n        ul{\n          font-size: 0;\n          line-height: 1.2;\n          list-style: none;\n          padding: 0;\n          margin: 0;\n        }\n          li{\n            font-size: 12px;\n            display: inline-block;\n            border-left: 1px solid #000;\n            padding: 0 8px;\n            &:first-child{\n              padding-left: 0;\n              border-left: #000;\n            }\n          }\n            a{\n              text-decoration: none;\n            }\n      }\n    .CG2-profile__text{\n      font-size: 16px;\n      line-height: 1.8;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 12px;\n        padding-left: 10px;\n        padding-right: 10px;\n      }\n      p{}\n    }\n\n\n\n/* ==========================================================================\n   CG2-profileSimple\n   ========================================================================== */\n/*\n---\nname: profileSimple\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用\n\n```html\n<div class=\"CG2-profileSimple\">\n  <div class=\"CG2-profileSimple__image\">\n    <img src=\"__dummy__120x120\" alt=\"\">\n  </div>\n  <div class=\"CG2-profileSimple__main\">\n    <div class=\"CG2-profileSimple__header\">\n      <div class=\"CG2-profileSimple__name\">ピクセル グリオ</div>\n      <div class=\"CG2-profileSimple__title\">フロントエンジニア</div>\n    </div>\n    <div class=\"CG2-profileSimple__text\">\n      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>\n    </div>\n  </div>\n</div>\n```\n\n*/\n.CG2-profileSimple{\n  display: table;\n  margin-top: 20px;\n  @include max-screen( $breakpoint-middle ) {\n    margin-top: 10px;\n  }\n}\n  .CG2-profileSimple__image{\n    vertical-align: top;\n    display: table-cell;\n    width: 120px;\n    padding-right: 20px;\n    img{\n      display: block;\n      width: 100%;\n      height: auto;\n    }\n    @include max-screen( $breakpoint-middle ) {\n      width: 60px;\n    }\n  }\n  .CG2-profileSimple__main{\n    vertical-align: top;\n    display: table-cell;\n  }\n    .CG2-profileSimple__header{\n      display: table;\n      line-height: 1.2;\n      @include max-screen( $breakpoint-middle ) {\n        display: block;\n      }\n    }\n      .CG2-profileSimple__name{\n        font-size: 16px;\n        vertical-align: bottom;\n        display: table-cell;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 14px;\n          display: block;\n        }\n      }\n      .CG2-profileSimple__title{\n        font-size: 10px;\n        vertical-align: bottom;\n        display: table-cell;\n        padding-left: 10px;\n        @include max-screen( $breakpoint-middle ) {\n          display: block;\n          padding-left: 0;\n        }\n      }\n    .CG2-profileSimple__text{\n      font-size: 12px;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 10px;\n      }\n      p{}\n      & > *:last-child {\n        margin-bottom: 0;\n      }\n    }\n\n\n\n/* ==========================================================================\n   CG2-authorList\n   ========================================================================== */\n/*\n---\nname: authorList\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\n```html\n<div class=\"CG2-authorList\">\n  <div class=\"CG2-authorList__inner\">\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">代表取締役, フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n    <div class=\"CG2-authorList__item\">\n      <a href=\"#\">\n        <div class=\"CG2-authorList__image\"><img src=\"__dummy__96x96\" alt=\"\" width=\"48\" height=\"48\"></div>\n        <div class=\"CG2-authorList__name\">大澤 直子</div>\n        <div class=\"CG2-authorList__title\">フロントエンド・エンジニア</div>\n        <div class=\"CG2-authorList__numOfPosts\">記事数24</div>\n      </a>\n    </div>\n\n  </div>\n</div>\n```\n*/\n.CG2-authorList {}\n\n// アイテムのレイアウト\n.CG2-authorList__inner {\n  display: grid;\n  grid-column-gap: 40px;\n  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));\n}\n\n// アイテムのスタイル\n.CG2-authorList__item {\n  border-top: 1px solid #dbdbdb;\n  a {\n    @include resetLink();\n    text-decoration: none;\n    display: block;\n    padding: 12px 0 12px 92px; // 80px + 12px\n    min-height: 80px;\n    position: relative;\n    @include min-screen( $breakpoint-middle ) {\n      padding: 20px 12px 20px 92px;\n    }\n  }\n}\n.CG2-authorList__image {\n  position: absolute;\n  left: 0;\n  top: 12px;\n  @include min-screen( $breakpoint-middle ) {\n    left: 28px;\n    top: 20px;\n  }\n  img {\n    vertical-align: bottom;\n    width: 80px;\n    height: 80px;\n    @include min-screen( $breakpoint-middle ) {\n      width: 48px;\n      height: 48px;\n    }\n  }\n}\n.CG2-authorList__name {\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 3px;\n}\n.CG2-authorList__title {\n  font-size: 12px;\n  color: #777;\n  @include min-screen( $breakpoint-middle ) {\n    margin-bottom: 15px;\n  }\n}\n.CG2-authorList__numOfPosts {\n  font-size: 12px;\n  color: #777;\n}\n\n\n/* ==========================================================================\n   CG2-searchFailed\n   ========================================================================== */\n/*\n---\nname: searchFailed\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\nCG2-searchOption の CG2-searchLayout__result 内で利用する\n未使用につき、不要の可能性あり\n\n```html\n<div class=\"CG2-searchFailed\">\n  <div class=\"CG2-searchFailed__text\">結果が見つかりませんでした</div>\n  <div class=\"CG2-searchFailed__search\">\n    <input>\n  </div>\n</div>\n```\n\n*/\n.CG2-searchFailed{\n  margin: 0 0 30px;\n}\n  .CG2-searchFailed__text{\n    font-size: 24px;\n    text-align: center;\n    margin: 0 0 24px;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 16px;\n      margin-bottom: 20px;\n    }\n  }\n  .CG2-searchFailed__search{\n    border: 1px solid #dbdbdb;\n    @extend %searchInner;\n    &:before{\n      font-size: 16px;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 24px;\n      }\n    }\n    input{\n      color: inherit;\n      font-size: 18px;\n      height: auto;\n      padding: 0.5em 10px 0.5em 42px;\n      &:hover,\n      &:focus{\n        background: #fff;\n      }\n    }\n  }\n\n\n/* ==========================================================================\n   CG2-settings\n   ========================================================================== */\n/*\n---\nname: settings\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n---\n\n```html\n<div class=\"CG2-settings\">\n  <div class=\"CG2-settings__inner\">\n    <div class=\"CG2-settings__col\">\n      <div class=\"CG2-settings__heading\">設定</div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <th>Googleアカウント</th>\n              <td>gurio@pxgrid.example</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__buttonContainer\">\n        <ul>\n          <li>\n          <a class=\"CG2-button CG2-button--setting\" href=\"\">ログアウト</a>\n          </li>\n        </ul>\n      </div>\n      <form>\n        <div class=\"CG2-settings__field\">\n          <div class=\"CG2-settings__fieldVGroup\">\n            <div class=\"CG2-settings__fieldHeader\">メールマガジンを受信するメールアドレス</div>\n            <div class=\"CG2-settings__fieldData\">\n              <input type=\"email\" value=\"gurio@pxgrid.example\">\n            </div>\n          </div>\n        </div>\n        <div class=\"CG2-settings__buttonContainer\">\n          <ul>\n            <li>\n              <button type=\"button\" class=\"CG2-button CG2-button--setting\">変更</button>\n            </li>\n          </ul>\n        </div>\n      </form>\n    </div>\n    <div class=\"CG2-settings__col\">\n      <div class=\"CG2-settings__heading\">購読情報</div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <td>現在、購読の手続きはされていません。</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__buttonContainer\">\n        <ul>\n          <li>\n            <a class=\"CG2-button CG2-button--setting\">購読の手続きを開始する</a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"CG2-settings__heading\">購読情報</div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <th>無料購読期間</th>\n              <td>残り30日</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <th>決済方法</th>\n              <td>PAY.JP</td>\n            </tr>\n            <tr>\n              <th>カード情報</th>\n              <td>XXXX</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__buttonContainer\">\n        <ul>\n          <li>\n            <a class=\"CG2-button CG2-button--setting\">カード情報の更新</a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"CG2-settings__heading\">購読情報</div>\n      <div class=\"CG2-settings__field\">\n        <div class=\"CG2-settings__fieldHGroup\">\n          <table>\n            <tr>\n              <th>決済方法</th>\n              <td>WebMoney</td>\n            </tr>\n            <tr>\n              <th>有効期限</th>\n              <td>201X年12月31日</td>\n            </tr>\n          </table>\n        </div>\n      </div>\n      <div class=\"CG2-settings__buttonContainer\">\n        <ul>\n          <li>\n            <a class=\"CG2-button CG2-button--setting\">1ヶ月延長</a>\n          </li>\n          <li>\n            <a class=\"CG2-button CG2-button--setting\">1年延長</a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"CG2-settings__heading\">退会</div>\n      <form>\n        <div class=\"CG2-settings__field\">\n          <div class=\"CG2-settings__fieldVGroup\">\n            <div class=\"CG2-settings__fieldHeader\">退会理由を教えて下さい（1000文字以内）</div>\n            <div class=\"CG2-settings__fieldData\"><textarea maxlength=\"1000\"></textarea></div>\n          </div>\n        </div>\n        <div class=\"CG2-settings__buttonContainer\">\n          <button type=\"button\" class=\"CG2-button CG2-button--setting\">CodeGridを退会し、購読を停止する</button>\n        </div>\n      </form>\n    </div>\n  </div>\n</div>\n```\n*/\n.CG2-settings {}\n\n.CG2-settings__inner {\n  @include min-screen( $breakpoint-middle ) {\n    display: flex;\n    justify-content: space-between;\n  }\n}\n\n.CG2-settings__col {\n  @include min-screen( $breakpoint-middle ) {\n    width: calc(50% - 14px - 10px); // 延伸した下線の長さと、さらにプラスしたい隙間\n  }\n  @include min-screen( $breakpoint-base ) {\n    width: calc(50% - 28px - 20px); // 延伸した下線の長さと、さらにプラスしたい隙間\n  }\n}\n\n.CG2-settings__field {\n  margin: 10px 0;\n  @include min-screen( $breakpoint-base ) {\n    margin: 24px 0;\n  }\n}\n\n.CG2-settings__heading {\n  border-bottom: 1px solid #dbdbdb;\n\n  @include screen( 0, $breakpoint-middle ) {\n    padding: 0 10px;\n    margin: 30px -10px 24px;\n  }\n  @include screen( $breakpoint-middle, $breakpoint-base) {\n    padding: 0 14px;\n    margin: 50px -14px 24px;\n  }\n  @include min-screen( $breakpoint-base ) {\n    padding: 0 28px 5px;\n    margin: 50px -28px 24px;\n  }\n\n  // 細い幅の場合、一番上にくるもののmarginを消す\n  @include screen( 0, $breakpoint-middle ) {\n    .CG2-settings__col:first-child &:first-child {\n      margin-top: 0;\n    }\n  }\n  // 2カラムになったときにも最上部のmarginを消す\n  @include min-screen( $breakpoint-middle ) {\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n}\n\n// 「ラベル：内容」といった形式のフィールド\n.CG2-settings__fieldHGroup {\n  table {\n    border-spacing: 0;\n  }\n  @include max-screen( $breakpoint-base ) {\n    @include tableToBlock();\n  }\n  th {\n    font-size: 12px;\n    font-weight: normal;\n    vertical-align: middle;\n    @include max-screen( $breakpoint-base ) {\n      display: block;\n    }\n    &:after {\n      content: '：';\n    }\n  }\n  td {\n    @include wordbreak();\n    vertical-align: middle;\n    padding-left: 10px;\n    @include max-screen( $breakpoint-base ) {\n      font-size: 16px;\n      padding-left: 0;\n    }\n  }\n}\n\n// 通常フローのフィールド\n.CG2-settings__fieldVGroup {}\n\n.CG2-settings__fieldHeader {\n  font-size: 12px;\n  margin-bottom: 10px;\n}\n\n.CG2-settings__fieldData {\n  font-size: 16px;\n  input, textarea {\n    font-size: inherit;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 4px;\n  }\n  textarea {\n    height: 8em;\n  }\n}\n\n// アクションが必要なフィールドの直後にくる\n// ボタンは CG2-button を流用\n.CG2-settings__buttonContainer {\n  ul {\n    font-size: 0;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n  li {\n    font-size: 1rem;\n    display: inline-block;\n    margin: 0 8px 8px 0;\n  }\n}\n\n/* ==========================================================================\n   CG2-formProgress\n   ========================================================================== */\n/*\n---\nname: formProgress\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-form\n---\n\n```html\n<div class=\"CG2-formProgress\">\n  <ol>\n    <li>1. ログイン方法について</li>\n    <li class=\"CG2-formProgress__item--current\">2. クレジットカード登録</li>\n    <li>3. 登録完了</li>\n  </ol>\n</div>\n```\n*/\n.CG2-formProgress {\n  font-size: 16px;\n  margin: 10px 0 20px;\n  @include min-screen( $breakpoint-middle ) {\n    margin: 0 0 60px;\n  }\n  @include min-screen( $breakpoint-base ) {\n    font-size: 18px;\n  }\n  ol {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    justify-content: space-between;\n  }\n  li {\n    border-bottom: 1px solid #dbdbdb;\n    padding: 0 10px 5px;\n    margin: 0 -10px; // 単純にpadding: 0 0 5px;だとテキストと下線が横に揃うため\n    width: 100%;\n    @include min-screen( $breakpoint-middle ) {\n      text-align: center;\n      margin: 0;\n      padding: 0 0 5px;\n      width: calc(100% / 3 - 20px);\n    }\n    @include min-screen( $breakpoint-base ) {\n      padding: 0 0 10px;\n      width: calc(100% / 3 - 40px);\n    }\n    // 現在のステップではないものを目立たなくさせる\n    &:not(.CG2-formProgress__item--current) {\n      display: none;\n      opacity: 0.4;\n      @include min-screen( $breakpoint-middle ) {\n        display: block;\n      }\n    }\n  }\n}\n\n\n\n\n\n\n\n/* ==========================================================================\n   CG2-signupFrom\n   ========================================================================== */\n/*\n---\nname: signupFrom\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-form\n---\n\nログイン方法について（未ログイン）\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__lead\">\n    購読料は月額800円（税抜）\n    <div class=\"CG2-signupFrom__leadSub\">\n      初回登録時は30日間無料\n    </div>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth\">\n    <ul>\n      <li><a href=\"\" class=\"CG2-button CG2-button--primary\">\n        Googleアカウントを使用して<br class=\"CG2--disableLargeScreen CG2--disableMiddleScreen\">CodeGridにログイン</a></li>\n    </ul>\n    <div class=\"CG2-signupFrom__buttonContainerText\">\n      <p>\n        ※CodeGridの購読にはGoogleアカウントが必要です。<br>\n        <a href=\"https://accounts.google.com/SignUp\" target=\"_blank\">Googleアカウント作成</a>\n      </p>\n    </div>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer\">\n    <ul>\n      <li><a class=\"CG2-button\" href=\"\">購読済みの方はログイン</a></li>\n    </ul>\n  </div>\n</div>\n```\n\nログイン方法について（ログイン済み）\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__lead\">\n    購読料は月額800円（税抜）\n    <div class=\"CG2-signupFrom__leadSub\">\n      初回登録時は30日間無料\n    </div>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth\">\n    <ul>\n      <li><a href=\"\" class=\"CG2-button CG2-button--primary\">このアカウントで購読する</a></li>\n    </ul>\n    <div class=\"CG2-signupFrom__buttonContainerText\">\n      <p>\n        現在 gurio@pxgrid.example でログインしています<br>\n        <a href=\"\">別のGoogleアカウントで購読するには一度ログアウトする必要があります。</a>\n      </p>\n    </div>\n  </div>\n</div>\n```\n\nクレジットカードを登録\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__text\">\n    <p>CodeGridを購読いただくためには、<a href=\"https://www.codegrid.net/terms.html\" target=\"_blank\">利用規約</a>への同意が必要です。</p>\n  </div>\n  <div class=\"CG2-signupFrom__check\">\n    <label><input type=\"checkbox\">利用規約に同意する</label>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth\">\n    <ul>\n      <li><a class=\"CG2-button CG2-button--primary\">クレジットカードを登録</a></li>\n    </ul>\n  </div>\n</div>\n```\n\n登録完了\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__lead\">\n    購読手続きが完了しました！\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth\">\n    <ul>\n      <li><a class=\"CG2-button CG2-button--primary\">記事を読む</a></li>\n    </ul>\n  </div>\n  <div class=\"CG2-signupFrom__text\">\n    <p><a href=\"\">CodeGrid運営からのごあいさつ記事へ</a></p>\n  </div>\n</div>\n```\n\nエラー\n\n```html\n<div class=\"CG2-signupFrom\">\n  <div class=\"CG2-signupFrom__information\">\n    <p>支払い処理中にエラーが発生しました</p>\n  </div>\n  <div class=\"CG2-signupFrom__text\">\n    <p>お手数ですがもう一度手続きをおこなってください。</p>\n  </div>\n  <div class=\"CG2-signupFrom__buttonContainer\">\n    <ul>\n      <li><a class=\"CG2-button CG2-button--primary\">再度支払い手続きをおこなう</a></li>\n    </ul>\n  </div>\n  <div class=\"CG2-signupFrom__annotation\">\n    <p>再度エラーになる場合は以下よりお問い合わせください。</p>\n    <p><a href=\"https://www.codegrid.net/inquiry.html\" target=\"_blank\">お問い合わせフォーム</a></p>\n  </div>\n</div>\n```\n*/\n    .CG2-signupFrom{\n    }\n      .CG2-signupFrom__lead{\n        font-family: $fontSerif;\n        font-feature-settings: \"palt\";\n        font-size: 32px;\n        text-align: center;\n        margin-bottom: 30px;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 20px;\n          margin-bottom: 20px;\n        }\n      }\n        .CG2-signupFrom__leadSub{\n          font-family: $fontSansSerif;\n          font-size: 16px;\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 12px;\n          }\n        }\n      .CG2-signupFrom__information{\n        font-size: 24px;\n        text-align: center;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 18px;\n        }\n      }\n      .CG2-signupFrom__buttonContainer{\n        width: 600px;\n        margin: 30px auto 40px;\n        @include max-screen( $breakpoint-middle ) {\n          width: auto;\n          margin: 20px 0 30px;\n        }\n        ul{\n          table-layout: fixed;\n          border-spacing: 8px 0;\n          display: table;\n          list-style: none;\n          padding: 0;\n          margin: 10px auto;\n          @include max-screen( $breakpoint-middle ) {\n            display: block;\n            margin: 5px auto;\n          }\n        }\n        &.CG2-signupFrom__buttonContainer--fullWidth ul{\n          width: 100%;\n        }\n          li{\n            display: table-cell;\n            @include max-screen( $breakpoint-middle ) {\n              display: block;\n              margin: 5px auto;\n            }\n          }\n            .CG2-button{\n              font-size: 20px;\n              text-align: center;\n              display: block;\n              @include max-screen( $breakpoint-middle ) {\n                font-size: 16px;\n                -webkit-font-smoothing: subpixel-antialiased;\n                -moz-osx-font-smoothing: auto;\n                padding: 8px 20px;\n              }\n            }\n        .CG2-signupFrom__buttonContainerText{\n          font-size: 14px;\n          text-align: center;\n          margin: 10px 0;\n          @include max-screen( $breakpoint-middle ) {\n            font-size: 12px;\n            text-align: left;\n          }\n          p{}\n        }\n      }\n      .CG2-signupFrom__text{\n        font-size: 14px;\n        text-align: center;\n        @include max-screen( $breakpoint-middle ) {\n        }\n        p{}\n      }\n      .CG2-signupFrom__annotation{\n        font-size: 12px;\n        text-align: center;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 14px;\n        }\n        p{\n          margin: 1em 0;\n        }\n      }\n\n      .CG2-signupFrom__check{\n        display: table;\n        padding: 10px 30px;\n        border-radius: 2px;\n        margin: 20px auto;\n        background: #eee;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 16px;\n          text-align: center;\n          display: block;\n        }\n        label{\n          cursor: pointer;\n          display: block;\n          margin: -10px -30px;\n          padding: 10px 30px;\n        }\n        input[type=\"checkbox\"]{\n          margin-right: 5px;\n          @include max-screen( $breakpoint-middle ) {\n            margin-right: 8px;\n          }\n        }\n      }\n\n\n/* ==========================================================================\n   line-height-step実装\n   ========================================================================== */\n@supports (line-height-step: 1em) {\n  article.CG2-article {\n    // 現行のfont-sizeとline-heightから\n    // 16 * 1.8 = 28.8 -> 28\n    --step-grid: 28px;\n\n    // リズム確認用の罫線\n    /* background-size: 100% var(--step-grid); */\n    /* background-image: linear-gradient(to bottom, #00bcd1 1px, transparent 1px); */\n\n    & > h3 {\n      // 複数行になったときに広がりすぎるのを防ぎながら\n      // libe-height-stepの恩恵を受けるためにinline-blockにする\n      display: inline-block;\n      // そのままだと縮んでしまうので全幅に\n      width: 100%;\n\n      // 複数行になったとき開きすぎないように\n      line-height: 1.2;\n\n      // 上1、下0.5\n      line-height-step: var(--step-grid);\n      margin-top: calc(1 * var(--step-grid));\n      margin-bottom: calc(0.5 * var(--step-grid));\n    }\n\n    & > p {\n      line-height: 1.2;\n      line-height-step: var(--step-grid);\n      margin: var(--step-grid) 0;\n    }\n\n    & > ul,\n    & > ol {\n      margin: var(--step-grid) 0;\n    }\n\n    & > ul li,\n    & > ol li {\n      line-height: 1.2;\n      line-height-step: var(--step-grid);\n      margin: 0;\n    }\n\n    // .Noteはフォントサイズが小さいので、狭めに\n    & > .Note {\n      line-height: 1.2;\n      line-height-step: calc(var(--step-grid) * 0.8);\n    }\n  }\n}\n\n/* ==========================================================================\n   記事内のビデオ\n   ========================================================================== */\n/*\n---\nname: article\ncategory:\n  - Blocks/app\ntag:\n  - app-item\n  - app-item-article\n---\n\n記事内にあるビデオ\n\n```html\n<article class=\"CG2-article\">\n\n  <p>ビデオです。</p>\n\n  <video src=\"...\" controls muted></video>\n\n</article>\n```\n\n*/\narticle.CG2-article video {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  max-height: 480px;\n  border: 1px solid #ccc;\n  background-color: #eee;\n}\n\n\n/* ==========================================================================\n   Chromeで印刷時に日本語が消えるバグへの対応\n   ========================================================================== */\n/*\nChrome 66くらいから確認中。\n指定したら消えているフォント：\n  * Klee, YuMincho, Hiragino Mincho ProN\n  * Osaka\n*/\n// 影響が多いのは記事（校正時に印刷する）なので、とりあえずそこだけ\n@media print {\n  .CG2-articleHeader__series,\n  .CG2-articleHeader__title,\n  header.CG2-articleTOC__header h1,\n  article.CG2-article > h2 {\n    font-family: serif !important;\n  }\n  article.CG2-article pre,\n  article.CG2-article code {\n    // 日本語だけヒラギノとかになるようにsans-serifを指定\n    font-family: Consolas, Monaco, Menlo, sans-serif !important;\n  }\n}\n","// ---------------------------------------------------------------------------------------------------------------------\n//\n//  Author: Rafal Bromirski\n//  www: http://paranoida.com/\n//  twitter: http://twitter.com/paranoida\n//  dribbble: http://dribbble.com/paranoida\n//\n//  Licensed under a MIT License\n//\n// ---------------------------------------------------------------------------------------------------------------------\n//\n// Requirements:\n//   Sass 3.2.0+\n//\n//  Version:\n//   1.3                                      // developed on 14/11/2013\n//\n// Mixins:\n//   @ min-screen(width)                      // shortcut for @media screen and (min-width ...)\n//   @ max-screen(width)                      // shortcut for @media screen and (max-width ...)\n//   @ screen(min-width, max-width)           // shortcut for @media screen and (min-width ...) and (max-width ...)\n//   ---\n//   @ min-screen-height(height)              // shortcut for @media screen and (min-height ...)\n//   @ max-screen-height(height)              // shortcut for @media screen and (max-height ...)\n//   @ screen-height(min-height, max-height)  // shortcut for @media screen and (min-height ...) and (max-height ...)\n//   ---\n//   @ iphone3                                // only iPhone (2, 3G, 3GS) landscape & portrait\n//   @ iphone3(landscape)                     // only iPhone (2, 3G, 3GS) only landscape\n//   @ iphone3(portrait)                      // only iPhone (2, 3G, 3GS) only portrait\n//   ---\n//   @ iphone4                                // only iPhone (4, 4S) landscape & portrait\n//   @ iphone4(landscape)                     // only iPhone (4, 4S) only landscape\n//   @ iphone4(portrait)                      // only iPhone (4, 4S) only portrait\n//   ---\n//   @ iphone5                                // only iPhone (5) landscape & portrait\n//   @ iphone5(landscape)                     // only iPhone (5) only landscape\n//   @ iphone5(portrait)                      // only iPhone (5) only portrait\n//   ---\n//   @ ipad                                   // all iPads (1, 2, 3, 4, Mini) landscape & portrait\n//   @ ipad(landscape)                        // all iPads (1, 2, 3, 4, Mini) only landscape\n//   @ ipad(portrait)                         // all iPads (1, 2, 3, 4, Mini) only portrait\n//   ---\n//   @ ipad-retina                            // only iPad (3, 4) landscape & portrait\n//   @ ipad-retina(landscape)                 // only iPad (3, 4) only landscape\n//   @ ipad-retina(portrait)                  // only iPad (3, 4) only portrait\n//   ---\n//   @ hdpi(ratio)                            // devices with hidpi displays (default ratio: 1.3)\n//\n// ---------------------------------------------------------------------------------------------------------------------\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- screen ----------------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin screen($resMin, $resMax)\n{\n  @media screen and (min-width: $resMin) and (max-width: $resMax)\n  {\n    @content;\n  }\n}\n\n@mixin max-screen($res)\n{\n  @media screen and (max-width: $res)\n  {\n    @content;\n  }\n}\n\n@mixin min-screen($res)\n{\n  @media screen and (min-width: $res)\n  {\n    @content;\n  }\n}\n\n@mixin screen-height($resMin, $resMax)\n{\n  @media screen and (min-height: $resMin) and (max-height: $resMax)\n  {\n    @content;\n  }\n}\n\n@mixin max-screen-height($res)\n{\n  @media screen and (max-height: $res)\n  {\n    @content;\n  }\n}\n\n@mixin min-screen-height($res)\n{\n  @media screen and (min-height: $res)\n  {\n    @content;\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- hdpi ------------------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)\n// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)\n\n@mixin hdpi($ratio: 1.3)\n{\n  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),\n  only screen and (min--moz-device-pixel-ratio: $ratio),\n  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),\n  only screen and (min-resolution: #{round($ratio*96)}dpi),\n  only screen and (min-resolution: #{$ratio}dppx)\n  {\n    @content;\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- iphone ----------------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin iphone3($orientation: all)\n{\n  $deviceMinWidth: 320px;\n  $deviceMaxWidth: 480px;\n  $devicePixelRatio: 1;\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- iphone-retina ---------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin iphone4($orientation: all)\n{\n  $deviceMinWidth: 320px;\n  $deviceMaxWidth: 480px;\n  $devicePixelRatio: 2;\n  $deviceAspectRatio: '2/3';\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- iphone-5 --------------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin iphone5($orientation: all)\n{\n  $deviceMinWidth: 320px;\n  $deviceMaxWidth: 568px;\n  $devicePixelRatio: 2;\n  $deviceAspectRatio: '40/71';\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- ipads (all) -----------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin ipad($orientation: all)\n{\n  $deviceMinWidth: 768px;\n  $deviceMaxWidth: 1024px;\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- ipad-retina -----------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin ipad-retina($orientation: all)\n{\n  $deviceMinWidth: 768px;\n  $deviceMaxWidth: 1024px;\n  $devicePixelRatio: 2;\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n"]}