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

/*ヘッダー背景透明化*/
#header-container {
background-color: transparent;
}
/*ナビゲーションメニュー背景透明化*/
#header-container .navi {
background-color: transparent;
}

/*キャッチフレーズ下マージン*/
.tagline {
  margin-bottom: -8px; 
}

/*カラムに外枠を付ける*/
#main{
  border: 1px solid #ddd;
}

/*カードのサムネイル画像のサイズを調整
エントリー・関連・新着・人気に共通*/
[class*="card-thumb"] {
	margin: 0 8px 0 0;
	width: 100px !important;
	height: 100px !important;
}
[class*="card-content"] {
	margin: 0;
	padding: 0;
}
[class*="card-title"] {
	color: initial;
	font-size: initial;
	line-height: 1.5;
	margin: 0;
}
[class*="card-snippet"] {
	color: inherit;
	line-height: 1.5;
}
@media screen and (max-width: 560px){
  [class*="card-thumb"] {
    margin: 0 8px 8px 0 ;
    width: 90px !important;
    height: 90px !important;
  }
	[class*="card-title"] {
		font-size: 0.95rem;	
	}
	[class*="card-snippet"] {
		display: none;
	}
}



/*デフォルトリンク*/
a {
  text-decoration: none;
}

/*デフォルトリンクホバー色*/
a:hover {
  color: #d66a35;
}

/*パンくずリストホバー色*/
#breadcrumb.breadcrumb a:hover{
  color: #808080;
  text-decoration: underline;
}

/* パンくずリスト　アイコンを消す */
.breadcrumb .fa-home,
.breadcrumb .fa-folder,
.breadcrumb .fa-file-o {
  display: none; /*非表示*/
}

/*記事下カテゴリーリンク*/
.cat-link {
 background-color: #e9e4d4;
 color: #769164;
 border: 1px solid #769164;
}

.cat-link:hover { /* マウスホバー時 */
    opacity: 1;
    background: #f8f4e6;
    transition: all .5s ease; /* ふわっと変化するアニメーション */
    color: #769164;
}

/*カード全般のホバーエフェクト*/
.a-wrap:hover{
transform: none;		/*位置をずらさない*/
}

/*固定ページの投稿日を非表示*/
.post-428 .date-tags,
.post-182 .date-tags,
.post-130 .date-tags {
  display: none;
}

/** 特定固定ページのシェアボタン非表示 **/
.page-id-182
.sns-share {
display: none;
}

.page-id-428
.sns-share {
display: none;
}

/*アイキャッチラベル非表示*/
.cat-label {
display: none;
}

/*アドセンス*/
.g_ads{
  text-align:center;
}

/*--------------------------------
ブログカードのカスタマイズ
--------------------------------*/

/*ブログカードのファビコンとURLを非表示*/
.internal-blogcard-footer{
	display: none
}

/*背景色*/
.blogcard-wrap {
  background-color: #fff;
}

/*ホバー時の背景色*/
.blogcard-wrap:hover{
  background-color: #f4f4f4;
}

/*枠線なし、周囲余白*/
.content .blogcard {
  border:none;
  margin-top: -10px; /*外側上余白設定*/
  margin-bottom: 0; /*外側下余白設定*/
}

/*タイトル文字のサイズ*/
.blogcard-title{
	font-size: 17px;
	color: #1d1d1d
} 
@media screen and (max-width: 480px){
.blogcard-title{
	font-size: 16px;
}
}

/*抜粋文の文字サイズ*/
.blogcard-snippet{
  font-size: 14px;
}

/*「記事を読む」表示用*/
.blogcard {
  position: relative;
}
/*記事を読むボタン*/
.internal-blogcard::after{
    font-family: 'Font Awesome 5 free';
	content: '記事を読む \f101'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 80%;
	background-color: #93b69c; /* 内部リンク右下枠の背景色 */
	padding: .2em 1.8em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 5px;
}

.internal-blogcard:hover:after {
	background-color: #69b076; /* 内部リンク右下枠のホバー背景色 */
	transition : 1s; /*ふわっとさせる指定*/
}

/*--------------------------------
ブログカードのカスタマイズ　ここまで
--------------------------------*/


/*フロント固定ページのタイトルを非表示*/
.page .entry-title{
  display: none;
}



/*固定ページ上部の隙間を狭くする*/
.page-id-428,
.page-id-182,
.page-id-130 .main {
padding-top:20px;
}
@media screen and (max-width: 834px) {
.page-id-428,
.page-id-182,
.page-id-130 .main {
padding-top: 5px;
}
}

/*コンタクトフォームのサイズ*/
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-subject"] {
        width: 80%;
        height: 35px !important;
}

.wpcf7 textarea[name="your-message"] {
        width: 100%;
        height: 350px !important;
}

.wpcf7 input[type="submit"] {
width:35%
}


/*ヘッダーロゴ画像とグローバルメニューの余白*/
.logo {
margin: 0px;
padding: 0px;
}




