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

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

/*スライドインメニューを右から出す*/
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
}

.header-container, footer {
	border-radius:var(--cocoon-basic-border-radius);
}

.copyright {
	margin-right: 1.5rem
}

.admin-pv {
	padding: 1.0rem !important;
	border-top: 1px solid #EEE;
}

.ect-vertical-card .entry-card-wrap .entry-card-content {
	margin-top: 0.6rem;
}

.article h2 {
	position: relative;
	padding: 1.5rem 0;
	background:none !important
}

.article h2 {
	padding: 1.5rem 0;
}


.article h2:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	content: '';
	background-image: -webkit-repeating-linear-gradient(135deg, #666, #666 1px, transparent 2px, transparent 5px);
	background-image: repeating-linear-gradient(-45deg, #666, #666 1px, transparent 2px, transparent 5px);
	background-size: 7px 7px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.article h3 {
	position: relative;
	padding: 1rem 0;
	border:none;
	border-top: 4px solid #e8eff0;
	border-bottom: 4px solid #e8eff0;
}

.article h3:after {
	position: absolute;
	top: -4px;
	right: 0;
	width: 40%;
	height: 4px;
	content: '';
	background: #b7ccd1;
}

.article h3:before {
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 40%;
	height: 4px;
	content: '';
	background: #b7ccd1;
}

.article table td, .article table th{
	border-color: #666;
}

.cat-link {
	background:#0096a4;
}

/************************************
** ブログ記事上に表示するアフィリエイトの注意文
************************************/
.affiliate-info {
	text-align: center;
	font-size: 0.8rem;	
}
/************************************
** 目次
************************************/

.toc {
	border: none;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(226, 240, 240, 1));
}

.toc-title{
	background: #FFF;
}

/* サイドバーの目次のみデザインを変更する */
#sidebar .toc{
	padding: 10px;  /* 周囲の余白を変える */
}

/************************************
** ボトムシェアボタンのみ丸くする
************************************/

/*ボトムシェアボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*ボトムシェアボタンのリンク*/
.sns-share.ss-bottom .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*ボトムシェアボタンのアイコン*/
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*ボトムシェアボタンのキャプション*/
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*ボトムシェアボタンのシェア数*/
.sns-share.ss-bottom .sns-buttons a .share-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないボトムシェアボタン*/
.sns-share.ss-bottom .sns-buttons a .share-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}

/* プロフィールウィジェットのSNSアイコンの角を丸くする */
.author-box .sns-follow-buttons a.follow-button {
    font-size: 1.2em;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.bc-brand-color-white a {
	border: 2px solid var(--cocoon-sns-color);
}

.e-card-info {justify-content: flex-start;}

.date-tags {text-align: left;}

.cat-label {
    top: 0;
	left: 0;
	border: none;
}

.read-time {
	padding: 0.5em;
}

.widget-sidebar.widget_author_box .author-description p{
	font-size: 0.8rem;
	line-height: 1.5rem;
}

.widget_author_box .author-description p{
	line-height: 2.0rem;
}

/* 負債のウィジェット */

.liabilities-box {
	border: solid 1px #CCC;
	border-radius: 5px;
	padding: 1.0em 1.5em;
	text-align: right;
}

.liabilities-box h2 {
	position: relative;
	text-align: center;
	background: none;
	margin: 0;
	margin-bottom: 2rem;
	padding: 0 0 0.5rem 0;
}

.liabilities-box h2:after {
	background:none !important;
}
.liabilities-box h2:before {
	position: absolute;
	bottom: -10px;
	left: calc(50% - 30px);
	width: 4.0rem;
	height: 3px;
	content: '';
	border-radius: 3px;
	background: #b7ccd1;
}

.liabilities-box p {
	padding: 0.25em 0;
}

.liabilities-box p.liabilities-title span{
	display: inline-block;
	width: 50%;
}

.liabilities-box p.liabilities-title span.headtitle {
	display: inline;
	font-size: 0.8rem;
	padding: 0.25rem 0.8rem;
	border-radius: 5px;
	background: #e8eff0;
}

.liabilities-box p.balance {
	margin-top: 0.5rem;
	border-top: 1px solid #CCC;	
}

.liabilities-box p.liabiltiesdata {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: #888;
}

/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 640px;
  margin: 2em auto;
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
  display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -20px;
  left: 0;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "クリックして読む";
  background: #66c2c3; /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 200px;
  border-radius: 20px;
  font-size: 0.8rem;
  padding: 6px 0 !important;
  margin-top: 1.0rem;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: 35px;
    margin:0;
  }
  .blogcard-content:after {
    content: "タップして読む";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
  }
}

/************************************
** プロフィール
************************************/
#sidebar.nwa .author-box {
max-width:none;
padding: 0;
margin-bottom:0;
}

aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
	padding: 0!important;
}

.widget-sidebar.widget_author_box .author-description p {
	padding: 1.0rem 2.0rem ;
}
#sidebar.nwa .author-box .author-thumb {
	width: 100%;
	height:9rem;
	margin:0 0 3em 0;
}

#sidebar .author-box figure.author-thumb{
	text-align: center;
	background: url('https://flyaway.site/wp-content/uploads/2025/01/prof-bg.webp') center no-repeat;
	background-size: cover;
	position: relative;
	z-index: 0;
}

#sidebar .author-box figure.author-thumb img{
	width: 40%;
	margin-top: 60px;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.logo-menu-button img {
		max-height: 30px;
		}
}