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

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

/*コメントフォームをコメント欄の上に表示*/
.comment-area {
display: flex;
flex-direction: column-reverse;
}

/*コメント送信ボタン*/
#submit {
 border: solid 1px #4ecdc4!important;
 border-radius: 4px!important;
 font-weight:bold!important;
 font-size: 18px!important;
 color: #362B2A!important;
 background-color: #4ecdc4!important;
 letter-spacing: 2px!important;
}

/*コメントフォーム*/
.comment-respond { /*入力欄全体の枠*/
 border: 2px solid #362b2a!important;
margin-top: -2px;
}
.comment-respond p {
margin: 1em 0;
}
#commentform { /*フォーム部分の枠*/
padding: 20px;
}
p.comment-notes { /*注意書きの文字サイズ*/
font-size: 14px;
}
p.form-submit {
margin: 2em 0 1em 0;
}
#commentform input[type="text"], #commentform textarea { /*入力スペースの装飾*/
padding: 11px;
border: none;
border-radius: 4px;
font-size: 18px;
width: 100%;
background: #dfd6c770; /*入力スペースの背景色*/
}

/* ショップリンクボタンの色変更 */
.shoplinkamazon a {
background: #eab130;
transition: .4s;
}
.shoplinkamazon a:hover {
background: #F5D898;
color: #fff;
opacity: 1;
}
.shoplinkrakuten a {
background: #cd4e57;
transition: .4s;
}
.shoplinkrakuten a:hover {
background: #E6A7AB;
color: #fff;
opacity: 1;
}
.shoplinkyahoo a {
background: #4ECDC4;
transition: .4s;
}
.shoplinkyahoo a:hover {
background: #A7E6E2;
color: #fff;
opacity: 1;
}
.shoplinkmercari a {
background: #CA9A75;
transition: .4s;
}
.shoplinkmercari a:hover {
background: #E5CDBA;
color: #fff;
opacity: 1;
}
/* ショップリンクボタンの色変更終了 */

/*Cocoon商品リンク：枠線を細く*/
.rakuten-item-box{
margin: 0;
padding: 12px 15px; /*余白調整*/
background: #CA9A7510;
border: none;
}



/*ビデオを中央配置*/
.video-container {
margin: 0px auto;
}
/*ビデオを中央配置終了*/





/*アプリーチ*/
.appreach {
text-align: left;
padding: 10px;
border: 1px solid #7C7C7C;
overflow: hidden;
}
.appreach:after {
content: "";
display: block;
clear: both;
}
.appreach p {
margin: 0;
}
.appreach a:after {
display: none;
}
.appreach__icon {
float: left;
border-radius: 10%;
overflow: hidden;
margin: 0 3% 0 0 !important;
width: 25% !important;
height: auto !important;
max-width: 120px !important;
}
.appreach__detail {
display: inline-block;
font-size: 20px;
line-height: 1.5;
width: 72%;
max-width: 72%;
}
.appreach__detail:after {
content: "";
display: block;
clear: both;
}
.appreach__name {
font-size: 16px;
line-height: 1.5em !important;
max-height: 3em;
overflow: hidden;
}
.appreach__info {
font-size: 12px !important;
}
.appreach__developper, .appreach__price {
margin-right: 0.5em;
}
.appreach__posted a {
margin-left: 0.5em;
}
.appreach__links {
float: left;
height: 40px;
margin-top: 8px;
white-space: nowrap;
}
.appreach__aslink img {
margin-right: 10px;
height: 40px;
width: 135px;
}
.appreach__gplink img {
height: 40px;
width: 134.5px;
}
.appreach__star {
position: relative;
font-size: 14px !important;
height: 1.5em;
width: 5em;
}
.appreach__star__base {
position: absolute;
color: #737373;
}
.appreach__star__evaluate {
position: absolute;
color: #ffc107;
overflow: hidden;
white-space: nowrap;
}
/*アプリーチ終了*/

/*サイドバーのタイトル色変更*/
.sidebar h3 {
background-color: #362b2a;
padding: 8px 15px;
margin: 16px 0;
border-radius: 2px;
color:#fff;
}
/*サイドバーのタイトル色変更*/




