@charset "utf-8";

/* CSS Document */

@media all and (min-width:769px) and ( max-width:1024px) {
    #introduction-lead .introduction-content {
        width: auto;
        float: none;
        padding: 3rem 1rem;
    }
    .introduction-content h2 {
        width: auto;
    }
    #introduction-lead .introduction-content p {
        width: auto;
    }
    #introduction-create .introduction-content {
        width: auto;
        padding: 3rem 1rem;
    }
    #introduction-create .introduction-content p {
        font-size: 1rem;
    }
    #introduction {
        min-height: 400px;
    }
    #top-device {
        padding: 3rem 1rem;
        box-sizing: border-box;
        width: auto;
    }
    #top-campaign {
        width: auto;
    }
    #top-device .contents-inner {
        width: auto;
    }
    #top-device .top-contents-image img {
        width: 80%;
    }
    .top-contents-textbox {
        width: auto;
    }
    #top-security .contents-inner {
        width: auto;
    }
    .textbox {
        width: 50%;
    }
    #top-security .top-contents-image {
        width: 80%;
    }
    #top-security .contents-inner {
        padding: 1rem;
    }
    #top-plan .contents-inner {
        width: auto;
        padding: 1rem;
    }
    #top-plan hr {
        width: auto;
    }
    #top-info .contents-inner {
        width: auto;
        padding: 1rem;
    }
}

@media all and (max-width:768px) {
    #main {
        width: auto;
        padding: 0 1rem;
    }
    .path {
        width: auto;
    }
    #pagetitle h2 {
        padding: 0 1rem;
        width: auto;
    }
    #PCapps div,
    #SPapps div {
        width: 49%;
        font-size: 0.9em;
    }
    footer .contents-inner {
        width: auto;
        margin: 3rem auto 0 auto;
        display: inherit;
        align-items: center;
    }
    #top-device .contents-inner,
    #top-info .contents-inner,
    #top-plan .contents-inner,
    #top-security .contents-inner {
        width: auto;
    }
    #top-info .contents-inner a {
        display: block;
        margin-bottom: .5rem;
    }
    div#introduction {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    #introduction-lead .introduction-content {
        width: auto;
        float: none;
        padding: 1rem;
    }
    #introduction-lead {
        width: 100%;
    }
    .introduction-content h2 {
        width: auto;
        font-size: 1.5em;
    }
    #introduction-lead .introduction-content p {
        width: auto;
    }
    #introduction-create {
        width: 100%;
    }
    div#introduction-lead {
        width: 100%;
    }
    div#introduction-create {
        width: 100%;
    }
    #introduction {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    #introduction-create .introduction-content {
        width: auto;
        padding: 1rem;
        box-sizing: border-box;
    }
    #top-device,
    #top-info .contents-inner,
    #top-security .contents-inner {
        width: 100%;
        padding: 1rem;
        box-sizing: border-box;
    }
    .top-contents-textbox p,
    .textbox p {
        width: auto;
    }
    .contents-inner {
        flex-direction: column-reverse;
    }
    .top-contents-textbox {
        width: auto;
        text-align: left;
    }
    .textbox {
        width: auto;
        text-align: left;
    }
    #top-security .top-contents-image {
        width: 100%;
        height: auto;
        position: inherit;
        overflow: hidden;
    }
    #top-security .contents-inner {
        display: block;
    }
    #top-security .top-contents-image img {
        position: unset;
        width: 100%;
        height: auto;
        top: inherit;
        right: inherit;
        max-width: inherit;
    }
    #top-security {
        height: auto;
        width: 100%;
    }
    div#plan-amount {
        flex-wrap: wrap;
        padding: 1rem;
    }
    .plan-item {
        width: 48%;
        margin-bottom: 1rem;
        background: #fff;
    }
    .tb {
        margin-bottom: 0;
        height: auto;
    }
    .white {
        height: auto;
    }
    h4 {
        font-size: 1rem;
    }
    h4 span {
        font-size: 1.5rem;
    }
    .footer-logo {
        text-align: center;
    }
    ul.footerlink {
        padding: 0;
    }
    .footerlink li {
        width: 49%;
        box-sizing: border-box;
        padding: 0 0 5px 0px;
        font-size: .9rem;
    }
    #copyright {
        margin-bottom: 2em;
        font-size: .8rem;
    }
    textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
    .sp-clear {
        float: none;
        width: auto !important;
    }
    #password-copy-text {
        font-size: 1.2rem;
        display: block;
        width: 100%;
        margin-bottom: .5rem;
    }
    #main .app-password h4 {
        font-size: 1rem;
        margin: 1rem 0;
    }
    input#webdav-copy-text {
        border: 0.9px solid #D5D2B9;
        width: 80%;
        padding: 0.2rem .2rem;
        box-sizing: border-box;
    }
    #top-flexbox div {
        width: auto;
        margin-bottom: 1rem;
    }
    .ngdialog.ngdialog-theme-default .ngdialog-content {
        margin: 1rem !important;
        box-sizing: border-box;
        width: auto !important;
        padding: 1rem !important;
    }
    .ngdialog.ngdialog-theme-default .ngdialog-content .input-text {
        width: 100%;
        box-sizing: border-box;
        margin: .5rem 0;
        padding: .5rem;
    }
    .ngdialog.ngdialog-theme-default .ngdialog-content .size10 {
        font-size: 12px;
    }
    .btn-modal-orange1 {
        padding: .5rem .5rem;
        margin: .5rem .1rem;
    }
    .btn-modal-gray1 {
        padding: .5rem .5rem;
        margin: .5rem .1rem;
    }
    .top-campaign-article {
        margin: 1%;
        width: 48%;
    }
    .top-campaign-article p {
        height: auto;
    }
    .top-campaign-article p:first-child {
        height: 60px;
    }
    #top-campaign {
        width: auto;
    }
    #top-plan hr {
        width: auto;
    }
    .banner-box {
        width: 49%;
    }
}