@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ========================================
   1. 素材カード全体の設定
   ======================================== */
/* 最新ダウンロード一覧：横5個×2列のグリッドレイアウト */
.otopon-latest-downloads-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1% !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

/* グリッド内のアイテムは確実にグリッドアイテムとして表示 */
.otopon-latest-downloads-grid .sdm_download_item,
.post_content /* グリッド内のアイテムは確実にグリッドアイテムとして表示 */
.otopon-latest-downloads-grid .sdm_download_item,
.post_content .otopon-latest-downloads-grid .sdm_download_item {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e0e7eb !important;
  border-radius: 12px !important;
  padding: 10px 15px !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(4, 56, 76, 0.08) !important;
  box-sizing: border-box !important;
  text-align: center;
  vertical-align: top !important;
}

/* その他のショートコード用のデフォルトスタイル（グリッド外のみ） */
.post_content .sdm_download_item:not(.otopon-latest-downloads-grid *) {
  width: 31% !important;
  margin: 1% !important;
  display: flex !important;
  flex-direction: column !important;
  vertical-align: top !important;
  border: 1px solid #e0e7eb !important;
  border-radius: 12px !important;
  padding: 10px 15px !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(4, 56, 76, 0.08) !important;
  box-sizing: border-box !important;
  text-align: center;
}

@media screen and (max-width: 767px) {
  /* 最新ダウンロード一覧：スマホでは1列表示 */
  .otopon-latest-downloads-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .post_content .sdm_download_item {
    width: 98% !important;
    display: block !important;
    margin: 10px auto !important;
  }
}

/* ========================================
   2. テキスト要素
   ======================================== */
.sdm_download_title {
  font-size: 16px !important;
  font-weight: bold !important;
  color: #04384c !important;
  margin-bottom: 12px !important;
  display: block;
  line-height: 30px !important;
  order: 1;
}

.sdm_download_item_top {
  order: 1;
}

.sdm_download_description {
  font-size: 14px !important;
  color: #666 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  min-height: 2em;
  order: 2;
}

/* 不要なプレイヤーを隠す */
.sdm_download_description .wp-audio-shortcode,
.sdm_download_description .mejs-container {
  display: none !important;
}

/* ========================================
   3. プレイヤーとボタンの横並びコンテナ
   ======================================== */
/* プレイヤーとDLボタンを囲むラッパー */
.otopon-buttons-wrapper {
  order: 3;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
}

/* シークバー（プログレスバー） - 幅100%で表示 */
.otopon-buttons-wrapper > .otopon-progress-wrap {
  width: 100% !important;
  height: 8px;
  background: #e0e7eb;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* ボタンを横並びにする内部ラッパー */
.otopon-buttons-inner {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* プレイヤーコンテナ */
.otopon-player-container {
  flex: 1 !important;
  padding: 0 5px !important;
  box-sizing: border-box !important;
}

/* DLボタンコンテナ */
.otopon-buttons-inner .sdm_download_link {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 5px !important;
  box-sizing: border-box !important;
}

.otopon-progress-bar {
  width: 0%;
  height: 100%;
  background: #04384c;
  transition: width 0.1s linear;
}

/* ========================================
   4. ボタンの共通スタイル
   ======================================== */
/* プラグインのデフォルトフォント設定を上書き */
.sdm_download {
  font: inherit !important;
}

.otopon-play-btn,
.post_content .sdm_download_link .sdm_download.green {
  appearance: none;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 30px !important;
  border-radius: 50px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  margin: 0 !important;
  border: none !important;
}

/* 試聴ボタン */
.otopon-play-btn {
  background: #ffffff !important;
  border: 2px solid #04384c !important;
  color: #04384c !important;
}

.otopon-play-btn:hover {
  background: #eef7fa !important;
  transform: translateY(-2px);
}

.otopon-play-btn.playing {
  background: #d55656 !important;
  border-color: #d55656 !important;
  color: #ffffff !important;
}

/* DLボタン */
.post_content .sdm_download_link .sdm_download.green {
  background: #5a8c7a !important;
  color: #ffffff !important;
}

.post_content .sdm_download_link .sdm_download.green:hover {
  background: #466d5f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ボタン内のアイコン */
.otopon-play-btn .play-icon,
.otopon-play-btn .stop-icon {
  font-size: 12px;
}

/* SDMの余計なマージンを消す（ラッパー外のDLボタン用） */
.sdm_download_link {
  margin: 0 !important;
  padding: 0 !important;
}

span.sdm_download_button {
  display: block;
  padding: 0 5px;
}

/* ========================================
   5. タグのスタイル
   ======================================== */
.otopon-tag-container {
  order: 4 !important;
  display: block !important;
  padding-top: 10px !important;
  border-top: 1px dashed #e0e7eb !important;
  text-align: center !important;
  width: 100% !important;
  clear: both !important;
}

.otopon-tag-label {
  display: inline-block !important;
  background: #f7f9fa !important;
  color: #5a8c7a !important;
  font-size: 11px !important;
  font-weight: bold !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  margin: 0 4px 6px 0 !important;
  text-decoration: none !important;
  border: 1px solid #e0e7eb !important;
  transition: all 0.2s ease !important;
}

.otopon-tag-label:hover {
  background: #5a8c7a !important;
  color: #ffffff !important;
  border-color: #5a8c7a !important;
}