@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
  .issue-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 8px 24px;
  }
  .issue {
    border: 2px solid;
    padding: 8px;
    border-radius: 8px;
	min-width:4em;
	text-align:center;
  }
  .issue-level1 {
    color: #333333;
    border-color: #F4511E;
    background: #FFCCBC;
  }
    .issue-level2 {
    color: #333333;
    background: #FFEE58;
    border-color: #FBC02D;
  }
    .issue-level3 {
    color: white;
    background: #FFB74D;
    border-color: #FB8C00;
  }
    .issue-level4 {
    color: white;
    background: #00BCD4;
    border-color: #303F9F;
  }
    .issue-level5 {
    color: white;
    background: #7CB342;
    border-color: #2E7D32;
  }

/* フロントページのメインコンテンツ上下の余白対策 */

/* サイト型　フロントページのメインコンテンツ上下の余白対策 */
.body.skin-grayish.front-top-page .breadcrumb,
.body.skin-grayish.front-top-page .article-header,
.body.skin-grayish.front-top-page .pr-label-s {
  display: none;
}

/* サイト型のみ　ブログ型では無効 */
.body.skin-grayish.front-top-page:not(.blog) .content .main {
  padding-top: 0;
  padding-bottom: 0;
}

/* サイト型のみ　ブログ型では無効 */
.body.skin-grayish.front-top-page:not(.blog) .content {
  margin-top: 0;
}

/* サイト型のみ */
.body.skin-grayish.front-top-page .entry-content {
  margin-top: 0;
  margin-bottom: 0;
}

/* サイト型のみ */
.body.skin-grayish.front-top-page .article {
  margin-bottom: 0;
}

/* フロントページのメインコンテンツ上下の余白対策 end*/

.new-entry-card.widget-entry-card .cat-label {
  display: none;
}

/* 新着記事一覧 カテゴリーラベルは必要な部分のみ表示 cstm-pat-2のクラス名がある場合は表示*/
.cstm-pat-2 .new-entry-card.widget-entry-card .cat-label {
  display: block;
}

/* 人気記事一覧 カテゴリーラベルは必要な部分のみ表示 まず全て非表示にする*/
.popular-entry-card.widget-entry-card .cat-label {
  display: none;
}

/* 人気記事一覧 カテゴリーラベルは必要な部分のみ表示 cstm-pat-5のクラス名がある場合は表示*/
.cstm-pat-5 .popular-entry-card.widget-entry-card .cat-label {
  display: block;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
      .cstm-pat-1 .wp-block-cover__inner-container {
           padding-top: 3rem;
        }

      /* カラムブロックを縦にする*/
      .cstm-pat-1 .wp-block-cover__inner-container .wp-block-columns {
         flex-direction: column;
       }

      .cstm-pat-1 .wp-block-cover__inner-container  h2.cstm-head  {
         text-align: center;
         padding-right: 0px;
       }

       .cstm-pat-1 .wp-block-column .info-list-box.block-box {
         border-left: none;
         padding-left: 0;
       }

      .cstm-pat-1 .is-style-divider-line .info-list-item {
        border-bottom: solid 1px var(--LtGray_T0);
      }

     /* More btn */
      p.cstm-more-btn {
        padding-right: 1em;
      }

      p.cstm-more-btn a::before {
        width: 2em;
     }

.cstm-blk-fullwide-inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}

/* テーマカスタマイザーで設定した英字Font + 日本語は　Cocoon設定のサイトフォント選択Font*/
.cstm-skin-font-set {
font-family: var(--skin-grayish-style-font);
    font-weight: 400;
    letter-spacing: .1rem;
}

/* 英字Font Montserrat　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-montserrat {
  font-family: "Montserrat", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Lato　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-lato {
  font-family: "Lato", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Inknut Antiqua　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-inknut-antiqua {
  font-family: "Inknut Antiqua", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Spectral　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-spectral {
  font-family: "Spectral", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Lora　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-lora {
  font-family: "Lora", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Jost　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-jost {
  font-family: "Jost", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Roboto Slab　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-roboto-slab {
  font-family: "Roboto Slab", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* H見出しのスタイルクリア */
.article h2.cstm-head,
.article h3.cstm-head,
.article h4.cstm-head,
.article h5.cstm-head,
.article h6.cstm-head {
  font-weight: 400;
  letter-spacing: .1rem;
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  position: static;
}

.article h2.cstm-head::before,
.article h3.cstm-head::before,
.article h4.cstm-head::before {
  display: none;
}

.article h2.cstm-head {
  font-size: 64px;
  font-weight: 200;
}

/* More btn */
p.cstm-more-btn {
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
  line-height: 1.2;
  width: 100%;
  padding-right: 6em;
}
p.cstm-more-btn a {
  display: inline-block;
  width: fit-content;
  transition: color 0.3s ease-in-out;
  text-decoration: none;
  position: relative;
}
p.cstm-more-btn a::before {
  display: block;
  content: "";
  background-color: var(--LtGray_S50);
  width: 4em;
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 120%;
  margin: auto;
  transition: transform 0.3s ease-in-out;
}
p.cstm-more-btn a:hover::before {
  transform: translate(1em);
}

/* cstm-pat-1 作例1のブロック */
.cstm-pat-1 .wp-block-cover__inner-container {
padding-top: 6rem;
padding-bottom: 6rem;    
}

/* cstm-pat-1 作例1のH2見出し横の余白 */
.cstm-pat-1 .wp-block-cover__inner-container  h2.cstm-head {
    padding-right: 32px;
}

/* cstm-pat-1 作例1の新着情報ブロック　横線 */
.cstm-pat-1 .wp-block-column .info-list-box.block-box {
   border-left: solid 1px var(--LtGray_T0);
   padding-left: 32px;
}

/* cstm-pat-1 作例1の新着情報ブロック　*/
.cstm-pat-1 .is-style-divider-line .info-list-item {
    border-bottom: none;
    padding: 20px 0;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
      .cstm-pat-1 .wp-block-cover__inner-container  h2.cstm-head  {
         font-size: 48px;
         padding: 0;
      }
 
      .cstm-pat-1 .is-style-divider-line.info-list {
        padding: 0 8px;
      }
      .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta .info-list-item-date {
        display: block;
       }     

      .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta,      
      .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta .info-list-item-categorys,
      .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta .info-list-item-categorys span {
        display: flex;
       }

      .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta {
         flex-direction: column;
         row-gap: 0.4em;
       }

      .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta .info-list-item-categorys {
        flex-wrap: wrap;
         row-gap: 0.4em;
       }
}

.new-entry-card.widget-entry-card .cat-label {
	display: block;
	margin-top: 1em;
}

.new-entry-cards .cat-label {
  display: inline;
}