@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700;900&display=swap');

/*!
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){
  /*必要ならばここにコードを書く*/
}

/* 前後の記事ナビに区切り線と見出しを追加 */
.pager-post-navi {
  border-top: 1px solid #dddddd;
  margin-top: 35px;
  padding-top: 25px;
}

.pager-post-navi::before {
  content: "前の記事・次の記事";
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}
/* ブログタイトルの書体と大きさ */
@media screen and (min-width: 835px) {
    #header .logo-text .site-name-text {
        font-family: "Zen Maru Gothic", sans-serif !important;
        font-size: 68px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }
}
/* ブログタイトル左上のオレンジの飾り */
#header .site-name-text {
    position: relative;
    display: inline-block;
}

/* オレンジの3本線 */
#header .site-name-text::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -1px;
    width: 5px;
    height: 18px;
    background: #E5B18F;
    border-radius: 5px;
    transform: rotate(-40deg);
    box-shadow:
        20px -8px 0 #E5B18F,
        35px 3px 0 #E5B18F;
    pointer-events: none;
}
/* スマホ表示のタイトルと飾りを調整 */
@media screen and (max-width: 834px) {

    #header .site-name-text {
        font-size: 26px !important;
        line-height: 1.5 !important;
    }

    #header .site-name-text::before {
        display: none !important;
    }

}
/* スマホのタイトルとオレンジの飾り */
@media screen and (max-width: 834px) {

    /* タイトルの書体 */
    #header .site-name-text {
        font-family: "Zen Maru Gothic", sans-serif !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
    }

    /* オレンジの3本線 */
    #header .site-name-text::before {
        display: block !important;
        top: 7px;
        left: -12px;
        width: 3px;
        height: 10px;
        box-shadow:
            12px -5px 0 #E5B18F,
            22px 2px 0 #E5B18F;
    }
}
/* ブログタイトルの最後に肉球を追加 */
#header .site-name-text::after {
    content: "🐾";
    display: inline-block;
    font-size: 0.5em;
    margin-left: 8px;
    vertical-align: middle;
}
/* 固定ヘッダーの左側に余白を追加 */
@media screen and (min-width: 835px) {
  #header-container.fixed-header #header {
    padding-left: 25px;
    box-sizing: border-box;
  }
}