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

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

.entry-title {
    font-size: 31px;
    margin: 16px 0;
    line-height: 1.3;
	color:#a22041;
}

.eye-catch wrap{
float:right;
}

.eye-catch {
margin:-200px 0 0 auto;
}

.eye-catch img{
border-radius:120px;
width:120px;
height:120px;
}

.cat-label {
  font-size: 12px;
}

/* 日付 */
.post-date,
.post-update,
.post-author,
.amp-back,
.entry-category,
.date-tags {
  padding: 2px;
display: inline-block !important; /* 横並びにする */
	font-size: 15px;;
}


/* 本文リストマーク（山吹色） */
.article ul li {
  list-style:none;
  background: url(images/point01.png) no-repeat left 1px;
  margin:0 0 0 -15px;
  padding:0 0 10px 23px;
}

.article > ol,
.article > ul,
.article > dl{
  margin:30px 0;
}

.article > ol ol,
.article > ul ul,
.article > dl dl{
  margin:0;
}

/* 本文リストマーク（赤色） */
.warning {
  color: #000000;
  background-color: #FFFFFF;
}

.warning ul li {
  list-style:none;
  background: url(images/point_red07.png) no-repeat left 1px;
  margin:0 0 0 -24px;
  padding:0 0 10px 23px;
}


.entry-card-thumb{
border-radius:200px;
width:150px;
height:150px;
}

.related-list{
text-align:center;
font-weight:normal;
  width: 100%;
}

.related-entry-card-title {
  font-size: 15px;
  margin: 0 0 0.4em 0;
  line-height: 1.6;
  font-weight: normal;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
text-align:center;
  width: 150px;
}

.rect-vertical-card .related-list {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1%;
padding-left:10px;
}

.rect-vertical-card .related-entry-card {
  display: flex;
  flex-direction: column;
  width: 150px;
}

.rect-vertical-card .related-entry-card-wrap {
  padding: 13px;
}

.rect-vertical-card-4 .related-entry-card-wrap {
  width: 178px;
}

.rect-vertical-card .related-entry-card-thumb {
  float: none;
  width: 150px;
border-rudius:150px;
}

.rect-vertical-card .related-entry-card-thumb img {
  width: 100%;
border-radius:150px;
}

.related-entry-card .cat-label {
  font-size: 8px;
}

figure > img{
  border-radius: 150px;
}

.popular-entry-cards-thumb{
width:150px;
height:150px;
}

/*タグクラウドのデザイン*/
a.tag-cloud-link{
 font-size: 11px; /* 文字のサイズ */
 line-height: 1em;
 background: #ffd700; /* 背景色 */
 display: inline-block;
 white-space: nowrap;
 padding: 7px 6px 5px; /* 文字周りの余白 */
 margin-top: 4px; /* タグ同士の余白 */
 border-radius: 4px; /* 角を少し丸く */
 text-decoration: none;
 color: #ba6012!important;
}

a.tag-cloud-link:hover {
 background: #ba6012; /* マウスホバー時の背景色 */
 color: #FFFFFF!important; /* マウスホバー時の文字色*/
}


.siteguard_under01 {
	margin-bottom:-30px;
}


.entry-card-content{
  margin-left: 170px;
width:77%;
}


.entry-card-title {
font-size:26px;
}


/* 人気記事ウィジェットの通常状態 */
.widget_popular_entries .a-wrap {
  transition: all 0.3s ease; /* 動きをなめらかにする */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 通常時の軽い影 */
  border-radius: 8px;
color:#FFFFFF;
	
}


/* ホバー時に浮き上がるエフェクト */
.widget_popular_entries .a-wrap:hover {
  background-color: #82989A; /* ホバー時の背景色 */
  transform: translateY(-4px); /* 2px上に移動 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.18); /* 影を深くして立体感を出す */
color:#FFFFFF;
}

.toc a:hover {
  text-decoration: none;
}

.info-list-item-content-link:hover {
  text-decoration: none;
}


/************************************
** ●カテゴリーラベルのカスタマイズ
************************************/
.cat-link{ /*カテゴリーラベル*/
  text-decoration: none; /*テキスト初期化*/
  color: #fff; /*フォントカラー*/
  font-size: 15px; /*フォントサイズ*/
  background-color: #a22041; /*背景色*/
  display: inline-block; /*横並びで上下左右空白有り*/
  margin-right: 5px; /*内側右余白*/
  padding: 2px 6px 0px 6px; /*外側余白*/
  border-radius: 9px 3px; /*カテゴリ背景デザイン*/
  border: 0px; /*枠線無し*/
  word-break: break-all; /*テキストの途中で改行させない*/
}
.cat-link:hover{ /*カテゴリーラベル マウスホバー時*/
  transition: all 0.8s ease; /*アニメーション*/
  opacity: 0.6; /*不透明度*/
  color: #a22041; /*フォントカラー*/
  background-color: #f4b3c2; /*背景色*/
}

/************************************
** ●タグラベルのカスタマイズ
************************************/
.tag-link{ /*タグラベル*/
  text-decoration: none; /*テキスト初期化*/
  color: #fff; /*フォントカラー*/
  font-size: 15px; /*フォントサイズ*/
  background-color: #f4b3c2; /*背景色*/
  display: inline-block; /*横並びで上下左右空白有り*/
  margin-right: 5px; /*内側右余白*/
  padding: 2px 6px 0px 6px; /*外側余白*/
  border-radius: 9px 3px; /*カテゴリ背景デザイン*/
  border: 0px; /*枠線無し*/
  word-break: break-all; /*テキストの途中で改行させない*/
}
.tag-link:hover{ /*タグラベル マウスホバー時*/
  transition: all 0.8s ease; /*アニメーション*/
  opacity: 0.6; /*不透明度*/
  color: #a22041; /*フォントカラー*/
  background-color: #f5c4cf; /*背景色*/
}

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

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

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