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

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

/* ロゴ画像の右にサイトタイトルを表示する 2025.1.16 */
.logo-header .site-name::after {
  content: '稲葉サーバーデザイン';
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: 32px;
}

/* 固定ページの投稿日、更新日を非表示にする 2025.2.27 */
.page .date-tags {
    display: none;
}

/* 特定ページのシェア・フォローボタン非表示 2025.1.16 */
.page-id-23 .sns-share,
.page-id-23 .sns-follow,
.page-id-2240 .sns-share,
.page-id-2240 .sns-follow,
.page-id-2350 .sns-share,
.page-id-2350 .sns-follow
{
  display: none;
}

/* コンテンツ下部のスタイル設定 2025.1.23 */
#content-bottom {
  /* background-color: #f6fffa; /* <h2>と同じ薄緑色 */ */
  padding-left: 1em;
  margin-left: 1em;
  margin-bottom: 0; /* フッターとの隙間をなくす */
  font-size: 0.8em;
}

/* ウィジェットのフッター左中右、モバイルフッターのスタイル設定 2025.2.17 */
/*   文字サイズを少し小さく(80%) */
.widget-footer-mobile,
.widget-footer-left,
.widget-footer-center,
.widget-footer-right {
  font-size: 0.8em;
}

/*   リンクで下線が表示されないようにする */
.widget-footer-mobile a,
.widget-footer-left a,
.widget-footer-center a,
.widget-footer-right a {
  text-decoration:none;
}

/*   リンクのマウスオーバーで背景色を薄い色にする */
.widget-footer-left a:hover,
.widget-footer-center a:hover,
.widget-footer-right a:hover {
  background-color: rgba(214, 232, 232, 0.3);
}

/*   リストのインデントをなくす */
.widget-footer-mobile ul,
.widget-footer-left ul,
.widget-footer-center ul,
.widget-footer-right ul {
  padding-left:0;
}

/*   リストの頭のマークをなくす */
.widget-footer-mobile li,
.widget-footer-left li,
.widget-footer-center li,
.widget-footer-right li {
   list-style:none;
}

/* フッターメニューのマウスオーバー時の背景色を白ではなく
 * skin-mixgreen のヘッダーグローバルメニューと同じ薄い白とする */
.navi-footer-in a:hover {
  background-color: rgba(214, 232, 232, 0.3);
}

/* プロフィールページではコンテンツ下部を表示しない 2025.1.23 */
.page-id-315 .content-bottom {
  display: none;
}

/* お問い合わせフォーム、必須フィールドのラベルスタイル */
.wpcf7-form .required {
  background-color: #ff0000; /* 赤 */
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 10px;
  font-size: 12px;
}

/* お問い合わせフォーム、送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
  background-color: #298c60; /* 濃い緑 */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: none;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #006400; /* さらに濃い緑 */
}

/* ウィジェットの「よく読まれている記事」 */
.widget-ga4-ranking a {
  color: var(--cocoon-text-color);
}

.widget-ga4-ranking a:link {
  text-decoration:none;
}

.widget-ga4-ranking a:hover {
  background-color: #e4f5ec;
}

/* タグクラウド */
.st-tag-cloud a:link {
  text-decoration:none;
}

.st-tag-cloud a:hover {
  text-decoration: underline;
  background-color: #e4f5ec;
}

/************************************
** SNS ボタンをまとめて丸くする 2025.2.28
** https://zenn.dev/k202309/articles/5b15c6f9713c0c
************************************/

/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
    justify-content: flex-end; /*右に寄せる*/
    flex-wrap: wrap; /*折り返す*/
}

.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons {
    justify-content: center; /*中央に寄せる*/
    flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
    width: 40px; /*横幅*/
    height: 40px; /*高さ*/
    margin-right: 4px; /*右側の余白*/
    margin-left: 4px; /*左側の余白*/
    border-radius: 50%; /*丸み*/
}

/*プロフィールウィジェットのリンク*/
.sns-follow.sf-profile .sns-buttons a {
    border-radius: 50%; /*丸み*/
}

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

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
    font-size: 24px; /*アイコンの大きさ*/
}

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

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

/*シェア数の表示が必要ないシェア・フォローボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty,
.sns-share.ss-bottom .sns-buttons a .share-count:empty,
.sns-follow.sf-bottom .sns-buttons a .follow-count:empty,
.sns-follow.sf-widget .sns-buttons a .follow-count:empty {
    padding: 0; /*内側の余白*/
    border: 0; /*線*/
}

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

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

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