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

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


/*モバイルメニューカスタマイズ横スクロール*/
@media screen and (max-width: 896px){
	/* モバイルトップメニュー */
	ul.menu-mobile{
		/*overflow-x: auto;*/
		overflow-x: scroll;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}
	
/*横スクロールバー表示*/	
ul.menu-mobile {
  overflow-x: scroll;
}
ul.menu-mobile::-webkit-scrollbar {
  height: 10px;
}
ul.menu-mobile::-webkit-scrollbar-track {
  margin: 0;
  background: #ccc;
  /*border-radius: 5px;*/
}
ul.menu-mobile::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #a52a2a;
}
/*横スクロールバー表示ここまで*/	

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}
}
/*モバイルメニューカスタマイズ横スクロールここまで*/


/*by Cocoon削除*/
.admin-pv .admin-pv-by{display:none}

/*メインボックスとサイドバーの枠を削除*/
#content #main,#sidebar{border:none;box-shadow:none;}

/*お問い合わせ後の入力部分を非表示*/
form.sent p{
display:none;
}

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

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(30,124,209,0);
}
/*スライドインメニューをカスタマイズ*/

/*SNSボタンを小さく丸く　ここから*/

#main .button-caption {
	display: none; /*キャプション非表示*/
}


/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字にする*/
	color: #875d5b; /*文字色を指定*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央揃え*/
}
.sns-share-buttons a {
	border-radius: 50%; /*アイコンを丸くする（カスタマイズを！）*/
	font-size: 20px; /*アイコンのサイズ（カスタマイズを！）*/
	margin: 0 5px; /*ボタン同士の間隔（カスタマイズを！）*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅（カスタマイズを！）*/
	height: 40px; /*ボタンの高さ（カスタマイズを！）*/
}


/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字にする*/
	color: #875d5b; /*文字色を指定*/
}
.sns-follow-buttons {
	justify-content: center; /*中央揃え*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*アイコンを丸くする（カスタマイズを！）*/
	font-size: 20px; /*アイコンのサイズ（カスタマイズを！）*/
	margin: 0 5px; /*ボタンの間隔（カスタマイズを！）*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅（カスタマイズを！）*/
	height: 40px; /*ボタンの高さ（（カスタマイズを！）*/
}
/*SNSボタンを小さく丸く　ここまで*/


/*引用の背景色*/
blockquote{background-color:#ffffff;
border-radius: 20px;
}

.page .date-tags,
.page .author-info {
    display: none;
}


.single #header,.category #header,.page #header,.search #header{display:none}

.header-in h1.logo{display:none;}

.single h2 {text-align:left !important;
padding-left:1em !important;
padding-right:1em !important;
font-weight:bold;
}

.eye-catch-image,.rakuten-item-box,.rakuten-item-box img{
    border-radius: 15px; /* 角丸の半径を15pxに設定 */
}

#content li{margin-bottom:1em}



/*youtube中央揃え*/
.video-container {
margin: 0px auto;
}

/*Group内のliの下にmarginを作る*/
ul.is-style-memo-box li,.wp-block-group li{margin-bottom:2em !important;}

/*Group内のリンクに余計な装飾をしない*/
.wp-block-group a::before, .is-style-information-box a::after {
    content: "" !important; /* 空のコンテンツ */
    display: none !important; /* 非表示 */
}

body{
	background-image:none;
}
.navi-in li .item-label{color:#fffFFF !important;}

h1.entry-title{font-size:2em}


/* ==================================================== */
/* リンカー装飾変更 - 上下線、画像角丸、ボタン色変更ここから */
/* ==================================================== */

/* ---------------------------------------------------- */
/* 【１】全般的なボーダー・影・角丸の強制リセット */
/* ---------------------------------------------------- */
/* .yyi-rinker-contentsと主な子要素の不要な装飾をまとめて強制無効化 */
.yyi-rinker-contents,
.yyi-rinker-contents .yyi-rinker-box,
.yyi-rinker-contents .yyi-rinker-info,
.yyi-rinker-contents .yyi-rinker-title,
.yyi-rinker-contents .yyi-rinker-detail,
.yyi-rinker-contents .yyi-rinker-links {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    /* 内部ボックス・詳細要素の余白も強制リセット */
    padding: 0 !important;
    margin: 0 !important;
}

/* ---------------------------------------------------- */
/* 【２】全体コンテナ: 上下線とパディングの適用 */
/* ---------------------------------------------------- */
/* 全体に対して、必要な装飾（上下線と余白）のみを適用 */
.yyi-rinker-contents {
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    /* 左右のパディングはデフォルトに任せる */
}

/* ---------------------------------------------------- */
/* 【３】商品画像: 角丸の適用 */
/* ---------------------------------------------------- */
.yyi-rinker-contents .yyi-rinker-image img {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------- */
/* 【４】ボタン色とホバー効果の指定 */
/* ---------------------------------------------------- */
/* 共通のホバー効果のリセット */
.yyi-rinker-contents .yyi-rinker-link {
    transition: none !important; /* アニメーションを無効化 */
    transform: none !important;
    box-shadow: none !important;
}
.yyi-rinker-contents .yyi-rinker-link:hover {
    opacity: 0.9;
    transform: none !important;
    box-shadow: none !important;
}

/* Amazonボタン: 青色系 */
.yyi-rinker-contents .amazonlink .yyi-rinker-link {
    background-color: #007bff !important;
    color: #fff !important;
}

/* 楽天ボタン: 赤色系（維持） */
.yyi-rinker-contents .rakutenlink .yyi-rinker-link {
    background-color: #d94a4a !important;
    color: #fff !important;
}

/* Yahoo!ショッピングボタン: 黄色系 */
.yyi-rinker-contents .yahoolink .yyi-rinker-link {
    background-color: #fce600 !important;
    color: #333 !important;
}

/* ==================================================== */
/* リンカー装飾変更 - 上下線、画像角丸、ボタン色変更ここまで */
/* ==================================================== */


#toc {
  /* 既存のmax-widthの制限を強制的に解除 */
  max-width: none !important; 
  
  /* 幅を強制的に指定。例として90%を使いますが、ピクセル値（例: 800px）でも構いません。 */
  width: 90% !important; 

  /* もし90%でも不十分なら、具体的なピクセル値で試してください
     width: 800px !important; 
  */
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	h1.entry-title{font-size:1.6em}
}