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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.btn-copy:hover {
    color:#fff;
}
.btn-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "Copied!";
}
.btn-copy .btn-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn-copy-active{
    background:#bbb;/* ボタンクリック時 背景色 */
}
.btn-copy-active:before {
    left: 0;
}
.btn-copy-active .btn-copy-text {
    -webkit-transform: translateX(250%);
    -moz-transform: translateX(250%);
    -ms-transform: translateX(250%);
    transform: translateX(250%);
}

/*--------------------------------------
コンバージョンアップボタン （中央寄せ）
参考：https://noripon.blog/2020/12/17/how-to-create-stylish-and-easy-to-use-css-button-designs/
--------------------------------------*/
.button1,
a.button1,
button.button1 {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #02bb80;
border-radius: 0.5rem;
}

.button1-wrap {
margin: 30px 0;
text-align: center;
}

a.button1-c {
font-size: 1.15rem;
width: 100%;
position: relative;
padding: 0.25rem 2rem 0.5rem 3.5rem;
color: #fff;
background: #02bb80;
-webkit-box-shadow: 0 5px 0 #01a873;
box-shadow: 0 5px 0 #01a873;
}

a.button1-c span {
font-size: 0.8rem;

position: absolute;
top: -10px;
left: calc(50% - 150px);

display: block;

width: 300px;
padding: 0.2rem 0;

color: #02bb80;
border: 2px solid #01a873;
border-radius: 0.5rem;
background: #fff;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a.button1-c:hover {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);

color: #fff;
background: #02bb80;
-webkit-box-shadow: 0 2px 0 #d44114;
box-shadow: 0 2px 0 #01a873;
}

a.button1-c:hover:before {
left: 2rem;
}

@media screen and (min-width: 500px){
a.button1-c {
width: 500px;
}
}
	
/************************************
** アイキャッチ画像を記事タイトルの上に移動する
************************************/
a.btn--orange {
  color: #fff;
  background-color: #02bb80;
  border-bottom: 5px solid #01a873;
	width:130px;
	height: 55px;
	padding: 0px;
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #02bb80;
  border-bottom: 2px solid #01a873;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}


/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}

/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*はみ出した部分を非表示 ※IE対策*/
}

/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}

/************************************
** 目次
************************************/
.toc-title{/*目次タイトルを太く*/
font-weight:bold;
color:#7b7b7b;
}
.toc-list > li a {/*小見出し（H2）*/
font-weight: bold;
color: #7b7b7b;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {/*小見出し（H2）の先頭につけるアイコン*/
font-family: FontAwesome;
content : “\f144“;
margin-right: 7px;
}
.toc-list > li li a {/*小見出し（H3）*/
font-weight: normal;
font-size: 95%;
color: #7b7b7b;
margin-top:0;
margin-left: 3em;
}
.toc-list > li li a::before {/*小見出し（H3）の先頭につける「・」*/
content: ”;
width: 8px;
height: 8px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #90C31F;/*ここで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){/*モバイル表示*/
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc{/*枠に影を付けます*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.15);
}
/*SNSフォローボタン*/

.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	margin:0 auto 0 0;
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}
.sns-follow-message{
  display:none;     /* フォローメッセージの非表示 */
}

 /* SNSボタン名称の表示設定 */
.bc-brand-color-white.sns-share .button-caption {
  display:none;        /* SNSボタン名称を非表示 */
}
/* シェアメッセージの表示設定 */
.sns-share-message{
  display:none;      /* シェアメッセージの非表示 */
}

#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:2.5;
}
#header-container #navi a{
   color:#ffffff; /* 文字色 */
   padding:0.8em 1.2em;
}
#header-container #navi a:hover{
   color:#ffffff; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:0.8em;
    padding: 1em 1em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}
/***サイドバー背景透過***/
#sidebar{
background-color:transparent;
}

.logo-header {
  padding: 20px 0 10px 0;
}
@media screen and (max-width: 768px) {
	#navi .navi-in > .menu-mobile li {
		width: 33%;
	}
	#navi .navi-in > .menu-mobile li a {
		font-size: 14px; /*場合によってフォントサイズを小さく*/
	}
}

