@charset "UTF-8";
/*
Style Name: ブラックダイヤLPサイト 共通変数
Page URL: https://lp.blackdia.info
Description: サイト共通のベースCSS
Version: 1.0.0
*/

/* ===================================================================
 CSS設計 - BEM + ユーティリティアーキテクチャ
 ===================================================================*/

/* ===================================================================
 1. 設計思想
 ===================================================================*/
/*
設計原則：
- BEMによるコンポーネント設計
- ユーティリティクラスによる柔軟性確保
- LP/メディアサイト共通の基盤設計
- Figma命名規則との一貫性維持
- 14px=1rem基準の統一フォントシステム
- LINE Seed JP優先のフォントスタック

命名規則例：
- Block: .c-lp-{component-name}
- Element: .c-lp-{component-name}__{element-name}
- Modifier: .c-lp-{component-name}--{modifier-name}
- Utility: .u-{property}-{value}
- Layout: .l-{layout-name}
*/

/* ===================================================================
 2. HTML基準設定
 ===================================================================*/

html {
  font-size: var(--base-font-size); /* 14px */
  line-height: var(--line-height-normal);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  font-display: swap;
}

main {
  margin: 0 auto;
}

/* ===================================================================
 4. 基本要素のタイポグラフィ（14px基準）
 ===================================================================*/

/* 基本テキスト */
p {
  margin: 0 0 1rem;
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
  word-break: normal;
}

/* ===================================================================
 5. 見出しシステム（階層的スケール）
 ===================================================================*/

h1, .h1,
h2, .h2 {
  font-size: var(--font-2xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 2rem 0 1rem;
  clear: both;
}

h3,
.h3 {
  font-size: var(--font-xl);
  line-height: var(--line-height-tight);
  margin: 1.5rem 0 0.75rem;
}

h4,
.h4 {
  font-size: var(--font-lg);
  line-height: var(--line-height-normal);
  margin: 1.25rem 0 0.5rem;
}

h5,
.h5 {
  font-size: var(--font-md);
  line-height: var(--line-height-normal);
  margin: 1rem 0 0.5rem;
}

h6,
.h6 {
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin: 1rem 0 0.5rem;
}

/* サイドバー専用見出し */
#side h2,
#side .h2,
#side h3,
#side .h3 {
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  margin: 0.5rem 0 0;
}

/* ===================================================================
 7. 特殊用途タイポグラフィ
 ===================================================================*/

/* リード文 */
.lead,
.text-lead {
  font-size: var(--font-md);
  line-height: var(--line-height-relaxed);
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 1.5rem;
}

/* キャプション */
.caption,
figcaption,
.text-caption {
  font-size: var(--font-sm);
  line-height: var(--line-height-relaxed);
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: var(--letter-spacing-wide);
}

/* 小さなテキスト */
small,
.text-small {
  font-size: var(--font-xs);
  line-height: var(--line-height-normal);
}

/* ===================================================================
 8. レイアウトシステム（iPhone16 Pro基準）
 ===================================================================*/

/* === コンテナシステム（モバイルファースト） === */

.l-container {
  width: 100%;
  max-width: var(--mobile-base-width);
  margin: 0 auto;
  padding: 0 var(--mobile-margin);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .l-container {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .l-container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1440px) {
  .l-container {
    max-width: var(--container-xl);
  }
}

/* コンテナバリエーション */
.l-container--sm {
  max-width: var(--container-sm);
}
.l-container--md {
  max-width: var(--container-md);
}
.l-container--lg {
  max-width: var(--container-lg);
}
.l-container--xl {
  max-width: var(--container-xl);
}
.l-container--fluid {
  max-width: 100%;
}

/* === 4列グリッドシステム（iPhone16 Pro基準） === */
.l-grid {
  display: grid;
  gap: var(--mobile-gutter);
  width: 100%;
}

@media (min-width: 768px) {
  .l-grid {
    gap: var(--space-xl);
  }
}

/* iPhone16 Pro 4列グリッド */
.l-grid--cols-4 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mobile-gutter);
}

@media (min-width: 768px) {
  .l-grid--cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .l-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.l-grid--cols-1 {
  grid-template-columns: 1fr;
}

.l-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mobile-gutter);
}

.l-grid--cols-3 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mobile-gutter);
}

@media (min-width: 768px) {
  .l-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 追加グリッド（タブレット以上） */
.l-grid--cols-6 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .l-grid--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

.l-grid--cols-12 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .l-grid--cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

.l-grid--cols-8 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
  .l-grid--cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* 列幅の個別指定（iPhone16 Pro基準） */
.l-grid__col-1 {
  grid-column: span 1;
}
.l-grid__col-2 {
  grid-column: span 2;
}
.l-grid__col-3 {
  grid-column: span 3;
}
.l-grid__col-4 {
  grid-column: span 4;
}

/* 特殊グリッドアイテム位置制御 */
.l-grid__item-center-span-2 {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - var(--mobile-gutter)) / 2) !important;
}

/* === フレックスレイアウト === */
.l-flex {
  display: flex;
  gap: var(--mobile-gutter);
}

.l-flex--column {
  flex-direction: column;
}
.l-flex--wrap {
  flex-wrap: wrap;
}
.l-flex--center {
  align-items: center;
  justify-content: center;
}
.l-flex--between {
  justify-content: space-between;
}
.l-flex--around {
  justify-content: space-around;
}
.l-flex--start {
  justify-content: flex-start;
}
.l-flex--end {
  justify-content: flex-end;
}

/* === セクションレイアウト（モバイル基準） === */

.l-section,
.l-container {
  padding: 0;
}

