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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

:root{
  --bg-card:#1d1d25;
  --bg-accent:#2a2a35;
  --text-main:#fff;
  --text-muted:#a0a0b0;
  --brand:#6c5ce7;
  --radius:12px;
  --bg-body:#161722;
}

.single-video-page{ color:var(--text-main); }

.single .content,
.single .content-in,
.single .main,
.single .main-in,
.single .article,
.single .entry{
  background:#000 !important;
}

/* 動画帯 */
.video-theater-wrapper{
  background:#000000;
  width:100%;
  display:flex;
  justify-content:center;
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.video-container{
  width:100%;
  max-width:1200px;
  padding:0 20px;
}

.single .single-video-page .embed-responsive{
  aspect-ratio:16 / 9;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  position:relative;
}

.single .single-video-page .embed-responsive iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  border:0;
  display:block;
}

.single .single-video-page .wp-block-embed__wrapper::before{
  content:none !important;
  padding-top:0 !important;
}

/* 本文エリア */
.main-content{
  max-width:1200px;
  margin:0 auto;
  width:100%;
  padding:24px 20px;
  display:grid;
  gap:40px;
  grid-template-columns:1fr 340px;
  position:relative;
  z-index:0;
}

.main-content::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--bg-body);
  z-index:-1;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.entry-header{
  border-bottom:1px solid rgba(255,255,255,.10);
  padding-bottom:24px;
  margin-bottom:24px;
}

.entry-title{
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:12px;
  line-height:1.4;
}

.entry-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  font-size:.9rem;
  color:var(--text-muted);
}

.meta-item{ display:flex; align-items:center; gap:6px; }

.cat-tag{
  background:var(--bg-accent);
  padding:4px 12px;
  border-radius:50px;
  color:var(--text-main);
  font-size:.85rem;
  font-weight:500;
}

.cat-tag:hover{ background:var(--brand); }

.action-bar{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 20px;
  border-radius:6px;
  font-weight:600;
  font-size:.9rem;
  transition:.2s;
  text-decoration:none;
}

.btn-share{
  background:transparent;
  color:var(--text-main);
  border:1px solid rgba(255,255,255,.16);
}

.btn-share:hover{ background:rgba(255,255,255,.06); }

.btn-primary{ background:var(--brand); color:#fff; border:none; }

.btn-primary:hover{ opacity:.9; }

.no-content-notice{
  background:rgba(108,92,231,.10);
  border:1px solid rgba(108,92,231,.30);
  border-radius:8px;
  padding:16px;
  font-size:.9rem;
  color:#ddd;
  margin-top:20px;
}

.sidebar-title{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:16px;
  border-left:4px solid var(--brand);
  padding-left:12px;
}

.related-grid{ display:flex; flex-direction:column; gap:16px; }

.related-card{ display:flex; gap:12px; border-radius:8px; overflow:hidden; }

.related-thumb{ width:140px; height:80px; flex-shrink:0; border-radius:6px; overflow:hidden; }

.related-thumb img{ width:100%; height:100%; object-fit:cover; transition:.3s; }

.related-card:hover .related-thumb img{ transform:scale(1.05); }

.related-info{ display:flex; flex-direction:column; justify-content:center; }

.related-title{
  font-size:.9rem;
  font-weight:600;
  margin-bottom:4px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.related-card:hover .related-title{ color:var(--brand); }

.related-meta{ font-size:.75rem; color:var(--text-muted); }

.single .main{
  padding-bottom: 0 !important;
}

/* =========================
   スマホ用の最適化
   ========================= */
@media (max-width:900px){
  .main-content{ 
    grid-template-columns:1fr; 
    gap:30px; 
  }
  
  .video-container{ 
    padding:0; 
  }
  
  .single .single-video-page .embed-responsive{ 
    border-radius:0; 
    aspect-ratio: auto !important;
  }

  .single .single-video-page .embed-responsive iframe{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* ========================================
     動画帯の高さを自動調整
     ======================================== */
  body.single .single-video-page .video-theater-wrapper,
  .single .single-video-page .video-theater-wrapper,
  .video-theater-wrapper{
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 15px 0 15px 0 !important;
    margin: 0 !important;
  }
  
  /* 動画コンテナ */
  body.single .single-video-page .video-container,
  .single .single-video-page .video-container{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* entry-content内のvideo-container */
  body.single .entry-content .video-container,
  .single .entry-content .video-container,
  .entry-content .video-container{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  
  /* ========================================
     .video の margin-top を削除
     ======================================== */
  body.single .single-video-page .video,
  .single .single-video-page .video,
  .video-container .video,
  .embed-responsive .video,
  .video{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
  }
  
  /* ========================================
     ★ 最重要：#main の padding-top を削除
     Cocoonのインラインスタイル（32px）を上書き
     ======================================== */
  body.single #main.main,
  body.single #main,
  body #main.main,
  #main.main,
  #main{
    padding-top: 0 !important;
  }
  
  /* Instagram/Facebook用 */
  .single .single-video-page .instagram-container,
  .single .single-video-page .facebook-container{
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* embed-responsive */
  body.single .single-video-page .embed-responsive,
  .single .single-video-page .embed-responsive,
  .embed-responsive{
    margin: 0 !important;
    display: block !important;
    height: auto !important;
  }
}

/* =========================
   PC版の最適化（900px以上）
   ========================= */
@media (min-width:901px){
  /* #main の上部paddingを削除 */
  body.single #main.main,
  body.single #main,
  body #main.main,
  #main.main,
  #main{
    padding-top: 0 !important;
  }
  
  /* 動画帯に上下バランスの良い余白を設定 */
  .single .single-video-page .video-theater-wrapper,
  .video-theater-wrapper{
    padding: 0px 0 20px 0 !important;
  }
}

/* 配信者（タクソノミー）だけ見た目を変える */
.single .single-video-page .streamer-tag{
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(160,120,255,.18);
}

/* 配信者は先頭に「配信者」感を足す（アイコン） */
.single .single-video-page .streamer-tag::before{
  content: "🎙 ";
  margin-right: .1em;
}

/* 音タグ（通常タグ）は少し控えめにして差を広げる（任意） */
.single .single-video-page .entry-meta a.cat-tag:not(.streamer-tag){
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* スマホでのはみ出し対策のみ */
@media (max-width: 767px) {
  /* 全体の横幅制限 */
  .single-video-page,
  .main-content,
  article,
  aside {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* おすすめ動画グリッド */
  .related-grid {
    max-width: 100%;
    width: 100%;
  }
  
  /* 関連動画カード */
  .related-card {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* サムネイル画像 */
  .related-thumb,
  .related-thumb img {
    max-width: 100%;
    height: auto;
  }
  
  /* テキストのはみ出し防止 */
  .related-title,
  .entry-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}