/*トップの記事*/
.home main, .archive main{
    background-color: transparent;
    margin-top: 0;
    padding-top: 0;
}

.entry-card-wrap{
    background-color: white;
    border-radius: 10px;
    margin-bottom: 1em!important;
}

.entry-card-wrap:hover{
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
transform: translateY(-2px);
background-color: white;
}

/*グローバルナビ*/
nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #ffffff !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #ffffff !important;
    border-bottom: 3px solid #FDD835;
    transition: all .2s ease;
}
#navi .navi-in a:hover{
	color: #ffffff!important;
	background: transparent;
	transition: all 0.5s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #ffffff !important;
    transition: all .2s ease;
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}



/*タグクラウド*/
.tagcloud a {
    background: #ffffff; 
   	border: 1px solid #7b7b7b; 
    border-radius: 20px; /*角の丸み*/
    color: #555; /*文字色*/
    display: inline-block;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 13px;
    margin: 2px;
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
}

.tagcloud a:hover { /*マウスホバー時*/
    background: #f5f5f5;
    transition: 0.5s; /*アニメーションの時間*/
}

/*プロフィールのSNS設定*/
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

.author-box .author-content .author-follows .sns-buttons a.follow-button{
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	color: #fff;
	margin-bottom: .5em;
	margin-right: .5em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	background-color: #ffffff;
}

.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #00acee !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px; }

main .author-box{
	background-color: #ffffff;
	max-width: 400px;
	margin: 0 auto;
	font-size: 80%;
}

.author-box {
　background-color: #ffffff;
  border: 0px;
}

/*——————-
カルーセル
———————-*/
#carousel .a-wrap{
  margin-top:-6px !important;
  margin: initial;
  padding-top:-10px;
}

#carousel .carousel-in {
  background-color: transparent;
}

.slick-slide img {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);/*お好みで*/
}
.carousel-entry-card-thumb {
  width: 95%;
}

main#main.main{/*新着記事の真上空白をへらす*/
margin:0;
}
.recommended.rcs-center-white-title .card-content {
background-color: rgba(51, 51, 51, 0.2);
}

#carousel .carousel-in{
   box-shadow:none;
   background-color: transparent;
}
#carousel .a-wrap{
   margin:0;
   box-shadow:none;
   border:none;
}
#carousel .carousel-entry-card-title{
   font-size:0.75em;
   font-weight:bold;
   color:#333;
}

/**カルーセル左右矢印の色・大きさ**/
.carousel .slick-arrow:before{
color:#ffffff;
font-size:28px;
}

a.entry-card-wrap.a-wrap.border-element.cf{/*カード本体*/
padding:0 0 .5em;
border-radius:10px;
width:48%;
margin-bottom:2em;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{/*サムネイル大きさ*/
max-height:150px;
border-radius:10px 10px 0 0/ 10px 10px 0 0;
overflow:hidden;
display: flex;/*位置をflexで中心に*/
justify-content: center;
align-items: center;
}
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:.8em;
}
@media screen and (max-width: 1100px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:120px;
}}
@media screen and (max-width: 1023px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}}
@media screen and (max-width: 900px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}
@media screen and (max-width: 750px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}
@media screen and (max-width: 600px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}
a.entry-card-wrap.a-wrap.border-element.cf{/*画面幅600pxまで、1カラムにする*/
margin:.5em 1em!important;
}
.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
}
@media screen and (max-width: 480px){/*カード本体*/
a.entry-card-wrap.a-wrap.border-element.cf{
margin:.5em 1em!important;
border-radius:10px;
}
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:1em;
}}
@media screen and (max-width: 1023px){/*画面幅1023未満はカード本体に影を表示*/
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media screen and (min-width: 601px) and (max-width: 834px){/*通常記事本文の周囲の空白にも影響している*/
div#content.content.cf{
margin:1em;
}}
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size:18px;
color:#7b7b7b;
font-weight:bold;
text-align:center;
line-height:1.3em;
margin-top:0.5em;
margin-bottom:0.5em;
padding: 0 0.5em 0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:14px;
color:#7b7b7b;
text-align:center;
border-top:3px dotted #90C31F;
line-height:1.8em;
padding-top:0.6em;
margin-left:2em;
margin-right:2em;
margin-bottom:4em;
max-height:20em;
}
@media (max-width:834px){
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size: 1.15em;
font-weight:bold;
line-height:1.7em;
padding: 1.5em .8em 1em;
margin:0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:13px;
text-align:center;
border-top:3px dotted #7ad94c;
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}
	
