/* Outfit */
@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/web-font/Outfit/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Libre Bodoni */
@font-face {
  font-family: 'Libre Bodoni';
  src: url('/assets/fonts/web-font/Libre_Bodoni/LibreBodoni-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Bodoni';
  src: url('/assets/fonts/web-font/Libre_Bodoni/LibreBodoni-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Teachers */
@font-face {
  font-family: 'Teachers';
  src: url('/assets/fonts/web-font/Teachers/Teachers-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Teachers';
  src: url('/assets/fonts/web-font/Teachers/Teachers-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}



/* common styles */
:root {
    /* --primary-color: #123456; */
    /* --primary-color: #376498; */
    --primary-color: #21324d;
    --text-primary-color: #333333;
    --main-bg-color: #FFFBF6;
    --secondary-bg-color: #1C39BB;

    /* jp font */
    --web-font-sans:
        "Outfit",system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* 高级感 / 品牌标题 */
    --web-font-serif: 'Libre Bodoni', serif;

    /* slogan */
    --web-font-display: 'Teachers', cursive;

}

html, body {
    height: 100%;
    
    line-height: 1.8;
    letter-spacing: 0.02em;

    /* font-family */
    font-family: var(--web-font-sans) !important;
    background-color: var(--main-bg-color) !important;
}

h1, h2, h3 {
    letter-spacing: 0.04em;    /* 标题稍微拉开 */
}

.page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 让主体内容自动撑开 */
main {
    flex: 1;
}


/* 页面主体部分 */
.page-container {
    margin-top: 86px;
}

@media (max-width: 992px) {
    .page-container {
        margin-top: 90px;
    }
}


.mb-50 {
    margin-bottom: 50px;
}

.mb-100 {
    margin-bottom: 100px;
}