/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 22 2026 | 08:18:42 */
/* =========================================================
   Baby-J 芸術・創造LP｜専用CSS

   役割：
   ・共通CSSでは持たない「芸術・創造LP固有」の差分のみ管理
   ・レイアウト / レスポンシブの基本設計は Common CSS がSSOT
   ・Sports側には影響させない

   対象：
   <main class="bj-art">
========================================================= */


/* =========================================================
   ART 02｜4つの価値
   WebPアイコン対応
   ※SportsはSVG、ArtはWebP画像
========================================================= */

/* ---------------------------------------------------------
   PC / タブレット
--------------------------------------------------------- */

.bj-art .bj-value__icon img {
  display: block;

  width: auto;
  max-width: 86px;

  height: auto;
  max-height: 86px;

  object-fit: contain;
}


/* ---------------------------------------------------------
   スマホ縦 / スマホ横
--------------------------------------------------------- */

@media (max-width: 767px) {

  .bj-art .bj-value__icon img {
    max-width: 62px;
    max-height: 62px;
  }

}

/* =========================================================
   ART 01｜ヒーロー
   芸術・創造LP専用レスポンシブ

   ・PCの構図はCommonを使用
   ・タブレットは人物の切れ方だけ調整
   ・SPはArt専用画像の縦構図を活かす
   ・本文コピーは写真に負けないサイズへ調整
========================================================= */


/* ---------------------------------------------------------
   タブレット
   768px〜1023px
--------------------------------------------------------- */

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

  .bj-art .bj-hero {
    min-height: 660px;
  }

  .bj-art .bj-hero__image {
    object-position: 60% center;
  }

}


/* ---------------------------------------------------------
   スマホ縦〜小型タブレット
   767px以下
--------------------------------------------------------- */

@media (max-width: 767px) {

  /* HERO全体 */
  .bj-art .bj-hero {
    aspect-ratio: auto;
    height: clamp(620px, 100svh, 860px);
  }


  /* 画像 */
  .bj-art .bj-hero__image {
    object-position: center 44%;
  }


  /* 下部コピーを読みやすくするフェード */
  .bj-art .bj-hero::after {
    height: 42%;

    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.22) 20%,
      rgba(255, 255, 255, 0.70) 58%,
      rgba(255, 255, 255, 0.94) 100%
    );
  }


  /* 導入コピー */
  .bj-art .bj-hero__lead {
    font-size: clamp(13px, 2.35vw, 17px);
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: 0.025em;
  }


  /* 下メッセージ */
  .bj-art .bj-hero__message {
    margin-top: 10px;

    font-size: clamp(13px, 2.15vw, 16px);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.025em;
  }

}