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

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

 /* いいねボタン -------------------------------------------------*/
.wp_ulike_btn {
  background: #ffe5ec;
  color: #d81b60;
  border: 1px solid #f48fb1;
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: bold;
  transition: all 0.2s ease;
}
.wp_ulike_btn:hover {
  background: #f48fb1;
  color: white;
}
/* いいねボタンここまで -------------------------------------------*/

/* 過去ツイッターのテキスト取り込み表示 -----------------------------*/
.tweet-card {
  display: flex;
  align-items: flex-start;
  background: #f9f9f9;
  color: #000000;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  max-width: 600px;
  margin: 1em 0;
  font-family: "Helvetica Neue", sans-serif;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.tweet-content {
  flex: 1;
}
.tweet-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.85em;
  color: #444;
}
.twitter-icon {
  width: 36px;
  height: 36px;
  vertical-align: middle;
  opacity: 0.8;
}
.tweet-card p{
   margin: 0.1em 0
}
.tweet-card .name {
  font-weight: bold;
}
.tweet-card .text {
  margin: 1px 0 1px 0;
  line-height: 1.5;
}
.tweet-images {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.tweet-images img {
  width: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
}
/* ------------------------------------------------- */
/* エラーチェック用 --------------------------------- */
div.error_check{
  background-color:#FF0000;
  color:#FFFFFF;
  font-weight:bold;
  width: 100%;
}
/* ------------------------------------------------- */
/* ネタバレ欄 ----------------------------------------*/
.netabare{
	position: relative;
	width:100%;
	height: 200px;
	background-image: linear-gradient(-45deg,#ffff00 25%, #000000 25%, #000000 50%, #ffff00 50%, #ffff00 75%,#000000 75%, #000000);
        background-size: 70px 70px;
}

.netabare .netabaretext{
	height:120px;
	width: 80%;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color:rgba(255, 255, 255,0.95);
	font-size:25px;
	text-align:center;
}
/* -------------------------------------------------*/

/* トップページ投稿カード装飾--------------------------*/
.entry-card-wrap{
    border-color : #707070;
    border: solid 1px !important;  /* 枠線指定 */
    padding: 3px !important;      /* 余白指定 */
    border-collapse:  collapse; /* セルの線を重ねる */
}
.main:not(:has(.article)){
  border-style: none !important;
}
.main{
  padding-top: 3px !important;
}
.entry-card-thumb-image{
  height: 300px !important;
}
/* -------------------------------------------------*/


/* サイドバー調整------------------------------------*/
.sidebar{
  padding: 0px 1px 1px 1px;
}
.widget{
  padding: 1px 1px 3px 1px !important;
  margin-bottom: 8px !important;
}
.widget-sidebar-title{
  margin: 3px 1px 1px 3px !important;
  padding: 1px 3px 3px 1px !important;
  text-align: center;
}
.widget-sidebar a {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
/* -------------------------------------------------*/


/* 投稿テーブル装飾-----------------------------------*/
table thead th{
    border-color : #ffffff;
    background-color: #7db4e6;
}
table th,td {
    border: solid 1px !important;  /* 枠線指定 */
    padding: 3px !important;      /* 余白指定 */
}

.post .section table {
    border-collapse:  collapse; /* セルの線を重ねる */
}
/*------------------------------------------------*/

/* メールフォーム--------------------------------- */
.wpcf7-quiz-label {
  color: #ffffff;/*文字色*/
  background: #000000;
}
.wpcf7-form-control {
  border-color: #000000;
  border-width: 2px;
  background-color: #f0f0f0;
}
.wpcf7-date,.wpcf7-select{
  height: 51px;
  color:#000000;
}
.wpcf7-submit {
  background-color: #037428  !important; /* ボタンの背景色 */
  color: #ffffff !important; /* ボタンの文字色 */
}
.wpcf7-not-valid-tip{
  background-color: #ffff00;
  font-weight: bold;
}
.wpcf7-userdef-req{/* 勝手にユーザー定義 */
  color: red;
  font-weight: bold;
}
.wpcf7-userdef-small{/* 勝手にユーザー定義 */
  font-size: 80%;
}
/*-------------------------------------------------*/

/*h2～h6装飾----------------------------------------*/
.entry-content h2 {
/*  font-size: 2.5rem;*/
  padding: 0.4em 0.5em; /*文字の上下 左右の余白*/
  color: #ffffff;/*文字色*/
  background: #303030;
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  font-weight: 700;
}
.entry-content h3 {
  padding-left: 3px;
  margin-bottom: 5px;
  color: #ffffff;/*文字色*/
  background: #303030;
  border-bottom: solid 3px #4796de;
  border-left-width: 0px;
  font-size: 1.8rem;
  /* ダークモードでも変更しない */
  isolation: isolate;
}
.entry-content h4 {
  text-decoration:underline #050505;
}
.entry-content h5{
  font-size: 1.0rem;

}
/*-------------------------------------------------*/

/*トップページタイトル-------------------------------*/
.entry-title h2 {
  font-size: 1.0rem;
}
/*-------------------------------------------------*/


/*引用背景装飾---------------------------------------*/
blockquote{
	background-color: #707070;
  color: #fff;
}
/*--------------------------------------------------*/

/* 黒板風　2 ----------------------------------------*/
.kokuban-s2 {
 position: relative;
 margin: 2em 1em;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background: #006633; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 8px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
@media screen and (max-width:575px){
.kokuban-s2 {
 width: 90%; /* ボックス幅 */
	}
}
.kokuban-s2::before,
.kokuban-s2::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.kokuban-s2::before {
 width: 20px; 
 right: 10px;
 border: solid 3px #ffff00; /*チョーク（黄色）*/
 border-radius: 3px 2px 0 2px;
}
.kokuban-s2::after {
 width: 15px; 
 right: 45px;
 border: solid 3px #fff; /*チョーク（白） */
 border-radius: 8px 5px 2px 5px;
}
.title-t2 {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ffff6b; /* タイトル色 */
}
.kokuban-2 a{
 color: #ffffff !important;
}
/* ----------------------------------------------------*/

/* アクセスランキングの大きさの調整---------------------- */
.widget-entry-cards figure{
  width: 100px !important;
}
.popular-entry-card-thumb img{
  width : 100px !important;
  height : 140px !important;
}
.popular-entry-card-content{
  margin-left: 80px !important;
}
.popular-entry-card-pv{
  font-size: 1.1em;
}
/* ----------------------------------------------------*/


/* 関連記事の大きさの調整 -------------------------------*/
.widget-related-entry-cards figure{
  width: 100px !important;
}
.widget-related-entry-card-thumb img{
  width : 100px !important;
  height : 140px !important;
}
.widget-related-entry-card-content{
  margin-left: 80px !important;
}
/* ----------------------------------------------------*/

/* 次・前の記事への写真の大きさ調整 ----------------------*/
.pager-post-navi figure{
  width: 100px !important;
}
.prev-post-thumb img , .next-post-thumb img {
  width : 100px !important;
  height : 140px !important;
}
/* ----------------------------------------------------*/


/* 管理者パネルの背景色の調整----------------------------*/
div.admin-panel{
  background-color: #000000;
}
span.admin-pv-by{
  background-color: #000000 !important;
}
/* ----------------------------------------------------*/

/* メニューの高さの調整 ----------------------------------*/
.navi-in > ul > li > a {
  padding: 2px 15px;
  line-height: 1.2;
}
.caption-wrap{
  height: 30px !important;
}
.navi-in li{
  height: 30px !important;
}
/* ----------------------------------------------------*/

/*CSSの満足度の星★----------------------------------------------*/
.star-rating {
  position: relative !important;
  display: inline-block;
  width: 5em;
  height: 1em;
  font-size: 25px;
  font-family: Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
.star-rating-front {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden !important;;
  color: #ffcc33;
}
.star-rating-back {
  color: #ccc;
}
/*------------------------------------------------------*/

/*-----ブログカード -------------------------------------*/
/*枠・影の設定*/
a.blogcard-href {
padding: 0px;
min-height: 102px;
box-shadow: 0 2px 5px #f0f0f0;
transition: .3s;
}
/*オンマウス時*/
a.blogcard-href:hover {
box-shadow: 0 4px 20px #a5a5a5;
transform: translateY(-5px);
}
/*タイトルの表示位置*/
p.blog-card-title {
margin: 5px 5px 5px 5px;
}
/*アイキャッチの表示位置*/
.blogcard-img {
float: left;
}
/*記事抜粋を表示しない*/
p.blog-card-desc {
display: none;
}
/*記事アドレスを表示しない*/
p.blogcard-link {
display: none;
}
/* 【合わせて読みたい】表示 */
a.blogcard-href::before {
content: "合わせて読みたい";
position: absolute;
color: white;
font-size: 12px;
background: #b67070;
width: 120px;
height: 22px;
font-weight: bolder;
text-align: center;
bottom: 0;
right: 0;
}
/*-------------------------------------------------*/


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

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

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