/*マーカーにターコイズカラーを追加*/
/* ターコイズアンダー*/
.turquoise-under {
　background:linear-gradient(transparent 80%, #4ECDC4 0%) ;
}
/* ターコイズマーカー*/
.turquoise-maker {
　background:linear-gradient(transparent 0%, #4ECDC4 0%) ;
}
/*マーカーにターコイズカラーを追加終了*/

/* マーカーの色*/
.marker { /*黄色マーカー*/
background-color: #EAB130;
}
.marker-red { /*赤色マーカー*/
background-color: #CD4E57;
}
.marker-blue { /*青色マーカー*/
background-color: #4ECDC4;
}
.marker-under {/*黄色アンダーライン*/
background: linear-gradient(transparent 75%, #EAB130 75%);
}
.marker-under-red { /*赤色アンダーライン*/
background: linear-gradient(transparent 75%, #CD4E57 75%);
}
.marker-under-blue {/*青色アンダーライン*/
background: linear-gradient(transparent 75%, #4ECDC4 75%);
}
/*マーカーの色終了 */


/*目次カスタマイズ*/
.toc {
display: block;
padding: 0px;
max-width: 1280px;
}
.toc-title {
position: relative;
padding: 10px 0;
background: #362B2A;
color: #fff;
font-weight: bold;
}
.toc .toc-content {
padding: 15px 20px;
background-color: #DFD6C750;
}
.toc li{
color:#4ecdc4;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #362b2a95;
margin-left: -10px;
}
.toc-list > li li ::before {
content: '';
width: 5px;
height: 5px;
display: inline-block;
left: -15px;
border-radius: 100%;
background: #362b2a50;
position: relative;
margin-bottom: 2px;
}
.article .toc-list > li li {
list-style: none;
}
/*目次カスタマイズ終了*/

/*マーカーにターコイズカラーを追加*/
/* ターコイズアンダー*/
.turquoise-under {
　background:linear-gradient(transparent 80%, #4ECDC4 0%) ;
}
/* ターコイズマーカー*/
.turquoise-maker {
　background:linear-gradient(transparent 0%, #4ECDC4 0%) ;
}
/*マーカーにターコイズカラーを追加終了*/

/* マーカーの色*/
.marker { /*黄色マーカー*/
background-color: #EAB130;
}
.marker-red { /*赤色マーカー*/
background-color: #CD4E57;
}
.marker-blue { /*青色マーカー*/
background-color: #4ECDC4;
}
.marker-under {/*黄色アンダーライン*/
background: linear-gradient(transparent 75%, #EAB130 75%);
}
.marker-under-red { /*赤色アンダーライン*/
background: linear-gradient(transparent 75%, #CD4E57 75%);
}
.marker-under-blue {/*青色アンダーライン*/
background: linear-gradient(transparent 75%, #4ECDC4 75%);
}
/*マーカーの色終了 */





/* カウンターをリセット（記事本文の最初で） */
.entry-content {
  counter-reset: section;
}



/*新たな見出しスタイルを設定*/
.article h2 {
padding: 0.7em 0.7em;/*文字の上下 左右の余白*/
color: #362b2a;/*文字色*/
background: #dfd6c750!important;/*背景色*/

border-bottom: solid 3px #59595922 !important;/*下線*/
margin-top: 100px;
}
.article h3 {
padding: 0.3em 0.7em;/*上下 左右の余白*/
color: #362b2a;/*文字色*/
background: transparent;/*背景透明に*/
border-top:solid 5px #4ECDC4 !important;/*上線*/
border-bottom: solid 5px #4ECDC4 !important; /*下線*/
font-size:22px;
margin-top:50px;
}
.article h4{
color:#362b2a;
position: relative;
padding-left: 1.5em;
font-size:20px;
margin-top:40px;
}
.article h4:before{
font-family: "Font Awesome 5 Free";
content: '\f45c\00a0';
color: #4ECDC4;
position: absolute;
font-size: 1em;
left: 0;

font-size:20px;
}
.article h5{
/	border-color:#4ECDC4; align-content */
border-bottom : solid 5px #4ECDC4;
color: #362b2a;
}
.article h6{
border-color:#4ECDC4; align-content
color: #362b2a;
}



/* H2 見出しに番号を付ける */
.entry-content h2 {
  position: relative;
  padding-left: 6em; /* 数字分の余白 */
  margin: 5em 0 5em;
  font-size: 1.5em;
}

/* H2 の前に大きな数字を表示 */
.entry-content h2::before {
  counter-increment: section; /* カウンターを進める */
  content: counter(section) ".";
  position: absolute;
  left: 10px;
  top: -10px;
  transform: translateY(-50%);
  font-size:6em; /* 数字を大きく */
  font-weight: bold;
  color: #4ecdc470; /* 数字の色 */
  line-height: 1;
  font-family: Harrington !important;
  font-style: oblique;
}