@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

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





/*******************************************
デスクトップ見出し CSSリセット  & カスタマイズ ここから
*********************************************/


/* H1 */
.article h1 {
    border: none;
    padding: 0;
}

.article h1 {
    font-size: 24px;
}



/* H2 */
.article h2{
background:none;
padding: 0;
font-size: 21px;
    

  font-size: 22px;/*文字のサイズ*/
  border-bottom: 2px solid #9400d3;/*下線*/
  color: #323232;
  padding-bottom: .0em;
  margin-bottom: 15px;
  border-top: none;
	}
	



/* H3リセット */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;


/* H3　フォントサイズ と上下線色変更*/
	
font-size: 20px !important;/*文字のサイズ*/
  border-top: 1px solid #9400d3;/*上線*/
  border-bottom: 1px solid #9400d3;/*下線*/
  color: #323232;
  padding: .2em 0;
  margin-bottom: 15px;


}

 


/* H4リセット */
.article h4 {
    border: none;
    padding: 0;
}


/* H4　フォントサイズ と上下線色変更*/
.article h4 {font-size: 18px !important;/*文字のサイズ*/
  border-left: 1px solid #9400d3;/*左線*/
	padding: 0.2em 0.3em;/*左の線と文字の間*/
  color: #323232;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;

    
}
 


/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}

/*線の種類（実線） 太さ 色*/

.article h5 {
	 border-bottom: solid 3px #E07487;
    font-size: 22px;
}



/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

.article h6  {
  font-size: 20px !important;/*文字のサイズ*/
  background: #E07487;/*背景色*/
  padding: .5em .7em;/*余白*/
  color: #FFF;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}


/*******************************************
デスクトップ見出し CSSリセット  & カスタマイズ  ここまで
********************************************/






/***************************************************
** スマホ見出しフォントサイズ
****************************************************/



/*スマホ〜タブレット見出しフォントサイズ*/

/*768px以下*/

/*スマホ〜タブレット見出しフォントサイズ*/
@media screen and (max-width: 768px){
.article h1{
 font-size: 24px !important;
 } 
}

 /*スマホ〜タブレット見出しフォントサイズ*/
@media screen and (max-width: 768px){
.article h2{
 font-size: 22px !important;
 } 
}

 /*スマホ〜タブレット見出しフォントサイズ*/
@media screen and (max-width: 768px){
.article h3{
 font-size: 20px !important;
 } 
}


/*スマホ〜タブレット見出しフォントサイズ*/
@media screen and (max-width: 768px){
.article h4{
 font-size: 20px !important;
 } 
}




/*480px以下*/
/*スマホ見出しフォントサイズ*/

@media screen and (max-width: 480px){
.article h1{
 font-size: 18px !important;
 } 
}


 /*スマホ見出しフォントサイズ*/
@media screen and (max-width: 480px){
.article h2{
 font-size: 17px !important;
 } 
}

 /*スマホ見出しフォントサイズ*/
@media screen and (max-width: 480px){
.article h3{
 font-size: 16px !important;
 } 
}
/*スマホ見出しフォントサイズ*/
@media screen and (max-width: 480px){
.article h4{
 font-size: 16px !important;
 } 
}





/**************************************************************
** サイドバーのアーカイブスのカスタマイズここから
***************************************************************/



#sidebar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  border: 1px solid #333; /* ボーダーの指定 */
  padding: 6px 14px; /* 余白の指定 */
  font-size: 12px; /* 文字サイズ */
  color: #333; /* 文字色 */
}
#sidebar select::-ms-expand {
  display: none;
}
#sidebar .widget_archive {
  position: relative;
}
#sidebar .widget_archive::after {
  font-family: FontAwesome;
  content: '\f0d7'; /* アイコンの指定 */
  position: absolute;
  bottom: 0px; /* アイコンの位置 */
  right: 12px; /* アイコンの位置 */
  color: #333; /* アイコンの色 */
}
8行目の「border-radius: 

/***************************************************************
** サイドバーのアーカイブスのカスタマイズここまで
*****************************************************************/





/**************************************************************
** 問い合わせフォーム　入力カスタマイズ　ここから
***************************************************************/

/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #F92931;
	border-radius: 20px;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #424242;
	border-radius: 20px;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}


/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}


/**************************************************************
** 問い合わせフォーム　入力カスタマイズ　ここまで
***************************************************************/



/**************************************************************
** サイドバー カスタマイズ　ここから
***************************************************************/


/*カテゴリーの文字を真ん中寄せ両端に線を引く */
.sidebar h3 {
    background: none;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; 

	/*ラインの長さ*/
    border-top: 2px solid #a5a5a5; /*ラインの色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

/* サイドバー文字サイズ */
#sidebar {
    font-size: 16px;
}


