@charset "UTF-8";
/* CodeGrid-UI core */
/*! 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; }

/* レイアウトのためのゼロ幅フォント
   ========================================================================== */
@font-face {
  font-family: 'zeroWidth';
  src: url("../font/zero-width.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

/* mqpackerが意図した順番にソースを並び替えるためのおまじない
   ========================================================================== */
@media screen and (max-width: 979px) {
  _x {
    _x: 0; } }

@media screen and (max-width: 767px) {
  _x {
    _x: 0; } }

@media screen and (max-width: 639px) {
  _x {
    _x: 0; } }

/* 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
   ========================================================================== */
::selection {
  background-color: #d7ef8f;
  text-shadow: none; }

html {
  color: #242424;
  font-family: Helvetica, "ヒラギノ角ゴ 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: url("data:image/gif;base64,R0lGODlhAQABAPAAABkZGQAAACwAAAAAAQABAAACAkQBADs="); }
  @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;
  transition: color .2s; }

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

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

/* jump
   ========================================================================== */
@keyframes anim-jump {
  0% {
    transform: translateY(0) scaleY(1); }
  20% {
    transform: translateY(2px) scaleY(0.6); }
  60% {
    transform: translateY(-5px) scaleY(1.1); }
  100% {
    transform: translateY(0) scaleY(1); } }

/* scale
   ========================================================================== */
@keyframes anim-scaleup {
  0% {
    transform: none; }
  40% {
    transform: scale(1.05); }
  100% {
    transform: none; } }

/* アイコンの基礎スタイル
   ========================================================================== */
[class^="CG2-icon-"], [class*=" CG2-icon-"], .CG2-pageHeader__searchInner:before, .CG2-drawerBody__searchInner:before, .CG2-pageHeader__userOpener:after, .CG2-pageHeader__opener:after, .CG2-pageFooter__wwwNav a:before, .CG2-pageFooter__appNavHeading a:before, .CG2-pageFooter__appNavSearchInner:before, .CG2-pageFooter__appNavList a:before, .CG2-drawerBody__nav a:before, .CG2-seriesList__itemMore a:after {
  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-face {
  font-family: "codegrid-icon";
  src: url("../font/codegrid-icon.woff2") format("woff2"), url("../font/codegrid-icon.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

/*
---
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>
```

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

exclamation-triangle
```html
<div style="font-size:32px;">
  <span class="CG2-icon-exclamation-triangle"></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>
```

*/
[class^="CG2-icon-"], [class*=" CG2-icon-"] {
  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-exclamation-circle:before {
  content: "\"; }

.CG2-icon-exclamation-triangle: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 {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%; }
  .CG2-pageHeader__searchInner:before, .CG2-drawerBody__searchInner:before {
    content: "";
    color: #777;
    font-size: 12px;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 10px; }
  .CG2-pageHeader__searchInner form, .CG2-drawerBody__searchInner form {
    height: 100%; }
  .CG2-pageHeader__searchInner input, .CG2-drawerBody__searchInner 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;
    transition: all .2s; }
    .CG2-pageHeader__searchInner input:hover, .CG2-drawerBody__searchInner input:hover, .CG2-pageHeader__searchInner input:focus, .CG2-drawerBody__searchInner input:focus {
      background: #303030; }

.CG2-seriesList__author {
  display: table;
  margin-bottom: 1px; }

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

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

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

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

.CG2-seriesList__authorPicList img {
  display: block; }
  @media screen and (max-width: 767px) {
    .CG2-seriesList__authorPicList img {
      width: 28px;
      height: 28px; } }

/* ==========================================================================
   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__appNav">
        <ul>
          <li><a href="#">最新記事一覧</a></li>
          <li><a href="#">お気に入り一覧</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__search">
        <div class="CG2-pageHeader__searchInner">
          <form>
            <input type="search">
          </form>
        </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">
        <img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24">
      </div>
      <div class="CG2-pageHeader__appNav">
        <ul>
          <li><a href="#">最新記事一覧</a></li>
          <li><a href="#">お気に入り一覧</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__search">
        <div class="CG2-pageHeader__searchInner">
          <form>
            <input type="search">
          </form>
        </div>
      </div>
      <div class="CG2-pageHeader__user">
        <div class="CG2-pageHeader__userHeader">
          <div class="CG2-pageHeader__userName">gurio@pxgrid.example</div>
          <div class="CG2-pageHeader__userAvatar">
            <img src="__dummy__112x112" alt="" width="56" height="56">
          </div>
          <div class="CG2-pageHeader__userOpener"></div>
        </div>
        <div class="CG2-pageHeader__userMenu">
          <div class="CG2-pageHeader__userMenuInner">
            <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>
    </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>
```

*/
@keyframes wf1-pageHeader-onmounted {
  0% {
    overflow: hidden;
    height: 0; }
  99% {
    overflow: hidden;
    height: 0; }
  100% {
    overflow: visible;
    height: auto; } }

@keyframes wf1-pageHeader-elastic-in {
  0% {
    height: 0;
    opacity: 0;
    transform: scale(0); }
  1% {
    height: auto; }
  60% {
    transform: scale(1.1); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes wf1-pageHeader-elastic-out {
  0% {
    opacity: 1;
    visibility: visible;
    height: auto;
    transform: scale(1); }
  40% {
    transform: scale(1.1); }
  99% {
    visibility: visible;
    height: auto; }
  100% {
    opacity: 0;
    visibility: hidden;
    height: 0;
    transform: scale(0); } }

.CG2-pageHeader {
  position: fixed;
  z-index: 20;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: rgba(0, 0, 0, 0.8);
  transform: translate3d(0, 0, 0); }
  .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;
      transition: transform .4s; }
      html.js-drawer--show .CG2-pageHeader {
        transform: translateX(-100%) translateX(50px); } }
  @media print {
    .CG2-pageHeader {
      position: relative;
      height: 0;
      border-bottom: 56px solid #191919; } }

.CG2-pageHeader__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1100px;
  height: 100%;
  padding: 0 28px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .CG2-pageHeader__inner {
      padding: 0 28px 0 0; } }

.CG2-pageHeader__logo {
  margin: 0 30px 0 0; }
  .CG2-pageHeader__logo img {
    display: block; }
  @media screen and (max-width: 767px) {
    .CG2-pageHeader__logo img {
      width: 90px;
      height: auto; } }

.CG2-pageHeader__nav {
  text-align: center;
  margin: 0 auto; }
  @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; } }

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

.CG2-pageHeader__appNav ul {
  font-size: 0;
  list-style: none;
  padding: 0;
  margin: 0; }
  .CG2-pageHeader__appNav ul:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 56px;
    vertical-align: middle; }
    @media screen and (max-width: 1200px) {
      .CG2-pageHeader__appNav ul:before {
        content: none; } }

.CG2-pageHeader__appNav li {
  font-size: .875rem;
  vertical-align: middle;
  display: inline-block;
  padding: 0;
  margin: 0 10px; }
  @media screen and (max-width: 1200px) {
    .CG2-pageHeader__appNav li {
      font-size: .75rem; } }

.CG2-pageHeader__appNav a {
  color: #999;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  margin: -10px; }
  .CG2-pageHeader__appNav a:hover {
    color: #fff; }

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

.CG2-pageHeader__search {
  width: 280px;
  height: 32px;
  margin: 0 0 0 auto;
  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 {
  line-height: 22px;
  height: 30px;
  padding: 4px 10px 4px 30px; }
  .CG2-pageHeader__searchInner input:hover, .CG2-pageHeader__searchInner input:focus {
    background: #303030; }

.CG2-pageHeader__buttons {
  margin: 0 0 0 30px; }
  @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: relative;
  margin: 0 0 0 30px; }
  @media screen and (max-width: 979px) {
    .CG2-pageHeader__user {
      margin-left: 20px; } }
  @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;
  padding: 0 6px; }
  .CG2-pageHeader__userOpener:after {
    content: "";
    position: relative;
    transition: transform 0.4s cubic-bezier(0.3, 2, 0.6, 1); }
    .CG2-pageHeader__userHeader:hover .CG2-pageHeader__userOpener:after,
    .CG2-pageHeader__userHeader:focus .CG2-pageHeader__userOpener:after {
      color: #fff;
      transform: translateY(2px);
      transition-duration: .4s; }

.CG2-pageHeader__userMenu {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 0;
  margin-top: 2px;
  animation-name: wf1-pageHeader-onmounted;
  animation-fill-mode: forwards;
  animation-duration: .3s; }
  .CG2-pageHeader__userMenu.CG2-pageHeader__userMenu--show {
    overflow: visible;
    height: auto; }
    .CG2-pageHeader__userMenu.CG2-pageHeader__userMenu--show .CG2-pageHeader__userMenuInner {
      visibility: visible;
      animation-name: wf1-pageHeader-elastic-in; }

.CG2-pageHeader__userMenuInner {
  visibility: hidden;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  transform-origin: 150px 0;
  animation-name: wf1-pageHeader-elastic-out;
  animation-duration: .3s;
  animation-fill-mode: forwards; }
  .CG2-pageHeader__userMenuInner:before {
    content: "";
    position: absolute;
    top: -14px;
    right: 38px;
    display: block;
    border: 7px solid transparent;
    border-bottom-color: #fff; }
  .CG2-pageHeader__userMenuInner ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .CG2-pageHeader__userMenuInner li {
    margin: 0; }
    .CG2-pageHeader__userMenuInner 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: "";
      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="__dummy__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">
            <form>
              <input type="search">
            </form>
          </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-architecture"></span>設計</a></li>
          <li><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>
          <li><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>
          <li><a href="#"><span class="CG2-icon-cat-mastering"></span>実践</a></li>
          <li><a href="#"><span class="CG2-icon-cat-elementary"></span>入門</a></li>
          <li><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>
          <li><a href="#"><span class="CG2-icon-cat-work-style"></span>仕事術</a></li>
          <li><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>
          <li><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>
          <li><a href="#"><span class="CG2-icon-cat-discussion"></span>ディスカッション</a></li>
          <li><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>
          <li><a href="#"><span class="CG2-icon-cat-survey"></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="PixelGrid" 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="PixelGrid" 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;
    transition: all .2s; }
    .CG2-pageFooter a:hover {
      color: #fff; }

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

.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 {
      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: "";
  margin: 0 .4em .1em 0; }

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

.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: "";
    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: "";
    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: 0 0 12px; }
  .CG2-pageFooter__appNavList a:before {
    content: "";
    margin: 0 .4em .1em 0; }

.CG2-pageFooter__appNavCategory {
  float: left;
  width: 54.99%; }
  .CG2-pageFooter__appNavCategory ul {
    column-count: 2;
    list-style: none;
    margin: 0;
    padding: 0; }
  .CG2-pageFooter__appNavCategory li {
    margin: 0 0 12px; }
  .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: 80px;
    margin: -5px 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="__dummy__112x112" alt="" width="56" height="56">
            </div>
            <div class="CG2-drawerBody__userName">gurio@pxgrid.example</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">
              <form>
                <input type="search">
              </form>
            </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;
      pointer-events: none; }
      html.js-drawer--show .CG2-drawer {
        pointer-events: auto; } }

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

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

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

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

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

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

.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 rgba(0, 0, 0, 0);
  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: rgba(0, 0, 0, 0); }

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

@keyframes bgOut {
  0% {
    z-index: 18; }
  99% {
    z-index: 18; }
  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-all;
  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-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-drawerBody__searchInner input {
  height: 40px; }

/* ==========================================================================
   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; } }

/* ==========================================================================
   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
`button`の時は`disabled`属性を明示、
それ以外(`a`など)の場合は、`aria-disabled="true"`を明示
```html
<p>
  <a class="CG2-button" aria-disabled="true" href="#">button</a>
</p>
<p>
  <a class="CG2-button CG2-button--primary" aria-disabled="true" href="#">primary button</a>
</p>
<p>
  <a class="CG2-button CG2-button--action" aria-disabled="true" href="#">action button</a>
</p>
<p>
  <a class="CG2-button CG2-button--setting" aria-disabled="true" 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);
  transition: all .2s; }
  .CG2-button:hover:not([disabled]):not([aria-disabled="true"]):not(.CG2-button--progress), .CG2-button:focus:not([disabled]):not([aria-disabled="true"]):not(.CG2-button--progress) {
    box-shadow: 0 0 3px #777;
    background: #919191;
    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([disabled]):not([aria-disabled="true"]), .CG2-button.CG2-button--primary:focus:not([disabled]):not([aria-disabled="true"]) {
      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([disabled]):not([aria-disabled="true"]), .CG2-button.CG2-button--action:focus:not([disabled]):not([aria-disabled="true"]) {
      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([disabled]):not([aria-disabled="true"]), .CG2-button.CG2-button--setting:focus:not([disabled]):not([aria-disabled="true"]) {
      box-shadow: 0 0 3px #777;
      background: #919191; }
  .CG2-button[disabled], .CG2-button[aria-disabled="true"] {
    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: '';
      display: block;
      position: absolute;
      top: 5px;
      right: 5px;
      bottom: 5px;
      left: 5px;
      max-width: 100px;
      margin: auto;
      width: auto;
      background-image: url("../img/CG2-button/loading.svg");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      transform-origin: 50% 50%;
      animation: button--loading 1s linear infinite; }

@keyframes button--loading {
  0% {
    transform: rotate(0deg); }
  100% {
    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%; } }

/* ==========================================================================
   header1
   ========================================================================== */
/*
---
name: header1
category:
  - Content
tag:
  - content
---

見出しレベルは文章の構成に応じて変更する。

```html
<div class="CG2-header1">
  <h1 class="CG2-header1__heading">Heading text 1</h1>
</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;
  font-feature-settings: "palt";
  font-weight: normal;
  line-height: 1.2;
  margin: 0; }
  @media screen and (max-width: 767px) {
    .CG2-header1__heading {
      font-size: 20px; } }

/* ==========================================================================
   header2
   ========================================================================== */
/*
---
name: header2
category:
  - Content
tag:
  - content
---

見出しレベルは文章の構成に応じて変更する。

```html
<div class="CG2-header2">
  <h3 class="CG2-header2__heading">Heading text 2</h3>
</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;
  font-weight: normal;
  margin: 0; }
  @media screen and (max-width: 767px) {
    .CG2-header2__heading {
      font-size: 16px; } }

/* ==========================================================================
   header3
   ========================================================================== */
/*
---
name: header3
category:
  - Content
tag:
  - content
---

見出しレベルは文章の構成に応じて変更する。

```html
<div class="CG2-header3">
  <h3 class="CG2-header3__heading">Heading text 3</h3>
</div>
```
*/
.CG2-header3__heading {
  font-size: 16px;
  font-weight: bold;
  margin: 40px 0 15px; }

/* ==========================================================================
   leadText
   ========================================================================== */
/*
---
name: leadtext
category:
  - Content
tag:
  - content
---

見出しと判断されるものには見出しレベルを付与する。

```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;
  font-feature-settings: "palt";
  font-weight: normal;
  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:
  - Content
tag:
  - content
---

```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; }

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

## 通常（見出し、テキスト、ロゴ、ボタン）

customersについているstyle属性は外すこと。

```html
<section class="CG2-customers" style="background-color: #eee">
  <h2 class="CG2-customers__heading">団体購読も承っております</h2>
  <p class="CG2-customers__text">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
  <div class="CG2-customers__logos">
    <ul>
      <li><img src="__dummy__58x30" width="58" height="30"></li>
      <li><img src="__dummy__211x25" width="211" height="25"></li>
      <li><img src="__dummy__208x30" width="208" height="30"></li>
      <li><img src="__dummy__101x30" width="101" height="30"></li>
      <li><img src="__dummy__210x35" width="210" height="35"></li>
      <li><img src="__dummy__116x25" width="116" height="25"></li>
      <li><img src="__dummy__123x35" width="123" height="35"></li>
      <li><img src="__dummy__151x40" width="151" height="40"></li>
      <li><img src="__dummy__111x35" width="111" height="35"></li>
      <li><img src="__dummy__152x35" width="152" height="35"></li>
    </ul>
  </div>
  <div class="CG2-customers__button">
    <a class="CG2-button CG2-button--primary" href="">団体購読について</a>
  </div>
</section>
```

## コンパクト（テキスト・ロゴのみ）

customersについているstyle属性は外すこと。

```html
<section class="CG2-customers" style="background-color: #eee">
  <p class="CG2-customers__text">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
  <div class="CG2-customers__logos">
    <ul>
      <li><img src="__dummy__58x30" width="58" height="30"></li>
      <li><img src="__dummy__211x25" width="211" height="25"></li>
      <li><img src="__dummy__208x30" width="208" height="30"></li>
      <li><img src="__dummy__101x30" width="101" height="30"></li>
      <li><img src="__dummy__210x35" width="210" height="35"></li>
      <li><img src="__dummy__116x25" width="116" height="25"></li>
      <li><img src="__dummy__123x35" width="123" height="35"></li>
      <li><img src="__dummy__151x40" width="151" height="40"></li>
      <li><img src="__dummy__111x35" width="111" height="35"></li>
      <li><img src="__dummy__152x35" width="152" height="35"></li>
    </ul>
  </div>
</section>
```
*/
.CG2-customers {
  display: flex;
  flex-direction: column;
  align-items: center; }

.CG2-customers__heading {
  margin: 2em 0 0; }

.CG2-customers__text {
  margin: 2.2em 0 2em; }

.CG2-customers__logos {
  width: 100%; }
  .CG2-customers__logos:last-child {
    margin-bottom: 2.5em; }
  .CG2-customers__logos ul {
    max-width: 1020px;
    margin: 0 auto; }

.CG2-customers__button {
  margin: 2.5em 0; }

@media screen and (max-width: 767px) {
  .CG2-customers__heading {
    margin: 1.5em 0 0; }
  .CG2-customers__text,
  .CG2-customers__button {
    margin: 1.5em 0; } }

.CG2-customers__heading {
  padding: 0 10px;
  color: #282828;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.2; }
  @media screen and (max-width: 767px) {
    .CG2-customers__heading {
      font-size: 16px; } }

.CG2-customers__text {
  padding: 0 10px;
  line-height: 1.2; }

.CG2-customers__logos {
  background-color: #fff; }
  .CG2-customers__logos ul {
    list-style: none;
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
  .CG2-customers__logos li {
    margin: 15px 20px; }
    @media screen and (max-width: 767px) {
      .CG2-customers__logos li {
        margin: 10px 15px; } }
  .CG2-customers__logos img {
    vertical-align: middle; }

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

```html
<div class="CG2-paymentTable">
  <table>
    <thead>
      <tr>
        <th colspan="2"><img src="https://www.codegrid.net/img/payment/img_01.svg" alt="VISA, MasterCard, JCB, American Express, Diners Club" width="275"></th>
      </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>
      </tr>
      <tr>
        <th>購読期間</th>
        <td>自動継続</td>
      </tr>
      <tr>
        <th>無料購読期間</th>
        <td>
          <div class="CG2-paymentTable__valueList">
            <ul>
              <li>
                <div class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</div>
                <div class="CG2-paymentTable__value">30</div>
                <div class="CG2-paymentTable__valueUnit">日</div>
              </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: Helvetica, "ヒラギノ角ゴ 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%; } }

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

```html
<div class="CG2-paymentLine">
  <span class="CG2-paymentLine__label">月額</span>
  <span class="CG2-paymentLine__value">800</span>
  <span class="CG2-paymentLine__unit">円</span>
  <span class="CG2-paymentLine__extra">（税込み864円）</span>
</div>
```
*/
.CG2-paymentLine {
  text-align: center; }

.CG2-paymentLine__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;
  font-feature-settings: "palt";
  font-size: 24px; }

.CG2-paymentLine__value {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 32px; }

.CG2-paymentLine__unit {
  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-feature-settings: "palt";
  font-size: 24px; }

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

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

## 通常

* 未購読・非ログイン状態の場合、公開されてない記事には`CG2-seriesList__articleOrder`の前に`CG2-seriesList__articleIcon`が追加
* 未読の場合、`CG2-seriesList__article`に`CG2-seriesList__article--unread`が追加
* お気に入りに追加した場合、`js-toggle-fav-series`に`CG2-seriesList__itemUtilButton--favAdded`が追加
* 著者が3人までの場合、`CG2-seriesList__authors`に著者分の`CG2-seriesList__author`が入る（`<a>`でくるまれる）
* 著者が4人以上の場合、`CG2-seriesList__authors`の中身が`CG2-seriesList__authorPicList`に置き換わる
* appのトップでは、リストの最後には`CG2-seriesList__itemMore`がくる

```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-talk"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">Webの文字の読みやすさ</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2014-readable-text-design/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleIcon">
              <div class="CG2-icon-lock"></div>
            </div>
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">読みやすさのために</div>
            <div class="CG2-seriesList__articleDate">2014年07月17日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleIcon">
              <div class="CG2-icon-lock"></div>
            </div>
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">日本語の「読みやすさ」</div>
            <div class="CG2-seriesList__articleDate">2014年07月10日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">あらためて、Webって？</div>
            <div class="CG2-seriesList__articleDate">2014年07月03日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" 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="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">長坂 菫 | UIデザイナー</div>
          </div>
        </a>
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">中野 富子 | エディター</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 購読済、ログイン後、お気に入り、未読あり -->

    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-mastering"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">z-index再入門</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="true" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2014-mastering-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">z-indexの困った使用例</div>
            <div class="CG2-seriesList__articleDate">2014年05月29日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">意図した順序に要素を重ねる</div>
            <div class="CG2-seriesList__articleDate">2014年05月22日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">z-indexの仕組み</div>
            <div class="CG2-seriesList__articleDate">2014年05月15日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">佐川 沙織 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 著者4人、お気に入り -->

    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-standards"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">今日から使えるCSS</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="true" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第4回</div>
            <div class="CG2-seriesList__articleTitle">CSS Custom Properties</div>
            <div class="CG2-seriesList__articleDate">2017年05月04日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">position: sticky</div>
            <div class="CG2-seriesList__articleDate">2017年04月27日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">@supportsルール</div>
            <div class="CG2-seriesList__articleDate">2017年02月16日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <div class="CG2-seriesList__authorPicList">
          <ul>
            <li><a href=""><img src="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
            <li><a href=""><img src="__dummy__80x80" alt="影山 和子" width="40" height="40"></a></li>
            <li><a href=""><img src="__dummy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
            <li><a href=""><img src="__dummy__80x80" alt="杉原 幸次郎" width="40" height="40"></a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 著者たくさん、未読あり -->

    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-interview"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">エンジニアに聞く、仕事の行方</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="false" class="js-toggle-fav-series">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/future-works/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第13回</div>
            <div class="CG2-seriesList__articleTitle">ピクセル グリオ 編</div>
            <div class="CG2-seriesList__articleDate">2017年08月24日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第12回</div>
            <div class="CG2-seriesList__articleTitle">影山 和子 編</div>
            <div class="CG2-seriesList__articleDate">2017年05月04日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第11回</div>
            <div class="CG2-seriesList__articleTitle">橋本 孝治 編</div>
            <div class="CG2-seriesList__articleDate">2016年07月28日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <div class="CG2-seriesList__authorPicList">
          <ul>
          <li><a href=""><img src="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="河田 理香" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="尾上 友美" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="新田 道雄" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="安田 麻由" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="野間 夏子" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="神戸 克巳" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="杉原 幸次郎" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="田代 隆男" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="新田 春子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="中野 富子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="柳川 健治" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="長坂 菫" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="坪田 健之" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="仲村 孝二" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="橋本 孝治" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="大澤 直子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="山口 弘一" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="影山 和子" width="40" height="40"></a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- more -->

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

  </div>
</div>
```

## 全幅

appトップの今週号や、各号のページで利用。

`CG2-seriesList__item`に`CG2-seriesList__item--fullWidth`が追加されただけで、その他は特に変わらない。

```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-mastering"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">Chrome DevToolsをモバイル開発で使いこなす</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2017-chrome-devtools/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleIcon">
              <div class="CG2-icon-lock"></div>
            </div>
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">モバイルWebアプリ開発に活用</div>
            <div class="CG2-seriesList__articleDate">2017年06月01日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">影山 和子 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 購読済、お気に入り -->

    <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-standards"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">今日から使えるCSS</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="false" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">@supportsルール</div>
            <div class="CG2-seriesList__articleDate">2017年02月16日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" 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="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">影山 和子 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 著者たくさん、未読あり -->

    <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-survey"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">ピクセルグリッドの開発環境サーベイ 2017</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="false" class="js-toggle-fav-series">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2017-tool-survey/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">エディタとおすすめツール編</div>
            <div class="CG2-seriesList__articleDate">2017年03月02日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <div class="CG2-seriesList__authorPicList">
          <ul>
          <li><a href=""><img src="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="河田 理香" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="尾上 友美" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="新田 道雄" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="安田 麻由" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="野間 夏子" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="神戸 克巳" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="杉原 幸次郎" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="田代 隆男" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="新田 春子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="中野 富子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="柳川 健治" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="長坂 菫" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="坪田 健之" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="仲村 孝二" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="橋本 孝治" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="大澤 直子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="山口 弘一" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="影山 和子" width="40" height="40"></a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>
```
*/
.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: flex;
  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; }
  @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: 14px 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: 14px 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;
  font-feature-settings: "palt";
  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; }
  .CG2-seriesList__itemCategory [class^="CG2-icon-cat"] {
    font-size: 40px;
    line-height: 1;
    position: relative;
    top: 0;
    margin-right: 15px; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__itemCategory [class^="CG2-icon-cat"] {
        font-size: 26px; } }
    .CG2-seriesList__itemCategory [class^="CG2-icon-cat"]::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: calc( 50% - 20px);
      left: calc( 50% - 20px);
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background: #eee;
      transform: scale(0);
      transition: all 0s; }
  .CG2-seriesList__itemCategory a:hover [class^="CG2-icon-cat"],
  .CG2-seriesList__itemCategory a:focus [class^="CG2-icon-cat"] {
    animation-duration: .6s;
    animation-name: anim-scaleup;
    animation-fill-mode: forwards; }
    .CG2-seriesList__itemCategory a:hover [class^="CG2-icon-cat"]::after,
    .CG2-seriesList__itemCategory a:focus [class^="CG2-icon-cat"]::after {
      opacity: 0;
      transform: scale(1.4);
      transition-duration: .4s; }

.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;
  font-feature-settings: "palt";
  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; } }
  .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 a {
    color: inherit;
    text-decoration: none;
    display: block; }
  .CG2-seriesList__itemTitle .CG2-seriesList__itemTitleText {
    text-align: left;
    display: inline-block;
    position: relative; }
    .CG2-seriesList__itemTitle .CG2-seriesList__itemTitleText:after {
      content: '';
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      display: block;
      height: 1px;
      background: #fff;
      transform: translateY(2px) scaleX(0.1);
      transition: all 0.6s cubic-bezier(0.3, 1.4, 0.6, 1); }
  .CG2-seriesList__itemTitle a:hover .CG2-seriesList__itemTitleText:after,
  .CG2-seriesList__itemTitle a:focus .CG2-seriesList__itemTitleText:after {
    opacity: 1;
    transform: scaleX(1); }

.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__itemUtil ul {
    font-size: 0;
    list-style: none;
    display: inline-table;
    padding: 0; }
  .CG2-seriesList__itemUtil li {
    text-align: center;
    display: table-cell;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.2); }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__itemUtil li {
        width: 14px;
        height: 14px; } }
    .CG2-seriesList__itemUtil li:first-child, .CG2-seriesList__itemUtil li:first-child a {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px; }
    .CG2-seriesList__itemUtil li:last-child, .CG2-seriesList__itemUtil li:last-child a {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px; }
  .CG2-seriesList__itemUtil a,
  .CG2-seriesList__itemUtil button {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: 8px;
    margin: -8px;
    border: none;
    background: rgba(255, 255, 255, 0);
    transition: all .3s; }
    .CG2-seriesList__itemUtil a:hover, .CG2-seriesList__itemUtil a:focus,
    .CG2-seriesList__itemUtil button:hover,
    .CG2-seriesList__itemUtil button:focus {
      text-decoration: none;
      background: rgba(255, 255, 255, 0.2); }
      .CG2-seriesList__itemUtil a:hover span[class^="CG2-icon"], .CG2-seriesList__itemUtil a:focus span[class^="CG2-icon"],
      .CG2-seriesList__itemUtil button:hover span[class^="CG2-icon"],
      .CG2-seriesList__itemUtil button:focus span[class^="CG2-icon"] {
        opacity: 1; }
  .CG2-seriesList__itemUtil span[class^="CG2-icon"] {
    font-size: 18px;
    line-height: 18px;
    opacity: .5;
    position: static;
    display: block; }
    @media screen and (max-width: 767px) {
      .CG2-seriesList__itemUtil span[class^="CG2-icon"] {
        font-size: 14px;
        line-height: 14px; } }

button.CG2-seriesList__itemUtilButton--favAdded span[class^="CG2-icon"] {
  color: #ff0;
  opacity: 1; }

.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;
  transform: scale(1.2, 1.2);
  opacity: .64;
  transition: transform 1s;
  will-change: opacity; }
  .CG2-seriesList__item:hover .CG2-seriesList__coverImage,
  .CG2-seriesList__item:focus .CG2-seriesList__coverImage {
    transform: scale(1.4, 1.4); }

.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); }
  .CG2-seriesList__article.CG2-seriesList__article--unread {
    font-weight: bold;
    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;
    transition: background .5s; }
    .CG2-seriesList__article a:hover, .CG2-seriesList__article a:focus {
      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 12px 0 18px; }
  .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: 14px; }
      .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);
  transition: all .5s; }

a:hover .CG2-seriesList__author:before,
a:focus .CG2-seriesList__author:before {
  background: rgba(255, 255, 255, 0.2);
  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;
      transform: skewX(20deg);
      background: #eee;
      transition: all .3s; }
    .CG2-seriesList__itemMore a:hover:before, .CG2-seriesList__itemMore a:focus:before {
      left: 0;
      margin-left: -20px; }
    .CG2-seriesList__itemMore a:after {
      content: "";
      font-size: 20px;
      margin-left: 4px; }