@media all and (max-width: 1200px) {
    body {
        font-size: 20px;
    }
    h1, .h1 {
        font-size: 28px;
    }
    .item-pic img {
        height: 500px;
        object-fit: cover;
    }
    .ex-pic {
        width: 40%;
    }
    .ex-text {
        max-width: 50%;
        font-size: 16px;
    }

}

@media all and (max-width: 960px) {
    .header-menu ul {
        gap: 20px;
    }
    .header-menu ul li a {
        font-size: 16px;
    }
    .header-menu_label {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .offcanvas-body .copy {
        font-size: 16px;
    }
    h1, .h1 {
        font-size: 20px;
    }
}

@media all and (max-width: 767px) {
    body {
        font-size: 16px;
    }
    .branding {
        position: fixed;
        bottom: 15px;
        right: 20px;
        top: auto;
        left: auto;
        max-width: 50px;
        transform: unset;
        z-index: 10;
    }
    .home .branding {
        display: none;
    }
    .site-name {
        position: fixed;
        width: 51px;
        height: 75px;
        background: url(../images/logo-mob_front.svg) center center no-repeat;
        background-size: contain;
        bottom: 15px;
        right: 20px;
        z-index: 10;
    }
    #footer {
        display: block;
        font-size: 12px;
        padding-bottom: 20px;
    }
    .modal-header,
    .offcanvas-header, #header {
        padding: 27px 0px;
    }
    .modal-fullscreen .modal-body {
        justify-content: flex-start;
        padding-top: 0px;
    }
    .modal-header .btn-close {
        padding: 0px;
        width: 50px;
        height: 50px;
        background-size: contain;
    }
    .modal-text {
        max-height: unset;
        overflow: unset;
    }
    .modal-logo {
        max-width: 50px;
    }
    .btn-menu {
        margin-left: auto;
    }
    body.home {
        background: none;
    }
    body.home #page {
        background: url(../images/front-bg_mob_2.jpg) center center no-repeat;
        background-size: cover;
        min-height: unset;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
    }
    .offcanvas-header .h1 {
        display: none;
    }
    .offcanvas-header .btn-close {
        position: relative;
        padding: 0px;
        width: 50px;
        height: 50px;
        background-size: contain;
        margin-left: auto;
        z-index: 10000;
    }
    .offcanvas-header .container, #header .container,
    .offcanvas-header .container {
        min-height: unset;
    }
    .offcanvas-body .copy {
        display: none;
    }
    .offcanvas-body {
        align-items: flex-start;
        padding-top: 30px;
        padding-bottom: 50px;
    }
    .header-menu {
        flex-direction: column;
        gap: 50px;
    }
    .header-menu ul {
        gap: 30px;
    }
    .header-menu ul li a {
        font-size: 20px;
    }
    .header-menu_label {
        font-size: 27px;
        margin-bottom: 30px;
    }
    #archive-wrapper,
    #page-wrapper {
        padding-top: 0px;
    }
    .item-title {
        font-size: 12px;
        padding: 30px 0px 20px 0px;
        min-width: unset;
    }
    .item-content ul {
        display: flex;
        gap: 15px;
        font-size: 12px;
    }
    .item-pic {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: auto;
    }
    .term-puzzle .item-pic,
    .term-archive .item-pic {
        min-height: 502px;
    }
    .item-pic img {
        max-height: 100%;
        height: 100%;
        object-fit: unset;
    }
    .item-pic.item-unscale img {
        min-width: unset;
        width: auto !important
    }
    .scrollbooster-content article {
        min-width: 100%;
        flex-shrink: 0;
    }
    .wpcf7 textarea {
        height: 342px;
    }
    .form-title {
        display: none;
    }
    .ex-pic {
        position: relative;
        width: 100%;
        margin-bottom: 30px;
    }
    .ex-text {
        max-width: 100%;
        font-size: 14px;
    }
    .page-id-15 #page-wrapper {
        position: relative;
    }
    .page-id-11 #header {
        position: fixed;
        top: 0px;
        left: 0px;
        background: #fff;
        z-index: 100;
    }
    .page-id-11 #page {
        padding-top: 88px;
    }
    .item-text {
        font-size: 12px;
    }
    .modal-pic {
        position: relative;
        bottom: 0px;
        right: 0px;
        height: auto;
        margin: 100px 0px 0px 0px;
    }
    .item-text {
        padding-top: 50px;
    }
    .modal-fs_pic img {
        width: 100%;
        height: auto !important;
    }
    .modal-pic  {
        display: flex;
        justify-content: center;
    }
    .modal-pic img {
        width: 100%;
        height: auto !important;
    }
    .about-pic {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        padding: 0px 15px 20px 15px;
        padding-right: calc(1.5rem * .5);
        padding-left: calc(1.5rem * .5);
    }
    #post-11 {
        max-width: unset;
        margin-left: auto;
        margin-top: auto;
        overflow: auto;
        height: auto;
    }
}