/*
Theme Name:  CRAFT Magazine
Description:  Theme to CRAFT Magazine. Child theme for the CODE.
Author:  S-cubism
Template:  code_tcd090
Version:  1.0
*/


/* コメントエリアを強制的に非表示 */
#comments{
  display: none;
}

/* フォントの読み込み */

@font-face {
    font-family: "Noto Sans JP";
    src:
        url("/wp-content/themes/code_tcd090-child/fonts/Noto_Sans_JP/static/NotoSansJP-Regular.ttf") format("truetype");
        font-weight: 400;
}

@font-face {
    font-family: "Nyght Serif";
    src:
        url("/wp-content/themes/code_tcd090-child/fonts/nyght_serif/NyghtSerif-Regular.woff2") format("woff2"),
        url("/wp-content/themes/code_tcd090-child/fonts/nyght_serif/NyghtSerif-Regular.woff") format("woff"),
        url("/wp-content/themes/code_tcd090-child/fonts/nyght_serif/NyghtSerif-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Craft Sans";
    src:
        url("/wp-content/themes/code_tcd090-child/fonts/craft_sans/CraftSans-Light.woff2") format("woff2"),
        url("/wp-content/themes/code_tcd090-child/fonts/craft_sans/CraftSans-Light.woff") format("woff"),
        url("/wp-content/themes/code_tcd090-child/fonts/craft_sans/CraftSans-Light.ttf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "Craft Sans";
    src:
        url("/wp-content/themes/code_tcd090-child/fonts/craft_sans/CraftSans-Regular.woff2") format("woff2"),
        url("/wp-content/themes/code_tcd090-child/fonts/craft_sans/CraftSans-Regular.woff") format("woff"),
        url("/wp-content/themes/code_tcd090-child/fonts/craft_sans/CraftSans-Regular.ttf") format("truetype");
    font-weight: 400;

}

@font-face {
    font-family: "Craft Sans";
    src:
        url("fonts/craft_sans/CraftSans-Bold.woff2") format("woff2"),
        url("fonts/craft_sans/CraftSans-Bold.woff") format("woff"),
        url("fonts/craft_sans/CraftSans-Bold.ttf") format("truetype");
    font-weight: 700;
}
:root {
  /* オリジナルフォント */
  --sans: 'Craft Sans', 'Noto Sans JP', sans-serif;
  /* --noto: 'Noto Sans JP', sans-serif; */
  --serif: 'Nyght Serif', serif;
}

.rich_font_type2{
  font-family: var(--serif) !important;
  font-weight: 500 !important;
}
body{
  font-family: var(--sans) !important;
  font-weight: 400;
}


/* サイドバーのCRAFT Magazine */
#site_desc{
  font-weight: 700 !important;
}



/* カテゴリーの下線  色は管理画面からカテゴリ毎に設定 */
.q_custom_button.animation_type4 span:after {
  transition: width 0.4s ease 0s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: absolute;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  bottom: 0.1em;
  mask-image: unset;
}

#header_slider .post_item .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

#header_content_post_list .item .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

.cb_trend .post_list .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

#page_header .catch span:after {
  transition: width 0.4s ease 0.5s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 7px;
  height: 7px;
  bottom: 0.45em;
  mask-image: url(img/common/grunge_bg_shape.png);
}

.post_carousel .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

.post_carousel .pr_label .line {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  height: 2px;
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 5px;
  height: 5px;
  top: -4px;
  mask-image: unset;

}

.author_list article .name:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  top: -4px;
  z-index: 1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  bottom: 0.05em;
  mask-image: unset;

}

.featured_post .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

.featured_post .pr_label .line {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

.blog_list .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

.blog_list .pr_label .line {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

#author_page_header .name:after {
  -webkit-transition: width 0.4s ease 0.5s;
  transition: width 0.4s ease 0.5s;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  mask-image: unset;

}

#author_list .name:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: 1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  bottom: 0.05em;
  mask-image: unset;

}

#post_title .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  height: 2px;
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

#author_post li a span:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: absolute;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  bottom: 27px;
  mask-image: unset;

}

