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

/* BOXメニューの背景色を変える　*/
.box-menu{
	background: #80989b;
}

/* プロフィールボックスの背景色を変える */
.author-box{
  background:rgba(250,250,250,0.3);/*背景色を変える*/

}

/********************* Amazon　楽天　yahoo **********************/
/* 商品リンクを等間隔に */
	.product-item-buttons>* { 
	  width: 32%; 
	} 

/* Cocoonの商品リンクをスマホ向けにカスタマイズ */
@media screen and (max-width: 768px){
	.product-item-thumb { 
	  width: 100%;
	}
	.product-item-title {
	  text-align: left; 
	  font-size: 85%; 
	}
	.product-item-buttons>* { 
	  width: 32%; 
	} 
	.product-item-buttons>*>a { 
	  position: relative; 
	}
	.shoplinkyahoo a { 
	  font-size: .6em; 
	}
}




/* amazon リンクボタンを黒く */
.shoplinkamazon a {
    background: none;
    border: 2px solid #555;
    color: #555;
    padding: 8px 0;
    transition: .4s;
}
.shoplinkamazon a:hover {
    background: #555;
    color: #fff;
    opacity: 1;
}
.shoplinkrakuten a {
    background: none;
    border: 2px solid #555;
    color: #555;
    padding: 8px 0;
    transition: .4s;
}
.shoplinkrakuten a:hover {
    background: #555;
    color: #fff;
    opacity: 1;
}
.shoplinkyahoo a {
    background: none;
    border: 2px solid #555;
    color: #555;
    padding: 8px 0;
    transition: .4s;
}
.shoplinkyahoo a:hover {
    background: #555;
    color: #fff;
    opacity: 1;
}
.shoplinkmercari a {
    background: none;
    border: 2px solid #555;
    color: #555;
    padding: 8px 0;
    transition: .4s;
}
.shoplinkmercari a:hover {
    background: #555;
    color: #fff;
    opacity: 1;
}
/********************* Amazon　楽天　yahoo end **********************/

/*********************************
* SNSシェア・フォローボタンを小さく *
**********************************/

#main .sns-share a,
#main .sns-follow a {
	width: 45px;
	margin: 0 5px 0 0;
}
.sns-share-buttons,
.sns-follow-buttons {
	justify-content: center;
}
#main .button-caption {
	display: none;
}
#main .social-icon {
	font-size: 25px;
}/* タブレット以上・最小値769px～のスタイル */

@media screen and (min-width: 769px) {
	#main .sns-share {
		width: 50%;
		margin: auto;
	}
	#main .sns-follow {
		width: 40%;
	}
	#main .sns-share,
	#main .sns-follow {
		display: inline-block;
	}
}

/*細く*/
#main .sns-share a {
/*	width: 40px; /*ボタンの横幅*/
	height: 30px; /*ボタンの高さ*/
}
#main .sns-follow a {
/*	width: 40px; /*ボタンの横幅*/
	height: 30px; /*ボタンの高さ*/
}


/* SNSボタン終了 */

/***** スライドインメニューのカスタマイズ *****/
.navi-menu-content {
	background: url(https://rebel.pcxgo.jp/wp-content/uploads/2025/07/s-slide-in-menu31.jpg) top left;
	background-attachment: fixed;
}

.menu-drawer a {
	color: #ffffff;
}

/***** スライドインメニューのカスタマイズ end *****/