@charset "UTF-8";

@import url(/bunjyo/funabashi-nichidaimaejt5/css/reset.css);
@import url(/bunjyo/funabashi-nichidaimaejt5/css/setting.css);
body{
    font-family: var(--font01);
    font-size: 16px;
    font-optical-sizing: auto;
    width:100%;
    margin: 0 auto;
    padding:0;
}
img{
    width:100%;
    pointer-events: none;
}
a{
    text-decoration:none;
}
.d-none{
    display: none;
}
header,footer,section{
    overflow: hidden;
}
header{
    background: rgba(255,255,255,0.95);
    width: 100%;
    height: 145px;
    margin: 0 auto;
    padding: 0.2% 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
header .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: var(--width01);
    width: 97%;
    margin: 0 auto;

    h1 {
        max-width: 240px;
        width: 18%;

        a{
            display: block;
        }
    }
}
header .inner ul.links,
footer .inner ul.links{
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 470px;
    width: 36%;

    li{
    text-align: center;

        a{
            display: block;
            width: 100%;
        }
    }
}
header .inner ul.links li.links_mini,
footer .inner ul.links li.links_mini{
    color: var(--color01);
    font-size: var(--font-mini);
    text-align: center;
    white-space: nowrap;
    width: calc(33% / 2);
    transition: all ease 0.5s;

    &.map img{
        width: 13px;
    }

    &.outline img{
        width: 18px;
    }
    
    a img.hidden {
        display: none;
    }

    &:hover{
        color: var(--color01h);
    }
    &:hover a img.view {
        display: none;
    }

    &:hover a img.hidden {
        display: inline;
    }

    span{
        display: block;
        padding: 5px 0 0;
    }
}
header .inner ul.links li.links_regs,
footer .inner ul.links li.links_regs{
    width: calc(100% / 3);

    a{
        background: var(--color01);
        color: var(--colorW);
        padding: 5px 0 15px;
        position: relative;
        overflow: hidden;

        span{
            position: relative;
            z-index: 1;
        }

        &:before{
            content:"";
            background: var(--color01h);
            transition: all ease 0.5s;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 20px;
            left: 0;
            opacity: 0;
            z-index: 0;
        }
        &:hover:before{
            top: 0;
            opacity: 1;
        }

        &:after{
            content: "";
            background: url(/bunjyo/funabashi-nichidaimaejt5/images/common/line_white.svg);
            background-repeat: no-repeat;
            background-size: 100%;
            width: 90%;
            height: 3px;
            position: absolute;
            bottom: 8px;
            left: 5%;
        }
    }
}
header .inner .bottom{
    width: 100%;
    margin: 1% auto 0;
    padding: 0;
}
header .inner .bottom ul,
footer .top ul{
    display: flex;
    align-items: center;
    border-left: 1px solid var(--color02);
    
    li{
        width: calc(100% / 9);
        box-sizing: border-box;
        border-right: 1px solid var(--color02);
        margin: 0;
        padding: 0.5% 0;

        a{
            color: var(--color01);
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            b{
                font-family: var(--font02);
                font-weight: 300;
                text-align: center;
                width: 100%;
                margin: 0 0 0.1%;
                z-index: 1;
            }

            span{
                font-size: 0.8em;
                text-align: center;
                width: 100%;
                z-index: 1;
            }
        }
    }

    li.active{
        background-color: var(--color01);

        a{
            color: var(--colorW);
        }
    }

    li.hide a{
        color: var(--colorG);
        pointer-events: none;
    }

    li.normal{
        position: relative;
        overflow: hidden;

        &:before{
            content: "";
            background: var(--color01);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 20px;
            left: 0;
            opacity: 0;
            transition: all ease 0.5s;
            z-index: 0;
        }
 
        &:hover:before{
            top: 0;
            opacity: 1;
        }

        &:hover a{
            color: var(--colorW);
        }
    }
}

