/* ============================================================
   c-section.css  汎用セクションコンポーネント
   ------------------------------------------------------------
   BEM-like 命名規則:
     .c-sec          セクション基底
     .c-row          flex 行（通常）
     .c-row--side    小画像＋テキスト横並び・左インデント
     .c-row--edge    Edge bleed 行
     .c-row--center  天地中央（Edge bleed 用）
     .c-fig          画像ブロック
     .c-fig--edge    Edge bleed 画像（58vw）
     .c-fig--edge-s  Edge bleed 画像・小（54vw）
     .c-fig--side    サイド小画像（18vw）
     .c-cap          画像キャプション
     .c-txt          テキストブロック
     .c-en           EN ラベル（明朝・font-size のみ）
     .c-catch        キャッチコピー（明朝・font-size のみ）
============================================================ */


/* ============================================================
   セクション (c-sec)
============================================================ */

.c-sec {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}

/* 背景バリアント */
.c-sec--dark  { background: var(--colors-main-to-01); }
.c-sec--cream { background: var(--colors-main-to-02); }

/* Edge bleed: 上下 padding をゼロに
   ページ固有の余白は詳細度の高いセレクタで上書き */
.c-sec--edge { padding: 0 !important; }


/* ============================================================
   Row: 通常レイアウト (c-row)
============================================================ */

.c-row {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* 逆順 */
.c-row--rev { flex-direction: row-reverse; }


/* ============================================================
   Row: サイドレイアウト (c-row--side)
   - 小画像（18vw）左 ＋ テキスト右
   - 左インデントで画像をブラウザ端から離す
   - 天地中央
============================================================ */

.c-row--side {
  max-width: none;
  padding: 0 max(48px, 6vw) 0 max(120px, 12vw);
  gap: 80px;
  align-items: center;
}


/* ============================================================
   Row: Edge bleed (c-row--edge)
============================================================ */

.c-row--edge {
  display: flex;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  align-items: stretch;
}

/* 天地中央 + 画像を自然な高さで表示 */
.c-row--center {
  align-items: center !important;
}
.c-row--center .c-fig--edge,
.c-row--center .c-fig--edge-s {
  min-height: auto;
}
.c-row--center .c-fig--edge img,
.c-row--center .c-fig--edge-s img {
  height: auto;
  object-fit: initial;
}


/* ============================================================
   Figure (c-fig)
============================================================ */

.c-fig {
  flex-shrink: 0;
  position: relative;
}
.c-fig img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 0 !important;
}

/* Edge bleed 画像: 通常 58vw */
.c-fig--edge {
  flex: 0 0 58vw;
  min-height: 460px;
  overflow: hidden;
  width: auto !important;
}
.c-fig--edge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Edge bleed 画像: 小 54vw（Sec 2 型） */
.c-fig--edge-s {
  flex: 0 0 54vw;
  min-height: auto;
  overflow: hidden;
  width: auto !important;
}
.c-fig--edge-s img {
  width: 100%;
  height: auto;
  object-fit: initial;
}

/* サイド小画像 */
.c-fig--side { width: 18vw; }


/* ============================================================
   Caption (c-cap)
============================================================ */

.c-cap {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin: 0 !important;
}


/* ============================================================
   Text block (c-txt)
============================================================ */

.c-txt {
  flex: 1;
  padding-top: 48px;
}

/* Edge bleed: テキストの上下 padding */
.c-row--edge .c-txt {
  flex: 1;
  padding-top: 80px;
  padding-bottom: 80px;
}
/* 画像左端 bleed → テキスト右の padding */
.c-row--edge:not(.c-row--rev) .c-txt {
  padding-left: clamp(32px, 4vw, 72px);
  padding-right: max(12vw, 48px);
}
/* 画像右端 bleed → テキスト左の padding */
.c-row--edge.c-row--rev .c-txt {
  padding-right: clamp(32px, 4vw, 72px);
  padding-left: max(40px, 6vw);
}

/* Side: テキスト padding リセット */
.c-row--side .c-txt {
  padding-left: 0;
  padding-right: 0;
}


/* ============================================================
   EN ラベル (c-en)
   font-family → font_mincho / letter-spacing → ls02 / margin → mb0 (HTML側)
============================================================ */

.c-en { font-size: clamp(16px, 1.5vw, 22px); }


/* ============================================================
   キャッチコピー (c-catch)
   font-family → font_mincho / margin → mb0 (HTML側)
============================================================ */

.c-catch { font-size: clamp(18px, 1.7vw, 26px); }

/* Side: キャッチをやや小さく */
.c-row--side .c-catch { font-size: clamp(14px, 1.2vw, 19px); }


/* ============================================================
   SP (≤768px)
============================================================ */

@media screen and (max-width: 768px) {

  /* セクション base */
  .c-sec { padding: 60px 0 !important; }

  /* Row: 縦積み */
  .c-row,
  .c-row--rev {
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
  }

  /* Side row: リセット */
  .c-row--side {
    padding: 0 24px;
    gap: 32px;
    align-items: flex-start;
  }

  /* テキスト */
  .c-txt { padding-top: 0; }

  /* キャプション */
  .c-cap { font-size: 10px; }

  /* Side 画像: フル幅 */
  .c-fig--side { width: 100%; }

  /* Side テキスト */
  .c-row--side .c-txt {
    padding-left: 0;
    padding-right: 0;
  }

  /* Edge bleed: 縦積み */
  .c-row--edge,
  .c-row--edge.c-row--rev {
    flex-direction: column !important;
  }
  .c-row--edge .c-fig--edge,
  .c-row--edge .c-fig--edge-s {
    flex: none;
    width: 100% !important;
    height: 60vw;
    min-height: auto;
  }
  .c-row--edge .c-txt {
    padding: 40px 24px !important;
  }

  /* EN SP */
  .c-en { font-size: clamp(13px, 3.5vw, 16px); }

  /* キャッチ SP */
  .c-catch { font-size: clamp(16px, 4.2vw, 20px); }

  /* Side キャッチ SP */
  .c-row--side .c-catch { font-size: clamp(13px, 3.8vw, 17px); }

}