@charset "utf-8";
/*---------------------------------------------------------------------
Common Style
common.css
-----------------------------------------------------------------------
Copyright 2025 (c) linkpath Allrights Reserved.
Coding: Hinako Hayashi
Last Update: 2025.06.12
---------------------------------------------------------------------*/
@media screen and (max-width: 959px) {}
@media screen and (max-width: 482px) {}
/*===========================================================
    root
===========================================================*/
:root {
    --black: rgb(0, 0, 0);
    --white: rgb(255, 255, 255);
    --grey: rgb(150, 150, 150);
    --lightgrey: rgb(240, 240, 240);
    --darkgrey: rgb(77, 77, 77);

    --main: rgb(214, 187, 170);
    --main-light: rgb(235, 214, 200);
    --sub: rgb(0, 63, 84);
    --sub-light: rgb(123, 161, 174);

    --black-transparent: rgb(0, 0, 0, 0.3);
    --white-transparent: rgb(255, 255, 255, 0.8);
    --grey-transparent: rgb(150, 150, 150, 0.5);
    --lightgrey-transparent: rgb(240, 240, 240, 0.5);
    --darkgrey-transparent: rgb(77, 77, 77, 0.5);

    --main-transparent: rgba(214, 187, 170, 0.7);
    --sub-transparent: rgba(0, 63, 84, 0.7);

    /*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 {
    visibility: hidden;
}
html.wf-active {
    visibility: visible;
}

/*===========================================================
    body
===========================================================*/
body {
    font-family: "josefin-sans", "noto-sans-cjk-jp";
    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(--black);
}

/*===========================================================
    font
===========================================================*/
.noto {
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-style: normal;
}
.josefin {
    font-family: "josefin-sans", sans-serif;
    font-style: normal;
}
.bimbo {
    font-family: "bimbo-pro", "noto-sans-cjk-jp";
    font-weight: 400;
    font-style: normal;
}
.azu {
    font-family: "ab-anzu-r", sans-serif;
    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);}

.back-main { background: var(--main);}
.back-main__light { background: var(--main-light);}
.back-sub { background: var(--sub);}
.back-sub__light { background: var(--sub-light);}

.back-main__transparent { background: var(--main-transparent);}
.back-sub__transparent { background: var(--sub-transparent);}

/*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);}

.text-main { color: var(--main);}
.text-sub { color: var(--sub);}

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

svg path.main { fill: var(--main);}
svg path.sub { fill: var(--sub);}