@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Readex+Pro:wght@200&family=Roboto:wght@400;500;700;900&display=swap');

@import url("https://use.typekit.net/qcx2hqk.css");


/*  */

#main_ttl {

    & div.wrap {
        width: 100%;
        background-color: #F2EFED;
    }

    & #fig_main img {
        width: auto;
        height: 100%;

        position: absolute;
        left: 0;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    & h1:not(.entry-title) span::after,
    & h2 span::after {
        display: none;
    }

    & h2 {
        max-width: 1136px;
        margin-inline: auto;
        position: relative;
        font-size: var(--fs16);
        margin-top: 1.8em;

        color: #111;
        font-weight: 400;
        display: block;
        padding: 0;
    }

}

/*  */

#topics_path {
    margin-bottom: 0;
}

#container {
    padding-bottom: 100px;
}

/*  */

#cnav {
    width: 1000px;
    margin-inline: auto;
}

#cnav ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px 4px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . ."
        ". . ."
        ". . .";
}

#cnav ul li {
    text-align: center;
}

#cnav ul li a {
    display: block;
    background-color: #F2EFED;
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
}

/* :hover  */
#cnav ul li a:hover {
    background-color: #44CAD3;
    color: #fff;
}

#cnav ul li a:hover::before {
    content: '';
    width: 4px;
    height: 4px;
    border: 0px;
    border-top: solid 1px #020202;
    border-right: solid 1px #020202;
    transform: rotate(135deg);
    position: absolute;
    bottom: 11px;
    right: 10px;
    margin-top: -3px;
    z-index: 99;
}

#cnav ul li a:hover::after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 9;
}

/*  */

#container div.wrap {
    width: 1000px;
    margin-inline: auto;
}

/*  */

section[id^="sec_"] {

    margin-top: 50px;

    & h3 {
        margin-bottom: 36px;
    }

    & figure {
        max-width: 720px;
        margin-inline: auto;
        margin-bottom: 50px;
    }

    & p.btn:not(#photos p.btn) {
        display: block;
        margin-inline: auto;
        text-align: center;
    }

    & p.btn a:not(#photos p.btn a) {
        display: inline-block;
    }

}

#kitchen {
    margin-top: 110px;
    text-align: center;


    & div.fig_tiles {
        width: 592px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 56px;
        grid-row-gap: 56px;
        margin-inline: auto;
    }

    & div.fig_tiles img {
        width: 160px;
        height: 160px;
    }

    & div.fig_tiles+p {
        margin-bottom: 0;
    }

    & div.fig_tiles+p a {
        font-size: var(--fs20);
        font-family: font-family: "Roboto", sans-serif;
        font-weight: 500;
        color: #F26F20;
    }

    & div.fig_tiles p:last-of-type {
        background-color: #44CAD3;
    }

    /*  */

}

#access {
    text-align: center;
    margin-top: 80px;

    & h4 {
        font-family: "alternate-gothic-atf", sans-serif;
        font-weight: 500;
        font-size: var(--fs56);
        color: #F26F20;
        line-height: 1;
    }

    & h4+p {
        font-size: var(--fs14);
        margin-top: 0.6em;
    }

    & #map {
        width: 100%;
        margin-top: 30px;
    }

    & #map iframe {
        width: 100%;
    }

}



/*  */

@media screen and (max-width: 768px) {
    body.toko_kitchen #main_ttl {
        & #fig_main {
            width: 100%;
            /* height: calc(100vw * 0.2112676056338028); */
        }

        & #fig_main img {
            /* position: static; */
            transform: none;
            right: 0;
            left: auto;
        }

        & h2 {
            width: 88vw;
            font-size: 3.75vw;
            /* 12px */
            margin-top: 0.6em;
        }

    }


    #container {
        padding-bottom: 12vw;
    }

    #container div.wrap {
        width: 100%;
    }

    section[id^="sec_"] {
        margin-top: 6vw;


        & h3 {
            margin-bottom: 8vw;
        }

        & figure {
            max-width: 100%;
            margin-bottom: 6vw;
        }
    }

    /*  */

    #kitchen {
        margin-top: 12vw;

        & div.fig_tiles {
            width: 88vw;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            margin-top: 0;
            grid-column-gap: 6vw;
            grid-row-gap: 6vw;
            margin-inline: auto;
        }

        & div.fig_tiles img {
            width: 24vw;
            height: 24vw;
        }

        & div.fig_tiles+p {
            margin-top: 6vw;
        }

    }

    #access {
        margin-top: 12vw;

        & h4 {
            font-size: 8.75vw;
            /* 28px */
        }

        & h4+p {
            margin-top: 0.6em;
            font-size: 3.75vw;
            /* 12px */
        }

        & #map {
            margin-top: 6vw;
        }
    }

}











/*  */
}