footer{
    width: 100%;
    margin: 0 auto;
    padding: 0;

    .top{
        background: var(--colorW);
        max-width: var(--width01);
        width: 97%;
        margin: 0 auto;
        padding: 2% 0;

        ul{
            width: 100%;

            /*header .inner .bottom ulと同じスタイル*/
        }
    }

    .inner{
        background: var(--colorL);
        padding: 3% 0 0;

        ul.links{
            margin: 0 auto 3%;

            li.outline{
                margin: 0 6% 0 3%;
            }
            li.links_regs{
                min-width: 195px;
            }

            li.links_regs a{
                padding: 12px 0 20px;
            }
        }

        .call{
            color: var(--color01);
            line-height: 1.6em;
            text-align: center;
            width: 100%;
            margin: 0 auto 3%;

            a{
                display: block;
                font-size: var(--font32-50);
                letter-spacing: 2.0pt;
                position: relative;
                width: fit-content;
                margin: 1.5% auto 2%;
                padding: 0 0 0 70px;

                &:before{
                    content: "";
                    background: url(/bunjyo/funabashi-nichidaimaejt5/images/common/icon_freedial.svg);
                    background-size: 100%;
                    background-repeat: no-repeat;
                    width: 55px;
                    height: 36px;
                    position: absolute;
                    top: 62%;
                    left: 0;
                    transform: translate(0, -50%);
                }
            }
        }
        
        .logo{
            max-width: 370px;
            width: 80%;
            margin: 0 auto 3%;
        }
        .cominfo{
            border-bottom: 1px solid var(--colorB);
            width: 100%;
            margin: 0 auto;

            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
                margin: 0 auto 1%;

                li a{
                    color: var(--color01);
                    font-size: var(--font-menu);
                    padding: 0 10px 0 0;
                    position: relative;

                    &:hover{
                        color: var(--color02);
                    }
                }
                li:not(:last-child) a:after{
                    content: "";
                    background: var(--color02);
                    width: 1px;
                    height: 100%;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translate(0,-50%);
                }
            }
        }
        
        a.copyright{
            display: block;
            color: var(--color01);
            font-size: var(--font-mini);
            text-align: center;
            margin: 0 auto;
            padding: 1% 0;

            &:hover{
                color: var(--color02);
            }
        }

        a#pagetop{
            background:  var(--color01);
            color: var(--colorW);
            font-size: var(--font-mini);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80px;
            height: 46px;
            z-index: 1;
            position: fixed;
            bottom: 0;
            right: 0;
            transition: all ease 0.5s;

            &:hover{
                background: var(--color02);
            }
        }
    }
}

