body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.main_container {
    flex: 1;
    width: 100% !important;
}

/* header */
.navbar {
    background-color: #f2f2f2;
}

@media screen and (min-width: 1024px) {
    .navbar > .container {
        min-height: 5em;
    }
}

@media screen and (max-device-width: 768px) {
    .navbar-brand {
        height: 52px !important;
    }
}

.navbar-item {
    font-size: 0.9em;
}
.navbar-item-cta {
    background-color: #363636;
    color: white;
}
.navbar-item img {
    min-height: 3em;
}
.navbar-link:not(.is-arrowless)::after {
    border-color: #4a4a4a;
}
.is-mega .navbar-link {
    color: #4a4a4a;
}
.breadcrumb-icon {
    margin-top: 0.15em;
}
a.navbar-link:hover,
a.navbar-item:hover {
    color: #363636;
}
.header-border {
    border-bottom: 3px solid #f1f1f1;
}
@media screen and (min-width: 1024px) {
    .navbar-dropdown {
        border-top-color: white;
    }
}

/* breadcrumb */
@media screen and (max-device-width: 768px) {
    .breadcrumb {
        overflow: scroll;
    }
    .breadcrumb ul {
        flex-wrap: nowrap;
    }
}

/* outline */
.outline li {
    list-style: none;
}


/* toppage */
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 3px;
}
.hero .fa-registered {
    vertical-align: super;
    font-size: 0.5em;
}
.p-distress {
    line-height: 1.9em;
    font-size: 0.9rem;
}

@media screen and (min-width: 1024px) {
    .hidden-pc {
        display: none !important;
    }

    .key-visual-title {
        position: absolute;
        top: 40%;
        left: 77%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        color: white;
        width: 240px;
    }

    .key-visual-sub-title {
        font-weight: bold;
    }

    .key-visual-button {
        position: absolute;

        top: 57%;
        left: 77%;

        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 200px;
    }

    @media screen and (min-width: 1216px) {
        .key-visual-title {
            left: 77%;
            width: 300px;
        }

        .key-visual-button {
            top: 56%;
            left: 77%;
        }
    }

    @media screen and (min-width: 1408px) {
        .key-visual-title {
            left: 74%;
            width: 360px;
        }

        .key-visual-button {
            top: 53%;
            left: 74%;
        }
    }
}

@media screen and (max-width: 1023px) {
    .hidden-sp {
        display: none !important;
    }

    .key-visual-title {
        position: absolute;
        top: 75%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        color: white;
        width: 300px;
    }

    .key-visual-button {
        position: absolute;
        top: 90%;
        left: 50%;
        width: 200px;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
}

/* list */
.is-unstyled > li {
    list-style: none;
}
.is-styled > li {
    list-style: disc;
}

.is-font-size-09 {
    font-size: 0.9rem;
}

/* table */
.is-centered {
    margin-left: auto;
    margin-right: auto;
}
.is-nowrap {
    white-space: nowrap;
}
.table-mto img {
    width: 150px;
}

/* card */
.card.is-no-shadow a {
    color: #363636;
}
.card.is-no-shadow:hover {
    cursor: pointer;
    background-color: #f8f8f8;
}

/* faq */
.faq-initial,
.case-initial
{
    width: 50px;
}
.faq-q-text,
.case-q-text
{
    padding-top: 1.35rem;
}
.faq-a-text,
.case-a-text {
    padding-top: 1.1rem;
}
.accordion-column {
    cursor: pointer;
}

/* notification */
.column-notification-payment {
    padding-top: 39px;
}

/* form */
@media screen and (max-device-width: 768px) {
    p.download-start-at,
    p.download-end-at {
        width: 45%;
    }

    .canvas-surface {
        width: 100%;
        max-width: 400px;
    }

    .img-canvas-guide {
        width: 100%;
    }
}
.mto-simulator-quantity {
    margin-top: -10px;
}


/* sidebar */
.sticky	{
    position: sticky;
    top: 30px;
}

/* footer */
.l-footer {
    font-size: 0.85em;
    padding: 1.5rem 1.5rem;
    background-color: #f2f2f2;
}
.l-footer .fab {
    font-size: 2em;
}
.l-footer li {
    list-style: none;
}
.l-footer-columns a,
.l-footer-columns a:hover {
    color: #363636;
}

/* plans.card */
@media screen and (min-width: 1024px) {
    .column-card-right {
        padding-left: 3rem !important;
    }
}

/* payment */
.li-payjp-image img {
    height: 45px;
}

/* utility */
.margin-icon {
    margin-right: 3px;
}
.is-no-shadow {
    box-shadow: none;
}
.is-no-radius {
    border-radius: 0;
}
.is-word-break-all {
    word-break: break-all;
}
ol.brackets > li {
    list-style-type: none;
    counter-increment: cnt;
}
ol.brackets > li::before {
    content: "(" counter(cnt) "). ";
}
.is-cursor-pointer {
    cursor: pointer;
}
.is-mosaic img {
    -ms-filter: blur(8px);
    filter: blur(8px);
}
.is-mosaic::after {
    content: url("../image/logo_case100.png");
    position: absolute;
    top: 38%;
    left: 38%;
}
.pt-7 {
    padding-top: 4rem !important;
}
.mb-10r {
    margin-bottom: 10rem !important;
}
.has-text-twitter {
    color: #22b8cf;
}
.has-text-facebook {
    color: #3b5998;
}
.has-text-instagram {
}
.has-text-youtube {
    color: #ff0000;
}
.has-text-bandcamp {
    color: #629aa9;
}
.has-text-soundcloud {
    background-color: #fe5000 !important;
}
.has-text-tumblr {
    color: #35465c;
}
.has-text-line {
    color: #00c300;
}

/* works */
.column-work {
    overflow-wrap: break-word;
}

.case-study-header-title {
    min-height: 72px;
}

.case-study-header-title a {
    color: #363636 !important;
}

.toppage-sample-form {
    background-color: #f9f9f9;
}

/* file uploader */
.file-name {
    max-width: none;
}

.radio-speed-label {
    min-width: 100px;
}

.copyright_box {
    background-color: #f2f2f2; border-radius: 5px; padding: 15px; margin-bottom: 15px;
}

#jasrac,
#nextone {
    width: 32px;
}

.mt-7 {
    padding-top: 4.5rem !important;
}

.table.is-borderless td, .table.is-borderless th {
    border: 0 !important;
}