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

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

/*固定ページの日付非表示*/
.post-3 .date-tags,
.post-237 .date-tags,
.post-245 .date-tags {
display: none;
}

/************************************
 Cocoon-grayishのカスタマイズ
************************************/
/*目次の項目間の余白を狭くする*/
.skin-grayish .tnt-number .toc-list>li, .skin-grayish .toc .toc-list>li{
	padding: 0.25em 0 0.25em 2em;
}

/*h1 480px以下*/
@media screen and (max-width: 480px) {
    .skin-grayish .article-header .entry-title {
        font-size: 20px; /*元サイズ:24px*/
        padding: 0;
    }
}

/*h2の下線2色を解除*/
.article h2::before {
content: none;
}

/*h2のスタイル上書き*/
.article h2.wp-block-heading {
background-color: var(--skin-grayish-site-sub-color);
color: var(--skin-grayish-cat-txt);
border: none;
padding: 0.5em;
line-height: 1.5;
font-size: 20px; /*元サイズ:20px*/
}

/*h3のスタイル上書き*/
.article h3::before {		
border-left: 0;
border-bottom: 4px solid var(--skin-grayish-site-sub-color);
}
.article h3.wp-block-heading {
background-color: transparent;
margin-top: 0.25em;
padding: 0 0.5em 0.5em 0.5em;
/* font-size: 18px; 元サイズ:18px*/
}

/*商品リンク*/
.product-wrap {
display:flex;
width:100%;
border: solid 1px var(--LtGray_T30);
padding:16px;
margin: 2em auto;
}
.product-img {
display: flex;
width:160px;
height:160px;
justify-content: center;
align-items: center;
background-color:#fff;
margin: 0 16px 0 0;
}
.product-img img {
max-width:160px;
max-height:160px;
}
.product-text{
flex:1;
}

/*レシピ材料*/
.ingredient-list {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  margin: auto;
  font-size: 0.9em;
}

.ingredient-list dt {
width:60%;
padding: 6px 0;	
}
.ingredient-list  dd {
width:40%;
padding: 6px 0;
margin:0;
text-align: right;
}
.ingredient-list dt, .ingredient-list dd {
border-bottom: 1px solid #eee;
}

/*レシピ手順*/
ol.procedure {
list-style-type: none;
width: 100%;
padding-left: 0;
}
.procedure li {
position: relative;
padding: 1em 0 1em 3em;
border-bottom: 1px solid #eee;
counter-increment: count-list;
line-height: 1.5;
}
.procedure li::before {
  position: absolute;
  top: 1em;
  left: 0;
padding:0;
  content: "0"counter(count-list);
  display: inline-block;
  color: #E0e0e0;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5;
}



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

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

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


/*********************************
* タイムライン https://ponhiro.com/timeline-wordpress/
*********************************/
.ptimeline-wrap{
    margin:0 auto 2rem;
}
.ptimeline-wrap .ptimeline{
    padding:0 !important;
    list-style:none !important;
}
.ptimeline-wrap .ptimeline-label {
    padding: 3px 0 0 2px;
    color: var(--skin-grayish-site-main-hover);
    font-size: 12px;
    font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    color: var(--skin-grayish-site-name-txt);
}
.ptimeline-wrap .ptimeline-main {
    margin-top: 0.5em;
    padding: 0 0 1.5em;
    font-size: 0.9em;
    line-height: 1.8;
    border-bottom: dashed 1px #ddd;
    color:#555;
}
.ptimeline-wrap .ptimeline-main img{
  display:block;
  margin:1em auto;
}
.ptimeline-wrap .ptimeline-item {
    position: relative;
    padding: 0 0 1em 1.5em !important;
    margin-bottom:0 !important;
    border:none;
}
.ptimeline-wrap .ptimeline .ptimeline-item:before {
    content: "";
    width: 3px;
    background: #eee !important;
    display: block;
    position: absolute;
    top: 25px;
    bottom: -3px;
    left: 5px;
}
.ptimeline-wrap .ptimeline-item:last-child:before{
    content:none;
}
/*********************************
* タイムライン マーカー
*********************************/
.ptimeline-wrap .ptimeline-marker{
    display: block;
    position: absolute;
    content: "";
    top: 6px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 3px var(--skin-grayish-site-main-hover);
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
    background: var(--skin-grayish-site-main-hover);
}
/*四角 */
.ptimeline-wrap .square .ptimeline-marker{
    border-radius: 0;
}
/* アイコン*/
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker:before{
    font-family: "Font Awesome 5 Free";
    top: -1px;
    left: 0;
    position:absolute;
    font-weight:bold;
    font-size:16px;
    line-height:1;
    color:#00bfff;
}
.ptimeline-wrap .icon .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .icon .ptimeline-item:last-child .ptimeline-marker{
    background:none !important;
}
/* 画像*/
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker:before {
    content:"";
    display:inline-block;
    background-image:url(ここに画像URL); /* 画像1番目*/
    background-size:contain;
    background-repeat:no-repeat;
    width:40px;
    height:40px;
    position: relative;
    top: -4px;
    left: -2px;
}
.ptimeline-wrap .tl-img li:nth-of-type(2) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像2番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(3) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像3番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(4) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像4番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(5) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像5番目*/
}
.ptimeline-wrap .tl-img .ptimeline-item {
    padding: 0 0 1em 3em !important;
}
.ptimeline-wrap .tl-img .ptimeline-item:before {
    top: 30px;
    left: 15px;
}