@media only screen and (max-width:767px) {
    body {
        font-size: 14px;
    }

    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .main-contents {
        padding-top: 25px;
        padding-bottom: 30px;
    }

    h2 {
        font-size: 1.4em;
        margin-bottom: 20px;
    }

    h2.with-block {
        margin-bottom: 20px;
    }

    h2 span {
        padding: 3px 10px;
        border-width: 7px;
    }

    .input-text {
        height: 40px;
    }

    select {
        height: 40px;
    }

    .next-btn {
        width: 100%;
        padding: 12px;
    }

    .next-btn.credit {
        padding: 12px;
    }

    .back-btn {
        width: 100%;
        padding: 12px;
    }

    .keep-btn {
        width: 100%;
        padding: 12px;
    }

    .btn-wrap.process button,
    .btn-wrap.process input[type="submit"] {
        height: 60px;
    }

    .cancel-btn {
        width: 100%;
        padding: 12px;
    }

    .contact-btn {
        width: 100%;
        padding: 12px;
    }

    .logout-btn {
        padding: 4px 8px;
    }

    .logout-btn img {
        height: 20px;
        margin-right: 0;
    }

    .btn-wrap.col2>div {
        display: block;
    }

    .btn-wrap.col2>div:not(:first-child) {
        margin-left: 0;
        margin-bottom: 15px;
    }

    .btn-wrap.col3>div {
        display: block;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .btn-wrap.col3>div:last-child {
        margin-bottom: 0;
    }

    .modal__content {
        padding: 20px;
    }

    .modal .list-form table {
        min-width: auto;
    }

    .modal .input-area {
        margin-top: 15px;
    }

    header {
        padding: 12px 10px;
    }

    header .container {
        width: 100%;
    }

    .head-wrap .logo img {
        height: 26px;
    }

    .head-wrap .right-area .menu {
        margin-top: 7px;
        justify-content: center;
    }

    .head-wrap .right-area .menu li {
        margin-right: 0;
        margin-left: 5px;
    }

    .head-wrap .right-area .menu li a {
        font-size: 1em;
    }

    .head-wrap .right-area .menu img {
        height: 24px;
    }

    footer {
        font-size: 0.8em;
    }

    #login .container {
        align-items: flex-start;
    }

    #login .login-box {
        max-width: 600px;
        width: 100%;
    }

    #login .news-area {
        padding: 10px;
        margin-bottom: 25px;
        width: 100%;
    }

    #login .news-content-wrap {
        max-height: 16em;
    }

    #login form {
        width: 100%;
        max-width: 400px;
    }

    #login dl {
        margin-bottom: 0;
    }

    #login dt {
        background-color: #f7f7f7;
        padding: 10px;
        margin-bottom: 0;
    }

    #login dd {
        padding: 15px 10px;
    }

    #login .btn-wrap {
        margin-top: 15px;
    }

    #login .pass-forget {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #contract .comp .lead {
        margin-bottom: 20px;
    }

    .input-form h3 {
        font-size: 1.2em;
        margin-bottom: 15px;
    }

    .input-form .form-box {
        margin-bottom: 20px;
        border-bottom: 1px dotted;
        padding-bottom: 20px;
    }

    .input-form .form-box .btn-wrap {
        margin-bottom: 5px;
    }

    .input-form table {
        border: none;
    }

    .input-form table tr {
        border: none;
    }

    .input-form table th {
        width: auto;
        display: block;
        height: auto;
        padding: 10px;
        text-align: left;
    }

    .input-form table td {
        display: block;
        padding: 15px 10px;
    }

    .input-form table td .table {
        display: block;
        border-bottom: 1px dotted #d9d9d9;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .input-form table td .table:last-child {
        border: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .input-form table td .table dl {
        display: block;
    }

    .input-form table td .table dl dt {
        display: block;
        width: initial;
    }

    .input-form table td .table dl dt.pc-only {
        display: none;
    }

    .input-form table td .table dl dt .highlight {
        padding: 3px 5px;
        margin: 3px 0;
    }

    .input-form table td .table dl dd {
        display: block;
        padding: 0;
        margin-bottom: 10px;
        margin-top: 5px;
        width: initial;
    }

    .input-form table td .table dl:last-child dd {
        margin-bottom: 5px;
    }

    .input-form .import-btn-area {
        margin-bottom: 30px;
    }

    .add-delete-radio .radio-wrap {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .add-delete-radio .radio-wrap label {
        white-space: nowrap;
    }

    .input-form table td .col2>input:not(:last-child) {
        margin-right: 10px;
    }

    .input-form .btn-wrap {
        margin-top: 15px;
    }

    .input-form .pay-btn-wrap {
        margin-top: 15px;
    }

    .input-form .agree-area {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .input-form .agree-area label {
        margin: auto;
    }

    .input-form .date-flex {
        display: flex;
        align-items: center;
    }

    .input-form .date-flex span {
        margin: 0 5px;
    }

    .input-form .date-flex input {
        width: 100%;
    }

    .input-form .memo {
        position: relative;
    }

    .pass-change-link {
        margin-top: 25px;
    }

    .history-btn {
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .upload-btn {
        width: 100%;
        padding: 12px;
    }

    .list-form h3 {
        font-size: 1.2em;
    }

    .list-form table {
        white-space: nowrap;
        min-width: auto;
    }

    .list-form .btn-wrap {
        margin-top: 25px;
    }

    #contract-search .list-form {
        margin-top: 40px;
    }

    #contract-search .contract-search-btns-wrap {
        display: block;
        margin: 0;
    }

    #contract-search .contract-search-btns-wrap>div {
        width: 100%;
        padding: 0;
    }

    #contract-search .contract-search-btns-wrap>div .btn {
        font-size: 1.1em;
        padding: 12px;
        min-height: unset;
        margin-bottom: 15px;
    }

    #contract-search .contract-search-btns-wrap>div .btn br {
        display: none;
    }

    #securities-list .list-form {
        margin-top: 10px;
    }

    .complete .comp-msg {
        padding: 15px;
        margin-bottom: 25px;
        text-align: left;
    }

    .auth-code-area {
        margin-top: 15px;
    }

    .auth-code-area dl {
        margin-top: 15px;
    }

    #error .error-msg {
        padding: 15px;
        margin-bottom: 25px;
        text-align: left;
    }

    #error h3 {
        margin-bottom: 5px;
        font-size: 1.2em;
    }

    .api-error-wrap>div {
        width: 100%;
    }

    .api-error-wrap .title-wrap {
        width: 20%;
    }

    #account-check .container {
        display: block;
    }

    #account-check .select-box ul li:not(:last-child) {
        margin-bottom: 20px;
    }

    .user-contract .code-area,
    #menu .code-area,
    #agent-menu .code-area,
    #guide .code-area {
        position: static;
        margin-bottom: 15px;
        margin-top: -5px;
    }

    .user-contract .code-area dd {
        max-width: initial;
    }

    .menu-area ul {
        display: block;
        margin: 0;
    }

    .menu-area ul li {
        width: auto;
        padding: 0;
        margin-top: 15px;
    }

    .menu-area ul li a {
        padding: 15px;
        padding-right: 30px;
    }

    .menu-area ul li a::after {
        right: 15px;
    }

    .file-select label {
        padding: 30px 20px;
        border-width: 1px;
    }

    .file-select label input {
        width: 100%;
    }

    .capture-msg {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .payment-list {
        margin-top: 30px;
        padding-bottom: 30px;
        margin-bottom: 20px;
    }

    .contract-list {
        margin-bottom: 30px;
    }

    .ke-list {
        margin-bottom: 20px;
    }

    [id^="file-upload"] .file-select {
        padding: 0;
        background: unset;
        margin-bottom: 20px;
    }

    [id^="file-upload"] .file-select .add-btn {
        margin-left: 10px;
        font-size: 0.9em;
    }

    [id^="file-upload"] .file-select input[type='file'] {
        max-width: 80%;
    }

    [id^="file-upload"] .upload-notice {
        padding: 0;
    }

    .add-document-list>div {
        margin-bottom: 30px;
    }

    .list-form h3 {
        font-size: 1.1em;
    }

    .ui-menu .ui-menu-item-wrapper {
        line-height: 30px;
    }

    .filter-area {
        margin-bottom: 30px;
    }

    .filter-area table {
        width: 100%;
    }

    .filter-area table th {
        display: block;
        padding: 10px;
    }

    .filter-area table td {
        display: block;
    }

    .step {
        margin-bottom: 25px;
    }

    .step li {
        height: 50px;
    }

    .step li:before,
    .step li:after {
        top: -5px;
        border-width: 30px 0 30px 16px;
    }

    .step li span {
        font-size: 0.9em;
        padding-top: 2px;
    }

    #contract-search .contract-search-btns-wrap {
        display: block;
        margin: 0;
    }

    #contract-search .contract-search-btns-wrap>div {
        width: 100%;
        padding: 0;
    }

    #contract-search .contract-search-btns-wrap>div .btn {
        font-size: 1.1em;
        padding: 12px;
        min-height: unset;
        margin-bottom: 15px;
    }

    #contract-search .contract-search-btns-wrap>div .btn br {
        display: none;
    }

    /* 請求書 */

    #invoice {
        padding: 20px 0;
    }

    #invoice h1 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }

}