* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Noto Serif SC';
    src: local('Noto Serif SC'), url('fonts/noto-serif-sc.otf');
    font-weight: regular;
}

@font-face {
    font-family: 'Noto Serif SC';
    src: local('Noto Serif SC'), url('fonts/noto-serif-sc-bold.otf');
    font-weight: bold;
}

@font-face {
    font-family: 'Noto Serif JP';
    src: local('Noto Serif JP'), url('fonts/noto-serif-jp.otf');
}

@font-face {
    font-family: 'Noto Serif';
    src: local('Noto Serif'), url('fonts/noto-serif.ttf');
}

body {
    min-height: 100vh;
    min-width: 700px;
    max-width: 3000px;
    margin: 0 auto;
    padding: 50px 10%;

    font-family: 'Noto Serif SC', 'SimSun', serif;
    color: rgb(0, 14, 40);
    font-display: swap;

    background-image: linear-gradient(150deg, rgb(250, 253, 255), rgb(245, 251, 255));
}

.title-field {
    text-align: center;
    line-height: 1.5;
}

.title-field .home.level1 {
    font-size: 96px;
    font-weight: bold;
}

.title-field .home.level2 {
    font-size: 30px;
}

.title-field .home.level3 {
    font-size: 25px;
}

.title-field .function.level1 {
    font-size: 60px;
    font-weight: bold;
}

.title-field .function.level2 {
    font-size: 25px;
}

.title-field .function.level3 {
    font-size: 20px;
}

.z-icon.home::before {
    content: 'Z';
    position: relative;
    left: 0.5em;
    top: 0px;
}

.z-icon.function {
    height: 80px;
}

.nowrap {
    white-space: nowrap;
}

:lang(en) {
    font-family: 'Noto Serif', 'Centaur', 'Times New Roman', Times, serif;
}

:lang(ja) {
    font-family: 'Noto Serif JP', 'MS Mincho', serif;
}

.sep {
    height: 50px;
}

.small-sep {
    height: 30px;
}

.content {
    line-height: 1.5;
}

p {
    margin: 20px 0;

    text-indent: 2em;
}

p.home {
    font-size: 35px;
}

p.function {
    font-size: 32px;
}

.function-table {
    gap: 30px;

    font-size: 24px;

    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    justify-content: center;
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.button {
    padding: 5px;

    font-family: inherit;
    color: inherit;
    text-align: center;
    text-decoration: none;

    background-image: linear-gradient(to bottom right, rgb(220, 247, 253), rgb(191, 239, 252));
    box-shadow: 3px 3px 3px 1px rgb(188, 212, 221);
    border: none;
    border-radius: 5px;
}

.button:hover {
    background-image: linear-gradient(to bottom right, rgb(213, 239, 245), rgb(185, 231, 244));

    cursor: pointer;
}

.button:active {
    background-image: linear-gradient(to bottom right, rgb(205, 231, 236), rgb(178, 223, 235));
}

.function-box {
    width: 200px;
    height: 200px;

    padding: 15px;
}

.beian {
    font-size: 18px;
}

.back-field {
    width: 100%;
    padding: 5px;

    font-size: 30px;

    display: flex;
    justify-content: space-between;
}

.back {
    width: 180px;
    height: 80px;

    display: grid;
    grid-template-columns: 20px 60px 80px 20px;
}

.text-input {
    padding: 5px;

    font-family: inherit;
    font-size: 20px;

    background-color: rgb(251, 253, 254);
    border-radius: 5px;

    scroll-behavior: smooth;
    resize: none;
}

.border {
    border: solid 1px rgb(0, 60, 80);;
}