/* =========================================================
 * common.css … サイト全体で使う見た目（全ページで読み込む）
 *
 * 記事の本文やウィジェットの中で使っている可能性があるものも、ここに置いている。
 * 「テーマのコードでは未使用」と書いてあるものは、テーマのファイルの中では
 * 使われていないが、記事の本文で使っている可能性があるので残しているもの。
 * ========================================================= */


/* ---------------------------------------------------------
 * YouTube の埋め込み（16:9）
 * 使用：曲のページ（single.php）。記事の本文でも使える
 * --------------------------------------------------------- */
.youtube-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 アスペクト比の場合の高さ計算 (9 / 16 * 100) */
    margin: 0;
    overflow: hidden;
}

.youtube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ---------------------------------------------------------
 * 改行をそのまま表示する
 * テーマのコードでは未使用（記事の本文で使っている可能性あり）
 * --------------------------------------------------------- */
.your-custom-class {
    white-space: pre-line !important;
}


/* ---------------------------------------------------------
 * 記事一覧の抜粋（コード行・歌詞行）
 * 使用：parts/post_list/style_normal.php（トップ・カテゴリー・検索結果などの一覧）
 * --------------------------------------------------------- */

/* 通常行の間に縦方向の隙間を付ける */
.kash-row {
    margin-bottom: 1px; /* ←好きな値に変更 */
}

/* 空行は小さい行だけにして、余白を付けない */
.kash-row.empty-row {
    margin-bottom: 0;
    line-height: 1em;
    min-height: 15px;
    height: 15px;
}

/* 空行の中のセルは完全に不可視 */
.kash-row.empty-row > div {
    color: transparent !important;
    user-select: none;
    line-height: 0;
}

/* 抜粋の段落の間隔 */
.p-postList__excerpt > p {
    margin-bottom: 1em;
}


/* ---------------------------------------------------------
 * ボタンの輪郭（アウトラインのボタン）
 * 使用：曲のページ・CDのページ。記事の本文のボタンブロックにも効く
 * --------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid currentColor !important;
}


/* ---------------------------------------------------------
 * 検索フォーム（VK Filter Search Pro）
 * --------------------------------------------------------- */
.vk-filter-search {
    margin-right: 20px;
}

.wp-block-vk-filter-search-pro-filter-search-pro.vkfs ul {
  white-space: nowrap; /* ラジオボタンを折り返さない */
}


/* ---------------------------------------------------------
 * キードロップダウンとラジオボタンの配置
 * テーマのコードでは未使用（記事の本文で使っている可能性あり）
 * --------------------------------------------------------- */
.form-container {
    display: flex;
    align-items: center; /* 中央揃え */
}


/* ---------------------------------------------------------
 * 画像と説明文の横並び
 * 使用：アーティストのページ（single-people.php）・CDのページ（single-cd.php）
 * --------------------------------------------------------- */
.custom-content-wrapper {
    display: flex;
    align-items: flex-start; /* 必要に応じて調整 */
    gap: 20px; /* 画像とテキストの間隔 */
}

.custom-content-wrapper .wp-block-image {
    flex-shrink: 0; /* 画像が縮小するのを防ぐ */
}

.custom-content-wrapper .description {
    flex-grow: 1; /* テキストが利用可能なスペースを埋めるようにする */
}


/* ---------------------------------------------------------
 * CD注文ボタン（ジャケット画像＋アルバム名＋ボタン）
 * 使用：曲のページ（single.php）・CDのページ（single-cd.php）
 * --------------------------------------------------------- */
.custom-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* ※ 以前ここにPHPのコードが書いてあったが、CSSファイルの中ではPHPは動かないので削除した */
}

.custom-image {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    border-radius: 10%;
}

.custom-text {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.order-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}

.order-button:hover {
    background-color: #2980b9;
}


/* ---------------------------------------------------------
 * 音声プレーヤー
 * .my-audio-player はテーマのコードでは未使用（曲のページのmp3はメモとして無効）
 * audio:: の2つは、サイト内のすべての音声プレーヤーに効く
 * --------------------------------------------------------- */
.my-audio-player {
  margin: 20px 0;               /* 上下に20pxの余白 */
  background: #fff;             /* 背景を白に */
  border-radius: 12px;          /* 角を12px丸くする */
  padding: 10px;                /* 内側に10pxの余白 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* ほんのり影を付ける */
}

.my-audio-player audio {
  width: 100%;      /* 親要素いっぱいに広げる */
  height: 40px;     /* 高さを40pxに固定 */
  border-radius: 8px; /* プレーヤー本体の角を丸くする */
}

.my-audio-player audio::-webkit-media-controls-panel {
  background-color: #f9f9f9; /* コントロールパネルの背景色変更（Chrome/Safari用） */
}

.my-audio-player audio::-webkit-media-controls-play-button {
  background-color: #f9f9f9; /* 再生ボタンの背景 */
  border-radius: 50%;       /* 再生ボタンを丸く */
}

audio::-internal-media-controls-download-button {
  display: none; /* ダウンロードボタンを非表示 */
}

audio::-webkit-media-controls-enclosure {
  overflow: hidden; /* コントロール全体のはみ出しを防ぐ */
}