/*各サービス商品検索リンクのボタンの色*/
.shoplinkamazon a {
    background: #f6b340;
    transition: .4s;
}
.shoplinkamazon a:hover {
    background: #e59c1c;
    color: #fff;
    opacity: 1;
}
.shoplinkrakuten a {
    background: #e85e5e;
    transition: .4s;
}
.shoplinkrakuten a:hover {
    background: #d93636;
    color: #fff;
    opacity: 1;
}
.shoplinkyahoo a {
    background: #62bedc;
    transition: .4s;
}
.shoplinkyahoo a:hover {
    background: #3ba9cd;
    color: #fff;
    opacity: 1;
}

/*楽天商品リンクのフォント*/
.raku
a {
	color:#20b2aa;		/*リンクの色*/
	text-decoration: none; 
}

.raku
a:hover {		
	transition: 0.3s ;		/*ゆっくり変える*/
	color:#48d1cc;			/*マウスオーバーしたときの色*/
	text-decoration: none;
}


/*商品リンクのスマホ用画像を大きく*/
@media screen and (max-width: 768px){
.product-item-thumb { 
  width: 100%;
}
}



/*楽天アイテムエリアのテーブル*/

.raku_item
table, td, th {
  table-layout: fixed;
  border-collapse: collapse;
  border: 0px none;
  width: 100%;
}


.itemimg {
  vertical-align: bottom;
  border: 0px none;
}

.itemtext {
  text-align: center;
  vertical-align: top;
  border: 0px none;
  font-size: 0.8em;
  padding : 1px 20px 1px 20px;
}



/************************************
** 見出しに関するコード
************************************/

/*見出し初期化*/
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6
{
/*padding: 0;*/
/*margin: 0;*/
background:none;
/*border-collapse: separate;*/
/*border-spacing: 0;*/
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
border-radius: 0px 0px 0px 0px;
line-height: normal;
/*position:relative;*/
}

/*H4見出しデザイン*/
/*entry-content内適用*/
.entry-content h4 {
  padding: .2rem 1rem;
  border-top: 2px dotted #9ba88d;
  border-bottom: 2px dotted #9ba88d;
  background: #eff5e9;
}

/*H5見出しデザイン*/
.entry-content h5 {
  padding: .5em .75em;
  background-color: #f8f4e6;
  border-bottom: 2px solid #ede4cd;
}

.entry-content h5:before {
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f044"; /*FontAwesomeのユニコード*/
  position: relative;
  font-weight: 900; /*太さ*/
  margin-right: .2em; /*右側空間*/
  color: #474a4d; /* 文字色 */
}

/*H6見出しデザイン*/
.entry-content h6 {
  position: relative;
  padding: .25em 0 .5em .75em;
  border-left: 6px solid #ccc;
}
.entry-content h6::before {
  position: absolute;
  left: -6px;
  bottom: 0;
  content: '';
  width: 6px;
  height: 50%;
  background-color: #69b076;
}
.entry-content h6::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}

/************************************
** SNSボタン
************************************/

/*SNSシェアボタン*/
.sns-share-buttons a {
	color: #fff; /*リンクの色*/
}
#main .sns-share a {
	color: #fff; /*リンクの色*/
}




/************************************
** サイドバー関連のカスタマイズ
************************************/

/* サイドバー背景色透明 */
.sidebar{
background:transparent;
}

/* サイドバー見出しH3デザイン */
.sidebar h3 {
  padding: 0.1em 0.1em 0.1em 0.5em;/*文字周りの余白*/
  font-size:105%;
  color: #524e4d;/*文字色*/
  background-color: transparent;
  border-bottom: 2px solid #e0815e;
}

/*--------------------------------
親カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.3; /*行間を狭くする*/
  border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li a::before{
 font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f304"; /*FontAwesomeのユニコード*/
  color: #30d1d7; /*色*/
  padding-right: 6px; /*右側空間*/
	font-weight: 900; /*太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

/*--------------------------------
子カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.3; /*行間を狭くする*/
  border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /*FontAwesomeのユニコード*/
  color: #30d1d7; /*色*/
  padding-right: 6px; /*右側空間*/
  font-weight: 900; /*太さ*/
}

/*--------------------------------
サイドバーリンクのカスタマイズ
--------------------------------*/
ul.sidelink {
  padding-left: 10px;
}

/*2行目字下げ*/
ul.sidelink li{
   text-indent: -1em;
   padding-left: 1em;
}

ul.sidelink li{
  list-style:none;
  line-height: 2.5; /*行間の調整*/
}

ul.sidelink li:before {
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f192"; /*FontAwesomeのユニコード*/
  position: relative;
  font-weight: 400; /*太さ 400 or 900 */
  margin-right: .1em; /*右側空間*/
  color: #d7a98c; /* 文字色 */
}

ul.sidelink li a{
  color: #474747; /*色*/
}

ul.sidelink li a:hover {
  color: #474747; /*色*/
  text-decoration: underline; /*アンダーラインを追加*/
}




/************************************
** フッター設定
************************************/

/*フッター色*/
#footer {
	background: #93b881;
	color: #fff;
}

.navi-footer-in a {
  font-size: 13px; /*メニューの文字サイズ*/
  color: #fff;
}

.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #fff;
  background: none; /*背景色をなしに*/
  text-decoration: underline; /*アンダーラインなし*/
}


/*モバイルでメニューを1カラムにする*/
@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { 
    width: 100%;
    display: block;
    flex: auto;
    padding: 0.1em 0;
  }
}




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

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

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