/**************************************************************
** サイドバー カスタマイズ　ここまで
***************************************************************/



/**************************************************************
** サウンドハウス ボタン追加　ここから
***************************************************************/

/* 追加ボタン3色変更 */
.shoplinkbtn3 a {
background: #955F91;
}

/* 追加ボタン2色変更 */
.shoplinkbtn2 a {
background: #2a9ce8;
}

/**************************************************************
** サウンドハウス ボタン追加　ここまで
***************************************************************/




/**************************************************************
** ■商品リンクのカスタマイズここから
***************************************************************/


/*商品名を調整*/
.product-item-title{
  text-align:left;/*商品名を左詰め*/
  font-size:100%;/*文字の大きさを調整*/
  padding: 1rem;/*文字を表示位置を調整*/
}

/*商品名リンクを調整*/
.product-item-title-link{
  color:#555;/*商品リンクの文字色を変更*/
  text-decoration:none;/*商品リンクの下線を消す*/
  font-weight:bold;/*商品名を太字に変更*/
}

/*商店名を調整*/
.product-item-maker{
 text-align:center;/*商店名を中央寄せ*/
  font-size:99%;/*文字の大きさを調整*/
}

/*価格文章を調整*/
.product-item-price{
  text-align:center;/*価格文書を中央寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
  margin-top:-.5em;/*価格文章を表示した時の文字位置の調整*/
  margin-bottom:.5em;/*価格文章を表示した時の文字位置の調整*/
}

/*価格の色を黒に*/
.item-price{
  color:#555;/*金額を黒字に変更*/
}




/**************************************************************
** ■商品リンクのカスタマイズここまで
***************************************************************/




/*ボタンのはみ出し部分を非表示*/
#main{
  overflow:hidden;
}


/*********************************************************************
** ■商品リンク スマホのボタンを縦1列にする　ここから
**********************************************************************/


/*ipad以下の大きさのデザインを調整*/
@media screen and (max-width: 768px){/*ipad以下の大きさのデザインを調整*/
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
  width: 100%;/*商品画像を中央寄せ*/
} 
.booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content {
  margin-top: 8em;/*商品名以下の文章を画像の下に下げる*/
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons {
  display: flex;/*ボタンをフレックスボックス化*/
  flex-flow: column;/*ボタン縦並びに変更*/
  justify-content: space-between;/*ボタンを均等配置*/
  width:100%;/*ボタンの長さを調整*/
}
.booklink-link2>*>a, .kaerebalink-link1>*>a, .tomarebalink-link1>*>a, .product-item-buttons>*>a{
  font-size:100%;/*文字の大きさを調整*/
  padding: .8em;/*ボタンの大きさを調整*/
    }
}




/*iPhone5Sぐらいの大きさのデザインの調整*/
@media screen and (max-width: 480px){
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
  width: 100%;/*商品画像の大きさの調整*/
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons {
  width:100%;/*ボタンの長さを調整*/
}
}

/*******************************************************
** ■商品リンク スマホのボタンを縦1列にする　ここまで
*********************************************************/





/*********************************************
** スマホの目次のフォントの大きさ　ここから（768px以下）
**********************************************/



/*media Queries スマートフォンとタブレットサイズ（768px以下）で適応したいCSS - スマホ・タブレット*/
@media only screen and (max-width: 768px) {
    
    /*スマホの基本のフォントサイズ*/
    p, /* テキスト */
    .st-kaiwa-hukidashi, /* ふきだし */
    .yellowbox, /* 黄色ボックス */
    .graybox, /* グレーボックス */
    .redbox, /* 薄赤ボックス */
    .post ul li, /* ulリスト */
    .post ol li, /* olリスト */
	   .post h3, /* H3 */
    .post h4, /* H4 */
    .post h5, /* H5 */
    .post h6, /* H6 */
    .post table tr td,
    table tr td /* テーブル */
     {
        font-size: 17x;
    }
 }


/*********************************************
** スマホの目次のフォントの大きさ　ここまで（768px以下）
**********************************************/






/* スマホの目次のフォントの大きさ　ここから（480px以下）****/



/*media Queries スマートフォンとタブレットサイズ（480px以下）で適応したいCSS - スマホ・タブレット*/
@media only screen and (max-width: 480px) {
    
    /*スマホの基本のフォントサイズ*/
    p, /* テキスト */
    .st-kaiwa-hukidashi, /* ふきだし */
    .yellowbox, /* 黄色ボックス */
    .graybox, /* グレーボックス */
    .redbox, /* 薄赤ボックス */
    .post ul li, /* ulリスト */
    .post ol li, /* olリスト */
	   .post h3, /* H3 */
    .post h4, /* H4 */
    .post h5, /* H5 */
    .post h6, /* H6 */
    .post table tr td,
    table tr td /* テーブル */
     {
        font-size: 14px;
    }

}

