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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ========================================
   TakKa note レイアウト
======================================== */

/* サイドバーなし・1カラム */
#content-in {
  display: block;
}

#main {
  width: 100%;
  max-width: none;
}


/* ========================================
   PCグローバルナビ
======================================== */
@media screen and (min-width: 835px) {

  /* ロゴは流し、ナビバーだけ上部に固定 */
  #navi {
    position: sticky !important;
    top: 0;
    z-index: 10000;
    background-color: #3DB696 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
  }

  /* WordPressログイン中の管理バー分 */
  .admin-bar #navi {
    top: 32px;
  }

  #navi-in,
  #navi .menu-header {
    background-color: #3DB696 !important;
  }

  /* 通常 */
  #navi .menu-header > .menu-item > a {
    background-color: transparent !important;
    color: #fff !important;
  }

  /* 現在位置・ホバー */
  #navi .menu-header > .current-menu-item > a,
  #navi .menu-header > .current-menu-ancestor > a,
  #navi .menu-header > .menu-item:hover > a {
    background-color: #87CFB8 !important;
    color: #fff !important;
  }
}


/* ========================================
   投稿末尾プロフィール
======================================== */
.single-post #single-content-bottom .author-box,
.single-post .single-content-bottom .author-box {
  margin-top: 36px;
  margin-bottom: 24px;
}


/* ========================================
   横長の薬比較表
======================================== */
.pmc-v37-shell {
  width: calc(100vw - 20px) !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw + 10px) !important;
}


/* ========================================
   モバイル
======================================== */
@media screen and (max-width: 834px) {

  /* PC用stickyは無効 */
  #navi {
    position: static !important;
    box-shadow: none;
  }
}

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

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

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