Cocoonの新機能でパターンデータをシェア可能に！作例のパターンをシェア&使い方

@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* カバーブロック用：インナーブロックの中央寄せを追加 */
.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;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;
     }

}

/*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;
       }

}