@charset "utf-8";
/*---------------------------------------------------------------------
Common Style
common.css
-----------------------------------------------------------------------
Copyright 2025 (c) Imouto no Ane All Rights Reserved.
Coding: Imouto no Ane
Last Update: 2025.08.01
---------------------------------------------------------------------*/
@media screen and (min-width: 959px) {}
@media screen and (min-width: 482px) {}
/*===========================================================
    root
===========================================================*/
:root {
    --black: rgb(0, 0, 0);
    --white: rgb(255, 255, 255);
    --grey: rgb(180, 180, 180);
    --lightgrey: rgb(240, 240, 240);
    --darkgrey: rgb(77, 77, 77);

    --black-transparent: rgba(0, 0, 0, 0.5);
    --grey-transparent: rgba(204, 204, 204, 0.2);
    --darkgrey-transparent: rgba(179, 179, 179, 0.3);

    /*border-radius*/
    --box-radius: 1em;
    --box-radius-small: 0.75em;
    --section-radius: 0.5em;
}
@media screen and (min-width: 960px) {
    :root {
        /*border-radius*/
        --box-radius: 2em;
        --box-radius-small: 1em;
    }
}
/*===========================================================
    common
===========================================================*/
html ,body ,.wrap {
    margin: 0;
    padding: 0;
    width: 100vw;
    width: 100dvw;
}
html ,body {
    scroll-behavior: smooth;
}
html.wf-active {
    visibility: visible;
}

/*===========================================================
    body
===========================================================*/
body {
    font-family: "zen-maru-gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow-x: hidden;
    height: 100vh;
    height: 100dvh;
    position: relative;
    font-size: 0.9rem;
    line-height: 1.5em;
}
body::-webkit-scrollbar {
    display: none;
}
a {
    color: var(--grey);
}

/*===========================================================
    font
===========================================================*/
.zen {
    font-family: "zen-maru-gothic", sans-serif;
    font-style: normal;
}
.mega {
    font-family: "vdl-megamaru", "zen-maru-gothic";
    font-weight: 400;
    font-style: normal;
}
.megapop {
    font-family: "vdl-megamarupop-shadow", "zen-maru-gothic";
    font-weight: 400;
    font-style: normal;
}

/*===========================================================
    base
===========================================================*/
/*background*/
.back-black { background: var(--black);}
.back-white { background: var(--white);}
.back-grey { background: var(--grey);}
.back-lightgrey { background: var(--lightgrey);}
.back-darkgrey { background: var(--darkgrey);}

/*color*/
.text-black { color: var(--black);}
.text-white { color: var(--white);}
.text-grey { color: var(--grey);}
.text-lightgrey { color: var(--lightgrey);}
.text-darkgrey { color: var(--darkgrey);}

/* fill */
svg path.black { fill: var(--black);}
svg path.white { fill: var(--white);}
svg path.grey { fill: var(--grey);}
svg path.lightgrey { fill: var(--lightgrey);}
svg path.darkgrey { fill: var(--darkgrey);}