html {
      scroll-behavior: smooth;
    }
    body {
      color: #2F2A28; /* charcoal */
      background-color: #FAF8F5; /* warm-white */
      font-feature-settings: "palt";
    }

    /* --- デザイン方針に指定された1px単位の文字・文字組みルール --- */
    .custom-h1 {
      font-family: "Noto Serif JP", serif;
      font-size: 32px;
      font-weight: 600;
      line-height: 1.45;
      letter-spacing: 0.04em;
      color: #2F2A28;
    }
    .custom-h2 {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 22px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.03em;
      color: #2F2A28;
    }
    .custom-h3 {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: 0.02em;
      color: #2F2A28;
    }
    .custom-body {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.9;
      letter-spacing: 0.03em;
      color: #2F2A28;
    }
    .custom-caption {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.7;
      letter-spacing: 0.02em;
      color: #6F6661;
    }
    .custom-btn-text {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    /* モバイルフォントサイズ（レスポンシブオーバーライド） */
    @media (max-width: 768px) {
      .custom-h1 {
        font-size: 26px;
        line-height: 1.5;
      }
      .custom-h2 {
        font-size: 20px;
        line-height: 1.55;
      }
      .custom-body {
        font-size: 15px;
        line-height: 1.9;
      }
    }

    /* --- 余白ルール & 各種パーツ（ピクセル単位） --- */
    /* セクション上下余白 */
    .custom-section-py {
      padding-top: 96px;
      padding-bottom: 96px;
    }
    @media (max-width: 768px) {
      .custom-section-py {
        padding-top: 64px;
        padding-bottom: 64px;
      }
    }

    /* 画像と文字の余白 */
    .custom-grid-gap {
      gap: 64px;
    }
    @media (max-width: 1024px) {
      .custom-grid-gap {
        gap: 48px;
      }
    }
    @media (max-width: 768px) {
      .custom-grid-gap {
        gap: 24px;
      }
    }

    /* カード・画像の角丸 */
    .custom-rounded-img {
      border-radius: 20px;
    }
    .custom-rounded-card {
      border-radius: 24px;
    }
    .custom-rounded-btn {
      border-radius: 999px;
    }

    /* 影のルール (独自指定の超薄影) */
    .custom-shadow {
      box-shadow: 0 12px 32px rgba(47, 42, 40, 0.08);
    }

    /* ボタン挙動の精密実装 (ダスティローズ) */
    .custom-btn-main {
      background-color: #C98F8F;
      color: #FFFFFF;
      transition: all 0.3s ease-out;
    }
    .custom-btn-main:hover {
      background-color: #B77C7C;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(201, 143, 143, 0.28);
    }
    .custom-btn-main:active {
      transform: translateY(0);
      box-shadow: none;
    }

    .custom-btn-sub {
      background-color: #FFFFFF;
      color: #C98F8F;
      border: 1px solid #C98F8F;
      transition: all 0.3s ease-out;
    }
    .custom-btn-sub:hover {
      background-color: #FAF1F1;
      border-color: #B77C7C;
      color: #B77C7C;
    }

    /* テキストリンク */
    .custom-text-link {
      color: #8F6B5E;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 4px;
      transition: color 0.2s ease-out;
    }
    .custom-text-link:hover {
      color: #C98F8F;
    }

    /* アニメーション用クラス */
    .fade-in-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .fade-in-up.active {
      opacity: 1;
      transform: translateY(0);
    }