/* ヒーロー直後のグレー帯・余白・背景色対策(2025-10-07) */
/* COMMITMENT/USERVOICE等のセクション余白を保護するため、親テーマクラスへの全体適用を削除 */
/* section-blog専用CSSなので、親テーマクラス（.l-mainContent, .l-article__body）は操作しない */
.hero-section + .l-mainContent,
.hero-section + .l-mainContent__inner {
  padding-top: 0;
  margin-top: 0;
  background: transparent;
}

/* セクション余白（PC/SP共通ベース） */
#section-blog {
  margin-top: 0;
  margin-bottom: 80px;
}

/* セクション基本設定 */
#section-blog,
.ptlBlog {
  --ptl-heading-size: clamp(22px, 2.8vw, 28px);
  --ptl-subtitle-size: clamp(16px, 2vw, 18px);
}

/* ヒーロー直後の帯（グレー背景）を強制非表示 */
.hero-section + .l-mainContent__inner {
  background: transparent;
  border: none;
}
/* @charset removed: must appear at file top; redundant here */

/* ========================================
   BLOG セクション（自動横スクロール）
======================================== */

/* セクション本体 - ID指定で最強の詳細度 */
html body #section-blog {
  background: transparent !important;
}

/* セクション全体 - 全幅対応 */
html body .ptlBlog {
  position: relative;
  /* overflow: hidden; を削除 - MOREボタンが見切れる原因 */
  isolation: isolate;
  background: transparent !important;
  /* フルブリード実装 - 画面端まで表示 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  left: 0;
  right: 0;
  transform: translateX(0);
  /* padding設定削除: 余白はmargin-bottomで管理 */
}

/* コンテナ幅統一設定 */
#section-blog .ptl-section__inner {
  max-width: var(--ptl-container-max, 1200px);
  padding-left: var(--ptl-container-pad, 20px);
  padding-right: var(--ptl-container-pad, 20px);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ヘッダー部分のみコンテナ幅で制限 */
.ptlBlog .ptl-section__inner {
  margin: 0 auto;
  overflow: visible;
  max-width: none;
  position: relative; /* MOREボタンの位置調整のため */
}

/* ヘッダー部分のみ最大幅適用 */
.ptlBlog__header {
  max-width: var(--ptl-container-max, 1200px);
  margin: 0 auto 40px;
  padding: 0 var(--ptl-container-pad, 20px);
}

/* ヘッダーは上で定義済み（削除） */

/* h2タイトルはstyle.cssの.ptl-section__titleで統一管理 */

/* カードコンテナ - 全幅対応(フルブリード強制実装) */
.ptlBlog__container {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  left: 0;
  right: 0;
  transform: translateX(0);
  overflow: hidden;
  margin-bottom: 0;
}

/* カードトラック（スクロールする部分） */
.ptlBlog__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  will-change: transform;
  margin-left: 0;
  padding-left: var(--ptl-container-pad, 20px);
  padding-right: var(--ptl-container-pad, 20px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0) translateX(0);
  -webkit-transform: translateZ(0) translateX(0);
}

/* 5記事以上でアニメーション有効 */
.ptlBlog__track.is-animated {
  animation: blog-scroll 40s linear infinite;
  animation-fill-mode: forwards;
}

/* 4記事以下は中央揃え（アニメーションなし） */
.ptlBlog__track.is-static {
  justify-content: center;
  max-width: var(--ptl-container-max, 1200px);
  margin: 0 auto;
}

@keyframes blog-scroll {
  0% { 
    transform: translateZ(0) translateX(0); 
  }
  100% { 
    transform: translateZ(0) translateX(-50%); 
  }
}


/* 🔴 新規追加: カードとタイトルのラッパー */
.ptlBlog__item {
  flex: 0 0 calc((100% - 72px) / 4);
  min-width: 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 🔴 変更: カードは画像のみ */
.ptlBlog__card {
  flex: 0 0 auto;
  width: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.ptlBlog__card:hover {
  transform: translateY(-4px);
}

/* カード画像 */
.ptlBlog__media {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 アスペクト比 */
  overflow: hidden;
  background: transparent;
}

.ptlBlog__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ptlBlog__card:hover .ptlBlog__media img {
  transform: scale(1.08);
}


/* 🔴 変更: タイトルはカードの外に独立 */
.ptlBlog__title {
  padding: 0;
  margin: 0;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 600;
  line-height: 1.6;
  color: #333;
  letter-spacing: 0.04em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* 🔴 追加: タイトル内のリンク */
.ptlBlog__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ptlBlog__title a:hover {
  color: #5F6368;
}

/* MOREボタン（NEWSと完全統一 - style.cssで定義） */
.ptlBlog__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  max-width: var(--ptl-container-max, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--ptl-container-pad, 20px);
  position: relative; /* 確実に表示されるよう設定 */
  z-index: 10; /* 他の要素より前面に配置 */
  width: 100%; /* 幅を確保 */
}

/* .ptlBlog__moreBtnはstyle.cssの.ptl-news__moreBtnと同じスタイルを使用 */

/* 投稿がない場合のメッセージ */
.ptlBlog__empty {
  text-align: center;
  padding: 60px 20px;
  color: #777;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.8;
  max-width: var(--ptl-container-max, 1200px);
  margin: 0 auto;
}