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



/* ヘッダーの要素を縦並びにしてタイトルを上に、キャッチフレーズを下に */
.header-in {
  display: flex !important;
  flex-direction: column !important;
}

.site-name-text {
  order: 1 !important; /* タイトル */
}

.tagline {
  order: 2 !important; /* キャッチフレーズ */
}



/* =========================
   タイトルの上のメッセージ
========================= */
.header-message-top{
    text-align: center;
    font-size: 22px;
    color: #eeee22;
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: -40px;
}

/* =========================
   タイトルの下のメッセージ
========================= */
.header-message-bottom{
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    line-height: 1.6;
    margin-top: -50px;
    margin-bottom: 10px;
    white-space: nowrap; /* PCでは1行 */
}

/* PCでは改行しない */
.sp-only{
    display: none;
}

/* =========================
   スマホ表示
========================= */
@media screen and (max-width: 768px){

    .header-message-top{
        font-size: 16px;
        line-height: 1.4;
        padding: 0 20px;
        margin-bottom: -35px;
    }

    .header-message-bottom{
        font-size: 14px;
        line-height: 1.3;
        margin-top: -35px;
        margin-bottom: 3px;
        padding: 0 25px;
        white-space: normal; /* スマホでは改行OK */
    }

    /* スマホだけ改行 */
    .sp-only{
        display: block;
    }
}


@media screen and (max-width: 768px) {

  #main {
    background: transparent !important;
  }

  #main .entry-card {
    background: #fff !important;
  }

}

/* スマホのみ：記事ページ・固定ページの本文を白背景にする */
@media screen and (max-width: 768px) {

  .single .content,
  .single .main,
  .single .article,
  .single .article-content,
  .single .entry-content,
  .page .content,
  .page .main,
  .page .article,
  .page .article-content,
  .page .entry-content {
    background-color: #fff !important;
  }

}

/* スマホのみ：もっと見るボタンを白背景にする */
@media screen and (max-width: 768px) {

  .list-more-button {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc;
  }

}