/**
 * 没入比率設計™ CSS モジュール
 * ============================================
 * IMAX 1.43:1から導き出した画像比率設計システム
 *
 * 使い方:
 * 1. このCSSをプロジェクトに読み込む
 * 2. 画像やコンテナに対応するクラスを付与
 *
 * 例: <div class="ratio-immersive"><img src="..." alt=""></div>
 */

/* ============================================
   0. 基本設定
   ============================================ */
:root {
  /* 基準幅 */
  --base-width-web: 1200px;
  --base-width-sp: 390px;
  --base-width-sns: 1080px;

  /* カラー */
  --color-main: #000;
  --color-accent: #313131;
  --color-bg: #f5f5f5;
  --color-text: #313131;
  --color-muted: #969696;
}

/* ============================================
   1. 比率クラス（コア）
   ============================================ */

/* A. IMAX型 1.43:1 - 没入 */
.ratio-immersive {
  aspect-ratio: 1.43 / 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* B. 理解型 4:3 - 解説・図解 */
.ratio-understand {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* C. 情報型 16:9 - YouTube・X */
.ratio-info {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* D. 停止型 4:5 - Instagram・CTA前 */
.ratio-stop {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* E. 強制占有型 9:16 - リール・TikTok */
.ratio-force {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  position: relative;
}

/* F. 正方形 1:1 - 汎用 */
.ratio-square {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* ============================================
   2. 比率コンテナ内の画像
   ============================================ */
.ratio-immersive img,
.ratio-understand img,
.ratio-info img,
.ratio-stop img,
.ratio-force img,
.ratio-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================
   3. セーフゾーン（中央60%）
   ============================================ */
.safe-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: auto;
  text-align: center;
}

/* ============================================
   4. 記事構造クラス
   ============================================ */
.article-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.article-section {
  margin: 80px 0;
}

/* ヒーロー（1.43:1） */
.article-hero {
  aspect-ratio: 1.43 / 1;
  width: 100%;
  margin-bottom: 64px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 図解セクション（4:3） */
.article-figure {
  aspect-ratio: 4 / 3;
  width: 100%;
  margin: 40px 0;
  background: var(--color-bg);
}

/* CTA前停止画像（4:5） */
.article-cta-image {
  aspect-ratio: 4 / 5;
  width: 80%;
  max-width: 500px;
  margin: 64px auto;
  background: var(--color-main);
}

/* ============================================
   5. LP構造クラス
   ============================================ */
.lp-container {
  max-width: 1200px;
  margin: 0 auto;
}

.lp-section {
  padding: 100px 48px;
}

@media (max-width: 768px) {
  .lp-section {
    padding: 60px 24px;
  }
}

/* LPヒーロー（1.43:1相当） */
.lp-hero {
  min-height: 70vh;
  aspect-ratio: 1.43 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  color: #fff;
}

/* LP問題提起 */
.lp-problem {
  background: var(--color-bg);
  text-align: center;
}

/* LP事例（4:3グリッド） */
.lp-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.lp-case-card {
  aspect-ratio: 4 / 3;
  background: var(--color-bg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* LP CTA前（4:5） */
.lp-pre-cta {
  aspect-ratio: 4 / 5;
  max-width: 600px;
  margin: 0 auto;
  background: var(--color-main);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
}

/* LP CTA */
.lp-cta {
  background: var(--color-main);
  color: #fff;
  text-align: center;
  padding: 120px 48px;
}

.lp-cta-button {
  display: inline-block;
  padding: 20px 48px;
  background: #fff;
  color: var(--color-main);
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  transition: opacity 0.2s;
}

.lp-cta-button:hover {
  opacity: 0.8;
}

/* ============================================
   6. SNS最適化クラス
   ============================================ */

/* Instagram フィード（4:5） */
.sns-instagram-feed {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 1080px;
}

/* Instagram ストーリー/リール（9:16） */
.sns-instagram-story {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 1080px;
}

/* X/Twitter（16:9） */
.sns-twitter {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1200px;
}

/* YouTube サムネイル（16:9） */
.sns-youtube {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1280px;
}

/* TikTok（9:16） */
.sns-tiktok {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 1080px;
}

/* ============================================
   7. ユーティリティ
   ============================================ */

/* 中央寄せ */
.ratio-center {
  margin-left: auto;
  margin-right: auto;
}

/* 幅制限 */
.ratio-w-full { width: 100%; }
.ratio-w-80 { width: 80%; }
.ratio-w-60 { width: 60%; }
.ratio-w-50 { width: 50%; }

/* 背景色 */
.ratio-bg-dark { background: var(--color-main); }
.ratio-bg-light { background: var(--color-bg); }
.ratio-bg-white { background: #fff; }

/* ============================================
   8. 9:16 UI被りエリア対策
   ============================================ */
.ratio-force .safe-content {
  /* 上下250pxはUI被り想定で使用禁止 */
  padding-top: 250px;
  padding-bottom: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================
   9. レスポンシブ対応
   ============================================ */
@media (max-width: 768px) {
  .article-container {
    padding: 0 16px;
  }

  .article-section {
    margin: 48px 0;
  }

  .article-cta-image {
    width: 100%;
  }

  .ratio-force {
    max-width: 100%;
  }
}