{"version":3,"sources":["codegrid-ui-www.css","_icon-utils.scss","_components-www.scss","_0_vars.scss","_1_utils.scss","vendor/_media-queries.scss"],"names":[],"mappings":"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","file":"codegrid-ui-www.min.css","sourcesContent":["@charset \"UTF-8\";\n/* CodeGrid-UI for CodeGrid website */\n/* アイコンの基礎スタイル\n   ========================================================================== */\n.CG2-logo3d__overlayText:after, .CG2-faq__question:before {\n  font-family: \"codegrid-icon\";\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  vertical-align: middle;\n  display: inline-block;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale; }\n\n/* ==========================================================================\n   CG2-logo3d\n   ========================================================================== */\n/*\n---\nname: Logo_3D\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\ntemplateItem:\n  - true\n---\n\n```html\n<div class=\"CG2-logo3d\">\n  <div class=\"CG2-logo3d__inner\">\n    <div class=\"CG2-logo3d__overlayText\">\n      フロントエンドに<br class=\"CG2--disableLargeScreen CG2--disableMiddleScreen\">関わる人々のガイド\n    </div>\n  </div>\n</div>\n```\n\nthree.min.js (r72)、Logo3D.jsを読み込み、`new CGUI.Logo3D( document.querySelector( '.CG2-logo3d__inner' )`する必要がある\n\n<script src=\"/static/js/three.min.js\"></script>\n<script src=\"/static/js/makePNoise1D.js\"></script>\n<script src=\"/static/js/Logo3D.js\"></script>\n<script>\nvar logo3d = new CG2.Logo3D( document.querySelector( '.CG2-logo3d__inner' ) );\n</script>\n\n*/\n.CG2-logo3d {\n  position: relative;\n  margin: 0 auto;\n  background: #000; }\n\n.CG2-logo3d__inner {\n  height: calc( 100vh - 120px);\n  background: #000; }\n  @media screen and (max-width: 639px) {\n    .CG2-logo3d__inner {\n      height: calc( 100vh - 30px); } }\n  .CG2-logo3d__inner img,\n  .CG2-logo3d__inner canvas {\n    display: block;\n    margin: 0 auto; }\n\n.CG2-logo3d__overlayText {\n  color: #fff;\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 120px;\n  padding: 30px 0 0;\n  background: rgba(0, 0, 0, 0.8); }\n  @media screen and (max-width: 639px) {\n    .CG2-logo3d__overlayText {\n      font-size: 20px;\n      line-height: 1.2;\n      height: auto;\n      padding: 10px 5px; } }\n  .CG2-logo3d__overlayText:after {\n    content: \"\";\n    font-size: 22px;\n    display: block;\n    text-align: center;\n    margin-top: 16px; }\n    @media screen and (max-width: 639px) {\n      .CG2-logo3d__overlayText:after {\n        font-size: 16px;\n        margin-top: 6px; } }\n\n/* ==========================================================================\n   CG2-features\n   ========================================================================== */\n/*\n---\nname: features\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-features\">\n  <section class=\"CG2-features__item\">\n    <h2 class=\"CG2-features__heading\">執筆陣は現役のフロントエンドエンジニア</h2>\n    <div class=\"CG2-features__itemBody\">\n      <p>CodeGridで執筆しているのは、ピクセルグリッドのフロントエンドエンジニアたち。書籍執筆や講演の実績を持つエンジニアも多数在籍しています。だから、配信される記事では実際にプロジェクトで使った現場の実感から、本当に実務に必要な知識をお届けします。また、CodeGridは専任の編集者が編集のうえで配信しますので、記事の正確さ読みやすさにも自信があります。</p>\n    </div>\n  </section>\n  <section class=\"CG2-features__item\">\n    <h2 class=\"CG2-features__heading\">基礎から最新トレンド技術まで</h2>\n    <div class=\"CG2-features__itemBody\">\n      <p>忙しいと追うのを忘れがちになる新しい技術情報。エンジニア同士の会話でついていけなかったなんてことはありませんか？　CodeGridでは、最新トレンド技術もきちんと検証した上でしっかり解説します。もちろん「今さら聞けない」と思われがちな入門的な記事も配信。CodeGridを読んでいれば、基礎から最新トレンドまでフロントエンド界隈の情報をキャッチできます。</p>\n    </div>\n    <div class=\"CG2-features__embeddedTweets\">\n      //twitterの埋め込みコード など\n    </div>\n  </section>\n</div>\n```\n\n*/\n.CG2-features {\n  counter-reset: CG2features; }\n  .CG2-features:first-child {\n    margin-top: -40px; }\n\n.CG2-features__item {\n  counter-increment: CG2features;\n  padding: 0 120px;\n  margin: 80px 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-features__item {\n      padding: 0;\n      margin: 40px 0; } }\n  .CG2-features__item:last-child {\n    margin-bottom: 0; }\n\n.CG2-features__heading {\n  color: #282828;\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-weight: normal;\n  text-align: center;\n  margin: 0 0 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-features__heading {\n      font-size: 20px;\n      position: relative;\n      padding: 0 40px;\n      margin-bottom: 20px; }\n      .CG2-features__heading:before {\n        content: counter(CG2features);\n        font-family: \"Lucida Console\", Monaco, monospace;\n        font-size: 40px;\n        line-height: 0;\n        position: absolute;\n        top: 50%;\n        left: 0;\n        display: block;\n        width: 40px; } }\n\n.CG2-features__itemBody {\n  position: relative; }\n  .CG2-features__itemBody:before {\n    content: counter(CG2features);\n    line-height: 1;\n    font-size: 60px;\n    font-family: \"Lucida Console\", Monaco, monospace;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: -120px; }\n    @media screen and (max-width: 767px) {\n      .CG2-features__itemBody:before {\n        content: none; } }\n\n.CG2-features__embeddedTweets {\n  display: flex;\n  margin: 20px -5px; }\n  @media screen and (max-width: 767px) {\n    .CG2-features__embeddedTweets {\n      display: block; } }\n  .CG2-features__embeddedTweets twitterwidget,\n  .CG2-features__embeddedTweets iframe {\n    width: 50%;\n    margin: 10px 5px; }\n    @media screen and (max-width: 767px) {\n      .CG2-features__embeddedTweets twitterwidget,\n      .CG2-features__embeddedTweets iframe {\n        width: 100%;\n        margin: 10px auto; } }\n\n/* ==========================================================================\n   CG2-howYouReceive\n   ========================================================================== */\n/*\n---\nname: howYouReceive\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<section class=\"CG2-howYouReceive\">\n  <header class=\"CG2-howYouReceive__header\">\n    <h2 class=\"CG2-howYouReceive__heading\">CodeGridの配信形式は、<br class=\"CG2--disableLargeScreen CG2--disableMiddleScreen\">Web・iOSアプリ × メールマガジン</h2>\n  </header>\n  <div class=\"CG2-howYouReceive__list\">\n    <div class=\"CG2-howYouReceive__item\">\n      <div class=\"CG2-howYouReceive__image\">\n        <img src=\"__dummy__320x180\" alt=\"\" width=\"320\">\n      </div>\n      <div class=\"CG2-howYouReceive__text\">\n        <p>フロントエンドに特化した<br>300本以上の技術記事が読めるWebアプリ。<br><a href=\"\">Chromeアプリもご用意しています</a></p>\n      </div>\n    </div>\n    <div class=\"CG2-howYouReceive__item\">\n      <div class=\"CG2-howYouReceive__image\">\n        <img src=\"__dummy__320x180\" alt=\"\" width=\"320\">\n      </div>\n      <div class=\"CG2-howYouReceive__text\">\n        <p>iPhoneからアクセスする最良の方法。</p>\n        <p><a href=\"\" style=\"display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg), no-repeat;width:135px;height:40px;background-size:contain;\"></a></p>\n      </div>\n    </div>\n    <div class=\"CG2-howYouReceive__item\">\n      <div class=\"CG2-howYouReceive__image\">\n        <img src=\"__dummy__320x180\" alt=\"\" width=\"320\">\n      </div>\n      <div class=\"CG2-howYouReceive__text\">\n        <p>毎週木曜日配信（月4回）。<br>最新記事が定期的に届くメールマガジン。<br><a href=\"\">サンプルへ</a></p>\n      </div>\n    </div>\n  </div>\n</section>\n```\n*/\n.CG2-howYouReceive__header {\n  text-align: center;\n  position: relative;\n  margin: 0 0 20px; }\n  @media screen and (min-width: 767px) {\n    .CG2-howYouReceive__header {\n      margin: 0 -28px 20px; }\n      .CG2-howYouReceive__header:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 50%;\n        left: 0;\n        width: 100%;\n        height: 0;\n        border-top: 1px solid #000; } }\n\n.CG2-howYouReceive__heading {\n  color: #282828;\n  font-size: 16px;\n  font-weight: normal; }\n  @media screen and (min-width: 767px) {\n    .CG2-howYouReceive__heading {\n      font-size: 24px;\n      position: relative;\n      display: inline-block;\n      margin: 0;\n      padding: 0 40px;\n      background: #fff; } }\n\n@media screen and (min-width: 767px) {\n  .CG2-howYouReceive__list {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-column-gap: 2px;\n    justify-items: center;\n    font-size: 14px;\n    display: -ms-grid;\n    -ms-grid-columns: 1fr 2px 1fr 2px 1fr; }\n  .CG2-howYouReceive__item:nth-of-type(1) {\n    -ms-grid-column: 1; }\n  .CG2-howYouReceive__item:nth-of-type(2) {\n    -ms-grid-column: 3; }\n  .CG2-howYouReceive__item:nth-of-type(3) {\n    -ms-grid-column: 5; } }\n\n.CG2-howYouReceive__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center; }\n\n.CG2-howYouReceive__image img {\n  vertical-align: bottom;\n  width: 100%;\n  max-width: 320px; }\n\n.CG2-howYouReceive__text {\n  text-align: center; }\n\n/* ==========================================================================\n   CG2-bookInfo [www top]\n   ========================================================================== */\n/*\n---\nname: bookInfo\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<section class=\"CG2-bookInfo\">\n  <h2 class=\"CG2-bookInfo__heading\">CodeGridが書籍になりました</h2>\n  <div class=\"CG2-bookInfo__body\">\n    <div class=\"CG2-bookInfo__images\">\n      <ul>\n        <li><img src=\"__dummy__100x140\" alt=\"\" width=\"100 height=\"140\"\"></li>\n        <li><img src=\"__dummy__100x140\" alt=\"\" width=\"100 height=\"140\"\"></li>\n      </ul>\n    </div>\n    <div class=\"CG2-bookInfo__text\">\n      <p>書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。</p>\n      <a class=\"CG2-button\" href=\"#\">書籍について</a>\n    </div>\n  </div>\n</section>\n```\n*/\n.CG2-bookInfo__heading {\n  color: #282828;\n  font-size: 24px;\n  font-weight: normal;\n  text-align: center;\n  margin: 0 0 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-bookInfo__heading {\n      font-size: 16px;\n      margin-bottom: 20px; } }\n\n.CG2-bookInfo__body {\n  display: table; }\n  @media screen and (max-width: 767px) {\n    .CG2-bookInfo__body {\n      display: block; } }\n\n.CG2-bookInfo__images {\n  font-size: 0;\n  white-space: nowrap;\n  vertical-align: top;\n  display: table-cell;\n  padding-right: 25px; }\n  @media screen and (max-width: 767px) {\n    .CG2-bookInfo__images {\n      display: block;\n      padding: 0; } }\n  .CG2-bookInfo__images ul {\n    display: table;\n    padding: 0;\n    margin: 0; }\n    @media screen and (max-width: 767px) {\n      .CG2-bookInfo__images ul {\n        margin: 0 auto 20px; } }\n  .CG2-bookInfo__images li {\n    display: table-cell;\n    list-style: none;\n    width: 1%;\n    padding-right: 10px;\n    margin: 0; }\n    @media screen and (max-width: 767px) {\n      .CG2-bookInfo__images li {\n        width: auto;\n        padding: 0 10px;\n        margin: 0; } }\n  .CG2-bookInfo__images img {\n    display: block; }\n\n.CG2-bookInfo__text {\n  vertical-align: top;\n  display: table-cell;\n  font-size: 14px; }\n  @media screen and (max-width: 767px) {\n    .CG2-bookInfo__text {\n      font-size: 12px; } }\n  .CG2-bookInfo__text p {\n    margin: 0 0 20px; }\n\n/* ==========================================================================\n   CG2-circulation\n   ========================================================================== */\n/*\n---\nname: circulation\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<div class=\"CG2-circulation\">\n  <div class=\"CG2-circulation__lastUpdate\">（最新号 2015年5月21日発行）</div>\n  <div class=\"CG2-circulation__dataList\">\n    <div class=\"CG2-circulation__data\">\n      <div class=\"CG2-circulation__dataLabel\">発行号数</div>\n      <div class=\"CG2-circulation__dataNumber\">151</div>\n      <div class=\"CG2-circulation__dataUnit\">号</div>\n    </div>\n    <div class=\"CG2-circulation__data\">\n      <div class=\"CG2-circulation__dataLabel\">特集</div>\n      <div class=\"CG2-circulation__dataNumber\">70</div>\n      <div class=\"CG2-circulation__dataUnit\">シリーズ</div>\n    </div>\n    <div class=\"CG2-circulation__data\">\n      <div class=\"CG2-circulation__dataLabel\">記事数</div>\n      <div class=\"CG2-circulation__dataNumber\">321</div>\n      <div class=\"CG2-circulation__dataUnit\">本</div>\n    </div>\n  </div>\n</div>\n```\n*/\n@media screen and (max-width: 767px) {\n  .CG2-circulation {\n    display: table;\n    width: 100%; } }\n\n.CG2-circulation__lastUpdate {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  float: right; }\n  @media screen and (max-width: 767px) {\n    .CG2-circulation__lastUpdate {\n      float: none;\n      display: table-footer-group; } }\n\n.CG2-circulation__dataList {\n  display: table; }\n  @media screen and (max-width: 767px) {\n    .CG2-circulation__dataList {\n      display: table-header-group; } }\n\n.CG2-circulation__data {\n  display: table-cell;\n  font-size: 0;\n  padding-left: 50px; }\n  @media screen and (max-width: 767px) {\n    .CG2-circulation__data {\n      display: inline-block;\n      padding: 0 20px 0 0; } }\n  .CG2-circulation__data:first-child {\n    padding-left: 0; }\n\n.CG2-circulation__dataLabel {\n  font-size: 16px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\"; }\n  @media screen and (max-width: 767px) {\n    .CG2-circulation__dataLabel {\n      font-size: 12px; } }\n\n.CG2-circulation__dataNumber {\n  font-size: 64px;\n  font-family: \"Lucida Console\", Monaco, monospace;\n  line-height: 1.2;\n  display: inline; }\n  @media screen and (max-width: 767px) {\n    .CG2-circulation__dataNumber {\n      font-size: 40px; } }\n\n.CG2-circulation__dataUnit {\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  line-height: 1.2;\n  display: inline; }\n  @media screen and (max-width: 767px) {\n    .CG2-circulation__dataUnit {\n      font-size: 20px; } }\n\n/* ==========================================================================\n   CG2-featured\n   ========================================================================== */\n/*\n---\nname: featured\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<section class=\"CG2-featured\">\n  <header class=\"CG2-featured__header\">\n    <h2 class=\"CG2-featured__heading\">人気の特集</h2>\n    <div class=\"CG2-featured__summary\">多くの購読者に活用されるCodeGridのロングセラー</div>\n  </header>\n\n  <div class=\"CG2-seriesList\">\n    CG2-seriesList を入れる\n  </div>\n\n</section>\n```\n*/\n.CG2-featured {\n  margin: 80px 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-featured {\n      margin-top: 40px;\n      margin-bottom: 40px; } }\n\n.CG2-featured__header {\n  line-height: 1.2;\n  text-align: center;\n  margin-bottom: 30px; }\n\n.CG2-featured__heading {\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-weight: bold;\n  margin: 0.6em 0 15px; }\n  @media screen and (max-width: 639px) {\n    .CG2-featured__heading {\n      font-size: 20px; } }\n\n.CG2-featured__summary {\n  font-size: 16px;\n  display: inline-block; }\n  @media screen and (max-width: 767px) {\n    .CG2-featured__summary {\n      font-size: 12px; } }\n\n/* ==========================================================================\n   CG2-categoryIntro\n   ========================================================================== */\n/*\n---\nname: categoryIntro\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<div class=\"CG2-categoryIntro\">\n  <ul>\n    <li><span class=\"CG2-icon-cat-elementary CG2-icon--colored\"></span>入門</li>\n    <li><span class=\"CG2-icon-cat-mastering CG2-icon--colored\"></span>実践</li>\n    <li><span class=\"CG2-icon-cat-standards CG2-icon--colored\"></span>仕様解説</li>\n    <li><span class=\"CG2-icon-cat-talk CG2-icon--colored\"></span>座談会</li>\n    <li><span class=\"CG2-icon-cat-architecture CG2-icon--colored\"></span>設計</li>\n    <li><span class=\"CG2-icon-cat-report CG2-icon--colored\"></span>レポート</li>\n    <li><span class=\"CG2-icon-cat-design CG2-icon--colored\"></span>デザイン</li>\n    <li><span class=\"CG2-icon-cat-future CG2-icon--colored\"></span>未来・次世代</li>\n    <li><span class=\"CG2-icon-cat-work-style CG2-icon--colored\"></span>仕事術</li>\n    <li><span class=\"CG2-icon-cat-survey CG2-icon--colored\"></span>アンケート</li>\n    <li><span class=\"CG2-icon-cat-interview CG2-icon--colored\"></span>インタビュー</li>\n    <li><span class=\"CG2-icon-cat-discussion CG2-icon--colored\"></span>ディスカッション</li>\n  </ul>\n</div>\n```\n*/\n.CG2-categoryIntro ul {\n  color: #282828;\n  font-size: 0;\n  text-align: center;\n  list-style: none;\n  padding: 0;\n  margin: 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-categoryIntro ul {\n      margin-left: -10px;\n      margin-right: -10px; } }\n  .CG2-categoryIntro ul:after {\n    content: '';\n    display: block;\n    margin-top: -30px; }\n\n.CG2-categoryIntro li {\n  font-size: 14px;\n  text-align: center;\n  vertical-align: top;\n  display: inline-block;\n  width: 130px;\n  padding: 0;\n  margin: 0 0 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-categoryIntro li {\n      font-size: 10px;\n      width: 25%; } }\n\n.CG2-categoryIntro span[class*=\"CG2-icon-cat\"] {\n  font-size: 80px;\n  display: block;\n  margin-bottom: 10px;\n  position: static; }\n  @media screen and (max-width: 767px) {\n    .CG2-categoryIntro span[class*=\"CG2-icon-cat\"] {\n      font-size: 50px; } }\n  .CG2-categoryIntro span[class*=\"CG2-icon-cat\"]:before {\n    display: block; }\n\n/* ==========================================================================\n   CG2-quotes\n   ========================================================================== */\n/*\n---\nname: quotes\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<section class=\"CG2-quotes\">\n  <header class=\"CG2-quotes__header\">\n    <h2 class=\"CG2-quotes__heading\">CodeGrid関連ツイート</h2>\n    <div class=\"CG2-quotes__headerSub\">\n      <a href=\"https://twitter.com/codegrid\">@CodeGridで最新情報を配信しています <span class=\"CG2-icon-twitter\"></span></a>\n    </div>\n  </header>\n  <div class=\"CG2-quotes__body\">\n    <div class=\"CG2-quotes__list\">\n      <ul>\n        <li>\n          <blockquote class=\"twitter-tweet\" data-conversation=\"none\" lang=\"ja\"><p lang=\"ja\" dir=\"ltr\">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href=\"https://t.co/dJMzth2PlB\">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href=\"https://twitter.com/yomotsu/status/627256992340574209\">2015, 7月 31</a></blockquote>\n        </li>\n        <li>\n          <blockquote class=\"twitter-tweet\" data-conversation=\"none\" lang=\"ja\"><p lang=\"ja\" dir=\"ltr\">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href=\"https://t.co/dJMzth2PlB\">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href=\"https://twitter.com/yomotsu/status/627256992340574209\">2015, 7月 31</a></blockquote>\n        </li>\n        <li>\n          <blockquote class=\"twitter-tweet\" data-conversation=\"none\" lang=\"ja\"><p lang=\"ja\" dir=\"ltr\">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href=\"https://t.co/dJMzth2PlB\">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href=\"https://twitter.com/yomotsu/status/627256992340574209\">2015, 7月 31</a></blockquote>\n        </li>\n      </ul>\n      <script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n    </div>\n    <div class=\"CG2-quotes__timeline\">\n      <a class=\"twitter-timeline\" href=\"https://twitter.com/hashtag/codegrid\" data-widget-id=\"628812249822408705\">#codegrid のツイート</a>\n      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\\\"://platform.twitter.com/widgets.js\\\";fjs.parentNode.insertBefore(js,fjs);}}(document,\\\"script\\\",\\\"twitter-wjs\\\");</script>\n    </div>\n  </div>\n</section>\n```\n\nJSでtwitterのiframe内にstyleを挿入してmax-widthを打ち消す大きさを調整する必要がある\n\n<script>\nwindow.addEventListener( 'load', function () {\n  var i,l;\n  var css = [\n    '.EmbeddedTweet, .timeline {',\n      'box-sizing: border-box;',\n      'max-width: none !important;',\n      'width: 100% !important;',\n    '}',\n    '.sandboxroot.env-narrow p {',\n      'font-size: 12px;',\n    '}'\n  ].join( '' );\n  var iframe = document.querySelectorAll( 'iframe[id^=twitter-widget-' );\n  for ( i = 0, l = iframe.length; i < l; i++ ) {\n    var doc = iframe[ i ].contentWindow.document;\n    var head = doc.querySelector( 'head' );\n    var style = doc.createElement( 'style' );\n    style.textContent = css;\n    head.appendChild( style );\n  }\n} );\n</script>\n\n<pre><code>window.addEventListener( 'load', function () {\n  var i,l;\n  var css = [\n    '.EmbeddedTweet, .timeline {',\n      'box-sizing: border-box;',\n      'max-width: none !important;',\n      'width: 100% !important;',\n    '}',\n    '.sandboxroot.env-narrow p {',\n      'font-size: 12px;',\n    '}'\n  ].join( '' );\n  var iframe = document.querySelectorAll( 'iframe[id^=twitter-widget-' );\n  for ( i = 0, l = iframe.length; i < l; i++ ) {\n    var doc = iframe[ i ].contentWindow.document;\n    var head = doc.querySelector( 'head' );\n    var style = doc.createElement( 'style' );\n    style.textContent = css;\n    head.appendChild( style );\n  }\n} );</code></pre>\n*/\n.CG2-quotes {\n  padding-top: 20px;\n  margin: 0 -10px; }\n  .CG2-quotes:before, .CG2-quotes:after {\n    content: \"\";\n    display: table; }\n  .CG2-quotes:after {\n    clear: both; }\n\n.CG2-quotes__header {\n  display: table;\n  width: calc( 100% + 46px);\n  border-bottom: 1px solid #5c5c5c;\n  margin: 0 -28px 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-quotes__header {\n      display: block;\n      width: auto;\n      margin: 0 0 10px;\n      padding: 0 10px 5px; } }\n\n.CG2-quotes__heading {\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-weight: normal;\n  line-height: 1.2;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 0 0 30px 28px;\n  margin: 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-quotes__heading {\n      font-size: 20px;\n      display: block;\n      padding: 0; } }\n\n.CG2-quotes__headerSub {\n  font-size: 14px;\n  text-align: right;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 0 28px 30px 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-quotes__headerSub {\n      font-size: 12px;\n      display: block;\n      padding: 0;\n      display: none; } }\n  .CG2-quotes__headerSub a {\n    color: inherit; }\n\n.CG2-quotes__body {\n  display: table;\n  width: 100%; }\n  @media screen and (max-width: 767px) {\n    .CG2-quotes__body {\n      display: block;\n      width: auto; } }\n\n.CG2-quotes__list {\n  vertical-align: top;\n  box-sizing: border-box;\n  display: table-cell;\n  width: 60%;\n  padding-right: 20px; }\n  @media screen and (max-width: 767px) {\n    .CG2-quotes__list {\n      display: block;\n      width: auto;\n      padding-right: 0; } }\n  .CG2-quotes__list ul {\n    list-style: none;\n    padding: 0;\n    margin: 0; }\n  .CG2-quotes__list li {\n    margin: 0 0 20px; }\n    @media screen and (max-width: 767px) {\n      .CG2-quotes__list li {\n        margin-bottom: 10px; } }\n  .CG2-quotes__list iframe {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 !important; }\n\n.CG2-quotes__timeline {\n  vertical-align: top;\n  box-sizing: border-box;\n  display: table-cell;\n  width: 40%;\n  padding-left: 20px; }\n  @media screen and (max-width: 767px) {\n    .CG2-quotes__timeline {\n      display: block;\n      width: auto;\n      padding-left: 0; } }\n  .CG2-quotes__timeline iframe {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 !important; }\n    @media screen and (max-width: 767px) {\n      .CG2-quotes__timeline iframe {\n        height: 300px !important; } }\n\n/* ==========================================================================\n   CG2-bannerHeader\n   ========================================================================== */\n/*\n---\nname: bannerHeader\ncategory:\n  - Blocks/www\ntag:\n  - www-item\ntemplateItem:\n  - true\n---\n\n```html\n<div class=\"CG2-bannerHeader\">\n  <div class=\"CG2-bannerHeader__inner\">\n    <h1 class=\".CG2-bannerHeader__heading\">チームのフロントエンド開発力を<br>根底からアップしよう</h1>\n    <p>団体購読とは、購読管理者の方に複数の購読者を取りまとめていただき、毎月、購読者全員の購読料を一括した請求書を発行し、まとめてお支払いいただくシステムです。</p>\n  </div>\n  <div class=\"CG2-bannerHeader__bg\" style=\"background-image: url( '/build/img/_01.jpg' )\"></div>\n</div>\n```\n*/\n.CG2-bannerHeader {\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  background: #000;\n  color: #fff;\n  padding: 130px 0;\n  background-position: 50% 50%;\n  background-size: cover; }\n  @media screen and (max-width: 767px) {\n    .CG2-bannerHeader {\n      padding: 60px 15px; } }\n\n.CG2-bannerHeader__inner {\n  max-width: 740px;\n  margin: 0 auto; }\n  .CG2-bannerHeader__inner p {\n    line-height: 2;\n    text-align: center;\n    margin: 20px 0; }\n  .CG2-bannerHeader__inner > *:last-child {\n    margin-bottom: 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-bannerHeader__inner {\n      max-width: none; }\n      .CG2-bannerHeader__inner p {\n        font-size: 12px; } }\n\n.CG2-bannerHeader__heading {\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-size: 32px;\n  font-weight: normal;\n  text-align: center;\n  margin: 0 0 30px; }\n  @media screen and (max-width: 767px) {\n    .CG2-bannerHeader__heading {\n      font-size: 20px;\n      margin-bottom: 20px; } }\n\n.CG2-bannerHeader__bg {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: -10px;\n  right: -10px;\n  bottom: -10px;\n  left: -10px;\n  background-position: 50% 50%;\n  background-size: cover;\n  transform: scale(1.2, 1.2);\n  opacity: .64; }\n\n/* ==========================================================================\n   CG2-form\n   ========================================================================== */\n/*\n---\nname: form\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<section class=\"CG2-form\">\n  <form>\n    <div class=\"CG2-form__header\">\n      <h2 class=\"CG2-form__heading\">団体購読のお申込み</h2>\n      <p>購読者お一人につき、月額800円（税抜）<br>月の途中で購読者の登録・削除があった場合は日割り計算されます。</p>\n    </div>\n    <p class=\"CG2--alignCenter\">購読者お一人につき、月額800円（税抜）<br>月の途中で購読者の登録・削除があった場合は日割り計算されます。</p>\n    <div class=\"CG2-form__table\">\n      <table>\n        <col width=\"30%\">\n        <col width=\"70%\">\n        <tr>\n          <th>\n            <label>会社名・団体名</label>\n            <span class=\"CG2-form__required\">（必須）</span>\n          </th>\n          <td>\n            <input type=\"text\" placeholder=\"例）株式会社 ピクセルグリッド\">\n          </td>\n        </tr>\n        <tr>\n          <th>\n            <label>管理者のメールアドレス</label>\n            <span class=\"CG2-form__required\">（必須）</span>\n          </th>\n          <td>\n            <input type=\"text\" placeholder=\"例）codegrid@pxgrid.com\">\n          </td>\n        </tr>\n        <tr>\n          <th>\n            <label>お問い合わせ事項</label>\n            <span class=\"CG2-form__required\">（必須）</span>\n          </th>\n          <td>\n            <select>\n              <option value=\"\" class=\"CG2-form__placeholder\">お問い合わせ事項、お問い合わせの内容をお選びください。</option>\n              <option>記事内容について</option>\n              <option>CodeGridの利用全般について</option>\n              <option>課金について</option>\n              <option>団体購読について</option>\n              <option>その他</option>\n            </select>\n          </td>\n        </tr>\n        <tr>\n          <th>\n            <label>お問い合わせ内容</label>\n            <span class=\"CG2-form__required\">（必須）</span>\n          </th>\n          <td>\n            <textarea placeholder=\"記事内容についてのお問い合わせは、必ず該当記事のURLを明記してください。\" cols=\"50\" rows=\"6\"></textarea>\n          </td>\n        </tr>\n      </table>\n    </div>\n    <div class=\"CG2-buttonContainer\">\n      <ul>\n        <li class=\"CG2-buttonContainer__item--full\">\n          <button class=\"CG2-button CG2-button--primary CG2-button--large\" type=\"submit\">送信</button>\n        </li>\n      </ul>\n    </div>\n  </form>\n</section>\n```\n\n*/\nsection.CG2-form {\n  padding: 50px;\n  margin: 80px -28px;\n  background: #eee; }\n  section.CG2-form form {\n    margin: 0; }\n  @media screen and (max-width: 767px) {\n    section.CG2-form {\n      padding: 25px 20px;\n      margin: 40px -20px; } }\n\n.CG2-form__header {\n  margin: 0 0 30px; }\n  .CG2-form__header p {\n    text-align: center;\n    margin: 16px 0 0; }\n  @media screen and (max-width: 639px) {\n    .CG2-form__header {\n      margin-bottom: 16px; }\n      .CG2-form__header p {\n        text-align: left; } }\n\n.CG2-form__heading {\n  font-size: 32px;\n  font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, \"Klee\", \"游明朝体\", \"Yu Mincho\", YuMincho, \"ヒラギノ明朝ProN W3\", \"HiraMinProN-W3\", \"ヒラギノ明朝Pro W3\", \"Hiragino Mincho Pro\", \"HG正楷書体-PRO\", \"ＤＦ中楷書体\", \"ＭＳ 明朝\", \"MS Mincho\", \"メイリオ\", Meiryo, serif;\n  font-feature-settings: \"palt\";\n  font-weight: normal;\n  line-height: 1.6;\n  text-align: center;\n  margin: 0 0 20px; }\n  @media screen and (max-width: 639px) {\n    .CG2-form__heading {\n      font-size: 20px;\n      margin-bottom: 16px; } }\n\n.CG2-form__table table {\n  width: 100%; }\n\n.CG2-form__table th {\n  text-align: left;\n  vertical-align: middle;\n  padding: 8px; }\n\n.CG2-form__table td {\n  padding: 8px; }\n\n.CG2-form__table input[type=\"text\"],\n.CG2-form__table input[type=\"url\"],\n.CG2-form__table input[type=\"email\"],\n.CG2-form__table select,\n.CG2-form__table textarea {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 14px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  line-height: 1.4; }\n\n.CG2-form__table select {\n  background-image: url(data:image/svg+xml,%3Csvg%20width=%2226%22%20height=%2214%22%20viewBox=%220%200%2026%2014%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill=%22%23777%22%20d=%22M3%200L0%202.7%2013%2014%2026%202.7%2023%200%2013%208.7%22/%3E%3C/svg%3E);\n  background-repeat: no-repeat;\n  background-size: 14px 8px;\n  background-position: right 14px center;\n  background-color: #fff;\n  padding-right: 40px; }\n  @media screen and (max-width: 767px) {\n    .CG2-form__table select {\n      background-position: right 14px center; } }\n\n.CG2-form__table select {\n  -webkit-appearance: initial; }\n\n.CG2-form__table select {\n  -moz-appearance: initial; }\n\n.CG2-form__table ::placeholder {\n  opacity: 1;\n  color: #767676; }\n\n.CG2-form__table select.CG2-form__placeholder_selected {\n  color: #767676; }\n\n@media screen and (max-width: 639px) {\n  .CG2-form__table table, .CG2-form__table tbody, .CG2-form__table tr {\n    display: block; }\n    .CG2-form__table table:before, .CG2-form__table table:after, .CG2-form__table tbody:before, .CG2-form__table tbody:after, .CG2-form__table tr:before, .CG2-form__table tr:after {\n      content: \"\";\n      display: table; }\n    .CG2-form__table table:after, .CG2-form__table tbody:after, .CG2-form__table tr:after {\n      clear: both; }\n  .CG2-form__table th, .CG2-form__table td {\n    float: left;\n    clear: left; }\n  .CG2-form__table th, .CG2-form__table td {\n    padding: 0;\n    width: 100%; }\n  .CG2-form__table th {\n    margin-bottom: 6px; }\n  .CG2-form__table td {\n    margin-bottom: 10px; }\n  .CG2-form__table input[type=\"text\"],\n  .CG2-form__table input[type=\"url\"],\n  .CG2-form__table input[type=\"email\"],\n  .CG2-form__table select,\n  .CG2-form__table textarea {\n    font-size: 16px; } }\n\nspan.CG2-form__required {\n  color: #ff0000;\n  font-size: 12px;\n  font-weight: normal;\n  line-height: 22px;\n  margin-left: 10px;\n  float: right; }\n  @media screen and (max-width: 639px) {\n    span.CG2-form__required {\n      float: none;\n      margin-left: 0; } }\n\n.CG2-form__legal {\n  font-size: 12px;\n  text-align: center;\n  margin: 15px 0; }\n  .CG2-form__legal a {\n    color: inherit; }\n  @media screen and (max-width: 639px) {\n    .CG2-form__legal {\n      font-size: 8px;\n      text-align: left;\n      margin: 5px; } }\n\n.CG2-form__notice {\n  font-size: 12px;\n  text-align: center;\n  margin: 15px 0; }\n  @media screen and (max-width: 639px) {\n    .CG2-form__notice {\n      font-size: 8px;\n      text-align: left;\n      margin: 5px; } }\n\n/* ==========================================================================\n   CG2-flowExplanation\n   ========================================================================== */\n/*\n---\nname: flowExplanation\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-flowExplanation\">\n  <section class=\"CG2-flowExplanation__item\">\n    <div class=\"CG2-flowExplanation__image\">\n      <img src=\"__dummy__320x180\" alt=\"\" width=\"320\" height=\"180\">\n    </div>\n    <div class=\"CG2-flowExplanation__text\">\n      <h3 class=\"CG2-flowExplanation__heading\">お申込頂くと、管理者様へ団体管理画面へのリンクが送信されます</h3>\n      <p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>\n    </div>\n  </section>\n\n  <section class=\"CG2-flowExplanation__item\">\n    <div class=\"CG2-flowExplanation__image\">\n      <img src=\"__dummy__320x180\" alt=\"\" width=\"320\" height=\"180\">\n    </div>\n    <div class=\"CG2-flowExplanation__text\">\n      <h3 class=\"CG2-flowExplanation__heading\">管理画面にて、パスワードの設定をお願いします</h3>\n      <p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>\n    </div>\n  </section>\n</div>\n```\n\n*/\n.CG2-flowExplanation {\n  margin: 40px 0;\n  counter-reset: CG2flowExplanation; }\n  @media screen and (max-width: 639px) {\n    .CG2-flowExplanation {\n      margin: 30px 0; } }\n\nsection.CG2-flowExplanation__item {\n  counter-increment: CG2flowExplanation;\n  display: table;\n  width: 100%;\n  margin: 50px 0; }\n  @media screen and (max-width: 639px) {\n    section.CG2-flowExplanation__item {\n      display: block;\n      margin: 30px 0; } }\n\n.CG2-flowExplanation__image {\n  vertical-align: top;\n  display: table-cell; }\n  .CG2-flowExplanation__image img {\n    display: block;\n    border: 1px solid #dbdbdb; }\n  @media screen and (max-width: 767px) {\n    .CG2-flowExplanation__image {\n      width: 40%; }\n      .CG2-flowExplanation__image img {\n        max-width: 100%;\n        height: auto; } }\n  @media screen and (max-width: 639px) {\n    .CG2-flowExplanation__image {\n      display: block;\n      width: auto;\n      margin: 0 0 10px; }\n      .CG2-flowExplanation__image img {\n        margin: 0 auto; } }\n\n.CG2-flowExplanation__text {\n  vertical-align: top;\n  display: table-cell;\n  padding-left: 66px; }\n  @media screen and (max-width: 639px) {\n    .CG2-flowExplanation__text {\n      padding-left: 35px; }\n      .CG2-flowExplanation__text p {\n        font-size: 12px; } }\n\n.CG2-flowExplanation__heading {\n  font-size: 24px;\n  font-weight: normal;\n  margin: 0 0 20px; }\n  @media screen and (max-width: 639px) {\n    .CG2-flowExplanation__heading {\n      font-size: 12px;\n      font-weight: bold;\n      margin: 0 0 10px; } }\n  .CG2-flowExplanation__heading:before {\n    content: counter(CG2flowExplanation);\n    font-size: 32px;\n    font-family: \"Lucida Console\", Monaco, monospace;\n    line-height: 24px;\n    vertical-align: middle;\n    display: inline-block;\n    width: 1.2em;\n    margin-left: -1.2em; }\n    @media screen and (max-width: 639px) {\n      .CG2-flowExplanation__heading:before {\n        font-size: 24px;\n        font-weight: normal;\n        line-height: 12px;\n        width: 26px;\n        margin-left: -26px; } }\n\n/* ==========================================================================\n   CG2-faq\n   ========================================================================== */\n/*\n---\nname: faq\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-faq\">\n  <h3 class=\"CG2-faq__question\">\n    PayPalアカウントやWebMoneyのほかに、銀行振込など別の支払い方法はありますか？\n  </h3>\n  <div class=\"CG2-faq__answer\">\n    <p>個人で購読される方は、PayPalアカウント、もしくはWebMoneyのお支払いのみ受け付けております。団体で購読される方は、請求書払いで銀行振込ができます。</p>\n    <aside class=\"CG2-faq-eg\">\n      <h4 class=\"CG2-faq-eg__heading\">未払い購読料の扱い（例）</h4>\n      <ul>\n        <li>前月未払い : 864円</li>\n        <li>今月請求 : 1,728円（前回未払い864円＋今回購読料864円）</li>\n      </ul>\n    </aside>\n  </div>\n</div>\n```\n\n*/\n.CG2-faq {\n  font-size: 16px;\n  margin: 40px 0;\n  padding: 0 0 0 50px; }\n  @media screen and (max-width: 767px) {\n    .CG2-faq {\n      font-size: 12px;\n      margin: 20px -10px;\n      padding-left: 38px; } }\n\n.CG2-faq__question {\n  font-weight: bold;\n  line-height: 1.5;\n  position: relative;\n  min-height: 24px;\n  margin: 0;\n  padding: 8px 0; }\n  @media screen and (max-width: 767px) {\n    .CG2-faq__question {\n      min-height: 16px;\n      padding-top: 6px;\n      padding-bottom: 6px; } }\n  .CG2-faq__question:before {\n    content: \"\";\n    color: #282828;\n    font-size: 40px;\n    line-height: 40px;\n    position: absolute;\n    top: 0;\n    left: -50px; }\n    @media screen and (max-width: 767px) {\n      .CG2-faq__question:before {\n        font-size: 28px;\n        line-height: 28px;\n        left: -38px; } }\n\n.CG2-faq__answer p {\n  margin-top: 0;\n  margin-bottom: 1em; }\n\n.CG2-faq-eg {\n  padding: 20px 20px 20px 50px;\n  margin: 20px 0 0 -50px;\n  background: #eee; }\n  @media screen and (max-width: 767px) {\n    .CG2-faq-eg {\n      padding: 10px 10px 10px 38px;\n      margin-left: -38px; } }\n  .CG2-faq-eg .CG2-faq-eg__heading {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0; }\n  .CG2-faq-eg ul {\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-left: 30px; }\n\n/* ==========================================================================\n   CG2-additionalInfoLink\n   ========================================================================== */\n/*\n---\nname: additionalInfoLink\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-additionalInfoLink\">\n  <div class=\"CG2-additionalInfoLink__text\">\n    団体購読では、請求書払いにも対応しています<span class=\"CG2-additionalInfoLink__sub\">小さい文字</span>\n  </div>\n  <div class=\"CG2-additionalInfoLink__link\"><a class=\"CG2-button\" href=\"#\">団体購読について</a></div>\n</div>\n```\n\n*/\n.CG2-additionalInfoLink {\n  display: table;\n  width: 100%; }\n  .CG2-additionalInfoLink + .CG2-additionalInfoLink {\n    margin-top: 30px; }\n  @media screen and (max-width: 639px) {\n    .CG2-additionalInfoLink {\n      display: block;\n      width: auto; } }\n\n.CG2-additionalInfoLink__text {\n  font-size: 24px;\n  line-height: 1.2;\n  vertical-align: middle;\n  display: table-cell; }\n  @media screen and (max-width: 639px) {\n    .CG2-additionalInfoLink__text {\n      font-size: 16px;\n      text-align: center;\n      display: block; } }\n\n.CG2-additionalInfoLink__sub {\n  font-size: 14px; }\n\n.CG2-additionalInfoLink__link {\n  text-align: right;\n  vertical-align: middle;\n  display: table-cell; }\n  @media screen and (max-width: 639px) {\n    .CG2-additionalInfoLink__link {\n      text-align: center;\n      display: block;\n      margin: 1em 0 0; }\n      .CG2-additionalInfoLink__link .CG2-button {\n        font-size: 18px;\n        display: block;\n        padding: .3em; } }\n\n/* ==========================================================================\n   CG2-publication\n   ========================================================================== */\n/*\n---\nname: publication\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<section class=\"CG2-publication\">\n  <div class=\"CG2-publication__image\">\n    <img src=\"__dummy__206x290\" alt=\"\" width=\"206\" height=\"290\">\n  </div>\n  <div class=\"CG2-publication__body\">\n    <div class=\"CG2-publication__header\">\n      <h2 class=\"CG2-publication__heading\">Web制作者のためのGit入門</h2>\n    </div>\n    <div class=\"CG2-publication__headingSub\">\n      ピクセル グリオ (著), 神戸 克巳 (著), CodeGrid (編集)  2014/6/28\n    </div>\n    <p>本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。</p>\n    <div class=\"CG2-publication__buttonContainer\">\n      <ul>\n        <li><a class=\"CG2-button\" href=\"#\">Amazonで購入</a></li>\n      </ul>\n    </div>\n  </div>\n</section>\n```\n\n*/\nsection.CG2-publication {\n  display: table;\n  width: 100%;\n  margin: 40px 0; }\n\n.CG2-publication__image {\n  vertical-align: top;\n  display: table-cell;\n  padding-right: 30px;\n  max-width: 206px;\n  width: 20%; }\n  @media screen and (max-width: 767px) {\n    .CG2-publication__image {\n      padding-right: 15px; } }\n  .CG2-publication__image img {\n    display: block;\n    width: 100%;\n    height: auto; }\n\n.CG2-publication__body {\n  font-size: 16px;\n  vertical-align: top;\n  display: table-cell; }\n  @media screen and (max-width: 767px) {\n    .CG2-publication__body {\n      font-size: 12px; } }\n\n.CG2-publication__header {\n  margin: 0 0 25px; }\n  @media screen and (max-width: 767px) {\n    .CG2-publication__header {\n      margin-bottom: 15px; } }\n  .CG2-publication__header .CG2-publication__heading {\n    font-size: 24px;\n    font-weight: normal;\n    margin: 0; }\n    @media screen and (max-width: 767px) {\n      .CG2-publication__header .CG2-publication__heading {\n        font-size: 16px; } }\n\n.CG2-publication__headingSub {\n  font-size: 14px;\n  margin: -20px 0 25px; }\n  @media screen and (max-width: 767px) {\n    .CG2-publication__headingSub {\n      font-size: 10px;\n      margin-top: -15px;\n      margin-bottom: 15px; } }\n\n.CG2-publication__buttonContainer {\n  margin-top: 30px; }\n  @media screen and (max-width: 639px) {\n    .CG2-publication__buttonContainer {\n      margin-top: 10px; } }\n  .CG2-publication__buttonContainer ul {\n    list-style: none;\n    padding: 0;\n    margin: 0; }\n  .CG2-publication__buttonContainer li {\n    display: inline-block;\n    margin: 0 20px 0 0; }\n    @media screen and (max-width: 639px) {\n      .CG2-publication__buttonContainer li {\n        display: block;\n        margin-bottom: 10px; } }\n\n/* ==========================================================================\n   CG2-term\n   ========================================================================== */\n/*\n---\nname: term\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-term\">\n  <dl>\n    <dt>Coffee</dt>\n    <dd>Black hot drink</dd>\n    <dt>Milk</dt>\n    <dd>White cold drink</dd>\n  </dl>\n</div>\n```\n\n*/\n.CG2-term dt {\n  font-weight: bold; }\n\n.CG2-term dd {\n  margin: 0 0 15px; }\n\n/* ==========================================================================\n   CG2-lastUpdate\n   ========================================================================== */\n/*\n---\nname: lastUpdate\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-lastUpdate\">Last Update: 20xx-08-01</div>\n```\n\n*/\n.CG2-lastUpdate {\n  margin-top: 80px; }\n  @media screen and (max-width: 767px) {\n    .CG2-lastUpdate {\n      margin-top: 40px; } }\n\n/* ==========================================================================\n   CG2-imageContainer\n   ========================================================================== */\n/*\n---\nname: imageContainer\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-imageContainer\">\n  <div class=\"CG2-imageContainer__image\">\n    <img src=\"__dummy__480x180\" alt=\"\" width=\"480\" height=\"180\">\n  </div>\n</div>\n```\n\n*/\n.CG2-imageContainer {\n  font-size: 0;\n  margin: 40px 0;\n  text-align: center; }\n  .CG2-imageContainer:before, .CG2-imageContainer:after {\n    content: '';\n    display: block;\n    height: 1px; }\n  .CG2-imageContainer:before {\n    margin-bottom: -10px; }\n  .CG2-imageContainer:after {\n    margin-top: -10px; }\n\n.CG2-imageContainer__image {\n  vertical-align: middle;\n  display: inline-block;\n  margin: 10px 30px; }\n  .CG2-imageContainer__image img {\n    max-width: 100%;\n    height: auto; }\n\n/* ==========================================================================\n   holizontalLine\n   ========================================================================== */\n/*\n---\nname: holizontalLine\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>\n\n<div class=\"CG2-holizontalLine\"></div>\n\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>\n```\n\n*/\n.CG2-holizontalLine {\n  border-top: 1px solid #5c5c5c;\n  margin: 80px -28px; }\n  @media screen and (max-width: 767px) {\n    .CG2-holizontalLine {\n      border-color: #dbdbdb;\n      margin: 50px -10px; } }\n\n/* ==========================================================================\n   CG2-comparisonTable\n   ========================================================================== */\n/*\n---\nname: comparisonTable\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-comparisonTable\">\n  <table border class=\"CG2-comparisonTable__table\">\n    <thead>\n      <tr>\n        <td></td>\n        <th scope=\"col\">個人購読</th>\n        <th scope=\"col\">団体購読</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\" nowrap>契約方法</th>\n        <td nowrap>1人ずつで契約する</td>\n        <td nowrap>複数人分で契約する</td>\n      </tr>\n      <tr>\n        <th scope=\"row\" nowrap>支払い方法</th>\n        <td>クレジットカード</td>\n        <td>銀行振込（請求書発行）、クレジットカードのどちらか</td>\n      </tr>\n      <tr>\n        <th scope=\"row\" nowrap>講読人数</th>\n        <td>1名</td>\n        <td>2名〜</td>\n      </tr>\n      <tr>\n        <th scope=\"row\" nowrap>領収書の発行</th>\n        <td>設定画面から発行</td>\n        <td>団体購読管理画面から発行</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n```\n\n*/\n.CG2-comparisonTable {\n  width: 100%;\n  overflow-x: scroll; }\n\n.CG2-comparisonTable__table {\n  width: 100%;\n  margin: 40px 0 15px; }\n  .CG2-comparisonTable__table th, .CG2-comparisonTable__table td {\n    padding: 0.3em 0.8em;\n    border: 1px solid #dbdbdb; }\n  .CG2-comparisonTable__table tbody th {\n    text-align: right; }\n","// このscssファイルはgulpによる自動生成\n// scssを編集したい場合は src/assets2/font/codegrid-icon/_icon-utils.scss を編集すること\n\n// アイコンをつける\n// ===========================================================================\n\n/* アイコンの基礎スタイル\n   ========================================================================== */\n%codegrid-icon {\n  font-family: \"codegrid-icon\";\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  vertical-align: middle;\n  display: inline-block;\n\n  // Better Font Rendering\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n// アイコンを呼び出す\n// ===========================================================================\n$icons: (\n  pxg: \"\\\",\n  top: \"\\\",\n  right: \"\\\",\n  down: \"\\\",\n  left: \"\\\",\n  hamburger: \"\\\",\n  list: \"\\\",\n  setting: \"\\\",\n  search: \"\\\",\n  star: \"\\\",\n  lock: \"\\\",\n  unlock: \"\\\",\n  question: \"\\\",\n  exclamation-circle: \"\\\",\n  exclamation-triangle: \"\\\",\n  twitter: \"\\\",\n  facebook: \"\\\",\n  gplus: \"\\\",\n  cat-elementary: \"\\\",\n  cat-mastering: \"\\\",\n  cat-standards: \"\\\",\n  cat-talk: \"\\\",\n  cat-architecture: \"\\\",\n  cat-report: \"\\\",\n  cat-design: \"\\\",\n  cat-future: \"\\\",\n  cat-work-style: \"\\\",\n  cat-survey: \"\\\",\n  cat-interview: \"\\\",\n  cat-discussion: \"\\\",\n  \n);\n\n@mixin icon ( $name ) {\n  content: map-get( $icons, $name );\n  @extend %codegrid-icon;\n}","/* ==========================================================================\n   CG2-logo3d\n   ========================================================================== */\n/*\n---\nname: Logo_3D\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\ntemplateItem:\n  - true\n---\n\n```html\n<div class=\"CG2-logo3d\">\n  <div class=\"CG2-logo3d__inner\">\n    <div class=\"CG2-logo3d__overlayText\">\n      フロントエンドに<br class=\"CG2--disableLargeScreen CG2--disableMiddleScreen\">関わる人々のガイド\n    </div>\n  </div>\n</div>\n```\n\nthree.min.js (r72)、Logo3D.jsを読み込み、`new CGUI.Logo3D( document.querySelector( '.CG2-logo3d__inner' )`する必要がある\n\n<script src=\"/static/js/three.min.js\"></script>\n<script src=\"/static/js/makePNoise1D.js\"></script>\n<script src=\"/static/js/Logo3D.js\"></script>\n<script>\nvar logo3d = new CG2.Logo3D( document.querySelector( '.CG2-logo3d__inner' ) );\n</script>\n\n*/\n.CG2-logo3d {\n  position: relative;\n  margin: 0 auto;\n  background: #000;\n}\n  .CG2-logo3d__inner {\n    height: calc( 100vh - 120px );\n    background: #000;\n    @include max-screen( $breakpoint-small ) {\n      height: calc( 100vh - 30px );\n    }\n    img,\n    canvas {\n      display: block;\n      margin: 0 auto;\n    }\n  }\n    .CG2-logo3d__overlayText {\n      color: #fff;\n      font-size: 32px;\n      font-family: $fontSerif;\n      font-feature-settings: \"palt\";\n      text-align: center;\n      cursor: pointer;\n      position: absolute;\n      right: 0;\n      left: 0;\n      bottom: 0;\n      height: 120px;\n      padding: 30px 0 0;\n      background: rgba( 0, 0, 0, 0.8 );\n      @include max-screen( $breakpoint-small ) {\n        font-size: 20px;\n        line-height: 1.2;\n        height: auto;\n        padding: 10px 5px;\n      }\n      &:after {\n        @include icon( down );\n        font-size: 22px;\n        display: block;\n        text-align: center;\n        margin-top: 16px;\n        @include max-screen( $breakpoint-small ) {\n          font-size: 16px;\n          margin-top: 6px;\n        }\n      }\n    }\n\n\n\n/* ==========================================================================\n   CG2-features\n   ========================================================================== */\n/*\n---\nname: features\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-features\">\n  <section class=\"CG2-features__item\">\n    <h2 class=\"CG2-features__heading\">執筆陣は現役のフロントエンドエンジニア</h2>\n    <div class=\"CG2-features__itemBody\">\n      <p>CodeGridで執筆しているのは、ピクセルグリッドのフロントエンドエンジニアたち。書籍執筆や講演の実績を持つエンジニアも多数在籍しています。だから、配信される記事では実際にプロジェクトで使った現場の実感から、本当に実務に必要な知識をお届けします。また、CodeGridは専任の編集者が編集のうえで配信しますので、記事の正確さ読みやすさにも自信があります。</p>\n    </div>\n  </section>\n  <section class=\"CG2-features__item\">\n    <h2 class=\"CG2-features__heading\">基礎から最新トレンド技術まで</h2>\n    <div class=\"CG2-features__itemBody\">\n      <p>忙しいと追うのを忘れがちになる新しい技術情報。エンジニア同士の会話でついていけなかったなんてことはありませんか？　CodeGridでは、最新トレンド技術もきちんと検証した上でしっかり解説します。もちろん「今さら聞けない」と思われがちな入門的な記事も配信。CodeGridを読んでいれば、基礎から最新トレンドまでフロントエンド界隈の情報をキャッチできます。</p>\n    </div>\n    <div class=\"CG2-features__embeddedTweets\">\n      //twitterの埋め込みコード など\n    </div>\n  </section>\n</div>\n```\n\n*/\n.CG2-features {\n  counter-reset: CG2features;\n  &:first-child {\n    margin-top: -40px;\n    // @include max-screen( $breakpoint-middle ) {\n    //   margin-top: 0;\n    // }\n  }\n}\n  .CG2-features__item {\n    counter-increment: CG2features;\n    padding: 0 120px;\n    margin: 80px 0;\n    @include max-screen( $breakpoint-middle ) {\n      padding: 0;\n      margin: 40px 0;\n    }\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .CG2-features__heading {\n    color: #282828;\n    font-size: 32px;\n    font-family: $fontSerif;\n    font-feature-settings: \"palt\";\n    font-weight: normal;\n    text-align: center;\n    margin: 0 0 30px;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 20px;\n      position: relative;\n      padding: 0 40px;\n      margin-bottom: 20px;\n      &:before {\n        content: counter( CG2features );\n        font-family: $fontCode;\n        font-size: 40px;\n        line-height: 0;\n        position: absolute;\n        top: 50%;\n        left: 0;\n        display: block;\n        width: 40px;\n      }\n    }\n  }\n  .CG2-features__itemBody {\n    position: relative;\n    &:before {\n      content: counter( CG2features );\n      line-height: 1;\n      font-size: 60px;\n      font-family: $fontCode;\n      display: block;\n      position: absolute;\n      top: 0;\n      left: -120px;\n      @include max-screen( $breakpoint-middle ) {\n        content: none;\n      }\n    }\n  }\n  .CG2-features__embeddedTweets {\n    display: flex;\n    margin: 20px -5px;\n    @include max-screen( $breakpoint-middle ) {\n      display: block;\n    }\n    twitterwidget,\n    iframe {\n      width: 50%;\n      margin: 10px 5px;\n      @include max-screen( $breakpoint-middle ) {\n        width: 100%;\n        margin: 10px auto;\n      }\n    }\n  }\n\n\n/* ==========================================================================\n   CG2-howYouReceive\n   ========================================================================== */\n/*\n---\nname: howYouReceive\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<section class=\"CG2-howYouReceive\">\n  <header class=\"CG2-howYouReceive__header\">\n    <h2 class=\"CG2-howYouReceive__heading\">CodeGridの配信形式は、<br class=\"CG2--disableLargeScreen CG2--disableMiddleScreen\">Web・iOSアプリ × メールマガジン</h2>\n  </header>\n  <div class=\"CG2-howYouReceive__list\">\n    <div class=\"CG2-howYouReceive__item\">\n      <div class=\"CG2-howYouReceive__image\">\n        <img src=\"__dummy__320x180\" alt=\"\" width=\"320\">\n      </div>\n      <div class=\"CG2-howYouReceive__text\">\n        <p>フロントエンドに特化した<br>300本以上の技術記事が読めるWebアプリ。<br><a href=\"\">Chromeアプリもご用意しています</a></p>\n      </div>\n    </div>\n    <div class=\"CG2-howYouReceive__item\">\n      <div class=\"CG2-howYouReceive__image\">\n        <img src=\"__dummy__320x180\" alt=\"\" width=\"320\">\n      </div>\n      <div class=\"CG2-howYouReceive__text\">\n        <p>iPhoneからアクセスする最良の方法。</p>\n        <p><a href=\"\" style=\"display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg), no-repeat;width:135px;height:40px;background-size:contain;\"></a></p>\n      </div>\n    </div>\n    <div class=\"CG2-howYouReceive__item\">\n      <div class=\"CG2-howYouReceive__image\">\n        <img src=\"__dummy__320x180\" alt=\"\" width=\"320\">\n      </div>\n      <div class=\"CG2-howYouReceive__text\">\n        <p>毎週木曜日配信（月4回）。<br>最新記事が定期的に届くメールマガジン。<br><a href=\"\">サンプルへ</a></p>\n      </div>\n    </div>\n  </div>\n</section>\n```\n*/\n.CG2-howYouReceive {}\n\n.CG2-howYouReceive__header {\n  text-align: center;\n  position: relative;\n  margin: 0 0 20px;\n  @include min-screen( $breakpoint-middle ) {\n    margin: 0 -28px 20px;\n    // 背後に線を引く\n    &:before {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      height: 0;\n      border-top: 1px solid #000;\n    }\n  }\n}\n.CG2-howYouReceive__heading {\n  color: #282828;\n  font-size: 16px;\n  font-weight: normal;\n  // 文字に背景の線が重ならないように\n  @include min-screen( $breakpoint-middle ) {\n    font-size: 24px;\n    position: relative;\n    display: inline-block;\n    margin: 0;\n    padding: 0 40px;\n    background: #fff;\n  }\n}\n\n// 画像のレイアウト\n@include min-screen( $breakpoint-middle ) {\n  .CG2-howYouReceive__list {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-column-gap: 2px;\n    justify-items: center;\n    font-size: 14px;\n\n    display: -ms-grid;\n    -ms-grid-columns: 1fr 2px 1fr 2px 1fr; // IE11にはgapがない\n  }\n  // IE11用レイアウト\n  @for $i from 1 through 3 {\n    .CG2-howYouReceive__item:nth-of-type(#{$i}) {\n      -ms-grid-column: #{$i * 2 - 1}; // gapぶんカラムむ位置を進める\n    }\n  }\n}\n.CG2-howYouReceive__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.CG2-howYouReceive__image {\n  img {\n    vertical-align: bottom;\n    width: 100%;\n    max-width: 320px;\n  }\n}\n.CG2-howYouReceive__text {\n  text-align: center;\n}\n\n\n/* ==========================================================================\n   CG2-bookInfo [www top]\n   ========================================================================== */\n/*\n---\nname: bookInfo\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<section class=\"CG2-bookInfo\">\n  <h2 class=\"CG2-bookInfo__heading\">CodeGridが書籍になりました</h2>\n  <div class=\"CG2-bookInfo__body\">\n    <div class=\"CG2-bookInfo__images\">\n      <ul>\n        <li><img src=\"__dummy__100x140\" alt=\"\" width=\"100 height=\"140\"\"></li>\n        <li><img src=\"__dummy__100x140\" alt=\"\" width=\"100 height=\"140\"\"></li>\n      </ul>\n    </div>\n    <div class=\"CG2-bookInfo__text\">\n      <p>書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。</p>\n      <a class=\"CG2-button\" href=\"#\">書籍について</a>\n    </div>\n  </div>\n</section>\n```\n*/\n.CG2-bookInfo {}\n\n.CG2-bookInfo__heading {\n color: #282828;\n font-size: 24px;\n font-weight: normal;\n text-align: center;\n margin: 0 0 30px;\n @include max-screen( $breakpoint-middle ) {\n   font-size: 16px;\n   margin-bottom: 20px;\n }\n}\n  .CG2-bookInfo__body {\n    display: table;\n    @include max-screen( $breakpoint-middle ) {\n      display: block;\n    }\n  }\n    .CG2-bookInfo__images {\n      font-size: 0;\n      white-space: nowrap;\n      vertical-align: top;\n      display: table-cell;\n      padding-right: 25px;\n      @include max-screen( $breakpoint-middle ) {\n        display: block;\n        padding: 0;\n      }\n      ul {\n        display: table;\n        padding: 0;\n        margin: 0;\n        @include max-screen( $breakpoint-middle ) {\n          margin: 0 auto 20px;\n        }\n      }\n        li {\n          display: table-cell;\n          list-style: none;\n          width: 1%;\n          padding-right: 10px;\n          margin: 0;\n          @include max-screen( $breakpoint-middle ) {\n            width: auto;\n            padding: 0 10px;\n            margin: 0;\n          }\n        }\n          img {\n            display: block;\n          }\n    }\n    .CG2-bookInfo__text {\n      vertical-align: top;\n      display: table-cell;\n      font-size: 14px;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 12px;\n      }\n      p {\n        margin: 0 0 20px;\n      }\n    }\n\n\n/* ==========================================================================\n   CG2-circulation\n   ========================================================================== */\n/*\n---\nname: circulation\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<div class=\"CG2-circulation\">\n  <div class=\"CG2-circulation__lastUpdate\">（最新号 2015年5月21日発行）</div>\n  <div class=\"CG2-circulation__dataList\">\n    <div class=\"CG2-circulation__data\">\n      <div class=\"CG2-circulation__dataLabel\">発行号数</div>\n      <div class=\"CG2-circulation__dataNumber\">151</div>\n      <div class=\"CG2-circulation__dataUnit\">号</div>\n    </div>\n    <div class=\"CG2-circulation__data\">\n      <div class=\"CG2-circulation__dataLabel\">特集</div>\n      <div class=\"CG2-circulation__dataNumber\">70</div>\n      <div class=\"CG2-circulation__dataUnit\">シリーズ</div>\n    </div>\n    <div class=\"CG2-circulation__data\">\n      <div class=\"CG2-circulation__dataLabel\">記事数</div>\n      <div class=\"CG2-circulation__dataNumber\">321</div>\n      <div class=\"CG2-circulation__dataUnit\">本</div>\n    </div>\n  </div>\n</div>\n```\n*/\n\n.CG2-circulation {\n  @include max-screen( $breakpoint-middle ) {\n    display: table;\n    width: 100%;\n  }\n}\n  .CG2-circulation__lastUpdate {\n    font-family: $fontSerif;\n    font-feature-settings: \"palt\";\n    float: right;\n    @include max-screen( $breakpoint-middle ) {\n      float: none;\n      display: table-footer-group;\n    }\n  }\n  .CG2-circulation__dataList {\n    display: table;\n    @include max-screen( $breakpoint-middle ) {\n      display: table-header-group;\n    }\n  }\n    .CG2-circulation__data {\n      display: table-cell;\n      font-size: 0;\n      padding-left: 50px;\n      @include max-screen( $breakpoint-middle ) {\n        display: inline-block;\n        padding: 0 20px 0 0;\n      }\n      &:first-child {\n        padding-left: 0;\n      }\n    }\n      .CG2-circulation__dataLabel {\n        font-size: 16px;\n        font-family: $fontSerif;\n        font-feature-settings: \"palt\";\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 12px;\n        }\n      }\n      .CG2-circulation__dataNumber {\n        font-size: 64px;\n        font-family: $fontCode;\n        line-height: 1.2;\n        display: inline;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 40px;\n        }\n      }\n      .CG2-circulation__dataUnit {\n        font-size: 32px;\n        font-family: $fontSerif;\n        font-feature-settings: \"palt\";\n        line-height: 1.2;\n        display: inline;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 20px;\n        }\n      }\n\n\n/* ==========================================================================\n   CG2-featured\n   ========================================================================== */\n/*\n---\nname: featured\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<section class=\"CG2-featured\">\n  <header class=\"CG2-featured__header\">\n    <h2 class=\"CG2-featured__heading\">人気の特集</h2>\n    <div class=\"CG2-featured__summary\">多くの購読者に活用されるCodeGridのロングセラー</div>\n  </header>\n\n  <div class=\"CG2-seriesList\">\n    CG2-seriesList を入れる\n  </div>\n\n</section>\n```\n*/\n.CG2-featured {\n  margin: 80px 0;\n  @include max-screen( $breakpoint-middle ) {\n    margin-top: 40px;\n    margin-bottom: 40px;\n  }\n}\n  .CG2-featured__header {\n    line-height: 1.2;\n    text-align: center;\n    margin-bottom: 30px;\n  }\n    .CG2-featured__heading {\n      font-size: 32px;\n      font-family: $fontSerif;\n      font-feature-settings: \"palt\";\n      font-weight: bold;\n      margin: 0.6em 0 15px;\n      @include max-screen( $breakpoint-small ) {\n        font-size: 20px;\n      }\n    }\n    .CG2-featured__summary {\n      font-size: 16px;\n      display: inline-block;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 12px;\n      }\n    }\n\n\n/* ==========================================================================\n   CG2-categoryIntro\n   ========================================================================== */\n/*\n---\nname: categoryIntro\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<div class=\"CG2-categoryIntro\">\n  <ul>\n    <li><span class=\"CG2-icon-cat-elementary CG2-icon--colored\"></span>入門</li>\n    <li><span class=\"CG2-icon-cat-mastering CG2-icon--colored\"></span>実践</li>\n    <li><span class=\"CG2-icon-cat-standards CG2-icon--colored\"></span>仕様解説</li>\n    <li><span class=\"CG2-icon-cat-talk CG2-icon--colored\"></span>座談会</li>\n    <li><span class=\"CG2-icon-cat-architecture CG2-icon--colored\"></span>設計</li>\n    <li><span class=\"CG2-icon-cat-report CG2-icon--colored\"></span>レポート</li>\n    <li><span class=\"CG2-icon-cat-design CG2-icon--colored\"></span>デザイン</li>\n    <li><span class=\"CG2-icon-cat-future CG2-icon--colored\"></span>未来・次世代</li>\n    <li><span class=\"CG2-icon-cat-work-style CG2-icon--colored\"></span>仕事術</li>\n    <li><span class=\"CG2-icon-cat-survey CG2-icon--colored\"></span>アンケート</li>\n    <li><span class=\"CG2-icon-cat-interview CG2-icon--colored\"></span>インタビュー</li>\n    <li><span class=\"CG2-icon-cat-discussion CG2-icon--colored\"></span>ディスカッション</li>\n  </ul>\n</div>\n```\n*/\n.CG2-categoryIntro {\n  ul {\n    color: #282828;\n    font-size: 0;\n    text-align: center;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    @include max-screen( $breakpoint-middle ) {\n      margin-left: -10px;\n      margin-right: -10px;\n    }\n    &:after {\n      content: '';\n      display: block;\n      margin-top: -30px;\n    }\n  }\n  li {\n    font-size: 14px;\n    text-align: center;\n    vertical-align: top;\n    display: inline-block;\n    width: 130px;\n    padding: 0;\n    margin: 0 0 30px;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 10px;\n      width: 25%;\n    }\n  }\n  span[class*=\"CG2-icon-cat\"] {\n    font-size: 80px;\n    display: block;\n    margin-bottom: 10px;\n    position: static;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 50px;\n    }\n    &:before {\n      display: block;\n    }\n  }\n}\n\n\n/* ==========================================================================\n   CG2-quotes\n   ========================================================================== */\n/*\n---\nname: quotes\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n  - www-top-item\n---\n\n```html\n<section class=\"CG2-quotes\">\n  <header class=\"CG2-quotes__header\">\n    <h2 class=\"CG2-quotes__heading\">CodeGrid関連ツイート</h2>\n    <div class=\"CG2-quotes__headerSub\">\n      <a href=\"https://twitter.com/codegrid\">@CodeGridで最新情報を配信しています <span class=\"CG2-icon-twitter\"></span></a>\n    </div>\n  </header>\n  <div class=\"CG2-quotes__body\">\n    <div class=\"CG2-quotes__list\">\n      <ul>\n        <li>\n          <blockquote class=\"twitter-tweet\" data-conversation=\"none\" lang=\"ja\"><p lang=\"ja\" dir=\"ltr\">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href=\"https://t.co/dJMzth2PlB\">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href=\"https://twitter.com/yomotsu/status/627256992340574209\">2015, 7月 31</a></blockquote>\n        </li>\n        <li>\n          <blockquote class=\"twitter-tweet\" data-conversation=\"none\" lang=\"ja\"><p lang=\"ja\" dir=\"ltr\">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href=\"https://t.co/dJMzth2PlB\">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href=\"https://twitter.com/yomotsu/status/627256992340574209\">2015, 7月 31</a></blockquote>\n        </li>\n        <li>\n          <blockquote class=\"twitter-tweet\" data-conversation=\"none\" lang=\"ja\"><p lang=\"ja\" dir=\"ltr\">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href=\"https://t.co/dJMzth2PlB\">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href=\"https://twitter.com/yomotsu/status/627256992340574209\">2015, 7月 31</a></blockquote>\n        </li>\n      </ul>\n      <script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n    </div>\n    <div class=\"CG2-quotes__timeline\">\n      <a class=\"twitter-timeline\" href=\"https://twitter.com/hashtag/codegrid\" data-widget-id=\"628812249822408705\">#codegrid のツイート</a>\n      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\\\"://platform.twitter.com/widgets.js\\\";fjs.parentNode.insertBefore(js,fjs);}}(document,\\\"script\\\",\\\"twitter-wjs\\\");</script>\n    </div>\n  </div>\n</section>\n```\n\nJSでtwitterのiframe内にstyleを挿入してmax-widthを打ち消す大きさを調整する必要がある\n\n<script>\nwindow.addEventListener( 'load', function () {\n  var i,l;\n  var css = [\n    '.EmbeddedTweet, .timeline {',\n      'box-sizing: border-box;',\n      'max-width: none !important;',\n      'width: 100% !important;',\n    '}',\n    '.sandboxroot.env-narrow p {',\n      'font-size: 12px;',\n    '}'\n  ].join( '' );\n  var iframe = document.querySelectorAll( 'iframe[id^=twitter-widget-' );\n  for ( i = 0, l = iframe.length; i < l; i++ ) {\n    var doc = iframe[ i ].contentWindow.document;\n    var head = doc.querySelector( 'head' );\n    var style = doc.createElement( 'style' );\n    style.textContent = css;\n    head.appendChild( style );\n  }\n} );\n</script>\n\n<pre><code>window.addEventListener( 'load', function () {\n  var i,l;\n  var css = [\n    '.EmbeddedTweet, .timeline {',\n      'box-sizing: border-box;',\n      'max-width: none !important;',\n      'width: 100% !important;',\n    '}',\n    '.sandboxroot.env-narrow p {',\n      'font-size: 12px;',\n    '}'\n  ].join( '' );\n  var iframe = document.querySelectorAll( 'iframe[id^=twitter-widget-' );\n  for ( i = 0, l = iframe.length; i < l; i++ ) {\n    var doc = iframe[ i ].contentWindow.document;\n    var head = doc.querySelector( 'head' );\n    var style = doc.createElement( 'style' );\n    style.textContent = css;\n    head.appendChild( style );\n  }\n} );</code></pre>\n*/\n.CG2-quotes {\n  @include clearfix();\n  padding-top: 20px;\n  margin: 0 -10px;\n}\n.CG2-quotes__header {\n    display: table;\n    width: calc( 100% + 46px );\n    border-bottom: 1px solid #5c5c5c;\n    margin: 0 -28px 30px;\n    @include max-screen( $breakpoint-middle ) {\n      display: block;\n      width: auto;\n      margin: 0 0 10px;\n      padding: 0 10px 5px;\n    }\n  }\n  .CG2-quotes__heading {\n    font-size: 32px;\n    font-family: $fontSerif;\n    font-feature-settings: \"palt\";\n    font-weight: normal;\n    line-height: 1.2;\n    vertical-align: middle;\n    display: table-cell;\n    padding: 0 0 30px 28px;\n    margin: 0;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 20px;\n      display: block;\n      padding: 0;\n    }\n  }\n  .CG2-quotes__headerSub {\n    font-size: 14px;\n    text-align: right;\n    vertical-align: middle;\n    display: table-cell;\n    padding: 0 28px 30px 0;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 12px;\n      display: block;\n      padding: 0;\n      display: none;\n    }\n    a {\n      @include resetLink();\n    }\n  }\n  .CG2-quotes__body {\n    display: table;\n    width: 100%;\n    @include max-screen( $breakpoint-middle ) {\n      display: block;\n      width: auto;\n    }\n  }\n    .CG2-quotes__list {\n      vertical-align: top;\n      box-sizing: border-box;\n      display: table-cell;\n      width: 60%;\n      padding-right: 20px;\n      @include max-screen( $breakpoint-middle ) {\n        display: block;\n        width: auto;\n        padding-right: 0;\n      }\n      ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n      }\n      li {\n        margin: 0 0 20px;\n        @include max-screen( $breakpoint-middle ) {\n          margin-bottom: 10px;\n        }\n      }\n      iframe {\n        // twitter\n        display: block !important;\n        width: 100% !important;\n        max-width: 100% !important;\n        margin: 0 !important;\n      }\n    }\n    .CG2-quotes__timeline {\n      vertical-align: top;\n      box-sizing: border-box;\n      display: table-cell;\n      width: 40%;\n      padding-left: 20px;\n      @include max-screen( $breakpoint-middle ) {\n        display: block;\n        width: auto;\n        padding-left: 0;\n      }\n      iframe {\n        // twitter\n        display: block !important;\n        width: 100% !important;\n        max-width: 100% !important;\n        margin: 0 !important;\n        @include max-screen( $breakpoint-middle ) {\n          height: 300px !important;\n        }\n      }\n    }\n\n\n/* ==========================================================================\n   CG2-bannerHeader\n   ========================================================================== */\n/*\n---\nname: bannerHeader\ncategory:\n  - Blocks/www\ntag:\n  - www-item\ntemplateItem:\n  - true\n---\n\n```html\n<div class=\"CG2-bannerHeader\">\n  <div class=\"CG2-bannerHeader__inner\">\n    <h1 class=\".CG2-bannerHeader__heading\">チームのフロントエンド開発力を<br>根底からアップしよう</h1>\n    <p>団体購読とは、購読管理者の方に複数の購読者を取りまとめていただき、毎月、購読者全員の購読料を一括した請求書を発行し、まとめてお支払いいただくシステムです。</p>\n  </div>\n  <div class=\"CG2-bannerHeader__bg\" style=\"background-image: url( '/build/img/_01.jpg' )\"></div>\n</div>\n```\n*/\n.CG2-bannerHeader {\n  @include blurry-parent();\n  color: #fff;\n  padding: 130px 0;\n  background-position: 50% 50%;\n  background-size: cover;\n  @include max-screen( $breakpoint-middle ) {\n    padding: 60px 15px;\n  }\n}\n  .CG2-bannerHeader__inner {\n    max-width: 740px;\n    margin: 0 auto;\n    p {\n      line-height: 2;\n      text-align: center;\n      margin: 20px 0;\n    }\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n    @include max-screen( $breakpoint-middle ) {\n      max-width: none;\n      p {\n        font-size: 12px;\n      }\n    }\n  }\n  .CG2-bannerHeader__heading {\n    font-family: $fontSerif;\n    font-feature-settings: \"palt\";\n    font-size: 32px;\n    font-weight: normal;\n    text-align: center;\n    margin: 0 0 30px;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 20px;\n      margin-bottom: 20px;\n    }\n  }\n  .CG2-bannerHeader__bg {\n    @include blurry();\n  }\n\n\n/* ==========================================================================\n   CG2-form\n   ========================================================================== */\n/*\n---\nname: form\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<section class=\"CG2-form\">\n  <form>\n    <div class=\"CG2-form__header\">\n      <h2 class=\"CG2-form__heading\">団体購読のお申込み</h2>\n      <p>購読者お一人につき、月額800円（税抜）<br>月の途中で購読者の登録・削除があった場合は日割り計算されます。</p>\n    </div>\n    <p class=\"CG2--alignCenter\">購読者お一人につき、月額800円（税抜）<br>月の途中で購読者の登録・削除があった場合は日割り計算されます。</p>\n    <div class=\"CG2-form__table\">\n      <table>\n        <col width=\"30%\">\n        <col width=\"70%\">\n        <tr>\n          <th>\n            <label>会社名・団体名</label>\n            <span class=\"CG2-form__required\">（必須）</span>\n          </th>\n          <td>\n            <input type=\"text\" placeholder=\"例）株式会社 ピクセルグリッド\">\n          </td>\n        </tr>\n        <tr>\n          <th>\n            <label>管理者のメールアドレス</label>\n            <span class=\"CG2-form__required\">（必須）</span>\n          </th>\n          <td>\n            <input type=\"text\" placeholder=\"例）codegrid@pxgrid.com\">\n          </td>\n        </tr>\n        <tr>\n          <th>\n            <label>お問い合わせ事項</label>\n            <span class=\"CG2-form__required\">（必須）</span>\n          </th>\n          <td>\n            <select>\n              <option value=\"\" class=\"CG2-form__placeholder\">お問い合わせ事項、お問い合わせの内容をお選びください。</option>\n              <option>記事内容について</option>\n              <option>CodeGridの利用全般について</option>\n              <option>課金について</option>\n              <option>団体購読について</option>\n              <option>その他</option>\n            </select>\n          </td>\n        </tr>\n        <tr>\n          <th>\n            <label>お問い合わせ内容</label>\n            <span class=\"CG2-form__required\">（必須）</span>\n          </th>\n          <td>\n            <textarea placeholder=\"記事内容についてのお問い合わせは、必ず該当記事のURLを明記してください。\" cols=\"50\" rows=\"6\"></textarea>\n          </td>\n        </tr>\n      </table>\n    </div>\n    <div class=\"CG2-buttonContainer\">\n      <ul>\n        <li class=\"CG2-buttonContainer__item--full\">\n          <button class=\"CG2-button CG2-button--primary CG2-button--large\" type=\"submit\">送信</button>\n        </li>\n      </ul>\n    </div>\n  </form>\n</section>\n```\n\n*/\n\nsection.CG2-form {\n  padding: 50px;\n  margin: 80px -28px;\n  background: #eee;\n  form {\n    margin: 0;\n  }\n  p {}\n  @include max-screen( $breakpoint-middle ) {\n    padding: 25px 20px;\n    margin: 40px -20px;\n  }\n}\n    .CG2-form__header {\n      margin: 0 0 30px;\n      p {\n        text-align: center;\n        margin: 16px 0 0;\n      }\n      @include max-screen( $breakpoint-small ) {\n        margin-bottom: 16px;\n        p {\n          text-align: left;\n        }\n      }\n    }\n    .CG2-form__heading {\n      font-size: 32px;\n      font-family: $fontSerif;\n      font-feature-settings: \"palt\";\n      font-weight: normal;\n      line-height: 1.6;\n      text-align: center;\n      margin: 0 0 20px;\n      @include max-screen( $breakpoint-small ) {\n        font-size: 20px;\n        margin-bottom: 16px;\n      }\n    }\n    .CG2-form__table {\n      table {\n        width: 100%;\n      }\n        th {\n          text-align: left;\n          vertical-align: middle;\n          padding: 8px;\n        }\n        td {\n          padding: 8px;\n        }\n          input[type=\"text\"],\n          input[type=\"url\"],\n          input[type=\"email\"],\n          select,\n          textarea {\n            box-sizing: border-box;\n            width: 100%;\n            padding: 8px 14px;\n            border: 1px solid #ccc;\n            border-radius: 3px;\n            line-height: 1.4; // FIXME: FirefoxとChromeの違いをなんとかしたい\n          }\n          select {\n            // FIXME: インラインSVG…\n            // 元ファイルは src/assets2/font/codegrid-icon/uE603-down.svg\n            // 以下をdata URLに。\n            // <svg width=\"26\" height=\"14\" viewBox=\"0 0 26 14\" xmlns=\"http://www.w3.org/2000/svg\">\n            //   <path fill=\"#777\" d=\"M3 0L0 2.7 13 14 26 2.7 23 0 13 8.7\"/>\n            // </svg>\n            background-image: url(data:image/svg+xml,%3Csvg%20width=%2226%22%20height=%2214%22%20viewBox=%220%200%2026%2014%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill=%22%23777%22%20d=%22M3%200L0%202.7%2013%2014%2026%202.7%2023%200%2013%208.7%22/%3E%3C/svg%3E);\n            background-repeat: no-repeat;\n            background-size: 14px 8px;\n            background-position: right 14px center;\n            background-color: #fff;\n            padding-right: 40px;\n            @include max-screen( $breakpoint-middle ) {\n              background-position: right 14px center;\n            }\n          }\n          select {\n            -webkit-appearance: initial;\n          }\n          select {\n            -moz-appearance: initial;\n          }\n          ::placeholder {\n            opacity: 1; // for Firefox\n            color: #767676;\n          }\n          select.CG2-form__placeholder_selected {\n            color: #767676;\n          }\n      @include max-screen( $breakpoint-small ) {\n        @include tableToBlock();\n        th,\n        td {\n          padding: 0;\n          width: 100%;\n        }\n        th {margin-bottom: 6px;}\n        td {margin-bottom: 10px;}\n          input[type=\"text\"],\n          input[type=\"url\"],\n          input[type=\"email\"],\n          select,\n          textarea {\n            font-size: 16px;\n          }\n      }\n    }\n      span.CG2-form__required {\n        color: #ff0000;\n        font-size: 12px;\n        font-weight: normal;\n        line-height: 22px;\n        margin-left: 10px;\n        float: right;\n        @include max-screen( $breakpoint-small ) {\n          float: none;\n          margin-left: 0;\n        }\n      }\n    .CG2-form__legal {\n      font-size: 12px;\n      text-align: center;\n      margin: 15px 0;\n      a {\n        color: inherit;\n      }\n      @include max-screen( $breakpoint-small ) {\n        font-size: 8px;\n        text-align: left;\n        margin: 5px;\n      }\n    }\n    .CG2-form__notice {\n      font-size: 12px;\n      text-align: center;\n      margin: 15px 0;\n      @include max-screen( $breakpoint-small ) {\n        font-size: 8px;\n        text-align: left;\n        margin: 5px;\n      }\n    }\n\n/* ==========================================================================\n   CG2-flowExplanation\n   ========================================================================== */\n/*\n---\nname: flowExplanation\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-flowExplanation\">\n  <section class=\"CG2-flowExplanation__item\">\n    <div class=\"CG2-flowExplanation__image\">\n      <img src=\"__dummy__320x180\" alt=\"\" width=\"320\" height=\"180\">\n    </div>\n    <div class=\"CG2-flowExplanation__text\">\n      <h3 class=\"CG2-flowExplanation__heading\">お申込頂くと、管理者様へ団体管理画面へのリンクが送信されます</h3>\n      <p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>\n    </div>\n  </section>\n\n  <section class=\"CG2-flowExplanation__item\">\n    <div class=\"CG2-flowExplanation__image\">\n      <img src=\"__dummy__320x180\" alt=\"\" width=\"320\" height=\"180\">\n    </div>\n    <div class=\"CG2-flowExplanation__text\">\n      <h3 class=\"CG2-flowExplanation__heading\">管理画面にて、パスワードの設定をお願いします</h3>\n      <p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>\n    </div>\n  </section>\n</div>\n```\n\n*/\n.CG2-flowExplanation {\n  margin: 40px 0;\n  counter-reset: CG2flowExplanation;\n  @include max-screen( $breakpoint-small ) {\n    margin: 30px 0;\n  }\n}\n  section.CG2-flowExplanation__item {\n    counter-increment: CG2flowExplanation;\n    display: table;\n    width: 100%;\n    margin: 50px 0;\n    @include max-screen( $breakpoint-small ) {\n      display: block;\n      margin: 30px 0;\n    }\n  }\n    .CG2-flowExplanation__image {\n      vertical-align: top;\n      display: table-cell;\n      img {\n        display: block;\n        border: 1px solid #dbdbdb;\n      }\n      @include max-screen( $breakpoint-middle ) {\n        width: 40%;\n        img {\n          max-width: 100%;\n          height: auto;\n        }\n      }\n      @include max-screen( $breakpoint-small ) {\n        display: block;\n        width: auto;\n        margin: 0 0 10px;\n        img {\n          margin: 0 auto;\n        }\n      }\n    }\n    .CG2-flowExplanation__text {\n      vertical-align: top;\n      display: table-cell;\n      padding-left: 66px;\n      p {}\n      @include max-screen( $breakpoint-small ) {\n        padding-left: 35px;\n        p {\n          font-size: 12px;\n        }\n      }\n    }\n    .CG2-flowExplanation__heading {\n      font-size: 24px;\n      font-weight: normal;\n      margin: 0 0 20px;\n      @include max-screen( $breakpoint-small ) {\n        font-size: 12px;\n        font-weight: bold;\n        margin: 0 0 10px;\n      }\n      &:before {\n        content: counter( CG2flowExplanation );\n        font-size: 32px;\n        font-family: $fontCode;\n        line-height: 24px;\n        vertical-align: middle;\n        display: inline-block;\n        width: 1.2em;\n        margin-left: -1.2em;\n        @include max-screen( $breakpoint-small ) {\n          font-size: 24px;\n          font-weight: normal;\n          line-height: 12px;\n          width: 26px;\n          margin-left: -26px;\n        }\n      }\n    }\n\n\n/* ==========================================================================\n   CG2-faq\n   ========================================================================== */\n/*\n---\nname: faq\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-faq\">\n  <h3 class=\"CG2-faq__question\">\n    PayPalアカウントやWebMoneyのほかに、銀行振込など別の支払い方法はありますか？\n  </h3>\n  <div class=\"CG2-faq__answer\">\n    <p>個人で購読される方は、PayPalアカウント、もしくはWebMoneyのお支払いのみ受け付けております。団体で購読される方は、請求書払いで銀行振込ができます。</p>\n    <aside class=\"CG2-faq-eg\">\n      <h4 class=\"CG2-faq-eg__heading\">未払い購読料の扱い（例）</h4>\n      <ul>\n        <li>前月未払い : 864円</li>\n        <li>今月請求 : 1,728円（前回未払い864円＋今回購読料864円）</li>\n      </ul>\n    </aside>\n  </div>\n</div>\n```\n\n*/\n\n.CG2-faq {\n  font-size: 16px;\n  margin: 40px 0;\n  padding: 0 0 0 50px;\n  @include max-screen( $breakpoint-middle ) {\n    font-size: 12px;\n    margin: 20px -10px;\n    padding-left: 38px;\n  }\n}\n  .CG2-faq__question {\n    font-weight: bold;\n    line-height: 1.5; //16(font-size) * 1.5(line-height) = 24(height)\n    position: relative;\n    min-height: 24px;\n    margin: 0;\n    padding: 8px 0;\n    @include max-screen( $breakpoint-middle ) {\n      min-height: 16px;\n      padding-top: 6px;\n      padding-bottom: 6px;\n    }\n    &:before {\n      @include icon( 'question' );\n      color: #282828;\n      font-size: 40px;\n      line-height: 40px;\n      position: absolute;\n      top: 0;\n      left: -50px;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 28px;\n        line-height: 28px;\n        left: -38px;\n      }\n    }\n  }\n  .CG2-faq__answer {\n    p {\n      margin-top: 0;\n      margin-bottom: 1em;\n    }\n  }\n  .CG2-faq-eg {\n    padding: 20px 20px 20px 50px;\n    margin: 20px 0 0 -50px;\n    background: #eee;\n    @include max-screen( $breakpoint-middle ) {\n      padding: 10px 10px 10px 38px;\n      margin-left: -38px;\n    }\n    .CG2-faq-eg__heading {\n      font-size: 16px;\n      font-weight: bold;\n      margin: 0;\n    }\n    ul {\n      margin-top: 0;\n      margin-bottom: 0;\n      padding-left: 30px;\n    }\n  }\n\n\n/* ==========================================================================\n   CG2-additionalInfoLink\n   ========================================================================== */\n/*\n---\nname: additionalInfoLink\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-additionalInfoLink\">\n  <div class=\"CG2-additionalInfoLink__text\">\n    団体購読では、請求書払いにも対応しています<span class=\"CG2-additionalInfoLink__sub\">小さい文字</span>\n  </div>\n  <div class=\"CG2-additionalInfoLink__link\"><a class=\"CG2-button\" href=\"#\">団体購読について</a></div>\n</div>\n```\n\n*/\n.CG2-additionalInfoLink {\n  display: table;\n  width: 100%;\n  .CG2-additionalInfoLink+& {\n    margin-top: 30px;\n  }\n  @include max-screen( $breakpoint-small ) {\n    display: block;\n    width: auto;\n  }\n}\n  .CG2-additionalInfoLink__text {\n    font-size: 24px;\n    line-height: 1.2;\n    vertical-align: middle;\n    display: table-cell;\n    @include max-screen( $breakpoint-small ) {\n      font-size: 16px;\n      text-align: center;\n      display: block;\n    }\n  }\n  .CG2-additionalInfoLink__sub {\n    font-size: 14px;\n  }\n  .CG2-additionalInfoLink__link {\n    text-align: right;\n    vertical-align: middle;\n    display: table-cell;\n    @include max-screen( $breakpoint-small ) {\n      text-align: center;\n      display: block;\n      margin: 1em 0 0;\n      .CG2-button {\n        font-size: 18px;\n        display: block;\n        padding: .3em;\n      }\n    }\n  }\n\n\n/* ==========================================================================\n   CG2-publication\n   ========================================================================== */\n/*\n---\nname: publication\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<section class=\"CG2-publication\">\n  <div class=\"CG2-publication__image\">\n    <img src=\"__dummy__206x290\" alt=\"\" width=\"206\" height=\"290\">\n  </div>\n  <div class=\"CG2-publication__body\">\n    <div class=\"CG2-publication__header\">\n      <h2 class=\"CG2-publication__heading\">Web制作者のためのGit入門</h2>\n    </div>\n    <div class=\"CG2-publication__headingSub\">\n      ピクセル グリオ (著), 神戸 克巳 (著), CodeGrid (編集)  2014/6/28\n    </div>\n    <p>本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。</p>\n    <div class=\"CG2-publication__buttonContainer\">\n      <ul>\n        <li><a class=\"CG2-button\" href=\"#\">Amazonで購入</a></li>\n      </ul>\n    </div>\n  </div>\n</section>\n```\n\n*/\nsection.CG2-publication {\n  display: table;\n  width: 100%;\n  margin: 40px 0;\n}\n  .CG2-publication__image {\n    vertical-align: top;\n    display: table-cell;\n    padding-right: 30px;\n    max-width: 206px;\n    width: 20%;\n    @include max-screen( $breakpoint-middle ) {\n      padding-right: 15px;\n    }\n    img {\n      display: block;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .CG2-publication__body {\n    font-size: 16px;\n    vertical-align: top;\n    display: table-cell;\n    @include max-screen( $breakpoint-middle ) {\n      font-size: 12px;\n    }\n    p {}\n  }\n    .CG2-publication__header {\n      margin: 0 0 25px;\n      @include max-screen( $breakpoint-middle ) {\n        margin-bottom: 15px;\n      }\n      .CG2-publication__heading {\n        font-size: 24px;\n        font-weight: normal;\n        margin: 0;\n        @include max-screen( $breakpoint-middle ) {\n          font-size: 16px;\n        }\n      }\n    }\n    .CG2-publication__headingSub {\n      font-size: 14px;\n      margin: -20px 0 25px;\n      @include max-screen( $breakpoint-middle ) {\n        font-size: 10px;\n        margin-top: -15px;\n        margin-bottom: 15px;\n      }\n    }\n    .CG2-publication__buttonContainer {\n      margin-top: 30px;\n      @include max-screen( $breakpoint-small ) {\n        margin-top: 10px;\n      }\n      ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n      }\n      li {\n        display: inline-block;\n        margin: 0 20px 0 0;\n        @include max-screen( $breakpoint-small ) {\n          display: block;\n          margin-bottom: 10px;\n        }\n      }\n    }\n\n\n\n/* ==========================================================================\n   CG2-term\n   ========================================================================== */\n/*\n---\nname: term\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-term\">\n  <dl>\n    <dt>Coffee</dt>\n    <dd>Black hot drink</dd>\n    <dt>Milk</dt>\n    <dd>White cold drink</dd>\n  </dl>\n</div>\n```\n\n*/\n.CG2-term {\n  dl {}\n  dt {\n    font-weight: bold;\n  }\n  dd {\n    margin: 0 0 15px;\n  }\n}\n\n/* ==========================================================================\n   CG2-lastUpdate\n   ========================================================================== */\n/*\n---\nname: lastUpdate\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-lastUpdate\">Last Update: 20xx-08-01</div>\n```\n\n*/\n.CG2-lastUpdate {\n  margin-top: 80px;\n  @include max-screen( $breakpoint-middle ) {\n    margin-top: 40px;\n  }\n}\n\n\n\n/* ==========================================================================\n   CG2-imageContainer\n   ========================================================================== */\n/*\n---\nname: imageContainer\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-imageContainer\">\n  <div class=\"CG2-imageContainer__image\">\n    <img src=\"__dummy__480x180\" alt=\"\" width=\"480\" height=\"180\">\n  </div>\n</div>\n```\n\n*/\n.CG2-imageContainer {\n  font-size: 0;\n  margin: 40px 0;\n  text-align: center;\n  &:before,\n  &:after {\n    content: '';\n    display: block;\n    height: 1px;\n  }\n  &:before {\n    margin-bottom: -10px;\n  }\n  &:after {\n    margin-top: -10px;\n  }\n}\n\n.CG2-imageContainer__image {\n  vertical-align: middle;\n  display: inline-block;\n  margin: 10px 30px;\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n}\n\n\n/* ==========================================================================\n   holizontalLine\n   ========================================================================== */\n/*\n---\nname: holizontalLine\ncategory:\n  - Content\ntag:\n  - content\n---\n\n```html\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>\n\n<div class=\"CG2-holizontalLine\"></div>\n\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>\n```\n\n*/\n.CG2-holizontalLine {\n  border-top: 1px solid #5c5c5c;\n  margin: 80px -28px;\n  @include max-screen( $breakpoint-middle ) {\n    border-color: #dbdbdb;\n    margin: 50px -10px;\n  }\n}\n\n\n\n/* ==========================================================================\n   CG2-comparisonTable\n   ========================================================================== */\n/*\n---\nname: comparisonTable\ncategory:\n  - Blocks/www\ntag:\n  - www-item\n---\n\n```html\n<div class=\"CG2-comparisonTable\">\n  <table border class=\"CG2-comparisonTable__table\">\n    <thead>\n      <tr>\n        <td></td>\n        <th scope=\"col\">個人購読</th>\n        <th scope=\"col\">団体購読</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\" nowrap>契約方法</th>\n        <td nowrap>1人ずつで契約する</td>\n        <td nowrap>複数人分で契約する</td>\n      </tr>\n      <tr>\n        <th scope=\"row\" nowrap>支払い方法</th>\n        <td>クレジットカード</td>\n        <td>銀行振込（請求書発行）、クレジットカードのどちらか</td>\n      </tr>\n      <tr>\n        <th scope=\"row\" nowrap>講読人数</th>\n        <td>1名</td>\n        <td>2名〜</td>\n      </tr>\n      <tr>\n        <th scope=\"row\" nowrap>領収書の発行</th>\n        <td>設定画面から発行</td>\n        <td>団体購読管理画面から発行</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n```\n\n*/\n.CG2-comparisonTable {\n  width: 100%;\n  overflow-x: scroll;\n}\n\n.CG2-comparisonTable__table { // table\n  width: 100%;\n  margin: 40px 0 15px;\n\n  th, td {\n    padding: 0.3em 0.8em;\n    border: 1px solid #dbdbdb;\n  }\n\n  tbody th {\n    text-align: right;\n  }\n}\n","// ==========================================================================\n//  vars\n// ==========================================================================\n\n$fontSansSerif : Helvetica, '\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4\\20\\50\\72\\6F\\20\\57\\33', 'Hiragino Kaku Gothic Pro', '\\30E1\\30A4\\30EA\\30AA', Meiryo, sans-serif;\n$fontSerif :  'Palatino Linotype', 'Book Antiqua', Palatino, 'Klee', '\\6E38\\660E\\671D\\4F53', 'Yu Mincho', YuMincho, '\\30D2\\30E9\\30AE\\30CE\\660E\\671D ProN W3', 'HiraMinProN-W3', '\\30D2\\30E9\\30AE\\30CE\\660E\\671D Pro W3', 'Hiragino Mincho Pro', '\\0048\\0047\\6B63\\6977\\66F8\\4F53\\002D\\0050\\0052\\004F', '\\FF24\\FF26\\4E2D\\6977\\66F8\\4F53', '\\FF2D\\FF33\\0020\\660E\\671D', 'MS Mincho', '\\30E1\\30A4\\30EA\\30AA', Meiryo, serif;\n$fontCode : 'Lucida Console', Monaco, monospace;\n$fontZero : 'zeroWidth';\n$fontVertical : 'codegrid-num', '\\30D2\\30E9\\30AE\\30CE\\89D2\\30B4\\20\\50\\72\\6F\\20\\57\\33', 'Hiragino Kaku Gothic Pro', '\\30E1\\30A4\\30EA\\30AA', Meiryo, sans-serif;\n\n\n$pageMaxWidth: 1200px;\n$breakpoint-base   : 980px - 1;\n$breakpoint-middle : 768px - 1;\n$breakpoint-small  : 640px - 1;\n\n$z-pageHeader: 20;\n$z-flyout: 10;\n","// clearfix\n// ========================================================================== */\n@mixin clearfix () {\n  &:before, &:after {\n    content: \"\";\n    display: table;\n  }\n  &:after {\n    clear: both;\n  }\n}\n\n\n// resetLink\n// ========================================================================== */\n@mixin resetLink {\n  color: inherit;\n}\n\n\n// wordbreak\n// ========================================================================== */\n@mixin wordbreak () {\n  white-space: normal;\n  word-break: break-all;\n}\n\n\n// tableToBlock\n// ========================================================================== */\n@mixin tableToBlock () {\n  table, tbody, tr {\n    @include clearfix();\n    display: block;\n  }\n  th, td {\n    float: left;\n    clear: left;\n  }\n}\n\n\n// blurry\n// ========================================================================== */\n@mixin blurry-parent () {\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  background: #000;\n}\n@mixin blurry () {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: -10px;\n  right: -10px;\n  bottom: -10px;\n  left: -10px;\n  background-position: 50% 50%;\n  background-size: cover;\n  transform: scale( 1.2, 1.2 );\n  opacity: .64;\n}\n// @mixin blurry--blurry () {\n//   filter: blur( 24px );\n// }\n","// ---------------------------------------------------------------------------------------------------------------------\n//\n//  Author: Rafal Bromirski\n//  www: http://paranoida.com/\n//  twitter: http://twitter.com/paranoida\n//  dribbble: http://dribbble.com/paranoida\n//\n//  Licensed under a MIT License\n//\n// ---------------------------------------------------------------------------------------------------------------------\n//\n// Requirements:\n//   Sass 3.2.0+\n//\n//  Version:\n//   1.3                                      // developed on 14/11/2013\n//\n// Mixins:\n//   @ min-screen(width)                      // shortcut for @media screen and (min-width ...)\n//   @ max-screen(width)                      // shortcut for @media screen and (max-width ...)\n//   @ screen(min-width, max-width)           // shortcut for @media screen and (min-width ...) and (max-width ...)\n//   ---\n//   @ min-screen-height(height)              // shortcut for @media screen and (min-height ...)\n//   @ max-screen-height(height)              // shortcut for @media screen and (max-height ...)\n//   @ screen-height(min-height, max-height)  // shortcut for @media screen and (min-height ...) and (max-height ...)\n//   ---\n//   @ iphone3                                // only iPhone (2, 3G, 3GS) landscape & portrait\n//   @ iphone3(landscape)                     // only iPhone (2, 3G, 3GS) only landscape\n//   @ iphone3(portrait)                      // only iPhone (2, 3G, 3GS) only portrait\n//   ---\n//   @ iphone4                                // only iPhone (4, 4S) landscape & portrait\n//   @ iphone4(landscape)                     // only iPhone (4, 4S) only landscape\n//   @ iphone4(portrait)                      // only iPhone (4, 4S) only portrait\n//   ---\n//   @ iphone5                                // only iPhone (5) landscape & portrait\n//   @ iphone5(landscape)                     // only iPhone (5) only landscape\n//   @ iphone5(portrait)                      // only iPhone (5) only portrait\n//   ---\n//   @ ipad                                   // all iPads (1, 2, 3, 4, Mini) landscape & portrait\n//   @ ipad(landscape)                        // all iPads (1, 2, 3, 4, Mini) only landscape\n//   @ ipad(portrait)                         // all iPads (1, 2, 3, 4, Mini) only portrait\n//   ---\n//   @ ipad-retina                            // only iPad (3, 4) landscape & portrait\n//   @ ipad-retina(landscape)                 // only iPad (3, 4) only landscape\n//   @ ipad-retina(portrait)                  // only iPad (3, 4) only portrait\n//   ---\n//   @ hdpi(ratio)                            // devices with hidpi displays (default ratio: 1.3)\n//\n// ---------------------------------------------------------------------------------------------------------------------\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- screen ----------------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin screen($resMin, $resMax)\n{\n  @media screen and (min-width: $resMin) and (max-width: $resMax)\n  {\n    @content;\n  }\n}\n\n@mixin max-screen($res)\n{\n  @media screen and (max-width: $res)\n  {\n    @content;\n  }\n}\n\n@mixin min-screen($res)\n{\n  @media screen and (min-width: $res)\n  {\n    @content;\n  }\n}\n\n@mixin screen-height($resMin, $resMax)\n{\n  @media screen and (min-height: $resMin) and (max-height: $resMax)\n  {\n    @content;\n  }\n}\n\n@mixin max-screen-height($res)\n{\n  @media screen and (max-height: $res)\n  {\n    @content;\n  }\n}\n\n@mixin min-screen-height($res)\n{\n  @media screen and (min-height: $res)\n  {\n    @content;\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- hdpi ------------------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)\n// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)\n\n@mixin hdpi($ratio: 1.3)\n{\n  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),\n  only screen and (min--moz-device-pixel-ratio: $ratio),\n  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),\n  only screen and (min-resolution: #{round($ratio*96)}dpi),\n  only screen and (min-resolution: #{$ratio}dppx)\n  {\n    @content;\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- iphone ----------------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin iphone3($orientation: all)\n{\n  $deviceMinWidth: 320px;\n  $deviceMaxWidth: 480px;\n  $devicePixelRatio: 1;\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- iphone-retina ---------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin iphone4($orientation: all)\n{\n  $deviceMinWidth: 320px;\n  $deviceMaxWidth: 480px;\n  $devicePixelRatio: 2;\n  $deviceAspectRatio: '2/3';\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- iphone-5 --------------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin iphone5($orientation: all)\n{\n  $deviceMinWidth: 320px;\n  $deviceMaxWidth: 568px;\n  $devicePixelRatio: 2;\n  $deviceAspectRatio: '40/71';\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- ipads (all) -----------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin ipad($orientation: all)\n{\n  $deviceMinWidth: 768px;\n  $deviceMaxWidth: 1024px;\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n// --- ipad-retina -----------------------------------------------------------------------------------------------------\n// ---------------------------------------------------------------------------------------------------------------------\n\n@mixin ipad-retina($orientation: all)\n{\n  $deviceMinWidth: 768px;\n  $deviceMaxWidth: 1024px;\n  $devicePixelRatio: 2;\n\n  @if $orientation == all\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio)\n    {\n      @content;\n    }\n  }\n  @else\n  {\n    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)\n    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation})\n    {\n      @content;\n    }\n  }\n}\n"]}