@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){
  /*必要ならばここにコードを書く*/
}
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important; /* 強制的に非表示にする */
    }
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

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

.video-thumb {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
	margin-bottom: -10px;
}

/* 画像 */
.video-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 再生ボタン */
.video-thumb .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -60%);
  transition: transform 0.3s ease;
}

.video-thumb .play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-thumb .play-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 40px solid white;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  transform: translate(-40%, -50%);
}

/* 矢印の下の文字 */
.video-thumb .video-text {
  position: absolute;
  top: calc(50% + 80px); /* 矢印の下に配置（調整可） */
  left: 50%;
  transform: translateX(-50%);
  color: red;
  font-weight: bold;
  font-size: 20px;
  background-color: rgba(128,128,128,0.8); /* 半透明の灰色背景 */
  padding: 4px 10px;
  border-radius: 6px;
  text-align: center;
  text-shadow: 1px 1px 2px black; /* 少し視認性アップ */
  pointer-events: none; /* クリック操作を邪魔しない */
}

@media screen and (max-width: 768px) {
  /* 再生ボタンの位置調整 */
  .video-thumb .play-button {
    width: 80px;
    height: 80px;
    /* 元の位置から上に20px移動 */
    transform: translate(-50%, calc(-50% - 20px)); 
  }

  /* テキストの位置調整 */
  .video-thumb .video-text {
    font-size: 16px;
    padding: 3px 8px;
    /* 下の余白を削って上に持ち上げる、またはマイナスマージン */
    margin-top: -10px; 
    position: relative;
    bottom: 20px; /* positionが設定されている場合、これで調整可能 */
  }
}

@media screen and (max-width: 480px) {
  .video-thumb .play-button {
    width: 60px;
    height: 60px;
    /* さらに上に上げたい場合は数値を増やす */
    transform: translate(-50%, calc(-50% - 30px));
  }

  .video-thumb .video-text {
    font-size: 14px;
    padding: 2px 6px;
    bottom: 30px; 
  }
}
/* ===== 画像マス表（上揃え） ===== */
.cocoon-image-table {
  width: 100%;
  border-collapse: collapse;
}

.cocoon-image-table td {
  border: 1px solid #ccc;
  padding: 4px;
  vertical-align: top;   /* ← ここがポイント（上揃え） */
}

/* 画像を正方形に */
.cocoon-image-table img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* ホバー拡大 */
.cocoon-image-table a:hover img {
  transform: scale(1.05);
}

/* スマホは2列表示 */
@media screen and (max-width: 768px) {
  .cocoon-image-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.banner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.banner {
  display: block;
  width: 100%;
  max-width: 800px;
  padding: 18px 20px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;                 /* 文字色を白 */
  text-decoration: none;
  border-radius: 6px;
  box-sizing: border-box;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* ホバー時に少し白く */
.banner:hover {
  filter: brightness(1.15);
  opacity: 0.95;
}

/* 緑（400px） */
.banner.green {
  max-width: 400px;
  background-color: #28a745;
  margin-left: auto;   /* ← これが重要 */
	margin-top: 0;
}

/* 青 */
.banner.blue {
  background-color: #2b7dbd;
	margin-bottom: 0.2em !important;
}

/* 赤 */
.banner.red {
  background-color: #c62828;
		margin-bottom: 0.2em !important;
}

/* スマホ微調整 */
@media screen and (max-width: 480px) {
  .banner {
    font-size: 16px;
    padding: 14px 10px;
  }
}

.eromoji_btn{display:inline-block;padding:0 .7em;margin:.3em .1em;text-decoration:none;color:#e44;border:solid 2px #e44;border-radius:3px;transition:.4s}.eromoji_btn:hover{background:#e44;color:#fff}
.blank-box.st-yellow {
  margin-bottom: 0.1em !important;
}
.shortcode-full {
    display: block;
    width: 100%;
}

.shortcode-full * {
    width: 100% !important;
}