@font-face {
    font-family: 'DB Helvethaica X 55';
    src: url('DBHelvethaicaX-55Regular.woff2') format('woff2'),
        url('DBHelvethaicaX-55Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
  
html,
body {
    -webkit-text-size-adjust: 100%;
    width:100%;
    padding:0;
    margin:0;
    color: #ffffff;
    background-color: #d73d34;
    font-family: "DB Helvethaica X 55";
}

img {
    width: 100%;
    height: auto;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

@media screen and ( min-width: 300px ) {
    .page-container {
        display: block;
        position: relative;
        width: 100%;
        margin: 0px auto;
    }

    .page-content-01,
    .page-content-02 {
        display: block;
        position: absolute;
        z-index: 2;
        width: 100%;
        margin: 0px;
    }

    .page-content-01 {
        padding-top: 300px;
    }

    .page-content-02 {
        padding-top: 150px;
    }

    .page-bg {
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
    }

    .btn-panel {
        display: block;
        text-align: center;
        padding: 10px 20px;
        width: 80%;
        margin: 10px auto;
    }

    .nBtn {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }

    .sBtn {
        display: block;
        width: 60%;
        margin: 20px auto;
    }

    .txt-panel {
        display: block;
        width: 80%;
        margin: 20px auto;
    }

    .form-panel {
        display: block;
        width: 80%;
        margin: 0px auto;
        background-image: url('../img/bg-long.png');
        background-size: contain;
        background-repeat: repeat-y;
        border-radius: 30px;
        padding: 20px 30px;
    }

    .form-header {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 24px;
    }

    .form-topic {
        display: block;
        width: 100%;
        text-align: left;
        margin: 10px 0px;
        font-weight: bold;
        font-size: 16px;
    }

    .form-label {
        display: block;
        width: 100%;
        text-align: left;
        margin: 10px 0px; 
        font-size: 16px;
    }

    input[type='text'] {
        display: block;
        border: 0px;
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    input[type='text']::placeholder {
        font-size: 6px;
    }

    .check-row {
        display: flex;
        width: 100%;
        padding: 0px;
        margin: 10px auto;
        gap: 10px;
    }

    .check-box {
        flex:none;
    }

    .check-label {
        flex:1;
    }

    .show {
        display: block;
    }

    .hidden {
        display: none;
    }

}

@media screen and ( min-width: 1000px ) {
    .page-container {
        max-width: 500px;
    }
}