main.main, div.sidebar {/*モバイル表示などの本文全体の周りの空白にも影響している*/
padding:0;
	}

.eye-catch .cat-label, .cat-label{/*カテゴリラベル全体デザイン*/
font-size:.7em;
border-radius:10px;
margin:0.5em;
padding:0 0.5em 0;
background-color:#7ad94c;
color:#fff;
}

div.admin-pv{/*閲覧数を非表示*/
display:none;
}
	
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{/*日付・更新日*/
margin-right:1.5em!important;
color:#7b7b7b;
font-size:.86em;
	}}

/**ページネーション**/
.pagination-next, .next, .prev, .pager-prev-next{ display: none; }
.pager-numbers a { text-decoration: none; }
.page-numbers{
border: none;
border-radius: 50%;
font-family: sans-serif;
font-size: 80%;
color: #666;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
transition: all .1s ease;
background-color: #ffffff;
}
.pagination a.page-numbers:hover,.pager-numbers a:hover .page-numbers{
background-color: #7ad94c;
color: #fff;
}
.pagination .current, .pager-links .current{
background-color: #ccc;
color: #fff;
}

/************************************
** タブ切り替えのタブの色変更
************************************/

#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
  background: none #7AD94C ;
  border: 1px solid #7AD94C ;
  color: #fff;
  font-weight: 700;
}

#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"]:hover,
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"]:hover,
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"]:hover,
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"]:hover {
  background: #d3d3d3;
}

.index-tab-button{
padding: 8px 12px!important;
}
@media screen and (max-width: 834px){
.index-tab-button{
padding: 5px 16px!important;
font-size:13px!important;
}
}

/*上の余白を少し無くす*/
.index-tab-buttons{
margin-top:10px!important;
}
/*——————-
おすすめカード
———————-*/
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード上にスキマをつくる*/
margin-top: 10px;
}
div#content.content.cf{/*メインカラムの上５ミリ、おすすめカードの↓*/
margin-top:0;
}
div.navi-entry-card.widget-entry-card.e-card.cf{
opacity:.8;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる*/
background: none;
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
border-radius:10px!important;
margin-top:1.6em;
margin-bottom:2.3em;
background-color:#f7f7f7;
}
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{/*高さ上限設定*/
border-radius:10px!important;
overflow:hidden;
max-height:300px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.2)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{/*おすすめカードサイドにスキマをつくる*/
margin: .7em .5em .3em;
}
}
main#main.main{/*新着記事の真上空白をへらす*/
margin:0;
}
.recommended.rcs-center-white-title .card-content {
background-color: rgba(51, 51, 51, 0.2);
}

/************************************
** タブ
************************************/
/* tab switcher */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:10px 0;
}

.tab-label {
  border-bottom: 3px solid #7AD94C;
  color: #f5f5f5;
  background: #f5f5f5;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
  transition: all 0.2s ease;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-label:hover {
	background: #fefefe;
}

.tab-switch:checked + .tab-label {
	color: #ffffff;
	background: #7ad94c;
}

#tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"],
#tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"],
#tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"],
#tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
  background: none #7AD94C ;
  border: 1px solid #7AD94C ;
  color: #fff;
  font-weight: 700;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}
.tab-wrap::after {
	content: '';
	height: 0px;
	order: -1;
	width: 100%;
	margin-top: -30px;
}

.tab-switch {
	display: none;
}

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

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

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

/********************************
タイトル上余白調整
*********************************/
.content-top {
margin: 0px;
padding: 0px;
}


