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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* トップページ以外でヘッダー全体を非表示にする */
/* トップページ以外ではロゴもメニューも非表示 */
/*body:not(.home) .header,
body:not(.home) .navi {
  display: none !important;
}
*/




/* 1023ｐｘ以上で投稿ページでは通常ヘッダーロゴ（大きいやつ）を非表示 */
@media screen and (min-width: 1024px) {
  .single .site-logo-image {
    display: none !important;
  }
	/* 念のため、追従ロゴは表示しておく */
	.site-fixed-logo-image {
  display: block !important;
}
	/* 追従ロゴを中央に表示 */
.logo-header {
  text-align: center;
}

.site-fixed-logo-image {
  display: inline-block !important;
  margin: 0 auto;
}
}

/* 投稿ページのロゴを非表示にする
.single .logo {
  display: none !important;
} */

/*カテゴリーラベルを非表示*/
/* .cat-label {display:none} */

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	  .single #navi,
  .single .logo {
    display: none !important;
  }
}

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

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

/* === 景品表示法対応 === */
/* Cocoon設定メインカラム左上のPR表記 */
.pr-label-s {
  display: inline-block;
  position: absolute;
  top: 0px; /* メインカラム上端からの位置調整 */
  left: 0px; /* メインカラム左端からの位置調整 */
  margin: 0;
  padding: 6px 0 5px 0;
  width: 60px;
  text-align: center;
  color: #fff; /* 文字の色 */
  font-size: 12px;
  background: #26292b; /* ラベルの色 */
  border-radius: 3px 0 0 0;
  border: none;
  }
.pr-label-s:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 6px #333;
  border-right: solid 6px transparent;
}

/* トップページ以外でロゴとナビゲーションを非表示にする（余白も消える） */
body:not(.home):not(.front-page) .logo.logo-header.logo-image,
body:not(.home):not(.front-page) nav#navi {
  display: none !important;
}

/* カテゴリページのフォルダアイコン削除 */
.archive-title:before {
display: none;
}

/* フロントページでは非表示 */
body.home header#header .site-fixed-logo-image {
  display: none !important;
}

/* 目次のボーダー */
#toc.border-element {
  border-color: #a9a9a9 !important; /* ← お好きな色に */
}


/* カルーセルを画像のみにする */
/* 対象IDを正しく (#carousel-in) に */
  /* タイトル消す */
/* #carousel-in .carousel-entry-card-title { display:none; } 
#carousel-in .slick-dots { display:none !important; }
#carousel-in .carousel-in { background-color: transparent; } */
/* 画像を“中央に95%”で表示する：親ではなくimgに幅をかける */
/* #carousel-in .carousel-entry-card-thumb { width:auto; }
#carousel-in .carousel-entry-card-thumb img{
  display:block;
  width:95%;
  margin:0 auto; 
  border-radius:10px;
  box-shadow:0 2px 4px rgb(0 0 0 / 22%);
} */


/* 本文の色を変える */
.entry-content {
	color: #f8f8f8;
}


/* 見出しの共通スタイル */
#carousel-in .carousel-heading,
.recent-heading{
  display:block;
  color:#fff;
  font-size:1.1rem;
  line-height:1.2;
  margin:4px 0 8px;   /* 左は後で上書き */
}

/* 人気記事だけ右に少しズラす */
#carousel-in > .carousel-heading{ margin-left:16px !important; }

/* トップ画像：上下の余白ゼロ */
body.home h1.logo.logo-header.logo-image{
  padding:0 !important;
  margin:0 !important;        /* ← 下も0に */
}
body.home .logo-header a{
  display:block;
  line-height:0;              /* 画像下の微妙な隙間も消す */
}

/* 〜1023px（タブレット以下）は画像を画面端まで広げる */
@media (max-width: 1023px){
  body.home img.site-logo-image.header-site-logo-image{
    display:block;
    width:100vw !important;
    max-width:100vw !important;
    height:auto;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  /* 親の左右パディングで隙間が出る場合の保険 */
  body.home .logo-header,
  body.home #header .container{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* 稀に横スクロールが出る場合の保険（必要時のみ） */
  /* html, body{ overflow-x:hidden; } */
}

/* ホームの「新着記事」上のムダな余白をゼロに */
body.home #main.main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 新着カードのカテゴリラベルを丸く（8〜12pxあたりで調整） */
#list .cat-label{ 
  border-radius: 7px !important;
  padding: 2px 6px;
  border: 1px solid #808080 !important;
  color: #a9a9a9;
}
/* 「人気記事（カルーセル）のラベル」も丸く */
#carousel-in .cat-label{
	border-radius: 5px !important;
    border: 1px solid #808080 !important;
    color: #a9a9a9;
}

/* 新着カード本体の角を丸める（画像やオーバーレイも一緒に） */
#list a.entry-card-wrap,
#list a.entry-card-wrap.border-element,
#list .entry-card{
  border-radius: 12px;   /* 好みで 10〜14px */
  overflow: hidden;      /* これが肝：内側も角に沿って切れる */
}

/* 念のためサムネも親の角丸に合わせる */
#list .entry-card-thumb,
#list .entry-card-thumb img{
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

/* カルーセルの表示窓を角丸＆クリップ */
#carousel-in .slick-list{
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* カード（リンクラッパー）も同じ丸さで揃える */
#carousel-in a.carousel-entry-card-wrap.border-element,
#carousel-in .carousel-entry-card{
  border-radius: 12px !important;
  overflow: hidden !important;
/*   background: transparent; */
}

/* サムネ画像やオーバーレイも親の角丸に追従 */
#carousel-in .carousel-entry-card-thumb,
#carousel-in .carousel-entry-card-thumb img,
#carousel-in .card-thumb::before{
  border-radius: inherit !important;
  display: block;
  object-fit: cover;
}

/* ドットのための下余白を消す（必要なら） */
#carousel-in .slick-dotted.slick-slider{
  margin-bottom: 0 !important;
}

/* カテゴリーラベルを左下に */
.cat-label {
	top: auto;
	bottom: 1em;
}

/* カルーセル（人気記事）周りの上下余白をゼロ～最小化 */
 /* セクション外枠 */
/* body.home #carousel{ 
  margin: 0 !important;
  padding: 0 !important;
} */
/* セクション内枠 */
/* body.home #carousel-in{ 
  margin: 0 !important;
  padding: 0 !important;
} */
/* 見出しの余白（不要なら 0 に）*/
/* #carousel-in .carousel-heading{
  margin: 0 0 8px !important;  
} */
/* ドットがある場合の下余白（ドット非表示なら後述の行も使用） */
/* #carousel-in .slick-dotted.slick-slider{
  margin-bottom: 0 !important;
}
#carousel-in .slick-dots{
  margin: 0 !important;
}
 */
/* 使っていなければドット自体を消す（さらに詰まる） */
/* // #carousel-in .slick-dots{ display:none !important; } */

/* カルーセル上下のスペース削除 */
.slick-track {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*目次の現在位置のスタイル*/
.toc li .current {
/* color: #333; */
/* color: #208848; */
padding: 6px 6px 6px;
/* background-color: #f5f5f5;/ */
background-color: #9fe19a;
}