/* sprit-108.css - centering and responsive layout */

/* Override sprit-107s1.css body{width:80%} so body fills full viewport */
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Desktop: center content via #page-container (ID specificity overrides any body rules) */
#page-container {
    max-width: 1060px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Fix: original CSS has unitless padding (invalid in modern browsers), star icon overlaps text.
   Also remove float:left on the anchor so display:block fills the tab correctly. */
.t_navi a {
    display: block;
    float: none;
    width: 100%;
    padding-left: 1.5em;
    box-sizing: border-box;
}

/* ===== Mobile layout (767px and below) ===== */
@media (max-width: 767px) {

    body {
        max-width: 100%;
        padding: 0;
    }

    #page-container {
        max-width: 100%;
        padding: 0 5px;
    }

    /* Header bar */
    #t_l {
        width: 65%;
        padding-left: 2%;
    }
    #t_r {
        width: 30%;
        padding-right: 1%;
    }

    /* Logo area: show but make responsive */
    /* ftw_l/ftw_r are decorative only — hide them */
    #ftw_l, #ftw_r {
        display: none;
    }
    /* Remove background from parent div to prevent doubling */
    #title {
        background-image: none;
        width: calc(100% - 100px);
        height: 45px;
    }
    /* Scale the anchor (actual logo image) to fit */
    #title a, #title a:hover, #title a:focus {
        display: block;
        float: none;
        width: 100%;
        height: 45px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }
    /* logo1 (山本健康堂): shrink slightly to match */
    #logo1 {
        width: 100px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Contact area: hide kuroneko credit card background, keep mtf button */
    #space10 {
        display: none;
    }
    #kuroneko {
        display: none;
    }
    #mtf_sub {
        padding: 4px 0;
        font-size: 9pt;
    }

    /* Contact button: keep as image, make it fit mobile width */
    .mtf {
        float: none;
        width: 100%;
        max-width: 230px;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .mtf a {
        float: none;
        width: 100%;
        max-width: 230px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Navigation tabs: 2 columns on mobile */
    #t_navi_ {
        margin-top: 6px;
    }
    .t_navi_pre {
        display: none;
    }
    .t_navi {
        width: 48%;
        height: auto;
        margin-left: 1%;
        margin-bottom: 2px;
        float: left;
    }
    .t_navi a {
        display: block;
        float: none;
        width: 100%;
        line-height: 2.2;
        font-size: 8pt;
        padding-left: 20px;
        box-sizing: border-box;
    }

    /* Main content: stack left and right columns */
    #topinfo_l {
        float: none;
        width: 100%;
        padding: 0;
    }
    #topinfo_r {
        float: none;
        width: 100%;
        text-align: left;
        padding: 0 5px;
    }

    /* Foag / Feaura section */
    #ftws_l {
        float: none;
        width: 100%;
        height: auto;
        padding: 0;
    }
    #ftws_r {
        float: none;
        width: 100%;
        height: auto;
        padding: 0;
    }

    /* Grid panels */
    .sq50p {
        float: none;
        width: 100%;
        padding-right: 0;
        box-sizing: border-box;
    }
    .sq60p {
        float: none;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    .sq60c {
        width: 100%;
    }
    .w60p {
        float: none;
        width: 100%;
    }
    .sq75p {
        float: none;
        width: 100%;
        padding: 0;
    }
    .sq25p {
        float: none;
        width: 100%;
        padding: 0;
    }

    /* Footer info area */
    #f_info_l {
        float: none;
        width: 100%;
    }
    #f_info_r {
        float: none;
        width: 100%;
    }

    /* Hide credit card / payment images and animated logo in footer */
    #f_info_r img,
    #f_info_l .ani_logo {
        display: none;
    }

    /* Footer bar: fix height and stack items */
    #f_ftw_l, #f_ftw_r {
        display: none;
    }
    #f_f {
        height: auto;
        padding: 6px 4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2px;
    }
    #f_f2 {
        width: auto;
        float: none;
        padding: 0 6px;
        font-size: 8pt;
    }
    #f_f3 {
        width: 100%;
        float: none;
        text-align: center;
        font-size: 8pt;
        padding: 2px 0;
    }
    #f_f5 {
        width: auto;
        float: none;
        padding: 0 6px;
        font-size: 8pt;
        text-align: center;
    }

    /* General images: scale to fit */
    img {
        max-width: 100%;
        height: auto;
    }
}