/* =========================================================
   BUSINESS BACKGROUND SYSTEM
   背景幅・中央配置・背景デザイン 共通
   ========================================================= */


/* =========================================================
   01. BASE
   ========================================================= */

/*
 * business-bg-wide
 * 100%を超える背景用
 *
 * business-bg-width
 * 100%以下の背景用
 */
.business-bg-wide,
.business-bg-width {
  position: relative;
  box-sizing: border-box;
  max-width: none !important;
  padding: 48px;
}


/* =========================================================
   02. WIDTH VARIABLE
   ========================================================= */

/* viewport full */
.business-bg-wide--full {
  --business-bg-size: 100vw;
}

/* 100%より大きい背景 */
.business-bg-wide--120 {
  --business-bg-size: 120%;
}

.business-bg-wide--110 {
  --business-bg-size: 110%;
}

.business-bg-wide--105 {
  --business-bg-size: 105%;
}

/* 100%以下 */
.business-bg-width--100 {
  --business-bg-size: 100%;
}

.business-bg-width--95 {
  --business-bg-size: 95%;
}

.business-bg-width--90 {
  --business-bg-size: 90%;
}

.business-bg-width--85 {
  --business-bg-size: 85%;
}

.business-bg-width--80 {
  --business-bg-size: 80%;
}

.business-bg-width--75 {
  --business-bg-size: 75%;
}

.business-bg-width--70 {
  --business-bg-size: 70%;
}

.business-bg-width--65 {
  --business-bg-size: 65%;
}

.business-bg-width--60 {
  --business-bg-size: 60%;
}

.business-bg-width--55 {
  --business-bg-size: 55%;
}


/* =========================================================
   03. WIDE POSITION
   120% / 110% / 105% / FULL
   すべて同じ計算方法で中央配置
   ========================================================= */

.business-bg-wide {
  width: var(--business-bg-size, 100%) !important;

  left: 50% !important;
  right: auto !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  transform: translateX(-50%) !important;
}


/* =========================================================
   04. NORMAL WIDTH POSITION
   100% / 95% / 90% ...
   ========================================================= */

.business-bg-width {
  width: var(--business-bg-size, 100%) !important;

  left: auto !important;
  right: auto !important;

  margin-left: auto !important;
  margin-right: auto !important;

  transform: none !important;
}


/* =========================================================
   05. BEIGE2
   120 / 110 / 105 / 100 / 95 共通
   「110% BEIGE2」のデザインを基準に統一
   ========================================================= */

.business-bg-style--beige,
.business-bg110--beige,
.business-bg105--beige,
.business-bg100--beige,
.business-bg95--beige {
  background:
    linear-gradient(
      135deg,
      #F8F5F0 0%,
      #EFE8DF 100%
    ) !important;
}


/* =========================================================
   06. GOLD LINE
   ========================================================= */

.business-bg-style--gold-line,
.business-bg110--gold-line,
.business-bg105--gold-line,
.business-bg100--gold-line,
.business-bg95--gold-line {
  position: relative;
  border: 1px solid rgba(181, 138, 59, 0.28);
  background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(73, 51, 40, 0.06);
}

.business-bg-style--gold-line::before,
.business-bg110--gold-line::before,
.business-bg105--gold-line::before,
.business-bg100--gold-line::before,
.business-bg95--gold-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 120px;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      #8F6826 0%,
      #D7B76E 65%,
      transparent 100%
    );

  pointer-events: none;
}


/* =========================================================
   07. BURGUNDY
   ========================================================= */

.business-bg-style--burgundy,
.business-bg110--burgundy,
.business-bg105--burgundy,
.business-bg100--burgundy,
.business-bg95--burgundy {
  position: relative;

  border-left: 4px solid var(--business-sub);

  background:
    linear-gradient(
      135deg,
      #FBF7F6 0%,
      #F2E7E5 100%
    );
}


/* =========================================================
   08. NAVY
   ========================================================= */

.business-bg-style--navy,
.business-bg110--navy,
.business-bg105--navy,
.business-bg100--navy,
.business-bg95--navy {
  position: relative;

  border: 1px solid rgba(181, 138, 59, 0.24);

  background:
    linear-gradient(
      135deg,
      #1D3042 0%,
      #152431 100%
    );

  box-shadow:
    0 14px 32px rgba(29, 48, 66, 0.14);

  color: #FFFFFF;
}


