@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 {
  background-color: #f2f2f2 !important;
}

/* パンくずリストを1行表示にする */
.breadcrumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* タイトルの左右余白を0に */
.entry-title,
.article-title,
.post-title,
.single-post .entry-title,
.single-post .article-title,
.single-post .post-title,
.post-type-post .entry-title,
.post-type-post .article-title,
.post-type-post .post-title {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important; /* 幅を最大化 */
    box-sizing: border-box !important;
}

/* タイトルを含むヘッダーエリアの余白も調整 */
.entry-header,
.article-header,
.single-post .entry-header,
.single-post .article-header,
.post-type-post .entry-header,
.post-type-post .article-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}



/* 固定ページで日付を完全に非表示 */
.page .post-date,
.page .post-update,
.page .entry-date,
.page .date-tags,
.page .entry-meta,
.page .post-meta {
    display: none !important;
    visibility: hidden !important;
}

/* 投稿ページで日付を1行左揃え表示 - Cocoon特有のクラスに対応 */
.single-post .date-tags,
.post-type-post .date-tags,
.single-post .entry-meta,
.post-type-post .entry-meta,
.single-post .post-meta,
.post-type-post .post-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin: 0 0 1.5rem 0 !important; /* 日付エリアの下に1.5remの余白を追加 */
    padding: 0 !important;
    white-space: nowrap !important;
}

