/* コメントの左に余白をあける */
.comment {
  margin-left: 15px; /* または padding-left: 10px; */
}



/* ヘッダーロゴを非表示 */
@media screen and (max-width: 1023px) {
.logo-header {
display: none;
}
}











/* サムネイルのコンテナを相対位置に設定（基準点にする）*/
.entry-card-thumb {
    position: relative;
}

/* 時間表示のスタイル */
.video-time {
    position: absolute; /* 親要素（.entry-card-thumb）を基準に絶対配置 */
    bottom: 8px; /* 下から8pxの位置 */
    right: 8px; /* 右から8pxの位置 */
    background-color: rgba(0, 0, 0, 0.7); /* 少し透けた黒い背景 */
    color: white; /* 白い文字 */
    padding: 3px 8px; /* 内側の余白 */
    border-radius: 3px; /* 角を少し丸くする */
    font-size: 12px; /* 文字サイズ */
    line-height: 1; /* 行の高さを調整 */
    z-index: 2; /* カテゴリーラベルより手前に表示 */
}









/* スマートフォン表示（画面幅が834px以下）の場合に適用 */
@media screen and (max-width: 834px) {

  /* 1. 左右の余白をなくす */
  #main {
    padding-left: 0;
    padding-right: 0;
  }

/* 投稿と投稿の間の行間を広げる */
.entry-card-wrap {
  margin-bottom: 40px !important;
}


}


/* 投稿ページでアイキャッチ画像を非表示にする（PCとスマホ両対応） */
.single .eye-catch {
  display: none !important;
}

/* ===============================================
   記事トップのVimeo動画用スタイル（最終版）
   =============================================== */

/* PC・タブレット用の基本スタイル */
.single .custom-top-video-container {
  position: relative;
  z-index: 1; /* 他の要素との重なりを防ぐ */
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
  margin-bottom: 2em;
}

.single .custom-top-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ▼▼▼ スマートフォン用のスタイル（画面幅が767px以下の場合に適用） ▼▼▼ */
@media screen and (max-width: 767px) {
  /*
   * スマホでは、親要素（.entry-contentなど）の左右の余白（padding）を
   * 無視して画面幅いっぱいに広げるための調整
   */
  .single .custom-top-video-container {
    width: 100vw; /* 画面の横幅全体を使う */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw; /* 最大幅も画面幅に合わせる */
  }
}



/* 記事ヘッダーのデフォルトのレイアウトをリセット */
.article-header.entry-header {
    all: unset; /* 全てのスタイルを初期化 */
    display: flex;
    flex-direction: column;
    gap: 0; /* Flexアイテム間の隙間を0に */
}

/* 動画コンテナの表示順と余白のリセット */
.custom-top-video-container {
    order: 1;
    margin-bottom: 0 !important; /* 下の余白を強制的に0に */
    line-height: 1; /* 行の高さをリセット */
}

/* 動画プレーヤー自体の余白をリセット */
.custom-top-video-container > iframe {
    display: block; /* ブロック要素として扱い、不要な隙間を防ぐ */
    margin: 0 !important;
    padding: 0 !important;
}

/* 記事タイトルの表示順と余白の調整 */
.entry-title {
    order: 2;
    margin: 20px 0 0 0 !important; /* 上に20pxの余白、他は0に */
    padding: 0 !important;
    line-height: 1.5; /* タイトルの行間を適度に設定 */
}

/* 日付エリアの表示順と余白の調整 */
.date-tags {
    order: 3;
    margin-top: 10px !important; /* タイトルとの間に適度な余白を設定 */
}



/* 記事下のカテゴリ表示のみを、最優先で非表示にする */
.entry-footer .cat-links {
    display: none !important;
}


/*サムネイルの 「カテゴリー」を非表示にする*/
.cat-label {
display: none;
}


/* --- サイト全体と本文エリアの背景色を #E5E5E5 にする --- */

/* 1. サイト全体の背景色を指定 */
body {
    background-color: #E5E5E5;
}

/* 2. 投稿本文エリアのスタイル */
.single .entry-content {
    background-color: #E5E5E5; /* サイト全体と同じ色に */
    color: #222222;           /* 背景に合わせて文字を少し濃くする */
    padding: 30px;            /* 内側の余白は維持 */
    border-radius: 0;         /* 角丸をなくし、よりシンプルに */
}

/* 3. 本文エリア内のリンク文字色 */
.single .entry-content a {
    color: #0055b3;
}


/* 画面幅が834px以下の時（モバイル端末と判断）で、
   かつ投稿ページを開いている場合のみヘッダーを非表示にする */
@media screen and (max-width: 834px) {
    .single #header-container {
        display: none !important;
    }
}















/*
====================================
 日付の表示位置と文字サイズの調整（最終・完全解決版）
====================================
*/

/* --- 1. 記事ページの日付 --- */
.article-header .date-tags {
    font-size: 18px;    /* 文字サイズ */
    text-align: left;   /* テキストを左寄せ */
}

/* --- 2. トップページの記事一覧の日付 --- */
/* 「.home」は不要でした。すべてのエントリーカードで日付を左寄せにします */
.entry-card-meta {
    justify-content: flex-start !important;
}

/* トップページの日付自体のスタイル */
/* こちらも「.home」は不要です */
.date-tags {
    font-size: 15px;    /* 文字サイズ */
    text-align: left;   /* 念のためテキストも左寄せ */
}













/*----- Cocoonテーマ用・最終手段の強制スタイル指定 -----*/
.content-in .sort-result {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

.content-in .sort-result form {
  margin: 0 !important;
}

/* 基本のボタンスタイル（最重要） */
.content-in .sort-result input[type="submit"] {
  background-color: #f2f2f2 !important;
  color: #0f0f0f !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 20px !important; /* 丸みを強制適用 */
  padding: 8px 20px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  -webkit-appearance: none; /* iOSでのデフォルトスタイル解除 */
  -moz-appearance: none;    /* Firefoxでのデフォルトスタイル解除 */
  appearance: none;         /* デフォルトスタイル解除 */
}

/*----- カーソルを当てた時のスタイル -----*/
.content-in .sort-result input[type="submit"]:not(.sort_current):hover {
  background-color: #e5e5e5 !important;
}

/*----- 現在選択中のボタンスタイル -----*/
.content-in .sort-result input.sort_current {
  background-color: #0f0f0f !important;
  color: #ffffff !important;
  border-color: #0f0f0f !important;
  font-weight: 600 !important;
}






















/* 【強制適用】ソートボタンを左、ダークモードスイッチを右に配置し、サイズを調整 */

.sort-and-switch-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ダークモードスイッチのサイズを強制的に調整 */
.sort-and-switch-container .wp-dark-mode-switcher {
    /* この数値を変更してお好みのサイズに調整してください */
    transform: scale(0.75) !important; 
    transform-origin: center !important;
}