@charset "UTF-8";
/*
Theme Name: UX MILK New
Description: Custom theme for UX MILK
Version: 3.0
Author URI: http://uxmilk.jp
*/
@-ms-viewport {
  width: device-width; }

@-o-viewport {
  width: device-width; }

@viewport {
  width: device-width; }

/* foundation */
.l-content:after, .l-footer:after, .l-footer__content:after, .l-footer__col:after, .l-header:after, .l-main:after, .l-side:after, .author:after, .book:after, .feed:after, .grid:after {
  clear: both;
  display: block;
  content: ""; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  line-height: 1.7; }

input[type=text],
input[type=search] {
  -webkit-appearance: none; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

html {
  font-size: 100.01%; }

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 0.95em;
  font-weight: 400;
  border: 0px;
  color: #333;
  background-color: #f8f8f8;
  height: 100%;
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  width: 80%;
  border: 0px;
  height: 1px;
  background: #ccc;
  margin: 20px auto; }

em {
  font-style: italic; }

h1,
h2,
h3 {
  letter-spacing: 1px; }

small {
  font-size: 0.8em; }

a {
  text-decoration: none;
  color: inherit; }
  a:hover {
    color: #3cb3e4; }

p {
  line-height: 1.6; }

img {
  max-width: 100%; }

input,
textarea {
  padding: 0.7em;
  background: #fff;
  font-size: 1.0em;
  color: #333; }

input[type="submit"]:hover {
  cursor: pointer; }

input,
textarea,
select {
  max-width: 100%; }

input:focus {
  outline: 0; }

@media print {
  body {
    background-color: #fff; }
  .l-main,
  .article {
    width: 100%;
    max-width: 100%;
    float: none; }
  .l-header,
  .l-content,
  .panel__content {
    margin: 0 auto;
    padding: 0; }
  .article {
    padding: 0 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .l-side,
  .l-footer,
  .nav,
  .share,
  #js-articleFooter {
    display: none; } }

.l-content {
  position: relative;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding-top: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 1200px) {
    .l-content {
      padding: 20px; } }
  @media screen and (max-width: 950px) {
    .l-content {
      padding: 40px; } }
  @media screen and (max-width: 820px) {
    .l-content {
      padding: 20px; } }
  @media screen and (max-width: 550px) {
    .l-content {
      padding: 0; } }

@media screen and (max-width: 550px) {
  .p-home .l-content {
    margin-top: -30px; } }

.l-footer {
  padding-top: 50px;
  background: #fff;
  width: 100%; }
  @media screen and (max-width: 550px) {
    .l-footer {
      min-width: 300px;
      padding-top: 20px; } }
  .l-footer__content {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 950px) {
      .l-footer__content {
        max-width: none;
        padding: 0 40px; } }
    @media screen and (max-width: 550px) {
      .l-footer__content {
        padding: 0 25px 0;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; } }
  .l-footer__col {
    float: left;
    width: calc(100%/4);
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 950px) {
      .l-footer__col {
        float: none;
        margin: auto;
        width: 240px;
        margin-bottom: 50px; } }

.l-header {
  width: 100%;
  position: relative;
  margin-bottom: 15px;
  padding: 15px 0 0;
  background: #fff; }
  @media screen and (max-width: 550px) {
    .l-header {
      margin: 0 0 30px;
      padding: 0; } }
  .l-header__content {
    max-width: 1160px;
    width: 100%;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 950px) {
      .l-header__content {
        padding: 0 40px; } }
    @media screen and (max-width: 820px) {
      .l-header__content {
        padding: 0 20px; } }
    @media screen and (max-width: 550px) {
      .l-header__content {
        padding: 0; } }

.l-main {
  float: left;
  max-width: 840px;
  width: calc(100% - 280px);
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 950px) {
    .l-main {
      max-width: none;
      width: 100%;
      float: none; } }
  .l-main.l-main--full {
    max-width: 1160px;
    width: 100%;
    margin: auto; }

.l-side {
  position: relative;
  float: right;
  width: 260px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 950px) {
    .l-side {
      float: none;
      width: 100%; } }
  @media screen and (max-width: 550px) {
    .l-side {
      padding: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; } }

.ad {
  max-width: 336px;
  width: 100%;
  text-align: center;
  line-height: 0; }
  @media (max-width: 711px) {
    .ad {
      float: none;
      margin: auto;
      margin-bottom: 10px; } }
  @media (max-width: 400px) {
    .ad {
      margin-bottom: 0; } }
  .ad a {
    line-height: 0; }
  .ad img {
    width: 100%; }

.article {
  max-width: 640px;
  margin: auto;
  word-wrap: break-word; }
  .article__title {
    margin-bottom: 20px;
    font-size: 2.3rem;
    letter-spacing: 1px;
    color: #333;
    line-height: 1.5;
    font-weight: bold; }
    @media screen and (max-width: 550px) {
      .article__title {
        padding: 10px;
        font-size: 1.4rem;
        margin: 0; } }
  .article__image {
    display: block;
    margin: 0 auto; }
  .article__meta {
    padding-right: 10px;
    margin-bottom: 3px;
    font-size: 12px;
    color: #888; }
  .article__credit {
    background: #eee;
    font-size: 0.8rem;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5; }
    .article__credit a {
      text-decoration: underline; }
  .article__body {
    line-height: 1.5; }
    .article__body h2 {
      margin: 50px 0px 30px;
      font-size: 1.4rem;
      font-weight: bold;
      padding: 8px 10px 8px 15px;
      border-left: 5px solid #e34c26;
      background: #f2f2f2; }
      @media screen and (max-width: 550px) {
        .article__body h2 {
          margin: 35px 0px 30px;
          font-size: 1.2rem; } }
    .article__body h3 {
      margin-top: 20px;
      font-size: 1.2rem;
      font-weight: bold;
      padding: 0px 0px 0px 10px;
      border-left: 7px solid #3cb3e4; }
      @media screen and (max-width: 550px) {
        .article__body h3 {
          font-size: 1.1rem; } }
    .article__body h4 {
      margin-top: 20px;
      font-size: 1.0rem;
      font-weight: bold;
      padding: 4px;
      background-color: #eee; }
      @media screen and (max-width: 550px) {
        .article__body h4 {
          background-color: #fff; } }
    .article__body a {
      text-decoration: underline;
      color: #337ab7; }
    .article__body a[href^="https://data.uxmilk.jp"]:hover {
      cursor: -webkit-zoom-in;
      cursor: zoom-in; }
    .article__body img {
      max-width: 100%;
      height: auto; }
    .article__body p {
      display: block;
      margin: 1.7em 0;
      line-height: 1.7em;
      letter-spacing: 0.4px; }
      @media screen and (max-width: 550px) {
        .article__body p {
          margin: 1em 0; } }
    .article__body ul {
      list-style-type: disc;
      padding-left: 20px; }
    .article__body li {
      padding: 0 10px;
      margin-bottom: 1.7em;
      line-height: 1.7em;
      letter-spacing: 0.4px; }
    .article__body blockquote {
      position: relative;
      font-size: 0.9rem;
      padding: 5px 20px 5px 60px;
      background: #fafafa;
      border-radius: 10px; }
      @media screen and (max-width: 820px) {
        .article__body blockquote {
          padding: 5px 10px 5px 45px;
          border-radius: 5px; } }
      .article__body blockquote::before {
        content: "\e977";
        position: absolute;
        top: 10px;
        left: 20px;
        font-family: 'icomoon' !important;
        font-size: 25px;
        color: #b0afaf; }
        @media screen and (max-width: 820px) {
          .article__body blockquote::before {
            font-size: 15px; } }
    .article__body iframe {
      max-width: 100%;
      margin: auto;
      display: block; }
    .article__body pre {
      margin: 25px 0;
      background: #eee;
      padding: 15px; }
    .article__body table {
      width: 100% !important;
      overflow: scroll; }
    .article__body td, .article__body th {
      border: 1px solid #eee;
      padding: 5px; }
    .article__body strong {
      font-weight: bold; }
    .article__body h3 + blockquote,
    .article__body h3 + ul {
      margin-top: 30px; }
    .article__body .pagination a {
      color: #333;
      text-decoration: none; }
  .article__pagination {
    text-align: center; }
    .article__pagination span {
      display: inline-block;
      text-align: center;
      margin: 0 10px; }
    .article__pagination a {
      border-bottom: 1px solid #000; }
  .article.article--book {
    max-width: none; }
    @media screen and (max-width: 550px) {
      .article.article--book {
        padding: 0; } }
    .article.article--book .article__image {
      background-size: cover;
      height: 450px;
      position: relative;
      color: #fff; }
      @media screen and (max-width: 550px) {
        .article.article--book .article__image {
          height: 300px; } }
    .article.article--book .article__header {
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(125, 185, 232, 0)), color-stop(60%, rgba(10, 10, 10, 0.95)), color-stop(80%, #0a0a0a));
      background: -webkit-linear-gradient(top, rgba(125, 185, 232, 0) 0%, rgba(10, 10, 10, 0.95) 60%, #0a0a0a 80%);
      background: -o-linear-gradient(top, rgba(125, 185, 232, 0) 0%, rgba(10, 10, 10, 0.95) 60%, #0a0a0a 80%);
      background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0%, rgba(10, 10, 10, 0.95) 60%, #0a0a0a 80%);
      text-align: center;
      padding: 40px 0 20px;
      position: absolute;
      bottom: 0;
      margin: 0;
      font-size: 1.8rem;
      width: 100%; }
      .article.article--book .article__header .article__title {
        margin-top: 50px;
        font-weight: normal;
        padding: 0 20px; }
        @media screen and (max-width: 550px) {
          .article.article--book .article__header .article__title {
            font-size: 1.2rem; } }
      .article.article--book .article__header .article__meta,
      .article.article--book .article__header .article__title {
        color: #fff; }
    .article.article--book .article__excerpt {
      padding: 0 100px 40px;
      background: #0a0a0a;
      color: #fff; }
      @media screen and (max-width: 550px) {
        .article.article--book .article__excerpt {
          padding: 0 20px 20px; } }
      .article.article--book .article__excerpt::before {
        content: "";
        display: block;
        border-top: 1px rgba(255, 255, 255, 0.6) solid;
        width: 80%;
        margin: auto;
        margin-bottom: 30px; }
    .article.article--book .article__body {
      padding: 0 100px; }
      @media screen and (max-width: 550px) {
        .article.article--book .article__body {
          padding: 0 15px; } }

@media screen and (max-width: 550px) {
  .author {
    font-size: 0.8rem;
    margin: 10px;
    cursor: pointer; } }

.author__image {
  float: left; }
  .author__image img {
    height: 60px;
    width: 60px;
    border-radius: 50%; }
    @media screen and (max-width: 550px) {
      .author__image img {
        width: 35px;
        height: 35px; } }

.author__content {
  float: left;
  width: calc(100% - 75px);
  margin-left: 15px;
  line-height: 1.5; }

.author__name {
  font-size: 0.9rem;
  margin-bottom: 3px; }
  @media screen and (max-width: 550px) {
    .author__name {
      margin-top: 8px;
      font-size: 0.8rem;
      font-weight: bold; } }
  @media screen and (max-width: 550px) {
    .author__name::after {
      content: attr(data-toggle);
      float: right;
      margin-top: 2px;
      font-size: 10px;
      color: #bbb; } }

.author__bio {
  font-size: 0.8rem;
  color: #999; }
  @media screen and (max-width: 550px) {
    .author__bio {
      display: none;
      margin-top: 12px;
      word-break: break-all; } }

.book {
  display: block;
  width: 180px;
  height: 360px;
  margin: auto;
  margin-bottom: 30px; }
  .book .book__image {
    display: block;
    width: 180px;
    height: 240px;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
    border-radius: 5px;
    margin: auto;
    margin-bottom: 8px; }
    .book .book__image:hover {
      opacity: 0.8; }
  .book .book__title {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px; }
  .book .book__meta {
    font-size: 10px; }

.book.book--navigator {
  width: 100%;
  height: auto;
  margin: 0; }
  .book.book--navigator .book__image {
    width: 130px;
    height: 170px;
    float: left;
    margin: 0; }
    @media screen and (max-width: 550px) {
      .book.book--navigator .book__image {
        width: 80px;
        height: 100px; } }
  .book.book--navigator .book__heading,
  .book.book--navigator .book__title,
  .book.book--navigator .book__pagination {
    width: calc(100% - 130px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 35px;
    float: left; }
    @media screen and (max-width: 550px) {
      .book.book--navigator .book__heading,
      .book.book--navigator .book__title,
      .book.book--navigator .book__pagination {
        width: calc(100% - 80px);
        padding-left: 10px; } }
  @media screen and (max-width: 550px) {
    .book.book--navigator .book__pagination {
      width: 100%;
      padding: 0; } }
  .book.book--navigator .book__title {
    display: block;
    margin-bottom: 30px;
    font-size: 1.2rem;
    font-weight: bold; }
    @media screen and (max-width: 550px) {
      .book.book--navigator .book__title {
        font-size: 1rem;
        margin-bottom: 15px; } }
  .book.book--navigator .book__item {
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 1px; }
  .book.book--navigator .book__item:first-child {
    padding-right: 15px; }
  .book.book--navigator .book__item + .book__item {
    padding-left: 15px;
    border-left: 2px solid #c7c7c7; }
  .book.book--navigator .book__num {
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 15px; }
    @media screen and (max-width: 550px) {
      .book.book--navigator .book__num {
        font-size: 1rem;
        margin-right: 10px; } }

.book.book--small {
  width: 130px;
  height: 230px; }
  .book.book--small .book__image {
    width: 130px;
    height: 174px;
    margin-bottom: 8px; }
  .book.book--small .book__title {
    font-size: 14px; }

.breadcrumbs {
  list-style: none;
  margin: 0; }
  .breadcrumbs li {
    display: inline-block;
    color: #888; }
    .breadcrumbs li::after {
      content: ">";
      display: inline-block;
      padding: 0 5px; }
    .breadcrumbs li:last-child::after {
      display: none; }
  .breadcrumbs a {
    font-size: 12px;
    color: #888; }

.button {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 5px;
  padding: 5px 15px; }
  .button--primary {
    color: #fff;
    background: #3fcf7c; }
    .button--primary:hover {
      color: #fff; }

.fancybox-enabled {
  overflow: hidden; }

.fancybox-enabled body {
  overflow: visible;
  height: 100%; }

.fancybox-is-hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden; }

.fancybox-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99993;
  -webkit-tap-highlight-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0); }

/* Make sure that the first one is on the top */
.fancybox-container ~ .fancybox-container {
  z-index: 99992; }

.fancybox-outer,
.fancybox-inner,
.fancybox-bg,
.fancybox-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.fancybox-outer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }

.fancybox-bg {
  background: #1e1e1e;
  opacity: 0;
  -webkit-transition-duration: inherit;
  -o-transition-duration: inherit;
  transition-duration: inherit;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
  -o-transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
  transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); }

.fancybox-is-open .fancybox-bg {
  opacity: 0.87;
  -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }

.fancybox-infobar,
.fancybox-toolbar,
.fancybox-caption-wrap {
  position: absolute;
  direction: ltr;
  z-index: 99997;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .25s, visibility 0s linear .25s;
  -o-transition: opacity .25s, visibility 0s linear .25s;
  transition: opacity .25s, visibility 0s linear .25s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-toolbar .fancybox-toolbar,
.fancybox-show-caption .fancybox-caption-wrap {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity .25s, visibility 0s;
  -o-transition: opacity .25s, visibility 0s;
  transition: opacity .25s, visibility 0s; }

.fancybox-infobar {
  top: 0;
  left: 50%;
  margin-left: -79px; }

.fancybox-infobar__body {
  display: inline-block;
  width: 70px;
  line-height: 44px;
  font-size: 13px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: center;
  color: #ddd;
  background-color: rgba(30, 30, 30, 0.7);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: subpixel-antialiased; }

.fancybox-toolbar {
  top: 0;
  right: 0; }

.fancybox-stage {
  overflow: hidden;
  direction: ltr;
  z-index: 99994;
  -webkit-transform: translate3d(0, 0, 0); }

.fancybox-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  outline: none;
  white-space: normal;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  z-index: 99994;
  -webkit-overflow-scrolling: touch;
  display: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-property: opacity, -webkit-transform;
  -webkit-transition-property: opacity, -webkit-transform;
  -o-transition-property: transform, opacity;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.fancybox-slide::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0; }

.fancybox-is-sliding .fancybox-slide,
.fancybox-slide--previous,
.fancybox-slide--current,
.fancybox-slide--next {
  display: block; }

.fancybox-slide--image {
  overflow: visible; }

.fancybox-slide--image::before {
  display: none; }

.fancybox-slide--video .fancybox-content,
.fancybox-slide--video iframe {
  background: #000; }

.fancybox-slide--map .fancybox-content,
.fancybox-slide--map iframe {
  background: #E5E3DF; }

.fancybox-slide--next {
  z-index: 99995; }

.fancybox-slide > * {
  display: inline-block;
  position: relative;
  padding: 24px;
  margin: 44px 0 44px;
  border-width: 0;
  vertical-align: middle;
  text-align: left;
  background-color: #fff;
  overflow: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.fancybox-slide .fancybox-image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 99995;
  background: transparent;
  cursor: default;
  overflow: visible;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.fancybox-can-zoomOut .fancybox-image-wrap {
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.fancybox-can-zoomIn .fancybox-image-wrap {
  cursor: -webkit-zoom-in;
  cursor: zoom-in; }

.fancybox-can-drag .fancybox-image-wrap {
  cursor: -webkit-grab;
  cursor: grab; }

.fancybox-is-dragging .fancybox-image-wrap {
  cursor: -webkit-grabbing;
  cursor: grabbing; }

.fancybox-image,
.fancybox-spaceball {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none; }

.fancybox-spaceball {
  z-index: 1; }

.fancybox-slide--iframe .fancybox-content {
  padding: 0;
  width: 80%;
  height: 80%;
  max-width: calc(100% - 100px);
  max-height: calc(100% - 88px);
  overflow: visible;
  background: #fff; }

.fancybox-iframe {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  background: #fff; }

.fancybox-error {
  margin: 0;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  background: #fff;
  cursor: default; }

.fancybox-error p {
  margin: 0;
  padding: 0;
  color: #444;
  font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; }

.fancybox-close-small {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  z-index: 10;
  cursor: pointer; }

.fancybox-close-small:after {
  content: '×';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  font: 20px/30px Arial,"Helvetica Neue",Helvetica,sans-serif;
  color: #888;
  font-weight: 300;
  text-align: center;
  border-radius: 50%;
  border-width: 0;
  background: #fff;
  -webkit-transition: background .25s;
  -o-transition: background .25s;
  transition: background .25s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2; }

.fancybox-close-small:focus:after {
  outline: 1px dotted #888; }

.fancybox-close-small:hover:after {
  color: #555;
  background: #eee; }

.fancybox-slide--iframe .fancybox-close-small {
  top: 0;
  right: -44px; }

.fancybox-slide--iframe .fancybox-close-small:after {
  background: transparent;
  font-size: 35px;
  color: #aaa; }

.fancybox-slide--iframe .fancybox-close-small:hover:after {
  color: #fff; }

/* Caption */
.fancybox-caption-wrap {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 30px 0 30px;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, rgba(0, 0, 0, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.2)), color-stop(80%, rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.8)));
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%);
  background: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none; }

.fancybox-caption {
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #fff;
  line-height: 20px;
  -webkit-text-size-adjust: none; }

.fancybox-caption a,
.fancybox-caption button,
.fancybox-caption select {
  pointer-events: all; }

.fancybox-caption a {
  color: #fff;
  text-decoration: underline; }

/* Buttons */
.fancybox-button {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: transparent;
  color: #ddd;
  border-radius: 0;
  cursor: pointer;
  vertical-align: top;
  outline: none; }

.fancybox-button[disabled] {
  cursor: default;
  pointer-events: none; }

.fancybox-infobar__body, .fancybox-button {
  background: rgba(30, 30, 30, 0.6); }

.fancybox-button:hover:not([disabled]) {
  color: #fff;
  background: rgba(0, 0, 0, 0.8); }

.fancybox-button::before,
.fancybox-button::after {
  content: '';
  pointer-events: none;
  position: absolute;
  background-color: currentColor;
  color: currentColor;
  opacity: 0.9;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block; }

.fancybox-button[disabled]::before,
.fancybox-button[disabled]::after {
  opacity: 0.3; }

.fancybox-button--left::after,
.fancybox-button--right::after {
  top: 18px;
  width: 6px;
  height: 6px;
  background: transparent;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor; }

.fancybox-button--left::after {
  left: 20px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg); }

.fancybox-button--right::after {
  right: 20px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.fancybox-button--left {
  border-bottom-left-radius: 5px; }

.fancybox-button--right {
  border-bottom-right-radius: 5px; }

.fancybox-button--close::before, .fancybox-button--close::after {
  content: '';
  display: inline-block;
  position: absolute;
  height: 2px;
  width: 16px;
  top: calc(50% - 1px);
  left: calc(50% - 8px); }

.fancybox-button--close::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.fancybox-button--close::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }

/* Navigation arrows */
.fancybox-arrow {
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
  height: 100px;
  width: 54px;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  cursor: pointer;
  z-index: 99995;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: opacity .25s;
  -o-transition: opacity .25s;
  transition: opacity .25s; }

.fancybox-arrow::after {
  content: '';
  position: absolute;
  top: 28px;
  width: 44px;
  height: 44px;
  background-color: rgba(30, 30, 30, 0.8);
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px 24px; }

.fancybox-arrow--right {
  right: 0; }

.fancybox-arrow--left {
  left: 0;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1); }

.fancybox-arrow--right::after,
.fancybox-arrow--left::after {
  left: 0; }

.fancybox-show-nav .fancybox-arrow {
  opacity: 0.6; }

.fancybox-show-nav .fancybox-arrow[disabled] {
  opacity: 0.3; }

/* Loading indicator */
.fancybox-loading {
  border: 6px solid rgba(100, 100, 100, 0.4);
  border-top: 6px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  height: 50px;
  width: 50px;
  -webkit-animation: fancybox-rotate .8s infinite linear;
  animation: fancybox-rotate .8s infinite linear;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  z-index: 99999; }

@-webkit-keyframes fancybox-rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

@keyframes fancybox-rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

/* Transition effects */
.fancybox-animated {
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.25, 1); }

/* transitionEffect: slide */
.fancybox-fx-slide.fancybox-slide--previous {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  opacity: 0; }

.fancybox-fx-slide.fancybox-slide--next {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  opacity: 0; }

.fancybox-fx-slide.fancybox-slide--current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1; }

/* transitionEffect: fade */
.fancybox-fx-fade.fancybox-slide--previous,
.fancybox-fx-fade.fancybox-slide--next {
  opacity: 0;
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

.fancybox-fx-fade.fancybox-slide--current {
  opacity: 1; }

/* transitionEffect: zoom-in-out */
.fancybox-fx-zoom-in-out.fancybox-slide--previous {
  -webkit-transform: scale3d(1.5, 1.5, 1.5);
  transform: scale3d(1.5, 1.5, 1.5);
  opacity: 0; }

.fancybox-fx-zoom-in-out.fancybox-slide--next {
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
  opacity: 0; }

.fancybox-fx-zoom-in-out.fancybox-slide--current {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  opacity: 1; }

/* transitionEffect: rotate */
.fancybox-fx-rotate.fancybox-slide--previous {
  -webkit-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  transform: rotate(-360deg);
  opacity: 0; }

.fancybox-fx-rotate.fancybox-slide--next {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
  opacity: 0; }

.fancybox-fx-rotate.fancybox-slide--current {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1; }

/* transitionEffect: circular */
.fancybox-fx-circular.fancybox-slide--previous {
  -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  opacity: 0; }

.fancybox-fx-circular.fancybox-slide--next {
  -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  opacity: 0; }

.fancybox-fx-circular.fancybox-slide--current {
  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  opacity: 1; }

/* transitionEffect: tube */
.fancybox-fx-tube.fancybox-slide--previous {
  -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
  transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); }

.fancybox-fx-tube.fancybox-slide--next {
  -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
  transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); }

.fancybox-fx-tube.fancybox-slide--current {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1); }

/* Styling for Small-Screen Devices */
@media all and (max-width: 800px) {
  .fancybox-infobar {
    left: 0;
    margin-left: 0; }
  .fancybox-button--left,
  .fancybox-button--right {
    display: none !important; }
  .fancybox-caption {
    padding: 20px 0;
    margin: 0; } }

/* Fullscreen  */
.fancybox-button--fullscreen::before {
  width: 15px;
  height: 11px;
  left: calc(50% - 7px);
  top: calc(50% - 6px);
  border: 2px solid;
  background: none; }

/* Slideshow button */
.fancybox-button--play::before,
.fancybox-button--pause::before {
  top: calc(50% - 6px);
  left: calc(50% - 4px);
  background: transparent; }

.fancybox-button--play::before {
  width: 0;
  height: 0;
  border-top: 6px inset transparent;
  border-bottom: 6px inset transparent;
  border-left: 10px solid;
  border-radius: 1px; }

.fancybox-button--pause::before {
  width: 7px;
  height: 11px;
  border-style: solid;
  border-width: 0 2px 0 2px; }

/* Thumbs */
.fancybox-thumbs {
  display: none; }

.fancybox-button--thumbs {
  display: none; }

@media all and (min-width: 800px) {
  .fancybox-button--thumbs {
    display: inline-block; }
  .fancybox-button--thumbs span {
    font-size: 23px; }
  .fancybox-button--thumbs::before {
    width: 3px;
    height: 3px;
    top: calc(50% - 2px);
    left: calc(50% - 2px);
    -webkit-box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0;
    box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0; }
  .fancybox-thumbs {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 220px;
    margin: 0;
    padding: 5px 5px 0 0;
    background: #fff;
    word-break: normal;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 99995; }
  .fancybox-show-thumbs .fancybox-thumbs {
    display: block; }
  .fancybox-show-thumbs .fancybox-inner {
    right: 220px; }
  .fancybox-thumbs > ul {
    list-style: none;
    position: absolute;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 0; }
  .fancybox-thumbs > ul > li {
    float: left;
    overflow: hidden;
    max-width: 50%;
    padding: 0;
    margin: 0;
    width: 105px;
    height: 75px;
    position: relative;
    cursor: pointer;
    outline: none;
    border: 5px solid transparent;
    border-top-width: 0;
    border-right-width: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  li.fancybox-thumbs-loading {
    background: rgba(0, 0, 0, 0.1); }
  .fancybox-thumbs > ul > li > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .fancybox-thumbs > ul > li:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
    border: 4px solid #4ea7f9;
    z-index: 99991;
    opacity: 0;
    -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .fancybox-thumbs > ul > li.fancybox-thumbs-active:before {
    opacity: 1; } }

.feed {
  width: 100%; }
  .feed__icon {
    display: block;
    float: left;
    width: 60px;
    height: 60px;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%; }
    @media screen and (max-width: 550px) {
      .feed__icon {
        display: none; } }
  .feed__content {
    float: left;
    width: calc(100% - 80px);
    padding-left: 20px; }
    @media screen and (max-width: 550px) {
      .feed__content {
        width: 100%;
        padding: 0; } }
    .feed__content.feed__content--withThumbnail {
      width: calc(100% - 180px); }
      @media screen and (max-width: 550px) {
        .feed__content.feed__content--withThumbnail {
          width: calc(100% - 100px); } }
  .feed__thumbnail {
    display: block;
    width: 90px;
    height: 60px;
    float: right;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
  .feed.feed--embed {
    width: 75%;
    padding: 15px 25px;
    margin: 0px auto;
    border: 1px solid #ccc;
    border-radius: 5px; }
    @media screen and (max-width: 820px) {
      .feed.feed--embed {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; } }
    .feed.feed--embed a {
      text-decoration: none; }
    .feed.feed--embed .feed__content {
      padding: 0;
      overflow: hidden;
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .feed.feed--embed .feed__content .feed__title {
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
        text-decoration: none;
        color: #555;
        margin-bottom: 10px; }
        .feed.feed--embed .feed__content .feed__title:hover {
          color: #3cb3e4; }
      .feed.feed--embed .feed__content .feed__excerpt {
        line-height: 1.5;
        letter-spacing: 0px;
        font-size: 12px;
        color: #82878c;
        font-weight: normal;
        text-decoration: none;
        max-width: 100%;
        overflow: hidden; }

.feed--rank .feed__num {
  display: block;
  float: left;
  height: inherit;
  width: 60px;
  font-family: Roboto Condensed;
  font-style: italic;
  font-weight: bold;
  font-size: 2.3rem;
  text-align: center;
  line-height: 50px; }
  @media screen and (max-width: 820px) {
    .feed--rank .feed__num {
      width: 30px;
      font-size: 1.8rem; } }

@media screen and (max-width: 820px) {
  .feed--rank .feed__content {
    width: calc(100% - 30px);
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; } }

@media screen and (max-width: 820px) {
  .feed--rank .feed__thumbnail {
    display: none; } }

.feed--book {
  padding: 10px 0;
  counter-increment: book-counter; }
  .feed--book::before {
    content: counter(book-counter, decimal-leading-zero);
    float: left;
    width: 33px;
    font-size: 1.4rem;
    font-family: Roboto Condensed;
    font-style: italic; }
  .feed--book:first-child {
    padding-top: 0; }
  .feed--book + .feed--book {
    border-top: 1px solid #eee; }
  .feed--book .feed__content {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 20px;
    width: calc(100% - 33px); }
    .feed--book .feed__content .feed__title {
      display: block;
      color: #000;
      font-size: 1.1rem;
      margin-bottom: 5px;
      text-decoration: none; }
      .feed--book .feed__content .feed__title:hover {
        color: #3cb3e4; }
      .feed--book .feed__content .feed__title--disabled, .feed--book .feed__content .feed__title--disabled:hover {
        color: #999; }

.follow {
  width: 260px; }
  .follow__item {
    width: 48px;
    height: 48px;
    line-height: 51px;
    margin: 5px;
    display: inline-block;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 50%; }
    .follow__item:hover {
      color: #fff; }
    .follow__item--feedly {
      background: #87c040; }
    .follow__item--rss {
      background: #f59537; }
    .follow__item--twitter {
      background: #55acee; }
    .follow__item--facebook {
      background: #315096; }
    .follow__item--app {
      width: inherit;
      margin: 0;
      padding: 0; }

.form {
  margin: auto;
  width: 99.9%;
  max-width: 800px; }
  .form__row {
    margin-bottom: 35px; }
  .form__label, .form__field {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .form__label {
    font-weight: bold;
    margin-bottom: 10px; }
  .form__field {
    width: 100%; }

.form--singin {
  max-width: 290px;
  margin: auto; }

.grid {
  margin-right: auto;
  margin-left: auto; }

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.col12 {
  width: 100%; }

.col11 {
  width: 91.66666667%; }

.col10 {
  width: 83.33333333%; }

.col9 {
  width: 75%; }

.col8 {
  width: 66.66666667%; }

.col7 {
  width: 58.33333333%; }

.col6 {
  width: 50%; }

.col5 {
  width: 41.66666667%; }

.col4 {
  width: 33.33333333%; }

.col3 {
  width: 25%; }

.col2 {
  width: 16.66666667%; }

.col1 {
  width: 8.33333333%; }

@media screen and (max-width: 950px) {
  .col12--lg {
    width: 100%; } }

@media screen and (max-width: 950px) {
  .col11--lg {
    width: 91.66666667%; } }

@media screen and (max-width: 950px) {
  .col10--lg {
    width: 83.33333333%; } }

@media screen and (max-width: 950px) {
  .col9--lg {
    width: 75%; } }

@media screen and (max-width: 950px) {
  .col8--lg {
    width: 66.66666667%; } }

@media screen and (max-width: 950px) {
  .col7--lg {
    width: 58.33333333%; } }

@media screen and (max-width: 950px) {
  .col6--lg {
    width: 50%; } }

@media screen and (max-width: 950px) {
  .col5--lg {
    width: 41.66666667%; } }

@media screen and (max-width: 950px) {
  .col4--lg {
    width: 33.33333333%; } }

@media screen and (max-width: 950px) {
  .col3--lg {
    width: 25%; } }

@media screen and (max-width: 950px) {
  .col2--lg {
    width: 16.66666667%; } }

@media screen and (max-width: 950px) {
  .col1--lg {
    width: 8.33333333%; } }

@media screen and (max-width: 820px) {
  .col12--md {
    width: 100%; } }

@media screen and (max-width: 820px) {
  .col11--md {
    width: 91.66666667%; } }

@media screen and (max-width: 820px) {
  .col10--md {
    width: 83.33333333%; } }

@media screen and (max-width: 820px) {
  .col9--md {
    width: 75%; } }

@media screen and (max-width: 820px) {
  .col8--md {
    width: 66.66666667%; } }

@media screen and (max-width: 820px) {
  .col7--md {
    width: 58.33333333%; } }

@media screen and (max-width: 820px) {
  .col6--md {
    width: 50%; } }

@media screen and (max-width: 820px) {
  .col5--md {
    width: 41.66666667%; } }

@media screen and (max-width: 820px) {
  .col4--md {
    width: 33.33333333%; } }

@media screen and (max-width: 820px) {
  .col3--md {
    width: 25%; } }

@media screen and (max-width: 820px) {
  .col2--md {
    width: 16.66666667%; } }

@media screen and (max-width: 820px) {
  .col1--md {
    width: 8.33333333%; } }

@media screen and (max-width: 550px) {
  .col12--sm {
    width: 100%; } }

@media screen and (max-width: 550px) {
  .col11--sm {
    width: 91.66666667%; } }

@media screen and (max-width: 550px) {
  .col10--sm {
    width: 83.33333333%; } }

@media screen and (max-width: 550px) {
  .col9--sm {
    width: 75%; } }

@media screen and (max-width: 550px) {
  .col8--sm {
    width: 66.66666667%; } }

@media screen and (max-width: 550px) {
  .col7--sm {
    width: 58.33333333%; } }

@media screen and (max-width: 550px) {
  .col6--sm {
    width: 50%; } }

@media screen and (max-width: 550px) {
  .col5--sm {
    width: 41.66666667%; } }

@media screen and (max-width: 550px) {
  .col4--sm {
    width: 33.33333333%; } }

@media screen and (max-width: 550px) {
  .col3--sm {
    width: 25%; } }

@media screen and (max-width: 550px) {
  .col2--sm {
    width: 16.66666667%; } }

@media screen and (max-width: 550px) {
  .col1--sm {
    width: 8.33333333%; } }

.heading {
  font-weight: bold;
  font-family: 'Roboto Condensed';
  font-size: 1.3rem;
  text-align: center;}
  @media screen and (max-width: 550px) {
    .heading {
      font-size: 1rem; } }
  .heading__icon {
    margin-right: 10px; }
  .heading__txt {
    display: inline-block; }
  .heading--side {
    font-size: 1.2rem; }
    @media screen and (max-width: 550px) {
      .heading--side {
        background-color: #f8f8f8;
        width: calc(100% + 20px);
        margin-left: -10px; } }

.input-field {
  position: relative; }
  .input-field__count {
    margin-top: 5px;
    text-align: right;
    font-size: 12px;
    color: #999; }
  .input-field input[type=text],
  .input-field input[type=search],
  .input-field input[type=number],
  .input-field textarea {
    font-size: 12px;
    border: 1px solid #cacaca; }
  .input-field input[type=text],
  .input-field input[type=search],
  .input-field textarea {
    width: 100%; }
  .input-field input[type=radio],
  .input-field input[type=checkbox],
  .input-field input[type=text],
  .input-field input[type=search],
  .input-field input[type=number],
  .input-field textarea {
    display: inline-block;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    background: #fff;
    vertical-align: middle;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    padding: 9px;
    font-size: 14px; }
  .input-field label {
    display: inline-block;
    cursor: pointer;
    margin-left: 8px;
    color: #4a494c; }
  .input-field input[type=radio] + label::after,
  .input-field input[type=checkbox] + label::after {
    position: absolute;
    top: 50%;
    left: 10px;
    display: block;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border: 1px solid #cacaca;
    background: #fff;
    content: ''; }
  .input-field input[type=radio] + label::after {
    border-radius: 50%; }
  .input-field input[type=checkbox] + label::after {
    border-radius: 3px; }
  .input-field input[type=radio] + label::before,
  .input-field input[type=checkbox] + label::before {
    display: block;
    content: '';
    position: absolute;
    opacity: 0;
    z-index: 1; }
  .input-field input[type=radio] + label::before {
    top: 10px;
    left: 15px;
    display: block;
    width: 8px;
    height: 8px;
    background: #49adc4;
    border-radius: 50%; }
  .input-field input[type=checkbox] + label::before {
    top: 2px;
    left: 18px;
    width: 5px;
    height: 13px;
    border-right: 3px solid #49adc4;
    border-bottom: 3px solid #49adc4;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .input-field input[type=radio]:checked + label::before,
  .input-field input[type=checkbox]:checked + label::before {
    opacity: 1; }
  .input-field--inline {
    display: inline-block; }

.input-field--file input[type=file] {
  display: none; }

.input-field--file label {
  font-size: 10px;
  margin: 0;
  padding: 3px 5px;
  border-radius: 3px;
  border: 1px solid #888;
  color: #888; }

.label {
  font-size: 0.7rem;
  display: inline-block;
  font-weight: lighter; }

.label--gray {
  color: #fff;
  vertical-align: baseline;
  padding: 0 8px;
  background: #aaa;
  border-radius: 10px; }

.label--border {
  color: #aaa;
  padding: 0 5px;
  border: 1px solid #aaa;
  border-radius: 3px;
  margin-left: 8px; }

.like {
  display: inline-block; }
  .like__btn {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    border: none;
    padding: 0;
    color: #F44336; }

.logo {
  width: 360px; }
  @media screen and (max-width: 550px) {
    .logo {
      width: 280px;
      margin: 5px; } }

.logo--side {
  width: auto;
  position: absolute;
  top: -192px;
  left: 14px; }

.nav {
  list-style: none; }
  .nav li {
    display: inline-block; }
  .nav a {
    display: inline-block; }

.nav--header .nav__item {
  width: 120px;
  opacity: 0.4;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 0; }
  @media screen and (max-width: 550px) {
    .nav--header .nav__item {
      width: calc(100% / 4);
      padding: 0; } }
  .nav--header .nav__item:hover, .nav--header .nav__item--current {
    opacity: 1; }
  .nav--header .nav__item img {
    width: 70px; }
    @media screen and (max-width: 550px) {
      .nav--header .nav__item img {
        width: 50px; } }

.nav--header .nav__item--current.nav__item--search {
  border-bottom: 4px solid #FFD500; }

.nav--header .nav__item--current.nav__item--read {
  border-bottom: 4px solid #1C6AEB; }

.nav--header .nav__item--current.nav__item--learn {
  border-bottom: 4px solid #FF820E; }

.nav--header .nav__item--current.nav__item--jobs {
  border-bottom: 4px solid #3fcf7c; }

.nav--footer .nav__item {
  display: block;
  margin-bottom: 15px;
  font-size: 0.8rem;
  color: #6e6e6e; }

.nav--img {
  margin: 0 auto;
  text-align: center; }
  .nav--img img {
    margin: 0 4px;
    width: 145px;
    border-radius: 10px; }

.pagination {
  margin: 30px 0;
  text-align: center; }
  .pagination__item {
    color: #333;
    display: inline-block;
    padding: 5px 15px; }
    .pagination__item--current {
      font-weight: bold; }

.panel {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 50px; }
  @media screen and (max-width: 550px) {
    .panel {
      border-radius: 0;
      margin-bottom: 30px; } }
  .panel__header {
    background: #5D5D5D;
    color: #fff;
    font-size: 0.75rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    padding-left: 10px; }
    .panel__header img {
      vertical-align: sub; }
  .panel__heading {
    padding: 30px 30px 0; }
    @media screen and (max-width: 550px) {
      .panel__heading {
        padding: 10px 0;
        text-align: center;
        background: #f8f8f8; } }
  .panel__content {
    padding: 50px 100px; }
    @media screen and (max-width: 1200px) {
      .panel__content {
        padding: 50px 50px; } }
    @media screen and (max-width: 950px) {
      .panel__content {
        padding: 50px 20px; } }
    @media screen and (max-width: 550px) {
      .panel__content {
        padding: 10px; } }
    .panel__content.panel__content--padding0 {
      padding: 0; }
  .panel.panel--side {
    margin-bottom: 30px; }
    .panel.panel--side .panel__heading {
      padding: 20px 20px 0; }
      @media screen and (max-width: 550px) {
        .panel.panel--side .panel__heading {
          width: 100%;
          padding: 0 0 15px 0; } }
    .panel.panel--side .panel__content {
      padding: 20px; }
      @media screen and (max-width: 550px) {
        .panel.panel--side .panel__content {
          padding: 10px; } }

.search {
  position: relative;
  width: 99.9%;
  max-width: 540px;
  margin: auto; }
  .search__input {
    width: calc(100% - 54px);
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0 10px 30px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border: 1px solid #ddd; }
  .search__submit {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    background-image: url("images/icon_search_gray.png");
    background-repeat: no-repeat;
    background-position: 15px center;
    width: 55px;
    height: 40px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border: 1px solid #ddd; }
  .search__input:focus + .search__submit {
    background-color: #eee; }

.search--large .search__input {
  width: calc(100% - 64px);
  height: 50px; }

.search--large .search__submit {
  width: 65px;
  height: 50px; }

.share {
  text-align: center; }
  .share__item {
    width: 35px;
    position: relative;
    display: inline-block; }
    .share__item + .share__item {
      margin-left: 42px; }
  .share__btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 37px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    cursor: pointer; }
    .share__btn:hover {
      color: #fff; }
    .share__btn--facebook {
      background: #315096; }
      .share__btn--facebook:hover {
        background: rgba(49, 80, 150, 0.87); }
    .share__btn--twitter {
      background: #55acee; }
      .share__btn--twitter:hover {
        background: rgba(85, 172, 238, 0.87); }
    .share__btn--hatena {
      background: #008fde; }
      .share__btn--hatena:hover {
        background: rgba(0, 143, 222, 0.87); }
    .share__btn--clip {
      background: #FF9800; }
      .share__btn--clip:hover {
        background: rgba(255, 152, 0, 0.87); }
      .share__btn--clip .share__tooltip {
        display: none; }
      .share__btn--clip:hover .share__tooltip {
        display: block;
        border-radius: 5px;
        background: #eee;
        color: #555;
        font-size: 0.7rem;
        line-height: 1.7;
        position: absolute;
        width: 140px;
        bottom: -30px;
        padding: 3px; }
        @media screen and (max-width: 550px) {
          .share__btn--clip:hover .share__tooltip {
            left: -80px;
            bottom: -35px; } }
  .share__count {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    font-size: 15px;
    color: #666;
    font-family: Roboto Condensed;
    letter-spacing: 1px; }

.sort__item {
  padding: 10px;
  cursor: pointer; }
  .sort__item:hover {
    color: #3cb3e4; }

.sort__item--current {
  font-weight: bold;
  cursor: default; }
  .sort__item--current:hover {
    color: #000; }

.tag {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  font-size: 11px;
  padding: 0 10px;
  background: #eee;
  color: #777;
  text-decoration: none;
  border-radius: 4px; }

.toc {
  width: 260px; }
  @media screen and (max-width: 820px) {
    .toc {
      display: none; } }
  .toc__parent {
    margin-left: 20px; }
  .toc__child {
    padding: 12px 0 12px 4px;
    font-size: 0.85rem;
    border-bottom: 1px solid #ddd;
    line-height: 135%; }
    .toc__child--active {
      background-color: #dfdfdf; }

.wp-pagenavi {
  clear: both;
  text-align: center;
  margin: 60px 10px;
  text-decoration: none;
  font-family: Roboto Condensed;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 700; }
  .wp-pagenavi .current {
    background: #efefef; }
  .wp-pagenavi a,
  .wp-pagenavi span {
    text-decoration: none;
    padding: 5px 15px;
    border: solid 1px #eee;
    margin: 0px 5px 0px 0px;
    color: #000; }
  .wp-pagenavi .extend {
    font-size: 1.2rem;
    padding: 5px 10px;
    border: none; }

.wp-audio-shortcode,
.wp-video,
.wp-playlist.wp-audio-playlist {
  font-size: 15px;
  margin-top: 0;
  margin-bottom: 1.6em; }

.wp-playlist.wp-playlist {
  padding-bottom: 0; }

.wp-playlist .wp-playlist-tracks {
  margin-top: 0; }

.wp-playlist-item .wp-playlist-caption {
  border-bottom: 0;
  padding: 10px 0; }

.wp-playlist-item .wp-playlist-item-length {
  top: 10px; }

.gallery {
  margin-bottom: 1.6em; }

.gallery-item {
  display: inline-block;
  padding: 1.79104477%;
  text-align: center;
  vertical-align: top;
  width: 100%; }

.gallery-columns-2 .gallery-item {
  max-width: 50%; }

.gallery-columns-3 .gallery-item {
  max-width: 33.33%; }

.gallery-columns-4 .gallery-item {
  max-width: 25%; }

.gallery-columns-5 .gallery-item {
  max-width: 20%; }

.gallery-columns-6 .gallery-item {
  max-width: 16.66%; }

.gallery-columns-7 .gallery-item {
  max-width: 14.28%; }

.gallery-columns-8 .gallery-item {
  max-width: 12.5%; }

.gallery-columns-9 .gallery-item {
  max-width: 11.11%; }

.gallery-icon img {
  margin: 0 auto; }

.gallery-caption {
  color: #707070;
  display: block;
  font-size: 12px;
  line-height: 1.5;
  padding: 0.5em 0; }

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
  display: none; }

.wp-caption {
  font-size: 0.6rem;
  font-weight: bold;
  text-align: center;
  margin: 30px 0px;
  width: 100% !important; }

.aligncenter {
  text-align: center;
  display: block;
  clear: both;
  margin: 0px auto; }

.u-borderTop {
  border-top: 1px solid #ccc; }

.u-borderBottom {
  border-bottom: 1px solid #ccc; }

.u-showSm {
  display: none; }
  @media screen and (max-width: 550px) {
    .u-showSm {
      display: initial !important; } }

@media screen and (max-width: 550px) {
  .u-hideSm {
    display: none !important; } }

@media screen and (max-width: 820px) {
  .u-hideMd {
    display: none !important; } }

@media screen and (max-width: 950px) {
  .u-hideLg {
    display: none !important; } }

.u-hideFull {
  display: none !important; }

.u-inlineBlock {
  display: inline-block; }

.u-block {
  display: block; }

.u-table {
  display: table; }

.u-floatLeft {
  float: left; }

.u-floatRight {
  float: right; }

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

.u-clear:after {
  clear: both;
  display: block;
  content: ""; }

/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"), url(https://fonts.gstatic.com/s/robotocondensed/v14/b9QBgL0iMZfDSpmcXcE8nGPMCwzADhgEiQ8LZ-01G1L2Ot9t5h1GRSTIE78Whtoh.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"), url(https://fonts.gstatic.com/s/robotocondensed/v14/b9QBgL0iMZfDSpmcXcE8nPX2or14QGUHgbhSBV1Go0E.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }

/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed Italic';
  font-style: italic;
  font-weight: 700;
  src: local("Roboto Condensed Bold Italic"), local("RobotoCondensed-BoldItalic"), url(https://fonts.gstatic.com/s/robotocondensed/v14/mg0cGfGRUERshzBlvqxeAMVn2for1WIAtpulDRrWD0aAxg1Bnw5F8n5M1Q3pc3xZ.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face {
  font-family: 'Roboto Condensed Italic';
  font-style: italic;
  font-weight: 700;
  src: local("Roboto Condensed Bold Italic"), local("RobotoCondensed-BoldItalic"), url(https://fonts.gstatic.com/s/robotocondensed/v14/mg0cGfGRUERshzBlvqxeAD80_Kjvv-UM5FLsk7nHpemglnMp3_3A8V8Ai8YosRtX.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }

@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot");
  src: url("fonts/icomoon.eot") format("embedded-opentype"), url("fonts/icomoon.ttf") format("truetype"), url("fonts/icomoon.woff") format("woff"), url("fonts/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-map-marker:before {
  content: "\e903"; }

.icon-building-o:before {
  content: "\e905"; }

.icon-money:before {
  content: "\e907"; }

.icon-user:before {
  content: "\e908"; }

.icon-arrow:before {
  content: "\e902"; }

.icon-feedly:before {
  content: "\e900"; }

.icon-hatebu:before {
  content: "\e901"; }

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

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

.icon-quotes-left:before {
  content: "\e977"; }

.icon-quotes-right:before {
  content: "\e978"; }

.icon-menu:before {
  content: "\e9bd"; }

.icon-link:before {
  content: "\e9cb"; }

.icon-rss:before {
  content: "\ea9b"; }

.u-center {
  margin: 0 auto !important; }

.u-m3 {
  margin: 3px !important; }

.u-mb3 {
  margin-bottom: 3px !important; }

.u-mt3 {
  margin-top: 3px !important; }

.u-ml3 {
  margin-left: 3px !important; }

.u-mr3 {
  margin-right: 3px !important; }

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

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

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

.u-ml5 {
  margin-left: 5px !important; }

.u-mr5 {
  margin-right: 5px !important; }

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

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

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

.u-ml10 {
  margin-left: 10px !important; }

.u-mr10 {
  margin-right: 10px !important; }

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

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

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

.u-ml20 {
  margin-left: 20px !important; }

.u-mr20 {
  margin-right: 20px !important; }

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

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

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

.u-ml30 {
  margin-left: 30px !important; }

.u-mr30 {
  margin-right: 30px !important; }

.u-m40 {
  margin: 40px !important; }

.u-mb40 {
  margin-bottom: 40px !important; }

.u-mt40 {
  margin-top: 40px !important; }

.u-ml40 {
  margin-left: 40px !important; }

.u-mr40 {
  margin-right: 40px !important; }

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

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

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

.u-ml50 {
  margin-left: 50px !important; }

.u-mr50 {
  margin-right: 50px !important; }

@media screen and (max-width: 550px) {
  .u-mAuto--sm {
    margin: 0 auto !important; } }

@media screen and (max-width: 550px) {
  .u-m3--sm {
    margin: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-mb3--sm {
    margin-bottom: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-mt3--sm {
    margin-top: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-ml3--sm {
    margin-left: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-mr3--sm {
    margin-right: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-m10--sm {
    margin: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-mb10--sm {
    margin-bottom: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-mt10--sm {
    margin-top: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-ml10--sm {
    margin-left: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-mr10--sm {
    margin-right: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-m20--sm {
    margin: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-mb20--sm {
    margin-bottom: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-mt20--sm {
    margin-top: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-ml20--sm {
    margin-left: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-mr20--sm {
    margin-right: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-m30--sm {
    margin: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-mb30--sm {
    margin-bottom: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-mt30--sm {
    margin-top: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-ml30--sm {
    margin-left: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-mr30--sm {
    margin-right: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-m40--sm {
    margin: 40px !important; } }

@media screen and (max-width: 550px) {
  .u-mb40--sm {
    margin-bottom: 40px !important; } }

@media screen and (max-width: 550px) {
  .u-mt40--sm {
    margin-top: 40px !important; } }

@media screen and (max-width: 550px) {
  .u-ml40--sm {
    margin-left: 40px !important; } }

@media screen and (max-width: 550px) {
  .u-mr40--sm {
    margin-right: 40px !important; } }

@media screen and (max-width: 550px) {
  .u-m50--sm {
    margin: 50px !important; } }

@media screen and (max-width: 550px) {
  .u-mb50--sm {
    margin-bottom: 50px !important; } }

@media screen and (max-width: 550px) {
  .u-mt50--sm {
    margin-top: 50px !important; } }

@media screen and (max-width: 550px) {
  .u-ml50--sm {
    margin-left: 50px !important; } }

@media screen and (max-width: 550px) {
  .u-mr50--sm {
    margin-right: 50px !important; } }

.u-mbn3 {
  margin-bottom: -3px !important; }

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

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

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

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

.u-mbn40 {
  margin-bottom: -40px !important; }

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

@media screen and (max-width: 550px) {
  .u-mbn3--sm {
    margin-bottom: -3px !important; } }

@media screen and (max-width: 550px) {
  .u-mbn10--sm {
    margin-bottom: -10px !important; } }

@media screen and (max-width: 550px) {
  .u-mbn20--sm {
    margin-bottom: -20px !important; } }

@media screen and (max-width: 550px) {
  .u-mbn30--sm {
    margin-bottom: -30px !important; } }

@media screen and (max-width: 550px) {
  .u-mbn40--sm {
    margin-bottom: -40px !important; } }

@media screen and (max-width: 550px) {
  .u-mbn50--sm {
    margin-bottom: -50px !important; } }

.u-p0 {
  padding: 0 !important; }

.u-p3 {
  padding: 3px !important; }

.u-p5 {
  padding: 5px !important; }

.u-p10 {
  padding: 10px !important; }

.u-p20 {
  padding: 10px !important; }

.u-p30 {
  padding: 30px !important; }

.u-p40 {
  padding: 40px !important; }

.u-p50 {
  padding: 50px !important; }

.u-p100 {
  padding: 100px !important; }

@media screen and (max-width: 550px) {
  .u-p3--sp {
    padding: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-p10--sp {
    padding: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-p20--sp {
    padding: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-p30--sp {
    padding: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-p40--sp {
    padding: 40px !important; } }

.u-pb3 {
  padding-bottom: 3px !important; }

.u-pt3 {
  padding-top: 3px !important; }

.u-pl3 {
  padding-left: 3px !important; }

.u-pr3 {
  padding-right: 3px !important; }

.u-pb5 {
  padding-bottom: 5px !important; }

.u-pt5 {
  padding-top: 5px !important; }

.u-pl5 {
  padding-left: 5px !important; }

.u-pr5 {
  padding-right: 5px !important; }

.u-pb10 {
  padding-bottom: 10px !important; }

.u-pt10 {
  padding-top: 10px !important; }

.u-pl10 {
  padding-left: 10px !important; }

.u-pr10 {
  padding-right: 10px !important; }

.u-pb20 {
  padding-bottom: 20px !important; }

.u-pt20 {
  padding-top: 20px !important; }

.u-pl20 {
  padding-left: 20px !important; }

.u-pr20 {
  padding-right: 20px !important; }

.u-pb30 {
  padding-bottom: 30px !important; }

.u-pt30 {
  padding-top: 30px !important; }

.u-pl30 {
  padding-left: 30px !important; }

.u-pr30 {
  padding-right: 30px !important; }

.u-pb40 {
  padding-bottom: 40px !important; }

.u-pt40 {
  padding-top: 40px !important; }

.u-pl40 {
  padding-left: 40px !important; }

.u-pr40 {
  padding-right: 40px !important; }

.u-pb50 {
  padding-bottom: 50px !important; }

.u-pt50 {
  padding-top: 50px !important; }

.u-pl50 {
  padding-left: 50px !important; }

.u-pr50 {
  padding-right: 50px !important; }

.u-pb100 {
  padding-bottom: 100px !important; }

.u-pt100 {
  padding-top: 100px !important; }

.u-pl100 {
  padding-left: 100px !important; }

.u-pr100 {
  padding-right: 100px !important; }

@media screen and (max-width: 550px) {
  .u-pb3--sp {
    padding-bottom: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-pt3--sp {
    padding-top: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-pl3--sp {
    padding-left: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-pr3--sp {
    padding-right: 3px !important; } }

@media screen and (max-width: 550px) {
  .u-pb10--sp {
    padding-bottom: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-pt10--sp {
    padding-top: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-pl10--sp {
    padding-left: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-pr10--sp {
    padding-right: 10px !important; } }

@media screen and (max-width: 550px) {
  .u-pb20--sp {
    padding-bottom: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-pt20--sp {
    padding-top: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-pl20--sp {
    padding-left: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-pr20--sp {
    padding-right: 20px !important; } }

@media screen and (max-width: 550px) {
  .u-pb30--sp {
    padding-bottom: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-pt30--sp {
    padding-top: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-pl30--sp {
    padding-left: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-pr30--sp {
    padding-right: 30px !important; } }

@media screen and (max-width: 550px) {
  .u-pb40--sp {
    padding-bottom: 40px !important; } }

@media screen and (max-width: 550px) {
  .u-pt40--sp {
    padding-top: 40px !important; } }

@media screen and (max-width: 550px) {
  .u-pl40--sp {
    padding-left: 40px !important; } }

@media screen and (max-width: 550px) {
  .u-pr40--sp {
    padding-right: 40px !important; } }

.u-txtBlack {
  color: #333 !important; }

.u-txtWhite {
  color: #fff !important; }

.u-txtGray {
  color: #999 !important; }

.u-txtGreen {
  color: #abc53f !important; }

.u-txtSizeL {
  font-size: 1.1rem;
  line-height: 1.7; }
  @media screen and (max-width: 550px) {
    .u-txtSizeL {
      font-size: 1rem; } }

.u-txtSizeM {
  font-size: 0.9rem;
  line-height: 150%; }
  @media screen and (max-width: 550px) {
    .u-txtSizeM {
      font-size: 0.8rem; } }

.u-txtSizeS {
  font-size: 0.7rem;
  line-height: 150%; }

.u-txtSizeXS {
  font-size: 0.7rem;
  line-height: 150%; }

.u-txtBold {
  font-weight: bold; }

.u-txtCenter {
  text-align: center; }

.u-txtRight {
  text-align: right; }

@media screen and (max-width: 550px) {
  .u-txtCenter--sm {
    text-align: center; } }

@media screen and (max-width: 550px) {
  .u-txtRight--sm {
    text-align: right; } }