@charset "UTF-8";
@font-face {
  font-family: "codegrid-num";
  src: url("../font/codegrid-num.eot");
  src: url("../font/codegrid-num.eot?#iefix") format("embedded-opentype"), url("../font/codegrid-num.woff") format("woff"), url("../font/codegrid-num.ttf") format("truetype"), url("../font/codegrid-num.svg#codegrid-num") format("svg");
  font-weight: normal;
  font-style: normal; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

td,
th {
  padding: 0; }

/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+coffeescript+git+handlebars+jade+less+markdown+ruby+sass+scss+stylus+typescript+yaml&plugins=line-highlight+line-numbers+autolinker */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*="language-"],
pre[class*="language-"] {
  color: black;
  text-shadow: 0 1px white;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  tab-size: 4;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none; }

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc; }

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none; } }

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto; }

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #f5f2f0; }

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em; }

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray; }

.token.punctuation {
  color: #999; }

.namespace {
  opacity: .7; }

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #905; }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #690; }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5); }

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a; }

.token.function {
  color: #DD4A68; }

.token.regex,
.token.important,
.token.variable {
  color: #e90; }

.token.important,
.token.bold {
  font-weight: bold; }

.token.italic {
  font-style: italic; }

.token.entity {
  cursor: help; }

pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em; }

.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  /* Same as .prism’s padding-top */
  background: rgba(153, 122, 102, 0.08);
  background: -webkit-linear-gradient(left, rgba(153, 122, 102, 0.1) 70%, rgba(153, 122, 102, 0));
  background: linear-gradient(left, rgba(153, 122, 102, 0.1) 70%, rgba(153, 122, 102, 0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre; }

.line-highlight:before,
.line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: rgba(153, 122, 102, 0.4);
  color: #f5f2f0;
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white; }

.line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em; }

pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber; }

pre.line-numbers > code {
  position: relative; }

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber; }

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right; }

.token a {
  color: inherit; }

/* ==========================================================================
   Section comment block
   ========================================================================== */
/* Sub-section comment block
   ========================================================================== */
