@charset "utf-8";

/*
Theme Name: startup
Theme URI: https://wordpress.org/themes/startup/
Author: Norit Japon
Author URI: https://www.norit.jp/
Description:
Requires at least: 6.3
Tested up to: 6.3
Requires PHP: 7.4
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: startup
Tags:

This theme WordPress Theme, (C) 2022 WordPress.org
This theme distributed under the terms of the GNU GPL.
*/

/* Categories 01 to 03 are the basics. */


/* common ============================================= */
.br_spOnly{
  display: none;
}

/* common end ============================================= */


/* movie ============================================= */
.cat_2line li{
  margin-bottom: 20px;
}

.movie_tag{
  background:#0d4182;
  color:#fff;
  padding:2px 8px;
  font-size:12px;
  white-space:nowrap;
  display: table;
  margin-bottom: 5px;
}

.movieListGrid .thumb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 0.3は透明度。数値を上げると濃くなります */
  transition: background-color 0.3s ease; /* ホバー時のフワッと変化するアニメーション */
  z-index: 1;
}

.movieListGrid .thumb .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* ど真ん中に配置 */
  width: 60px; /* ボタンのサイズ */
  height: 60px;
  border: 3px solid #fff; /* 白い枠線 */
  border-radius: 50%; /* 円形にする */
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease; /* ホバー時のアニメーション用 */
}

/* 再生ボタンの三角マーク */
.movieListGrid .thumb .play-btn::after {
  content: "";
  display: block;
  /* CSSで三角を作る定番のテクニック */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 18px; /* 三角のサイズ */
  border-color: transparent transparent transparent #fff; /* 白い三角 */
  margin-left: 6px; /* 三角が視覚的に中央に見えるように少し右へズラす */
}

/* ホバー時に再生ボタンを少し大きくする（お好みで調整してください） */
/* .movieListGrid li a:hover .thumb .play-btn {
    transform: translate(-50%, -50%) scale(1.1);
} */

/* movie end ============================================= */


@media screen and (max-width: 768px) {
  .br_pcOnly{
    display: none;
  }
  .br_spOnly{
    display: inline;
  }


  .movieListGrid .thumb .play-btn{
    width: 40px;
    height: 40px;
  }
  .movieListGrid .thumb .play-btn::after{
    border-width: 8px 0 8px 12px;
  }
}