@media (min-width: 768px) {
  .l-section,
  .l-container {
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .l-section,
  .l-container {
    padding: 0;
  }
}

.l-section--sm,
.l-container--sm {
  padding: var(--space-lg) 16px;
}

@media (min-width: 768px) {
  .l-section--sm,
  .l-container--sm {
    padding: var(--space-xl) 16px;
  }
}

.l-section--md,
.l-container--md {
  padding: var(--space-xl) 16px;
}

@media (min-width: 768px) {
  .l-section--md,
  .l-container--md {
    padding: var(--space-2xl) 16px;
  }
}

@media (min-width: 1024px) {
  .l-section--md,
  .l-container--md {
    padding: var(--space-3xl) 16px;
  }
}

.l-section--lg,
.l-container--lg {
  padding: var(--space-2xl) 16px;
}

@media (min-width: 768px) {
  .l-section--lg,
  .l-container--lg {
    padding: var(--space-3xl) 16px;
  }
}

@media (min-width: 1024px) {
  .l-section--lg,
  .l-container--lg {
    padding: var(--space-4xl) 16px;
  }
}

.l-section--xl,
.l-container--xl {
  padding: var(--space-3xl) 16px;
}

@media (min-width: 768px) {
  .l-section--xl,
  .l-container--xl {
    padding: var(--space-4xl) 16px;
  }
}

/* ===================================================================
 9. ユーティリティクラス（14px基準）
 ===================================================================*/

/* === 表示制御 === */
.u-hidden {
  display: none;
}

.u-visible {
  display: block;
}

.u-hidden-mobile {
  display: none;
}

@media (min-width: 403px) {
  .u-hidden-mobile {
    display: block;
  }
}

.u-hidden-tablet {
  display: block;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .u-hidden-tablet {
    display: none;
  }
}

.u-hidden-desktop {
  display: block;
}

@media (min-width: 1024px) {
  .u-hidden-desktop {
    display: none;
  }
}

/* === フォントサイズ === */
.u-font-size-xs {
  font-size: var(--font-xs);
}
.u-font-size-sm {
  font-size: var(--font-sm);
}
.u-font-size-base {
  font-size: var(--font-base);
}
.u-font-size-md {
  font-size: var(--font-md);
}
.u-font-size-lg {
  font-size: var(--font-lg);
}
.u-font-size-xl {
  font-size: var(--font-xl);
}
.u-font-size-2xl {
  font-size: var(--font-2xl);
}
.u-font-size-3xl {
  font-size: var(--font-3xl);
}

/* === フォントウェイト === */
.u-font-weight-light {
  font-weight: var(--font-weight-light);
}
.u-font-weight-normal {
  font-weight: var(--font-weight-normal);
}
.u-font-weight-medium {
  font-weight: var(--font-weight-medium);
}
.u-font-weight-semibold {
  font-weight: var(--font-weight-semibold);
}
.u-font-weight-bold {
  font-weight: var(--font-weight-bold);
}

/* === 行間 === */
.u-line-height-tight {
  line-height: var(--line-height-tight);
}
.u-line-height-normal {
  line-height: var(--line-height-normal);
}
.u-line-height-relaxed {
  line-height: var(--line-height-relaxed);
}

/* === レターシャーシング === */
.u-letter-spacing-tight {
  letter-spacing: var(--letter-spacing-tight);
}
.u-letter-spacing-normal {
  letter-spacing: var(--letter-spacing-normal);
}
.u-letter-spacing-wide {
  letter-spacing: var(--letter-spacing-wide);
}

/* === テキストアライメント === */
.u-text-left {
  text-align: left;
}
.u-text-center {
  text-align: center;
}
.u-text-right {
  text-align: right;
}
.u-text-justify {
  text-align: justify;
}

/* === 英字フォント適用 === */
.u-font-en {
  font-family: var(--font-family-en);
  font-optical-sizing: auto;
  font-style: normal;
}

/* === スペーシング（margin-top） === */
.u-mt-0 {
  margin-top: 0;
}
.u-mt-sm {
  margin-top: var(--space-sm);
}
.u-mt-md {
  margin-top: var(--space-md);
}
.u-mt-lg {
  margin-top: var(--space-lg);
}
.u-mt-xl {
  margin-top: var(--space-xl);
}
.u-mt-2xl {
  margin-top: var(--space-2xl);
}

/* === スペーシング（margin-bottom） === */
.u-mb-0 {
  margin-bottom: 0;
}
.u-mb-sm {
  margin-bottom: var(--space-sm);
}
.u-mb-md {
  margin-bottom: var(--space-md);
}
.u-mb-lg {
  margin-bottom: var(--space-lg);
}
.u-mb-xl {
  margin-bottom: var(--space-xl);
}
.u-mb-2xl {
  margin-bottom: var(--space-2xl);
}

/* === スペーシング（padding） === */
.u-p-sm {
  padding: var(--space-sm);
}
.u-p-md {
  padding: var(--space-md);
}
.u-p-lg {
  padding: var(--space-lg);
}
.u-p-xl {
  padding: var(--space-xl);
}
.u-p-2xl {
  padding: var(--space-2xl);
}

/* ===================================================================
 10. レスポンシブ調整（大画面対応）
 ===================================================================*/

/* 大画面でのベースサイズ調整 */
@media (min-width: 1441px) {
  :root {
    --font-base: 1.125rem; /* 15.75px */
    --font-md: 1.313rem; /* 18.38px */
  }
}

/* 高解像度ディスプレイ対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ===================================================================
 11. パフォーマンス最適化
 ===================================================================*/

/* Above-the-fold最適化 */
.critical-fonts {
  font-family: var(--font-family-base);
  font-display: swap;
}

/* Critical CSSでの読み込み優先度 */
.font-critical {
  font-family: var(--font-family-base);
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
}

/* ===================================================================
 12.画像最適化
 ===================================================================*/
img {
  width: 100%;
  height: auto;
}