@charset "UTF-8";

:root {
    /*--transition-duration-base: 0.2s;*/
    /*  --transition-timing-base: var(--ease-out-cubic);*/
    /*  --transition-setting-base: var(--transition-duration-base) var(--transition-timing-base);*/
    /*  --transition-base: all var(--transition-setting-base);*/
    /*  --transition-slow: all 1s var(--ease-out-quad);*/

    /*--c-red: #b70000;*/
    /*--color-black: #000;*/
    /*--color-main: #080D1E;*/
    /*--color-accent: #e50113;*/
    /*--color-accent: #EFFF2E;*/
    /*--font-mincho: ;*/

    --tracking: 0;

    --index-global-menu: 90;
    --index-header: 100;
    --index-sticky-entry: 100;
    --index-overlay: 200;
    --index-fixed-element: 250;
    --index-modal: 900;
    --index-loading-screen: 1000;

    --env-safe-area-inset-top: env(safe-area-inset-top, 0);
    --env-safe-area-inset-right: env(safe-area-inset-right, 0);
    --env-safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
    --env-safe-area-inset-left: env(safe-area-inset-left, 0);

    --line-height: #{global.$base-line-height};
    /*--container-gutter-narrow: #{global.interp(32, 160)};*/
    /*--size-global-menu-button-width: #{global.rem(80)};*/
    /*--size-global-menu-button-height: #{global.rem(80)};*/
    /*--sub-header-height: #{global.rem(80)};*/

    /*--home-section-gap: #{global.rem(200)};*/

    --header-height: 5rem; /* 80 */

    --content-width: 640px;
    --container-gutter: clamp(0.75rem, -0.35rem + 5.5vw, 6.25rem);
    --container-width: calc(var(--content-width) + (var(--container-gutter) * 2));

    --content-wide-width: 720px;
    --container-wide-width: calc(var(--content-wide-width) + (var(--container-gutter) * 2));

    --scroll-margin-top: calc(var(--header-height));

    --leading-trim: calc((1em - 1lh) / 2);
}

@supports not (top: 1lh) {
    :root {
        --leading-trim: 0px; /* `px`などの単位が必要 */
    }
}

@media screen and (64rem <= width) {
    :root {
        /*--content-width: 1446px;*/
        --content-width: 1260px;
        --content-wide-width: 1440px;
        --header-height: 6.25rem; /* 100 */
    }
}

:where(*) { min-height: 0vw; }

html,
body {
    --viewport-from: 390;
    --viewport-to: 1920;

    width: 100%;
    height: auto;
    min-height: 100vh;
}

html {
    /*overflow-x: hidden;*/
    line-height: var(--line-height);
    touch-action: manipulation;
    cursor: auto;
    visibility: visible;
    text-size-adjust: 100%;
    scroll-behavior: smooth;

    &.wf-active {
        visibility: visible;
    }
}

body {
    --font-size: 1rem;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*font-feature-settings: "palt";*/
    /*overflow-wrap: break-word;*/
    /*color: #000000;*/
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

a {
    /*color: var(--color-link-text);*/
    text-decoration: none;
    /*transition:*/
    /*  opacity var(--transition-setting-base),*/
    /*  color var(--transition-setting-base);*/
    /*color: var(--color-accent);*/
}

@media (hover: hover) {
    a {
        /*color: var(--color-accent);*/
        transition: opacity .3s ease-in-out;
    }
    a:hover {
        opacity: .7;
    }

    #wpadminbar a:hover {
        color: #72aee6 !important;
    }
}

/* Layout */
.l-site {
    --sidebar-width: 30%;
    --column-gap: 2rem;
    --main-width: calc(100% - var(--sidebar-width) - var(--column-gap));
    --row-gap: 2rem;
    display: grid;
    /*grid-template-columns: 1fr 1fr;*/
    grid-template-columns: var(--main-width) var(--sidebar-width);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
    row-gap: var(--row-gap);
    column-gap: var(--column-gap);
    width: 100%;
}

.l-site-header {
    grid-area: header;
}

.l-site-footer {
    grid-area: footer;
}

.l-contents {
    --column-gap: 2rem;
    --sidebar-width: 30%;
    --main-width: calc(100% - var(--sidebar-width) - var(--column-gap));

    grid-area: contents;
    display: grid;
    grid-template-columns: var(--main-width) var(--sidebar-width);
    grid-template-areas: "main sidebar";
    column-gap: var(--column-gap);
    width: 100%;
    height: 100%;
}

.l-site-main {
    grid-area: main;
}

.l-site-sidebar {
    grid-area: sidebar;
}

.l-site-sidebar__inner {
    top: var(--scroll-margin-top);
    position: sticky;
}

.l-container {

}

.l-container {
    max-width: var(--container-width);
    margin: auto;
    padding: 0 var(--container-gutter);
}

.l-container--wide {
    max-width: var(--container-wide-width);
}

.l-container--max {
    max-width: 120rem;
}

.l-site-sidebar {

}