/* ===== ページ固有スタイル ===== */

/* ===== 会社概要 ===== */
.about-section {
  width: 100%;
}

.about-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 40px);
}

.about-inner .section-title {
  margin-bottom: 48px;
}

.about-table {
  width: 100%;
  border-collapse: collapse;
}

.about-table tr {
  border-bottom: 1px solid var(--border);
}

.about-table tr:first-child {
  border-top: 1px solid var(--border);
}

.about-table th {
  width: 200px;
  padding: 20px 16px;
  text-align: left;
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  vertical-align: top;
  white-space: nowrap;
}

.about-table td {
  padding: 20px 16px;
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--text-muted);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .about-table th,
  .about-table td {
    display: block;
    width: auto;
  }
  .about-table th { padding-bottom: 4px; }
  .about-table td { padding-top: 4px; padding-bottom: 20px; }
  .about-table tr { display: block; }
}

/* ===== セクションをフル幅化 ===== */
section,
div[id]{
  width:100%;
  position:relative;
}

/* ===== product-section をフルブリード化 ===== */
.product-section{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

/* 中央コンテンツ用 */
.product-section > *{
  max-width:1080px;
  margin:0 auto;
  padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 40px);
}

/* ===== セクション背景（グラデーション区切り） ===== */

/* PRODUCT 02: プレカットフィルム — 上から黒→グレーへフェード */
#products-film {
  background: linear-gradient(to bottom, var(--bg-dark) 0px, #1a1a1a 100px, #1a1a1a 100%);
}

/* PRODUCT 03: カーフィルム塾 — グレー→黒へフェード */
#works {
  background: linear-gradient(to bottom, #1a1a1a 0px, var(--bg-dark) 100px, var(--bg-dark) 100%);
}

/* COMPANY — 黒→グレーへフェード */
#about {
  background: linear-gradient(to bottom, var(--bg-dark) 0px, #1a1a1a 100px, #1a1a1a 100%);
}

/* CTA — グレー→黒へフェード */
#contact {
  background: linear-gradient(to bottom, #1a1a1a 0px, #0d0d0d 100px, #0d0d0d 100%);
}

/* ===== ヒーローはそのままフル幅維持 ===== */
.hero{
  width:100%;
}

/* ===== カード ===== */
.card{
  background: rgba(22, 22, 22, 0.95);
  backdrop-filter: blur(6px);
  margin-top: 0;
}

/* ===== セクション間の余白リセット ===== */
.product-section + .product-section{
  margin-top:0;
}

/* ===== footerもフル幅 ===== */
footer{
  width:100%;
}

/* ===== CTA inner調整 ===== */
.cta-inner{
  max-width:1280px;
  margin:0 auto;
}

/* ===== cards-grid 上パディングリセット ===== */
.product-section > .cards-grid {
  padding-top: 0;
}

/* フィルム販売・塾 → 2カラム */
#products-film .cards-grid,
#works .cards-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ===== ① セクションタイトル アクセントライン ===== */
.product-header .section-title {
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  line-height: 1.25;
}

/* ===== ④ 説明テキスト 読みやすさ改善 ===== */
.product-desc {
  font-size: clamp(13.5px, 1.4vw, 15px);
  line-height: 2.1;
  max-width: 700px;
  margin-top: 20px;
}

/* ===== ② product-header 2カラム化（PC） ===== */

/* ===== レスポンシブ ===== */
@media (max-width: 768px){
  .product-section > *{
    padding: clamp(32px, 6vw, 60px) clamp(16px, 4vw, 32px);
  }
  .product-section > .cards-grid {
    padding-top: 0;
  }
  #products-film .cards-grid,
  #works .cards-grid,
  #features .cards-grid {
    grid-template-columns: 1fr;
  }
}