/* Basic comment */
@font-face {
  font-family: 'zeroWidth';
  src: url("../font/zero-width.eot");
  src: url("../font/zero-width.eot#iefix") format("embedded-opentype"), url("../font/zero-width.woff") format("woff"), url("../font/zero-width.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* ==========================================================================
   for styleguide
   ========================================================================== */
.DEBUG {
  color: #FFF;
  font-size: 16px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  padding: 5px;
  margin: 1em 0;
  background: orange; }

#__bs_notify__ {
  pointer-events: none; }

/* modifier: align
   ========================================================================== */
.CG2--alignLeft {
  text-align: left !important; }

.CG2--alignRight {
  text-align: right !important; }

.CG2--alignCenter {
  text-align: center !important; }

.CG2--alignTop {
  vertical-align: top !important; }

.CG2--alignMiddle {
  vertical-align: middle !important; }

.CG2--alignBottom {
  vertical-align: bottom !important; }

/* modifier: display
   ========================================================================== */
:root .CG2--disableLargeScreen {
  display: none; }

@media screen and (max-width: 767px) and (min-width: 640px) {
  :root .CG2--disableLargeScreen {
    display: block; }
  :root .CG2--disableMiddleScreen {
    display: none !important; }
  :root .CG2--disableSmallScreen {
    display: block; }
  :root span.CG2--disableLargeScreen,
  :root br.CG2--disableLargeScreen {
    display: inline; }
  :root span.CG2--disableMiddleScreen,
  :root br.CG2--disableMiddleScreen {
    display: none !important; }
  :root span.CG2--disableSmallScreen,
  :root br.CG2--disableSmallScreen {
    display: inline; } }

@media screen and (max-width: 639px) {
  :root .CG2--disableLargeScreen {
    display: block; }
  :root .CG2--disableMiddleScreen {
    display: block; }
  :root .CG2--disableSmallScreen {
    display: none !important; }
  :root span.CG2--disableLargeScreen,
  :root br.CG2--disableLargeScreen {
    display: inline; }
  :root span.CG2--disableMiddleScreen,
  :root br.CG2--disableMiddleScreen {
    display: inline; }
  :root span.CG2--disableSmallScreen,
  :root br.CG2--disableSmallScreen {
    display: none !important; } }

/* ==========================================================================
   general style
   ========================================================================== */
::-webkit-selection {
  background: rgba(174, 217, 17, 0.6);
  text-shadow: none; }

::selection {
  background: rgba(174, 217, 17, 0.6);
  text-shadow: none; }

html {
  color: #242424;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #191919; }
  @media screen and (max-width: 767px) {
    html {
      font-size: 12px; } }

body {
  margin: 0;
  background: #FFF; }
  @media screen and (max-width: 767px) {
    body {
      min-width: 0; } }

a {
  color: #10a040;
  -webkit-transition: color .2s;
  transition: color .2s; }

a:hover, a:active {
  -webkit-transition: color 0s;
  transition: color 0s; }

iframe[name="google_conversion_frame"] {
  position: absolute;
  top: 0;
  left: -100px;
  width: 1px;
  height: 1px; }

/*
---
name: Icon
category:
  - Icons
tag:
  - icon
---

pxg
```html
<div style="font-size:32px;">
  <span class="CG2-icon-pxg"></span>
  
</div>
```

top
```html
<div style="font-size:32px;">
  <span class="CG2-icon-top"></span>
  
</div>
```

right
```html
<div style="font-size:32px;">
  <span class="CG2-icon-right"></span>
  
</div>
```

down
```html
<div style="font-size:32px;">
  <span class="CG2-icon-down"></span>
  
</div>
```

left
```html
<div style="font-size:32px;">
  <span class="CG2-icon-left"></span>
  
</div>
```

hamburger
```html
<div style="font-size:32px;">
  <span class="CG2-icon-hamburger"></span>
  
</div>
```

list
```html
<div style="font-size:32px;">
  <span class="CG2-icon-list"></span>
  
</div>
```

setting
```html
<div style="font-size:32px;">
  <span class="CG2-icon-setting"></span>
  
</div>
```

search
```html
<div style="font-size:32px;">
  <span class="CG2-icon-search"></span>
  
</div>
```

star
```html
<div style="font-size:32px;">
  <span class="CG2-icon-star"></span>
  
</div>
```

lock
```html
<div style="font-size:32px;">
  <span class="CG2-icon-lock"></span>
  
</div>
```

unlock
```html
<div style="font-size:32px;">
  <span class="CG2-icon-unlock"></span>
  
</div>
```

question
```html
<div style="font-size:32px;">
  <span class="CG2-icon-question"></span>
  
</div>
```

twitter
```html
<div style="font-size:32px;">
  <span class="CG2-icon-twitter"></span>
  
</div>
```

facebook
```html
<div style="font-size:32px;">
  <span class="CG2-icon-facebook"></span>
  
</div>
```

gplus
```html
<div style="font-size:32px;">
  <span class="CG2-icon-gplus"></span>
  
</div>
```

cat-elementary
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-elementary"></span>
  <span class="CG2-icon-cat-elementary CG2-icon--colored"></span>
</div>
```

cat-mastering
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-mastering"></span>
  <span class="CG2-icon-cat-mastering CG2-icon--colored"></span>
</div>
```

cat-standards
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-standards"></span>
  <span class="CG2-icon-cat-standards CG2-icon--colored"></span>
</div>
```

cat-talk
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-talk"></span>
  <span class="CG2-icon-cat-talk CG2-icon--colored"></span>
</div>
```

cat-architecture
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-architecture"></span>
  <span class="CG2-icon-cat-architecture CG2-icon--colored"></span>
</div>
```

cat-report
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-report"></span>
  <span class="CG2-icon-cat-report CG2-icon--colored"></span>
</div>
```

cat-design
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-design"></span>
  <span class="CG2-icon-cat-design CG2-icon--colored"></span>
</div>
```

cat-future
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-future"></span>
  <span class="CG2-icon-cat-future CG2-icon--colored"></span>
</div>
```

cat-work-style
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-work-style"></span>
  <span class="CG2-icon-cat-work-style CG2-icon--colored"></span>
</div>
```

cat-survey
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-survey"></span>
  <span class="CG2-icon-cat-survey CG2-icon--colored"></span>
</div>
```

cat-interview
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-interview"></span>
  <span class="CG2-icon-cat-interview CG2-icon--colored"></span>
</div>
```

cat-discussion
```html
<div style="font-size:32px;">
  <span class="CG2-icon-cat-discussion"></span>
  <span class="CG2-icon-cat-discussion CG2-icon--colored"></span>
</div>
```

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

[class^="CG2-icon-"], [class*=" CG2-icon-"] {
  font-family: "codegrid-icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* For With CJK Text =========== */
  position: relative;
  top: -0.1em; }

.CG2-icon-pxg:before {
  content: "\"; }

.CG2-icon-top:before {
  content: "\"; }

.CG2-icon-right:before {
  content: "\"; }

.CG2-icon-down:before {
  content: "\"; }

.CG2-icon-left:before {
  content: "\"; }

.CG2-icon-hamburger:before {
  content: "\"; }

.CG2-icon-list:before {
  content: "\"; }

.CG2-icon-setting:before {
  content: "\"; }

.CG2-icon-search:before {
  content: "\"; }

.CG2-icon-star:before {
  content: "\"; }

.CG2-icon-lock:before {
  content: "\"; }

.CG2-icon-unlock:before {
  content: "\"; }

.CG2-icon-question:before {
  content: "\"; }

.CG2-icon-twitter:before {
  content: "\"; }

.CG2-icon-facebook:before {
  content: "\"; }

.CG2-icon-gplus:before {
  content: "\"; }

.CG2-icon-cat-elementary:before {
  content: "\"; }

.CG2-icon-cat-mastering:before {
  content: "\"; }

.CG2-icon-cat-standards:before {
  content: "\"; }

.CG2-icon-cat-talk:before {
  content: "\"; }

.CG2-icon-cat-architecture:before {
  content: "\"; }

.CG2-icon-cat-report:before {
  content: "\"; }

.CG2-icon-cat-design:before {
  content: "\"; }

.CG2-icon-cat-future:before {
  content: "\"; }

.CG2-icon-cat-work-style:before {
  content: "\"; }

.CG2-icon-cat-survey:before {
  content: "\"; }

.CG2-icon-cat-interview:before {
  content: "\"; }

.CG2-icon-cat-discussion:before {
  content: "\"; }

span.CG2-icon--colored.CG2-icon-unlock {
  color: #f8a000; }

span.CG2-icon--colored.CG2-icon-cat-elementary {
  color: #f4db00; }

span.CG2-icon--colored.CG2-icon-cat-mastering {
  color: #9cc500; }

span.CG2-icon--colored.CG2-icon-cat-standards {
  color: #009b26; }

span.CG2-icon--colored.CG2-icon-cat-talk {
  color: #009b9b; }

span.CG2-icon--colored.CG2-icon-cat-architecture {
  color: #009be7; }

span.CG2-icon--colored.CG2-icon-cat-report {
  color: #006bb5; }

span.CG2-icon--colored.CG2-icon-cat-design {
  color: #000872; }

span.CG2-icon--colored.CG2-icon-cat-future {
  color: #f89c00; }

span.CG2-icon--colored.CG2-icon-cat-work-style {
  color: #ef0000; }

span.CG2-icon--colored.CG2-icon-cat-survey {
  color: #ee0155; }

span.CG2-icon--colored.CG2-icon-cat-interview {
  color: #ef007e; }

span.CG2-icon--colored.CG2-icon-cat-discussion {
  color: #9c0178; }

.CG2-pageHeader__search, .CG2-drawerBody__search {
  box-sizing: border-box;
  width: 100%;
  background: #303030;
  border-radius: 3px; }

.CG2-pageHeader__searchInner, .CG2-drawerBody__searchInner, .CG2-searchFailed__search {
  position: relative; }
  .CG2-pageHeader__searchInner:before, .CG2-drawerBody__searchInner:before, .CG2-searchFailed__search:before {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #777;
    font-size: 12px;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 10px; }
  .CG2-pageHeader__searchInner input, .CG2-drawerBody__searchInner input, .CG2-searchFailed__search input {
    color: #FFF;
    font-size: 16px;
    box-sizing: border-box;
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    padding: .5em 10px .5em 34px;
    background: transparent;
    -webkit-transition: all .2s;
    transition: all .2s; }
    .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 {
      background: #303030; }

/* ==========================================================================
   Section comment block
   ========================================================================== */
/* Sub-section comment block
   ========================================================================== */
/* Basic comment */
/* ==========================================================================
   offsetting an in-page anchor to adjust for fixed header
   http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors
   ========================================================================== */
:target:before {
  content: '';
  overflow: auto;
  position: static;
  display: block;
  width: 1px;
  height: 56px;
  /* fixed header height*/
  margin: -56px 0 0;
  /* negative fixed header height */ }
  @media screen and (max-width: 767px) {
    :target:before {
      height: 35px;
      margin-top: -35px; } }

/* ==========================================================================
   pageHeaderPlacer
   ========================================================================== */
.CG2-pageHeaderPlacer {
  height: 56px;
  background: #000; }

@media screen and (max-width: 767px) {
  .CG2-pageHeaderPlacer {
    height: 35px; } }

/* ==========================================================================
   pageHeader
   ========================================================================== */
/*
---
name: Page Header
category:
  - Templates
tag:
  - Template
templateItem:
  - true
---

- `CG2-pageHeaderPlacer`を併用すると高さを確保することができる、高さ確保が不要なら`CG2-pageHeaderPlacer`を利用しない
- 実際に利用するときには以下のコードから`style="position:relative;"`を**取り除いて使う**

## WWW用

```html
<div class="CG2-pageHeaderPlacer">
  <header class="CG2-pageHeader" style="position:relative;">
    <div class="CG2-pageHeader__inner">
      <div class="CG2-pageHeader__logo">
        <a href="#"><img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24"></a>
      </div>
      <div class="CG2-pageHeader__nav">
        <ul>
          <li><a href="#">料金</a></li>
          <li><a href="#">団体購読</a></li>
          <li><a href="#">よくある質問</a></li>
          <li><a href="#">書籍</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__buttons">
        <ul>
          <li><a class="CG2-button CG2-button--primary CG2-button--thin" href="#">購読する</a></li>
          <li><a href="#">ログイン</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__opener" data-drawer-toggle></div>
    </div>
  </header>
</div>
```

## APP用

```html
<div class="CG2-pageHeaderPlacer">
  <header class="CG2-pageHeader" style="position:relative;">
    <div class="CG2-pageHeader__inner">
      <div class="CG2-pageHeader__logo">
        <a href="#"><img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24"></a>
      </div>
      <div class="CG2-pageHeader__search">
        <div class="CG2-pageHeader__searchInner">
          <input>
        </div>
      </div>
      <div class="CG2-pageHeader__buttons">
        <ul>
          <li><a class="CG2-button CG2-button--primary CG2-button--thin" href="#">購読する</a></li>
          <li><a href="#">ログイン</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__opener" data-drawer-toggle></div>
    </div>
  </header>
</div>
```


## APP用 ログイン後

```html
<div class="CG2-pageHeaderPlacer">
  <header class="CG2-pageHeader" style="position:relative;">
    <div class="CG2-pageHeader__inner">
      <div class="CG2-pageHeader__logo">
        <a href="#"><img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24"></a>
      </div>
      <div class="CG2-pageHeader__search">
        <div class="CG2-pageHeader__searchInner">
          <input>
        </div>
      </div>
      <div class="CG2-pageHeader__user">
        <div class="CG2-pageHeader__userHeader">
          <div class="CG2-pageHeader__userName">oyamada.akihiro@email.com</div>
          <div class="CG2-pageHeader__userAvatar">
            <img src="http://www.gravatar.com/avatar/3d8d92b9ff9e708e3e4c247d5ab787ba.png?s=112" alt="" width="56" height="56">
          </div>
          <div class="CG2-pageHeader__userOpener"></div>
        </div>
        <div class="CG2-pageHeader__userMenu">
          <ul>
            <li><a class="CG2-button CG2-button--fullWidth CG2--alignCenter" href="#">設定</a></li>
            <li><a class="CG2-button CG2-button--fullWidth CG2--alignCenter" href="#">ログアウト</a></li>
          </ul>
        </div>
      </div>
      <div class="CG2-pageHeader__opener" data-drawer-toggle></div>
    </div>
  </header>
</div>
```

## 導線無し（フォーム途中など）

```html
<div class="CG2-pageHeaderPlacer">
  <header class="CG2-pageHeader" style="position:relative;">
    <div class="CG2-pageHeader__inner">
      <div class="CG2-pageHeader__logo">
        <img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24">
      </div>
    </div>
  </header>
</div>
```

*/
.CG2-pageHeader {
  *zoom: 1;
  position: fixed;
  z-index: 20;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: rgba(0, 0, 0, 0.8); }
  .CG2-pageHeader:before, .CG2-pageHeader:after {
    content: "";
    display: table; }
  .CG2-pageHeader:after {
    clear: both; }
  @media screen and (max-width: 767px) {
    .CG2-pageHeader {
      height: 35px;
      padding: 0 10px;
      -webkit-transition: -webkit-transform .4s;
      transition: -webkit-transform .4s;
      transition: transform .4s;
      transition: transform .4s, -webkit-transform .4s; }
      html.js-drawer--show .CG2-pageHeader {
        -webkit-transform: translateX(-100%) translateX(50px);
        -ms-transform: translateX(-100%) translateX(50px);
        transform: translateX(-100%) translateX(50px); } }
  @media print {
    .CG2-pageHeader {
      position: relative;
      height: 0;
      border-bottom: 56px solid #191919; } }

.CG2-pageHeader__inner {
  position: relative;
  max-width: 1100px;
  padding: 0 28px;
  margin: 0 auto; }

.CG2-pageHeader__logo {
  position: absolute;
  top: 16px;
  left: 28px; }
  .CG2-pageHeader__logo img {
    display: block; }
  @media screen and (max-width: 767px) {
    .CG2-pageHeader__logo {
      top: 10px;
      left: 0; }
      .CG2-pageHeader__logo img {
        width: 90px;
        height: auto; } }

.CG2-pageHeader__nav {
  text-align: center; }
  @media screen and (max-width: 767px) {
    .CG2-pageHeader__nav {
      display: none; } }
  .CG2-pageHeader__nav ul {
    font-size: 0;
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0; }
    .CG2-pageHeader__nav ul:before {
      content: '';
      display: inline-block;
      width: 0;
      height: 56px;
      vertical-align: middle; }
  .CG2-pageHeader__nav li {
    font-size: 1rem;
    vertical-align: middle;
    display: inline-block;
    padding: 0;
    margin: 0 10px; }
  .CG2-pageHeader__nav a {
    color: #999;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    margin: -10px; }
    .CG2-pageHeader__nav a:hover {
      color: #FFF; }
  @media print {
    .CG2-pageHeader__nav {
      display: none; } }

.CG2-pageHeader__search {
  position: absolute;
  top: 11px;
  left: 180px;
  width: 280px;
  border: 1px solid #777;
  background: transparent; }
  @media screen and (max-width: 767px) {
    .CG2-pageHeader__search {
      display: none; } }
  @media print {
    .CG2-pageHeader__search {
      display: none; } }

.CG2-pageHeader__searchInner input {
  padding: 4px 10px 4px 30px; }
  .CG2-pageHeader__searchInner input:hover, .CG2-pageHeader__searchInner input:focus {
    background: #303030; }

.CG2-pageHeader__buttons {
  position: absolute;
  top: 0;
  right: 28px; }
  @media screen and (max-width: 767px) {
    .CG2-pageHeader__buttons {
      display: none; } }
  @media print {
    .CG2-pageHeader__buttons {
      display: none; } }
  .CG2-pageHeader__buttons ul {
    list-style: none;
    padding: 0;
    margin: 0; }
    .CG2-pageHeader__buttons ul:before {
      content: '';
      display: inline-block;
      width: 0;
      height: 56px;
      vertical-align: middle; }
  .CG2-pageHeader__buttons li {
    font-size: 14px;
    vertical-align: middle;
    display: inline-block;
    padding: 0;
    margin: 0 10px; }
  .CG2-pageHeader__buttons a:not(.CG2-button) {
    color: #777;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    margin: -10px; }
    .CG2-pageHeader__buttons a:not(.CG2-button):hover {
      color: #FFF; }

.CG2-pageHeader__user {
  position: absolute;
  top: 0;
  right: 0; }
  @media screen and (max-width: 767px) {
    .CG2-pageHeader__user {
      display: none; } }

.CG2-pageHeader__userHeader {
  display: table;
  table-layout: fixed;
  width: 280px;
  height: 56px;
  cursor: pointer; }

.CG2-pageHeader__userName {
  color: #777;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
  display: table-cell;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis; }

.CG2-pageHeader__userAvatar {
  vertical-align: middle;
  box-sizing: border-box;
  display: table-cell;
  width: 56px; }
  .CG2-pageHeader__userAvatar img {
    display: block;
    width: 56px;
    height: 56px; }

.CG2-pageHeader__userOpener {
  color: #EEE;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 20px; }
  .CG2-pageHeader__userOpener:after {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    top: 0;
    -webkit-transition: all .2s;
    transition: all .2s; }
    .CG2-pageHeader__userHeader:hover .CG2-pageHeader__userOpener:after {
      color: #FFF;
      top: 2px; }

.CG2-pageHeader__userMenu {
  box-sizing: border-box;
  position: absolute;
  display: none;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 2px;
  border-radius: 2px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  background: #FFF; }
  .CG2-pageHeader__userMenu.CG2-pageHeader__userMenu--show {
    display: block; }
  .CG2-pageHeader__userMenu:before {
    content: "";
    position: absolute;
    top: -14px;
    right: 38px;
    display: block;
    border: 7px solid transparent;
    border-bottom-color: #FFF; }
  .CG2-pageHeader__userMenu ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .CG2-pageHeader__userMenu li {
    margin: 0; }
    .CG2-pageHeader__userMenu li + li {
      margin-top: 10px; }

@media screen and (max-width: 767px) {
  .CG2-pageHeader__opener {
    color: #FFF;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 35px;
    padding: 0 10px; }
    .CG2-pageHeader__opener:after {
      content: "";
      font-family: "codegrid-icon";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 35px;
      display: block; } }

/* ==========================================================================
   pageFooter
   ========================================================================== */
/*
---
name: Page Footer
category:
  - Templates
tag:
  - Template
templateItem:
  - true
---

```html
<footer class="CG2-pageFooter">
  <div class="CG2-pageFooter__inner">
    <div class="CG2-pageFooter__wwwNav">
      <div class="CG2-pageFooter__logo">
        <img src="http://img.pxgrid.net/128x32" alt="CodeGrid" width="128" height="32">
      </div>
      <ul>
        <li><a href="#">CodeGridについて</a></li>
        <li><a href="#">料金</a></li>
        <li><a href="#">団体購読</a></li>
        <li><a href="#">よくある質問</a></li>
        <li><a href="#">書籍</a></li>
        <li><a href="#">購読する</a></li>
      </ul>
    </div>

    <div class="CG2-pageFooter__appNav">
      <div class="CG2-pageFooter__appNavHeader">
        <div class="CG2-pageFooter__appNavHeading">
          <a href="#">アプリトップ</a>
        </div>
        <div class="CG2-pageFooter__appNavSearch">
          <div class="CG2-pageFooter__appNavSearchInner">
            <input>
          </div>
        </div>
      </div>
      <div class="CG2-pageFooter__appNavList">
        <ul>
          <li><a href="#">最新記事一覧</a></li>
          <li><a href="#">おすすめ記事一覧</a></li>
          <li><a href="#">お気に入り登録記事一覧</a></li>
          <li><a href="#">無料公開記事一覧</a></li>
          <li><a href="#">シリーズ一覧</a></li>
          <li><a href="#">著者一覧</a></li>
        </ul>
      </div>
      <div class="CG2-pageFooter__appNavCategory">
        <ul>
          <li><a href="#"><span class="CG2-icon-cat-elementary"></span>入門</a></li>
          <li><a href="#"><span class="CG2-icon-cat-practice"></span>実践</a></li>
          <li><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>
          <li><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>
          <li><a href="#"><span class="CG2-icon-cat-architecture"></span>設計</a></li>
          <li><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>
          <li><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>
          <li><a href="#"><span class="CG2-icon-cat-workstyle"></span>仕事術</a></li>
          <li><a href="#"><span class="CG2-icon-cat-survey"></span>アンケート</a></li>
          <li><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>
          <li><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>
          <li><a href="#"><span class="CG2-icon-cat-discussion"></span>ディカッション</a></li>
        </ul>
      </div>
    </div>

    <div class="CG2-pageFooter__legalNav">
      <ul>
        <li><a href="#">公式Twitter</a></li>
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">利用規約</a></li>
        <li><a href="#">プライバシーポリシー</a></li>
        <li><a href="#">特定商取引法に基づく表示</a></li>
      </ul>
      <div class="CG2-pageFooter__company"><a href="#">運営会社<img src="../../../assets2/img/CG2-pageFooter/pxg-logo.svg" alt="Pixel Grid" width="128" height="32"></a></div>
    </div>
  </div>
<!-- /.CG2-pageFooter --></footer>
```

## 導線無し（フォーム途中など）

```html
<footer class="CG2-pageFooter CG2-pageFooter--simple">
  <div class="CG2-pageFooter__inner">
    <div class="CG2-pageFooter__legalNav">
      <div class="CG2-pageFooter__company">運営会社<img src="../../../assets2/img/CG2-pageFooter/pxg-logo.svg" alt="Pixel Grid" width="128" height="32"></div>
    </div>
  </div>
<!-- /.CG2-pageFooter --></footer>
```

*/
.CG2-pageFooter {
  color: #777;
  font-size: 12px;
  padding: 60px 0;
  margin-top: 50px;
  background: #191919; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter {
      padding-left: 28px;
      padding-right: 28px; } }
  .CG2-pageFooter.CG2-pageFooter--simple {
    padding: 30px 0; }
  @media screen and (max-width: 639px) {
    .CG2-pageFooter {
      padding: 30px 0; }
      .CG2-container + .CG2-pageFooter {
        margin-top: 0; } }
  @media print {
    .CG2-pageFooter {
      position: relative;
      z-index: 1; }
      .CG2-pageFooter:after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        border-bottom: 180px solid #191919; } }
  .CG2-pageFooter a {
    color: #777;
    text-decoration: none;
    display: block;
    -webkit-transition: all .2s;
    transition: all .2s; }
    .CG2-pageFooter a:hover {
      color: #FFF; }

.CG2-pageFooter__inner {
  table-layout: fixed;
  display: table;
  width: 1072px;
  margin: 0 auto; }
  @media screen and (max-width: 1100px) {
    .CG2-pageFooter__inner {
      width: auto; } }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__inner {
      display: block; } }
  @media screen and (max-width: 639px) {
    .CG2-pageFooter__inner {
      display: block;
      width: auto; } }
  @media print {
    .CG2-pageFooter__inner {
      display: block;
      width: auto; } }

.CG2-pageFooter__wwwNav {
  vertical-align: top;
  box-sizing: border-box;
  display: table-cell;
  width: 20%;
  padding: 40px 28px; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__wwwNav {
      display: table;
      width: 100%;
      padding: 0;
      margin: 0 0 20px; } }
  @media screen and (max-width: 639px) {
    .CG2-pageFooter__wwwNav {
      display: none; } }
  @media print {
    .CG2-pageFooter__wwwNav {
      display: none; } }

.CG2-pageFooter__logo {
  margin-bottom: 32px; }
  .CG2-pageFooter__logo img {
    display: block; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__logo {
      display: table-cell;
      width: 1%;
      padding-right: 28px; } }
  @media screen and (max-width: 639px) {
    .CG2-pageFooter__logo {
      display: none; } }
  @media print {
    .CG2-pageFooter__logo {
      display: none; } }

.CG2-pageFooter__appNav {
  vertical-align: top;
  box-sizing: border-box;
  display: table-cell;
  width: 60%;
  padding: 38px 58px;
  border: 1px solid #282828; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__appNav {
      *zoom: 1;
      display: block;
      width: auto;
      padding: 20px;
      margin: 20px 0; }
      .CG2-pageFooter__appNav:before, .CG2-pageFooter__appNav:after {
        content: "";
        display: table; }
      .CG2-pageFooter__appNav:after {
        clear: both; } }
  @media screen and (max-width: 639px) {
    .CG2-pageFooter__appNav {
      display: none; } }
  @media print {
    .CG2-pageFooter__appNav {
      display: none; } }

.CG2-pageFooter__legalNav {
  vertical-align: top;
  box-sizing: border-box;
  display: table-cell;
  width: 20%;
  padding: 90px 28px 40px; }
  .CG2-pageFooter--simple .CG2-pageFooter__legalNav {
    display: block;
    width: auto;
    padding: 30px 28px 50px; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__legalNav {
      display: block;
      width: auto;
      padding: 0;
      margin: 20px 0; } }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__legalNav,
    .CG2-pageFooter--simple .CG2-pageFooter__legalNav {
      display: block;
      width: auto;
      padding: 0; } }
  @media print {
    .CG2-pageFooter__legalNav,
    .CG2-pageFooter--simple .CG2-pageFooter__legalNav {
      display: block;
      width: auto;
      padding: 0; } }

.CG2-pageFooter__wwwNav ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__wwwNav ul {
      vertical-align: middle;
      display: table-cell; } }

.CG2-pageFooter__wwwNav li {
  margin: 12px 0 0; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__wwwNav li {
      display: inline-block;
      margin: 4px 16px 4px 0; } }

.CG2-pageFooter__wwwNav a:before {
  content: "";
  font-family: "codegrid-icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 .4em .1em 0; }

.CG2-pageFooter__appNavHeader {
  display: table;
  width: 100%;
  margin-bottom: 20px; }

.CG2-pageFooter__appNavHeading {
  font-size: 20px;
  line-height: 1.2;
  vertical-align: middle;
  display: table-cell;
  width: 44.99%; }
  .CG2-pageFooter__appNavHeading a:before {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 .4em .1em 0; }

.CG2-pageFooter__appNavSearch {
  vertical-align: middle;
  display: table-cell;
  width: 54.99em;
  background: #303030; }

.CG2-pageFooter__appNavSearchInner {
  position: relative; }
  .CG2-pageFooter__appNavSearchInner:before {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #777;
    font-size: 12px;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 10px; }
  .CG2-pageFooter__appNavSearchInner input {
    color: #FFF;
    font-size: 14px;
    box-sizing: border-box;
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    padding: .4em 10px .4em 30px;
    background: #303030; }

.CG2-pageFooter__appNavList {
  float: left;
  width: 44.99%; }
  .CG2-pageFooter__appNavList ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  .CG2-pageFooter__appNavList li {
    margin: 12px 0 0; }
  .CG2-pageFooter__appNavList a:before {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 .4em .1em 0; }

.CG2-pageFooter__appNavCategory {
  float: left;
  width: 54.99%; }
  .CG2-pageFooter__appNavCategory ul {
    -webkit-column-count: 2;
    column-count: 2;
    list-style: none;
    margin: 0;
    padding: 0; }
  .CG2-pageFooter__appNavCategory li {
    margin: 12px 0 0; }
  .CG2-pageFooter__appNavCategory span[class^="CG2-icon-cat"] {
    font-size: 18px;
    line-height: 0;
    margin: 0 .4em 0 0; }

.CG2-pageFooter__legalNav ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__legalNav ul {
      text-align: center; } }
  @media screen and (max-width: 639px) {
    .CG2-pageFooter__legalNav ul {
      display: none; } }
  @media print {
    .CG2-pageFooter__legalNav ul {
      display: none; } }

.CG2-pageFooter__legalNav li {
  margin: 12px 0 0; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__legalNav li {
      display: inline-block;
      margin: 5px 10px 5px 0; } }

.CG2-pageFooter__company {
  margin: 12px 0 0; }
  .CG2-pageFooter__company img {
    vertical-align: middle;
    width: 64px;
    height: 16px;
    margin: -2px 0 0 5px; }
  .CG2-pageFooter--simple .CG2-pageFooter__company {
    font-size: 12px;
    text-align: center;
    margin-top: 0; }
    .CG2-pageFooter--simple .CG2-pageFooter__company img {
      display: block;
      width: 120px;
      height: 30px;
      margin: 5px auto; }
  @media screen and (max-width: 979px) {
    .CG2-pageFooter__company {
      text-align: center; } }
  @media screen and (max-width: 639px) {
    .CG2-pageFooter__company,
    .CG2-pageFooter--simple .CG2-pageFooter__company {
      font-size: 10px;
      text-align: center;
      margin-top: 0; }
      .CG2-pageFooter__company a,
      .CG2-pageFooter--simple .CG2-pageFooter__company a {
        color: #FFF;
        display: table;
        margin: 0 auto; }
      .CG2-pageFooter__company img,
      .CG2-pageFooter--simple .CG2-pageFooter__company img {
        display: block;
        width: 100px;
        height: 25px;
        margin: 5px auto; } }
  @media print {
    .CG2-pageFooter__company,
    .CG2-pageFooter--simple .CG2-pageFooter__company {
      font-size: 10px;
      text-align: center;
      margin-top: 0; }
      .CG2-pageFooter__company a,
      .CG2-pageFooter--simple .CG2-pageFooter__company a {
        color: #FFF;
        display: table;
        margin: 0 auto; }
      .CG2-pageFooter__company img,
      .CG2-pageFooter--simple .CG2-pageFooter__company img {
        display: block;
        width: 100px;
        height: 25px;
        margin: 5px auto; } }

/* ==========================================================================
   CG2-drawer
   ========================================================================== */
/*
---
name: Drawer
category:
  - Templates
tag:
  - Template
templateItem:
  - true
---

- スモールスクリーン時のみ有効
- CG2-pageHeader 内のトグルボタンで表示

```html
<div class="CG2-drawer">
  <div class="CG2-drawer__panel">
    <div class="CG2-drawer__panelViewport">
      <div class="CG2-drawer__panelBody">

        <div class="CG2-drawerBody">

          <div class="CG2-drawerBody__user">
            <div class="CG2-drawerBody__userAvatar">
              <img src="http://www.gravatar.com/avatar/3d8d92b9ff9e708e3e4c247d5ab787ba.png?s=112" alt="" width="56" height="56">
            </div>
            <div class="CG2-drawerBody__userName">oyamada.akihiro@email.com</div>
          </div>
          
          <div class="CG2-drawerBody__nav">
            <ul>
              <li><a href="#">アプリトップ</a></li>
              <li><a href="#">最新記事一覧</a></li>
              <li><a href="#">おすすめ記事一覧</a></li>
              <li><a href="#">お気に入り登録記事一覧</a></li>
              <li><a href="#">無料記事一覧</a></li>
              <li><a href="#">シリーズ一覧</a></li>
              <li><a href="#">著者一覧</a></li>
            </ul>
          </div>
          <div class="CG2-drawerBody__userNav">
            <ul>
              <li><a class="CG2-button CG2-button--primary CG2-button--fullWidth" href="#">購読する</a></li>
              <li><a class="CG2-button CG2-button--fullWidth" href="#">ログイン</a></li>
            </ul>
          </div>
          <div class="CG2-drawerBody__separator"></div>
          <div class="CG2-drawerBody__search">
            <div class="CG2-drawerBody__searchInner">
              <input>
            </div>
          </div>
          <div class="CG2-drawerBody__nav">
            <ul>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-elementary"></span>入門</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-practice"></span>実践</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-architecture"></span>設計</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-workstyle"></span>仕事術</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-survey"></span>アンケート</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-discussion"></span>ディカッション</a></li>
            </ul>
          </div>
          <div class="CG2-drawerBody__separator"></div>
          <div class="CG2-drawerBody__nav">
            <ul>
              <li><a href="#">CodeGridについて</a></li>
              <li><a href="#">料金</a></li>
              <li><a href="#">団体購読</a></li>
              <li><a href="#">よくある質問</a></li>
              <li><a href="#">書籍</a></li>
              <li><a href="#">購読する</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-twitter"></span>公式Twitter</a></li>
            </ul>
          </div>
          <div class="CG2-drawerBody__separator"></div>
          <div class="CG2-drawerBody__nav">
            <ul>
              <li class="CG2-drawerBody__navItem--plane"><a href="#">お問い合わせ</a></li>
              <li class="CG2-drawerBody__navItem--plane"><a href="#">利用規約</a></li>
              <li class="CG2-drawerBody__navItem--plane"><a href="#">プライバシーポリシー</a></li>
              <li class="CG2-drawerBody__navItem--plane"><a href="#">特定商法に基づく表示</a></li>
            </ul>
          </div>

        </div>
      </div>

    </div>
    <div class="CG2-drawer__panelLeft" data-drawer-hide></div>
  </div>
  <div class="CG2-drawer__bg" data-drawer-close></div>
</div>
```

*/
@media screen and (min-width: 767px) {
  html {
    padding-right: 0 !important; } }

@media screen and (max-width: 767px) {
  body {
    box-sizing: content-box;
    overflow-y: scroll; }
  html.js-drawer--show {
    overflow: hidden;
    height: 100%; }
  html.js-drawer--show body {
    overflow: hidden;
    max-height: 100%; } }

.CG2-drawer {
  display: none; }
  @media screen and (max-width: 767px) {
    .CG2-drawer {
      display: block; } }

.CG2-drawer__panel {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: transparent;
  -webkit-transform: translate3d(-50px, 0, 0);
  -ms-transform: translateX(-50px);
  transform: translate3d(-50px, 0, 0);
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s; }

.CG2-drawer__panel, x::-ms-fill {
  -ms-transform: translateX(-50px);
      transform: translateX(-50px);
  /* IE10, 11, avoid using GPU feature */ }

html:not(.js-drawer--show) .CG2-drawer__panel {
  -webkit-animation-name: zIndexOut;
  animation-name: zIndexOut;
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1; }

html.js-drawer--show .CG2-drawer__panel {
  margin-left: 0;
  z-index: 19;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%); }

html.js-drawer--dragging,
html.js-drawer--dragging * {
  cursor: -webkit-grabbing;
  cursor: grabbing; }

html:not(.js-drawer--dragging) .CG2-drawer__panel {
  -webkit-transition: -webkit-transform .4s, margin .1s;
  -webkit-transition: margin .1s, -webkit-transform .4s;
  transition: margin .1s, -webkit-transform .4s;
  transition: transform .4s, margin .1s;
  transition: transform .4s, margin .1s, -webkit-transform .4s; }

.CG2-drawer__panel:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50px;
  background: #191919; }

.CG2-drawer__panelViewport {
  overflow: auto;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  padding-left: 50px;
  margin: 0 0 0 auto;
  -webkit-overflow-scrolling: touch; }

.CG2-drawer__panelBody {
  box-sizing: border-box;
  min-height: 100%;
  box-shadow: -2px 2px 4px transparent;
  -webkit-transition: box-shadow .4s;
  transition: box-shadow .4s; }

html.js-drawer--show .CG2-drawer__panelBody {
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.3); }

.CG2-drawer__panelLeft {
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  background: transparent; }

.CG2-drawer__bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  -webkit-transition: background .4s;
  transition: background .4s; }
  html:not(.js-drawer--show) .CG2-drawer__bg {
    -webkit-animation-name: bgOut;
    animation-name: bgOut;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1; }
  html.js-drawer--show .CG2-drawer__bg {
    z-index: 18;
    background: rgba(0, 0, 0, 0.3); }

@-webkit-keyframes bgOut {
  0% {
    z-index: 18; }
  99% {
    z-index: 18; }
  100% {
    z-index: -1; } }

@keyframes bgOut {
  0% {
    z-index: 18; }
  99% {
    z-index: 18; }
  100% {
    z-index: -1; } }

@-webkit-keyframes zIndexOut {
  0% {
    z-index: 19; }
  99% {
    z-index: 19; }
  100% {
    z-index: -1; } }

@keyframes zIndexOut {
  0% {
    z-index: 19; }
  99% {
    z-index: 19; }
  100% {
    z-index: -1; } }

/* ==========================================================================
   CG2-drawerBody
   ========================================================================== */
.CG2-drawerBody {
  font-size: 16px;
  padding: 40px 20px 10px;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto; }
  .CG2-drawerBody ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .CG2-drawerBody li {
    margin: 0; }

.CG2-drawerBody__user {
  color: #777;
  table-layout: fixed;
  display: table;
  width: 100%;
  margin: -20px 0 20px; }

.CG2-drawerBody__userAvatar {
  vertical-align: middle;
  box-sizing: border-box;
  display: table-cell;
  padding-right: 12px;
  width: 44px; }
  .CG2-drawerBody__userAvatar img {
    display: block;
    width: 32px;
    height: 32px; }

.CG2-drawerBody__userName {
  white-space: normal;
  word-break: break-word;
  word-break: break-all;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  vertical-align: middle;
  display: table-cell; }

.CG2-drawerBody__nav {
  margin-bottom: 30px; }
  .CG2-drawerBody__nav ul {
    margin-left: 5px; }
  .CG2-drawerBody__nav li {
    margin-bottom: 8px; }
  .CG2-drawerBody__nav a {
    color: #777;
    text-decoration: none;
    position: relative;
    display: block;
    padding-left: 26px; }
    .CG2-drawerBody__nav a:before {
      content: "";
      font-family: "codegrid-icon";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 16px;
      line-height: 0;
      position: absolute;
      top: 50%;
      left: 3px; }
  .CG2-drawerBody__nav li.CG2-drawerBody__navItem--icon a:before {
    content: none; }
  .CG2-drawerBody__nav li.CG2-drawerBody__navItem--icon a span[class^="CG2-icon"] {
    position: static; }
    .CG2-drawerBody__nav li.CG2-drawerBody__navItem--icon a span[class^="CG2-icon"]:before {
      font-size: 20px;
      line-height: 0;
      position: absolute;
      left: -2px;
      top: 50%; }
  .CG2-drawerBody__nav li.CG2-drawerBody__navItem--plane a:before {
    content: none; }

.CG2-drawerBody__userNav li {
  margin-top: 10px; }

.CG2-drawerBody__userNav a.CG2-button {
  font-size: 16px;
  text-align: center;
  padding-top: .6em;
  padding-bottom: .6em; }

.CG2-drawerBody__separator {
  border-top: 1px solid #5c5c5c;
  height: 0;
  margin: 30px -15px; }

.CG2-drawerBody__search {
  margin: 20px 0;
  height: 40px; }

.CG2-drawerBody__searchInner:before {
  font-size: 20px; }

/* ==========================================================================
   CG2-container
   ========================================================================== */
/*
---
name: Container
category:
  - Templates
tag:
  - Template
templateItem:
  - true
---

```html
<div class="CG2-container">
  <div class="CG2-container__inner">
    コンテンツ配置/編集 領域
  </div>
</div>

<div class="CG2-container">
  <div class="CG2-container__inner">
    コンテンツ配置/編集 領域
  </div>
</div>

<div class="CG2-container">
  <div class="CG2-container__inner">
    コンテンツ配置/編集 領域
  </div>
</div>
```

*/
.CG2-container,
.CG2-container + .CG2-container + .CG2-container,
.CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container,
.CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container {
  background: transparent; }

.CG2-container + .CG2-container,
.CG2-container + .CG2-container + .CG2-container + .CG2-container,
.CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container + .CG2-container {
  background: #EEE; }

.CG2-container__inner {
  box-sizing: border-box;
  max-width: 1016px;
  padding: 40px 28px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .CG2-container__inner {
      width: auto;
      padding: 30px 20px; } }

/* ==========================================================================
   Section comment block
   ========================================================================== */
/* Sub-section comment block
   ========================================================================== */
/* Basic comment */
/* ==========================================================================
   button
   ========================================================================== */
/*
---
name: button
category:
  - Nav-items
tag:
  - button
---
work with both a and button tags
```html
<p>
  <a class="CG2-button" href="#">button:a element</a>
</p>
<p>
  <button class="CG2-button" href="#">button: button element</button>
</p>
```
with an icon
```html
<p>
  <a class="CG2-button" href="#"><span class="CG2-icon-pxg"></span>button</a>
</p>
```
use for Primary, Action, Setting
```html
<p>
  <a class="CG2-button CG2-button--primary" href="#">button</a>
</p>
<p>
  <a class="CG2-button CG2-button--action" href="#">button</a>
</p>
<p>
  <a class="CG2-button CG2-button--setting" href="#">button</a>
</p>
```
sizes
```html
<p>
  <a class="CG2-button CG2-button--thin" href="#">button</a>
</p>
<p>
  <a class="CG2-button CG2-button--large" href="#">button</a>
</p>
<p>
  <a class="CG2-button CG2-button--fullWidth" href="#">button</a>
</p>
```

disabled
```html
<p>
  <a class="CG2-button CG2-button--disabled" href="#">button</a>
</p>
<p>
  <a class="CG2-button CG2-button--primary CG2-button--disabled" href="#">primary button</a>
</p>
<p>
  <a class="CG2-button CG2-button--action CG2-button--disabled" href="#">action button</a>
</p>
<p>
  <a class="CG2-button CG2-button--setting CG2-button--disabled" href="#">setting button</a>
</p>
```

progress
```html
<p>
  <a class="CG2-button CG2-button--progress" href="#">button</a>
</p>
```
*/
.CG2-button {
  color: #FFF;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  border: 1px solid #777;
  padding: 0.6em 1.8em;
  border-radius: 2px;
  background: #777;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all .2s;
  transition: all .2s; }
  .CG2-button:hover:not(.CG2-button--disabled):not(.CG2-button--progress) {
    box-shadow: 0 0 3px #777;
    background: #919191;
    -webkit-transition: all .2s;
    transition: all .2s; }
  @media screen and (max-width: 767px) {
    .CG2-button {
      font-size: 12px; } }
  .CG2-button.CG2-button--thin {
    padding: 0.4em 1.8em; }
  .CG2-button.CG2-button--large {
    font-size: 20px;
    text-align: center;
    display: block;
    width: 60%;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (max-width: 767px) {
      .CG2-button.CG2-button--large {
        font-size: 18px;
        padding-top: .3em;
        padding-bottom: .3em;
        width: auto; } }
  .CG2-button.CG2-button--fullWidth {
    display: block;
    width: 100%; }
  .CG2-button span[class^="CG2-icon"] {
    font-size: 20px;
    margin-right: 5px; }
    .CG2-button span[class^="CG2-icon"]:first-child {
      margin-left: -.6em; }
  .CG2-button.CG2-button--primary {
    border-color: #10a040;
    background: #10a040; }
    .CG2-button.CG2-button--primary:hover:not(.CG2-button--disabled):not(.CG2-button--progress) {
      box-shadow: 0 0 3px #10a040;
      background: #15ce53; }
  .CG2-button.CG2-button--action {
    border-color: #282828;
    background: #282828; }
    .CG2-button.CG2-button--action:hover:not(.CG2-button--disabled):not(.CG2-button--progress) {
      box-shadow: 0 0 3px #282828;
      background: #424242; }
  .CG2-button.CG2-button--setting {
    border-color: #777;
    background: #777; }
    .CG2-button.CG2-button--setting:hover:not(.CG2-button--disabled):not(.CG2-button--progress) {
      box-shadow: 0 0 3px #777;
      background: #919191; }
  .CG2-button.CG2-button--disabled {
    cursor: not-allowed;
    border-color: #999;
    background: #DBDBDB; }
  .CG2-button.CG2-button--progress {
    color: transparent;
    cursor: not-allowed; }
    .CG2-button.CG2-button--progress:before {
      pointer-events: none;
      content: '';
      position: absolute;
      top: 5px;
      right: 5px;
      bottom: 5px;
      left: 5px;
      max-width: 100px;
      margin: auto;
      display: block;
      width: auto;
      -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
      background: url("../img/CG2-button/loading.svg") no-repeat 50% 50%;
      background-size: 100% 100%;
      -webkit-animation: button--loading 1s linear infinite;
      animation: button--loading 1s linear infinite; }

@-webkit-keyframes button--loading {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes button--loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

/* ==========================================================================
   buttonContainer
   ========================================================================== */
/*
---
name: buttonContainer
category:
  - Nav-items
tag:
  - button
---

```html
<div class="CG2-buttonContainer">
  <ul>
    <li><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
    <li><a class="CG2-button" href="#">button 2</a></li>
  </ul>
</div>
```
左寄せ
```html
<div class="CG2-buttonContainer CG2-buttonContainer--pullLeft">
  <ul>
    <li><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
    <li><a class="CG2-button" href="#">button 2</a></li>
  </ul>
</div>
```
ラージスクリーン時full width
```html
<div class="CG2-buttonContainer">
  <ul>
    <li class="CG2-buttonContainer__item--full"><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
    <li><a class="CG2-button" href="#">button 2</a></li>
  </ul>
</div>
```

*/
.CG2-buttonContainer {
  margin: 20px 0; }
  .CG2-buttonContainer ul {
    font-size: 0;
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0; }
  .CG2-buttonContainer.CG2-buttonContainer--pullLeft ul {
    text-align: left; }
  .CG2-buttonContainer li {
    font-size: 1rem;
    display: inline-block;
    margin: 0 8px; }
    .CG2-buttonContainer li.CG2-buttonContainer__item--full {
      display: block;
      margin: 0 0 8px; }
    @media screen and (max-width: 767px) {
      .CG2-buttonContainer li {
        display: block; } }
  .CG2-buttonContainer.CG2-buttonContainer--pullLeft li {
    margin: 0 16px 0 0; }
  @media screen and (max-width: 767px) {
    .CG2-buttonContainer li,
    .CG2-buttonContainer.CG2-buttonContainer--pullLeft li {
      margin: 0 0 5px; } }
  @media screen and (max-width: 767px) {
    .CG2-buttonContainer .CG2-button {
      font-size: 16px;
      text-align: center;
      padding: .4em 10px;
      width: 100%; } }

/* ==========================================================================
   toolButton
   ========================================================================== */
/*
---
name: toolButton
category:
  - Nav-items
tag:
  - button
---

```html
<div style="padding: 10px; background:#000;">
  <div class="CG2-toolButton"></div>
</div>
```

*/
.CG2-toolButton {
  color: #FFF;
  display: inline-block;
  width: 18px;
  height: 18px;
  padding: 11px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-transition: all .3s;
  transition: all .3s; }
  @media screen and (max-width: 767px) {
    .CG2-toolButton {
      width: 12px;
      height: 12px;
      padding: 8px; } }
  .CG2-toolButton:after {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    display: block; }
    @media screen and (max-width: 767px) {
      .CG2-toolButton:after {
        font-size: 12px; } }
  a .CG2-toolButton:hover {
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.4); }

/* ==========================================================================
   header1
   ========================================================================== */
/*
---
name: header1
category:
  - Headings_and_Contexts
tag:
  - context
---

```html
<div class="CG2-header1">
  <div class="CG2-header1__heading">Heading text 1</div>
</div>
```

*/
.CG2-header1 {
  padding: 0 28px 30px;
  border-bottom: 1px solid #282828;
  margin: 60px -28px 30px; }
  .CG2-header1:first-child {
    margin-top: 0; }
  @media screen and (max-width: 767px) {
    .CG2-header1 {
      padding: 0 10px 10px;
      margin: 20px -10px 30px; }
      .CG2-header1:first-child {
        margin-top: 20px; } }

.CG2-header1__heading {
  color: #282828;
  font-size: 32px;
  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;
  line-height: 1.2; }
  @media screen and (max-width: 767px) {
    .CG2-header1__heading {
      font-size: 20px; } }

/* ==========================================================================
   header2
   ========================================================================== */
/*
---
name: header2
category:
  - Headings_and_Contexts
tag:
  - context
---

```html
<div class="CG2-header2">
  <div class="CG2-header2__heading">Heading text 2</div>
</div>
```

*/
.CG2-header2 {
  margin: 60px 0 15px; }
  @media screen and (max-width: 767px) {
    .CG2-header2 {
      margin: 30px 0 10px; } }

.CG2-header2__heading {
  font-size: 24px; }
  @media screen and (max-width: 767px) {
    .CG2-header2__heading {
      font-size: 16px; } }

/* ==========================================================================
   header3
   ========================================================================== */
/*
---
name: header3
category:
  - Headings_and_Contexts
tag:
  - context
---

```html
<div class="CG2-header3">
  <div class="CG2-header3__heading">Heading text 3</div>
</div>
```

*/
.CG2-header3__heading {
  font-size: 16px;
  font-weight: bold;
  margin: 40px 0 15px; }

/* ==========================================================================
   leadText
   ========================================================================== */
/*
---
name: leadtext
category:
  - Headings_and_Contexts
tag:
  - context
---

```html
<div class="CG2-leadText">LeadText</div>
```

*/
.CG2-leadText {
  font-size: 32px;
  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;
  line-height: 1.4;
  text-align: center;
  margin: 80px 0 40px; }
  .CG2-header1 + .CG2-leadText {
    margin-top: 50px; }
  .CG2-container__inner > .CG2-leadText:first-child {
    margin-top: 20px; }
  .CG2-container__inner > .CG2-leadText:last-child {
    margin-bottom: 20px; }
  @media screen and (max-width: 767px) {
    .CG2-leadText {
      font-size: 20px;
      margin: 50px -10px 20px; } }

/* ==========================================================================
   shortCentered
   ========================================================================== */
/*
---
name: shortCentered
category:
  - Headings_and_Contexts
tag:
  - context
---

```html
<div class="CG2-shortCentered">
  <div class="CG2-shortCentered__inner">
    短い時はセンタリング
  </div>
</div>


<div class="CG2-shortCentered">
  <div class="CG2-shortCentered__inner">
    長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ長いテキストは左寄せ
  </div>
</div>
```

*/
.CG2-shortCentered {
  text-align: center;
  margin: 20px 0; }

.CG2-shortCentered__inner {
  text-align: left;
  display: inline-block; }

/* ==========================================================================
   holizontalLine
   ========================================================================== */
/*
---
name: holizontalLine
category:
  - Headings_and_Contexts
tag:
  - context
---

```html
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>

<div class="CG2-holizontalLine"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
```

*/
.CG2-holizontalLine {
  border-top: 1px solid #5c5c5c;
  margin: 80px -28px; }
  @media screen and (max-width: 767px) {
    .CG2-holizontalLine {
      border-color: #DBDBDB;
      margin: 50px -10px; } }

/* ==========================================================================
   CG2-customers
   ========================================================================== */
/*
---
name: customers
category:
  - Blocks/shared
tag:
  - app-item
  - www-item
---

```html
<section class="CG2-customers">
  <h1>団体購読も承っております</h1>
  <p>CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
  <div class="CG2-customers__logos">
    <ul>
      <li><img src="http://img.pxgrid.net/109x66" alt="" width="109" height="66"></li>
      <li><img src="http://img.pxgrid.net/158x79" alt="" width="158" height="79"></li>
      <li><img src="http://img.pxgrid.net/158x61" alt="" width="158" height="61"></li>
      <li><img src="http://img.pxgrid.net/140x80" alt="" width="140" height="80"></li>
      <li><img src="http://img.pxgrid.net/196x58" alt="" width="196" height="58"></li>
      <li><img src="http://img.pxgrid.net/176x69" alt="" width="176" height="69"></li>
      <li><img src="http://img.pxgrid.net/216x65" alt="" width="216" height="65"></li>
    </ul>
  </div>
</section>
```

*/
section.CG2-customers h1 {
  color: #282828;
  font-size: 24px;
  font-weight: normal;
  text-align: center;
  margin: 0 0 20px; }
  @media screen and (max-width: 767px) {
    section.CG2-customers h1 {
      font-size: 16px;
      margin-bottom: 10px; } }

section.CG2-customers p {
  text-align: center; }
  @media screen and (max-width: 767px) {
    section.CG2-customers p {
      font-size: 12px;
      text-align: left; } }

section.CG2-customers > *:first-child {
  margin-top: 0; }

.CG2-customers__logos {
  text-align: center;
  padding: 10px 30px;
  background: #FFF; }
  @media screen and (max-width: 767px) {
    .CG2-customers__logos {
      padding: 10px; } }
  .CG2-customers__logos ul {
    font-size: 0;
    list-style: none;
    padding: 0;
    margin: 0; }
  .CG2-customers__logos li {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 20px; }
    @media screen and (max-width: 767px) {
      .CG2-customers__logos li {
        margin: 5px; } }
  .CG2-customers__logos img {
    vertical-align: bottom; }
    @media screen and (max-width: 767px) {
      .CG2-customers__logos img {
        zoom: 0.45; } }

/* ==========================================================================
   CG2-seriesWeekHeader
   ========================================================================== */
/*
---
name: seriesWeekHeader
category:
  - Blocks/app
tag:
  - app-item
  - app-item-articlelist
---

```html
<div class="CG2-seriesWeekHeader">
  <div class="CG2-seriesWeekHeader__inner">
    <div class="CG2-seriesWeekHeader__prev">
      <div class="CG2-seriesWeekHeader__prevInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">前号</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text">月</span>
          <span class="CG2-seriesWeekHeader__number">1</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
    <div class="CG2-seriesWeekHeader__current">
      <div class="CG2-seriesWeekHeader__currentInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">最新号</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text">月</span>
          <span class="CG2-seriesWeekHeader__number">7</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
    <div class="CG2-seriesWeekHeader__next">
      <div class="CG2-seriesWeekHeader__nextInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">次号予告</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text">月</span>
          <span class="CG2-seriesWeekHeader__number">14</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
  </div>
</div>
```

*/
.CG2-seriesWeekHeader {
  margin: 80px 0 10px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesWeekHeader {
      margin-left: -18px;
      margin-right: -18px; } }
  .CG2-container__inner > .CG2-seriesWeekHeader:first-child {
    margin-top: 20px; }
    @media screen and (max-width: 767px) {
      .CG2-container__inner > .CG2-seriesWeekHeader:first-child {
        margin-top: 0; } }
  .CG2-seriesWeekHeader a {
    color: inherit; }

.CG2-seriesWeekHeader__inner {
  display: table;
  width: 100%; }

.CG2-seriesWeekHeader__prev {
  vertical-align: bottom;
  display: table-cell;
  width: 30%; }
  .CG2-seriesWeekHeader__prev a {
    padding-left: 20px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesWeekHeader__prev a {
        padding-left: 16px; } }
  .CG2-seriesWeekHeader__prev a:before {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 20px;
    position: absolute;
    bottom: .25em;
    left: 0; }
    @media screen and (max-width: 767px) {
      .CG2-seriesWeekHeader__prev a:before {
        font-size: 14px;
        bottom: 0; } }

.CG2-seriesWeekHeader__next {
  vertical-align: bottom;
  text-align: right;
  display: table-cell;
  width: 30%; }
  .CG2-seriesWeekHeader__next a {
    padding-right: 20px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesWeekHeader__next a {
        padding-right: 16px; } }
  .CG2-seriesWeekHeader__next a:after {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 20px;
    position: absolute;
    bottom: .25em;
    right: 0; }
    @media screen and (max-width: 767px) {
      .CG2-seriesWeekHeader__next a:after {
        font-size: 14px;
        bottom: 0; } }

.CG2-seriesWeekHeader__current {
  vertical-align: bottom;
  text-align: center;
  display: table-cell;
  width: 40%; }

.CG2-seriesWeekHeader__prevInner,
.CG2-seriesWeekHeader__nextInner,
.CG2-seriesWeekHeader__currentInner {
  font-size: 0;
  line-height: 1.2;
  text-align: left;
  display: inline-block; }
  .CG2-seriesWeekHeader__prevInner a,
  .CG2-seriesWeekHeader__nextInner a,
  .CG2-seriesWeekHeader__currentInner a {
    text-decoration: none;
    display: block;
    position: relative; }

span.CG2-seriesWeekHeader__label {
  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;
  display: block;
  font-size: 16px;
  vertical-align: baseline; }

span.CG2-seriesWeekHeader__number {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 32px;
  vertical-align: baseline;
  margin: 0 .1em; }
  span.CG2-seriesWeekHeader__label + span.CG2-seriesWeekHeader__number {
    margin-left: 0; }

span.CG2-seriesWeekHeader__text {
  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;
  font-size: 16px;
  vertical-align: baseline; }

.CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__label {
  font-size: 20px; }

.CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__number {
  font-size: 64px; }

.CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__text {
  font-size: 32px; }

@media screen and (max-width: 767px) {
  .CG2-seriesWeekHeader__prev,
  .CG2-seriesWeekHeader__next {
    width: 22%; }
    .CG2-seriesWeekHeader__prev span.CG2-seriesWeekHeader__label,
    .CG2-seriesWeekHeader__next span.CG2-seriesWeekHeader__label {
      font-size: 12px; }
    .CG2-seriesWeekHeader__prev span.CG2-seriesWeekHeader__number,
    .CG2-seriesWeekHeader__prev span.CG2-seriesWeekHeader__text,
    .CG2-seriesWeekHeader__next span.CG2-seriesWeekHeader__number,
    .CG2-seriesWeekHeader__next span.CG2-seriesWeekHeader__text {
      display: none; }
  .CG2-seriesWeekHeader__current {
    position: relative;
    bottom: -.4em;
    width: 56%; }
    .CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__label {
      font-size: 12px; }
    .CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__number {
      font-size: 40px; }
    .CG2-seriesWeekHeader__current span.CG2-seriesWeekHeader__text {
      font-size: 18px; } }

/* ==========================================================================
   CG2-seriesListHeader
   ========================================================================== */
/*
---
name: seriesListHeader
category:
  - Blocks/app
tag:
  - app-item
  - app-item-articlelist
---

内部で別コンポーネント CG2-compactNav を利用

```html
<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__articleLength">
    <span class="CG2-seriesListHeader__label">記事数</span>
    <span class="CG2-seriesListHeader__number">500</span>
    <span class="CG2-seriesListHeader__unit">本</span>
  </div>
  <div class="CG2-seriesListHeader__nav">

    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
        <li><a href="#">おすすめ順</a></li>
        <li><a href="#">お気に入り</a></li>
        <li><a href="#">無料公開</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>

  </div>
</div>
```

```html
<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__nav">

    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
        <li><a href="#">おすすめ順</a></li>
        <li><a href="#">お気に入り</a></li>
        <li><a href="#">無料公開</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>

  </div>
</div>
```

タブ切り替え（表示toggle）の挙動の付与
（JSとの連携、以下で挙動確認可能）

- `data-cg2-tab-button`を明示する
- コンテンツ部は`[data-cg2-tab-content]`でグループ化した`[data-cg2-tab-pane]`を用意する
  
```html
<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__nav">

    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#itemA" data-cg2-tab-button>項目A</a></li>
        <li><a href="#itemB" data-cg2-tab-button>項目B</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>

  </div>
</div>


<div data-cg2-tab-content>

  <div id="itemA" data-cg2-tab-pane="current">
    項目Aのコンテンツ
  </div>

  <div id="itemB" data-cg2-tab-pane>
    項目Bのコンテンツ
  </div>

</div>
```

*/
.CG2-seriesListHeader {
  font-size: 0;
  font-family: "zeroWidth";
  margin: 60px 0 30px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesListHeader {
      display: table;
      width: 100%;
      margin-bottom: 20px; } }
  .CG2-container__inner > .CG2-seriesListHeader:first-child {
    margin-top: 20px; }

.CG2-seriesListHeader__articleLength {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 1rem;
  white-space: nowrap;
  vertical-align: bottom;
  display: inline-block;
  width: 300px;
  margin-right: -300px;
  margin-bottom: -.6em; }
  @media screen and (max-width: 979px) {
    .CG2-seriesListHeader__articleLength {
      margin-bottom: -.3em; } }
  @media screen and (max-width: 767px) {
    .CG2-seriesListHeader__articleLength {
      display: table-cell;
      width: auto;
      margin-right: 0; } }
  .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__label {
    font-size: 16px;
    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;
    display: block; }
    @media screen and (max-width: 979px) {
      .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__label {
        font-size: 12px; } }
  .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__number {
    font-size: 72px;
    font-family: "Lucida Console", Monaco, monospace;
    line-height: 1;
    display: inline-block; }
    @media screen and (max-width: 979px) {
      .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__number {
        font-size: 42px; } }
  .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__unit {
    font-size: 32px;
    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;
    line-height: 1; }
    @media screen and (max-width: 979px) {
      .CG2-seriesListHeader__articleLength span.CG2-seriesListHeader__unit {
        font-size: 20px; } }

.CG2-seriesListHeader__nav {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 1rem;
  vertical-align: bottom;
  display: inline-block;
  width: 100%; }
  @media screen and (max-width: 767px) {
    .CG2-seriesListHeader__nav {
      display: table-cell;
      width: 160px;
      text-align: right; } }

[data-cg2-tab-pane] {
  display: none; }

[data-cg2-tab-pane="current"] {
  display: block; }

/* ==========================================================================
   CG2-compactNav
   ========================================================================== */
/*
---
name: compactNav
category:
  - Blocks/app
tag:
  - app-item
  - app-item-articlelist
---

別コンポーネント CG2-seriesListHeader 内で利用。利用方法は CG2-seriesListHeader を参照

```html
<div class="CG2-compactNav">
  <ul>
    <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
    <li><a href="#">おすすめ順</a></li>
    <li><a href="#">お気に入り</a></li>
    <li><a href="#">無料公開</a></li>
  </ul>
  <div class="CG2-compactNav__navOpener"></div>
</div>
```

*/
.CG2-compactNav {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 1rem;
  vertical-align: bottom; }
  @media screen and (max-width: 979px) {
    .CG2-compactNav {
      font-size: 0.9rem; } }
  @media screen and (max-width: 767px) {
    .CG2-compactNav {
      line-height: 2.2em;
      vertical-align: middle;
      position: relative;
      z-index: 10;
      display: inline-block;
      width: 120px;
      padding-right: 30px;
      border: 1px solid #DBDBDB;
      border-radius: 3px;
      height: 2.2em; } }
  .CG2-compactNav ul {
    list-style: none;
    table-layout: fixed;
    display: table;
    padding: 0;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .CG2-compactNav ul {
        position: absolute;
        display: block;
        width: 120px;
        border: 1px solid #DBDBDB;
        border-radius: 3px;
        margin: -1px;
        background: #FFF; } }
  .CG2-compactNav li {
    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;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    padding: 2px 40px;
    border-left: 1px solid #DBDBDB;
    margin: 0; }
    .CG2-compactNav li:first-child {
      border-left: none; }
    @media screen and (max-width: 979px) {
      .CG2-compactNav li {
        padding-left: 20px;
        padding-right: 20px; } }
    @media screen and (max-width: 767px) {
      .CG2-compactNav li {
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
        display: block;
        text-align: left;
        display: none;
        border-left: none;
        padding: 0 10px; }
        .CG2-compactNav.CG2-compactNav--show li {
          display: block; } }
    .CG2-compactNav li.CG2-compactNav__item--current {
      color: #FFF;
      display: block;
      background: #282828; }
      @media screen and (max-width: 767px) {
        .CG2-compactNav li.CG2-compactNav__item--current {
          color: inherit;
          background: rgba(0, 0, 0, 0.03); } }
  .CG2-compactNav a {
    color: inherit;
    text-decoration: none;
    position: relative;
    display: block;
    padding: 2px 40px;
    margin: -2px -40px; }
    @media screen and (max-width: 979px) {
      .CG2-compactNav a {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px;
        margin-right: -20px; } }
    @media screen and (max-width: 767px) {
      .CG2-compactNav a {
        padding: 0 10px;
        margin: 0 -10px; } }
  .CG2-compactNav li:not(.CG2-compactNav__item--current) a:after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    display: block;
    height: 2px;
    background: #424242;
    -webkit-transition: all .2s;
    transition: all .2s; }
  .CG2-compactNav li:not(.CG2-compactNav__item--current) a:hover:after {
    left: 0;
    right: 0; }
  @media screen and (max-width: 767px) {
    .CG2-compactNav li:not(.CG2-compactNav__item--current) a:after {
      content: none; } }
  @media screen and (max-width: 767px) {
    .CG2-compactNav .CG2-compactNav__navOpener {
      line-height: 2.2em;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 30px;
      height: 2.2em;
      background: #EBEBEB;
      cursor: pointer; }
      .CG2-compactNav .CG2-compactNav__navOpener:after {
        content: "";
        font-family: "codegrid-icon";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: middle;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 14px;
        line-height: 0;
        position: absolute;
        top: 50%;
        left: 0;
        width: 30px;
        text-align: center; } }

/* ==========================================================================
   CG2-seriesList
   ========================================================================== */
/*
---
name: seriesList
category:
  - Blocks/shared
tag:
  - app-item
  - app-item-articlelist
  - www-item
---

- 未読記事には`CG2-seriesList__article--unread`追加する
- 有料時のカギアイコンは`<span class="CG2-icon-lock"></span>`を使う。`CG2-icon--colored`は付与しない

## 通常

```html
<div class="CG2-seriesList">
  <div class="CG2-seriesList__inner">

    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href="#"><span class="CG2-icon-cat-architecture"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">Web Fonts 自由自在</div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <a href="#"><div class="CG2-toolButton"></div></a>
        </div>
      </div>
      <div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>
            <div class="CG2-seriesList__articleDate">4/16</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">gulpで生成を自動化</div>
            <div class="CG2-seriesList__articleDate">4/9</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">Webアプリの利用</div>
            <div class="CG2-seriesList__articleDate">4/2</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>
    
    <!-- .CG2-seriesList__item 繰り返し -->

    <div class="CG2-seriesList__itemMore"><a href="#">more</a></div>
  
  </div>
</div>

```

## full width

```html
<div class="CG2-seriesList">
  <div class="CG2-seriesList__inner">

    <div class="CG2-seriesList__item CG2-seriesList__item--fullWidth">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href="#"><span class="CG2-icon-cat-architecture"></span>実践</a>
        </div>
        <div class="CG2-seriesList__itemTitle">Web Fonts 自由自在</div>
        <div class="CG2-seriesList__itemUtil">
          <a href="#"><div class="CG2-toolButton"></div></a>
        </div>
      </div>
      <div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>
            <div class="CG2-seriesList__articleDate">4/16</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- .CG2-seriesList__item.CG2-seriesList__item--fullWidth 繰り返し -->

    <div class="CG2-seriesList__itemMore"><a href="#">more</a></div>
  
  </div>
</div>
```

*/
.CG2-seriesList__author, .CG2-series__author {
  display: table;
  margin-bottom: 1px; }

.CG2-seriesList__authorPic, .CG2-series__authorPic {
  vertical-align: middle;
  display: table-cell;
  padding-right: 5px; }
  .CG2-seriesList__authorPic img, .CG2-series__authorPic img {
    display: block; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__authorPic img, .CG2-series__authorPic img {
      width: 28px;
      height: 28px; } }

.CG2-seriesList__authorName, .CG2-series__authorName {
  font-size: 12px;
  vertical-align: middle;
  display: table-cell;
  padding: 5px 10px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__authorName, .CG2-series__authorName {
      font-size: 10px;
      padding-left: 5px;
      padding-right: 5px; } }

.CG2-seriesList__authorPicList ul, .CG2-series__authorPicList ul {
  font-size: 0;
  list-style: none;
  padding: 0;
  margin: 0; }

.CG2-seriesList__authorPicList li, .CG2-series__authorPicList li {
  display: inline-block;
  margin: 0 1px 1px 0; }

.CG2-seriesList {
  margin: 0 calc( -50vw + 50% + 8px); }
  @media screen and (max-width: 767px) {
    .CG2-seriesList {
      margin-left: -18px;
      margin-right: -18px; } }
  @media print {
    .CG2-seriesList {
      margin-left: 0;
      margin-right: 0; } }

.CG2-seriesList__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__inner {
      display: block; } }

.CG2-seriesList__item {
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #000;
  color: #FFF;
  box-sizing: border-box;
  width: calc( 50% - 4px);
  padding: 30px 28px;
  margin: 2px;
  -webkit-transition: all .3s;
  transition: all .3s; }
  .CG2-seriesList__item:hover {
    background: #333; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__item {
      width: auto;
      padding: 8px 8px 24px;
      margin: 0 0 2px; } }
  .CG2-seriesList__item.CG2-seriesList__item--fullWidth {
    width: calc( 100% - 4px); }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__item.CG2-seriesList__item--fullWidth {
        width: auto; } }

.CG2-seriesList__itemHeader {
  display: table;
  width: 100%;
  margin: -18px 0 12px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__itemHeader {
      margin: 0 0 20px; } }
  .CG2-seriesList__item--fullWidth .CG2-seriesList__itemHeader {
    margin: 0 0 30px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__item--fullWidth .CG2-seriesList__itemHeader {
        margin: 0 0 20px; } }

.CG2-seriesList__itemCategory {
  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;
  vertical-align: middle;
  display: table-cell;
  width: 40px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__itemCategory {
      font-size: 0;
      vertical-align: top;
      width: 26px; } }
  .CG2-seriesList__item--fullWidth .CG2-seriesList__itemCategory {
    width: 150px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__item--fullWidth .CG2-seriesList__itemCategory {
        text-align: center;
        vertical-align: top;
        width: 26px; } }
  .CG2-seriesList__itemCategory a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all .2s;
    transition: all .2s; }
  .CG2-seriesList__itemCategory [class^="CG2-icon-cat"] {
    font-size: 40px;
    line-height: 1;
    position: static;
    margin-right: 15px;
    -webkit-transition: all .2s;
    transition: all .2s; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__itemCategory [class^="CG2-icon-cat"] {
        font-size: 26px; } }
  .CG2-seriesList__itemCategory a:hover [class^="CG2-icon-cat"] {
    -webkit-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
    opacity: 0.9;
    text-shadow: 0 0 3px #777; }

.CG2-seriesList__itemTitle {
  font-size: 25px;
  font-weight: bold;
  line-height: 1.4;
  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;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  height: 2.8em; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__itemTitle {
      font-size: 20px;
      font-weight: normal;
      height: auto;
      padding-top: 14px; } }
  .CG2-seriesList__item--fullWidth .CG2-seriesList__itemTitle {
    font-size: 30px;
    height: auto; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__item--fullWidth .CG2-seriesList__itemTitle {
        font-size: 20px; } }
  .CG2-seriesList__itemTitle .CG2-seriesList__itemTitleInner {
    text-align: left;
    display: inline-block; }
  .CG2-seriesList__itemTitle a {
    color: inherit; }

.CG2-seriesList__itemUtil {
  text-align: right;
  vertical-align: middle;
  display: table-cell;
  width: 40px;
  padding-left: 10px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__itemUtil {
      vertical-align: top; } }
  .CG2-seriesList__item--fullWidth .CG2-seriesList__itemUtil {
    width: 150px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__item--fullWidth .CG2-seriesList__itemUtil {
        width: 40px; } }

.CG2-seriesList__coverImage {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transform: scale(1.2, 1.2);
      -ms-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
  opacity: .64; }
  .CG2-seriesList__coverImage.CG2-seriesList__coverImage--blurry {
    -webkit-filter: blur(24px);
            filter: blur(24px); }

.CG2-seriesList__articles {
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

.CG2-seriesList__article {
  font-size: 16px;
  display: table;
  line-height: 1.2;
  width: 100%;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
  margin-bottom: -1px;
  background: rgba(255, 255, 255, 0.1); }
  .CG2-seriesList__article.CG2-seriesList__article--unread {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.2); }
  .CG2-seriesList__article a {
    color: inherit;
    text-decoration: none;
    display: table-row;
    -webkit-transition: background .5s;
    transition: background .5s; }
    .CG2-seriesList__article a:hover {
      -webkit-transition: background .2s;
      transition: background .2s;
      background: rgba(255, 255, 255, 0.2); }

.CG2-seriesList__articleIcon {
  font-size: 16px;
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
  width: 1px;
  padding: 0 15px; }
  .CG2-seriesList__item--fullWidth .CG2-seriesList__articleIcon {
    font-size: 18px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__articleIcon {
      font-size: 14px;
      padding: 0 10px; }
      .CG2-seriesList__item--fullWidth .CG2-seriesList__articleIcon {
        font-size: 14px; } }

.CG2-seriesList__articleOrder {
  font-size: 16px;
  vertical-align: middle;
  white-space: nowrap;
  display: table-cell;
  width: 1%;
  padding: 15px 15px 15px 0; }
  .CG2-seriesList__articleOrder:first-child {
    padding-left: 20px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__articleOrder {
      font-size: 14px;
      padding-right: 10px; }
      .CG2-seriesList__articleOrder:first-child {
        padding-left: 10px; } }
  .CG2-seriesList__item--fullWidth .CG2-seriesList__articleOrder {
    font-size: 18px;
    padding-top: 24px;
    padding-bottom: 24px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__item--fullWidth .CG2-seriesList__articleOrder {
        font-size: 14px;
        padding-top: 15px;
        padding-bottom: 15px; } }

.CG2-seriesList__articleTitle {
  font-size: 16px;
  vertical-align: middle;
  display: table-cell;
  padding: 15px 0; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__articleTitle {
      font-size: 14px; } }
  .CG2-seriesList__item--fullWidth .CG2-seriesList__articleTitle {
    font-size: 18px;
    padding-top: 24px;
    padding-bottom: 24px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__item--fullWidth .CG2-seriesList__articleTitle {
        font-size: 14px;
        padding-top: 15px;
        padding-bottom: 15px; } }

.CG2-seriesList__articleDate {
  font-size: 12px;
  vertical-align: middle;
  text-align: right;
  display: table-cell;
  white-space: nowrap;
  padding: 15px 20px 15px 5px; }
  .CG2-seriesList__item--fullWidth .CG2-seriesList__articleDate {
    padding-top: 24px;
    padding-bottom: 24px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__item--fullWidth .CG2-seriesList__articleDate {
        padding-top: 15px;
        padding-bottom: 15px; } }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__articleDate {
      font-size: 10px;
      padding-right: 10px; } }

.CG2-seriesList__authors {
  position: relative;
  z-index: 1; }
  .CG2-seriesList__authors a {
    color: inherit;
    text-decoration: none;
    display: table; }

.CG2-seriesList__author {
  position: relative; }

a .CG2-seriesList__author:before {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background: rgba(255, 255, 255, 0);
  -webkit-transition: all .5s;
  transition: all .5s; }

a:hover .CG2-seriesList__author:before {
  background: rgba(255, 255, 255, 0.2);
  -webkit-transition: all .2s;
  transition: all .2s; }

.CG2-seriesList__item--fullWidth .CG2-seriesList__authorName {
  font-size: 16px; }

@media screen and (max-width: 767px) {
  .CG2-seriesList__item--fullWidth .CG2-seriesList__authorName {
    font-size: 10px; } }

.CG2-seriesList__itemMore {
  width: 100%; }
  .CG2-seriesList__itemMore a {
    color: inherit;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 28px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #DBDBDB; }
    .CG2-seriesList__itemMore a:before {
      content: '';
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: -100%;
      margin-left: -60px;
      width: 100%;
      padding: 0 20px;
      -webkit-transform: skewX(20deg);
          -ms-transform: skewX(20deg);
              transform: skewX(20deg);
      background: #EEE;
      -webkit-transition: all .3s;
      transition: all .3s; }
    .CG2-seriesList__itemMore a:hover:before {
      left: 0;
      margin-left: -20px; }
    .CG2-seriesList__itemMore a:after {
      content: "";
      font-family: "codegrid-icon";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 20px;
      margin-left: 4px; }

/* ==========================================================================
   CG2-seriesHeader
   ========================================================================== */
/*
---
name: seriesHeader
category:
  - Blocks/app
tag:
  - app-item
  - app-item-articlelist
templateItem:
  - true
---

```html
<div class="CG2-seriesHeader">
  <div class="CG2-seriesHeader__inner">
    <div class="CG2-seriesHeader__category">
      <div class="CG2-seriesHeader__categoryIcon">
        <span class="CG2-icon-cat-architecture"></span>
      </div>
      <div class="CG2-seriesHeader__categoryName">カテゴリー名</div>
    </div>
    <div class="CG2-seriesHeader__main">
      <div class="CG2-seriesHeader__mainInner">
        <div class="CG2-seriesHeader__title">Vue.jsを使いこなす</div>
        <div class="CG2-seriesHeader__length">
          全<span class="CG2-seriesHeader__value">8</span>回
        </div>
      </div>
    </div>
  </div>
  <div class="CG2-seriesHeader__bg CG2-seriesHeader__bg--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
</div>
```

*/
.CG2-seriesHeader {
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #000;
  color: #FFF; }

.CG2-seriesHeader__inner {
  box-sizing: border-box;
  max-width: 1016px;
  padding: 50px 0;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .CG2-seriesHeader__inner {
      width: auto;
      padding: 20px 10px; } }

.CG2-seriesHeader__category {
  text-align: center;
  margin-bottom: 20px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesHeader__category {
      margin-bottom: 10px; } }

.CG2-seriesHeader__categoryIcon {
  font-size: 50px;
  line-height: 1; }
  @media screen and (max-width: 767px) {
    .CG2-seriesHeader__categoryIcon {
      font-size: 32px; } }

.CG2-seriesHeader__categoryName {
  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;
  margin-top: 3px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesHeader__categoryName {
      font-size: 10px; } }

.CG2-seriesHeader__mainInner {
  text-align: center;
  min-height: 150px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesHeader__mainInner {
      min-height: 60px; } }

.CG2-seriesHeader__title {
  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;
  font-size: 48px;
  line-height: 1.2; }
  @media screen and (max-width: 767px) {
    .CG2-seriesHeader__title {
      font-size: 20px; } }

.CG2-seriesHeader__length {
  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;
  margin-top: 30px; }
  @media screen and (max-width: 767px) {
    .CG2-seriesHeader__length {
      font-size: 10px;
      margin-top: 10px; } }

.CG2-seriesHeader__value {
  margin: 0 0.6em; }

.CG2-seriesHeader__bg {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transform: scale(1.2, 1.2);
      -ms-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
  opacity: .64; }
  .CG2-seriesHeader__bg.CG2-seriesHeader__bg--blurry {
    -webkit-filter: blur(24px);
            filter: blur(24px); }

/* ==========================================================================
   CG2-series
   ========================================================================== */
/*
---
name: series
category:
  - Blocks/app
tag:
  - app-item
  - app-item-articlelist
---

- 未読時は`CG2-series__item--unread`を追加する
- 有料記事のアイコンは`<span class="CG2-icon-lock"></span>`を利用する。このとき`CG2-icon--colored`は不要


```html

<div class="CG2-series">
  <div class="CG2-series__item">
    <div class="CG2-series__itemHeader">
      <a href="#">
        <div class="CG2-series__itemIcon">
          <span class="CG2-icon-unlock CG2-icon--colored"></span>
        </div>
        <div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>
        <div class="CG2-series__itemPubdate">2015/04/23</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
        </div>
        <div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
      </div>
    </div>
  </div>

  <div class="CG2-series__item CG2-series__item--unread">
    <div class="CG2-series__itemHeader">
      <a href="#">
        <div class="CG2-series__itemIcon">
          <span class="CG2-icon-unlock CG2-icon--colored"></span>
        </div>
        <div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>
        <div class="CG2-series__itemPubdate">2015/04/23</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
        </div>
        <div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
      </div>
    </div>
  </div>

  <div class="CG2-series__item">
    ...
  </div>

  <div class="CG2-series__item">
    ...
  </div>

</div>
```

*/
.CG2-series__item {
  margin-top: 45px; }
  .CG2-series__item:first-child {
    margin-top: 20px; }

.CG2-series__itemHeader {
  position: relative;
  z-index: 1;
  display: table;
  width: 100%;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  margin-bottom: 20px; }
  .CG2-series__item--unread .CG2-series__itemHeader {
    color: #777;
    background: #EEE; }

.CG2-series__itemHeader a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: table-cell; }
  .CG2-series__itemHeader a:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 100%;
    left: 0;
    -webkit-transition: all .3s;
    transition: all .3s; }
  .CG2-series__itemHeader a:hover {
    color: #10a040; }
    .CG2-series__itemHeader a:hover:after {
      background: #feffb3;
      right: 0; }

.CG2-series__itemIcon {
  font-size: 24px;
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
  width: 1px;
  padding: 0 10px 0 15px; }
  @media screen and (max-width: 767px) {
    .CG2-series__itemIcon {
      font-size: 16px;
      padding: 0 10px 0 15px; } }

.CG2-series__itemTitle {
  font-size: 20px;
  font-weight: bold;
  vertical-align: middle;
  display: table-cell;
  padding: 20px 0; }
  .CG2-series__itemTitle:first-child {
    padding-left: 10px; }
  @media screen and (max-width: 767px) {
    .CG2-series__itemTitle {
      font-size: 14px;
      padding-top: 15px;
      padding-bottom: 15px; } }

.CG2-series__itemPubdate {
  font-size: 12px;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
  width: 1%;
  padding: 20px 20px 20px 5px; }
  @media screen and (max-width: 767px) {
    .CG2-series__itemPubdate {
      font-size: 8px;
      padding-top: 15px;
      padding-bottom: 15px; } }

.CG2-series__itemBody {
  padding: 0 56px;
  margin: 20px 0; }
  @media screen and (max-width: 767px) {
    .CG2-series__itemBody {
      padding-left: 10px;
      padding-right: 10px; } }

.CG2-series__authors {
  padding: 0 56px; }
  .CG2-series__authors a {
    color: inherit;
    text-decoration: none;
    display: table; }
  @media screen and (max-width: 767px) {
    .CG2-series__authors {
      padding-left: 10px;
      padding-right: 10px; } }

/* ==========================================================================
   CG2-categoryHeader
   ========================================================================== */
/*
---
name: categoryHeader
category:
  - Blocks/app
tag:
  - app-item
---

```html
<div class="CG2-categoryHeader">
  <div class="CG2-categoryHeader__inner">
    <div class="CG2-categoryHeader__icon">
      <span class="CG2-icon-cat-future CG2-icon--colored"></span>
    </div>
    <div class="CG2-categoryHeader__text">
      <h1>未来・次世代</h1>
      <p>カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。</p>
    </div>
  </div>
</div>
```

*/
.CG2-categoryHeader {
  margin: 30px 0 60px; }
  @media screen and (max-width: 767px) {
    .CG2-categoryHeader {
      margin: 0 0 30px 0; } }

.CG2-categoryHeader__inner {
  display: table;
  width: 100%; }

.CG2-categoryHeader__icon {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  width: 180px; }
  @media screen and (max-width: 767px) {
    .CG2-categoryHeader__icon {
      text-align: left;
      width: 70px; } }

.CG2-categoryHeader__text {
  display: table-cell;
  vertical-align: middle; }
  .CG2-categoryHeader__text h1 {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 15px; }
    @media screen and (max-width: 767px) {
      .CG2-categoryHeader__text h1 {
        font-size: 16px;
        margin-bottom: 10px; } }
  .CG2-categoryHeader__text p {
    margin: 10px 0; }
  .CG2-categoryHeader__text > *:last-child {
    margin-bottom: 0; }

.CG2-categoryHeader span[class*="CG2-icon-cat"] {
  font-size: 120px; }
  @media screen and (max-width: 767px) {
    .CG2-categoryHeader span[class*="CG2-icon-cat"] {
      font-size: 50px; } }

/* ==========================================================================
   CG2-articleHeader
   ========================================================================== */
/*
---
name: articleHeader
category:
  - Blocks/app
tag:
  - app-item
  - app-item-articlelist
---

```html
<div class="CG2-articleHeader">
  <div class="CG2-articleHeader__inner">
    <div class="CG2-articleHeader__category">
      <div class="CG2-articleHeader__categoryIcon">
        <span class="CG2-icon-cat-elementary"></span>
      </div>
      <div class="CG2-articleHeader__categoryName">入門</div>
    </div>

    <div class="CG2-articleHeader__main">
      <div class="CG2-articleHeader__mainInner">
        <div class="CG2-articleHeader__series">そこが知りたい、 Flexible Box</div>
        <div class="CG2-articleHeader__title">第2回 仕様を知る 2</div>
        <div class="CG2-articleHeader__abstract">
          <p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>
        </div>
        <div class="CG2-articleHeader__pubDate">2015年 5月14日発行</div>
      </div>
    </div>

    <div class="CG2-articleHeader__pagenation">
      <ul>
        <li class="CG2-articleHeader__pagenationPrev"><a href="#">第1回 仕様を知る 1</a></li>
        <li class="CG2-articleHeader__pagenationNext"><a href="#">第3回 Flexboxを実践する 1</a></li>
      </ul>
    </div>

  </div>
  <div class="CG2-articleHeader__bg CG2-articleHeader__bg--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
</div>
```

*/
.CG2-articleHeader {
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #000;
  color: #FFF; }

.CG2-articleHeader__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 1016px;
  padding: 40px 190px;
  margin: 0 auto; }
  @media screen and (max-width: 979px) {
    .CG2-articleHeader__inner {
      padding-left: 18.70079%;
      padding-right: 18.70079%; } }
  @media screen and (max-width: 767px) {
    .CG2-articleHeader__inner {
      width: auto;
      padding: 20px; } }

.CG2-articleHeader__category {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 50px; }
  @media screen and (max-width: 767px) {
    .CG2-articleHeader__category {
      vertical-align: middle;
      position: static;
      display: table;
      width: auto;
      margin-bottom: 10px; } }

.CG2-articleHeader__categoryIcon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px; }
  .CG2-articleHeader__categoryIcon span[class*="CG2-icon-cat"] {
    font-size: 50px;
    line-height: 50px;
    top: 0; }
  @media screen and (max-width: 767px) {
    .CG2-articleHeader__categoryIcon {
      display: table-cell;
      width: auto;
      height: auto; }
      .CG2-articleHeader__categoryIcon span[class*="CG2-icon-cat"] {
        font-size: 32px;
        line-height: 32px; } }

.CG2-articleHeader__categoryName {
  letter-spacing: 0.2em;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
      writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  margin: auto; }
  @media screen and (max-width: 767px) {
    .CG2-articleHeader__categoryName {
      font-size: 12px;
      letter-spacing: 0;
      vertical-align: middle;
      -webkit-writing-mode: inherit;
      -moz-writing-mode: inherit;
      -o-writing-mode: inherit;
      -ms-writing-mode: inherit;
          writing-mode: inherit;
      -webkit-writing-mode: inherit;
          -ms-writing-mode: inherit;
              writing-mode: inherit;
      display: table-cell;
      padding-left: 10px; } }

.CG2-articleHeader__main {
  display: table;
  width: 100%;
  height: 300px; }
  @media screen and (max-width: 767px) {
    .CG2-articleHeader__main {
      height: auto; } }

.CG2-articleHeader__mainInner {
  display: table-cell;
  vertical-align: middle; }

.CG2-articleHeader__series {
  font-size: 24px;
  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; }

.CG2-articleHeader__title {
  font-size: 32px;
  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;
  line-height: 1.4;
  margin-bottom: 20px; }
  @media screen and (max-width: 767px) {
    .CG2-articleHeader__title {
      font-size: 18px; } }

@media screen and (max-width: 767px) {
  .CG2-articleHeader__abstract {
    font-size: 12px; } }

.CG2-articleHeader__pubDate {
  font-size: 12px;
  opacity: 0.5; }

.CG2-articleHeader__pagenation {
  padding-top: 20px; }
  @media screen and (max-width: 767px) {
    .CG2-articleHeader__pagenation {
      display: none; } }
  .CG2-articleHeader__pagenation ul {
    list-style: none;
    display: table;
    width: 100%;
    padding: 0;
    margin: 0; }
  .CG2-articleHeader__pagenation li {
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
    display: table-cell;
    width: 50%;
    padding: 0 5px;
    margin: 0; }
    .CG2-articleHeader__pagenation li a {
      color: inherit;
      text-decoration: none;
      text-align: left;
      display: inline-block; }
      .CG2-articleHeader__pagenation li a:before {
        position: absolute;
        top: 50%;
        -webkit-transition: all .2s;
        transition: all .2s; }
    .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev {
      text-align: left;
      padding: 0 .5em 0 1.2em; }
      .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev a:before {
        content: "";
        font-family: "codegrid-icon";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: middle;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 0;
        left: 0; }
      .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationPrev a:hover:before {
        left: -3px; }
    .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext {
      text-align: right;
      padding: 0 1.2em 0 .5em; }
      .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext a:before {
        content: "";
        font-family: "codegrid-icon";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: middle;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 0;
        right: 0; }
      .CG2-articleHeader__pagenation li.CG2-articleHeader__pagenationNext a:hover:before {
        right: -3px; }

.CG2-articleHeader__bg {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transform: scale(1.2, 1.2);
      -ms-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
  opacity: .64; }
  .CG2-articleHeader__bg.CG2-articleHeader__bg--blurry {
    -webkit-filter: blur(24px);
            filter: blur(24px); }

@media print {
  .CG2-articleHeader {
    color: #000;
    background: #FFF;
    border-bottom: 1px solid #000; }
  .CG2-articleHeader__inner {
    width: auto;
    padding: 20px 190px; }
  .CG2-articleHeader__pagenation {
    display: none; }
  .CG2-articleHeader__bg {
    display: none; } }

/* ==========================================================================
   CG2-narrowLayout
   ========================================================================== */
/*
---
name: narrowLayout
category:
  - Templates
tag:
  - app-item-article
templateItem:
  - true
---

記事ページ用のレイアウト
サイドバーに `.CG2-articleSeriesNav` 利用する

```html
<div class="CG2-narrowLayout">
  <div class="CG2-narrowLayout__main">
    目次など
  </div>
  <div class="CG2-narrowLayout__sub">
    
    <div class="CG2-articleSeriesNav">
      <div class="CG2-articleSeriesNav__inner">
        <ul>
          <li><a href="#">第1回「 仕様を知る 1 」</a></li>
          <li><a href="#">第2回「 仕様を知る 2 」</a></li>
        </ul>
      </div>
    </div>

  </div>
  <div class="CG2-narrowLayout__main">
    本文領域
    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.
    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.
  </div>
</div>
```

*/
.CG2-narrowLayout {
  *zoom: 1;
  max-width: 1016px;
  margin: 0 auto; }
  .CG2-narrowLayout:before, .CG2-narrowLayout:after {
    content: "";
    display: table; }
  .CG2-narrowLayout:after {
    clear: both; }
  @media screen and (max-width: 979px) {
    .CG2-narrowLayout {
      max-width: 636px;
      padding: 0 10px; } }

.CG2-narrowLayout__main {
  float: right;
  box-sizing: border-box;
  width: 100%;
  padding: 0 190px; }
  @media screen and (max-width: 979px) {
    .CG2-narrowLayout__main {
      float: none;
      padding: 0; } }

.CG2-narrowLayout__sub {
  float: left;
  box-sizing: border-box;
  width: 150px;
  margin-right: -100%; }
  @media screen and (max-width: 979px) {
    .CG2-narrowLayout__sub {
      float: none;
      width: auto;
      margin-right: 0; } }

@media print {
  .CG2-narrowLayout {
    display: block;
    width: auto; }
  .CG2-narrowLayout__main {
    float: none;
    width: auto;
    padding: 0 20px; }
  .CG2-narrowLayout__sub {
    display: none; } }

/* ==========================================================================
   CG2-articleBeforeLogin
   ========================================================================== */
/*
---
name: articleBeforeLogin
category:
  - Blocks/app
tag:
  - app-item-article
---

```html
<div class="CG2-articleBeforeLogin">
  <div class="CG2-articleBeforeLogin__lead">この記事を読むには<br>購読の手続きが必要です</div>
  <div class="CG2-articleBeforeLogin__sub"></div>
  <div class="CG2-articleBeforeLogin__buttonContainer">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">購読の手続きへ</a></li>
      <li><a class="CG2-button" href="#">購読済みの方はログイン</a></li>
    </ul>
  </div>
</div>
```

*/
.CG2-articleBeforeLogin {
  margin: 80px 0; }
  @media screen and (max-width: 639px) {
    .CG2-articleBeforeLogin {
      margin: 40px 0; } }
  .CG2-articleBeforeLogin > *:first-child {
    margin-top: 0; }
  .CG2-articleBeforeLogin > *:last-child {
    margin-bottom: 0; }

.CG2-articleBeforeLogin__lead {
  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;
  font-size: 32px;
  text-align: center;
  margin: 40px 0; }
  @media screen and (max-width: 639px) {
    .CG2-articleBeforeLogin__lead {
      font-size: 24px;
      margin: 20px 0; } }

.CG2-articleBeforeLogin__sub {
  text-align: center;
  margin: 40px 0; }
  @media screen and (max-width: 767px) {
    .CG2-articleBeforeLogin__sub {
      font-size: 16px; } }
  @media screen and (max-width: 639px) {
    .CG2-articleBeforeLogin__sub {
      font-size: 14px;
      margin: 20px 0; } }

.CG2-articleBeforeLogin__buttonContainer {
  margin: 40px 0; }
  @media screen and (max-width: 639px) {
    .CG2-articleBeforeLogin__buttonContainer {
      margin: 40px 0; } }
  .CG2-articleBeforeLogin__buttonContainer ul {
    font-size: 0;
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0; }
  .CG2-articleBeforeLogin__buttonContainer li {
    font-size: 1rem;
    display: inline-block;
    margin: 0 8px 5px; }
    @media screen and (max-width: 639px) {
      .CG2-articleBeforeLogin__buttonContainer li {
        display: block; } }
  @media screen and (max-width: 639px) {
    .CG2-articleBeforeLogin__buttonContainer li {
      margin: 0 0 5px; } }
  .CG2-articleBeforeLogin__buttonContainer .CG2-button {
    font-size: 16px; }
    @media screen and (max-width: 639px) {
      .CG2-articleBeforeLogin__buttonContainer .CG2-button {
        text-align: center;
        padding: .4em 10px;
        width: 100%; } }

/* ==========================================================================
   CG2-articleTOC
   ========================================================================== */
/*
---
name: articleTOC
category:
  - Blocks/app
tag:
  - app-item-article
---

```html
<section class="CG2-articleTOC">
  <header class="CG2-articleTOC__header">
    <h1>目次</h1>
  </header>
  <div class="CG2-articleTOC__body">
    <div class="CG2-articleTOC__list">
      <ul>
        <li><a href="#">はじめに</a></li>
        <li><a href="#">flex-growとflex-shrink</a></li>
        <li><a href="#">利用可能な余白を計算する</a></li>
        <li><a href="#">まとめ</a></li>
      </ul>
    </div>
    <div class="CG2-articleTOC__util">
      <ul>
        <li><button class="CG2-button CG2-button--action"><span class="CG2-icon-star"></span> お気に入りに登録</button></li>
        <li><button class="CG2-button">未読にする</button></li>
      </ul>
    </div>
  </div>
</section>
```

*/
section.CG2-articleTOC {
  box-sizing: border-box;
  margin: 40px auto; }
  @media screen and (max-width: 767px) {
    section.CG2-articleTOC {
      margin: 20px auto; } }

header.CG2-articleTOC__header {
  padding-bottom: 8px;
  border-bottom: 1px solid #DBDBDB;
  margin-bottom: 1em; }
  header.CG2-articleTOC__header h1 {
    font-size: 28px;
    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;
    font-weight: normal;
    min-height: 44px;
    margin: 0; }
  @media screen and (max-width: 767px) {
    header.CG2-articleTOC__header {
      padding: 0 10px .3em;
      margin-bottom: 20px; }
      header.CG2-articleTOC__header h1 {
        font-size: 18px;
        min-height: 0; } }

.CG2-articleTOC__body {
  display: table;
  width: 100%; }
  @media screen and (max-width: 767px) {
    .CG2-articleTOC__body {
      display: block;
      width: auto;
      padding: 0 10px; } }

.CG2-articleTOC__list {
  vertical-align: top;
  display: table-cell; }
  @media screen and (max-width: 767px) {
    .CG2-articleTOC__list {
      font-size: 14px;
      display: block;
      margin: 10px 0; } }
  .CG2-articleTOC__list ul {
    list-style: none;
    padding: 0;
    margin: auto; }
  .CG2-articleTOC__list li {
    margin: .8em 0 0; }
    .CG2-articleTOC__list li:first-child {
      margin-top: 0; }
    @media screen and (max-width: 767px) {
      .CG2-articleTOC__list li {
        margin-top: .4em; } }
  .CG2-articleTOC__list a {
    color: inherit;
    text-decoration: none; }
    .CG2-articleTOC__list a:before {
      content: "";
      font-family: "codegrid-icon";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      margin: 0 .4em 0 0; }

.CG2-articleTOC__util {
  vertical-align: top;
  display: table-cell;
  width: 1%;
  white-space: nowrap; }
  @media screen and (max-width: 767px) {
    .CG2-articleTOC__util {
      display: block;
      width: auto;
      margin-top: 15px; } }
  .CG2-articleTOC__util ul {
    list-style: none;
    padding: 0;
    margin: 0; }
    @media screen and (max-width: 767px) {
      .CG2-articleTOC__util ul {
        font-size: 0; } }
  .CG2-articleTOC__util li {
    margin: 0 0 5px; }
    @media screen and (max-width: 767px) {
      .CG2-articleTOC__util li {
        display: inline-block;
        margin: 0 2px 0 0; } }
  .CG2-articleTOC__util .CG2-button {
    width: 100%; }
    @media screen and (max-width: 767px) {
      .CG2-articleTOC__util .CG2-button {
        font-size: 10px;
        display: inline-block;
        width: auto;
        padding: 0.2em 1.5em;
        border-radius: 1px; }
        .CG2-articleTOC__util .CG2-button [class^="CG2-icon-"] {
          font-size: 12px;
          margin-right: 3px; } }

@media print {
  .CG2-articleTOC__body {
    display: block;
    width: auto; }
  .CG2-articleTOC__list {
    font-size: 18px;
    display: block; }
  .CG2-articleTOC__util {
    display: none; } }

/* ==========================================================================
   CG2-articleSeriesNav
   ========================================================================== */
/*
---
name: articleSeriesNav
category:
  - Blocks/app
tag:
  - app-item
  - app-item-article
---

記事ページ `.CG2-narrowLayout` のサイドバー内で利用する

```html
<div class="CG2-articleSeriesNav">
  <div class="CG2-articleSeriesNav__inner">
    <ul>
      <li><a href="#">第1回「 仕様を知る 1 」</a></li>
      <li class="CG2-articleSeriesNav__item--current"><a href="#">第2回「 仕様を知る 2 」</a></li>
      <li><a href="#">第3回「 Flexboxを実践する 1 」</a></li>
      <li><a href="#">第4回「 Flexboxを実践する 2 」</a></li>
      <li><a href="#">５こまではいる、長いと切れる長いと切れる長いと切れる</a></li>
    </ul>
    <ul>
      <li><a href="#">６こ目は次のUL</a></li>
      <li><a href="#">７こ目</a></li>
      <li><a href="#">８こ目</a></li>
      <li><a href="#">９こ目</a></li>
      <li><a href="#">１０こ目</a></li>
    </ul>
  </div>
</div>
```

*/
.CG2-articleSeriesNav {
  font-family: "codegrid-num", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  padding-top: 92px;
  letter-spacing: 0.2em;
  box-sizing: border-box;
  margin: 0 auto; }
  @media screen and (max-width: 979px) {
    .CG2-articleSeriesNav {
      padding-top: 0;
      letter-spacing: 0;
      margin: 60px 0; } }
  @media screen and (max-width: 767px) {
    .CG2-articleSeriesNav {
      display: none; } }

.CG2-articleSeriesNav__inner {
  line-height: 1.6;
  width: 150px;
  padding-top: 40px;
  border-top: 1px solid #DBDBDB; }
  @media screen and (max-width: 979px) {
    .CG2-articleSeriesNav__inner {
      width: auto;
      padding-top: 0;
      border-top: none; } }
  .CG2-articleSeriesNav__inner ul {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
        writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    list-style: none;
    width: 8em;
    padding: 0;
    margin: 0 auto 20px; }
    @media screen and (max-width: 979px) {
      .CG2-articleSeriesNav__inner ul {
        -webkit-writing-mode: horizontal-tb;
        -moz-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: lr-tb;
        -webkit-writing-mode: horizontal-tb;
            -ms-writing-mode: lr-tb;
                writing-mode: horizontal-tb;
        width: auto;
        margin: 0; } }
  .CG2-articleSeriesNav__inner li {
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 19.9%;
    max-height: 500px;
    padding: 0;
    margin: 0; }
    @media screen and (max-width: 979px) {
      .CG2-articleSeriesNav__inner li {
        max-height: none;
        margin: 6px 0; } }
    .CG2-articleSeriesNav__inner li.CG2-articleSeriesNav__item--current a {
      color: #FFF;
      background: #000; }
      @media screen and (max-width: 979px) {
        .CG2-articleSeriesNav__inner li.CG2-articleSeriesNav__item--current a {
          display: block; } }
  .CG2-articleSeriesNav__inner abbr {
    -webkit-text-orientation: upright;
    text-orientation: upright; }
    @media screen and (max-width: 979px) {
      .CG2-articleSeriesNav__inner abbr {
        -webkit-text-orientation: mixed;
        text-orientation: mixed; } }
  .CG2-articleSeriesNav__inner a {
    color: inherit;
    text-decoration: none;
    overflow-y: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-height: 100%;
    padding: 0 2px;
    -webkit-transition: .3s all;
    transition: .3s all; }
    .CG2-articleSeriesNav__inner a:hover {
      background: #eee;
      -webkit-transition: none;
      transition: none; }

/* ==========================================================================
   CG2-article
   ========================================================================== */
/*
---
name: article
category:
  - Blocks/app
tag:
  - app-item
  - app-item-article
---

記事本文、markdownから変換されることを前提

```html
<article class="CG2-article">

  <h2>h2みだし</h2>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
  
  <h3>h3みだし</h3>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
  
  <h4>h4みだし</h4>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>

  <ul>
    <li>リストりすと</li>
    <li>リストりすと</li>
  </ul>

  <ol>
    <li>リストりすと</li>
    <li>リストりすと</li>
  </ol>

  <table>
    <tbody>
      <tr>
        <th>見出しセル</th>
        <th>見出しセル</th>
        <th>見出しセル</th>
      </tr>
      <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
      <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
    </tbody></table>
    <table>
      <tbody><tr>
        <th>見出しセル</th>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
      <tr>
        <th>見出しセル</th>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
    </tbody>
  </table>

  <aside>
    <h1>*注：Autoprefixer</h1>
    <p>Autoprefixerに関しては、次の記事を参照してください。<br><a href="#">「ビルドツールアラカルト」</a>シリーズ</p>
  </aside>

</article>
```

*/
article.CG2-article {
  font-size: 16px;
  line-height: 1.8;
  border-bottom: 1px solid #DBDBDB;
  padding-bottom: 30px;
  margin-bottom: 20px;
  word-break: break-word;
  word-break: break-all;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }
  @media screen and (max-width: 767px) {
    article.CG2-article {
      line-height: 2;
      padding: 0 10px; } }
  article.CG2-article > h2 {
    font-size: 28px;
    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;
    font-weight: normal;
    line-height: 1.2;
    padding-bottom: .5em;
    border-bottom: 1px solid #DBDBDB;
    margin: 2.5em 0 1.5em; }
    article.CG2-article > h2:first-child {
      margin-top: 0; }
    @media screen and (max-width: 767px) {
      article.CG2-article > h2 {
        font-size: 20px;
        padding: 0 10px 10px;
        margin: 20px -10px; } }
  article.CG2-article > h3 {
    font-size: 20px;
    font-weight: normal;
    margin: 2em 0 .5em; }
    @media screen and (max-width: 767px) {
      article.CG2-article > h3 {
        font-size: 18px;
        margin-top: 1.6em; } }
  article.CG2-article > h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 2em 0 .5em; }
    @media screen and (max-width: 767px) {
      article.CG2-article > h4 {
        font-size: 14px;
        margin-top: 1.6em; } }
  article.CG2-article p {
    margin: 2em 0; }
    @media screen and (max-width: 767px) {
      article.CG2-article p {
        margin: 1.6em 0; } }
  article.CG2-article ul {
    margin: 0;
    padding: 0 0 0 20px; }
  article.CG2-article ol {
    margin: 0;
    padding: 0 0 0 30px; }
  article.CG2-article li {
    margin: 1em 0; }
    @media screen and (max-width: 767px) {
      article.CG2-article li {
        margin: .5em 0; } }
  article.CG2-article table {
    margin: 2em 0; }
    article.CG2-article table th, article.CG2-article table td {
      padding: .3em 10px;
      border: 1px solid #DBDBDB; }
    article.CG2-article table th {
      background: #EEE; }
  article.CG2-article figure {
    margin: 2em 0; }
    article.CG2-article figure img {
      box-sizing: border-box;
      display: block;
      border: 1px solid #DBDBDB; }
    @media screen and (max-width: 767px) {
      article.CG2-article figure {
        margin: 1.6em -10px; }
        article.CG2-article figure img {
          max-width: 100%;
          height: auto; } }
  article.CG2-article pre {
    line-height: 1.6; }
  article.CG2-article code {
    padding: 2px;
    background: #f5f2f0; }
  article.CG2-article section.CG2-article__rel {
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid #DBDBDB;
    padding: 19px; }
    @media screen and (max-width: 767px) {
      article.CG2-article section.CG2-article__rel {
        padding: 14px; } }
    article.CG2-article section.CG2-article__rel h1 {
      font-size: 14px;
      font-weight: bold;
      margin: 0; }
      @media screen and (max-width: 767px) {
        article.CG2-article section.CG2-article__rel h1 {
          font-size: 12px;
          margin-bottom: 3px; } }
    article.CG2-article section.CG2-article__rel p {
      margin: 1em 0; }
    article.CG2-article section.CG2-article__rel ul {
      margin: 0;
      padding: 0 0 0 20px; }
    article.CG2-article section.CG2-article__rel li {
      margin: 0; }
    article.CG2-article section.CG2-article__rel > *:first-child {
      margin-top: 0; }
    article.CG2-article section.CG2-article__rel > *:last-child {
      margin-bottom: 0; }
  article.CG2-article aside {
    color: #777;
    font-size: 14px;
    margin: 2em 0; }
    @media screen and (max-width: 767px) {
      article.CG2-article aside {
        font-size: 10px;
        margin: 1.6em 0; } }
    article.CG2-article aside h1 {
      font-size: 100%;
      font-weight: bold;
      margin: 0; }
    article.CG2-article aside p {
      margin: 0; }
    article.CG2-article aside > *:first-child {
      margin-top: 0; }
    article.CG2-article aside > *:last-child {
      margin-bottom: 0; }

@media print {
  article.CG2-article {
    font-size: 18px;
    line-height: 1.6; }
    article.CG2-article p {
      margin: 1em 0; }
    article.CG2-article table {
      margin: 2em 0; }
      article.CG2-article table th, article.CG2-article table td {
        padding: .3em 10px;
        border: 1px solid #DBDBDB; }
      article.CG2-article table th {
        background: #EEE; }
    article.CG2-article figure {
      margin: 2em 0; }
      article.CG2-article figure img {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        width: auto;
        height: auto;
        border: 1px solid #DBDBDB; }
    article.CG2-article code {
      padding: 2px;
      background: #f5f2f0; }
    article.CG2-article section.CG2-article__rel {
      font-size: 14px;
      line-height: 1.6;
      border: 1px solid #DBDBDB;
      padding: 19px; }
      article.CG2-article section.CG2-article__rel h1 {
        font-size: 14px;
        font-weight: bold;
        margin: 0; }
      article.CG2-article section.CG2-article__rel ul {
        margin: 0;
        padding: 0 0 0 20px; }
      article.CG2-article section.CG2-article__rel li {
        margin: 0; } }

/* 旧Jade 用
   ========================================================================== */
article.CG2-article dl {
  margin: 2em 0; }

article.CG2-article dt {
  font-weight: bold; }

article.CG2-article dd {
  margin: 0 0 0.8em 2em; }

article.CG2-article blockquote {
  color: #777;
  padding: 0 15px;
  border-left: 4px solid #EEE;
  margin: 2em 0; }

article.CG2-article pre.code {
  font-family: Consolas,Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1em;
  border: 1px solid #DBDBDB;
  background: #f5f2f0; }

article.CG2-article .ImgBox {
  margin: 2em 0; }

article.CG2-article .ImgBox-title {
  font-weight: bold;
  border-bottom: 1px dotted #ccc;
  margin: 0.5em 0 3px; }

article.CG2-article .ImgBox-comment {
  color: #777;
  font-size: 14px; }

article.CG2-article .ImgBox-body {
  margin: 3px 0; }
  article.CG2-article .ImgBox-body img {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    width: auto;
    height: auto; }

article.CG2-article .Column {
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid #DBDBDB;
  padding: 19px; }
  @media screen and (max-width: 767px) {
    article.CG2-article .Column {
      padding: 14px; } }
  article.CG2-article .Column p {
    margin: 1em 0; }
  article.CG2-article .Column ul {
    margin: 0;
    padding: 0 0 0 20px; }
  article.CG2-article .Column li {
    margin: 0; }

article.CG2-article .Column-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0; }
  @media screen and (max-width: 767px) {
    article.CG2-article .Column-title {
      font-size: 12px;
      margin-bottom: 3px; } }

article.CG2-article .Column-body > *:first-child {
  margin-top: 0; }

article.CG2-article .Column-body > *:last-child {
  margin-bottom: 0; }

article.CG2-article .Note {
  color: #777;
  font-size: 14px;
  margin: 2em 0; }
  @media screen and (max-width: 767px) {
    article.CG2-article .Note {
      font-size: 10px;
      margin: 1.6em 0; } }
  article.CG2-article .Note p {
    margin: 0; }

article.CG2-article .Note-title {
  font-size: 100%;
  font-weight: bold;
  margin: 0; }

article.CG2-article .Note-body > *:first-child {
  margin-top: 0; }

article.CG2-article .Note-body > *:last-child {
  margin-bottom: 0; }

/* ==========================================================================
   CG2-articlePagination
   ========================================================================== */
/*
---
name: articlePagination
category:
  - Blocks/app
tag:
  - app-item
  - app-item-article
---

```html
<div class="CG2-articlePagination">
  <ul>
    <li class="CG2-articlePagination__prev"><a href="#">第1回 仕様を知る 1</a></li>
    <li class="CG2-articlePagination__next"><a href="#">第3回 Flexboxを実践する 1</a></li>
  </ul>
</div>
```

*/
.CG2-articlePagination {
  font-size: 14px;
  margin: 0 0 60px; }
  @media screen and (max-width: 767px) {
    .CG2-articlePagination {
      margin-bottom: 30px; } }
  .CG2-articlePagination ul {
    list-style: none;
    display: table;
    width: 100%;
    padding: 0;
    margin: 0; }
  .CG2-articlePagination li {
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
    display: table-cell;
    width: 50%; }
    @media screen and (max-width: 639px) {
      .CG2-articlePagination li {
        display: block;
        width: auto; } }
    .CG2-articlePagination li.CG2-articlePagination__prev a:before {
      content: "";
      font-family: "codegrid-icon";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .CG2-articlePagination li.CG2-articlePagination__next a:before {
      content: "";
      font-family: "codegrid-icon";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .CG2-articlePagination li.CG2-articlePagination__prev a:before,
    .CG2-articlePagination li.CG2-articlePagination__next a:before {
      line-height: 0;
      position: absolute;
      top: 50%; }
    @media screen and (min-width: 639px) {
      .CG2-articlePagination li.CG2-articlePagination__prev {
        padding: 0 .5em 0 1.2em; }
        .CG2-articlePagination li.CG2-articlePagination__prev a {
          margin-left: -1.2em;
          padding-left: 1.2em; }
          .CG2-articlePagination li.CG2-articlePagination__prev a:before {
            left: 0; }
          .CG2-articlePagination li.CG2-articlePagination__prev a:hover:before {
            left: -3px; }
      .CG2-articlePagination li.CG2-articlePagination__next {
        text-align: right;
        padding: 0 1.2em 0 .5em; }
        .CG2-articlePagination li.CG2-articlePagination__next a {
          margin-right: -1.2em;
          padding-right: 1.2em; }
          .CG2-articlePagination li.CG2-articlePagination__next a:before {
            right: 0; }
          .CG2-articlePagination li.CG2-articlePagination__next a:hover:before {
            right: -3px; } }
    @media screen and (max-width: 639px) {
      .CG2-articlePagination li {
        padding-left: 1.2em; }
        .CG2-articlePagination li a {
          padding-left: 1.2em;
          margin-left: -1.2em; }
          .CG2-articlePagination li a:before {
            left: 0; } }
  .CG2-articlePagination a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    display: inline-block; }
    .CG2-articlePagination a:after, .CG2-articlePagination a:before {
      -webkit-transition: all .2s;
      transition: all .2s; }

@media print {
  .CG2-articlePagination {
    display: none; } }

/* ==========================================================================
   CG2-articleUtil
   ========================================================================== */
/*
---
name: articleUtil
category:
  - Blocks/app
tag:
  - app-item
  - app-item-article
---

```html
<div class="CG2-articleUtil">
  <ul>
    <li><button class="CG2-button CG2-button--action" data-socialitems-append><span class="CG2-icon-facebook"></span><span class="CG2-icon-twitter"></span><span class="CG2-icon-gplus"></span> シェアする</button></li>
    <li><button class="CG2-button CG2-button--action"><span class="CG2-icon-star"></span> お気に入りに登録</button></li>
  </ul>
  <div class="CG2-articleUtil__socialItems"></div>
  <script src="https://platform.twitter.com/widgets.js" async></script>
</div>
```

*/
.CG2-articleUtil {
  margin: 20px 0; }
  .CG2-articleUtil ul {
    *zoom: 1;
    list-style: none;
    padding: 0;
    margin: 0; }
    .CG2-articleUtil ul:before, .CG2-articleUtil ul:after {
      content: "";
      display: table; }
    .CG2-articleUtil ul:after {
      clear: both; }
  .CG2-articleUtil li {
    float: left;
    padding: 0;
    margin: 0 5px 5px 0; }
  @media screen and (max-width: 767px) {
    .CG2-articleUtil .CG2-button {
      font-size: 10px;
      display: inline-block;
      width: auto;
      padding: 0.2em 1.5em;
      border-radius: 1px; }
      .CG2-articleUtil .CG2-button [class^="CG2-icon-"] {
        font-size: 12px;
        margin-right: 3px; } }
  .CG2-articleUtil .CG2-articleUtil__socialItems {
    overflow: hidden; }
  .CG2-articleUtil .CG2-articleUtil__socialItem {
    margin-top: 5px; }
    .CG2-articleUtil .CG2-articleUtil__socialItem iframe {
      max-width: 100%; }

@media print {
  .CG2-articleUtil {
    display: none; } }

/* ==========================================================================
   CG2-livecode
   ========================================================================== */
/*
---
name: livecode
category:
  - Blocks/app
tag:
  - app-item
  - app-item-article
---

ソースコードを埋め込むことができる

```html
<section class="CG2-livecode">
  <header class="CG2-livecode__header">
    <div class="CG2-livecode__label">
      index.html
    </div>
    <div class="CG2-livecode__nav">
      <ul>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 全文選択
        </a></li>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 新規タブで開く
        </a></li>
      </ul>
    </div>
  </header>
  <div class="CG2-livecode__body">
    <pre class="language-markup line-numbers"><code>&lt;div class="flex"&gt;
  &lt;div class="flex__item-1"&gt;Item1&lt;/div&gt;
  &lt;div class="flex__item-2"&gt;Item2&lt;/div&gt;
  &lt;div class="flex__item-3"&gt;Item3&lt;/div&gt;
&lt;/div&gt;</code></pre>
  </div>
</section>

```

動く demo として、iframe を埋め込むことができる

iframeには、

- CG2-livecode__frame--small
- CG2-livecode__frame--large
  
を追加クラスとして明示することも可能。その場合それぞれ、iframeの高さが190px、590pxとなる。

```html
<section class="CG2-livecode">
  <h1>埋め込みデモのタイトル</h1>
  <header class="CG2-livecode__header">
    <div class="CG2-livecode__nav">
      <ul>
        <li><a href="#">
          ソースコード：flex-basis/2
        </a></li>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 新規タブで開く
        </a></li>
      </ul>
    </div>
  </header>
  <div class="CG2-livecode__body">
    <iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2015-css-flexiblebox/demo/2/flex-basis/1/index.html"></iframe>
  </div>
</section>
```

*/
section.CG2-livecode {
  margin: 2em 0; }
  section.CG2-livecode h1 {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 .5em; }
    @media screen and (max-width: 767px) {
      section.CG2-livecode h1 {
        font-size: 14px; } }
  section.CG2-livecode p {
    font-size: 12px;
    margin: 0 0 .5em; }

.CG2-livecode__header {
  display: table;
  width: 100%;
  background: #EEE; }
  .CG2-livecode__header .CG2-livecode__label {
    vertical-align: middle;
    display: table-cell;
    padding: 0 10px; }
    @media screen and (max-width: 767px) {
      .CG2-livecode__header .CG2-livecode__label {
        font-size: 10px;
        padding: 5px 10px;
        border-right: 1px solid #DBDBDB; } }
  .CG2-livecode__header .CG2-livecode__nav {
    vertical-align: middle;
    display: table-cell; }
    @media screen and (max-width: 767px) {
      .CG2-livecode__header .CG2-livecode__nav {
        font-size: 10px; } }
    .CG2-livecode__header .CG2-livecode__nav ul {
      display: table;
      padding: 0;
      margin: 0 0 0 auto; }
      @media screen and (max-width: 767px) {
        .CG2-livecode__header .CG2-livecode__nav ul {
          display: block; } }
    .CG2-livecode__header .CG2-livecode__nav li {
      font-size: 10px;
      font-weight: bold;
      vertical-align: middle;
      display: table-cell;
      padding: 10px;
      border-left: 1px solid #DBDBDB;
      margin: 0; }
      @media screen and (max-width: 767px) {
        .CG2-livecode__header .CG2-livecode__nav li {
          display: block;
          border-left: none;
          padding: 8px 16px;
          border-top: 1px solid #DBDBDB; }
          .CG2-livecode__header .CG2-livecode__nav li:first-child {
            border-top: none; } }
    .CG2-livecode__header .CG2-livecode__nav a {
      color: inherit;
      text-decoration: none;
      display: block;
      padding: 8px  16px;
      margin: -8px -16px; }
      .CG2-livecode__header .CG2-livecode__nav a span[class^="CG2-icon-"] {
        font-size: 20px;
        position: static;
        margin: 0 5px 0 0; }
      .CG2-livecode__header .CG2-livecode__nav a[data-livecode-play] {
        position: relative; }
        .CG2-livecode__header .CG2-livecode__nav a[data-livecode-play]:before {
          position: absolute;
          content: 'サンプルを再生する';
          background: #EEE; }
          .CG2-livecode.CG2-livecode--isRunning .CG2-livecode__header .CG2-livecode__nav a[data-livecode-play]:before {
            content: 'サンプルを停止する'; }

.CG2-livecode__body {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  position: relative;
  border: 1px solid #DBDBDB; }
  .CG2-livecode__body iframe {
    vertical-align: bottom;
    resize: vertical;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 390px;
    border: none;
    background: #FFF; }
    .CG2-livecode__body iframe.CG2-livecode__frame--small {
      min-height: 190px; }
    .CG2-livecode__body iframe.CG2-livecode__frame--large {
      min-height: 590px; }
  .CG2-livecode__body pre[class*="language-"] {
    margin: 0;
    resize: vertical; }
    .CG2-livecode__body pre[class*="language-"] code {
      padding: 0;
      background: transparent; }

.CG2-livecode__clickToPlay {
  overflow: hidden;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #777;
  -webkit-transition: all .3s;
  transition: all .3s; }
  .CG2-livecode.CG2-livecode--isRunning .CG2-livecode__clickToPlay {
    bottom: 100%; }
  .CG2-livecode__clickToPlay:after {
    content: 'クリックして再生する';
    color: #FFF;
    font-size: 18px;
    text-align: center;
    display: block;
    width: 100%; }

/* ==========================================================================
   CG2-profile
   ========================================================================== */
/*
---
name: profile
category:
  - Blocks/app
tag:
  - app-item
---

バイオグラフィー自体がメインのコンテンツ用

```html
<div class="CG2-profile">
  <div class="CG2-profile__image">
    <img src="http://img.pxgrid.net/120x120" alt="">
  </div>
  <div class="CG2-profile__main">
    <div class="CG2-profile__header">
      <div class="CG2-profile__name">ピクセル グリオ</div>
      <div class="CG2-profile__title">フロントエンジニア</div>
      <div class="CG2-profile__links">
      <ul>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Website</a></li>
      </ul>
    </div>
    </div>
    <div class="CG2-profile__text">
      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
    </div>
  </div>
</div>
```

*/
.CG2-profile {
  display: table;
  width: 100%; }
  @media screen and (max-width: 767px) {
    .CG2-profile {
      position: relative;
      display: block;
      width: auto;
      margin: 0 -10px; } }

.CG2-profile__image {
  vertical-align: top;
  display: table-cell;
  width: 120px;
  padding-right: 40px; }
  @media screen and (max-width: 767px) {
    .CG2-profile__image {
      position: absolute;
      display: block;
      width: 80px;
      padding-right: 0; } }
  .CG2-profile__image img {
    display: block; }
    @media screen and (max-width: 767px) {
      .CG2-profile__image img {
        width: 80px;
        height: 80px; } }

.CG2-profile__main {
  vertical-align: top;
  display: table-cell; }
  @media screen and (max-width: 767px) {
    .CG2-profile__main {
      display: block; } }

.CG2-profile__header {
  margin-bottom: 18px; }
  @media screen and (max-width: 767px) {
    .CG2-profile__header {
      min-height: 80px;
      padding-left: 100px; } }

.CG2-profile__name {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 18px; }
  @media screen and (max-width: 767px) {
    .CG2-profile__name {
      font-size: 16px;
      margin-bottom: 8px; } }

.CG2-profile__title {
  font-size: 12px; }

.CG2-profile__links ul {
  font-size: 0;
  line-height: 1.2;
  list-style: none;
  padding: 0;
  margin: 0; }

.CG2-profile__links li {
  font-size: 12px;
  display: inline-block;
  border-left: 1px solid #000;
  padding: 0 8px; }
  .CG2-profile__links li:first-child {
    padding-left: 0;
    border-left: #000; }

.CG2-profile__links a {
  text-decoration: none; }

.CG2-profile__text {
  font-size: 16px;
  line-height: 1.8; }
  @media screen and (max-width: 767px) {
    .CG2-profile__text {
      font-size: 12px;
      padding-left: 10px;
      padding-right: 10px; } }

/* ==========================================================================
   CG2-profileSimple
   ========================================================================== */
/*
---
name: profileSimple
category:
  - Blocks/app
tag:
  - app-item
  - app-item-article
---

記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用

```html
<div class="CG2-profileSimple">
  <div class="CG2-profileSimple__image">
    <img src="http://img.pxgrid.net/120x120" alt="">
  </div>
  <div class="CG2-profileSimple__main">
    <div class="CG2-profileSimple__header">
      <div class="CG2-profileSimple__name">ピクセル グリオ</div>
      <div class="CG2-profileSimple__title">フロントエンジニア</div>
    </div>
    <div class="CG2-profileSimple__text">
      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
    </div>
  </div>
</div>
```

*/
.CG2-profileSimple {
  display: table;
  margin-top: 20px; }
  @media screen and (max-width: 767px) {
    .CG2-profileSimple {
      margin-top: 10px; } }

.CG2-profileSimple__image {
  vertical-align: top;
  display: table-cell;
  width: 120px;
  padding-right: 20px; }
  .CG2-profileSimple__image img {
    display: block;
    width: 100%;
    height: auto; }
  @media screen and (max-width: 767px) {
    .CG2-profileSimple__image {
      width: 60px; } }

.CG2-profileSimple__main {
  vertical-align: top;
  display: table-cell; }

.CG2-profileSimple__header {
  display: table;
  line-height: 1.2; }
  @media screen and (max-width: 767px) {
    .CG2-profileSimple__header {
      display: block; } }

.CG2-profileSimple__name {
  font-size: 16px;
  vertical-align: bottom;
  display: table-cell; }
  @media screen and (max-width: 767px) {
    .CG2-profileSimple__name {
      font-size: 14px;
      display: block; } }

.CG2-profileSimple__title {
  font-size: 10px;
  vertical-align: bottom;
  display: table-cell;
  padding-left: 10px; }
  @media screen and (max-width: 767px) {
    .CG2-profileSimple__title {
      display: block;
      padding-left: 0; } }

.CG2-profileSimple__text {
  font-size: 12px; }
  @media screen and (max-width: 767px) {
    .CG2-profileSimple__text {
      font-size: 10px; } }
  .CG2-profileSimple__text > *:last-child {
    margin-bottom: 0; }

/* ==========================================================================
   CG2-authorList
   ========================================================================== */
/*
---
name: authorList
category:
  - Blocks/app
tag:
  - app-item
---

```html
<div class="CG2-authorList">
  <div class="CG2-authorList__inner">
  
    <div class="CG2-authorList__item">
      <a href="#">
        <div class="CG2-authorList__image"><img src="http://img.pxgrid.net/80x80" alt="" width="80" height="80"></div>
        <div class="CG2-authorList__name">中村 享介</div>
        <div class="CG2-authorList__title">代表取締役, フロントエンド・エンジニア</div>
        <div class="CG2-authorList__numOfPosts">記事数24</div>
      </a>
    </div>

    <div class="CG2-authorList__item">
      <a href="#">
        <div class="CG2-authorList__image"><img src="http://img.pxgrid.net/80x80" alt="" width="80" height="80"></div>
        <div class="CG2-authorList__name">中村 享介</div>
        <div class="CG2-authorList__title">フロントエンド・エンジニア</div>
        <div class="CG2-authorList__numOfPosts">記事数24</div>
      </a>
    </div>

    <div class="CG2-authorList__item">...</div>
    <div class="CG2-authorList__item">...</div>
    <div class="CG2-authorList__item">...</div>

  </div>
</div>
```

*/
.CG2-authorList__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 -28px; }
  @media screen and (max-width: 767px) {
    .CG2-authorList__inner {
      display: block;
      margin: 0 -10px; } }

.CG2-authorList__item {
  box-sizing: border-box;
  position: relative;
  width: calc( 33% - 40px);
  min-height: 88px;
  padding: 20px 20px 30px 90px;
  border-top: 1px solid #DBDBDB;
  margin: 0 20px; }
  @media screen and (max-width: 979px) {
    .CG2-authorList__item {
      width: calc( 49.9% - 40px); } }
  @media screen and (max-width: 767px) {
    .CG2-authorList__item {
      width: auto;
      min-height: 104px;
      padding: 12px 12px 12px 100px;
      margin: 0; } }
  .CG2-authorList__item a {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: 20px 20px 20px 90px;
    margin: -20px -20px -20px -90px; }
    @media screen and (max-width: 767px) {
      .CG2-authorList__item a {
        padding: 12px 12px 12px 100px;
        margin: -12px -12px -12px -100px; } }

.CG2-authorList__image {
  position: absolute;
  top: 20px;
  left: 28px; }
  @media screen and (max-width: 767px) {
    .CG2-authorList__image {
      top: 12px;
      left: 0; } }
  .CG2-authorList__image img {
    display: block;
    width: 48px;
    height: 48px; }
    @media screen and (max-width: 767px) {
      .CG2-authorList__image img {
        width: 80px;
        height: 80px; } }

.CG2-authorList__name {
  font-weight: bold;
  margin-bottom: 3px; }
  @media screen and (max-width: 767px) {
    .CG2-authorList__name {
      font-size: 16px;
      margin-bottom: 6px; } }

.CG2-authorList__title {
  color: #777;
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 15px; }
  @media screen and (max-width: 767px) {
    .CG2-authorList__title {
      margin-bottom: 8px; } }

.CG2-authorList__numOfPosts {
  color: #777;
  font-size: 12px;
  line-height: 1.2; }

/* ==========================================================================
   CG2-searchFailed
   ========================================================================== */
/*
---
name: searchFailed
category:
  - Blocks/app
tag:
  - app-item
---

CG2-searchOption の CG2-searchLayout__result 内で利用する
未使用につき、不要の可能性あり

```html
<div class="CG2-searchFailed">
  <div class="CG2-searchFailed__text">結果が見つかりませんでした</div>
  <div class="CG2-searchFailed__search">
    <input>
  </div>
</div>
```

*/
.CG2-searchFailed {
  margin: 0 0 30px; }

.CG2-searchFailed__text {
  font-size: 24px;
  text-align: center;
  margin: 0 0 24px; }
  @media screen and (max-width: 767px) {
    .CG2-searchFailed__text {
      font-size: 16px;
      margin-bottom: 20px; } }

.CG2-searchFailed__search {
  border: 1px solid #DBDBDB; }
  .CG2-searchFailed__search:before {
    font-size: 16px; }
    @media screen and (max-width: 767px) {
      .CG2-searchFailed__search:before {
        font-size: 24px; } }
  .CG2-searchFailed__search input {
    color: inherit;
    font-size: 18px;
    height: auto;
    padding: 0.5em 10px 0.5em 42px; }
    .CG2-searchFailed__search input:hover, .CG2-searchFailed__search input:focus {
      background: #FFF; }

/* ==========================================================================
   CG2-settings
   ========================================================================== */
/*
---
name: settings
category:
  - Blocks/app
tag:
  - app-item
---

```html
<div class="CG2-settings">
  <div class="CG2-settings__inner">
    <div class="CG2-settings__col">
      <div class="CG2-settings__heading">設定</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldHGroup">
          <table>
            <tr>
              <th>ログインメールアドレス</th>
              <td>oyamada@pxgrid.com</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <button class="CG2-button CG2-button--setting">ログアウト</button>
      </div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldVGroup">
          <div class="CG2-settings__fieldHeader">メールマガジンを受信するメールアドレス</div>
          <div class="CG2-settings__fieldData"><input type="email" value="oyamada@pxgrid.com"></div>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <button class="CG2-button CG2-button--setting">変更</button>
      </div>
    </div>
    <div class="CG2-settings__col">
      <div class="CG2-settings__heading">購読情報</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldHGroup">
          <table>
            <tr>
              <th>決済方法</th>
              <td>PayPal</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__heading">退会</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldVGroup">
          <div class="CG2-settings__fieldHeader">退会理由を教えて下さい（1000文字以内）</div>
          <div class="CG2-settings__fieldData"><textarea maxlength="1000"></textarea></div>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <button class="CG2-button CG2-button--setting">CodeGridを退会し、購読を停止する</button>
      </div>
    </div>
  </div>
</div>
```

*/
.CG2-settings {
  margin: 0 -40px; }
  @media screen and (max-width: 1054px) {
    .CG2-settings {
      margin: 0 -20px; } }
  @media screen and (max-width: 767px) {
    .CG2-settings {
      margin: 0; } }

.CG2-settings__inner {
  border-spacing: 40px 0;
  table-layout: fixed;
  display: table;
  width: 100%; }
  @media screen and (max-width: 979px) {
    .CG2-settings__inner {
      border-spacing: 20px 0; } }
  @media screen and (max-width: 767px) {
    .CG2-settings__inner {
      display: block;
      width: auto; } }

.CG2-settings__col {
  display: table-cell;
  padding: 0 28px; }
  @media screen and (max-width: 979px) {
    .CG2-settings__col {
      padding-left: 14px;
      padding-right: 14px; } }
  @media screen and (max-width: 767px) {
    .CG2-settings__col {
      display: block;
      padding: 0; } }

.CG2-settings__heading {
  border-bottom: 1px solid #DBDBDB;
  padding: 0 28px 5px;
  margin: 50px -28px 24px; }
  @media screen and (max-width: 979px) {
    .CG2-settings__heading {
      padding-left: 14px;
      padding-right: 14px;
      margin-left: -14px;
      margin-right: -14px; } }
  @media screen and (max-width: 767px) {
    .CG2-settings__heading {
      font-size: 16px;
      margin: 30px -10px 24px;
      padding-left: 10px;
      padding-right: 10px; } }
  .CG2-settings__heading:first-child {
    margin-top: 0; }
    @media screen and (max-width: 767px) {
      .CG2-settings__heading:first-child {
        margin-top: 50px; } }
  @media screen and (max-width: 767px) {
    .CG2-settings__col:first-child .CG2-settings__heading:first-child {
      margin-top: 0; } }

.CG2-settings__field {
  margin: 24px 0; }
  @media screen and (max-width: 979px) {
    .CG2-settings__field {
      margin: 10px 0; } }

.CG2-settings__fieldHGroup table {
  border-spacing: 0; }

@media screen and (max-width: 979px) {
  .CG2-settings__fieldHGroup table, .CG2-settings__fieldHGroup tbody, .CG2-settings__fieldHGroup tr {
    *zoom: 1;
    display: block; }
    .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 {
      content: "";
      display: table; }
    .CG2-settings__fieldHGroup table:after, .CG2-settings__fieldHGroup tbody:after, .CG2-settings__fieldHGroup tr:after {
      clear: both; }
  .CG2-settings__fieldHGroup th, .CG2-settings__fieldHGroup td {
    float: left;
    clear: left; } }

.CG2-settings__fieldHGroup th {
  font-size: 10px;
  font-weight: normal;
  vertical-align: middle; }
  @media screen and (max-width: 979px) {
    .CG2-settings__fieldHGroup th {
      display: block;
      font-size: 12px; } }
  .CG2-settings__fieldHGroup th:after {
    content: ' :'; }

.CG2-settings__fieldHGroup td {
  white-space: normal;
  word-break: break-word;
  word-break: break-all;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  vertical-align: middle;
  padding-left: 10px; }
  @media screen and (max-width: 979px) {
    .CG2-settings__fieldHGroup td {
      font-size: 16px;
      padding-left: 0; } }

.CG2-settings__fieldHeader {
  font-size: 10px;
  margin-bottom: 10px; }
  @media screen and (max-width: 767px) {
    .CG2-settings__fieldHeader {
      font-size: 12px; } }

@media screen and (max-width: 767px) {
  .CG2-settings__fieldData {
    font-size: 16px; } }

.CG2-settings__fieldData input {
  font-size: inherit;
  box-sizing: border-box;
  width: 100%;
  padding: 4px; }

.CG2-settings__fieldData textarea {
  font-size: inherit;
  box-sizing: border-box;
  width: 100%;
  height: 8em;
  padding: 4px; }

.CG2-settings__buttonContainer ul {
  font-size: 0;
  list-style: none;
  padding: 0;
  margin: 0; }

.CG2-settings__buttonContainer li {
  font-size: 1rem;
  display: inline-block;
  margin: 0 8px 8px 0; }

/* ==========================================================================
   CG2-formProgress
   ========================================================================== */
/*
---
name: formProgress
category:
  - Blocks/app
tag:
  - app-item
  - app-form
---

```html
<div class="CG2-formProgress">
  <ol>
    <li>1. ログイン方法について</li>
    <li class="CG2-formProgress__item--current">2. 決済方法選択</li>
    <li>3. 登録完了</li>
  </ol>
</div>
```
*/
.CG2-formProgress {
  font-size: 20px;
  margin: 0 -40px 60px; }
  @media screen and (max-width: 1054px) {
    .CG2-formProgress {
      font-size: 16px;
      margin-left: -20px;
      margin-right: -20px; } }
  @media screen and (max-width: 767px) {
    .CG2-formProgress {
      font-size: 16px;
      margin: 10px 0 20px; } }
  .CG2-formProgress ol {
    list-style: none;
    table-layout: fixed;
    border-spacing: 40px 0;
    display: table;
    width: 100%;
    padding: 0;
    margin: 0; }
    @media screen and (max-width: 979px) {
      .CG2-formProgress ol {
        border-spacing: 20px 0; } }
    @media screen and (max-width: 767px) {
      .CG2-formProgress ol {
        display: block;
        width: auto; } }
  .CG2-formProgress li {
    opacity: 0.4;
    text-align: center;
    display: table-cell;
    padding: 0 0 10px;
    border-bottom: 1px solid #DBDBDB; }
    @media screen and (max-width: 767px) {
      .CG2-formProgress li {
        text-align: left;
        display: none;
        padding: 0 10px 5px;
        margin: 0 -10px; } }
    .CG2-formProgress li.CG2-formProgress__item--current {
      opacity: 1; }
      @media screen and (max-width: 767px) {
        .CG2-formProgress li.CG2-formProgress__item--current {
          display: block; } }

/* ==========================================================================
   CG2-signupFrom
   ========================================================================== */
/*
---
name: signupFrom
category:
  - Blocks/app
tag:
  - app-item
  - app-form
---

```html
<div class="CG2-signupFrom">

  <div class="CG2-signupFrom__lead">
    購読料は月額800円（税抜）
    <div class="CG2-signupFrom__leadSub">
      PayPal払いなら30日間無料
    </div>
  </div>

  <div class="CG2-signupFrom__information">
    <p>支払い処理中にエラーが発生しました</p>
  </div>

  <div class="CG2-signupFrom__text">
    <p>お手数ですがもう一度手続きをおこなってください。</p>
  </div>

  <div class="CG2-signupFrom__check">
    <label><input type="checkbox">利用規約に同意する</label>
  </div>

  <div class="CG2-signupFrom__buttonContainer">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">再度支払い手続きをおこなう</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>※CodeGridの購読にはGoogleアカウントが必要です。　<a href="#">Googleアカウント作成</a></p>
    </div>
  </div>

  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">PayPalで支払う</a></li>
    </ul>
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1ヶ月分</a></li>
      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1年分</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>※CodeGridの購読にはGoogleアカウントが必要です。　<a href="#">Googleアカウント作成</a></p>
    </div>
  </div>

  <div class="CG2-signupFrom__annotation">
    <p>再度エラーになる場合は以下よりお問い合わせください。</p>
  </div>
</div>
```
*/
.CG2-signupFrom__lead {
  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;
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px; }
  @media screen and (max-width: 767px) {
    .CG2-signupFrom__lead {
      font-size: 20px;
      margin-bottom: 20px; } }

.CG2-signupFrom__leadSub {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 16px; }
  @media screen and (max-width: 767px) {
    .CG2-signupFrom__leadSub {
      font-size: 12px; } }

.CG2-signupFrom__information {
  font-size: 24px;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .CG2-signupFrom__information {
      font-size: 18px; } }

.CG2-signupFrom__buttonContainer {
  width: 600px;
  margin: 30px auto 40px; }
  @media screen and (max-width: 767px) {
    .CG2-signupFrom__buttonContainer {
      width: auto;
      margin: 20px 0 30px; } }
  .CG2-signupFrom__buttonContainer ul {
    table-layout: fixed;
    border-spacing: 8px 0;
    display: table;
    list-style: none;
    padding: 0;
    margin: 10px auto; }
    @media screen and (max-width: 767px) {
      .CG2-signupFrom__buttonContainer ul {
        display: block;
        margin: 5px auto; } }
  .CG2-signupFrom__buttonContainer.CG2-signupFrom__buttonContainer--fullWidth ul {
    width: 100%; }
  .CG2-signupFrom__buttonContainer li {
    display: table-cell; }
    @media screen and (max-width: 767px) {
      .CG2-signupFrom__buttonContainer li {
        display: block;
        margin: 5px auto; } }
  .CG2-signupFrom__buttonContainer .CG2-button {
    font-size: 20px;
    text-align: center;
    display: block; }
    @media screen and (max-width: 767px) {
      .CG2-signupFrom__buttonContainer .CG2-button {
        font-size: 16px;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
        padding: 8px 20px; } }
  .CG2-signupFrom__buttonContainer .CG2-signupFrom__buttonContainerText {
    font-size: 14px;
    text-align: center;
    margin: 10px 0; }
    @media screen and (max-width: 767px) {
      .CG2-signupFrom__buttonContainer .CG2-signupFrom__buttonContainerText {
        font-size: 12px;
        text-align: left; } }

.CG2-signupFrom__text {
  font-size: 14px;
  text-align: center; }

.CG2-signupFrom__annotation {
  font-size: 12px;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .CG2-signupFrom__annotation {
      font-size: 14px; } }
  .CG2-signupFrom__annotation p {
    margin: 1em 0; }

.CG2-signupFrom__check {
  display: table;
  padding: 10px 30px;
  border-radius: 2px;
  margin: 20px auto;
  background: #EEE; }
  @media screen and (max-width: 767px) {
    .CG2-signupFrom__check {
      font-size: 16px;
      text-align: center;
      display: block; } }
  .CG2-signupFrom__check label {
    cursor: pointer;
    display: block;
    margin: -10px -30px;
    padding: 10px 30px; }
  .CG2-signupFrom__check input[type="checkbox"] {
    margin-right: 5px; }
    @media screen and (max-width: 767px) {
      .CG2-signupFrom__check input[type="checkbox"] {
        margin-right: 8px; } }

/* ==========================================================================
   CG2-paymentTable
   ========================================================================== */
/*
---
name: paymentTable
category:
  - Blocks/shared
tag:
  - app-item
  - app-form
  - www-item
---

```html
<div class="CG2-paymentTable">
  <table>
    <thead>
      <tr>
        <th></th>
        <th><img src="/build/assets2/img/logos/paypal.svg" alt="PayPal" width="100" height="25"></th>
        <th><img src="/build/assets2/img/logos/webmoney.svg" alt="WebMoney" width="120" height="30"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>購読料<br><span class="CG2-paymentTable__annotation">（税込金額）</span></th>
        <td>
          <div class="CG2-paymentTable__priceList">
            <ul>
              <li>
                <div class="CG2-paymentTable__priceLabel">月額</div>
                <div class="CG2-paymentTable__priceValue">800</div>
                <div class="CG2-paymentTable__priceUnit">円</div>
                <div class="CG2-paymentTable__priceAnnotation">（税込864円）</div>
              </li>
            </ul>
          </div>
        </td>
        <td>
          <div class="CG2-paymentTable__priceList">
            <ul>
              <li>
                <div class="CG2-paymentTable__priceLabel">月払い</div>
                <div class="CG2-paymentTable__priceValue">800</div>
                <div class="CG2-paymentTable__priceUnit">円</div>
                <div class="CG2-paymentTable__priceAnnotation">（税込864円）</div>
              </li>
              <li>
                <div class="CG2-paymentTable__priceLabel">年払い</div>
                <div class="CG2-paymentTable__priceValue">9,600</div>
                <div class="CG2-paymentTable__priceUnit">円</div>
                <div class="CG2-paymentTable__priceAnnotation">（税込10,368円）</div>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <th>購読料</th>
        <td>自動継続</td>
        <td>随時購入</td>
      </tr>
      <tr>
        <th>無料購読期間</th>
        <td>
          <div class="CG2-paymentTable__valueList">
            <ul>
              <li>
                <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
                <span class="CG2-paymentTable__value">30</span>
                <span class="CG2-paymentTable__valueUnit">日</span>
              </li>
            </ul>
          </div>
        </td>
        <td>
          <div class="CG2-paymentTable__valueList">
            <ul>
              <li>
                <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
                <span class="CG2-paymentTable__valueText">なし</span>
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
```
*/
.CG2-paymentTable table {
  margin: 40px auto; }
  @media screen and (max-width: 639px) {
    .CG2-paymentTable table {
      table-layout: fixed;
      margin-top: 20px;
      margin-bottom: 30px; } }

.CG2-paymentTable th,
.CG2-paymentTable td {
  font-weight: normal;
  vertical-align: middle;
  padding: 15px 40px;
  border: 1px solid #DBDBDB; }
  @media screen and (max-width: 639px) {
    .CG2-paymentTable th,
    .CG2-paymentTable td {
      vertical-align: top;
      width: 50%;
      padding: 20px 10px; } }

.CG2-paymentTable thead th,
.CG2-paymentTable thead td {
  border: none; }

@media screen and (max-width: 639px) {
  .CG2-paymentTable th:first-child,
  .CG2-paymentTable td:first-child {
    display: none; } }

.CG2-paymentTable__annotation {
  font-size: 12px; }

.CG2-paymentTable__priceList {
  text-align: left;
  display: inline-block; }
  .CG2-paymentTable__priceList ul {
    border-collapse: separate;
    border-spacing: 30px 0;
    display: table;
    line-height: normal;
    padding: 0;
    margin: 0 -30px; }
    @media screen and (max-width: 639px) {
      .CG2-paymentTable__priceList ul {
        display: block;
        margin: 0; } }
  .CG2-paymentTable__priceList li {
    display: table-cell;
    margin: 0; }
    @media screen and (max-width: 639px) {
      .CG2-paymentTable__priceList li {
        display: block;
        margin-bottom: 20px; }
        .CG2-paymentTable__priceList li:last-child {
          margin-bottom: 0; } }

.CG2-paymentTable__priceLabel {
  font-size: 12px; }

.CG2-paymentTable__priceValue {
  font-size: 32px;
  font-family: "Lucida Console", Monaco, monospace;
  line-height: 1;
  vertical-align: bottom;
  display: inline-block; }
  @media screen and (max-width: 639px) {
    .CG2-paymentTable__priceValue {
      font-size: 28px; } }

.CG2-paymentTable__priceUnit {
  font-size: 16px;
  vertical-align: bottom;
  display: inline-block; }

.CG2-paymentTable__priceAnnotation {
  font-size: 12px; }

.CG2-paymentTable__valueList {
  text-align: left;
  display: inline-block; }
  .CG2-paymentTable__valueList ul {
    border-collapse: separate;
    border-spacing: 30px 0;
    display: table;
    line-height: normal;
    padding: 0;
    margin: 0 -30px; }
    @media screen and (max-width: 639px) {
      .CG2-paymentTable__valueList ul {
        display: block;
        margin: 0; } }
  .CG2-paymentTable__valueList li {
    display: table-cell;
    margin: 0; }
    @media screen and (max-width: 639px) {
      .CG2-paymentTable__valueList li {
        display: block; } }

.CG2-paymentTable__valueText {
  display: inline-block; }

.CG2-paymentTable__value {
  font-size: 32px;
  font-family: "Lucida Console", Monaco, monospace;
  line-height: 1;
  vertical-align: bottom;
  display: inline-block; }
  @media screen and (max-width: 639px) {
    .CG2-paymentTable__value {
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
      font-size: 100%;
      line-height: inherit; } }

.CG2-paymentTable__valueUnit {
  font-size: 16px;
  vertical-align: bottom;
  display: inline-block; }
  @media screen and (max-width: 639px) {
    .CG2-paymentTable__valueUnit {
      font-size: 100%; } }

/* ==========================================================================
   Section comment block
   ========================================================================== */
/* Sub-section comment block
   ========================================================================== */
/* Basic comment */
/* ==========================================================================
   CG2-logo3d
   ========================================================================== */
/*
---
name: Logo_3D
category:
  - Blocks/www
tag:
  - www-item
  - www-top-item
templateItem:
  - true
---

```html
<div class="CG2-logo3d">
  <div class="CG2-logo3d__inner">
    <div class="CG2-logo3d__overlayText">
      フロントエンドに<br class="CG2--disableLargeScreen CG2--disableMiddleScreen">関わる人々のガイド
    </div>
  </div>
</div>
```

three.min.js (r72)、Logo3D.jsを読み込み、`new CGUI.Logo3D( document.querySelector( '.CG2-logo3d__inner' )`する必要がある

<script src="/static/js/three.min.js"></script>
<script src="/static/js/makePNoise1D.js"></script>
<script src="/static/js/Logo3D.js"></script>
<script>
var logo3d = new CG2.Logo3D( document.querySelector( '.CG2-logo3d__inner' ) );
</script>

*/
.CG2-logo3d {
  position: relative;
  margin: 0 auto;
  background: #000; }

.CG2-logo3d__inner {
  height: calc( 100vh - 120px);
  background: #000; }
  @media screen and (max-width: 639px) {
    .CG2-logo3d__inner {
      height: calc( 100vh - 30px); } }
  .CG2-logo3d__inner img,
  .CG2-logo3d__inner canvas {
    display: block;
    margin: 0 auto; }

.CG2-logo3d__overlayText {
  color: #FFF;
  font-size: 32px;
  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;
  text-align: center;
  cursor: pointer;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 120px;
  padding: 30px 0 0;
  background: rgba(0, 0, 0, 0.8); }
  @media screen and (max-width: 639px) {
    .CG2-logo3d__overlayText {
      font-size: 20px;
      line-height: 1.2;
      height: auto;
      padding: 10px 5px; } }
  .CG2-logo3d__overlayText:after {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 22px;
    display: block;
    text-align: center;
    margin-top: 16px; }
    @media screen and (max-width: 639px) {
      .CG2-logo3d__overlayText:after {
        font-size: 16px;
        margin-top: 6px; } }

/* ==========================================================================
   CG2-features
   ========================================================================== */
/*
---
name: features
category:
  - Blocks/www
tag:
  - www-item
---

```html
<div class="CG2-features">
  <section class="CG2-features__item">
    <h1>執筆陣は現役のフロントエンドエンジニア</h1>
    <div class="CG2-features__itemBody">
      <p>CodeGridで執筆しているのは、ピクセルグリッドのフロントエンドエンジニアたち。書籍執筆や講演の実績を持つエンジニアも多数在籍しています。だから、配信される記事では実際にプロジェクトで使った現場の実感から、本当に実務に必要な知識をお届けします。また、CodeGridは専任の編集者が編集のうえで配信しますので、記事の正確さ読みやすさにも自信があります。</p>
    </div>
  </section>
  <section class="CG2-features__item">
    <h1>基礎から最新トレンド技術まで</h1>
    <div class="CG2-features__itemBody">
      <p>忙しいと追うのを忘れがちになる新しい技術情報。エンジニア同士の会話でついていけなかったなんてことはありませんか？　CodeGridでは、最新トレンド技術もきちんと検証した上でしっかり解説します。もちろん「今さら聞けない」と思われがちな入門的な記事も配信。CodeGridを読んでいれば、基礎から最新トレンドまでフロントエンド界隈の情報をキャッチできます。</p>
    </div>
  </section>
</div>
```

*/
.CG2-features {
  counter-reset: CG2features; }
  .CG2-features:first-child {
    margin-top: -40px; }

.CG2-features__item {
  counter-increment: CG2features;
  padding: 0 120px;
  margin: 80px 0; }
  @media screen and (max-width: 767px) {
    .CG2-features__item {
      padding: 0;
      margin: 40px 0; } }
  .CG2-features__item h1 {
    color: #282828;
    font-size: 32px;
    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;
    font-weight: normal;
    text-align: center;
    margin: 0 0 30px; }
    @media screen and (max-width: 767px) {
      .CG2-features__item h1 {
        font-size: 20px;
        position: relative;
        padding: 0 40px;
        margin-bottom: 20px; }
        .CG2-features__item h1:before {
          content: counter(CG2features);
          font-family: "Lucida Console", Monaco, monospace;
          font-size: 40px;
          line-height: 0;
          position: absolute;
          top: 50%;
          left: 0;
          display: block;
          width: 40px; } }

.CG2-features__itemBody {
  position: relative; }
  .CG2-features__itemBody:before {
    content: counter(CG2features);
    line-height: 1;
    font-size: 60px;
    font-family: "Lucida Console", Monaco, monospace;
    display: block;
    position: absolute;
    top: 0;
    left: -120px; }
    @media screen and (max-width: 767px) {
      .CG2-features__itemBody:before {
        content: none; } }

/* ==========================================================================
   CG2-howYouReceive
   ========================================================================== */
/*
---
name: howYouReceive
category:
  - Blocks/www
tag:
  - www-item
  - www-top-item
---

```html
<section class="CG2-howYouReceive">
  <header class="CG2-howYouReceive__header">
    <h1>CodeGridの配信形式は、Webアプリ × メールマガジン</h1>
  </header>
  <div class="CG2-howYouReceive__list">
    <div class="CG2-howYouReceive__item">
      <div class="CG2-howYouReceive__image">
        <img src="http://img.pxgrid.net/480x180" alt="" width="480" height="180">
      </div>
      <p>フロントエンドに特化した<br>300本以上の技術記事が読めるWebアプリ。<br><a href="#">Chromeアプリもご用意しています</a></p>
    </div>
    <div class="CG2-howYouReceive__item">
      <div class="CG2-howYouReceive__image">
        <img src="http://img.pxgrid.net/480x180" alt="" width="480" height="180">
      </div>
      <p>毎週木曜日配信（月4回）。<br>最新記事が定期的に届くメールマガジン。<br><a href="#">サンプルへ</a></p>
    </div>
  </div>
</section>
```

*/
.CG2-howYouReceive__header {
  text-align: center;
  position: relative;
  margin: 0 -28px 20px; }
  @media screen and (max-width: 767px) {
    .CG2-howYouReceive__header {
      margin-left: 0;
      margin-right: 0; } }
  .CG2-howYouReceive__header:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid #000; }
    @media screen and (max-width: 767px) {
      .CG2-howYouReceive__header:before {
        content: none; } }
  .CG2-howYouReceive__header h1 {
    color: #282828;
    font-size: 24px;
    font-weight: normal;
    position: relative;
    display: inline-block;
    padding: 0 40px;
    margin: 0;
    background: #FFF; }
    @media screen and (max-width: 767px) {
      .CG2-howYouReceive__header h1 {
        font-size: 16px;
        display: block;
        padding: 0;
        background: none; } }

.CG2-howYouReceive__list {
  display: table;
  border-spacing: 2px 0; }
  @media screen and (max-width: 767px) {
    .CG2-howYouReceive__list {
      display: block; } }

.CG2-howYouReceive__item {
  font-size: 14px;
  display: table-cell; }
  @media screen and (max-width: 767px) {
    .CG2-howYouReceive__item {
      font-size: 12px;
      display: block;
      margin-bottom: 30px; } }
  .CG2-howYouReceive__item p {
    text-align: center; }

@media screen and (max-width: 767px) {
  .CG2-howYouReceive__image {
    margin: 0 -10px 20px; } }

.CG2-howYouReceive__image img {
  display: block;
  width: 100%;
  height: auto; }

/* ==========================================================================
   CG2-bookInfo [www top]
   ========================================================================== */
/*
---
name: bookInfo
category:
  - Blocks/www
tag:
  - www-item
  - www-top-item
---

```html
<section class="CG2-bookInfo">
  <h1>CodeGridが書籍になりました</h1>
  <div class="CG2-bookInfo__body">
    <div class="CG2-bookInfo__images">
      <ul>
        <li><img src="http://img.pxgrid.net/100x140" alt="" width="100 height="140""></li>
        <li><img src="http://img.pxgrid.net/100x140" alt="" width="100 height="140""></li>
      </ul>
    </div>
    <div class="CG2-bookInfo__text">
      <p>書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。</p>
      <a class="CG2-button" href="#">書籍について</a>
    </div>
  </div>
</section>
```

*/
.CG2-bookInfo h1 {
  color: #282828;
  font-size: 24px;
  font-weight: normal;
  text-align: center;
  margin: 0 0 30px; }
  @media screen and (max-width: 767px) {
    .CG2-bookInfo h1 {
      font-size: 16px;
      margin-bottom: 20px; } }

.CG2-bookInfo__body {
  display: table; }
  @media screen and (max-width: 767px) {
    .CG2-bookInfo__body {
      display: block; } }

.CG2-bookInfo__images {
  font-size: 0;
  white-space: nowrap;
  vertical-align: top;
  display: table-cell;
  padding-right: 25px; }
  @media screen and (max-width: 767px) {
    .CG2-bookInfo__images {
      display: block;
      padding: 0; } }
  .CG2-bookInfo__images ul {
    display: table;
    padding: 0;
    margin: 0; }
    @media screen and (max-width: 767px) {
      .CG2-bookInfo__images ul {
        margin: 0 auto 20px; } }
  .CG2-bookInfo__images li {
    display: table-cell;
    list-style: none;
    width: 1%;
    padding-right: 10px;
    margin: 0; }
    @media screen and (max-width: 767px) {
      .CG2-bookInfo__images li {
        width: auto;
        padding: 0 10px;
        margin: 0; } }
  .CG2-bookInfo__images img {
    display: block; }

.CG2-bookInfo__text {
  vertical-align: top;
  display: table-cell;
  font-size: 14px; }
  @media screen and (max-width: 767px) {
    .CG2-bookInfo__text {
      font-size: 12px; } }
  .CG2-bookInfo__text p {
    margin: 0 0 20px; }

/* ==========================================================================
   CG2-circulation
   ========================================================================== */
/*
---
name: circulation
category:
  - Blocks/www
tag:
  - www-item
  - www-top-item
---

```html
<div class="CG2-circulation">
  <div class="CG2-circulation__lastUpdate">（最新号 2015年5月21日発行）</div>
  <div class="CG2-circulation__dataList">
    <div class="CG2-circulation__data">
      <div class="CG2-circulation__dataLabel">発行号数</div>
      <div class="CG2-circulation__dataNumber">151</div>
      <div class="CG2-circulation__dataUnit">号</div>
    </div>
    <div class="CG2-circulation__data">
      <div class="CG2-circulation__dataLabel">特集</div>
      <div class="CG2-circulation__dataNumber">70</div>
      <div class="CG2-circulation__dataUnit">シリーズ</div>
    </div>
    <div class="CG2-circulation__data">
      <div class="CG2-circulation__dataLabel">記事数</div>
      <div class="CG2-circulation__dataNumber">321</div>
      <div class="CG2-circulation__dataUnit">本</div>
    </div>
  </div>
</div>
```
*/
@media screen and (max-width: 767px) {
  .CG2-circulation {
    display: table;
    width: 100%; } }

.CG2-circulation__lastUpdate {
  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;
  float: right; }
  @media screen and (max-width: 767px) {
    .CG2-circulation__lastUpdate {
      float: none;
      display: table-footer-group; } }

.CG2-circulation__dataList {
  display: table; }
  @media screen and (max-width: 767px) {
    .CG2-circulation__dataList {
      display: table-header-group; } }

.CG2-circulation__data {
  display: table-cell;
  font-size: 0;
  padding-left: 50px; }
  @media screen and (max-width: 767px) {
    .CG2-circulation__data {
      display: inline-block;
      padding: 0 20px 0 0; } }
  .CG2-circulation__data:first-child {
    padding-left: 0; }

.CG2-circulation__dataLabel {
  font-size: 16px;
  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; }
  @media screen and (max-width: 767px) {
    .CG2-circulation__dataLabel {
      font-size: 12px; } }

.CG2-circulation__dataNumber {
  font-size: 64px;
  font-family: "Lucida Console", Monaco, monospace;
  line-height: 1.2;
  display: inline; }
  @media screen and (max-width: 767px) {
    .CG2-circulation__dataNumber {
      font-size: 40px; } }

.CG2-circulation__dataUnit {
  font-size: 32px;
  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;
  line-height: 1.2;
  display: inline; }
  @media screen and (max-width: 767px) {
    .CG2-circulation__dataUnit {
      font-size: 20px; } }

/* ==========================================================================
   CG2-pickedup
   ========================================================================== */
/*
---
name: pickedup
category:
  - Blocks/www
tag:
  - www-item
  - www-top-item
---

```html
<section class="CG2-pickedup">
  <header class="CG2-pickedup__header">
    <h1 class="CG2-pickedup__headerHeading">人気の特集</h1>
    <div class="CG2-pickedup__headerSummary">多くの会員の皆様がお気に入りに登録した記事</div>
  </header>

  <div class="CG2-seriesList">
    CG2-seriesList を入れる
  </div>

</section>
```
*/
section.CG2-pickedup {
  margin: 80px 0; }
  @media screen and (max-width: 767px) {
    section.CG2-pickedup {
      margin-top: 40px;
      margin-bottom: 40px; } }

header.CG2-pickedup__header {
  line-height: 1.2;
  text-align: center;
  margin-bottom: 30px; }

.CG2-pickedup__headerHeading {
  font-size: 32px;
  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;
  font-weight: bold;
  margin-bottom: 15px; }
  @media screen and (max-width: 639px) {
    .CG2-pickedup__headerHeading {
      font-size: 20px; } }

.CG2-pickedup__headerSummary {
  font-size: 16px;
  display: inline-block; }
  @media screen and (max-width: 767px) {
    .CG2-pickedup__headerSummary {
      font-size: 12px; } }

/* ==========================================================================
   CG2-categoryIntro
   ========================================================================== */
/*
---
name: categoryIntro
category:
  - Blocks/www
tag:
  - www-item
  - www-top-item
---

```html
<div class="CG2-categoryIntro">
  <ul>
    <li><span class="CG2-icon-cat-elementary CG2-icon--colored"></span>入門</li>
    <li><span class="CG2-icon-cat-mastering CG2-icon--colored"></span>実践</li>
    <li><span class="CG2-icon-cat-standards CG2-icon--colored"></span>仕様解説</li>
    <li><span class="CG2-icon-cat-talk CG2-icon--colored"></span>座談会</li>
    <li><span class="CG2-icon-cat-architecture CG2-icon--colored"></span>設計</li>
    <li><span class="CG2-icon-cat-report CG2-icon--colored"></span>レポート</li>
    <li><span class="CG2-icon-cat-design CG2-icon--colored"></span>デザイン</li>
    <li><span class="CG2-icon-cat-future CG2-icon--colored"></span>未来・次世代</li>
    <li><span class="CG2-icon-cat-work-style CG2-icon--colored"></span>仕事術</li>
    <li><span class="CG2-icon-cat-survey CG2-icon--colored"></span>アンケート</li>
    <li><span class="CG2-icon-cat-interview CG2-icon--colored"></span>インタビュー</li>
    <li><span class="CG2-icon-cat-discussion CG2-icon--colored"></span>ディスカッション</li>
  </ul>
</div>
```
*/
.CG2-categoryIntro ul {
  color: #282828;
  font-size: 0;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0; }
  @media screen and (max-width: 767px) {
    .CG2-categoryIntro ul {
      margin-left: -10px;
      margin-right: -10px; } }
  .CG2-categoryIntro ul:after {
    content: '';
    display: block;
    margin-top: -30px; }

.CG2-categoryIntro li {
  font-size: 14px;
  text-align: center;
  vertical-align: top;
  display: inline-block;
  width: 130px;
  padding: 0;
  margin: 0 0 30px; }
  @media screen and (max-width: 767px) {
    .CG2-categoryIntro li {
      font-size: 10px;
      width: 25%; } }

.CG2-categoryIntro span[class*="CG2-icon-cat"] {
  font-size: 80px;
  display: block;
  margin-bottom: 10px;
  position: static; }
  @media screen and (max-width: 767px) {
    .CG2-categoryIntro span[class*="CG2-icon-cat"] {
      font-size: 50px; } }
  .CG2-categoryIntro span[class*="CG2-icon-cat"]:before {
    display: block; }

/* ==========================================================================
   CG2-customerQuotes
   ========================================================================== */
/*
---
name: customerQuotes
category:
  - Blocks/www
tag:
  - www-item
  - www-top-item
---

```html
<section class="CG2-customerQuotes">
  <header class="CG2-customerQuotes__header">
    <h1>CodeGrid関連ツィート</h1>
    <div class="CG2-customerQuotes__headerSub">
      <a href="https://twitter.com/codegrid">@CodeGridで最新情報を配信しています <span class="CG2-icon-twitter"></span></a>
    </div>
  </header>
  <div class="CG2-customerQuotes__body">
    <div class="CG2-customerQuotes__list">
      <ul>
        <li>
          <blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
        </li>
        <li>
          <blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
        </li>
        <li>
          <blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
        </li>
      </ul>
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
    <div class="CG2-customerQuotes__timeline">
      <a class="twitter-timeline" href="https://twitter.com/hashtag/codegrid" data-widget-id="628812249822408705">#codegrid のツイート</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");</script>
    </div>
  </div>
</section>
```

JSでtwitterのiframe内にstyleを挿入してmax-widthを打ち消す大きさを調整する必要がある

<script>
window.addEventListener( 'load', function () {
  
  var i,l;
  var css = [
    '.EmbeddedTweet, .timeline {',
      'box-sizing: border-box;',
      'max-width: none !important;',
      'width: 100% !important;',
    '}',
    '.sandboxroot.env-narrow p{',
      'font-size: 12px;',
    '}'
  ].join( '' );
  var iframe = document.querySelectorAll( 'iframe[id^=twitter-widget-' );
  
  for ( i = 0|0, l = iframe.length|0; i < l; i = ( i + 1 )|0 ) {

    var doc  = iframe[ i ].contentWindow.document;
    var head  = doc.querySelector( 'head' );
    var style = doc.createElement( 'style' );
    style.innerText = css;
    head.appendChild( style );
    
  }

} );
</script>

<pre><code>window.addEventListener( 'load', function () {

  var i,l;
  var css = [
    '.EmbeddedTweet, .timeline {',
      'box-sizing: border-box;',
      'max-width: none !important;',
      'width: 100% !important;',
    '}',
    '.sandboxroot.env-narrow p{',
      'font-size: 12px;',
    '}'
  ].join( '' );
  var iframe = document.querySelectorAll( 'iframe[id^=twitter-widget-' );
  
  for ( i = 0|0, l = iframe.length|0; i &lt; l; i = ( i + 1 )|0 ) {

    var doc  = iframe[ i ].contentWindow.document;
    var head  = doc.querySelector( 'head' );
    var style = doc.createElement( 'style' );
    style.innerText = css;
    head.appendChild( style );
    
  }

} );</code></pre>
*/
section.CG2-customerQuotes {
  *zoom: 1;
  padding-top: 20px;
  margin: 0 -10px; }
  section.CG2-customerQuotes:before, section.CG2-customerQuotes:after {
    content: "";
    display: table; }
  section.CG2-customerQuotes:after {
    clear: both; }

header.CG2-customerQuotes__header {
  display: table;
  width: calc( 100% + 46px);
  border-bottom: 1px solid #5c5c5c;
  margin: 0 -28px 30px; }
  @media screen and (max-width: 767px) {
    header.CG2-customerQuotes__header {
      display: block;
      width: auto;
      margin: 0 0 10px;
      padding: 0 10px 5px; } }
  header.CG2-customerQuotes__header h1 {
    font-size: 32px;
    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;
    font-weight: normal;
    line-height: 1.2;
    vertical-align: middle;
    display: table-cell;
    padding: 0 0 30px 28px;
    margin: 0; }
    @media screen and (max-width: 767px) {
      header.CG2-customerQuotes__header h1 {
        font-size: 20px;
        display: block;
        padding: 0; } }

.CG2-customerQuotes__headerSub {
  font-size: 14px;
  text-align: right;
  vertical-align: middle;
  display: table-cell;
  padding: 0 28px 30px 0; }
  @media screen and (max-width: 767px) {
    .CG2-customerQuotes__headerSub {
      font-size: 12px;
      display: block;
      padding: 0;
      display: none; } }
  .CG2-customerQuotes__headerSub a {
    color: inherit; }

.CG2-customerQuotes__body {
  display: table;
  width: 100%; }
  @media screen and (max-width: 767px) {
    .CG2-customerQuotes__body {
      display: block;
      width: auto; } }

.CG2-customerQuotes__list {
  vertical-align: top;
  box-sizing: border-box;
  display: table-cell;
  width: 60%;
  padding-right: 20px; }
  @media screen and (max-width: 767px) {
    .CG2-customerQuotes__list {
      display: block;
      width: auto;
      padding-right: 0; } }
  .CG2-customerQuotes__list ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .CG2-customerQuotes__list li {
    margin: 0 0 20px; }
    @media screen and (max-width: 767px) {
      .CG2-customerQuotes__list li {
        margin-bottom: 10px; } }
  .CG2-customerQuotes__list iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important; }

.CG2-customerQuotes__timeline {
  vertical-align: top;
  box-sizing: border-box;
  display: table-cell;
  width: 40%;
  padding-left: 20px; }
  @media screen and (max-width: 767px) {
    .CG2-customerQuotes__timeline {
      display: block;
      width: auto;
      padding-left: 0; } }
  .CG2-customerQuotes__timeline iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important; }
    @media screen and (max-width: 767px) {
      .CG2-customerQuotes__timeline iframe {
        height: 300px !important; } }

/* ==========================================================================
   CG2-bannerHeader
   ========================================================================== */
/*
---
name: bannerHeader
category:
  - Blocks/www
tag:
  - www-item
templateItem:
  - true
---

```html
<div class="CG2-bannerHeader">
  <div class="CG2-bannerHeader__inner">
    <h1>チームのフロントエンド開発力を<br>根底からアップしよう</h1>
    <p>団体購読とは、購読管理者の方に複数の購読者を取りまとめていただき、毎月、購読者全員の購読料を一括した請求書を発行し、まとめてお支払いいただくシステムです。</p>
  </div>
  <div class="CG2-bannerHeader__bg" style="background-image: url( '/build/img/_01.jpg' )"></div>
</div>
```

*/
.CG2-bannerHeader {
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #000;
  color: #FFF;
  padding: 130px 0;
  background-position: 50% 50%;
  background-size: cover; }
  @media screen and (max-width: 767px) {
    .CG2-bannerHeader {
      padding: 60px 15px; } }

.CG2-bannerHeader__inner {
  max-width: 740px;
  margin: 0 auto; }
  .CG2-bannerHeader__inner h1 {
    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;
    font-size: 32px;
    font-weight: normal;
    text-align: center;
    margin: 0 0 30px; }
  .CG2-bannerHeader__inner p {
    line-height: 2;
    text-align: center;
    margin: 20px 0; }
  .CG2-bannerHeader__inner > *:last-child {
    margin-bottom: 0; }
  @media screen and (max-width: 767px) {
    .CG2-bannerHeader__inner {
      max-width: none; }
      .CG2-bannerHeader__inner h1 {
        font-size: 20px;
        margin-bottom: 20px; }
      .CG2-bannerHeader__inner p {
        font-size: 12px; } }

.CG2-bannerHeader__bg {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transform: scale(1.2, 1.2);
      -ms-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
  opacity: .64; }

/* ==========================================================================
   CG2-form
   ========================================================================== */
/*
---
name: form
category:
  - Blocks/www
tag:
  - www-item
---

```html
<section class="CG2-form">
  <form>
    <div class="CG2-form__header">
      <h1>団体購読のお申込み</h1>
      <p>購読者お一人につき、月額800円（税抜）<br>月の途中で購読者の登録・削除があった場合は日割り計算されます。</p>
    </div>
    <p class="CG2--alignCenter">購読者お一人につき、月額800円（税抜）<br>月の途中で購読者の登録・削除があった場合は日割り計算されます。</p>
    <div class="CG2-form__table">
      <table>
        <col width="30%">
        <col width="70%">
        <tr>
          <th>
            会社名・団体名
            <span class="CG2-form__required">（必須）</span>
          </th>
          <td>
            <input type="text" placeholder="例）株式会社 ピクセルグリッド">
          </td>
        </tr>
        <tr>
          <th>
            管理者のメールアドレス
            <span class="CG2-form__required">（必須）</span>
          </th>
          <td>
            <input type="text" placeholder="例）codegrid@pxgrid.com">
          </td>
        </tr>
      </table>
    </div>
    <p><button class="CG2-button CG2-button--primary CG2-button--large">送信</button></p>
    <div class="CG2-form__legal">
      Powered by Google ドキュメント | 不正行為の報告 - 利用規約 - 追加規約
    </div>
    <div class="CG2-form__notice">
      もし送信できない場合はこちらをお試しください
    </div>
  </form>
</section>
```

*/
section.CG2-form {
  padding: 50px;
  margin: 80px -28px;
  background: #EEE; }
  section.CG2-form form {
    margin: 0; }
  @media screen and (max-width: 767px) {
    section.CG2-form {
      padding: 25px 20px;
      margin: 40px -20px; } }

.CG2-form__header {
  margin: 0 0 30px; }
  .CG2-form__header h1 {
    font-size: 32px;
    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;
    font-weight: normal;
    line-height: 1.6;
    text-align: center;
    margin: 0 0 20px; }
  .CG2-form__header p {
    text-align: center;
    margin: 16px 0 0; }
  @media screen and (max-width: 639px) {
    .CG2-form__header {
      margin-bottom: 16px; }
      .CG2-form__header h1 {
        font-size: 20px;
        margin-bottom: 16px; }
      .CG2-form__header p {
        text-align: left; } }

.CG2-form__table table {
  width: 100%; }

.CG2-form__table th {
  text-align: left;
  vertical-align: middle;
  padding: 8px; }

.CG2-form__table td {
  padding: 8px; }

.CG2-form__table input[type="text"],
.CG2-form__table input[type="url"],
.CG2-form__table input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 3px; }

@media screen and (max-width: 639px) {
  .CG2-form__table table, .CG2-form__table tbody, .CG2-form__table tr {
    *zoom: 1;
    display: block; }
    .CG2-form__table table:before, .CG2-form__table table:after, .CG2-form__table tbody:before, .CG2-form__table tbody:after, .CG2-form__table tr:before, .CG2-form__table tr:after {
      content: "";
      display: table; }
    .CG2-form__table table:after, .CG2-form__table tbody:after, .CG2-form__table tr:after {
      clear: both; }
  .CG2-form__table th, .CG2-form__table td {
    float: left;
    clear: left; }
  .CG2-form__table th,
  .CG2-form__table td {
    padding: 0;
    width: 100%; }
  .CG2-form__table th {
    margin-bottom: 6px; }
  .CG2-form__table td {
    margin-bottom: 10px; }
  .CG2-form__table input[type="text"],
  .CG2-form__table input[type="url"],
  .CG2-form__table input[type="email"] {
    font-size: 16px; } }

span.CG2-form__required {
  color: #ff0000;
  font-size: 12px;
  font-weight: normal;
  line-height: 22px;
  margin-left: 10px;
  float: right; }
  @media screen and (max-width: 639px) {
    span.CG2-form__required {
      float: none;
      margin-left: 0; } }

.CG2-form__legal {
  font-size: 12px;
  text-align: center;
  margin: 15px 0; }
  .CG2-form__legal a {
    color: inherit; }
  @media screen and (max-width: 639px) {
    .CG2-form__legal {
      font-size: 8px;
      text-align: left;
      margin: 5px; } }

.CG2-form__notice {
  font-size: 12px;
  text-align: center;
  margin: 15px 0; }
  @media screen and (max-width: 639px) {
    .CG2-form__notice {
      font-size: 8px;
      text-align: left;
      margin: 5px; } }

/* ==========================================================================
   CG2-flowExplanation
   ========================================================================== */
/*
---
name: flowExplanation
category:
  - Blocks/www
tag:
  - www-item
---

```html
<div class="CG2-flowExplanation">
  <section class="CG2-flowExplanation__item">
    <div class="CG2-flowExplanation__image">
      <img src="http://img.pxgrid.net/320x180" alt="" width="320" height="180">
    </div>
    <div class="CG2-flowExplanation__text">
      <h1>お申込頂くと、管理者様へ団体管理画面へのリンクが送信されます</h1>
      <p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>
    </div>
  </section>

  <section class="CG2-flowExplanation__item">
    <div class="CG2-flowExplanation__image">
      <img src="http://img.pxgrid.net/320x180" alt="" width="320" height="180">
    </div>
    <div class="CG2-flowExplanation__text">
      <h1>管理画面にて、パスワードの設定をお願いします</h1>
      <p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>
    </div>
  </section>
</div>
```

*/
.CG2-flowExplanation {
  margin: 40px 0;
  counter-reset: CG2flowExplanation; }
  @media screen and (max-width: 639px) {
    .CG2-flowExplanation {
      margin: 30px 0; } }

section.CG2-flowExplanation__item {
  counter-increment: CG2flowExplanation;
  display: table;
  width: 100%;
  margin: 50px 0; }
  @media screen and (max-width: 639px) {
    section.CG2-flowExplanation__item {
      display: block;
      margin: 30px 0; } }

.CG2-flowExplanation__image {
  vertical-align: top;
  display: table-cell; }
  .CG2-flowExplanation__image img {
    display: block;
    border: 1px solid #DBDBDB; }
  @media screen and (max-width: 767px) {
    .CG2-flowExplanation__image {
      width: 40%; }
      .CG2-flowExplanation__image img {
        max-width: 100%;
        height: auto; } }
  @media screen and (max-width: 639px) {
    .CG2-flowExplanation__image {
      display: block;
      width: auto;
      margin: 0 0 10px; }
      .CG2-flowExplanation__image img {
        margin: 0 auto; } }

.CG2-flowExplanation__text {
  vertical-align: top;
  display: table-cell;
  padding-left: 66px; }
  .CG2-flowExplanation__text h1 {
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 20px; }
    .CG2-flowExplanation__text h1:before {
      content: counter(CG2flowExplanation);
      font-size: 32px;
      font-family: "Lucida Console", Monaco, monospace;
      line-height: 24px;
      vertical-align: middle;
      display: inline-block;
      width: 1.2em;
      margin-left: -1.2em; }
  @media screen and (max-width: 639px) {
    .CG2-flowExplanation__text {
      padding-left: 35px; }
      .CG2-flowExplanation__text h1 {
        font-size: 12px;
        font-weight: bold;
        margin: 0 0 10px; }
        .CG2-flowExplanation__text h1:before {
          font-size: 24px;
          font-weight: normal;
          line-height: 12px;
          width: 26px;
          margin-left: -26px; }
      .CG2-flowExplanation__text p {
        font-size: 12px; } }

/* ==========================================================================
   CG2-faq
   ========================================================================== */
/*
---
name: faq
category:
  - Blocks/www
tag:
  - www-item
---

```html
<div class="CG2-faq">
  <div class="CG2-faq__question">
    PayPalアカウントやWebMoneyのほかに、銀行振込など別の支払い方法はありますか？
  </div>
  <div class="CG2-faq__answer">
    <p>個人で購読される方は、PayPalアカウント、もしくはWebMoneyのお支払いのみ受け付けております。団体で購読される方は、請求書払いで銀行振込ができます。</p>
    <aside class="CG2-faq__eg">
      <h1>未払い購読料の扱い（例）</h1>
      <ul>
        <li>前月未払い : 864円</li>
        <li>今月請求 : 1,728円（前回未払い864円＋今回購読料864円）</li>
      </ul>
    </aside>
  </div>
</div>
```

*/
.CG2-faq {
  font-size: 16px;
  margin: 40px 0;
  padding: 0 0 0 50px; }
  @media screen and (max-width: 767px) {
    .CG2-faq {
      font-size: 12px;
      margin: 20px -10px;
      padding-left: 38px; } }

.CG2-faq__question {
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  min-height: 24px;
  padding: 8px 0; }
  @media screen and (max-width: 767px) {
    .CG2-faq__question {
      min-height: 16px;
      padding-top: 6px;
      padding-bottom: 6px; } }
  .CG2-faq__question:before {
    content: "";
    font-family: "codegrid-icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #282828;
    font-size: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: -50px; }
    @media screen and (max-width: 767px) {
      .CG2-faq__question:before {
        font-size: 28px;
        line-height: 28px;
        left: -38px; } }

.CG2-faq__answer p {
  margin-top: 0;
  margin-bottom: 1em; }

.CG2-faq__answer aside.CG2-faq__eg {
  padding: 20px 20px 20px 50px;
  margin: 20px 0 0 -50px;
  margin-left: -50px;
  background: #EEE; }
  @media screen and (max-width: 767px) {
    .CG2-faq__answer aside.CG2-faq__eg {
      padding: 10px 10px 10px 38px;
      margin-left: -38px; } }
  .CG2-faq__answer aside.CG2-faq__eg h1 {
    font-size: 100%;
    font-weight: bold;
    margin: 0; }
  .CG2-faq__answer aside.CG2-faq__eg ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 30px; }

/* ==========================================================================
   CG2-additionalInfoLink
   ========================================================================== */
/*
---
name: additionalInfoLink
category:
  - Blocks/www
tag:
  - www-item
---

```html
<div class="CG2-additionalInfoLink">
  <div class="CG2-additionalInfoLink__text">
    団体購読では、請求書払いにも対応しています<span class="CG2-additionalInfoLink__sub">小さい文字</span>
  </div>
  <div class="CG2-additionalInfoLink__link"><a class="CG2-button" href="#">団体購読について</a></div>
</div>
```

*/
.CG2-additionalInfoLink {
  display: table;
  width: 100%; }
  .CG2-additionalInfoLink + .CG2-additionalInfoLink {
    margin-top: 30px; }
  @media screen and (max-width: 639px) {
    .CG2-additionalInfoLink {
      display: block;
      width: auto; } }

.CG2-additionalInfoLink__text {
  font-size: 24px;
  line-height: 1.2;
  vertical-align: middle;
  display: table-cell; }
  @media screen and (max-width: 639px) {
    .CG2-additionalInfoLink__text {
      font-size: 16px;
      text-align: center;
      display: block; } }

.CG2-additionalInfoLink__sub {
  font-size: 14px; }

.CG2-additionalInfoLink__link {
  text-align: right;
  vertical-align: middle;
  display: table-cell; }
  @media screen and (max-width: 639px) {
    .CG2-additionalInfoLink__link {
      text-align: center;
      display: block;
      margin: 1em 0 0; }
      .CG2-additionalInfoLink__link .CG2-button {
        font-size: 18px;
        display: block;
        padding: .3em; } }

/* ==========================================================================
   CG2-publication
   ========================================================================== */
/*
---
name: publication
category:
  - Blocks/www
tag:
  - www-item
---

```html
<section class="CG2-publication">
  <div class="CG2-publication__image">
    <img src="http://img.pxgrid.net/206x290" alt="" width="206" height="290">
  </div>
  <div class="CG2-publication__body">
    <div class="CG2-publication__heading">
      <h1>Web制作者のためのGit入門</h1>
    </div>
    <div class="CG2-publication__headingSub">
      大杉 充 (著), 外村 和仁 (著), CodeGrid (編集)  2014/6/28
    </div>
    <p>本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。</p>
    <div class="CG2-publication__buttonContainer">
      <ul>
        <li><a class="CG2-button" href="#">Amazonで購入</a></li>
      </ul>
    </div>
  </div>
</section>
```

*/
section.CG2-publication {
  display: table;
  width: 100%;
  margin: 40px 0; }

.CG2-publication__image {
  vertical-align: top;
  display: table-cell;
  padding-right: 30px;
  max-width: 206px;
  width: 20%; }
  @media screen and (max-width: 767px) {
    .CG2-publication__image {
      padding-right: 15px; } }
  .CG2-publication__image img {
    display: block;
    width: 100%;
    height: auto; }

.CG2-publication__body {
  font-size: 16px;
  vertical-align: top;
  display: table-cell; }
  @media screen and (max-width: 767px) {
    .CG2-publication__body {
      font-size: 12px; } }

.CG2-publication__heading {
  margin: 0 0 25px; }
  @media screen and (max-width: 767px) {
    .CG2-publication__heading {
      margin-bottom: 15px; } }
  .CG2-publication__heading h1 {
    font-size: 24px;
    font-weight: normal;
    margin: 0; }
    @media screen and (max-width: 767px) {
      .CG2-publication__heading h1 {
        font-size: 16px; } }

.CG2-publication__headingSub {
  font-size: 14px;
  margin: -20px 0 25px; }
  @media screen and (max-width: 767px) {
    .CG2-publication__headingSub {
      font-size: 10px;
      margin-top: -15px;
      margin-bottom: 15px; } }

.CG2-publication__buttonContainer {
  margin-top: 30px; }
  @media screen and (max-width: 639px) {
    .CG2-publication__buttonContainer {
      margin-top: 10px; } }
  .CG2-publication__buttonContainer ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .CG2-publication__buttonContainer li {
    display: inline-block;
    margin: 0 20px 0 0; }
    @media screen and (max-width: 639px) {
      .CG2-publication__buttonContainer li {
        display: block;
        margin-bottom: 10px; } }

/* ==========================================================================
   CG2-term
   ========================================================================== */
/*
---
name: term
category:
  - Blocks/www
tag:
  - www-item
---

```html
<div class="CG2-term">
  <dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
  </dl>
</div>
```

*/
.CG2-term dt {
  font-weight: bold; }

.CG2-term dd {
  margin: 0 0 15px; }

/* ==========================================================================
   CG2-lastUpdate
   ========================================================================== */
/*
---
name: lastUpdate
category:
  - Blocks/www
tag:
  - www-item
---

```html
<div class="CG2-lastUpdate">Last Update: 20xx-08-01</div>
```

*/
.CG2-lastUpdate {
  margin-top: 80px; }
  @media screen and (max-width: 767px) {
    .CG2-lastUpdate {
      margin-top: 40px; } }