@media all and (min-width:769px){
    .sp-disp{
        display:none;
    }
    header .inner .bottom{
        .menu-btn{
            display: none;
        }
    }
    a[href^="tel:"] {
        pointer-events: none;
    }
    footer{
        #FloatMenu{
            display: none;
        }
    }
    .Viewmenu{
        .sp-banner{
            display: none;
        }
    }
}
@media all and (min-width:769px) and (max-width:999px){
    header .inner ul.links{
        width: 50%;
    }
}
@media all and (max-width:768px){
    .pc-disp{
        display:none;
    }
    header{
        height: 65px;

        .inner{
            h1 {
                max-width: 315px;
                width: 42%;
                position: relative;
                top: 5px;
                left: 5px;
            }
        }
        
        .inner ul.links{
            display: none;
        }
        
        .inner .bottom{
            position: relative;
            top: -50px;

            /*----------------------------
            * メニュー開閉ボタン
            *----------------------------*/
            .menu-btn{
                background: var(--color01);
                color: var(--colorW);
                font-size: 1rem;
                width: 50px;
                height: 50px;
                padding: 5px 0 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                position: absolute;
                z-index: 999999;
                top: 3px;
                right: 5px;

                span{
                    display: block;
                    text-align: center;
                    font-size: var(--font-menu);
                    width: 100%;
                    margin: -5px 0 0;
                    padding: 0;
                }

                i{
                    font-size: 1.5rem;
                    margin: 0;
                }

                .inview{
                    display: block;
                }

                .behind{
                    display: none;
                }
            }

            /*----------------------------
            * メニュー本体
            *----------------------------*/
            .Viewmenu{
                background-color: var(--clear01);
                position: fixed;
                top: 0;
                right: 0;
                z-index: 1;
                width: 100vw;
                height: 100dvh;
                overflow: scroll;
                padding: 4rem 0 2rem;

                pointer-events: none;
                opacity: 0;
                transform-origin: top;
                transform: scale(.5);
                transition: all .3s ease;
                
                &.is-active{
                    pointer-events: auto;
                    opacity: 1;
                    transform: scale(1.0);
                }

                .Viewmenu_inner{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
            }

            ul{
                flex-direction: column;
                border-left: none;
                width: 85%;
                margin: 0 auto;

                li{
                    border-right: none;
                    border-bottom: 1px solid var(--color01);
                    width: 100%;
                    margin: 0;
                    padding: 2% 0;
                    height: auto;
                    
                    a{
                        color:var(--color01);
                        text-decoration: none;
                        display: block;
                        padding: 3%;
                        position: relative;
                    }
                }

                li.normal{
                    background: var(--colorW);
                }
            }
            .sp-banner{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                width: 90%;
                margin: 5% auto 0;
                padding: 0;

                a{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 48%;
                    border: 3px solid var(--color01);
                    box-sizing: border-box;
                    height: 90px;
                    position: relative;

                    &:after{
                        content: "";
                        background: #51424C;
                        background: linear-gradient(90deg, rgba(81, 66, 76, 0) 0%, rgba(81, 66, 76, 0.6) 100%);
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 0;
                    }

                    p{
                        color: var(--colorW);
                        z-index: 1;
                    }

                    &.sp-banner1{
                        background-image: url(/bunjyo/funabashi-nichidaimaejt5/images/top/stage09-1.jpg);
                        background-size: cover;
                        background-position: center;
                    }
                    &.sp-banner2{
                        background-image: url(/bunjyo/funabashi-nichidaimaejt5/images/top/stage09-2.jpg);
                        background-size: cover;
                        background-position: center;
                    }
                }
            }
        }
    }
    header .inner .bottom ul, footer .top ul{
        li{
            a{
                span{
                    padding: 0 0 0 10px;
                }
            }
        }
    }
    footer{
        .top{
            display: none;
        }   
        .inner{
            padding: 3% 0 18%;
            ul.links{
                display: none;
            }

            .call{
                p{
                    font-size: var(--font-menu);
                }
                a{
                    padding: 0 0 0 50px;
                    &:before{
                        width: 36px;
                        height: 24px;
                    }
                }
            }

            .logo{
                max-width: 278px;
                margin: 6% auto 8%;
            }

            .cominfo{
                ul{
                    gap: unset;
                    max-width: 270px;
                    margin: 0 auto 5%;

                    li{
                        width: 100%;
                        margin: 0 auto;

                        a{
                            width: 100%;
                            display: block;
                            padding: 16px 0;
                        }
                    }
                    li:not(:last-child) a:after,
                    li:last-child a:after{
                        content: "";
                        background: none;
                        border-top: 1px solid var(--color02);
                        border-right: 1px solid var(--color02);
                        width: 8px;
                        height: 8px;
                        transform: rotate(45deg) translate(0, -50%);
                        position: absolute;
                        top: 50%;
                        right: 0;
                    }
                }
            }
            a#pagetop{
                display: none;
            }
            a.copyright{
                padding: 4% 0;
            }
        }
        #FloatMenu{
            width: 100%;
            margin: 0 auto;
            padding: 0;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;

            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                width: 100%;

                li{
                    width: calc(100% / 5);

                    a{
                        background: var(--color01);
                        color: var(--colorW);
                        font-size: var(--font-mini);
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 68px;
                        padding: 10px 0;

                        img{
                            height: 24px;
                            margin: 0 auto 8px;
                        }
                        span{
                            text-align: center;
                            width: 100%;
                            white-space: nowrap;
                        }
                    }
                    &.topscroll{
                        a{
                            background: var(--color01h);
                            font-size: var(--font-menu);
                        }
                    }
                }
            }
        }
    }
}

@media all and (min-width:769px) and (max-width:960px){
    header{
        height: 165px;
    }
    header .inner .bottom ul, footer .top ul{
        border-left: none;
        flex-wrap: wrap;
        
        li{
            width: calc(100% / 5);
            margin: 0 0 10px;
        }
        li:nth-child(1),li:nth-child(5n+1){
            border-left: 1px solid var(--color02);
        }
    }
}