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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.cat-label {
  display: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1023px以下 */
@media screen and (max-width: 1023px) {}

/* 834px以下 */
@media screen and (max-width: 834px) {}

/* 480px以下 */
@media screen and (max-width: 480px) {}

/* PC（5列表示） */
.ect-3-columns {
  justify-content: space-around;
}
.ect-3-columns .entry-card-wrap,
.ect-3-columns .ad-area {
  width: 19%;
}
.ect-3-columns .entry-card-snippet {
  max-height: 4em;
  overflow: hidden;
}

/* タブレット（2列表示） */
@media screen and (max-width: 1024px) {
  .ect-3-columns .entry-card-wrap,
  .ect-3-columns .ad-area {
    width: 48%;
  }
}

/* スマホ（2列表示） */
@media screen and (max-width: 768px) {
  .ect-3-columns {
    justify-content: space-between;
  }
  .ect-3-columns .entry-card-wrap,
  .ect-3-columns .ad-area {
    width: 48%;
  }
}

/************************************
** 動画コンテナのみ中央寄せ、他は左寄せ
************************************/

/* 全体のコンテナ */
.content-wrapper {
    max-width: 100%;  /* 最大幅を動画に合わせる */
    margin: 0 auto;  /* 中央配置 */
    text-align: left;  /* タイトルとメタ情報は左寄せ */
}

/* 動画コンテナ */
.video-container {
    width: 100%;
    max-width: 768px; /* 最大幅を指定 */
    margin: 0 auto; /* 中央寄せ */
    text-align: center; /* 中央揃え */
}

/* 動画のサイズ */
.video-container video {
    width: 100%;
    height: auto;
}

/* タイトルのスタイル */
.title-container,
.meta-wrapper {
    max-width: 768px;  /* 動画と同じ幅に合わせる */
    margin: 0 auto;    /* 中央寄せ */
    text-align: left;  /* テキストは左寄せ */
}

/* メタ情報のスタイル */
.meta-wrapper {
    text-align: left; /* 左寄せ */
    margin-top: 10px;
}

.meta-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 各項目（発売日・収録時間・出演者など） */
.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ラベル（発売日・収録時間など） */
.meta-item strong {
    min-width: 120px;
    text-align: right;
    font-weight: bold;
    color: #333;
}

/* 値（発売日・時間・タグなど） */
.meta-item span, 
.meta-item a {
    flex-grow: 1;
    color: #0066cc;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
}

/* ボタンのデザイン */
.meta-item a {
    border: 1px solid #0066cc;
}

.meta-item a:hover {
    background: #0066cc;
    color: #fff;
}

/* タグのデザイン */
.meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-link {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    color: #0066cc;
    border: 1px solid #0066cc;
    border-radius: 5px;
    text-decoration: none;
}

.tag-link:hover {
    background: #0066cc;
    color: #fff;
}

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

/* ホバー時のスタイル */
.link-button:hover {
    background-color: #0066ff; /* 背景色 */
    color: #FF0000; /* 文字色を赤に変更 */
}

/* 親要素を中央寄せ */
.link-container {
    text-align: center; /* コンテンツを中央揃え */
    margin-top: 20px;
}

/* サムネイル画像を中央左寄せ */
.thumbnail-container {
    display: flex;
    justify-content: center; /* 🔴これを追加して中央寄せ */
    flex-wrap: wrap; /* 折り返し */
    gap: 10px; /* 画像の間隔 */
    max-width: 768px; /* メインコンテンツの幅 */
    margin: 0 auto; /* 🔴ページ中央に配置 */
    padding: 10px 0;
}

/* 各サムネイル画像のスタイル */
.thumbnail-container img {
    width: 100%; /* 親要素に合わせて縮小 */
    height: auto; /* 高さを自動調整（比率を維持） */
    max-width: 320px; /* 最大幅を指定（例: 300px） */
    max-height: 180px; /* 最大高さを指定（比率を考慮） */
    border-radius: 5px; /* 角を丸く */
    object-fit: cover;
}

.thumbnail-container img:hover {
    transform: scale(1.05);  /* ホバー時に少し拡大 */
}

/* 投稿一覧 タイトル */
.entry-card-content h2 {
  /* 三点リーダー対応 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
/* アイキャッチラベル非表示 */
.cat-label {
display: none;
}

/* 備考 */
.info-provider {
    text-align: center;         /* テキストを中央寄せ */
    margin-top: 20px;           /* 上の要素との余白 */
    font-size: 15px;            /* フォントサイズ調整（お好みで） */
    line-height: 1.5;           /* 行間調整（お好みで） */
}

/* アフィリエイト画像 */
.link-container,
.affiliate-image {
    text-align: center; /* ボタンと画像を中央寄せ */
    margin-top: 20px; /* 余白調整（お好みで） */
}

.affiliate-image img {
    display: block;
    margin: 0 auto; /* 画像を中央配置 */
}
/* 購入ボタンとアフィリエイト画像の中央寄せ */
.link-container,
.affiliate-image {
    text-align: center; /* ボタンと画像を中央寄せ */
    margin-top: 20px; /* 余白調整（お好みで） */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央配置 */
    justify-content: center;
}

/* アフィリエイト画像の個別設定 */
.affiliate-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto; /* 画像を中央配置 */
}

/* ACFの設定 */
.acf-video-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 30px auto;
  text-align: center;
}

.acf-video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.acf-video-wrapper .video-description,
.acf-video-wrapper .video-meta {
  display: none;
}