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

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

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

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

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



/************************************
****　全体のバランス
************************************/
.entry-content {/*本文下の空白を削除*/
padding-bottom: 0;
margin-bottom: 0;
}
@media (max-width: 1023px){
article > .entry-content, article > footer.article-footer {/*本文左右の空白*/
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.body .article {/*本文SNSフォロー下の空白*/
margin-bottom: 0;
}

/************************************
****　ヘッダーロゴ
************************************/
@media screen and (max-width: 1023px){
.container {
margin-top:-3px;
}
}
.logo-image {
padding:0;
margin-top:1em;
margin-bottom:1em;
max-height:250px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー　モバイル表示
************************************/
@media (max-width:1023px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}

/*グローバルメニューの高さを変更*/
#navi .navi-in > ul li{
	height: 40px;
	line-height: 40px;
}

/*グローバルメニュー 文字の大きさを変更*/
#navi .navi-in > .menu-header .item-label{
	font-weight: bold;
}

/************************************
****　モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:#D09A48;/*検索マーク色変更はこちら*/
margin-left:1em;
}
span.fas.fa-bars::before{
color:#D09A48;/*ハンバーガーメニュー色変更はこちら*/
margin-right:1em;
}
.navi-menu-caption.menu-caption,.search-menu-caption.menu-caption{
display:none;
}

/*×アイコンを移動*/
.menu-close-button {
 padding-top: 15px;
 padding-left: 25px;
 padding-bottom: 30px;
text-align: left;
font-size: 1.3em;
color:#D09A48;/*×印色変更はこちら*/
}

/*モバイルメニューを開いた時の記事色を変えない*/
#navi-menu-input:checked ~ #navi-menu-close,
#sidebar-menu-input:checked ~ #sidebar-menu-close,
#search-menu-input:checked ~ #search-menu-close,
#share-menu-input:checked ~ #share-menu-close,
#follow-menu-input:checked ~ #follow-menu-close {
opacity: 0;
}

/*モバイルメニュー背景色*/
.navi-menu-content {
background-color: #fffffff0;
}

.menu-drawer a {
font-size: 0.9em;
line-height: 1.6em;
border-bottom: solid 1px #e6e6e6;
}
.menu-drawer a:hover {
background-color:#E2C29B;　/*マウスオーバー時の背景色*/
}
.sub-menu li {                                      
margin-left:-14px;
font-size: 0.9em;
color: #e6e6e6;
}

