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

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


/**********************************************
** 固定ページの新着記事一覧(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%;
}
*/


/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 3列横並びにする
**********************************************/
.new-entry-cards.fp-new-entry-cards{
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

.new-entry-cards.fp-new-entry-cards > a {/*３列にする*/
   width: 31.5%;
}

.new-entry-cards.fp-new-entry-cards .widget-entry-cards.card-large-image .a-wrap {
   max-width: none;/*幅400pxの指定を初期化する*/
}

.new-entry-cards.fp-new-entry-cards .popular-entry-cards::after {/*クリアフィックス用のアイテムを消す*/
   content: none;
}

@media screen and (max-width:480px) {/*画面幅が480px以下のとき１列にする*/
   .new-entry-cards.fp-new-entry-cards > a {
      width: 95%;
   }
.menu-content{
   max-width: 100%;
}
}

/**********************************************
** topページの人気記事ランキング(new_list)に
** ランキング順位を表示する
**********************************************/

/*ランキング順位表示*/
ul.wpp-list li {
    border-bottom: 1px dashed #77776E;
    position: relative;
    list-style: none;
}
/*記事タイトル*/
ul.wpp-list li a.wpp-post-title {
    display: block;
    text-decoration: none;
    font-size: 15px;
    color: #333;
    margin: 10px 10px 10px 30px;
}
ul.wpp-list li a.wpp-post-title:hover {
    color: #3fa3ff;
}
/*アイキャッチ*/
ul.wpp-list li img {
    margin: 10px;
}
/*ランキングカウンター*/
ul.wpp-list li:before {
    content: counter(wpp-count);
    display: block;
    position: absolute;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background-color: #555;
    padding: 0;
    border-radius:50%;
    z-index: 1;
}
.widget-entry-cards.ranking-visible .card-thumb::before {
    padding: 0;
    border-radius:50%;
    z-index: 1;
}
/*カウント数*/
ul.wpp-list li {
    counter-increment: wpp-count;
}
/*ランキング1〜3の色変更*/
ul.wpp-list li:nth-child(1):before{
    background-color: #EFAF00;
}
ul.wpp-list li:nth-child(2):before{
    background-color: #9EACB4;
}
ul.wpp-list li:nth-child(3):before{
    background-color: #BA6E40;
}

/**********************************************
***投稿記事
*********************************************/
/*日付表示（全部記事）*/
.widget-entry-card-date {
  display: block;
}

/**********************************************
***グローバルメニュー(PC)
*********************************************/
/***  グローバルメニュー項目間の区切り（2023/03/03）（外枠）***/
#navi .navi-in > ul > li{
  border-left: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #eee;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
}

/***  グローバルメニューカーソル合わせ時の色変化（2023/03/09）***/
#navi .navi-in a:hover {
  background-color: #3d7350;
  color: #fff;
  opacity: 1;
}

/***  トップページ商品ボタンカーソル合わせ時の色変化（2023/03/09）***/
.wp-block-button__link:hover {
  opacity: 0.6;
}

.serif01{
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}


/**********************************************
***ヘッダーメニューの文字と背景の色と高さを変える(SP)
*********************************************/

.custom-menu-icon.menu-button,
.navi-menu-button.menu-button{
	background-color: #FFFFFF;
	color: #3d7350;
	height: 55px;
	padding-top: 8px;
}

.custom-menu-icon.menu-button,
.navi-menu-button.menu-button{
	background-color: #FFFFFF;
	color: #3d7350;
	height: 55px;
	padding-top: 8px;
}

.logo-menu-button.menu-button{
	background-color: #FFFFFF;
	height: 55px;
}

/*スライドインメニューを右からの場合は下記にtransform: translateX(101%);を追記*/
/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
    text-align:center;
	padding: 0;
	background-color: rgba(61,115,80,0.9);

}
.menu-drawer .sub-menu {
		padding: 0 0.5em;
}	
	
.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #FFF;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,1);
	background-color: rgba(61,115,80,0);
}

/*** ページ遷移後のカレントページと同じ親メニューに属するサブメニュー以外は非表示（閉じた状態）がデフォルト（JS使用） ***/
.navi-menu-content .button:not(.current-menu-item):not(.current-menu-ancestor) > .sub-menu:not(.active) {
display: none;
}

.navi-menu-content.sub-menu .menu-item{
	color: #fff;
	border-bottom: #299433;
	background-color: #f5fffa;
	padding: 0;
}

.menu-close-button{
	color: #FFF;
}

.mobile-menu-buttons .menu-button > a{
}
.mobile-menu-buttons a.membericon.custom-menu-icon,
.mobile-menu-buttons a.membericoncustom-menu-caption{
    display: block;
    color: #3d7350!important;
    text-decoration: none;
}

/**********************************************
***左メニューの下層のみ背景の色を変える(SP)
*********************************************/

/* サブメニュー全体の背景 */
.navi-menu-content li.button > ul.sub-menu {
  background-color: #749974;
}
/* 下層項目の区切り線 */
.navi-menu-content li.button > ul.sub-menu > li {
  border-bottom: 1px solid #3d7350;
}

/**********************************************
** フッターメニューの色を変える(SP)
**********************************************/

.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .menu-button:hover,
.mobile-footer-menu-buttons .menu-button a{
  background-color: #3d7350;
  color: white;
}

/**********************************************
** トップスライダー
**********************************************/
/* 横幅いっぱいに(PC) */


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

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

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