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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.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 dashed #72c7e6;
  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;
}


.st-comment-content p {
  font-size: 12px;
  margin: 1em 0;
  line-height: 1.5em;
}
.comment-reply-link {
  color: #fff;
  border: none;
  border-radius: 20px;
  background: #72c7e6;
  padding: 1px 3px 1px 1px;
  transition: 0.5s;
}
.comment-reply-link:hover {
  color: #fff;
  background: #49add1;
  transition: 0.5s;
}
.commets-list .st-comment-body {
  margin-bottom: 0;
}

.commets-list .reply {
    text-align: left;
	padding: 15px 0px 10px 0px;
}

.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, #72c7e6 0%,#8ae2d7 100%);
    background: linear-gradient(to right, #72c7e6 0%,#8ae2d7 100%);
}


.cat-link { /* カテゴリー */
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 8px;
    font-size: 12px;
    background-color: #72c7e6;
    border-top-right-radius: 10px; /* 右上の角だけ丸く */
    border-bottom-left-radius: 10px; /* 左下の角だけ丸く */
    word-break: break-all;
}
.cat-link:hover { /* マウスホバー時 */
    opacity: 1;
    background: #49add1;
    transition: all .5s ease; /* ふわっと変化するアニメーション */
    color: #fff;
}
.tag-link { /* タグ */
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 8px;
    font-size: 12px;
    background-color: #72c7e6;
    border: none;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    word-break: break-all;
}
.tag-link:hover {
    background: #49add1;
    transition: all .5s ease;
    color: #fff;
}

.date-tags {
    line-height: .8;
    position: relative;
    color: #aaa; /* 文字色を薄くする */
    display: flex;
    flex-direction: row;  /* 左揃えにする */
}
.post-date {
    order: 1; /* 投稿日の表示順を1番目に */
}
.post-update {
    order: 2; /* 更新日の表示順を2番目に */
}
.post-date, .post-update {
    padding: 2px;
    display: inline;
    font-size: .8em; /* 少しだけ文字サイズを大きく */
}
.post-update .fa-history, .post-date .fa {
    display: none; /* Cocoon バージョン2以降のデフォルトアイコンを非表示に */
}
.post-date::before { /* 投稿日のアイコンの変更 */
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}
.post-update::before { /* 更新日のアイコンの変更 */
    font-family: FontAwesome;
    content: "\f021";
    padding-right: 3px;
}


.comment-author-label{
  display: none;
}

.commets-list{
  counter-reset: counter-comment;
}

.commets-list .st-comment-author{
  counter-increment: counter-comment;
}

.commets-list .st-comment-author::before{
  content: counter(counter-comment)".";
} 

.comment-form-email,.comment-form-url,.comment-notes{ display:none; }

.link_button2 {

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

.listsample li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 0px 0px !important;
}

.hisigata li{
	position:relative;
	padding-left:20px;
}
 
.hisigata li:after{
	content:'';
	display:block; 
	position:absolute; 
	background:#d1ac76;
	width:9px;
	height:9px; 
	top:8px; 
	left:5px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}

@media screen and (max-width: 834px) {
  main.main,
  div.sidebar {
    padding: 16px 8px 16px 8px;
  }
  .comment-reply-link {
  font-size:12px;
 }
}

table td {
       background: #fff;
}
table {
  border-collapse: collapse;
}
table th, table td {
  border: solid 1px black;
  /*実線 1px 黒*/
}

.article h2 {
 position: relative;
     padding:0.1em 0.1em 0.1em 1.4em;
background-color: #000;
     border-radius: 5px;
		color: white;
		margin: 0px 0px 5px;
}
.article h2::after {
     position: absolute;
     top: 50%;
     left:0.7em;
     transform:translateY(-50%);
     content: '';
     width: 5px;
     height:25px;
     background-color:#d1ac76;
}
.comment-area {
  display: flex;
  flex-direction: column-reverse;
}
/************************************
** ■メニュー／サイドバーの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; /*左側間隔調整*/
}

/*子コメントでも広告の表示欄を広げる*/
.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;
}
.icon8 {
 font-size:18px;
}
/************************************
**ヘッダーロゴ
************************************/

.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 screen and (max-width: 1023px) and (min-width: 835px){/*835px以上で非表示にすると空白ができるので埋める*/
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
	}}

@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:135px;
padding:2px 0 0 50px;
box-shadow:none;
	}}


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



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

}

.testb {
	width: 18px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.icon2 {
	width: 38px;
	}
.icon3 {
	font-size:11px;
	}
	.icon7 {
	font-size:20px;
	}
}

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