@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');

/*  */

#main_ttl {

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

    & div.inner {
        width: 1200px;
    }

    & #fig_main {
        overflow: hidden;
        position: relative;
    }

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

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

        position: static;
        transform: none;
        margin-top: -40px;
        margin-left: -120px;

    }

    & 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;
    }

}

/*  */

#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: 96px;

    & h3 {
        margin-bottom: 36px;
    }

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

    & 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;
    }

    & p {
        margin-bottom: 1.75em;
    }

}

/* sp */

@media screen and (max-width: 768px) {
    body.t_system #main_ttl {

        & div.inner {
            width: 100%;
        }

        & #fig_main {
            width: 100%;
            /* height: calc(100vw* 0.1764705882352941); */
        }

        & #fig_main img {
            position: static;
            transform: translate(0);
            margin-top: 0;
            margin-left: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-54%, -50%);
            margin-top: 0;
            margin-left: 0;


        }

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

    }

    /*  */

    & #cnav {
        width: 100%;
    }

    & #cnav ul {
        gap: 2vw 2vw;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    & #cnav ul li {
        font-size: 3.125vw;
        /* 10px */
        line-height: 1.4;
    }

    & #cnav ul li a {
        min-height: 5em;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-inline: 0.6em;
        height: 100%;
    }

    /*  */

    #container {
        padding-bottom: 12vw;
    }

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

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


        & h3 {
            margin-bottom: 8vw;
        }

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


}















/*  */
}





/*  */