@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){
  /*必要ならばここにコードを書く*/
}





/************************************
** 動画の▶位置調整のスタイルを書く
************************************/
/*2026年04月17日設定*/

.video-outer {
  width: 100%;
}

/* 動画ラップ */
.video-wrap {
  position: relative;
  max-width: 740px;
  margin: 0 auto;
}

/* 動画本体 */
.my-video {
  width: 100%;
  height: auto;
  display: block;
}

/* 再生ボタン */
.play-circle {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 70px;
  height: 70px;
  border: 4px solid #fff;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 40px; /* ← バランス調整（60→40推奨） */
  line-height: 1;

  color: #fff;
  background: rgba(0,0,0,0.5);

  cursor: pointer;
  z-index: 10;

  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ホバー演出 */
.play-circle:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(0,0,0,0.6);
}





/************************************
** オーバーレイテキスト（非リンク版）
************************************/

/* テキスト本体 */
.overlay-text {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translateX(-50%);
  
  text-align: center;
  color: #fff;
  font-weight: bold;
  width: 100%;

  z-index: 11;

  pointer-events: none; /* ←これが最重要（動画操作を邪魔しない） */
}

/* 各行 */
.overlay-text p {
  margin: 4px 0;
  font-size: 14px;

  background: rgba(0,0,0,0.6);
  padding: 4px 12px;
  border-radius: 20px;

  display: inline-block;
}

/* PCホバー演出（軽め） */
.video-wrap:hover .overlay-text {
  transform: translateX(-50%) scale(1.05);
}

/************************************
** 再生中は▶＋テキストを消す
************************************/

/* ▶を消す（すでにあればOK） */
.video-wrap.playing .play-circle {
  opacity: 0;
}

/* テキストも消す（今回の本命） */
.video-wrap.playing .overlay-text {
  opacity: 0;
}