/* スマホの目次のフォントの大きさ　ここまで（ 480px以下）*/




/* ■Table（表）背景色の設定*/
table td {
background: #00000000;
}




/*吹き出しフォントサイズ 　パソコン*/
	.speech-wrap .speech-balloon {
		font-size: 14px;
	}
}


/*吹き出しフォントサイズ 　タブレット大*/
@media screen and (max-width: 860px) {
	.speech-wrap .speech-balloon {
		font-size: 16px;
	}
}


/*吹き出しフォントサイズ 　タブレット小*/
@media screen and (max-width: 768px) {
	.speech-wrap .speech-balloon {
		font-size: 16px;
	}
}


/*吹き出しフォントサイズ 　スマホ*/
@media screen and (max-width: 480px) {
	.speech-wrap .speech-balloon {
		font-size: 14px;
	}
}







/************************************
** 本文のフォントの大きさ　ここから
*************************************/

/*本文フォントサイズ 　パソコン*/
.body{
	font-size:16px;
}
	


/*本文フォントサイズ 　タブレット大*/
@media screen and (max-width: 860px) {
	.body{
	font-size:17px;
}
}


/*本文フォントサイズ 　タブレット小*/
@media screen and (max-width: 768px) {
	.body{
	font-size:17px;
}
}


/*本文フォントサイズ 　スマホ*/
@media screen and (max-width: 480px) {
	.body{
	font-size:16px;
}
}


/************************************
** 本文のフォントの大きさ　ここまで
*************************************/



/************************************
** パソコン 目次のフォントの大きさ　ここから
*************************************/
.toc-title {
    
	font-size: 16px;
}
 
.toc {
	border: 1px solid;
}
 
.toc a {
	font-size: 15px;
}

/************************************
** パソコン　目次のフォントの大きさ　ここまで
*************************************/



/************************************
**タブレット 目次のフォントの大きさ　ここから
*************************************/

@media screen and (max-width: 768px) {
	
	.toc-title {
    
	font-size: 18px;
}
 
.toc {
	border: 1px solid;
}
 
.toc a {
	font-size: 17px;
}
}

/************************************
**タブレット 目次のフォントの大きさ　ここまで
*************************************/


/************************************
**スマホ 目次のフォントの大きさ　ここから
*************************************/

@media screen and (max-width: 480px) {
	
	.toc-title {
    
	font-size: 14px;
}
 
.toc {
	border: 1px solid;
}
 
.toc a {
	font-size: 14px;
}
}

/************************************
**スマホ 目次のフォントの大きさ　ここまで
*************************************/


/************************************
**商品リンクボタンを浮かせる　ここから
*************************************/

.shoplinkamazon a {    
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
}
.shoplinkamazon a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}
.shoplinkrakuten a {
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
}
.shoplinkrakuten a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}

.shoplinkyahoo a {
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
}
.shoplinkyahoo a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}

.shoplinkbtn3 a {
    color: #fff;
    box-shadow: 0 8px 12px -5px rgba(0,0,0,.3);
    transition: .4s;
}
.shoplinkbtn3 a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,.3);
    color: #fff;
    opacity: 1;
}
@media screen and (max-width: 480px){
    .shoplinkamazon a, .shoplinkrakuten a {
  margin-bottom: 14px;
    }
    .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a {
  box-shadow: 0 8px 8px -4px rgba(0,0,0,.3);
    }
}


/************************************
**商品リンクボタンを浮かせる　ここまで
*************************************/


/************************************
** サイドバー追尾目次　ここから
************************************/
.sidebar-scroll{
  top:15px !important;
}
.sidebar h3{
  font-size:0.9em;
  padding: 7px 12px;
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
.sidebar .toc{
  padding: 0;
  width:100%;
}
.sidebar .toc-content {
  overflow-y: scroll;
  max-height: 390px;
  background: #fff;
  padding: 0.5em 1.5em;
}
.sidebar .toc li{
  line-height:1.6;
  margin-bottom: 1em;
  font-size:0.85rem;
  color:#3cb8f1;
}
.sidebar .toc-content > ol  > li,.sidebar .toc-content > ul  > li{
  font-weight:600;
  padding-left: 0.5em;
}
.sidebar .toc-content a{
  letter-spacing:0.5px;
}
.sidebar .toc .toc-list ul, .sidebar .toc .toc-list ol {
  margin: 1em 0;
  list-style-type:none;
  font-weight:500;
}
@media screen and (max-width: 768px){
  .sidebar-menu-button .widget_toc{
    display:none;
  }
}

/************************************
** サイドバー追尾目次 ここまで
************************************/