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

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

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

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

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

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

/*投稿ページ案内ボックス*/
.youshi {
border-style:solid; border-width:1px;
}

p.nmidashi {
  background: #33cccc; /* 背景の色 */
  color: #fff; /* 文字の色 */
  padding-left: 10px; /* 左の余白 */
  border-width: 0px 0px 0px 7px; /* 枠の幅 */
  border-style: solid; /* 枠の種類 */
  border-color: #33cccc; /* 枠の色 */
  line-height: 150%; /* 行の高さ */
  margin:0px 0px 0px 0px 
}


p.naiyou{
    background:#f5f5f5;  /* 背景の色 */
    border-left:7px solid #eee;  
    padding:.5em .9em 
}

p.kouza{
    background:#f5f5f5;  /* 背景の色 */
    border-left:7px solid #eee;  
    padding:.5em .9em 
}

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

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

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

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

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

/*ブログカードの抜粋文を非表示*/
.internal-blogcard-snippet{
    display: none;
}

/*ブログカードのタイトル文字のサイズ*/
.blogcard-title {
 font-size: 16px;
} 


/*次の記事カード*/
.blogcard {
	position: relative; /*「次の記事」表示用*/
}
.blogcard-content::after {
	content: '記事を読む';
	background-color: #86cfcf;
	border-radius: 1em;
	color: #ffffff;
	font-size: 0.8em;
	padding: 0.2em 1.5em;
	position: absolute;
		right: 0.5rem;
		bottom: 0.5rem;
}

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

/*固定ページ上部の隙間を狭くする*/
.page-id-3,
.page-id-900,
.page-id-1019,
.page-id-1040 .main {
padding-top:0px;
}
@media screen and (max-width: 834px) {
.page-id-3,
.page-id-900,
.page-id-1019,
.page-id-1040 .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-header {
padding: 20px 0 10px 0;
}

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

/* サイドバー見出しH3デザイン */
.sidebar h3 {
  padding: 0.1em 0.1em 0.1em 0.5em;/*文字周りの余白*/
  color: #fff;/*文字色*/
  background: #3ec5ca;/*背景色*/
}


/*各サービス商品検索リンクのボタンの色*/
.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 {
  table-layout: fixed;
  border-collapse: collapse;
  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;
}

/*--------------------------------
親カテゴリーのカスタマイズ
--------------------------------*/
.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; /*太さ*/
}



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

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



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

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

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

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

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




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

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



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

/*メニュー区切り線非表示*/
#navi-footer li {
  border: none;
}

@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    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){
  /*必要ならばここにコードを書く*/
}