﻿/* ---------------------------------------------------------------------------------------------------- */
/* Guide 関連 */

.card .guide {
    margin-top: 20px;
    margin-right: 40px;
    margin-left: 40px;
}

.card.show-contents {
    overflow: auto;
}

.guide {
    margin-left: 50px;
    counter-reset: step 0;
}
    .show-contents.guide {
        overflow: auto;
    }

    .guide .guidemenu-title {
        display: none;
    }

    .guide > p {
        line-height: 1.8rem;
    }

    .guide h1 {
        margin-bottom: 2rem;
    }

    .guide h5 {
        margin-top: 2.0rem;
        margin-bottom: 1.5rem;
        text-decoration: underline;
    }

    .guide .alert {
        margin-bottom: 1.5rem !important;
    }

    .guide ol {
        margin-bottom: 3rem !important;
    }

    .guide li {
        margin-bottom: 1rem !important;
    }

    .guide p.step::before {
        counter-increment: step;
        content: counter(step)") ";
    }

    .guide p.step {
        padding-left: 1rem;
        text-indent: -1.2rem;
    }

    .guide p {
        padding-left: 1rem;
    }

    .guide .box-widget {
        width: 90%;
        height: 200px;
    }

@media (min-width: 640.98px) {
    .guide .box-widget {
        height: 300px;
    }
}

@media (min-width: 1280px) {
    .guide .box-widget {
        height: 500px;
    }
}
    .guide .guide-image {
        width: 50%;
        max-width: 400px;
        border: solid 1px lightgray;
        margin-bottom: 2rem;
        margin-left: 1rem;
        display: block;
    }

    .guide .guide-largeimage {
        width: 90%;
        border: solid 1px lightgray;
        margin-bottom: 2rem;
        margin-left: 1rem;
        display: block;
    }

    .guide iframe {
        margin-left: 1rem;
    }

    .guide .movie-link {
        font-size: 0.8rem;
        margin-top: 0rem;
        padding-left: 1rem;
    }

        .guide .movie-link::before {
            content: "※ ";
        }

    .guide .alert {
        margin-left: 1rem;
    }

    .guide .table {
        margin-top: 2rem;
        margin-bottom: 4rem !important;
    }

        .guide .table thead th {
            font-size: 1.5rem;
            text-align: center;
        }

            .guide .table thead th[scope="col"] {
                width: 22%;
            }

            .guide .table thead th .small {
                font-size: 1.2rem;
            }

        .guide .table tbody th[scope="row"] {
            font-size: 1.5rem;
            vertical-align: middle;
            text-align: center;
        }

        .guide .table tbody .widespan {
            letter-spacing: 0.5em;
        }

        .guide .table tbody td[scope="col"] ol {
            margin-top: 0.3rem !important;
            margin-bottom: 0.3rem !important;
        }

        .guide .table tbody td[scope="col"] li {
            margin-top: 0.1rem !important;
            margin-bottom: 0.1rem !important;
        }

        .guide .table .title {
            font-size: 1.2rem;
            vertical-align: middle;
            text-align: center;
        }

        .guide .table .compact-text {
            vertical-align: middle;
        }

        .guide .table .left {
            text-align: left;
        }

        .guide .table .text {
            padding-top: 1.0rem !important;
            padding-left: 0.5rem !important;
            padding-bottom: 1.0rem !important;
            padding-right: 0.5rem !important;
            line-height: 1.5rem;
        }

        .guide .table p.impact {
            margin: 1rem;
            font-size: 2rem;
            text-align: center;
        }

    .guide p.dot {
        margin-bottom: 0.2rem !important;
        padding-left: 2rem;
        text-indent: -1.2rem;
    }

        .guide p.dot::before {
            content: "・ ";
        }

    .guide p.check {
        margin-bottom: 0.2rem !important;
        padding-left: 2rem;
        text-indent: -1.2rem;
    }

        .guide p.check::before {
            content: "✓ ";
        }

    .guide-sidemenu {
        display: none;
    }

        .guide-sidemenu .guidemenu-title {
            display: none;
            position: absolute;
            top: -15px;
            width: 80%;
            text-align: center;
            white-space: nowrap;
        }

            .guide-sidemenu .guidemenu-title span {
                font-size: 1.0rem;
                color: rgb(16 96 21);
                background-color: white;
            }

        .guide-sidemenu .container {
            padding-left: 0;
            padding-right: 0;
        }

        .guide-sidemenu .card {
            border: 1px solid rgb(16 96 21);
            padding-top: 0.5rem;
            padding-left: 0.5rem;
            padding-bottom: 0.5rem;
            padding-right: 0.5rem;
        }

        .guide-sidemenu .guide {
            margin-bottom: 0;
            margin-left: 5px !important;
            margin-right: 5px !important;
        }

            .guide-sidemenu .guide p {
                padding-left: 0.2rem;
            }

        .guide-sidemenu h1 {
            font-size: 0.8rem;
            margin-top: 0.2rem !important;
            margin-bottom: 0.5rem !important;
        }

        .guide-sidemenu ol {
            margin-top: 0 !important;
            margin-bottom: 1rem !important;
            margin-left: 0rem !important;
            padding-left: 1rem;
        }

        .guide-sidemenu li {
            font-size: 0.7rem;
            margin-top: 0 !important;
            margin-bottom: 0.8 !important;
            margin-left: 0rem !important;
        }

        .guide-sidemenu p {
            font-size: 0.7rem;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        .guide-sidemenu .menu-comment {
            display: none;
        }

/* ---------------------------------------------------------------------------------------------------- */