#mega_category .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  height: 2px;
  display: block;
  position: relative;
  left: -8px;
  z-index: 1;
  background: red url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  filter: blur(0px);
  border-radius: 0;
  background-blend-mode: screen;
}

.post_slider_widget .category:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  height: 2px;
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

.category_list_widget a:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 2px);
  display: block;
  position: relative;
  left: -1px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: 0;
  mask-image: unset;

}

.toc_widget_wrap.styled .toc_link:after {
  transition: width .2s;
  content: '';
  width: calc(100% + 16px);
  display: block;
  position: relative;
  left: -8px;
  z-index: -1;
  background: url(/wp-content/themes/code_tcd090-child/img/common/grunge_bg.png);
  background-blend-mode: color-dodge;
  filter: blur(0px);
  border-radius: 0;
  height: 2px;
  top: -6px;
  mask-image: unset;

}


/* ウィジェットのタイトル */
.widget_headline {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
}

.rank_headline .headline{
  font-weight: 400 !important;
}



/* SNSリンクにLINEアイコンを追加 */
.sns_button_list li.line_business a { width:21px;}
.sns_button_list li.line_business a:before { 
  content: '';
  width: 21px;
  height: 21px;
  background: url(/wp-content/themes/code_tcd090-child/img/common/line.png) left center no-repeat;
  background-size: contain;
}
 /* スニペット表示調整 */
  #snipett {
    border: 1px solid #f2f2f2;
    background: #fff;
    border-radius: 20px;
    margin: 20px 0;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);

    a {
      text-decoration: none;
      display: block;
      padding: 10px;
    }

    .item-link {
      display: flex;
      justify-content: center;

      @media screen and (max-width: 767px) {
        flex-direction: column;
      }
    }

    .item-link-img {
      width: 45%;
      padding-top: 15px;
      @media screen and (max-width: 767px) {
        width: 80%;
        padding-top: 15px;
        margin: -30px auto;
      }
    }

    .item-link-text-box {
      display: block;
      padding: 20px;
      margin: auto;
      width: 50%;
      padding-left: 40px;
      @media screen and (max-width: 767px) {
        padding: 10px;
        width: 90%;
        margin: auto 20px;
      }
    }
    .item-link-detail {
      line-height: 1.8rem !important;
      margin: 10px 0 !important;
		width: 95%;
    }

    .item-link-name {
      line-height: normal;
      margin: 0px 0 !important;
      font-weight: bold;
      font-size: 24px;
    }

    .item-link-intro {
      margin: 10px 0 !important;
      font-weight: bold;
    }
  }
  @media screen and (max-width: 767px) {
    .snippet-right .item-link {
      flex-direction: column-reverse !important;
    }

    .snippet-right .item-link-img {
      padding-top: 55px !important;
    }
  }

  .snippet-button {
        display: block;
    background: #333;
    width: 90%;
    padding: 0px;
    text-align: center;
    margin-top: -20px;
    margin: auto;
    margin-bottom: 30px;
    z-index: 10;
    position: relative;
    margin-top: -40px;
  }

  .snippet-button a {
    color: #fff !important;
  }

  .snippet-button a:hover {
    color: #fff !important;
  }

.item-link-small {
    font-size: 12px;
}
  /* スニペット調整枠終了 */

  /* フォント調整 */
  #footer_banner .rich_font_type2 {
    font-family: var(--sans) !important;
    font-weight: 400 !important;
  }

  .catch.common_headline.rich_font_type2.cat_id4.animate_item.animate {
    font-family: var(--sans) !important;
    font-weight: 400 !important;
  }

  #page_header .catch,
  #page_header .desc {
    opacity: 0;
    position: relative;
    font-family: var(--sans) !important;
  }
  /* フォント調整終了 */
/* 記事サムネ文字数調整 */

.featured_post .title {
  max-height: 5.8em;
}
.featured_post .title a {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.ranking_post_list_widget .title a {
  max-height: 7.6em;
}

.ranking_post_list_widget .title span {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

@media screen and (max-width: 767px) {
  .bg_image {
    background-size: contain !important;
  }

  #header_slider_wrap {
    height: 600px !important;
  }
  #header_slider {
    height: 600px !important;
  }
}