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

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

.notice-area {
font-weight: bold;
font-size: 16px;
padding-top: 0;
padding-bottom: 0;
}


/******************************
** アピールエリアのカスタマイズ
*******************************/
#appeal {
    height: calc(100vw * calc(400 / 2000));
}

/*********************
** CTAボックスを可愛く
**********************/
.cta-box {
border: solid 1px #9d9d9d;
background-color: #fff;
border-radius:8px;
}

/**************/
/*お勧めカード*/
/**************/
#recommended .navi-entry-card-thumb img{
border-radius:10px; /*角丸め*/
}


/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
  line-height: 1.1; /*行間を狭くする*/
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free";
  content: "\f005"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
  font-weight: 900; /*太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
  font-family: "Font Awesome 5 Free";
  content: "\f186"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
    font-weight: 100; /*太さ*/
}

/* Cocoon2.2.3.1 プロフィールボックス本文周りに増えた余白を元に戻す処理 */
.nwa .author-box .author-content {
	padding: 0;
}

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

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


/*************************/
/*グローバルナビを3個表示*/
/*************************/	
    #navi .navi-in > .menu-mobile li {
        width: 33%;
    }
    #navi .navi-in > .menu-mobile li a {
        font-size: 14px; /*場合によってフォントサイズを小さく*/
    }

/***************************/
/*アピールエリアを60%にする*/
/***************************/	
    #appeal {
        height: 60vw;
    }

/******************************/
/*おすすめカードをスクロールに*/
/******************************/	
    .recommended{
    overflow: scroll;
    }
    .recommended .navi-entry-cards {
    flex-wrap: nowrap;
    width: 300%;
    }

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