/* ==============================================================================
 * COLOR PALETTE (BASE_ADD.CSS SCOPE)
 * ============================================================================== */

:root {
  --upper-color-1: #1d3d5e;
  /* メイン：深みのあるディープネイビー */
  --upper-color-2: #2b4365;
  /* サブ：濃い青 */
  --upper-color-3: #7b9098;
  /* ニュートラル1：落ち着いたブルーグレー */
  --upper-color-4: #a7bcc7;
  /* ニュートラル2：淡い青 */
  --upper-color-5: #cccccc;
  /* 背景：ライトグレー */

  --lower-color-1: #b8d0ed;
  /* メイン：透明感のあるライトブルー */
  --lower-color-2: #c8ddf2;
  /* サブ：アクアブルー */
  --lower-color-3: #e1e8ee;
  /* ニュートラル：オフホワイト */
  --lower-color-4: #9d8c56;
  /* アクセント1：マットで上品なゴールド */
  --lower-color-5: #d4af37;
  /* アクセント2：輝きのあるゴールド */
}

/* ==============================================================================
 * MESSAGE SECTION STYLES
 * ============================================================================== */
.l-msg-section {
  background: linear-gradient(
    135deg,
    var(--upper-color-1) 0%,
    var(--upper-color-2) 100%
  );
  padding: 72px 24px;
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  /* Google Fonts想定 */
  position: relative;
  overflow: hidden;
}

/* 幾何学的なバックグラウンドの装飾（Overlayアクセント） */
.l-msg-section::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(184, 208, 237, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.l-msg-container {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.p-msg-box {
  width: 100%;
}

/* サブタイトル（ゴールドのアクセント） */
.p-msg-box__subtitle {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--lower-color-5);
  font-weight: 700;
  margin-bottom: 24px;
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
}

.p-msg-box__subtitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: var(--lower-color-4);
}

/* メインタイトル */
.p-msg-box__title {
  font-size: 30px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 32px;
  color: #ffffff;
}

/* リード文 */
.p-msg-box__lead {
  font-size: 18px;
  font-weight: 700;
  color: var(--lower-color-2);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* 説明文 */
.p-msg-box__desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--lower-color-3);
  text-align: justify;
  margin-bottom: 48px;
}

/* ボタン */
.p-msg-box__btn-wrap {
  text-align: center;
}

.p-msg-box__btn {
  display: inline-block;
  min-width: 240px;
  padding: 18px 40px;
  background-color: transparent;
  border: 1px solid var(--lower-color-4);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  position: relative;
}

.p-msg-box__btn:hover {
  background-color: var(--lower-color-4);
  color: var(--upper-color-1);
  border-color: var(--lower-color-4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* レスポンシブ用の簡易設定 */
.u-sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .l-msg-section {
    padding: 70px 20px;
  }

  .p-msg-box__title {
    font-size: 24px;
  }

  .p-msg-box__lead {
    font-size: 16px;
  }

  .p-msg-box__desc {
    font-size: 14px;
  }

  .u-sp-only {
    display: block;
  }
}