/* NAVY内の文字 */
.business-bg-style--navy
:is(
  h2,
  h3,
  p,
  .business-content-title,
  .business-section-label,
  .business-card__title,
  .business-card__text,
  .business-text
),
.business-bg110--navy
:is(
  h2,
  h3,
  p,
  .business-content-title,
  .business-section-label,
  .business-card__title,
  .business-card__text,
  .business-text
),
.business-bg105--navy
:is(
  h2,
  h3,
  p,
  .business-content-title,
  .business-section-label,
  .business-card__title,
  .business-card__text,
  .business-text
),
.business-bg100--navy
:is(
  h2,
  h3,
  p,
  .business-content-title,
  .business-section-label,
  .business-card__title,
  .business-card__text,
  .business-text
),
.business-bg95--navy
:is(
  h2,
  h3,
  p,
  .business-content-title,
  .business-section-label,
  .business-card__title,
  .business-card__text,
  .business-text
) {
  color: #FFFFFF !important;
}


/* =========================================================
   09. LUXURY
   ========================================================= */

.business-bg-style--luxury,
.business-bg110--luxury,
.business-bg105--luxury,
.business-bg100--luxury,
.business-bg95--luxury {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(181, 138, 59, 0.34);

  background:
    linear-gradient(
      145deg,
      #FFFDF9 0%,
      #F5EDE2 100%
    );

  box-shadow:
    0 14px 34px rgba(73, 51, 40, 0.08);
}


/* 内側の細いゴールド枠 */
.business-bg-style--luxury::before,
.business-bg110--luxury::before,
.business-bg105--luxury::before,
.business-bg100--luxury::before,
.business-bg95--luxury::before {
  content: "";
  position: absolute;
  inset: 9px;

  border: 1px solid rgba(181, 138, 59, 0.18);

  pointer-events: none;
}


/* 中身を装飾より前面へ */
.business-bg-style--luxury > *,
.business-bg110--luxury > *,
.business-bg105--luxury > *,
.business-bg100--luxury > *,
.business-bg95--luxury > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
   10. 95% SPECIAL WHITE DESIGNS
   既存クラスをそのまま利用
   ========================================================= */


/* WHITE + GOLD */
.business-bg95--white-gold {
  position: relative;

  border: 1px solid rgba(181, 138, 59, 0.24);

  background: #FFFFFF;

  box-shadow:
    0 10px 28px rgba(73, 51, 40, 0.06);
}

.business-bg95--white-gold::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 120px;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      #8F6826 0%,
      #D7B76E 70%,
      transparent 100%
    );

  pointer-events: none;
}


/* WHITE + NAVY */
.business-bg95--white-navy {
  position: relative;

  border: 1px solid rgba(29, 48, 66, 0.18);

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FAFBFC 100%
    );

  box-shadow:
    0 10px 26px rgba(29, 48, 66, 0.06);
}

.business-bg95--white-navy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background: var(--business-navy);

  pointer-events: none;
}


/* WHITE + BURGUNDY */
.business-bg95--white-burgundy {
  position: relative;

  border: 1px solid rgba(118, 47, 58, 0.16);

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FCF8F8 100%
    );

  box-shadow:
    0 10px 26px rgba(118, 47, 58, 0.05);
}

.business-bg95--white-burgundy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--business-sub) 0%,
      var(--business-gold) 45%,
      transparent 75%
    );

  pointer-events: none;
}


/* WHITE FRAME */
.business-bg95--white-frame {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(73, 51, 40, 0.16);

  background: #FFFFFF;

  box-shadow:
    0 8px 24px rgba(73, 51, 40, 0.05);
}

.business-bg95--white-frame::before {
  content: "";
  position: absolute;
  inset: 9px;

  border: 1px solid rgba(181, 138, 59, 0.16);

  pointer-events: none;
}


/* WHITE LUXURY */
.business-bg95--white-luxury {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(181, 138, 59, 0.24);

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FFFDF9 58%,
      #F8F2E9 100%
    );

  box-shadow:
    0 14px 34px rgba(73, 51, 40, 0.08);
}

.business-bg95--white-luxury::before {
  content: "";
  position: absolute;

  top: -80px;
  right: -70px;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(215, 183, 110, 0.10) 0%,
      rgba(215, 183, 110, 0.03) 45%,
      transparent 72%
    );

  pointer-events: none;
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 767px) {

  /*
   * スマホでは横幅指定を解除。
   * 120 / 110 / 105 / 100 / 95 ... 全て100%。
   */
  .business-bg-wide,
  .business-bg-width {
    width: 100% !important;
    max-width: none !important;

    left: auto !important;
    right: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;

    transform: none !important;

    padding: 32px 20px;
  }

}