@charset "UTF-8";
/*********************
Widgets
*********************/
/******************************************************************
/******************************************************************
Site Name:
Author:
Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.
******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/* mixinの定義 */
/* 2色グラデーション */
/* 3色グラデーション */
/* アニメーション */
/*********************
Common Styles
*********************/
/*********************
Margin
*********************/
/* 40px */
/*********************
Padding
*********************/
/*********************
Contents Width
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Typography

Need to import a font or set of icons for your site? Drop them in
here or just use this to establish your typographical grid. Or not.
Do whatever you want to...GOSH!

Helpful Articles:
http://trentwalton.com/2012/06/19/fluid-type/
http://ia.net/blog/responsive-typography-the-basics/
http://alistapart.com/column/responsive-typography-is-a-physical-discipline

******************************************************************/
/*********************
FONT FACE (IN YOUR FACE)
*********************/
/*
 i imported this one in the functions file so bones would look sweet.
 don't forget to remove it for your site.
*/
/*********************
Font Size
*********************/
/* 35px */
/* 30px */
/* 26px */
/* 22px */
/* 20px */
/* 18px */
/* 12px */
/* 20px */
/* 15px */
/* 12px */
/******************************************************************
 TITLE STYLES
******************************************************************/
/* 30px */
.title-xlarge {
  font-size: 1.875rem !important;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.038rem; }

/* 26px */
.title-large {
  font-size: 1.625rem !important;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.038rem; }

/* 22px */
.title-medium-large {
  font-size: 1.375rem !important;
  font-weight: 600;
  line-height: 1.5em;
  letter-spacing: 0.03em; }

/* 20px */
.title-medium {
  font-size: 1.25rem !important;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0.0230769em; }

/* 18px */
.title-medium-small {
  font-size: 1.125rem !important;
  font-weight: 500;
  line-height: 1.563rem;
  letter-spacing: 0.0375rem; }

/* 12px */
.title-small {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0.0375em; }

/******************************************************************
 Weght STYLES
******************************************************************/
.fwb {
  font-weight: 600; }

p {
  -ms-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3; }

/******************************************************************
Site Name:
Author:
Stylesheet: Categories

******************************************************************/
/******************************************************************
Site Name:
Author:

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://sachagreif.com/useful-sass-mixins/
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/*********************
画像のパス
*********************/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/*********************
Thumnail
*********************/
/*********************
Border
*********************/
/*********************
background
*********************/
/*********************
Display
*********************/
.pc-hide {
  display: none; }

