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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

/************************************
** 投稿者を非表示にする
************************************/
.page .author-info {
    display: none;
}
.post .author-info {
    display: none;
}

/* **************************************************
** 固定ページの日付（投稿日・更新日）の非表示
************************************************** */
.post-84 .date-tags,
.post-1736 .date-tags,
.post-909 .date-tags,
.post-1180 .date-tags,
.post-1330 .date-tags,
.post-1353 .date-tags,
.post-2055 .date-tags,
.post-2078 .date-tags {
  display: none;
}

/* **************************************************
** 特定の固定ページのSNSシェアボタン
** SNSフォローボタンの非表示
************************************************** */
.page-id-2055 .sns-share,
.page-id-2055 .sns-follow,
.page-id-84 .sns-share,
.page-id-84 .sns-follow {
    display: none;
}

/* **************************************************
** モバイルメニューのバックグランドカラーの変更
************************************************** */
.mobile-header-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+1),
.mobile-footer-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+1),
.mobile-header-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+2),
.mobile-footer-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+2),
.mobile-header-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+3),
.mobile-footer-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+3) {
  background-color: rgba(255, 255, 255, 1);
}

/* **************************************************
** 見出し（h3）の変更
************************************************** */
.article h2 {
        background-image: repeating-linear-gradient(-45deg,rgba(8,140,192,.3) 0%,rgba(8,140,192,.3) 50%,rgba(57,188,128,.3) 50%,rgba(57,188,128,.3) 100%);
}

/* **************************************************
** サイドバーの見出し（h3）の変更
************************************************** */
.sidebar h3 {
        background-image: repeating-linear-gradient(-45deg,rgba(8,140,192,.3) 0%,rgba(8,140,192,.3) 50%,rgba(57,188,128,.3) 50%,rgba(57,188,128,.3) 100%);
}

/* **************************************************
** モバイルサイドメニューに、「MENU」タイトルを表示
************************************************** */
ul.menu-drawer:before, ul.menu-drawer:after {
    display: block;
    color: rgba(87, 119, 173, 0.8);
    padding: .5em;
    font-family: sans-serif;
    font-weight: 900;
    text-align: center;
}

ul.menu-drawer:before {
        content:"MENU";
        border-bottom:2px dashed rgba(87, 119, 173, 0.8);
        margin-bottom: 15px;
}

ul.menu-drawer:after {
    content:"";
    width:100%;
    line-height:1;
}

/* **************************************************
** モバイルサイドメニューのメニューのスタイルを変更
************************************************** */
ul.menu-drawer a {
    border-radius: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

ul.menu-drawer li:nth-of-type(3n + 1)>a {
    background-color: rgba(255, 213, 218, 0.30);
        transition: background-color .5s;
}

ul.menu-drawer li:nth-of-type(3n + 2)>a {
    background-color: rgba(213, 255, 217, 0.30);
        transition: background-color .5s;
}

ul.menu-drawer li:nth-of-type(3n + 3)>a {
    background-color: rgba(213, 217, 255, 0.30);
        transition: background-color .5s;
}

ul.menu-drawer li:nth-of-type(3n + 1)>a:hover {
    background-color: rgba(255, 213, 218, 0.90);
}

ul.menu-drawer li:nth-of-type(3n + 2)>a:hover {
    background-color: rgba(213, 255, 217, 0.90);
}

ul.menu-drawer li:nth-of-type(3n + 3)>a:hover {
    background-color: rgba(213, 217, 255, 0.90);
}

/* **************************************************
** モバイルサイドメニューのサブメニューの変更
** 不要と思われるが、参考のため保存
************************************************** */
/*
ul.menu-drawer .sub-menu li>a:nth-of-type(3n + 1) {
    background-color: rgba(255, 213, 218, 0.30);
}

ul.menu-drawer .sub-menu li>a:nth-of-type(3n + 2) {
    background-color: rgba(213, 255, 217, 0.30);
}

ul.menu-drawer .sub-menu li>a:nth-of-type(3n + 3) {
    background-color: rgba(213, 217, 255, 0.30);
}
*/

/* **************************************************
** ソースコードのハイライト表示で
** 横スクロールバーを表示する
************************************************** */
pre.wp-block-code.hljs code {
        white-space: pre!important;
}

/* **************************************************
** 『ニューエントリーカード』の表示を
** 『エントリーカード』と同等にする
************************************************** */
.new-entry-card-link.a-wrap {
        position: relative;
        overflow: hidden;
        border-radius: 4px;
}

.new-entry-card-link.a-wrap:nth-of-type(3n+1) {
        background-color: rgba(165, 33, 117, 0.06);
}
.new-entry-card-link.a-wrap:nth-of-type(3n+2) {
        background-color: rgba(0, 146, 80, 0.06);
}
.new-entry-card-link.a-wrap:nth-of-type(3n+3) {
        background-color: rgba(0, 134, 171, 0.06);
}

.new-entry-card-link.a-wrap:nth-of-type(3n+1):hover {
  background-color: rgba(165, 33, 117, 0.2);
}
.new-entry-card-link.a-wrap:nth-of-type(3n+2):hover {
  background-color: rgba(0, 146, 80, 0.2);
}
.new-entry-card-link.a-wrap:nth-of-type(3n+3):hover {
  background-color: rgba(0, 134, 171, 0.2);
}

.new-entry-card-link.a-wrap:before {
        position: absolute;
        width: 320px;
        height: 320px;
        transform: rotate(-45deg);
        right: -280px;
        bottom: -280px;
        content: "Read More";
        font-size: 70%;
        color: white;
        text-align: center;
        transition: all .4s;
        z-index: 1;
}

.new-entry-card-link.a-wrap:nth-of-type(3n+1):before {
        background: #a52175;
}
.new-entry-card-link.a-wrap:nth-of-type(3n+2):before {
        background: #009250;
}
.new-entry-card-link.a-wrap:nth-of-type(3n+3):before {
        background: #0086ab;
}

.new-entry-card-link.a-wrap:hover::before {
        right: -235px;
        bottom: -235px;
}

/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 49.5%;
}