/*--------------------------------------
  もしもの簡単リンクのカスタマイズ
--------------------------------------*/
.easyLink-info-btn {
	display: inline!important;
}
.easyLink-info-name a { color: #000 !important; /* 文字色 */ } 
.easyLink-info-btn a{
	margin: 5px 10px 5px 0!important;
	padding: 0 12px!important;
        line-height: 35px!important;
	display: inline-block!important;
	width: 93%!important;
	font-size: 0.9em!important;
}
.easyLink-info-btn-amazon{
	background:#02bb80!important;
		box-shadow: 0px 5px 0 #01a873;
    transition: 0.2s all ease 0s;
 overflow: hidden;
}
.easyLink-info-btn-rakuten{
	background:#02bb80!important;
		box-shadow: 0px 5px 0 #01a873;
    transition: 0.2s all ease 0s;
 overflow: hidden;
}
.easyLink-info-btn-yahoo{
	background:#02bb80!important;
		box-shadow: 0px 5px 0 #01a873;
    transition: 0.2s all ease 0s;
 overflow: hidden;
}

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

a:hover.easyLink-info-btn-rakuten {
  box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

a:hover.easyLink-info-btn-yahoo {
  box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

.easyLink-info-maker {
 display: none;
 }
.easyLink-info-model {
 display: none;
 }
 }



/*ここから追加項目*/
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-info p.easyLink-info-name {
 margin-bottom: 5px;
 font-size: 15px;
 }
div.easyLink-box {
 padding: 10px 20px;
 }
div.easyLink-box div.easyLink-img p.easyLink-img-box span > img {
 max-width: 45%;
 max-height: 100%;
 }
 div.easyLink-box div.easyLink-img {
 margin-bottom: 5px;
 height: 100%;
 }
div.easyLink-box div.easyLink-img::before {
 padding-top: 80%!important;
 }
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
 margin-top: 10px;
 text-align: center;
 }
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
margin: 12px 0;
padding: 6px 0;
}
 }

@media screen and (max-width: 480px){
	div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
		width: 100%!important;
		position: relative;
	}
}
/*ここまで*/