/************************************
****　お問い合わせフォーム contact form7
************************************/
.haveto{
font-size:9px;
padding:2px 5px;
background:#A57800;/*必須 色の変更はこちら*/
color:#fff;
border-radius:20px;
margin-right:5px;
position:relative;
bottom:2px;
}
.wpcf7 input.wpcf7-submit{
display: block;
padding:10px;
width:300px;
background:#f7f7f7;
color:#545454;
font-size:17px;
border:none;
border-radius:50px;
margin:25px auto 0;
transition:0.3s;
}
.wpcf7 input.wpcf7-submit{
background:#E2C29B;/*送信 色の変更はこちら*/
color:#fff;
border-radius:50px;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
.wpcf7 p{
margin-bottom: 0em;
}

/************************************
** 固定ページのタイトルを中央寄せ
************************************/
.entry-title {
text-align: center;
}

/************************************
** 投稿ページのタイトルを中央寄せ
************************************/
.single .entry-title {
text-align: center;
}

/************************************
****　プロフィール欄
************************************/
.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;
border-radius: 10px;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
border-radius: 10px 10px 0 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url("https://tsukumanablog.com/wp-content/uploads/2025/07/texture_00206.jpg") center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
background-image: none;
padding: 0!important;
box-shadow:none;
}
.author-box figure.author-thumb img{
width: 40%;
max-width:180px;
margin-top:5em;
}
@media (min-width:1023px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:120px;
}}
@media (max-width:480px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:130px;
}}
.author-box .author-name {
margin: 0 0 1.5em 0;
}
.author-box .author-content .author-name a{
text-decoration: none;
font-size:1.2em;
color:#545454;
}
.nwa .author-box .author-description {
margin-bottom:1.5em
}
.author-box .author-content .author-description p{
font-size:14px;
color:#7b7b7b;
line-height:1.6em!important;
margin:1em;
}
#author_box-2 p{
margin:1em 2.5em;
}
div.author-follows{
padding-bottom:2em;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
color: #fff!important;
margin:3px;
transition: .5s;
}
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
div.author-follows a.follow-button.tiktok-button.tiktok-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
div.author-follows a.follow-button.twitch-button.twitch-follow-button-sq{background-color: #5C16C5!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
@media (max-width:1023px){
.nwa .author-box .author-thumb {
height:11em;
margin:0 0 7em 0;
}
.author-name{
font-size:16px!important;
}
.author-description{
line-height: 1.5 !important;
text-align:center;
margin:0 auto;
}
}
@media screen and (max-width: 1023px){/*スマホ画面でサイドバーを非表示*/
div.sidebar {
display: none;
}
}

body {
  overflow-x: hidden;
}

/************************************
****　SNSボタン
************************************/

/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/************************************
****　モバイル　プロフィール周りの色
************************************/

.widget-title{
	text-align:center;
	color:#7b7b7b;
}

div.footer-mobile{
	background-color:#FFF;
}

/* モバイルプロフィールの名前リンク色を変更 */
.footer-mobile .author-name a {
  color: #7b7b7b !important;  /* 読みやすい濃い色に変更 */
}

/************************/
/* 特定ページのアイキャッチを非表示 */
/************************/
.page-id-26 .eye-catch-wrap { /*アイキャッチ*/
display: none;
}

.blogcard-type .blogcard-label{
background-color:#A57800;
}

/* =========================
   しらたまナチュラルCSS 最終版
   ========================= */

/* ---- ① 全体配色・フォント ---- */
body {
  background: #fdfaf6; /* オフホワイト背景 */
  color: #4a3f35; /* 落ち着いたブラウン */
  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
}

/* 見出しフォント（丸ゴシック） */
h2, h3, h4 {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

/* ---- ② 本文見出し ---- */

/*H2見出し*/
main h2.wp-block-heading {
    color: #6d5353;/*文字色*/
    font-size: 20px;/*文字サイズ*/
    padding: 15px;/*文字回りの余白（上下左右）*/
    display: block;
    border: 1px solid #816930;/*囲み線（太さ 実線 色）*/
    position: relative;
}
main h2.wp-block-heading:after {
    content: '';
    background:#efece0;/*背景色*/
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    position: absolute;
    top: 5px;/*背景の上下位置ずらし*/
    left: 5px;/*背景の左右位置ずらし*/
    z-index: -1;
}


.article h2 {
    font-size: 24px;
    padding: 15px;
    background-color: transparent !important; /* 背景色を透明に */
}

/*H3見出し*/
main h3.wp-block-heading {
    color: #6d5353;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    padding: 15px 20px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
    border-left: 8px solid #816930;/*左線上側（太さ 実線 色）*/
}
main h3.wp-block-heading:before {
    position: absolute;
    content: '';
    left: -8px;
    bottom: 0;
    width: 8px;/*左線下側の太さ（幅）*/
    height: 50%;/*左線下側の高さ*/
    background-color: #cbb276;/*左線下側の色*/
}

/*H4見出し*/
main h4.wp-block-heading {
    color: #6d5353;
    font-size: 16px;
    padding: 9px 30px;
    display: block;
    position: relative; /* ←relativeに変更 */
}

main h4.wp-block-heading:before {
    content: "✦";
    font-weight: 900;
    position: absolute; /* ←マークだけabsolute */
    font-size: 30px;
    left: 0;
    top: 0;
    color: #cbb276;
}

/* ---- ③ 目次 ---- */
.toc {
  background: #fdfaf6;
  border: 1px solid #d8c9b5;
  border-radius: 8px;
  padding: 15px;
  margin: 20px auto;
  font-size: 14px;
  color: #5a4633;
  max-width: 90%;
}

.toc-title {
  font-weight: bold;
  color: #a68b6a;
  margin-bottom: 10px;
  text-align: center;
}

/* ---- ④ ブログカード ---- */
.blogcard {
  background: #fff;
  border: 1px solid #d8c9b5;
  border-radius: 8px;
  padding: 10px;
  box-shadow: none;
}

.blogcard a {
  text-decoration: none !important;
}

.blogcard-title {
  color: #5a4633;
  font-weight: bold;
}

.blogcard-content {
  color: #6f5e4d;
}

/* ブログカード全体のリンク下線を消す */
.blogcard-wrap,
.blogcard-wrap * {
  text-decoration: none !important;
}

/* 通常のカード */
.blogcard {
  transition: all 0.3s ease; /* アニメーションの滑らかさ */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* ほんのり影 */
}

/* ホバーしたときの浮き上がり効果 */
.blogcard:hover {
  transform: translateY(-5px); /* 少し上に移動 */
  box-shadow: 0 6px 16px rgba(0,0,0,0.15); /* 影を強調 */
}

/* ---- ⑥ ウィジェットのプロフィールリンク ---- */
.widget_author_box a {
  color: #5a4633 !important;
  text-decoration: underline;
}

.widget_author_box a:hover {
  color: #8b6f52 !important;
  text-decoration: none;
}

/* ---- ⑦ 本文内リンク（全体統一） ---- */
.entry-content a {
  color: #a68b6a;
  text-decoration: underline;
}

.entry-content a:hover {
  color: #8b6f52;
}

/* ---- ⑧ モバイル余白調整 ---- */
@media screen and (max-width: 768px) {
  .entry-content {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .toc {
    max-width: 100%;
    padding: 12px;
  }
}

/* モバイル専用メニュー */
.grid-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 10px auto;
  padding: 0 10px;
}

.grid-menu a {
  display: block;
  text-align: center;
  padding: 8px 0;
  background: #fff; /* PCメニューと同じ白背景 */
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.grid-menu a:hover {
  background: #f9f9f9;
  color: #8b6f52; /* PC版ホバー色に寄せる */
  border-color: #ccc;
}

/* PCでは非表示 */
@media screen and (min-width: 769px) {
  .grid-menu {
    display: none;
  }
}

/************************/
/* モバイルの右の余白消す */
/************************/
#container {
    overflow: hidden;
}

/************************/
/* ブログランキング */
/************************/
.blog-ranking-message {
    font-weight: bold;
    color: #875d5b;
	text-align: center;
    margin-bottom: 3px;
}

.blog-ranking-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
	column-gap: 6px;
    margin-top: 0.3em;
}

.blog-ranking-buttons2 {
    display: flex;
    align-items: center;
    justify-content: center;
	column-gap: 6px;
    margin-top: 0.5em;
	margin-bottom:3em;
}

/************************/
/* YouTube真ん中寄りに */
/************************/

.video-container {
  margin-left: auto;
  margin-right: auto;
}

figcaption {
    text-align: center;
}

/************************/
/* タグアーカイブ（タグページ）のアイキャッチ画像を非表示 */
/************************/
.archive.tag .eye-catch-wrap {
  display: none;
}

/************************/
/* 関連記事見出し */
/************************/

.related-entry-heading {
  font-size: 20px;
  padding: 0.5em;
  color: #6d5353;
  background: #efece0;
  border-left: solid 5px #816930;
}

.comment-title {
  font-size: 20px;
  padding: 0.5em;
  color: #6d5353;
  background: #efece0;
  border-left: solid 5px #816930;
}