/* 投稿日・更新日の個別要素を1行表示 */
.single-post .post-date,
.single-post .post-update,
.single-post .entry-date,
.post-type-post .post-date,
.post-type-post .post-update,
.post-type-post .entry-date {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    float: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* 投稿日と更新日の間に区切り文字を追加 */
.single-post .post-date::after,
.post-type-post .post-date::after {
    content: " | " !important;
    margin: 0 0.5rem !important;
    color: #999 !important;
    display: inline !important;
}

/* 更新日がない場合や最後の要素の区切り文字を調整 */
.single-post .post-date:only-child::after,
.post-type-post .post-date:only-child::after {
    display: none !important;
}

/* 最後の要素や更新日の後ろには区切り文字を表示しない */
.single-post .post-update::after,
.single-post .post-date:last-child::after,
.post-type-post .post-update::after,
.post-type-post .post-date:last-child::after {
    display: none !important;
}

/* 日付のアイコン部分も左揃え */
.single-post .fa-clock,
.single-post .fa-history,
.post-type-post .fa-clock,
.post-type-post .fa-history {
    margin-right: 0.25rem !important;
}

/* スマホでの余白調整（768px以下） */
@media (max-width: 768px) {
    .container,
    .main,
    .content,
    .wrap,
    .main-wrap,
    .article,
    .post {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .entry-content,
    .post-content,
    .article-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        width: 100% !important;
    }

    /* スマホでも日付を1行表示、下に余白追加 */
    .single-post .date-tags,
    .post-type-post .date-tags {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 0.5rem !important;
        margin: 0 0 0.5rem 0 !important; /* 日付エリアの下に0.5remの余白 */
        padding: 0 !important;
        white-space: nowrap !important;
    }
}

/* 極小画面での調整（480px以下） */
@media (max-width: 480px) {
    .container,
    .main,
    .content,
    .wrap,
    .main-wrap,
    .article,
    .post {
        padding-left: 2px !important;
        padding-right: 2px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .entry-content,
    .post-content,
    .article-content {
        padding-left: 2px !important;
        padding-right: 2px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* 極小画面でも日付を1行表示、下に余白追加 */
    .single-post .date-tags,
    .post-type-post .date-tags {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.3rem !important;
        margin: 0 0 0.3rem 0 !important; /* 極小画面では余白を0.3remに縮小 */
        padding: 0 !important;
        white-space: nowrap !important;
    }

    .single-post .post-date::after,
    .post-type-post .post-date::after {
        content: " | " !important;
        margin: 0 0.3rem !important;
    }
}



/* 中央カラム（本文＋サイドバー部分）を白に */
#container, .body-in {
  background-color: #ffffff !important;
  padding: 20px;
  border-radius: 8px;
}




.page-id-4398 header ,
.page-id-3 header{
  display: none;
}

.page-id-4398 .navi,
.page-id-3 .navi,
.page-id-4398 .breadcrumb ,
.page-id-3 .breadcrumb{
    display: none;
}

.page-id-4398 footer ,
.page-id-3 footer{
  display: none;
}

/* 本文の行間（行の間隔）を広く  */
.entry-content p {
  line-height: 3; /* PCの行間 */
}
@media (max-width: 768px) { /* スマホ用の調整 */
  .entry-content p {
    line-height: 2; /* スマホでは少し詰める */
  }
}

/*【01_サイドバー】 */
/* サイドバー全体の背景色と文字色 */
.sidebar {
    background-color: #fff; /* 落ち着いた明るいグレー */
    color: #000000; /* テキストを黒に設定 */
    padding: 15px; /* サイドバー内の余白 */
    border-radius: 10px; /* 角を丸くする */
}
/* サイドバー見出しをオレンジ色グラデーションに変更（Cocoon対応版） */
.sidebar h3.widget-title,
.sidebar .widgettitle {
    background: linear-gradient(30deg, #FCA235 50%, #FFDD99 95%) !important; 
    color: #fff !important; 
    font-size: 16px !important; 
    padding: 0.5em !important; 
    margin: 1.5em 0 !important; 
    text-align: left !important;
    border-radius: 5px !important;
}
/* サイドバーの記事から日付を非表示 */
.sidebar .post-date {
    display: none !important;
}

/*【0_見出し】 */
/* デザインリセット */
/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* H2 */
.entry-content h2 {
  border: none;
  background: #0095d9;
  padding: 0.6em;
  position: relative;
  color: white;
  left: 5;
	border-radius: 0.3em;/*角の丸み*/
}
/* H3 */
.entry-content h3 {
  display: block;
  border-top: 2px solid black;  /* 上線 */
  border-bottom: 2px solid black; /* 下線 */
  padding: 10px 0; /* 文字と線の間隔を調整 */
	font-size: 18px;
	padding-left: 5px;
}

/*【00_トップページ】 */
/* グリッド全体のスタイル */
.post-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラム */
    gap: 10px; /* 項目間の余白 */
    margin-bottom: 20px; /* セクション間の余白 */
}

/* 各グリッドアイテムのスタイル */
.post-grid-item {
    text-align: left; /* 左寄せ */
}
/* タイトルリンクのスタイル */
.post-link {
    font-size: 12px; /* 小さな文字サイズ */
    color: #0073aa; /* リンクカラー */
    text-decoration: none;
}

.post-link:hover {
    text-decoration: underline;
}

/*【02_アフィリエイト】*/
th, a img {
    border: none !important; /* テーブルヘッダー、リンク内の画像の枠線を消す */
    box-shadow: none !important; /* 影も消す */
}
a {
    border: none !important; /* リンク全体の枠線を消す */
}
.affiliate-box {
    background-color: #FFFFFF !important; /* 背景を白に設定 */
}

/* 全ての楽天アフィリエイト広告の背景色を白に設定 */
iframe[src*="rakuten.co.jp"],
div[data-type="rakuten"],
.affiliate-box {
    background-color: #FFFFFF !important; /* 背景色を強制的に白にする */
    border: none !important; /* 不要な枠線も削除 */
    box-shadow: none !important; /* ボックスの影も削除 */
}
/* ボタンコンテナ */
.affiliate-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    height: 100%;            
    margin: 0;
    padding: 0;
    text-align: center;
}

/* 左カラムの親要素（確実に高さを指定） */
.left-column {
    display: flex;
    justify-content: center;    /* 左右中央揃え */
    align-items: center;        /* 上下中央揃え */
    height: 100%;               /* 重要:親要素の高さを明示 */
    margin: 0;
    padding: 0;
}

/* 左カラム内の画像を中央揃えにするための修正 */
.left-column img {
    display: block;             /* Flexbox内の中央揃えを確実に */
    max-width: 100%;            /* 横幅を親要素以内に調整 */
    height: auto;               /* 高さを自動調整 */
    margin: 0 auto;             /* 左右中央揃え（念のため）*/
}

/* 右側のカラム（ボタンを中央揃え） */
.right-column {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    height: 100%;            
    margin: 0;               
    padding: 0;              
}

/* 共通ボタンスタイル */
.affiliate-button {
    display: inline-block;
    padding: 10px 20px;          
    text-align: center;
    font-size: 14px;             
    font-weight: bold;           
    text-decoration: none;       
    border-radius: 5px;          
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 200px;                
    margin: 0;                   
}


/* Amazonボタン（黄色） */
.amazon-button {
    background-color: #FFCC00; /* 黄色 */
    color: #000000; /* 黒文字 */
    border: 1px solid #FFCC00; /* ボーダー */
}
.amazon-button:hover {
    background-color: #E6B800; /* ホバー時の濃い黄色 */
    border-color: #E6B800;
}
/* 楽天ボタン（オレンジ） */
.rakuten-button {
    background-color: #FF6600; /* オレンジ */
    color: #FFFFFF; /* 白文字 */
    border: 1px solid #FF6600; /* ボーダー */
}
.rakuten-button:hover {
    background-color: #E65C00; /* ホバー時の濃いオレンジ */
    border-color: #E65C00;
}
/* 楽天アフィリエイトリンクのテキストと画像の重なりを修正 */
table[border="0"] {
table[border="0"] {
    width: 100%;
    table-layout: auto;
}
table[border="0"] td {
    vertical-align: top;
    text-align: center; /* ←中央揃えに修正（重要） */
    padding: 5px !important;
}
table[border="0"] td img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
table[border="0"] td p {
    margin-bottom: 10px;
}



/*【04_モバイル設定】*/
@media screen and (max-width: 599px) {
    .page .box-menus .box-menu {
        width: calc(100% / 7); /* メニューの数 */
    }
    .page .box-menu-icon {
        font-size: 50px;
        margin: 0px 0; /* 上下に余白を追加して位置を下げる */
        padding-bottom: 0px; /* さらに余白を調整するためにパディングも設定 */
        height: auto; /* 高さを自動調整に */
    }
    .page .box-menu-label {
        font-size: 14px; /* 文字サイズ */
    }
    .page .box-menu {
        min-height: 10px; /* 高さを調整して下の余白を増やす */
    }
    .page .box-menu-description {
        font-size: 14px;
        color: gray;
    }
}
.page .entry-card-wrap {
    margin-bottom: -35px;  /* 記事間の間隔をさらに狭くする */
}
.page .entry-card {
    padding: 0px;  /* 記事全体の余白をゼロに */
}
.page .front-page-thumbnail,
.page .entry-thumbnail {
    margin-bottom: -15px; /* トップ画面のサムネイル間の間隔を小さくする */
    margin-top: -15px;   /* トップ画面のサムネイルの上間隔を小さくする */
}
.page .column-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0px; /* カラム間のスペースを狭くする */
}
/* モバイル版専用スタイル */
	

	
@media screen and (max-width: 768px) {
  .entry-content h2 {
    left: -10px; /* テキスト全体を少し右に移動 */
  }
  h2:before {
    left: 5px; /* 円の位置を少し右に */
  }
  .entry-content h3 {
    text-indent: -5px; /* テキストの開始位置を右に調整 */
  }
}

/*【05_最新の記事】*/
/* 最新記事全体の中央揃え */
.wp-block-latest-posts {
    text-align: center; /* 全体のテキストを中央揃えに */
}
/* 最新記事リスト */
.wp-block-latest-posts__list {
    text-align: center; /* リスト全体を中央揃えに */
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0; /* リスト全体の余白をリセット */
    margin: 0 auto; /* リスト全体を中央に配置 */
}
/* リスト項目 */
.wp-block-latest-posts__list li {
    display: inline-block; /* 各リストアイテムをインラインブロックに */
    margin-bottom: 20px; /* サムネイルとタイトル間を調整 */
    text-align: center; /* アイテム内の中央揃え */
}
/* サムネイルのスタイル */
.wp-block-latest-posts__list img {
    display: block; /* サムネイルをブロック要素に */
    margin: 0 auto 5px; /* サムネイルとタイトルの間を縮める */
    max-width: 100%; /* サムネイルの幅をコンテナに収める */
    height: auto; /* 高さを自動調整 */
}
/* リンク（タイトル）のスタイル */
.wp-block-latest-posts__list a {
    display: block; /* リンクをブロック要素に */
    text-align: center; /* テキストを中央揃えに */
    color: auto; /* テキストカラー */
    font-weight: bold; /* テキストを太字に */
}
/* ホバー時のリンクスタイル */
.wp-block-latest-posts__list a:hover {
    color: #FF6600; /* ホバー時のテキストカラー */
}


/*ヘッダーロゴ非表示*/
.page .logo-header {
  display: none;
}
.front-top-page .main {
  padding-top: -10;
}

.page .post-thumbnail {
    display: none;
}

.logo-text {
	padding: 0px 0 0;
}
.tagline {
	margin: 0 0 .8em
}
.tagline{
font-weight: bold;
font-size: 10pt;
}
.page .box-menu {
    width: calc(100% / 3); /* 固定ページ内のメニュー幅 */
    text-align: center;   /* 中央揃え */
}

.page .box-menu {
    width: calc(100% / 3); /* 固定ページ内のメニュー幅 */
    text-align: center;   /* 中央揃え */
}

.page .box-menu-icon {
    width: 80px;          /* アイコンの幅を指定 */
    height: 80px;         /* 高さを指定 */
    display: block;       /* ブロック要素として表示 */
    margin: 0 auto;       /* 水平中央揃え */
}

.page .box-menu-label {
    font-size: 20px;      /* ラベルのフォントサイズ */
    color: #000000;       /* 黒色に設定 */
    margin-top: 10px;     /* 上の余白 */
}

.page .box-menu-description {
    font-size: 16px;      /* 説明文のフォントサイズ */
    color: gray;          /* グレーに設定 */
    margin-top: 5px;      /* 上の余白 */
}



.related-posts {
    margin-top: 20px;
    padding: 10px;
    border-top: 2px solid #ccc;
}

/* 関連記事見出しをシンプルなゴシック体に変更 */
.related-posts h3 {
    font-family: 'Arial', 'Helvetica', '游ゴシック', 'Yu Gothic', sans-serif; /* ゴシック系のフォントを指定 */
    font-size: 16px; /* フォントサイズを少し小さく */
    font-weight: normal; /* 太さを標準に設定 */
    margin-bottom: 10px; /* 見出し下の余白 */
    color: #333; /* 落ち着いたグレーの文字色 */
    border: none; /* 枠線を削除 */
    text-align: center;
}

/************************************
** 人気記事ランキング表示のカスタマイズ
************************************/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
	 border-radius: 50%; /*丸にする*/
	 top: -4px;  /*丸の位置上に*/
	 left: -4px;  /*丸の位置左に*/
	 width: 14px;  /*丸のサイズを小さく*/
	 height: 14px;  /*丸のサイズを小さく*/
	 font-family: 'Lato', sans-serif;  /*数字をグーグルフォントに変更*/
	 font-size: 12px;  /*数字のフォントサイズを小さく*/
}
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {/*1位の数字を上に*/
	line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上に*/
	line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上に*/
	line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {/*4位の数字を上にし背景色変更*/
	background: #d0d0d1;
	line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {/*5位の数字を上にし背景色変更*/
   　　　　 background: #d0d0d1;
	line-height: 14px;
}
.home .widget_text {
    text-align: center; /* フロントページのテキストウィジェット内のテキストを中央揃えに */
}

/* 投稿タイトルの非表示 */
.entry-title {
  display: none;
}

/* カテゴリーラベル非表示 */
.entry-card .cat-label{
display: none;
}
.archive-title {
    text-align: center !important; /* タイトルを中央揃えにし、強制的に適用 */
}
.archive-title {
    font-family: 'Arial', sans-serif; /* 使用するフォント名に変更 */
    font-size: 30px; /* フォントサイズを変更 */
    font-weight: bold; /* フォントの太さを変更 */
    color: #333333; /* フォントカラーを変更 */
}

/*カテゴリーやタグページの見出し*/
.archive-title {
  color: #5f5f5f;
  text-align: center;
  font-size: 30px !important;
  margin-left: -15px;
}
.archive-title :before {
  display: none;
}
//新着・人気・関連記事ウィジェットサムネイルサイズ
add_image_size('widget_thumb', 10, 6, true);
add_filter('get_widget_entries_thumbnail_size', function (){
  return 'widget_thumb';
});
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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