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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.commets-list .children {
  border-left: 2px solid #ccc;
  margin: 0;
}
.commets-list .avatar {
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}
.st-comment-content {
  background: #f2f2f2;
  padding: 2px 10px;
  margin: 0px 0 6px 0;
  border-radius: 10px;
  position: relative;
}
.st-comment-content p {
  margin: 1em 0;
  line-height: 1.5em;
}

.sidebar h3 {
	position: relative;
font-size: 18pt;
background: #ffffff;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.2em 0.5em 0.4em 2em;
border-bottom: 3px solid #00acff;
}
.sidebar h3:before {
	position: absolute;
top: -8px;
left: 7px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
height: 12px;
width: 12px;
background: #00acff;
content: "";
}
.sidebar h3:after {
position: absolute;
top: 8px;
left: 2px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
height: 8px;
width: 8px;
background: #a4d4eb;
content: "";
}
.comment-author-label{
  display: none;
}
.navi-in > ul {
	justify-content: flex-start;
}
.st-comment-author .fn {
  font-weight: bold;
  color: rgb(0, 153, 0);
}

.comment-title:before {
  font-family: FontAwesome;
  content: '\f27b';
  color: #fff;
  margin-right: 4px;
}
.commets-list {
  padding: 20px 20px 0 20px;
}
.commets-list > li {
  border-top: 2px solid #28b893;
  margin: 30px 0;
  padding-top: 20px;
}
.commets-list > li:first-child {
  border: none;
  margin-top: 0;
  padding-top: 0;
}
.commets-list .children {
  border-left: 2px solid #ccc;
  margin: 0;
}
.commets-list .avatar {
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}


.commets-list .st-comment-body {
  margin-bottom: 0;
}

.comment-form-email, .comment-form-url, .comment-notes {
  display: none;
}
.commets-list {
padding-left: 25px;
list-style: decimal;
}

.commets-list .reply {
    text-align: left;
}

.article h3{

  border: solid 3px #057ce3;/*線色*/
  padding: 0.2em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}
table td {
       background: #fff;
}
table th, table td {
  border: solid 1px black;
  /*実線 1px 黒*/
}
.post-title {
    font-size: 26px;
    margin: 16px 0;
    line-height: 1.3;
    padding: 0 0 10px 0;
    position: relative;
}
.post-title::after { /* グラーデーションラインをひく擬似要素 */
    content:"";
    display: block;
    position: absolute;
    bottom: -10px;
    height: 4px;
    width: 100%;
    background: -webkit-linear-gradient(left, #ed1c24 0%,#d0beed 100%);
    background: linear-gradient(to right, #ed1c24 0%,#d0beed 100%);
}
.link_button2 {

font-size: 15px;
float: right;
font-weight: bold;/*太字に*/
  text-decoration: none;/*下線消す*/
  background: #47cfd1;/*背景を水色に*/
  color:white;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}}
.link_button2:hover {
  background: silver;/*背景色をシルバーに*/
  text-decoration: none;/*下線を消す*/
}

.article h2 {
	position: relative;
font-size: 18pt;
background: #ffffff;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.2em 0.5em 0.4em 2em;
border-bottom: 3px solid #D82546;
}
.article h2:before {
	position: absolute;
top: -8px;
left: 7px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
height: 12px;
width: 12px;
background: #D82546;
content: "";
}
.article h2:after {
position: absolute;
top: 8px;
left: 2px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
height: 8px;
width: 8px;
background: #1625f5;
content: "";
}

span.post-comment-count > * {
    font-size: 16px;
    padding: 2px;
	color: #3db8ba;
}
.comment-reply-link {
  color: #fff;
  border: none;
  border-radius: 20px;
  background: #47cfd1;
  padding: 1px 3px 1px 1px;
  transition: 0.5s;
}
.comment-reply-link:hover {
  color: #fff;
  background: #ed1c24;
  transition: 0.5s;
}
@media screen and (max-width: 834px) {
  main.main,
  div.sidebar {
    padding: 16px 8px 16px 8px;
  }
  .comment-reply-link {
  font-size:10px;
 }
}

/*子コメントでも広告の表示欄を広げる*/
.depth-2 + .ad-area {
  margin-left: -22px;
}
.depth-3 + .ad-area {
  margin-left: -44px;
}
.depth-4 + .ad-area {
  margin-left: -66px;
}
.depth-5 + .ad-area {
  margin-left: -88px;
}
.depth-6 + .ad-area {
  margin-left: -110px;
}
.depth-7 + .ad-area {
  margin-left: -132px;
}
.depth-8 + .ad-area {
  margin-left: -154px;
}
.depth-9 + .ad-area {
  margin-left: -176px;
}
.depth-10 + .ad-area {
  margin-left: -198px;
}
.widget-entry-cards.card-large-image .widget-entry-card-pv {
  opacity: 1;
}



/************************************
** ■メニュー／サイドバーのCLOSEボタンのカスタマイズ（常時表示対応）
************************************/
.menu-close-button { /*サイドバー*/
  overflow: visible!important; /*ボックス範囲内指定*/
  position: sticky!important; /*スクロール追従*/
  z-index: 99999!important; /*最前面に指定*/
  top: 20px; /*表示位置*/
  background: rgba(128, 128, 128,0.8); /*背景色*/
  width: 91%; /*横幅*/
  transform: scale(1.2); /*拡大表示*/
}
.menu-content .menu-drawer { /*メニュー*/
  padding:30px 1em 30px; /*上マージン調整*/
}
.menu-content .fas.fa-times { /*×アイコン*/
  padding-left: 30px; /*左側間隔調整*/
}
/************************************
**ヘッダーロゴ
************************************/

.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:160px;
}
.logo {
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}




/************************************
**ヘッダー　モバイル表示
************************************/

@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{/*835px以上でモバイルヘッダーを非表示*/
display:none;
}
}

@media screen and (min-width: 980px) {
img.site-logo-image{/*モバイル表示ロゴ*/
max-height:175px;
padding:2px 0 0 50px;
box-shadow:none;
	}}


/*記事タイトルを小さくする*/
.entry h2 a{
 line-height: 1.3;
}



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

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

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