@charset "UTF-8";

/* ===== 共通カードホバー ===== */
.card-hover {
  transition: transform .2s ease, box-shadow .2s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* =========================
   全体トーン
========================= */
body {
  background-color: #f5f7fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* コンテナ余白 */
.container {
  max-width: 1200px;
}


/* =========================
   セクション
========================= */
.section {
  margin-bottom: 60px;
}

.section-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
}


/* =========================
   カード（SaaS風）
========================= */
.card-clean {
  border: none;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  transition: all .2s ease;
  overflow: hidden;
}

/* hover */
.card-clean:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* 画像 */
.card-clean img {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}


/* =========================
   リンク
========================= */
.card-link {
  text-decoration: none;
  color: inherit;
}
.card-link:hover {
  color: inherit;
}


/* =========================
   ボタン（SaaS風）
========================= */
.btn-modern {
  background: linear-gradient(135deg, #4f7cff, #6f9cff);
  border: none;
  color: #fff;
  font-weight: 500;
  border-radius: 8px;
  transition: all .2s;
}

.btn-modern:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}


/* =========================
   View Moreカード
========================= */
.card-cta {
  background: linear-gradient(135deg, #ff8c42, #ff6a00);
  color: #fff;
  font-weight: bold;
  border-radius: 14px;
}


/* =========================
   テキスト整形
========================= */
.text-small {
  font-size: 0.85rem;
  color: #555;
}


/* =========================
  サムネ全体
========================= */
.video-thumb {
  position: relative;
  background: #333;
}

.video-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #8d8d8d;
  opacity: 0.8;
}

/* =========================
  再生ボタン
========================= */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 56px;
  height: 56px;
  border-radius: 50%;

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

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

  font-size: 18px;

  transition: all 0.2s ease;
}
/* ===== 再生アイコン ===== */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 60px;
    height: 60px;
    background: rgba(0,119,200,0.9);
    border-radius: 50%;

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

    color: #fff;
    font-size: 20px;
}

/* hoverエフェクト */
.card-hover {
    transition: 0.2s;
}
.card-hover:hover {
    transform: translateY(-4px);
}
.card-hover:hover .play-overlay {
    transform: translate(-50%, -50%) scale(1.1);
}

/* 説明3行制限 */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* セクション */
.section {
    margin-bottom: 40px;
}

/* =========================
  hover効果
========================= */
.card-hover:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: rgba(0, 0, 0, 0.8);
}

/* サムネ暗く */
.card-hover:hover .video-thumb img {
  filter: brightness(0.8);
}

/* =========================
  View More（やさしいグレー）
========================= */
.card-viewmore {
  background: #FFF; 
  color: #444;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
}


/* =========================
  hover（文字だけPumpkin）
========================= */
.card-viewmore:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}


/* 文字だけ変える */
.card-viewmore:hover h5,
.card-viewmore:hover small {
  color: #ff9600;
}


/* ちょいアニメーション */
.card-viewmore h5,
.card-viewmore small {
  transition: color 0.25s ease, transform 0.25s ease;
}

.card-viewmore:hover h5 {
  transform: translateY(-2px);
}


/* =========================
  サムネ hover（グレー → 黒）
========================= */

/* 初期：少し明るく（グレー寄り） */
.video-thumb img {
  filter: brightness(1);
  transition: all 0.25s ease;
}

/* hover時：暗く */
.card-hover:hover .video-thumb img {
  filter: brightness(0.75);
}


/* =========================
  再生ボタン（微調整）
========================= */

.play-btn {
  background: rgba(0, 0, 0, 0.55);
}

/* hoverで強める */
.card-hover:hover .play-btn {
  background: rgba(0, 0, 0, 0.85);
}



/* =========================
  カードの高さ安定
========================= */

.card-clean {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex-grow: 1;
}

/* =========================
  テキスト hover（ほんのり強調）
========================= */

.card-body p {
  transition: color .2s ease;
}

.card-hover:hover .card-body p {
  color: #111;
}

/* =========================
  テキスト 
========================= */

.card-title {
  margin: 0.5rem 0;
}

.card-text {
  padding-bottom: 1rem;
}

/* =========================
  3行カット（説明）
========================= */

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
  Google Materialっぽさ微追加（Illumina寄せ）
========================= */

.card-clean:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.12);
}


/* =========================
  タイトル少し強調
========================= */

.card-body p.fw-semibold {
  color: #222;
}


/* ===== video.php ページの送信中オーバーレイ（全画面ブロック） ===== */
#sendingOverlay {
	position: fixed;
	inset: 0;
	background: rgba(255,255,255,0.85);
	display: none;                 /* 送信時に JS で flex に切替 */
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 1050;                 /* 必要に応じて modal より上に */
	backdrop-filter: blur(1px);
}
#sendingOverlay .loader {
	width: 52px;
	height: 52px;
	border: 4px solid #e0e0e0;
	border-top-color: #007bff;     /* Bootstrap primary */
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
	margin: 0 auto;
}
#sendingOverlay .msg {
	margin-top: 14px;
	color: #333;
	font-weight: 600;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* キーボードフォーカスの見失い防止（任意） */
#sendingOverlay:focus {
	outline: none;
}


/* video.php ページ用 */
.detail-block{
    border-top:1px solid #e5e7eb;
    padding-top:2rem;
}

.detail-label{
    font-weight:600;
}

.detail-value{
    line-height:1.4;
}