/*********************
Layout
*********************/
/* HOME */
.home {
  /*********************
  Carousel
  *********************/
  /* カラム落ち対策 */
  /* カラム落ち対策  end*/
  /* widget_post-carousel */
 /*********************
  Ad-Container　広告枠
*********************/
  /*********************
  Contents
  *********************/
  /* 新着とランキングのレイアウト統一 */
  /* 新着とランキングのタイトル統一 */
  /* widget_popular_post */
  /* Top features */
  /* Series_list */
  /* Palette Writers */
  /* Follow Us */
  /* app-badge */ }
  .home .wrap {
    width: 100% !important;
    margin: 0;
    padding: 0; }
  .home #main {
    width: 100%; }
  .home .widget {
    margin: 0;
    padding: 0; }
  .home .widgettitle {
    padding-top: 3.5rem;
    font-size: 1.625rem !important; }
  .home .hidden-separator {
    opacity: 0; }
  .home .ocpc_post_layout {
    background: #FFF; }
  .home .owl-dots {
    display: none; }
  .home .Ad-Container {
    max-width: 680px;
    margin: auto;
    position: relative; }
    .home .Ad-Container:before {
      z-index: 30;
      position: absolute;
      right: 0;
      content: "AD";
      font-size: 0.75rem;
      text-align: center;
      color: #AAAAAA;
      display: block;
      width: 1.4rem;
      height: 18px;
      line-height: 18px;
      z-index: 10000;
      background: #ececec; }
    .home .Ad-Container img {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      border: 1px solid #ececec; }
  .home .widget_wpsp_widget {
    /* 新着コラムのタイトル背景 */
    /* 偶数のみ余白 */
    /* 奇数のみ余白 */ }
    .home .widget_wpsp_widget .wp-show-posts:before {
      content: " ";
      display: block;
      width: 165px;
      height: 158px;
      z-index: -1;
      position: absolute;
      margin-top: -90px;
      margin-left: -50px;
      background-image: url(/wp-content/themes/bones/library/images/common/bg_title.svg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      background-size: contain; }
    .home .widget_wpsp_widget article:nth-of-type(even) .wp-show-posts-inner {
      margin: 0 0 0 0.5rem !important; }
    .home .widget_wpsp_widget article:nth-of-type(odd) .wp-show-posts-inner {
      margin: 0 0.5rem 0 0 !important; }
    .home .widget_wpsp_widget .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) {
      flex-direction: column;
      width: 50%; }
  .home .wp-show-posts .wp-show-posts-entry-title, .home .popular-posts .entry-title {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.0375em;
    font-weight: 400;
    margin: 0; }
  .home .wp-show-posts {
    max-width: 680px;
    margin: 0 auto !important; }
    .home .wp-show-posts .wpsp-image-left {
      max-width: 80px; }
    .home .wp-show-posts .wp-show-posts-image {
      margin-bottom: 0 !important; }
    .home .wp-show-posts img {
      width: 100%;
      height: auto; }
  .home .popular-posts-eye-catch {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 20px 0 20px; }
    .home .popular-posts-eye-catch img {
      padding: 0;
      width: 80px;
      height: auto;
      transform: rotate(-5deg); }
  .home .popular-posts {
    max-width: 680px;
    margin: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important; }
    .home .popular-posts .entry-wrap {
      margin-left: 16px;
      flex: 1; }
    .home .popular-posts .popular-posts-thumbnail {
      width: 80px;
      max-width: 80px; }
    .home .popular-posts .popular-posts-thumbnail img {
      width: 80px; }
    .home .popular-posts .post-ranking {
      display: flex;
      flex-wrap: wrap;
      max-width: 680px;
      justify-content: space-between; }
      .home .popular-posts .post-ranking a {
        margin: 1rem 0 1rem 1.25rem; }
  .home .top-feature {
    max-width: 680px;
    margin: 3.75rem auto auto auto; }
    .home .top-feature:before {
      content: " ";
      display: block;
      background-image: url(/wp-content/themes/bones/library/images/top/feature/bg-title.svg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      background-position: left;
      width: 90%;
      padding-top: 200px;
      margin-left: -40px;
      max-height: 250px; }
    .home .top-feature h1 {
      margin-top: -4rem; }
    .home .top-feature_theme {
      width: 100%;
      padding: 0;
      margin: 0 auto 2rem auto;
      max-width: 334px;
      font-weight: 600; }
    .home .top-feature_theme:before {
      content: " ";
      display: block;
      background-image: url(/wp-content/themes/bones/library/images/top/feature/bg-theme.svg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      height: 20px; }
    .home .top-feature_theme span {
      display: block;
      padding: 0 20px; }
    .home .top-feature_inner {
      flex-direction: column;
      background-image: url(/wp-content/themes/bones/library/images/top/feature/bg-inner.svg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      position: relative;
      background-size: 140vw; }
    .home .top-feature_thumbnail {
      width: 50%;
      min-width: 238px;
      z-index: 20; }
      .home .top-feature_thumbnail img {
        width: 100%;
        height: auto; }
    .home .top-feature_fukidashi-wrap {
      width: 295px;
      margin: -20px auto 0 auto; }
    .home .top-feature .answer-content {
      background: #fff;
      border-radius: 30px 30px 0 0;
      padding: 1.5rem 1.5rem 0 1.5rem; }
    .home .top-feature .answer-text {
      font-size: 0.9375rem; }
    .home .top-feature .answer-author-inner {
      margin-top: -40px; }
    .home .top-feature .answer-author:before {
      content: " ";
      display: block;
      background-image: url(/wp-content/themes/bones/library/images/top/feature/bg-fukidashi-btm.svg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      background-size: cover;
      width: 295px;
      height: 50px; }
    .home .top-feature .answer-more {
      margin-bottom: -20px; }
    .home .top-feature .avatar {
      width: 94px;
      height: auto; }
    .home .top-feature .vcard-mediam {
      flex-direction: row-reverse;
      align-items: flex-end; }
      .home .top-feature .vcard-mediam img.sab-custom-avatar {
        max-width: 94px; }
      .home .top-feature .vcard-mediam div {
        padding-right: 10px; }
    .home .top-feature .job {
      font-size: 0.75rem; }
    .home .top-feature .name {
      font-weight: 600; }
  .home h4.series-title {
    padding-top: 3.75rem;
    margin-top: 0 !important; }
  .home .series-list {
    text-align: center;
    max-width: 680px;
    margin: auto; }
    .home .series-list__banner {
      width: 100%;
      height: auto;
      line-height: 0;
      margin: 0 0 0.625rem 0; }
    .home .series-list__banner:nth-of-type(1) {
      width: 100%;
      height: auto;
      margin: 0 0 0.625rem 0; }
    .home .series-list__banner .d-flex-alg-center {
      flex-wrap: nowrap; }
    .home .series-list__banner h1 {
      font-size: 1.25rem;
      font-weight: 600; }
    .home .series-list .series-header__title {
      flex: 1; }
    .home .series-list .series-header__banner {
      flex: 1; }
      .home .series-list .series-header__banner img {
        width: 100%;
        height: auto; }
      .home .series-list .series-header__banner p {
        display: inline-block;
        width: calc(100% - 20px);
        font-size: 0.875rem;
        position: relative;
        margin: 10px 10px 1rem 10px;
        line-height: 1.8;
        padding: 0.5em;
        top: 0;
        letter-spacing: -0.01rem; }
      .home .series-list .series-header__banner p:before {
        position: absolute;
        top: 0;
        content: '';
        width: 16px;
        height: 40%;
        display: inline-block;
        border-left: solid 1px #cccccc;
        border-top: solid 1px #cccccc;
        left: 0; }
      .home .series-list .series-header__banner p:after {
        position: absolute;
        bottom: 0;
        content: '';
        width: 16px;
        height: 40%;
        display: inline-block;
        content: '';
        border-right: solid 1px #cccccc;
        border-bottom: solid 1px #cccccc;
        right: 0; }
  .home .palette-writers-inner {
    text-align: center;
    max-width: 680px;
    margin: 0 2rem;
    padding-bottom: 3.75rem; }
  .home .palette-writers .vcard-tiles {
    margin-bottom: 2.5rem; }
  .home .follow-us {
    color: #fff; }
    .home .follow-us-inner {
      text-align: center;
      max-width: 400px;
      margin: auto;
      padding-bottom: 3.75rem; }
    .home .follow-us .widgettitle img {
      width: 240px;
      height: auto; }
    .home .follow-us a p {
      color: #fff;
      margin-left: 1rem; }
    .home .follow-us li a {
      display: flex;
      margin-bottom: 1.25rem;
      border-radius: 24px;
      background: #000;
      padding: 10px; }
    .home .follow-us li:nth-of-type(2) a {
      background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
      background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
      /*グラデーション①*/
      overflow: hidden;
      /*はみ出た部分を隠す*/ }
    .home .follow-us li:nth-of-type(3) a {
      background: #1877f2; }
    .home .follow-us li img {
      max-width: 24px;
      height: auto; }
    .home .follow-us li:nth-last-of-type(1) a {
      margin-bottom: 0; }
  .home .app-badge__bannar img {
    height: auto;
    margin: 3.75rem auto 0 auto;
    float: left; }
  .home .app-badge__bannar img.pc-hide {
    margin-left: -10px; }
  .home .app-badge__link-pc, .home .app-badge__link-sp {
    display: flex;
    justify-content: center;
    width: 96%;
    margin: 0 auto 0 auto;
    padding-top: 1rem; }
  .home .breadcrumbs {
    display: none; }
  .home .about-palette-contents {
    max-width: 365px;
    margin: auto; }
    .home .about-palette-contents p:nth-last-of-type(1) {
      margin-bottom: 3.5rem; }

@media screen and (min-width: 654px) {
  .series-list__banner:nth-of-type(n+2) {
    width: 320px !important; } }
@media screen and (min-width: 768px) {
  .home .header {
    overflow: visible !important; }

  .app-badge {
    max-width: 680px;
    margin: 0 auto; }

  /* Top features */
  .top-feature {
    margin: auto; }
    .top-feature_inner {
      flex-direction: row !important;
      background-position: right -50px !important;
      background-size: 570px !important;
      padding-bottom: 30px !important; }
    .top-feature h1 {
      margin-top: -8rem !important;
      line-height: 0.1; }
    .top-feature:before {
      padding-top: 252px !important; }
    .top-feature_fukidashi-wrap {
      z-index: 12;
      width: 295px;
      margin: 50px auto 0 -36px !important; }
    .top-feature .answer-text {
      margin-top: 10px;
      line-height: 1.5rem; }

  /* Palette Writers */
  .palette-writers-inner {
    margin: 0 auto !important; } }
@media screen and (min-width: 230px) and (max-width: 767px) {
  /* Display */
  .pc-hide {
    display: block; }

  /*********************
  Layout
  *********************/
  .home .widget {
    padding: 0 1.5rem;
    overflow: visible; }

  /* With100%  */
  .home .widget:nth-of-type(1), .home .widget:nth-of-type(5), .home .widget:nth-of-type(10), .home .widget:nth-of-type(12) {
    padding: 0; }

  /*********************
  Carousel
  *********************/
  /* widget_post-carousel */
  .home .ocpc_post_layout {
    margin-bottom: 8px; }

  /* widget_post-carousel width 100%*/
  .home .widget:nth-of-type(1) {
    width: 100%; }

  /*********************
  Contents
  *********************/
  /* カルーセル */
  /* widget_post-carousel */
  .home .ocpc_post_layout {
    margin-bottom: 8px; }

  .home .wp-show-posts-entry-title, .home .popular-posts .entry-title {
    font-size: 0.875rem !important;
    line-height: 1.2rem !important;
    letter-spacing: 0.0375em !important;
    font-weight: 400 !important;
    margin: 0 !important; }

  .widget_wpsp_widget {
    /* 新着コラムのタイトル背景 */
    /* 偶数のみ左余白0 */
    /* 奇数のみ左余白0 */ }
    .widget_wpsp_widget .wp-show-posts:before {
      content: " ";
      display: block;
      width: 165px;
      height: 158px;
      z-index: -1;
      position: absolute;
      margin-top: -90px;
      margin-left: -50px;
      background-image: url(/wp-content/themes/bones/library/images/common/bg_title.svg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      background-size: contain; }
    .widget_wpsp_widget article:nth-of-type(even) .wp-show-posts-inner {
      margin: 0 0 0.5rem 10px !important; }
    .widget_wpsp_widget article:nth-of-type(odd) .wp-show-posts-inner {
      margin: 0 0.5rem 0 0 !important; }

  .wp-show-posts-entry-meta .wp-show-posts-author img {
    width: 24px !important;
    height: auto;
    margin-right: 10px !important; }

  /* Series_list */
  .home .series-list-banner {
    width: 100%; }

  .series-header__banner p {
    width: 90% !important;
    padding: 1rem !important; }

  /* widget_popular_post */
  .popular-posts {
    background: #fff;
    padding-top: 2.2rem !important;
    margin-bottom: 6rem !important; }
    .popular-posts-thumbnail {
      max-width: 33.33% !important; }
    .popular-posts .post-ranking a:nth-of-type(1n) {
      margin: 1rem 0 1rem 0 !important; }
    .popular-posts .term-name {
      display: flex;
      align-items: flex-start;
      margin-bottom: 4px; }
    .popular-posts .post-ranking a {
      width: 100% !important; }

  /* Follow Us */
  .follow-us {
    color: #fff; }
    .follow-us-inner {
      width: 80% !important; }
    .follow-us p {
      text-align: left;
      padding: 0;
      margin: 0;
      font-size: 0.75rem; }
    .follow-us li a {
      margin-bottom: 2.5rem !important; } }