/*
 * Do Progetto - Responsive Layout
 *
 * Shared by Japanese and English desktop themes.
 * Legacy desktop layout remains unchanged above 859px.
 *
 * Phase 1: responsive foundation.
 * Mobile navigation is managed separately.
 */

@media screen and (max-width: 859px) {

    /* Base layout */
    body {
        width: auto;
        max-width: 830px;
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: border-box;
        font-size: 14px;
    }

    #container,
    .container,
    .content,
    #section {
        max-width: 100%;
        box-sizing: border-box;
    }

    img,
    iframe {
        max-width: 100%;
    }

    img {
        height: auto;
    }

    /* Header */
    #header {
        height: auto;
        overflow: visible;
    }

    #header_logo,
    #nav,
    #head_link {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    #nav {
        width: 100%;
        text-align: center;
    }

    .head_ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: auto;
    }

    #nav li {
        float: none;
        width: auto;
        height: auto;
        margin: 8px 0;
        flex: 1 1 30%;
    }

    .head_link_box {
        max-width: 100%;
        margin: 0 auto;
    }

    #head_line img {
        display: block;
        width: 100%;
        height: 1px;
    }

    #head_link {
        text-align: center;
        padding: 12px 0;
    }

    #head_address {
        text-align: center;
    }

    /* Slideshow */
    #slide_show {
        width: 100%;
        height: auto;
        aspect-ratio: 830 / 304;
        overflow: hidden;
    }

    #slide_show img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #capt {
        top: calc((100vw - 32px) * 304 / 830 - 25px);
        right: 0;
        max-width: 55%;
    }

    /* Headings and content */
    .common_title,
    #home_under,
    #home_under_title {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .common_title {
        left: 0;
        margin-left: 0;
    }

    #home_up_left,
    #home_up_right,
    #home_down_left,
    #home_down_right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 16px 0;
        padding: 0;
        box-sizing: border-box;
    }

    #home_message .pw {
        line-height: 1.8;
    }

    #home_under {
        margin-left: 0;
        padding: 0;
    }

    .news_text,
    .index_info_body {
        width: auto;
        max-width: 100%;
    }

    /* Access, price and facility */
    #map_up_left,
    #map_up_right,
    #map_down_left,
    #map_down_right,
    #price_up_left,
    #price_up_right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 12px 0;
        box-sizing: border-box;
    }

    #fac_map,
    #fac {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #fac {
        padding: 0;
    }

    .rule_title,
    .rule1,
    .rule2 {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }

    .fac_photo {
        display: inline-block;
        float: none;
        max-width: 100%;
        vertical-align: top;
    }

    /* Forms */
    #form_area {
        max-width: 100%;
        margin: 16px 0;
        box-sizing: border-box;
    }

    .text_form,
    .area_form {
        max-width: 100%;
        box-sizing: border-box;
    }

    #cout {
        width: auto;
        margin-left: 0;
    }

    /* Footer */
    #footer {
        clear: both;
        width: 100%;
    }

    /*
     * Fix footer separator image.
     * The original line.png must remain 1px high.
     * Without this rule it can expand to a large square.
     */
    #footer > img {
        display: block;
        width: 100%;
        height: 1px;
    }

    #footer_link,
    #address {
        overflow-wrap: anywhere;
        line-height: 1.8;
    }

    #privacy {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media screen and (max-width: 600px) {

    body {
        font-size: 15px;
    }

    #nav li {
        flex-basis: 33.333%;
        box-sizing: border-box;
    }

    #home_up_right {
        text-align: center;
    }

    #bread {
        padding-left: 0;
        line-height: 1.6;
    }

    #form_area input,
    #form_area select,
    #form_area textarea {
        max-width: 100%;
    }

    #info1 table,
    #info2 table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}