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

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

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

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

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

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#fc8ca4;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #fc8ca4; /*点線の色変更はこちら*/
content: "メニュー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}

/* グローバルメニュー各項目間区切り線（両端区切り有）*/
.navi-in > ul > li{
  border-right: 1px dashed #7b7b7b;
}
.navi-in > ul > li:first-child{
  border-left: 1px dashed #7b7b7b;
}

/************************************
**目次
************************************/
/* h2見出しの前 */
.toc-list>li>a::before {
font-family: "Font Awesome 5 Free";
content: "\f058";/* Font Awesomeで変更可能 */
font-weight: 900;
padding-right: 5px;
/* color: #fc8ca4; アイコンの色 */
color: #999999; アイコンの色 */
}
/* h3見出しの前 */
.toc-list>li li a::before {
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
padding-right: 5px;
color: #a9a9a9;/* アイコンの色 */
}
.toc-list li a {
font-size: 1.1em;
font-weight: 600;
}
.toc-list>li li a {
font-size: 1em;
font-weight: 500;
}
.toc a:hover {
color: #333;
text-decoration: underline;
}
.toc {
	border: 2px solid #806C68; /*外枠*/
}

/************************************
**カテゴリ設定
************************************/
/* 親カテゴリーのカスタマイズ */
.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: "\f0da"; /*FontAwesomeのユニコード*/
  color: #fc8ca4; /*色*/
  padding-right: 6px; /*右側空間*/
	font-weight: 900; /*太さ*/
}

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

/************************************
**ウィジェットタイトル
************************************/
#sidebar .widget-sidebar-title{
    border-radius: 15px;
    background: none; /*背景色*/
    /*border: 3px solid #1F2E55; 枠線色*/
    /*color: #1F2E55; 文字色*/
	border: 3px solid #6D4C41; /*枠線色*/
    color: #6D4C41; /*文字色*/
}
#sidebar .widget-sidebar-scroll-title{
    border-radius: 15px;
    background: none; /*背景色*/
    /*border: 3px solid #1F2E55; 枠線色*/
    /*color: #1F2E55; 文字色*/
    border: 3px solid #6D4C41; /*枠線色*/
    color: #6D4C41; /*文字色*/
}
/******************
表のデザインを変更
*******************/
/*--- ヘッダーセル(th) ---*/
.wp-block-table th {
    /*background-color: #f7e9c5;  背景色 */
    background-color: #FEECF1; /* 背景色 */
}


/************************************
トップページリストのカスタマイズ
*************************************/
.entry-card-title {
	font-size: 15px; /* スマホのサイズを指定 */
}

@media screen and (min-width: 481px) {
	.entry-card-title {
		font-size:20px; /* PCのサイズを指定 */
		margin-bottom: 2em;
	}
}

/************************************
もしも かんたんリンクのカスタマイズ
************************************/
/* —  商品タイトル — */
p.easyLink-info-name a {
  font-weight:none;
}
/* — ボタンサイズ — */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
  padding:1px !important;
}

div.easyLink-box {
  border: 2px solid #ccc!important;
}

/*ここからスマホverの調整*/
@media screen and (max-width: 768px) {
  /* スマホの広告幅 */
  div.easyLink-box.easyLink-size-s {
        max-width: 600px!important;
  }
  div.easyLink-box.easyLink-size-xs {
        max-width: 600px!important;
  }
  div.easyLink-box div.easyLink-img p.easyLink-img-box {
    align-items: baseline;
  }

  /* スマホのボタン調整 */
  .easyLink-info-btn a {
    margin: 5px 10px 5px 0!important;
    padding: 0 12px!important;
    line-height: 35px!important;
    display: inline-block!important;
    width: 100%!important;
    box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
  }

  /* スマホでも横長にする */
  .easyLink-img {
    float: left!important;
    width: 130px;
    padding-right: 20px!important;
  }

  .easyLink-info {
    display: flex;
    flex-wrap: wrap;
  }

  .easyLink-info-btn-yahoo {
    font-size: 10px!important;
  }

  p.easyLink-info-name a {
    font-size: 16px;
  }

  .easyLink-info-btn {
    margin-top: -5px!important;
  }

  p.easyLink-img-box {
    position: initial!important;
    padding-bottom: 130px!important;
  }

  /* 商品画像サイズ */
  div.easyLink-box div.easyLink-img,
  div.easyLink-box div.easyLink-img p.easyLink-img-box,
  div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
    max-height: 170px!important;
    min-height: 100px!important;
    max-width: 130px!important;
  }
}

/************************************
 ２からむ（スマホでも横並び） 
*************************************/
@media screen and (max-width: 768px){
	.column-wrap{
    	flex-direction: row !important;
		padding: 10px;
	}
	.column-right{
		padding-left: 10px;
	}
	.column-left{
		padding-right: 10px;
	}
}
	
/************************************
 グローバルメニューのフォントサイズ変更 
*************************************/
.tagline {
    font-size: 16px;
}
/******************
hタグのデザインを変更
*******************/
.article h2 {
    border: 0;
	background-color: #6D4C41;
	color: #FFFFFF;
}
.article h3 {
	  border:none;
      border-top: 2px solid #6D4C41;
      border-bottom: 2px solid #6D4C41;
      background-color: none;
      padding: 1em 1em 1em 1em;
      color: #6D4C41; /*文字色*/
}
.article h4 {
	  border:none;
      border-bottom: 3px dotted #6D4C41;
      color: #6D4C41; /*文字色*/
}
.article h5 {
      color: #6D4C41; /*文字色*/
      border-bottom: 2px solid #6D4C41;
}

.article h6 {
      color: #6D4C41; /*文字色*/
}




/******************
投稿本文下　タイトルデザイン
*******************/
.main-widget-label{
	font-weight: 700;
	font-size: 17px;
    color: #6D4C41; /*文字色*/
	border-bottom: 2px solid #CBB1A9; /*枠線色*/
	padding: 8px;
	margin-top: 16px;
	margin-bottom: 16px;
}

/******************
タグクラウドデザイン
*******************/
.tagcloud a {
    border: none; 
	flex: none;
	border-radius: 20px;
	font-size: 12px;
	border: 1px solid #ccc;
}

/******************
プロフィールデザイン
*******************/
.author-box {
    border-color: none;
    border-width: none;
    border-style: none;
}

/******************
ブログカード　デザイン
*******************/
.blogcard-title {
    font-size: 15px;
}

/******************
アンダーライン
*******************/
span[style*="text-decoration: underline"] {
  text-decoration: none !important;
  border-bottom: 2px dashed #a9a9a9 !important;
}