@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: 2px; 
}

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


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

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

/*カラムページ内リンクのホバー下線*/
.entry-content a:hover {
  text-decoration: underline;
}

/*パンくずリストホバー色*/
#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: #a2d7dd;
 color: #fff;

}

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

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

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

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

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

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


/************************************
****　インデックス　記事一覧カスタマイズ
************************************/

.entry-card-title{ /*タイトル設定*/
  margin-top: 14px; /*アイキャッチ画像とタイトル間の余白*/
  margin-bottom: 12px; /*タイトルと説明間の余白*/
  line-height: 1.4; /*行間設定*/
    position:relative;
    margin:10px;
    display:inline-block;
    padding:5px 40px;
    border:1px solid #DDD;
    background:none;
  color:#7d7d7d;
  font-size:110%;
}
.entry-card-title:after {
    position: absolute;
    top:2px;
    left:6px;
    content:"";
    height:100%;
    width:100%;
    z-index:-999;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    background:#fdeff0;
}

.entry-card-wrap:hover{ /*エントリーカード ホバー時設定*/
  text-decoration: none!important;
  background-color: transparent; /*背景色 ←変更箇所*/
}

.entry-category {
 display: none;	 /*カテゴリー非表示*/
}

/*PCからも　リストを1列に*/
 .ect-vertical-card .entry-card-wrap {
 width: 100%;
 display: inline-block;
}

/*スニペット文字サイズ*/
.entry-card-snippet.card-snippet.e-card-snippet {
	font-size: 15px;
}

/*480px以下　リストを1列に*/
@media screen and (max-width: 480px){
 .ect-vertical-card .entry-card-wrap {
 width: 100%;
 display: inline-block;
}
}

/************************************
****　インデックス設定　ここまで
************************************/

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



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

/*サイトタイトルのフォントサイズ*/
.logo-header a span{
font-size:30px;
}

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

/*アドビ講座の紹介*/
.info_adobe {
    background: #f3f3f2;
    margin:10px;
	padding:20px;
}

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


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

/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
    font-weight: bold; /*太字*/
    color: #7d7d7d; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
	color: #fff; /*リンクの色*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
	color: #fff; /*リンクの色*/
}




/************************************
** ページナビゲーション
************************************/

/*次へボタン非表示*/
.pagination-next-link {
  display: none;
}

.page-numbers {
  color: #595857;
  border: 1px solid #DDD;
  border-radius: 50%;
}
.pagination .current {
  background-color: #f6bfbc;
  color: #fff;
}

.pagination a:hover {
  background-color: #fdeff0;
  color: #595857;
}

@media screen and (max-width: 480px) {
.page-numbers {
  width: 48px;
  height: 48px;
  line-height: 48px;
}
}



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

/*見出し初期化*/
.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;*/
}


/*H1見出しデザイン*/
h1 {
  color: #595857;
}

/*H4見出しデザイン*/
/*entry-content内適用*/

.entry-content h4 {
    position:relative;
    margin:10px;
    display:inline-block;
    padding:5px 40px;
    border:1px solid #DDD;
    background:none;
	color:#7d7d7d;
	font-size:110%;
}
.entry-content h4:after {
    position: absolute;
    top:2px;
    left:6px;
    content:"";
    height:100%;
    width:100%;
    z-index:-999;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    background:#fdeff0;
}

/*H5見出しデザイン*/
.entry-content h5 {
	border: 5px solid #eee;	/* 線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 10px; /* 内側の余白 */
	position: relative;
    color: #595857;
	z-index: 0;
}
.entry-content h5:before {
	border-top: 5px solid #f6bfbc;	/* 一部だけ異なる線の太さ・種類・色 */
	border-left: 5px solid #f6bfbc;	/* 一部だけ異なる線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 20px;
	height: 20px;
	z-index: 1;
}

/*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: #f6bfbc;
}
.entry-content h6::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}


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

/* ウィジェット全体の行間 */
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
  margin: 2px 0;
  padding: 1px 6px;
}

/* サイドバー背景色透明 */
.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 #a9a9a9;
}

/*--------------------------------
最近の投稿のカスタマイズ
--------------------------------*/
.widget_recent_entries {
  padding-left: 10px;
}

.widget_recent_entries ul li a:hover{
  background: none; /*背景色をなしに*/
  color: #474747; /*色*/
  text-decoration: underline; /*アンダーラインを追加*/
}

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

.widget_recent_entries ul li a:before {
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f118"; /*FontAwesomeのユニコード*/
  position: relative;
  font-weight: 900; /*太さ 400 or 900 */
  margin-right: .3em; /*右側空間*/
  color: #f09199; /* 文字色 */
  display: inline-block;
  font-size: .9em; /*0.9倍にする*/
}

/*--------------------------------
親カテゴリーのカスタマイズ
--------------------------------*/

.widget_categories {
  padding-left: 10px;
}

.widget_categories ul li{
  list-style:none;
}

.widget_categories ul li a:before {
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f07b"; /*FontAwesomeのユニコード*/
  position: relative;
  font-weight: 900; /*太さ 400 or 900 */
  margin-right: .3em; /*右側空間*/
  color: #f09199; /* 文字色 */
  display: inline-block;
  font-size: .9em; /*0.9倍にする*/
}

.widget_categories ul li a{
  color: #474747; /*色*/
  line-height: 1.7; /*行間の調整*/
}

.widget_categories ul li a:hover {
  background: none; /*背景色をなしに*/
  color: #474747; /*色*/
  text-decoration: underline; /*アンダーラインを追加*/
}

/*--------------------------------
子カテゴリーのカスタマイズ
--------------------------------*/




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

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

ul.sidelink li{
  list-style:none;
  line-height: 1.6; /*行間の調整*/
  margin-left: .2em; /*好きな値に調整*/
  margin-bottom:0.3em;
}

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

ul.sidelink li a{
  color: #474747; /*色*/
  margin: 2px 0;
  padding: 1px 6px;
}

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





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

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

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

.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;
  }
}


/************************************************
 ページ右下トップへ戻るボタン
*************************************************/

.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 40px; /*下から55px*/
}

.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
  color: #595857; /*アイコンフォントの色*/
}

/*ホバー時*/
.go-to-top-button:hover {
  color: #595857; /*アイコンフォントの色*/
  background-color:#f6bfbc; /*背景色*/
  transition: all .5s ease; /* ふわっと変化するアニメーション */
}




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

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

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