@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(77, 77, 77);
    --white: rgb(255, 255, 255);
    --grey: rgb(204, 204, 204);
    --lightgrey: rgb(249, 249, 249);
    --darkgrey: rgb(179, 179, 179);

    --blue: rgb(0, 63, 84);
    --green: rgb(58, 109, 114);
    --yellow: rgb(196, 153, 93);
    --brown: rgb(174, 141, 117);
    --beige: rgb(220, 193, 176);

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

    /*border-radius*/
    --box-radius: 2em;
    --box-radius-small: 1em;
    --section-radius: 0.5em;
}
/*===========================================================
    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;
}
.wrap{
    padding-top: 8em;
}
@media screen and (max-width: 959px) {
    .wrap {
        padding-top: 6em;
    }
}

/*===========================================================
    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.8rem;
    line-height: 1.5em;
    color: var(--black);
}
body::-webkit-scrollbar {
    display: none;
}

img,
picture {
    width: 100%;
    display: block;
}

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;
}
.reenie {
    font-family: "reenie-beanie", sans-serif;
    font-style: normal;
}
.kobe {
    font-family: "ta-kobe", 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-darkgrey__transparent { background: var(--darkgrey-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);}

/*svg fill*/
svg path.black { fill: var(--black);}
svg path.white { fill: var(--white);}
svg path.darkgrey { fill: var(--darkgrey);}
svg path.blue { fill: var(--blue);}
svg path.green { fill: var(--green);}
svg path.yellow { fill: var(--yellow);}
svg path.brown { fill: var(--brown);}
svg path.beige { fill: var(--beige);}