/* タイトルありのボックス */
.box1-yellow{
	margin: 2em auto; /* ボックスの余白 */
	background: #fef9ed; /* ボックス背景色 */
	border-radius:4px; /* ボックス角丸 */
	max-width:600px; /* ボックス横幅 */
	padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box1-yellow .box-title {
	background: #fdc44f; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box1-yellow p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}

/* タイトルありのボックス */
.box2-green{
	margin: 2em auto; /* ボックスの余白 */
	background: #ecfcf4; /* ボックス背景色 */
	border-radius:4px; /* ボックス角丸 */
	max-width:600px; /* ボックス横幅 */
	padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box2-green .box-title {
	background: #01a4aa; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box2-green p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}


font-size: 0.8em;/*Cocoonバッジカラー変更*/
.badge{background-color: #fdc44f}
.badge-orange{background-color: #fdc44f}
.badge-red {background-color: #bf4762;}
.badge-pink {background-color: #ebb2cb;}
.badge-purple {background-color: #bb8bc7;}
.badge-blue {background-color: #92c1d6;}
.badge-green {background-color: #01a4aa;}
.badge-yellow {background-color: #fdc44f}
.badge-brown {background-color: #9e735d;}
.badge-grey {background-color: #b9b9bd;}

/*バッジ*/
.badge, .badge-red, .badge-pink, .badge-purple, .badge-blue, .badge-green, .badge-yellow, .badge-brown, .badge-grey {
  color: #fff;
	padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
}

/* リンクの下線を消すCSS */
.entry-content a{
    text-decoration:none;
	font-weight: bold;
}

.btn-yellow { background-color: #fdc44f; } /* イエロー */
.btn-green { background-color: #66c2c3; } /* green */
/*
.btn{
	border-radius: 35px;
	box-shadow: 0 7px 10px -5px rgba(0,0,0,0.5);
}*/

/************************************
** CVボタン
************************************/
.p-cv-btn-wrap *{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box;
}
.p-cv-btn-wrap{
  background:#f7f7f7;
  padding:1.5em !important;
  margin: 0 0 2em !important;
  font-size:16px;
  line-height:1.8;
}
.p-cv-btn-wrap ul,.p-cv-btn-wrap a,.p-cv-note{
  max-width:350px;
  margin: auto !important;
  border:none;
}
.p-cv-btn-wrap ul li{
  font-weight:500;
  list-style:none;
  font-size:0.9em;
  position:relative;
  padding-left:1.5em !important;
}
.p-cv-btn-wrap ul li:before{
  font-family: "Font Awesome 5 Free";
  content: "\f00c" !important;
  font-weight:600;
  color:#1d89b5;
  position:absolute;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.p-cv-btn a{
  color:#fff;
  text-decoration:none !important;
  background:#90c231;
  border-bottom: solid 4px #61841f;
  padding: 0.5em 1em !important;
  border-radius: 7px;
  margin: 0.3em auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.p-cv-btn:hover{
  opacity:0.9;
}
.p-cv-btn a:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}
.p-cv-btn .p-cv-em{
  font-size:0.9em;
  line-height: 1.3;
  text-align:center;
  font-weight:600;
  display:block;
  color:#90c231;
  background:#fff;
  padding: 5px 10px !important;
  margin: 2px 10px 0px 0 !important;
  border-radius: 30px;
  min-width: 55px;
  max-width: 80px;
}
.p-cv-btn .p-cv-text{
  font-size:0.9em;
  font-weight: 600;
  color:#fff;
  letter-spacing: 1px;
  border-left: 1px solid #fff;
  line-height: 25px;
  margin: 0.6em auto 0.6em 0 !important;
  padding: 0 0.6em 0 1em !important;
}
.p-cv-btn i,.p-cv-btn svg{
  color:#fff;
  min-width:22px;
}
.p-cv-url-wrap{
  font-size: 0.8em !important;
  max-width: 350px;
  margin: 0 auto 0.5em !important;
  display: block;
}
.p-cv-url-wrap a{
  color: #1a0dab !important;
  text-decoration:underline !important;
}
.p-cv-btn-wrap .p-cv-note{
  font-size:0.9em;
  border: 1px solid #90c231;
  margin-top:0.5em !important;
  padding:0.5em 1em !important;
}
.sidebar .p-cv-btn-wrap{
  background:#fff;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
/*320px以下*/
@media screen and (max-width: 320px){
  .p-cv-btn-wrap{
    padding:1em !important;
  }
}
.p-cv-btn-img{
  margin:0 auto !important;
  text-align:center;
  max-width:350px;
  display:block;
}

.list-3{
   list-style: none;
   position: relative;
   padding: 0 0.5em;
   padding-left: 0.5em;
}
.list-3 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding: 0.5em 0 0.5em 1.4em;
}
.list-3 li:before {
   font-family: "Font Awesome 5 Free";
   content: '\f138'; /*アイコン*/
   color:  #01a4aa; /* 色 */
   position: absolute;
   left : 0;
}

/*全体*/
.hidden_box {
    margin: 2em 0;
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    background: #efefef;
    border-radius: 5px;
    cursor :pointer;
    transition: .5s;
}

/*アイコンを表示*/
.hidden_box label:before {
    display: inline-block;
    content: '\f078';
    font-family: "Font Awesome 5 Free";
    padding-right: 5px;
    transition: 0.2s;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: silver;
}

/*アイコンを切り替え*/
.hidden_box input:checked ~ label:before {
     content: '\f00d';
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #668ad8;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

/*********************************
* タイムライン
*********************************/
.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: #aaa;
    font-size: 12px;
    font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    color:#00bfff;
}
.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;
}

/* 画像、タイトルを縦並び */
.blogcard {
  display: flex;
  flex-direction: column;
}

/* サムネイル画像サイズ */
.blogcard figure{
  width: 100%;
}

/* タイトルの左の余白 */
.blogcard .blogcard-content {
  margin-left: 0;
}
.blogcard-wrap {
  max-width: 600px;
}