@charset "UTF-8";

/* ▼▼▼ 親テーマ(base.css)のブレイクポイントに合わせた変数定義 ▼▼▼ */
:root {
/* サイドバーの幅（base.cssの .main--cts--wrap { margin-left: ... } と連動） */
--tnsb-sidebar: 260px; 
/* カード間の隙間 */
--card-gap: 10px;    
/* バナーの余白設定 */
--banner-top: 10px;  
--banner-side: 10px;

/* ×ラインの色 */
--cross-line-color: rgba(0, 0, 0, 0.04); 

/* 画像の枠線の色 */
--border-color: #ddd;
}
@media (max-width: 1333px) {
:root { --tnsb-sidebar: 200px; }
}
@media (max-width: 1029px) {
:root { --tnsb-sidebar: 0px; }
}

/* -------------------------------------------
A. スクロールコンテナ (reel-scroller)
------------------------------------------- */
.reel-scroller {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden;
gap: var(--card-gap);

/* 左は親要素に揃える */
margin-left: 16px !important; 

/* 右は画面端まで突き抜ける計算式 */
width: auto !important;
margin-right: calc( -1 * ( (100vw - var(--tnsb-sidebar) - 100%) / 2 ) ) !important;

/* 右端のスクロール切れ端用余白 */
padding-right: 40px !important;

box-sizing: border-box !important;

/* 慣性スクロール有効化 */
-webkit-overflow-scrolling: touch;

scrollbar-width: none; 
margin-bottom: 0 !important;
}
.reel-scroller::-webkit-scrollbar {
display: none;
}

/* ★スペーサー */
.reel-spacer {
display: block;
flex-shrink: 0;
width: 0px; 
height: 1px;
}

/* -------------------------------------------
B. カード (reel-card)
------------------------------------------- */
.reel-card {
display: block !important;
flex-shrink: 0 !important; 
margin: 0 !important;
position: relative !important;
background: transparent;
}
.reel-card a {
display: block;
text-decoration: none;
color: inherit;
}

/* -------------------------------------------
C. 画像・枠線・×ライン (reel-img)
------------------------------------------- */
.reel-img {
display: block;
overflow: hidden;
width: 100%;
margin-bottom: 12px;
background-color: #f9f9f9; 
border: 1px solid var(--border-color); /* 変数適用 */
box-sizing: border-box; 
border-radius: 4px;

/* ×ライン */
background-image: 
linear-gradient(to top right, transparent calc(50% - 0.5px), var(--cross-line-color) calc(50% - 0.5px), var(--cross-line-color) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--cross-line-color) calc(50% - 0.5px), var(--cross-line-color) calc(50% + 0.5px), transparent calc(50% + 0.5px));
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.reel-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: bottom;
position: relative; 
z-index: 2;

/* フェードインアニメーション設定 */
opacity: 0; /* 初期状態は透明 */
transition: opacity 0.4s ease; /* 0.4秒かけて表示 */
}

/* -------------------------------------------
D. 最上部バナー専用
------------------------------------------- */
.reel-scroller.is-banner {
display: block !important;
overflow: visible !important;
white-space: normal !important;
width: 99% !important;
margin-right: 0 !important;
gap: 0 !important;
padding-top: var(--banner-top) !important;
padding-left: var(--banner-side) !important;
padding-right: var(--banner-side) !important;
padding-bottom: 0px !important;
box-sizing: border-box !important;
}
.reel-card.is-banner {
width: 99% !important;
}
.reel-card.is-banner .reel-img {
border-radius: 4px !important;
margin-bottom: 0 !important;
background: transparent;
border: 1px solid var(--border-color);
background-image: none;
margin-top: 30px;
}
.reel-card.is-banner .reel-img img {
object-fit: contain;
height: auto;
}
.reel-scroller.is-banner .reel-spacer {
display: none;
}

/* -------------------------------------------
E. カードサイズ定義
------------------------------------------- */
.reel-card.is-rect {
width: 300px;
max-width: 80vw;
}
.reel-card.is-rect .reel-img { aspect-ratio: 16 / 9; }

.reel-card.is-square {
width: 250px;
}
.reel-card.is-square .reel-img { aspect-ratio: 1 / 1; }

/* スマホ用調整 */
@media (max-width: 768px) {
.reel-card.is-square { width: 160px; }
.reel-card.is-rect { width: 260px; }
.reel-scroller.is-banner{width: 101% !important;}
.reel-card.is-banner .reel-img {margin-top: 8px;}

.reel-scroller {
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
padding-right: 20px !important;
margin-left: 0 !important;
}
}

/* テキスト */
.reel-title {
font-size: .9em;
line-height: 1.5;
margin-bottom: 4px;
font-weight: bold;
color: #333;
}
.reel-date {
font-size: .88em;
color: #999;
display: block;
font-family: sans-serif;
}